fix(scatter): simplify the callback parameters

carbon-design-system · Jan 17, 2020 · c541e8a · c541e8a
1 parent b3ab5aa
commit c541e8a
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 21 deletions.
diff --git a/packages/core/demo/demo-data/line.ts b/packages/core/demo/demo-data/line.ts
@@ -124,17 +124,17 @@ export const lineTimeSeriesOptions = {
 export const lineTimeSeriesWithCustomStroke = {
 	...lineTimeSeriesOptions,
 	title: "Line (custom stroke, fill colors)",
-	getStrokeColor: (datasetLabel, label, value, datum, originalStrokeColor)=>{
+	getStrokeColor: (datasetLabel, label, data, originalStrokeColor)=>{
 		console.log(`originalStrokeColor: ${originalStrokeColor}`);
-		return value > 60000 ? '#FF0000' : originalStrokeColor;
+		return data && data.value > 60000 ? '#FF0000' : originalStrokeColor;
 	},
-	getFillColor: (datasetLabel, label, value, datum, originalFillColor)=>{
+	getFillColor: (datasetLabel, label, data, originalFillColor)=>{
 		console.log(`originalFillColor: ${originalFillColor}`);
-		return value > 60000 ? '#FF0000' : originalFillColor;
+		return data && data.value > 60000 ? '#FF0000' : originalFillColor;
 	},
-	getIsFilled: (datasetLabel, label, value, datum, originalIsFilled)=>{
+	getIsFilled: (datasetLabel, label, data, originalIsFilled)=>{
 		console.log(`originalIsFilled: ${originalIsFilled}`);
-		return value > 60000 ? true : originalIsFilled;
+		return data && data.value > 60000 ? true : originalIsFilled;
 	}
 };
 

diff --git a/packages/core/src/components/essentials/tooltip-bar.ts b/packages/core/src/components/essentials/tooltip-bar.ts
@@ -37,7 +37,7 @@ export class TooltipBar extends Tooltip {
 				if (e.detail.multidata) {
 					// multi tooltip
 					data = e.detail.multidata;
-					defaultHTML = this.getMultilineTooltipHTML(e.detail.multidata);
+					defaultHTML = this.getMultilineTooltipHTML(data);
 				} else {
 					defaultHTML = this.getTooltipHTML(e.detail.hoveredElement.datum());
 				}
@@ -143,7 +143,8 @@ export class TooltipBar extends Tooltip {
 				const formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
 				this.model.getOptions().tooltip.valueFormatter(datapoint.value) : datapoint.value.toLocaleString("en");
 
-				const indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label, datapoint.value, datapoint);
+				// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
+				const indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label);
 
 				return `
 				<li>

diff --git a/packages/core/src/components/essentials/tooltip.ts b/packages/core/src/components/essentials/tooltip.ts
@@ -132,7 +132,8 @@ export class Tooltip extends Component {
 				const formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
 				this.model.getOptions().tooltip.valueFormatter(datapointValue) : datapointValue.toLocaleString("en");
 
-				const indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel);
+				// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
+				const indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label);
 
 				return `
 				<li>

diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts
@@ -55,19 +55,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, d, filled))
-			.classed("unfilled", d => !this.model.getIsFilled(d.datasetLabel, d.label, d.value, d, filled))
+			.classed("filled", d => this.model.getIsFilled(d.datasetLabel, d.label, d, filled))
+			.classed("unfilled", d => !this.model.getIsFilled(d.datasetLabel, d.label, 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, d, filled)) {
-					return this.model.getFillColor(d.datasetLabel, d.label, d.value, d);
+				if (this.model.getIsFilled(d.datasetLabel, d.label, d, filled)) {
+					return this.model.getFillColor(d.datasetLabel, d.label, 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))
 			.attr("opacity", 1)
 			// a11y
 			.attr("role", Roles.GRAPHICS_SYMBOL)
@@ -112,7 +112,7 @@ export class Scatter extends Component {
 				const hoveredElement = select(this);
 				hoveredElement.classed("hovered", true);
 
-				hoveredElement.style("fill", (d: any) => self.model.getFillColor(d.datasetLabel, d.label, d.value, d));
+				hoveredElement.style("fill", (d: any) => self.model.getFillColor(d.datasetLabel, d.label, d));
 
 				const eventNameToDispatch = d3Event.type === "mouseover" ? Events.Scatter.SCATTER_MOUSEOVER : Events.Scatter.SCATTER_MOUSEMOVE;
 				// Dispatch mouse event

diff --git a/packages/core/src/model.ts b/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, data?: any, defaultFilled?: boolean) {
+	getIsFilled(datasetLabel: any, label?: any, data?: any, defaultFilled?: boolean) {
 		const options = this.getOptions();
 		if (options.getIsFilled) {
-			return options.getIsFilled(datasetLabel, label, value, data, defaultFilled);
+			return options.getIsFilled(datasetLabel, label, data, defaultFilled);
 		} else {
 			return defaultFilled;
 		}
 	}
 
-	getFillColor(datasetLabel: any, label?: any, value?: any, data?: any) {
+	getFillColor(datasetLabel: any, label?: any, data?: any) {
 		const options = this.getOptions();
 		const defaultFillColor = this.getFillScale()[datasetLabel](label);
 		if (options.getFillColor) {
-			return options.getFillColor(datasetLabel, label, value, data, defaultFillColor);
+			return options.getFillColor(datasetLabel, label, data, defaultFillColor);
 		} else {
 			return defaultFillColor;
 		}
 	}
 
-	getStrokeColor(datasetLabel: any, label?: any, value?: any, data?: any) {
+	getStrokeColor(datasetLabel: any, label?: any, data?: any) {
 		const options = this.getOptions();
 		const defaultStrokeColor = this.colorScale[datasetLabel](label);
 		if (options.getStrokeColor) {
-			return options.getStrokeColor(datasetLabel, label, value, data, defaultStrokeColor);
+			return options.getStrokeColor(datasetLabel, label, data, defaultStrokeColor);
 		} else {
 			return defaultStrokeColor;
 		}