prettify code

demo.html

@@ -13,7 +13,7 @@
       var pod = new ChartwerkBarPod(
         document.getElementById('chart'),
         [
-          { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', annotation: { enabled: true, type: 'triangle', color: 'green' }  },
+          { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red'  },
           { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' },
           { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'},
           { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },

dist/index.d.ts

@@ -7,6 +7,7 @@ export declare class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptio
     protected renderMetrics(): void;
     setBarPodScales(): void;
     renderSerie(data: any): void;
+    getTrianglePath(x: number, y: number, length: number): string;
     getBarOpacity(rowValues: RowValues): number;
     mergeMacthedSeriesAndSort(matchedSeries: any[]): any;
     get seriesUniqKeys(): string[];

dist/types.d.ts

@@ -14,7 +14,6 @@ export declare type BarOptionsParams = {
     opacityFormatter: (data: RowValues) => number;
     annotations: {
         key: string;
-        type?: string;
         color: string;
     }[];
 };

src/index.ts

@@ -72,8 +72,9 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
         if(_.isEmpty(this.options.annotations)) {
           return;
         }
+        // find all series for single matchedKey
         const series = _.filter(this.series, serie => _.includes(d.serieTarget, serie.target));
-        const matchedKeys = _.map(series, serie => serie.matchedKey);
+        const matchedKeys = _.map(series, serie => serie.matchedKey); // here matchedKeys should be equal
         const key = matchedKeys[0];
         
         const lastRect = _.last(container.selectAll('rect')?.nodes());
@@ -83,16 +84,22 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
         }
         
         const rectSelection = d3.select(lastRect);
+        // render triangle
         container.append('path')
           .attr('d', () => {
             const x = Math.ceil(_.toNumber(rectSelection.attr('x')));
             const y = Math.max(Math.ceil(_.toNumber(rectSelection.attr('y'))) - this.barWidth, 0);
-            return `M ${x} ${y} L ${x + this.barWidth } ${y} L ${x + this.barWidth / 2} ${ y + this.barWidth / 2} z`;
+            return this.getTrianglePath(x, y, this.barWidth);
           })
           .attr('fill', annotation.color);
       });
   }
 
+  getTrianglePath(x: number, y: number, length: number): string {
+    // (x, y) - top left corner
+    return `M ${x - 2} ${y - 2} L ${x + length + 2} ${y - 2} L ${x + length / 2 } ${y + length - 2} z`;
+  }
+
   getBarOpacity(rowValues: RowValues): number {
     if(this.options.opacityFormatter === undefined) {
       return 1;

src/types.ts

@@ -15,7 +15,7 @@ export type BarOptionsParams = {
   opacityFormatter: (data: RowValues) => number;
   annotations: {
     key: string, // matchedKey from series
-    type?: string, // only "triangle" for now
+     // TODO: add  enum with "triangle" option 
     color: string,
   }[];
 }