fix(getFillColor):data parameter missing from the arguments

packages/core/src/components/graphs/alluvial.ts

@@ -211,8 +211,11 @@ export class Alluvial extends Component {
 				if (isGradientAllowed) {
 					return `url(#${this.gradient_id}-link-${d.index})`
 				}
-
-				return this.model.getFillColor(d.source.name)
+				return this.model.getFillColor(d.source.name, null, {
+					...d,
+					source: d.source.name,
+					target: d.target.name
+				})
 			})
 			.attr('stroke-width', (d: any) => Math.max(1, d.width))
 			.style('stroke-opacity', alluvialConfigs.opacity.default)

packages/core/src/components/graphs/area-stacked.ts

@@ -26,14 +26,12 @@ export class StackedArea extends Component {
 		const self = this
 		const options = this.getOptions()
 		const { groupMapsTo } = options.data
-
 		const percentage = Object.keys(options.axes).some(axis => options.axes[axis].percentage)
 
 		const stackedData = this.model.getStackedData({
 			percentage,
 			groups: this.configs.groups
 		})
-
 		const datum = getProperty(stackedData, 0, 0) as number[] // firstDatum name could not be used by getDomainAxisPosition() and getRangeAxisPosition() below
 
 		// area doesn't have to use the main range and domain axes - they can be mapped to the secondary (in the case of a combo chart)
@@ -73,7 +71,7 @@ export class StackedArea extends Component {
 					originalClassName: 'area'
 				})
 			)
-			.style('fill', (d: any) => self.model.getFillColor(getProperty(d, 0, groupMapsTo)))
+			.style('fill', (d: any) => self.model.getFillColor(getProperty(d, 0, groupMapsTo), null, d))
 			.attr('role', Roles.GRAPHICS_SYMBOL)
 			.attr('aria-roledescription', 'area')
 			.attr('aria-label', (d: any) => getProperty(d, 0, groupMapsTo))

packages/core/src/components/graphs/area.ts

@@ -198,7 +198,7 @@ export class Area extends Component {
 						originalClassName: 'area'
 					})
 				)
