Treemap Visualization

src/alpha/components/Treemap/Treemap.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { FC } from 'react';
+
+import { TreemapProps } from '../../../types';
+
+const Treemap: FC<TreemapProps> = ({
+	color,
+	segmentKey,
+	colorScheme,
+	paddingInner,
+	paddingOuter,
+	aspectRatio,
+	layout,
+	colorScaleType,
+	children,
+	...props
+}) => {
+	return null;
+};
+
+// displayName is used to validate the component type in the spec builder
+Treemap.displayName = 'Treemap';
+
+export { Treemap };

src/alpha/components/Treemap/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './Treemap';

src/alpha/components/index.ts

@@ -10,4 +10,5 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './Combo'
+export * from './Combo';
+export * from './Treemap';

src/specBuilder/chartSpecBuilder.ts

@@ -29,7 +29,7 @@ import {
 	TABLE,
 } from '@constants';
 import { Area, Axis, Bar, Legend, Line, Scatter, Title } from '@rsc';
-import { Combo } from '@rsc/alpha';
+import { Combo, Treemap } from '@rsc/alpha';
 import { BigNumber, Donut } from '@rsc/rc';
 import colorSchemes from '@themes/colorSchemes';
 import { produce } from 'immer';
@@ -57,6 +57,7 @@ import {
 	SymbolShapes,
 	SymbolSize,
 	TitleElement,
+	TreemapElement,
 } from '../types';
 import { addArea } from './area/areaSpecBuilder';
 import { addAxis } from './axis/axisSpecBuilder';
@@ -81,6 +82,7 @@ import {
 	initializeSpec,
 } from './specUtils';
 import { addTitle } from './title/titleSpecBuilder';
