Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(getFillColor):data parameter missing from the arguments #1736

Merged
merged 4 commits into from
Feb 27, 2024
Merged

fix(getFillColor):data parameter missing from the arguments #1736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3eeaa53
fix(getFillColor):data parameter missing from the arguments
RiyaJethwa Feb 1, 2024
5c6380f
fix(getFillColor):replacing undefined with null
RiyaJethwa Feb 7, 2024
eee2d97
fix(getFillColor):replacing undefined with null
RiyaJethwa Feb 20, 2024
37dc1a1
Merge branch 'carbon-design-system:master' into getFillColor_params
RiyaJethwa Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/core/src/components/graphs/alluvial.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 1 addition & 3 deletions packages/core/src/components/graphs/area-stacked.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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))
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/graphs/area.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -216,7 +216,7 @@ 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, null, group.data))
.style('stroke-dasharray', '2, 2')
.attr('stroke-width', 0.7 + 'px')
}
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/components/graphs/bar-grouped.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/components/graphs/bar-simple.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion packages/core/src/components/graphs/bar-stacked.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/components/graphs/bullet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/graphs/circle-pack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion packages/core/src/components/graphs/heatmap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/graphs/histogram.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/graphs/line.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, null, group.data))
// a11y
.attr('role', Roles.GRAPHICS_SYMBOL)
.attr('aria-roledescription', 'line')
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/graphs/meter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/graphs/pie.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
13 changes: 7 additions & 6 deletions packages/core/src/components/graphs/radar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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, null, group.data))
.style('fill-opacity', radarConfigs.opacity.selected)
.style('stroke', (group: any) => colorScale(group.name))
.style('stroke', (group: any) => colorScale(group.name, null, group.data))
.call((selection: any) => {
const selectionUpdate = selection.transition().call((t: any) =>
this.services.transitions.setupTransition({
Expand Down Expand Up @@ -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, null, group.data))
.style('stroke', (group: any) => colorScale(group.name, null, group.data))
update.call((selection: any) =>
selection
.transition()
Expand Down Expand Up @@ -718,7 +719,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]
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/graphs/treemap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
}
Expand Down Expand Up @@ -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, {
Expand Down
Loading