-				.style('fill', (group: any) => self.model.getFillColor(group.name))
+				.style('fill', (group: any) => self.model.getFillColor(group.name, null, group.data))
 				.transition()
 				.call((t: any) =>
 					this.services.transitions.setupTransition({
@@ -216,7 +216,9 @@ export class Area extends Component {
 			if (boundsEnabled) {
 				enteringAreas
 					.attr('fill-opacity', areaConfigs.opacity.selected)
-					.style('stroke', (group: any) => self.model.getStrokeColor(group.name))
+					.style('stroke', (group: any) =>
+						self.model.getStrokeColor(group.name, undefined, group.data)
+					)
 					.style('stroke-dasharray', '2, 2')
 					.attr('stroke-width', 0.7 + 'px')
 			}

packages/core/src/components/graphs/bar-grouped.ts

@@ -117,7 +117,10 @@ export class GroupedBar extends Bar {
 					originalClassName: 'bar'
 				})
 			)
-			.style('fill', (d: any) => this.model.getFillColor(d[groupMapsTo]))
+			.style('fill', (d: any) => {
+				const domainIdentifier = this.services.cartesianScales.getDomainIdentifier(d)
+				return this.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d)
+			})
 			.attr('d', (d: any) => {
 				/*
 				 * Orientation support for horizontal/vertical bar charts

packages/core/src/components/graphs/bar-simple.ts

@@ -57,7 +57,10 @@ export class SimpleBar extends Bar {
 					originalClassName: 'bar'
 				})
 			)
-			.style('fill', (d: any) => this.model.getFillColor(d[groupMapsTo]))
+			.style('fill', (d: any) => {
+				const domainIdentifier = this.services.cartesianScales.getDomainIdentifier(d)
+				return this.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d)
+			})
 			.attr('d', (d: any) => {
 				/*
 				 * Orientation support for horizontal/vertical bar charts

packages/core/src/components/graphs/bar-stacked.ts

@@ -86,7 +86,9 @@ export class StackedBar extends Bar {
 					originalClassName: 'bar'
 				})
 			)
-			.style('fill', (d: any) => this.model.getFillColor(d[groupMapsTo]))
+			.style('fill', (d: any) =>
+				this.model.getFillColor(d[groupMapsTo], d.data.sharedStackKey, d.data)
+			)
 			.attr('d', (d: any) => {
 				const key = d.data.sharedStackKey as string
 

packages/core/src/components/graphs/bullet.ts

@@ -137,7 +137,10 @@ export class Bullet extends Component {
 						originalClassName: 'bar'
 					})
 				)
-				.style('fill', (d: any) => this.model.getFillColor(d[groupMapsTo]))
+				.style('fill', (d: any) => {
+					const domainIdentifier = this.services.cartesianScales.getDomainIdentifier(d)
+					return this.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d)
+				})
 				.attr('d', (d: any) => {
 					/*
 					 * Orientation support for horizontal/vertical bar charts

packages/core/src/components/graphs/circle-pack.ts

@@ -87,8 +87,8 @@ export class CirclePack extends Component {
 						: `node node-leaf ${originalClass}`
 				})
 			})
-			.style('fill', (d: any) => this.model.getFillColor(d.data.dataGroupName))
-			.style('stroke', (d: any) => this.model.getFillColor(d.data.dataGroupName))
+			.style('fill', (d: any) => this.model.getFillColor(d.data.dataGroupName, null, d.data))
+			.style('stroke', (d: any) => this.model.getFillColor(d.data.dataGroupName, null, d.data))
 			.attr('cx', (d: any) => d.x)
 			.attr('cy', (d: any) => d.y)
 			.transition('circlepack-leaf-update-enter')
@@ -123,7 +123,7 @@ export class CirclePack extends Component {
 		this.parent
 			.selectAll('circle.node')
 			.filter((d: any) => data.some((datum: any) => datum === d.data) && d.depth > 1)
-			.style('stroke', (d: any) => this.model.getFillColor(d.data.dataGroupName))
+			.style('stroke', (d: any) => this.model.getFillColor(d.data.dataGroupName, null, d.data))
 	}
 
 	// highlight the children circles with a stroke

packages/core/src/components/graphs/heatmap.ts

@@ -113,11 +113,12 @@ export class Heatmap extends Component {
 			.attr('width', this.xBandwidth)
 			.attr('height', this.yBandwidth)
 			.style('fill', (d: any) => {
+				const domainIdentifier = this.services.cartesianScales.getDomainIdentifier(d)
 				// Check if a valid value exists
 				if (d.index === -1 || d.value === null) {
 					return `url(#${patternID})`
 				}
-				return this.model.getFillColor(Number(d.value))
+				return this.model.getFillColor(Number(d.value), d[domainIdentifier], d)
 			})
 			.attr('aria-label', (d: any) => d.value)
 

packages/core/src/components/graphs/histogram.ts

@@ -72,7 +72,7 @@ export class Histogram extends Component {
 					originalClassName: 'bar'
 				})
 			)
-			.style('fill', (d: any) => this.model.getFillColor(d[groupMapsTo]))
+			.style('fill', (d: any) => this.model.getFillColor(d[groupMapsTo], null, d))
 			.attr('d', (d: any) => {
 				const bin = get(d, 'data')
 

packages/core/src/components/graphs/line.ts

@@ -94,7 +94,7 @@ export class Line extends Component {
 					originalClassName: 'line'
 				})
 			)
-			.style('stroke', (group: any) => this.model.getStrokeColor(group.name))
+			.style('stroke', (group: any) => this.model.getStrokeColor(group.name, undefined, group.data))
 			// a11y
 			.attr('role', Roles.GRAPHICS_SYMBOL)
 			.attr('aria-roledescription', 'line')

packages/core/src/components/graphs/meter.ts

@@ -136,7 +136,7 @@ export class Meter extends Component {
 			.attr('width', (d: any) => {
 				return d.value > domainMax ? xScale(domainMax) : d.width
 			})
-			.style('fill', (d: any) => self.model.getFillColor(d[groupMapsTo]))
+			.style('fill', (d: any) => self.model.getFillColor(d[groupMapsTo], null, d))
 			// a11y
 			.attr('role', Roles.GRAPHICS_SYMBOL)
 			.attr('aria-roledescription', 'value')

packages/core/src/components/graphs/pie.ts

@@ -101,7 +101,7 @@ export class Pie extends Component {
 					originalClassName: 'slice'
 				})
 			)
-			.style('fill', (d: any) => self.model.getFillColor(d.data[groupMapsTo]))
+			.style('fill', (d: any) => self.model.getFillColor(d.data[groupMapsTo], null, d.data))
 			.attr('d', this.arc)
 
 		allPaths

packages/core/src/components/graphs/radar.ts

@@ -94,7 +94,8 @@ export class Radar extends Component {
 			.nice(yTicksNumber)
 		const yTicks = yScale.ticks(yTicksNumber)
 
-		const colorScale = (group: string): string => this.model.getFillColor(group)
+		const colorScale = (group: string, key?: any, data?: any): string =>
+			this.model.getFillColor(group, key, data)
 
 		// constructs a new radial line generator
 		// the angle accessor returns the angle in radians with 0° at -y (12 o’clock)
@@ -366,9 +367,9 @@ export class Radar extends Component {
 							? () => `translate(${c.x}, ${c.y}) scale(${1 + Math.random() * 0.35})`
 							: `translate(${c.x}, ${c.y})`
 					)
-					.style('fill', (group: any) => colorScale(group.name))
+					.style('fill', (group: any) => colorScale(group.name, undefined, group.data))
 					.style('fill-opacity', radarConfigs.opacity.selected)
-					.style('stroke', (group: any) => colorScale(group.name))
+					.style('stroke', (group: any) => colorScale(group.name, undefined, group.data))
 					.call((selection: any) => {
 						const selectionUpdate = selection.transition().call((t: any) =>
 							this.services.transitions.setupTransition({
@@ -397,8 +398,8 @@ export class Radar extends Component {
 							originalClassName: 'blob'
 						})
 					)
-					.style('fill', (group: any) => colorScale(group.name))
-					.style('stroke', (group: any) => colorScale(group.name))
+					.style('fill', (group: any) => colorScale(group.name, undefined, group.data))
+					.style('stroke', (group: any) => colorScale(group.name, undefined, group.data))
 				update.call((selection: any) =>
 					selection
 						.transition()
@@ -717,7 +718,7 @@ export class Radar extends Component {
 						.map((d: any) => ({
 							label: d[groupMapsTo],
 							value: d[valueMapsTo],
-							color: self.model.getFillColor(d[groupMapsTo]),
+							color: self.model.getFillColor(d[groupMapsTo], null, d),
 							class: self.model.getColorClassName({
 								classNameTypes: [ColorClassNameTypes.TOOLTIP],
 								dataGroupName: d[groupMapsTo]

packages/core/src/components/graphs/treemap.ts

@@ -145,7 +145,7 @@ export class Treemap extends Component {
 			.attr('height', (d: any) => d.y1 - d.y0)
 			.style('fill', (d: any) => {
 				while (d.depth > 1) d = d.parent
-				return this.model.getFillColor(d.data.name)
+				return this.model.getFillColor(d.data.name, null, d.data)
 			})
 
 		// Update all clip paths
@@ -252,7 +252,7 @@ export class Treemap extends Component {
 						})
 					)
 					.style('fill', (d: any) => {
-						const customColor = self.model.getFillColor(d.parent.data.name)
+						const customColor = self.model.getFillColor(d.parent.data.name, null, d.data)
 						if (customColor) {
 							fillColor = customColor
 						}
@@ -320,7 +320,7 @@ export class Treemap extends Component {
 							name: 'graph_element_mouseout_fill_update'
 						})
 					)
-					.style('fill', (d: any) => self.model.getFillColor(d.parent.data.name))
+					.style('fill', (d: any) => self.model.getFillColor(d.parent.data.name, null, d.data))
 
 				// Dispatch mouse event
 				self.services.events.dispatchEvent(Events.Treemap.LEAF_MOUSEOUT, {