diff --git a/packages/core/src/components/graphs/treemap.ts b/packages/core/src/components/graphs/treemap.ts index f61064703c..c40df74b99 100644 --- a/packages/core/src/components/graphs/treemap.ts +++ b/packages/core/src/components/graphs/treemap.ts @@ -25,14 +25,15 @@ const findColorShade = (hex: string) => { return null } -const textFillColor = function () { - const correspondingLeaf = select(this.parentNode).select('rect.leaf') as any - const correspondingLeafFill = getComputedStyle(correspondingLeaf.node(), null).getPropertyValue( - 'fill' - ) - const cl = d3Color(correspondingLeafFill) as any +const textFillColor = function (data) { + const correspondingLeaf = select(this.parentNode).select('rect.leaf') + const correspondingLeafFill: string = + data.backgroundColor ?? + getComputedStyle(correspondingLeaf.node() as Element, null).getPropertyValue('fill') + const cl = d3Color(correspondingLeafFill) let colorShade: any + if (cl) { colorShade = findColorShade(cl ? cl.hex() : null) } @@ -195,11 +196,11 @@ export class Treemap extends Component { let parent = d while (parent.depth > 1) parent = parent.parent - const color = hsl(this.model.getFillColor(parent.data.name)) + return [ { text: d.data.name, - color: color.l < 0.5 ? 'white' : 'black' + backgroundColor: this.model.getFillColor(parent.data.name) } ] }, diff --git a/packages/docs/src/lib/treemap/index.ts b/packages/docs/src/lib/treemap/index.ts index 49bb0dca76..8b145a09f1 100644 --- a/packages/docs/src/lib/treemap/index.ts +++ b/packages/docs/src/lib/treemap/index.ts @@ -16,6 +16,21 @@ const options: TreemapChartOptions = { height: '600px' } +const customColorOptions: TreemapChartOptions = { + title: 'Treemap (Custom colors)', + height: '600px', + color: { + scale: { + Oceania: '#3ddbd9', + Europe: '#08bdba', + America: '#009d9a', + Australia: '#007d79', + Africa: '#005d5d', + Asia: '#004144' + } + } +} + const data: ChartTabularData = [ { name: 'Oceania', @@ -111,5 +126,10 @@ export const examples: Example[] = [ data, options, tags: ['test'] + }, + { + data, + options: customColorOptions, + tags: ['test'] } ]