use color formatter

demo.html

@@ -10,22 +10,24 @@
     <div id="chart" style="width: 500px; height: 500px;"></div>
 
     <script type="text/javascript">
+      const datapoints1 = [
+        [100, -50, 0],
+        [200, 150, 0],
+        [100, 160, 1],
+        [150, 170, 1],
+        [150, 180, 0],
+        [150, 250, 1]
+      ];
       var pod = new ChartwerkScatterPod(
         document.getElementById('chart'),
         [
           {
             target: 'test1',
-            datapoints: [
+            datapoints: datapoints1,
-              [100, -50, 0],
-              [200, 150, 0],
-              [100, 160, 1],
-              [150, 170, 1],
-              [150, 180, 0],
-              [150, 250, 1]
-            ],
             color: 'red',
             lineType: 'dashed',
-            pointType: 'circle'
+            pointType: 'circle',
+            colorFormatter: (values, idx) => datapoints1[idx][2] === 0 ? 'blue' : 'green',
           },
           {
             target: 'test2',

dist/index.d.ts

@@ -14,6 +14,7 @@ export declare class ChartwerkScatterPod extends ChartwerkPod<ScatterData, Scatt
     protected renderLines(): void;
     renderLine(datapoints: number[][], lineType: LineType, color: string, orientation: yAxisOrientation): void;
     protected renderPoints(): void;
+    getSeriesColorFromDataRow(values: number[], rowIdx: number): string;
     onPanningEnd(): void;
     unhighlight(): void;
     highlight(pointIdx: number): void;

dist/types.d.ts

@@ -22,5 +22,5 @@ export declare enum LineType {
     SOLID = "solid",
     DASHED = "dashed"
 }
-export declare type ColorFormatter = (datapoint: number[]) => string;
+export declare type ColorFormatter = (datapoint: number[], pointIdx: any) => string;
 export {};

src/index.ts

@@ -130,7 +130,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
       .filter((d: number[]) => this.series[_.last(d)].pointType !== PointType.RECTANGLE)
       .attr('class', (d, i: number) => `metric-element metric-circle point-${i}`)
       .attr('r', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE)
-      .style('fill', (d: number[]) => this.getSerieColor(_.last(d)))
+      .style('fill', (d: number[], i: number) => this.getSeriesColorFromDataRow(d, i))
       .style('pointer-events', 'none')
       .attr('cx', (d: any[]) => this.xScale(d[0]))
       .attr('cy', (d: any[]) => this.getYScale(this.series[_.last(d)].yOrientation)(d[1]));
@@ -150,6 +150,14 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
       .attr('height', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE);
   }
 
+  getSeriesColorFromDataRow(values: number[], rowIdx: number): string {
+    const seriesIdx = _.last(values);
+    if(this.series[seriesIdx].colorFormatter) {
+      return this.series[seriesIdx].colorFormatter(values, rowIdx);
+    }
+    return this.getSerieColor(seriesIdx);
+  }
+
   onPanningEnd(): void {
     this.isPanning = false;
     this.onMouseOut();
@@ -176,13 +184,12 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
     const serieIdx = _.last(datapoint);
     const serieOrientation = this.series[serieIdx].yOrientation;
     const size = this.getCrosshairCircleBackgroundSize(serieIdx);
-    const colorFormatter = this.series[serieIdx].colorFormatter;
     this.crosshair.selectAll(`.crosshair-point-${serieIdx}`)
       .attr('cx', this.xScale(datapoint[0]))
       .attr('cy', this.getYScale(serieOrientation)(datapoint[1]))
       .attr('x', this.xScale(datapoint[0]) - size / 2)
       .attr('y', this.getYScale(serieOrientation)(datapoint[1]) - size / 2)
-      .attr('fill', colorFormatter !== undefined ? colorFormatter(datapoint) : this.series[serieIdx].color)
+      .attr('fill', this.getSeriesColorFromDataRow(datapoint, pointIdx))
       .style('display', null);
   }
 

src/types.ts

@@ -27,4 +27,4 @@ export enum LineType {
   DASHED = 'dashed'
 }
 
-export type ColorFormatter = (datapoint: number[]) => string;
+export type ColorFormatter = (datapoint: number[], pointIdx) => string;