feat(scatter): enhance custom stroke and fill colors

Author: scottdickerson

Diff for: packages/core/src/components/graphs/scatter.ts

@@ -62,7 +62,7 @@ export class Scatter extends Component {
 			.attr("r", options.points.radius)
 			.attr("fill", d => {
 				if (filled) {
-					return this.model.getFillScale()[d.datasetLabel](d.label) as any;
+					return this.model.getFillColor(d.datasetLabel, d.label, d.value);
 				}
 			})
 			.attr("fill-opacity", filled ? 0.2 : 1)
@@ -95,6 +95,7 @@ export class Scatter extends Component {
 			date: datum.date,
 			label: labels[i],
 			datasetLabel: d.label,
+			class: datum.class,
 			value: isNaN(datum) ? datum.value : datum
 		}));
 	}
@@ -106,7 +107,7 @@ export class Scatter extends Component {
 				const hoveredElement = select(this);
 				hoveredElement.classed("hovered", true);
 
-				hoveredElement.style("fill", (d: any) => self.model.getFillScale()[d.datasetLabel](d.label));
+				hoveredElement.style("fill", (d: any) => self.model.getFillColor(d.datasetLabel, d.label, d.value));
 
 				// Show tooltip
 				self.services.events.dispatchEvent("show-tooltip", {

Diff for: packages/core/src/interfaces/charts.ts

@@ -41,11 +41,11 @@ export interface BaseChartOptions {
 	/**
 	 * Optional function to generate the fill color based on datasetLabel, label, and/or value
 	 */
-	getFillColor?: (datasetLabel: any, label?: any, value?: any) => string;
+	getFillColor?: (datasetLabel: any, label?: any, value?: any, defaultFillColor?: string) => string;
 	/**
 	 * Optional function to generate the stroke color based on datasetLabel, label, and/or value
 	 */
-	getStrokeColor?: (datasetLabel: any, label?: any, value?: any) => string;
+	getStrokeColor?: (datasetLabel: any, label?: any, value?: any, defaultStrokeColor?: string) => string;
 	/**
 	 * stylesheet options
 	 */

Diff for: packages/core/src/model.ts

@@ -188,19 +188,21 @@ export class ChartModel {
 
 	getFillColor(datasetLabel: any, label?: any, value?: any) {
 		const options = this.getOptions();
+		const defaultFillColor = this.getFillScale()[datasetLabel](label);
 		if (options.getFillColor) {
-			return options.getFillColor(datasetLabel, label, value);
+			return options.getFillColor(datasetLabel, label, value, defaultFillColor);
 		} else {
-			return this.getFillScale()[datasetLabel](label);
+			return defaultFillColor;
 		}
 	}
 
 	getStrokeColor(datasetLabel: any, label?: any, value?: any) {
 		const options = this.getOptions();
+		const defaultStrokeColor = this.colorScale[datasetLabel](label);
 		if (options.getStrokeColor) {
-			return options.getStrokeColor(datasetLabel, label, value);
+			return options.getStrokeColor(datasetLabel, label, value, defaultStrokeColor);
 		} else {
-			return this.colorScale[datasetLabel](label);
+			return defaultStrokeColor;
 		}
 	}