fix(scatter): custom point colors demo

Author: scottdickerson

Diff for: packages/core/demo/chart-types.ts

@@ -17,6 +17,7 @@ const {
 	donutData,
 	// Line
 	lineTimeSeriesOptions,
+	lineTimeSeriesWithCustomStroke,
 	lineTimeSeriesData,
 	lineData,
 	lineOptions,
@@ -83,6 +84,11 @@ export const chartTypes = [
 		options: lineTimeSeriesOptions,
 		data: lineTimeSeriesData
 	},
+	{
+		id: "line-time-series-customstroke",
+		options: lineTimeSeriesWithCustomStroke,
+		data: lineTimeSeriesData
+	},
 	{
 		id: "line",
 		options: lineOptions,

Diff for: packages/core/demo/demo-data/line.ts

@@ -125,6 +125,23 @@ export const lineTimeSeriesOptions = {
 	curve: "curveMonotoneX"
 };
 
+export const lineTimeSeriesWithCustomStroke = {
+	...lineTimeSeriesOptions,
+	title: "Line (custom stroke, fill colors)",
+	getStrokeColor: (datasetLabel, label, value, datum, originalStrokeColor)=>{
+		console.log(`originalStrokeColor: ${originalStrokeColor}`);
+		return value > 60000 ? '#FF0000' : originalStrokeColor;
+	},
+	getFillColor: (datasetLabel, label, value, datum, originalFillColor)=>{
+		console.log(`originalFillColor: ${originalFillColor}`);
+		return value > 60000 ? '#FF0000' : originalFillColor;
+	},
+	getIsFilled: (datasetLabel, label, value, datum, originalIsFilled)=>{
+		console.log(`originalIsFilled: ${originalIsFilled}`);
+		return value > 60000 ? true : originalIsFilled;
+	}
+};
+
 export const lineData = {
 	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
 	datasets: [
@@ -211,6 +228,7 @@ export const lineOptions = {
 	}
 };
 
+
 // Step
 export const stepOptions = Tools.merge({}, lineOptions, {
 	title: "Step (discrete)",

Diff for: packages/core/demo/index.ts

@@ -173,6 +173,7 @@ chartTypes.forEach(type => {
 				break;
 			case "line":
 			case "line-time-series":
+			case "line-time-series-customstroke":
 			case "line-step":
 			case "line-step-time-series":
 				classToInitialize = LineChart;

Diff for: packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts",
-  "version": "0.16.25",
+  "version": "0.16.26",
   "description": "Carbon charting components",
   "main": "./bundle.js",
   "module": "./index.js",

Diff for: packages/core/src/components/axes/axis.ts

@@ -4,6 +4,7 @@ import { AxisPositions, ScaleTypes, AxisTypes } from "../../interfaces";
 import { Tools } from "../../tools";
 import { ChartModel } from "../../model";
 import { DOMUtils } from "../../services";
+const englishLocale = require("d3-time-format/locale/en-US.json");
 
 // D3 Imports
 import { scaleBand, scaleLinear, scaleTime, scaleLog, scaleOrdinal } from "d3-scale";
@@ -195,6 +196,8 @@ export class Axis extends Component {
 			const timeLocale = Tools.getProperty(options, "locale", "time");
 			if (timeLocale) {
 				timeFormatDefaultLocale(timeLocale);
+			} else {
+				timeFormatDefaultLocale(englishLocale);
 			}
 		}
 

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

@@ -54,19 +54,19 @@ export class Scatter extends Component {
 		dotsEnter.merge(dots)
 			.raise()
 			.classed("dot", true)
-			.classed("filled", d => this.model.getIsFilled(d.datasetLabel, d.label, d.value, filled))
-			.classed("unfilled", d => !this.model.getIsFilled(d.datasetLabel, d.label, d.value, filled))
+			.classed("filled", d => this.model.getIsFilled(d.datasetLabel, d.label, d.value, d, filled))
+			.classed("unfilled", d => !this.model.getIsFilled(d.datasetLabel, d.label, d.value, d, filled))
 			.attr("cx", (d, i) => this.services.axes.getXValue(d, i))
 			.transition(this.services.transitions.getTransition("scatter-update-enter", animate))
 			.attr("cy", (d, i) => this.services.axes.getYValue(d, i))
 			.attr("r", options.points.radius)
 			.attr("fill", d => {
-				if (this.model.getIsFilled(d.datasetLabel, d.label, d.value, filled)) {
-					return this.model.getFillColor(d.datasetLabel, d.label, d.value);
+				if (this.model.getIsFilled(d.datasetLabel, d.label, d.value, d, filled)) {
+					return this.model.getFillColor(d.datasetLabel, d.label, d.value, d);
 				}
 			})
 			.attr("fill-opacity", filled ? 0.2 : 1)
-			.attr("stroke", d => this.model.getStrokeColor(d.datasetLabel, d.label, d.value))
+			.attr("stroke", d => this.model.getStrokeColor(d.datasetLabel, d.label, d.value, d))
 			.attr("opacity", 1);
 
 		// Add event listeners to elements drawn

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

@@ -41,15 +41,15 @@ export interface BaseChartOptions {
 	/**
 	 * Optional function to determine whether is filled based on datasetLabel, label, and/or value
 	 */
-	getIsFilled?: (datasetLabel: any, label?: any, value?: any, defaultFilled?: boolean) => boolean;
+	getIsFilled?: (datasetLabel: any, label?: any, value?: any, data?: any, defaultFilled?: boolean) => boolean;
 	/**
 	 * Optional function to generate the fill color based on datasetLabel, label, and/or value
 	 */
-	getFillColor?: (datasetLabel: any, label?: any, value?: any, defaultFillColor?: string) => string;
+	getFillColor?: (datasetLabel: any, label?: any, value?: any, data?: 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, defaultStrokeColor?: string) => string;
+	getStrokeColor?: (datasetLabel: any, label?: any, value?: any, data?: any, defaultStrokeColor?: string) => string;
 	/**
 	 * stylesheet options
 	 */

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

@@ -193,30 +193,30 @@ export class ChartModel {
 	 * @param value
 	 * @param defaultFilled the default for this chart
 	 */
-	getIsFilled(datasetLabel: any, label?: any, value?: any, defaultFilled?: boolean) {
+	getIsFilled(datasetLabel: any, label?: any, value?: any, data?: any, defaultFilled?: boolean) {
 		const options = this.getOptions();
 		if (options.getIsFilled) {
-			return options.getIsFilled(datasetLabel, label, value);
+			return options.getIsFilled(datasetLabel, label, value, data, defaultFilled);
 		} else {
 			return defaultFilled;
 		}
 	}
 
-	getFillColor(datasetLabel: any, label?: any, value?: any) {
+	getFillColor(datasetLabel: any, label?: any, value?: any, data?: any) {
 		const options = this.getOptions();
 		const defaultFillColor = this.getFillScale()[datasetLabel](label);
 		if (options.getFillColor) {
-			return options.getFillColor(datasetLabel, label, value, defaultFillColor);
+			return options.getFillColor(datasetLabel, label, value, data, defaultFillColor);
 		} else {
 			return defaultFillColor;
 		}
 	}
 
-	getStrokeColor(datasetLabel: any, label?: any, value?: any) {
+	getStrokeColor(datasetLabel: any, label?: any, value?: any, data?: any) {
 		const options = this.getOptions();
 		const defaultStrokeColor = this.colorScale[datasetLabel](label);
 		if (options.getStrokeColor) {
-			return options.getStrokeColor(datasetLabel, label, value, defaultStrokeColor);
+			return options.getStrokeColor(datasetLabel, label, value, data, defaultStrokeColor);
 		} else {
 			return defaultStrokeColor;
 		}