+import { addTreemap } from './treemap/treemapSpecBuilder';
 
 export function buildSpec(props: SanitizedSpecProps) {
 	const {
@@ -112,11 +114,12 @@ export function buildSpec(props: SanitizedSpecProps) {
 	buildOrder.set(Donut, 0);
 	buildOrder.set(Scatter, 0);
 	buildOrder.set(Combo, 0);
+	buildOrder.set(Treemap, 0);
 	buildOrder.set(Legend, 1);
 	buildOrder.set(Axis, 2);
 	buildOrder.set(Title, 3);
 
-	let { areaCount, axisCount, barCount, comboCount, donutCount, legendCount, lineCount, scatterCount } =
+	let { areaCount, axisCount, barCount, comboCount, donutCount, treemapCount, legendCount, lineCount, scatterCount } =
 		initializeComponentCounts();
 	const specProps = { colorScheme, idKey, highlightedItem };
 	spec = [...children]
@@ -144,6 +147,9 @@ export function buildSpec(props: SanitizedSpecProps) {
 				case Donut.displayName:
 					donutCount++;
 					return addDonut(acc, { ...(cur as DonutElement).props, ...specProps, index: donutCount });
+				case Treemap.displayName:
+					treemapCount++;
+					return addTreemap(acc, { ...(cur as TreemapElement).props, ...specProps, index: treemapCount });
 				case Legend.displayName:
 					legendCount++;
 					return addLegend(acc, {
@@ -202,6 +208,7 @@ const initializeComponentCounts = () => {
 		barCount: -1,
 		comboCount: -1,
 		donutCount: -1,
+		treemapCount: -1,
 		legendCount: -1,
 		lineCount: -1,
 		scatterCount: -1,

src/specBuilder/treemap/treemapSpecBuilder.ts

@@ -0,0 +1,141 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { COLOR_SCALE, DEFAULT_COLOR, DEFAULT_COLOR_SCHEME, DEFAULT_METRIC, TABLE } from '@constants';
+import { addFieldToFacetScaleDomain } from '@specBuilder/scale/scaleSpecBuilder';
+import { sanitizeMarkChildren, toCamelCase } from '@utils';
+import { produce } from 'immer';
+import { LinearScale, StratifyTransform } from 'vega';
+import { Data, Mark, Scale, Spec, TreemapTransform } from 'vega';
+
+import { ColorScheme, HighlightedItem, TreemapProps, TreemapSpecProps } from '../../types';
+import { getLeavesMarks, getLeavesText, getNodeMarks, getNodesText, getRootText } from './treemapUtils';
+
+export const addTreemap = produce<
+	Spec,
+	[TreemapProps & { colorScheme?: ColorScheme; highlightedItem?: HighlightedItem; index?: number; idKey: string }]
+>(
+	(
+		spec,
+		{
+			children,
+			color = DEFAULT_COLOR,
+			colorScheme = DEFAULT_COLOR_SCHEME,
+			index = 0,
+			metric = DEFAULT_METRIC,
+			name,
+			segmentKey = 'segment',
+			layout = 'binary',
+			...props
+		}
+	) => {
+		const treemapProps: TreemapSpecProps = {
+			children: sanitizeMarkChildren(children),
+			color,
+			colorScheme,
+			index,
+			metric,
+			segmentKey,
+			name: toCamelCase(name ?? `treemap${index}`),
+			layout,
+			...props,
+		};
+
+		// need to add the treemap to the spec
+		spec.data = addData(spec.data ?? [], treemapProps);
+		spec.scales = addScales(spec.scales ?? [], treemapProps);
+		spec.marks = addMarks(spec.marks ?? [], treemapProps);
+	}
+);
+
+export const addData = produce<Data[], [TreemapSpecProps]>((data, props) => {
+	// const { children, idKey, metric } = props;
+	// console.log('props', { props, data, TABLE });
+	const tableIndex = data.findIndex((d) => d.name === TABLE);
+
+	// setup transform
+	data[tableIndex].transform = data[tableIndex].transform ?? [];
+	data[tableIndex].transform?.push(...getTreemapTransforms(props));
+	data.push({
+		name: 'nodes',
+		source: TABLE,
+		transform: [{ type: 'filter', expr: 'datum.children' }],
+	});
+	data.push({
+		name: 'leaves',
+		source: TABLE,
+		transform: [{ type: 'filter', expr: '!datum.children' }],
+	});
+	data.push({
+		name: 'trunk',
+		source: TABLE,
+		transform: [{ type: 'filter', expr: '!datum.parent' }],
+	});
+});
+
+export const getTreemapTransforms = ({
+	idKey,
+	parent,
+	paddingInner,
+	paddingOuter,
+	aspectRatio,
+	layout,
+}: TreemapSpecProps): (StratifyTransform | TreemapTransform)[] => [
+	{
+		type: 'stratify',
+		key: idKey,
+		parentKey: parent ?? 'parent',
+	},
+	{
+		type: 'treemap',
+		field: 'size',
+		sort: { field: 'value' },
+		paddingInner: paddingInner ?? 1,
+		paddingOuter: paddingOuter ?? 1,
+		round: true,
+		method: layout ?? 'squarify',
+		ratio: aspectRatio ?? 1,
+		size: [{ signal: 'width' }, { signal: 'height' }],
+	},
+];
+
+export const addScales = produce<Scale[], [TreemapSpecProps]>((scales, props) => {
+	const { segmentKey } = props;
+	addFieldToFacetScaleDomain(scales, COLOR_SCALE, segmentKey);
+	scales.push(getTreemapOpacityScales(props));
+});
+
+export const getTreemapOpacityScales = ({}: TreemapSpecProps): LinearScale => ({
+	name: 'opacityScale',
+	type: 'linear',
+	domain: [2, 3, 4, 5, 6, 7],
+	range: [0.75, 1, 0.75, 1, 0.75, 1],
+});
+
+export const addMarks = produce<Mark[], [TreemapSpecProps]>((marks, props) => {
+	marks.push(getNodeMarks(props));
+	marks.push(getLeavesMarks(props));
+	marks.push(getRootText(props));
+	marks.push(getNodesText(props));
+	marks.push(getLeavesText(props));
+});