From 8f49dc681d9f968d889807518ed5d9586ef70189 Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <cg@corpglory.com>
Date: Thu, 28 Oct 2021 20:21:42 +0300
Subject: [PATCH] time/value order change attempt

---
 examples/demo.html          |  6 ++---
 examples/demo_live.html     | 12 ++++-----
 examples/demo_vertical.html |  4 +--
 package.json                |  2 +-
 src/index.ts                | 52 ++++++++++++++++++-------------------
 5 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/examples/demo.html b/examples/demo.html
index dc51f13..6ba2e77 100755
--- a/examples/demo.html
+++ b/examples/demo.html
@@ -12,9 +12,9 @@
     <script type="text/javascript">
       const startTime = 1590590148;
       const arrayLength = 20;
-      const data1 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 40), startTime + idx * 10000]);
-      const data2 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 100), startTime + idx * 10000]);
-      const data3 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 20) + 90, startTime + idx * 10000]);
+      const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
+      const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
+      const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
       const zoomIn = (ranges) => { const range = ranges[0]; options.axis.x.range = range; pod.updateData(undefined, options) }
       const zoomOut = (ranges) => { console.log('zoomout'); options.axis.x.range = undefined; pod.updateData(undefined, options) }
       let options = {
diff --git a/examples/demo_live.html b/examples/demo_live.html
index 5bed679..2c9a4d9 100755
--- a/examples/demo_live.html
+++ b/examples/demo_live.html
@@ -14,9 +14,9 @@
   <script type="text/javascript">
     const startTime = 1590590148;
     const arrayLength = 100;
-    const data1 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 40), startTime + idx * 10000]);
-    const data2 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 100), startTime + idx * 10000]);
-    const data3 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 20) + 90, startTime + idx * 10000]);
+    const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
+    const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
+    const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
     let options = { renderLegend: false, usePanning: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } } };
     var pod = new LinePod(
       document.getElementById('chart'),
@@ -31,9 +31,9 @@
     let rerenderIdx = arrayLength;
     var test = setInterval(() => {
       rerenderIdx += 1;
-      const d1 = [Math.floor(Math.random() * 40), startTime + rerenderIdx * 10000];
-      const d2 = [Math.floor(Math.random() * 100), startTime + rerenderIdx * 10000];
-      const d3 = [Math.floor(Math.random() * 20) + 90, startTime + rerenderIdx * 10000];
+      const d1 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
+      const d2 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 100)];
+      const d3 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
 
       console.time('rerender');
       pod.appendData([d1, d2, d3]);
diff --git a/examples/demo_vertical.html b/examples/demo_vertical.html
index 4830608..ebb45fc 100644
--- a/examples/demo_vertical.html
+++ b/examples/demo_vertical.html
@@ -66,8 +66,8 @@
 
       function createDatapoints(arrayLength, startTime, randomValue, randomOffset = 0) {
         return Array.from({ length: arrayLength }, (el, idx) => [
-          startTime + idx * 10000, // y axis
-          Math.floor(Math.random() * randomValue) + randomOffset // x axis
+          Math.floor(Math.random() * randomValue) + randomOffset, // x axis
+          startTime + idx * 10000 // y axis
         ]);
       }
 
diff --git a/package.json b/package.json
index ac137e5..0e325df 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   "author": "CorpGlory",
   "license": "ISC",
   "dependencies": {
-    "@chartwerk/core": "^0.1.1"
+    "@chartwerk/core": "^0.2.0"
   },
   "devDependencies": {
     "@types/d3": "5.16.4",
diff --git a/src/index.ts b/src/index.ts
index ec227e9..15b1b10 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -93,8 +93,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       if(this.series[idx].renderDots === true) {
         this.metricContainer.selectAll(`.metric-circle-${idx}`)
           .data(this.series[idx].datapoints)
-          .attr('cx', d => this.xScale(d[1]))
-          .attr('cy', d => this.yScale(d[0]));
+          .attr('cx', d => this.xScale(d[0]))
+          .attr('cy', d => this.yScale(d[1]));
 
         this._renderDots([data[idx]], idx);
       }
@@ -114,8 +114,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       .attr('fill', this.getSerieColor(serieIdx))
       .attr('r', METRIC_CIRCLE_RADIUS)
       .style('pointer-events', 'none')
-      .attr('cx', d => this.xScale(d[1]))
-      .attr('cy', d => this.yScale(d[0]));
+      .attr('cx', d => this.xScale(d[0]))
+      .attr('cy', d => this.yScale(d[1]));
   }
 
   _renderLines(datapoints: number[][], serieIdx: number): void {
@@ -153,10 +153,10 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
         .data(dataPairs)
         .enter()
         .append('line')
-        .attr('x1', d => this.xScale(d[0][1]))
-        .attr('x2', d => this.xScale(d[1][1]))
-        .attr('y1', d => this.yScale(d[0][0]))
-        .attr('y2', d => this.yScale(d[1][0]))
+        .attr('x1', d => this.xScale(d[0][0]))
+        .attr('x2', d => this.xScale(d[1][0]))
+        .attr('y1', d => this.yScale(d[0][1]))
+        .attr('y2', d => this.yScale(d[1][1]))
         .attr('stroke-opacity', 0.7)
         .style('stroke-width', 1)
         .style('stroke', d => {
@@ -197,7 +197,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     }
 
     if(upperBoundDatapoints.length > 0 && lowerBoundDatapoints.length > 0) {
-      const zip = (arr1, arr2) => arr1.map((k, i) => [k[0],k[1], arr2[i][0]]);
+      const zip = (arr1, arr2) => arr1.map((k, i) => [k[0], k[1], arr2[i][1]]);
       const data = zip(upperBoundDatapoints, lowerBoundDatapoints);
 
       this.metricContainer.append('path')
@@ -206,8 +206,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
         .attr('stroke', 'none')
         .attr('opacity', '0.3')
         .attr('d', this.d3.area()
-          .x((d: number[]) => this.xScale(d[1]))
-          .y0((d: number[]) => this.yScale(d[0]))
+          .x((d: number[]) => this.xScale(d[0]))
+          .y0((d: number[]) => this.yScale(d[1]))
           .y1((d: number[]) => this.yScale(d[2]))
         )
     }
@@ -219,9 +219,9 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
         .attr('stroke', 'none')
         .attr('opacity', '0.3')
         .attr('d', this.d3.area()
-          .x((d: [number, number]) => this.xScale(d[1]))
-          .y0((d: [number, number]) => this.yScale(d[0] + metricOptions.confidence))
-          .y1((d: [number, number]) => this.yScale(d[0] - metricOptions.confidence))
+          .x((d: [number, number]) => this.xScale(d[0]))
+          .y0((d: [number, number]) => this.yScale(d[1] + metricOptions.confidence))
+          .y1((d: [number, number]) => this.yScale(d[1] - metricOptions.confidence))
         )
     }
   }
@@ -324,16 +324,16 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 
   getClosestIndex(datapoints: [number, number][], xValue: number, yValue: number): number {
-    let columnIdx; // 0 for y value, 1 for x value
+    let columnIdx; // 1 for y value, 0 for x value
     let value; // xValue ot y Value
     switch(this.options.crosshair.orientation) {
       case CrosshairOrientation.HORIZONTAL:
         columnIdx = 0;
-        value = yValue;
+        value = xValue;
         break;
       case CrosshairOrientation.VERTICAL:
         columnIdx = 1;
-        value = xValue;
+        value = yValue;
         break;
       case CrosshairOrientation.BOTH:
         // TODO: maybe use voronoi
@@ -364,7 +364,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 
   getValueInterval(columnIdx: number): number | undefined {
-    // columnIdx: 0 for y, 1 for x
+    // columnIdx: 1 for y, 0 for x
     // inverval: x/y value interval between data points
     // TODO: move it to base/state instead of timeInterval
     const intervals = _.map(this.series, serie => {
@@ -429,8 +429,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
         return;
       }
 
-      const yPosition = this.yScale(closestDatapoint[0]);
-      const xPosition = this.xScale(closestDatapoint[1]);
+      const xPosition = this.xScale(closestDatapoint[0]);
+      const yPosition = this.yScale(closestDatapoint[1]);
       this.moveCrosshairCircle(xPosition, yPosition, serieIdx);
 
       points.push({
@@ -448,20 +448,20 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     if(useOutOfRange === false) {
       return false;
     }
-    let columnIdx; // 0 for y value, 1 for x value
+    let columnIdx; // 1 for y value, 0 for x value
     let value; // xValue ot y Value
     switch(this.options.crosshair.orientation) {
-      case CrosshairOrientation.HORIZONTAL:
+      case CrosshairOrientation.VERTICAL:
         columnIdx = 0;
-        value = yValue;
+        value = xValue;
         break;
-      case CrosshairOrientation.VERTICAL:
+      case CrosshairOrientation.HORIZONTAL:
         columnIdx = 1;
-        value = xValue;
+        value = yValue;
         break;
       case CrosshairOrientation.BOTH:
         // TODO: maybe use voronoi
-        columnIdx = 0;
+        columnIdx = 1;
         value = yValue;
       default:
         throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`);