fix(treemap): assign leaf text color based on custom colors (#1881)

* fix(treemap): assign leaf text color based on custom colors

- updated treemap chart to set the background color in data for the
leaf text node so it can be referenced when determining the text
color

Fix #1880

* chore(docs): add custom color treemap chart example

* fix(treemap): ensure proper text color for default case

* chore(docs): update custom colors for higher contrast

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)
 						}
 					]
 				},

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']
 	}
 ]