Merge branch 'changed-index-calc-for-mouse-position' into 'main'

Idx for zipped data && fix size of triangles

See merge request chartwerk/bar-pod!4

package.json

@@ -15,7 +15,7 @@
   "author": "CorpGlory",
   "license": "Apache-2.0",
   "dependencies": {
-    "@chartwerk/core": "0.3.10"
+    "@chartwerk/core": "0.4.0"
   },
   "devDependencies": {
     "@types/d3": "^5.7.2",

src/index.ts

@@ -101,9 +101,30 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
     // (x, y) - top left corner
     const Y_OFFSET = 2;
     const correctedY = Math.max(y, Y_OFFSET);
-    return `M ${x - Y_OFFSET} ${correctedY - Y_OFFSET}
-      L ${x + length + Y_OFFSET} ${correctedY - Y_OFFSET}
-      L ${x + length / 2} ${correctedY + length - Y_OFFSET} z`;
+    const correctedLength = length <= 10 ? length : 10;
+
+    let x1 = x - Y_OFFSET;
+    let x2 = x + length + Y_OFFSET;
+    let x1x2Len = x2 - x1;
+
+    let y1 = correctedY - Y_OFFSET;
+    let yM = correctedY + length - Y_OFFSET;
+    if (x1x2Len > correctedLength) {
+      const xDiff = x1x2Len - correctedLength;
+      x1 += xDiff / 2;
+      x2 -= xDiff / 2;
+
+      const yDiff = yM - y1;
+
+      if (xDiff < yDiff) {
+        y1 += (yDiff - xDiff) + Y_OFFSET*3;
+      }
+    }
+    const x3 = x + length / 2;
+
+    return `M ${x1} ${y1}
+      L ${x2} ${y1}
+      L ${x3} ${yM} z`;
   }
 
   getBarOpacity(rowValues: RowValues): number {
@@ -164,7 +185,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
     const tagrets = _.map(series, serie => serie.target);
     const zippedData = _.zip(keysColumn, zippedValuesColumn, zippedAdditionalValuesColumn, tagrets);
     const data = _.map(zippedData, row => { return { key: row[0], values: row[1], additionalValues: row[2], colors, serieTarget: tagrets } });
-    return data;
+    return data.filter(v => v.key !== undefined);
   }
 
   public renderSharedCrosshair(values: { x?: number, y?: number }): void {
@@ -213,23 +234,21 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
     if(this.series === undefined || this.series.length === 0) {
       return undefined;
     }
+    const mouseDate = Math.ceil(this.xScale.invert(eventX));
 
-    const bisectDate = this.d3.bisector((d: [number, number]) => d[1]).left;
-    const mouseDate = this.xScale.invert(eventX);
-
-    let idx = bisectDate(this.series[0].datapoints, mouseDate) - 1;
-
+    const zippedData = this.getZippedDataForRender(this.visibleSeries);
+    // get the nearest RowValues element for mouseDate
+    const keys = _.map(zippedData, 'key').sort((a, b) => (a - mouseDate) - (mouseDate - b));
+    const idx = _.findIndex(zippedData, (a) => a.key == keys[0]);
     const series: any[] = [];
-    for(let i = 0; i < this.series.length; i++) {
-      if(this.series[i].visible === false || this.series[i].datapoints.length < idx + 1) {
-        continue;
-      }
+
+    for(let i = 0; i < zippedData[idx].values.length; i++) {
 
       series.push({
-        value: this.series[i].datapoints[idx][0],
-        xval: this.series[i].datapoints[idx][1],
-        color: this.getBarColor(this.series[i]),
-        label: this.series[i].alias || this.series[i].target
+        value: zippedData[idx].key,
+        xval: zippedData[idx].values[i],
+        color: zippedData[idx].colors[i],
+        label: zippedData[idx].serieTarget[i]
       });
     }
     return series;