diff --git a/packages/core/demo/demo-data/line.ts b/packages/core/demo/demo-data/line.ts index 9196cdaafc..cb4f5fa09c 100644 --- 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 index afe8e968b9..25db8b0908 100644 --- 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 `
  • diff --git a/packages/core/src/components/essentials/tooltip.ts b/packages/core/src/components/essentials/tooltip.ts index 4fc26b53b1..e3b22cbe46 100644 --- 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 `
  • diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts index 2dfd2418bf..7a8da6f596 100644 --- 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 index af8ef30d7c..de9c7e72b3 100644 --- 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; }