React Treemap Chart

1import {
2    SciChartSurface,
3    NumericAxis,
4    NumberRange,
5    IFillPaletteProvider,
6    EFillPaletteMode,
7    EStrokePaletteMode,
8    IPointMetadata,
9    parseColorToUIntArgb,
10    IStrokePaletteProvider,
11    EVerticalTextPosition,
12    EHorizontalTextPosition,
13    MouseWheelZoomModifier,
14    ZoomExtentsModifier,
15    ZoomPanModifier,
16    EDataLabelSkipMode,
17    EMultiLineAlignment,
18    FastRectangleRenderableSeries,
19    EResamplingMode,
20    EColumnMode,
21    EColumnYMode,
22    XyxyDataSeries,
23    RectangleSeriesDataLabelProvider,
24    IRectangleSeriesDataLabelProviderOptions,
25    formatNumber,
26    ENumericFormat,
27} from "scichart";
28import { appTheme } from "../../../theme";
29
30import { stratify, treemap } from "d3-hierarchy";
31// choose in between one of the two
32// const d3 = require("./d3-hierarchy.js");
33
34type RectangluarNode = {
35    x0: number;
36    y0: number;
37    x1: number;
38    y1: number;
39    data: TTreemapDataItem;
40};
41
42type TTreemapDataItem = {
43    /**
44     * Unique name of the company
45     */
46    name: string;
47    /**
48     * Short name of the company - optional
49     */
50    shortName?: string;
51    /**
52     * Parent node name
53     */
54    parent: string;
55    /**
56     * Number of Billions the company is worth
57     */
58    value: number;
59    /**
60     * Percentage gained / lost in the selected period
61     */
62    progress?: number;
63};
64
65/**
66 * PaletteProvider for the {@link TreemapRenderableSeries} to manage the colors of rectangles
67 */
68class StockTreemapPaletteProvider implements IStrokePaletteProvider, IFillPaletteProvider {
69    public readonly fillPaletteMode = EFillPaletteMode.SOLID;
70    public readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.SOLID;
71
72    private _red: number = parseColorToUIntArgb(appTheme.VividRed);
73    private _green: number = parseColorToUIntArgb(appTheme.VividGreen);
74    private _gray: number = 0x404040;
75
76    private _minValue: number = -20;
77    private _maxValue: number = 20;
78
79    constructor({ minValue, maxValue }: { minValue: number; maxValue: number }) {
80        this._minValue = minValue ?? this._minValue;
81        this._maxValue = maxValue ?? this._maxValue;
82    }
83
84    public onAttached(): void {}
85    public onDetached(): void {}
86
87    public overrideFillArgb(
88        _xValue: number,
89        _yValue: number,
90        _index: number,
91        _opacity?: number,
92        metadata?: IPointMetadata
93    ): number | undefined {
94        const percentage = (metadata as unknown as TTreemapDataItem).progress;
95
96        // Handle 0% case explicitly to avoid division issues
97        if (percentage === 0) return this._gray;
98
99        let t: number;
100        let startColor: number;
101        let endColor: number;
102
103        if (percentage > 0) {
104            t = Math.min(percentage / this._maxValue, 1);
105            startColor = this._gray;
106            endColor = this._green;
107        } else {
108            t = Math.min(percentage / this._minValue, 1);
109            startColor = this._gray;
110            endColor = this._red;
111        }
112
113        // Extract ARGB components from colors
114        const getComponents = (color: number) => ({
115            a: (color >>> 24) & 0xff,
116            r: (color >>> 16) & 0xff,
117            g: (color >>> 8) & 0xff,
118            b: color & 0xff,
119        });
120
121        const start = getComponents(startColor);
122        const end = getComponents(endColor);
123
124        // Interpolate each component
125        const interp = (s: number, e: number) => Math.round(s + (e - s) * t);
126        const a = interp(start.a, end.a);
127        const r = interp(start.r, end.r);
128        const g = interp(start.g, end.g);
129        const b = interp(start.b, end.b);
130
131        // Recombine to ARGB
132        return (a << 24) | (r << 16) | (g << 8) | b;
133    }
134
135    public overrideStrokeArgb(
136        _xValue: number,
137        _yValue: number,
138        _index: number,
139        _opacity?: number,
140        metadata?: IPointMetadata
141    ): number | undefined {
142        const fill = this.overrideFillArgb(_xValue, _yValue, _index, _opacity, metadata);
143
144        if (fill) {
145            const brightnessFactor = 1.6;
146            // Extract RGB components
147            let r = (fill >> 16) & 0xff;
148            let g = (fill >> 8) & 0xff;
149            let b = fill & 0xff;
150            // Increase brightness and clamp to the max 255
151            r = Math.min(255, Math.round(r * brightnessFactor));
152            g = Math.min(255, Math.round(g * brightnessFactor));
153            b = Math.min(255, Math.round(b * brightnessFactor));
154            // Set a higher alpha for more "pop"
155            const newAlpha = 0x88;
156            return (newAlpha << 24) | (r << 16) | (g << 8) | b;
157        }
158        return undefined;
159    }
160}
161
162/**
163 * DataLabelProvider for the {@link TreemapRenderableSeries} to manage the labels of rectangles
164 * in the treemap - the bigger the rectangle, the more information is shown
165 */
166class TreemapDataLabelProvider extends RectangleSeriesDataLabelProvider {
167    constructor(options?: IRectangleSeriesDataLabelProviderOptions) {
168        super(options);
169    }
170
171    // Override "getText" method to provide dynamic text based on rectangle size
172    getText(state: any): string {
173        const metadata = state.getMetaData() as TTreemapDataItem;
174        const colWidth = state.columnWidth; // width updates with scroll
175
176        // No label for items without value
177        if (metadata.value === null || metadata.value === undefined) {
178            return null;
179        }
180
181        // Different text formats based on available space
182        if (metadata.value * colWidth > 30000) {
183            return `${metadata.name}` + `\n${formatNumber(metadata.progress, ENumericFormat.Decimal, this.precision)}%`;
184        }
185        if (metadata.value * colWidth > 15000) {
186            return (
187                `${metadata.shortName || metadata.name}` +
188                `\n${formatNumber(metadata.progress, ENumericFormat.Decimal, this.precision)}%`
189            );
190        }
191        if (metadata.value * colWidth > 1500) {
192            return `${(metadata.shortName || metadata.name).slice(0, 1)}`;
193        }
194        return null; // No label for small rectangles
195    }
196}
197
198const WIDTH = 15;
199const HEIGHT = 10;
200const RAW_DATA: TTreemapDataItem[] = [
201    { name: "Technology", parent: "", value: null },
202
203    { name: "Apple", parent: "Technology", value: 4000, progress: 16.2, shortName: "AAPL" },
204    { name: "Microsoft", parent: "Technology", value: 3000, progress: 3.2, shortName: "MSFT" },
205    { name: "NVIDIA", parent: "Technology", value: 4000, progress: 10.5, shortName: "NVDA" },
206    { name: "Alphabet (Google)", parent: "Technology", value: 2185, progress: 0.8, shortName: "GOOG" },
207    { name: "Amazon (AWS)", parent: "Technology", value: 1800, progress: 9.5, shortName: "AMZN" },
208    { name: "Meta (Facebook)", parent: "Technology", value: 1569, progress: 13.7, shortName: "META" },
209    { name: "TSMC", parent: "Technology", value: 600, progress: 17.9, shortName: "TSM" },
210    { name: "Broadcom", parent: "Technology", value: 974, progress: -9.5, shortName: "AVGO" },
211    { name: "Samsung", parent: "Technology", value: 500, progress: -3.1, shortName: "SSNLF" },
212    { name: "Intel", parent: "Technology", value: 200, progress: -18.5, shortName: "INTC" },
213    { name: "AMD", parent: "Technology", value: 180, progress: 7.8, shortName: "AMD" },
214    { name: "Salesforce", parent: "Technology", value: 295, progress: 9.2, shortName: "CRM" },
215    { name: "Adobe", parent: "Technology", value: 193, progress: 12.7, shortName: "ADBE" },
216    { name: "Qualcomm", parent: "Technology", value: 160, progress: -1.9, shortName: "QCO" },
217    { name: "IBM", parent: "Technology", value: 140, progress: -0.5, shortName: "IBM" },
218    { name: "Oracle", parent: "Technology", value: 475, progress: 2.4, shortName: "ORCL" },
219    { name: "Sony", parent: "Technology", value: 120, progress: -18.5, shortName: "SONY" },
220    { name: "Cisco", parent: "Technology", value: 110, progress: 17.2, shortName: "CSC" },
221    { name: "Uber", parent: "Technology", value: 90, progress: 15.0, shortName: "UBR" },
222    { name: "Spotify", parent: "Technology", value: 80, progress: -5.6, shortName: "SPOT" },
223    { name: "Zoom", parent: "Technology", value: 70, progress: -8.0, shortName: "ZM" },
224    { name: "Dropbox", parent: "Technology", value: 60, progress: 1.0, shortName: "DBX" },
225    { name: "Snap", parent: "Technology", value: 50, progress: -1.8, shortName: "SNAP" },
226    { name: "Pinterest", parent: "Technology", value: 45, progress: -15.3, shortName: "PINS" },
227    { name: "Palantir", parent: "Technology", value: 40, progress: 2.9, shortName: "PLTR" },
228    { name: "ASML", parent: "Technology", value: 30, progress: 3.5, shortName: "ASML" },
229    { name: "ARM", parent: "Technology", value: 25, progress: 5.2, shortName: "ARM" },
230    { name: "ServiceNow", parent: "Technology", value: 20, progress: 11.8, shortName: "NOW" },
231    { name: "Atlassian", parent: "Technology", value: 18, progress: 7.9, shortName: "TEAM" },
232    { name: "Twilio", parent: "Technology", value: 16, progress: -17.2, shortName: "TWLO" },
233    { name: "Cloudflare", parent: "Technology", value: 14, progress: 8.5, shortName: "NET" },
234    { name: "Snowflake", parent: "Technology", value: 12, progress: 2.7, shortName: "SNO" },
235    { name: "Okta", parent: "Technology", value: 10, progress: 11.4, shortName: "OKT" },
236    { name: "Shopify", parent: "Technology", value: 9, progress: 10.8, shortName: "SHO" },
237    { name: "Datadog", parent: "Technology", value: 8, progress: -12.1, shortName: "DDO" },
238    { name: "GitLab", parent: "Technology", value: 7, progress: -5.6, shortName: "GTLB" },
239    { name: "ZoomInfo", parent: "Technology", value: 6, progress: -0.8, shortName: "ZI" },
240    { name: "Elastic", parent: "Technology", value: 5, progress: 4.2, shortName: "EST" },
241    { name: "Wix", parent: "Technology", value: 4, progress: 0.9, shortName: "WIX" },
242    { name: "Fiverr", parent: "Technology", value: 3, progress: -2.5, shortName: "FVR" },
243];
244
245// This shows you how to use one of D3's broad layout strategies with the Performance of SciChart
246// using a local file as "d3-hierarchy.js" from this folder (no need to install from npm another dependency)
247// function prepareDataUsingD3Local(data: TTreemapDataItem[]): RectangluarNode[] {
248//     const root = d3.stratify()
249//         .id((d: TTreemapDataItem) => d.name)
250//         .parentId((d: TTreemapDataItem) => d.parent)(data);
251
252//     root.sum((d: TTreemapDataItem) => + d.value);
253
254//     d3.treemap()
255//         .size([WIDTH, HEIGHT])
256//         .padding(0.1)
257//         (root); // create the treemap layout
258
259//     return root.leaves() as RectangluarNode[];
260// }
261
262// uses NPM's "d3-hierarchy" package - recommended if you don't mind an extra 5kb dependency
263function prepareDataUsingD3External(data: TTreemapDataItem[]): RectangluarNode[] {
264    const root = stratify()
265        .id((d) => (d as TTreemapDataItem).name)
266        .parentId((d) => (d as TTreemapDataItem).parent)(data);
267
268    root.sum((d) => +(d as TTreemapDataItem).value);
269
270    treemap().size([WIDTH, HEIGHT]).padding(0.1)(root); // create the treemap layout
271
272    return root.leaves() as unknown as RectangluarNode[];
273}
274
275export async function drawExample(rootElement: string | HTMLDivElement) {
276    // Initialize SciChartSurface. Don't forget to await!
277    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
278        theme: appTheme.SciChartJsTheme,
279    });
280
281    // Create XAxis / YAxis
282    const xAxis = new NumericAxis(wasmContext, {
283        axisTitle: "X Axis",
284        isVisible: false,
285    });
286    sciChartSurface.xAxes.add(xAxis);
287
288    const yAxis = new NumericAxis(wasmContext, {
289        axisTitle: "Y Axis",
290        isVisible: false,
291        flippedCoordinates: true,
292    });
293    sciChartSurface.yAxes.add(yAxis);
294
295    const treemapData = prepareDataUsingD3External(RAW_DATA);
296    // const treemapData = prepareDataUsingD3External(RAW_DATA); // use this if you don't mind a 5kb dependency -> ("d3-hierarchy")
297
298    // Draw the Rectangle Series
299    const rectangleSeries = new FastRectangleRenderableSeries(wasmContext, {
300        dataSeries: new XyxyDataSeries(wasmContext, {
301            xValues: treemapData.map((d) => d.x0),
302            yValues: treemapData.map((d) => d.y0),
303            x1Values: treemapData.map((d) => d.x1),
304            y1Values: treemapData.map((d) => d.y1),
305            metadata: treemapData.map((d) => d.data) as any[],
306        }),
307        columnXMode: EColumnMode.StartEnd,
308        columnYMode: EColumnYMode.TopBottom,
309        strokeThickness: 2,
310        resamplingMode: EResamplingMode.None,
311        dataLabelProvider: new TreemapDataLabelProvider({
312            skipMode: EDataLabelSkipMode.ShowAll,
313            color: "white",
314            style: {
315                fontSize: 13,
316                multiLineAlignment: EMultiLineAlignment.Center,
317                lineSpacing: 5,
318            },
319            horizontalTextPosition: EHorizontalTextPosition.Center,
320            verticalTextPosition: EVerticalTextPosition.Center,
321            metaDataSelector: (md: unknown) => {
322                return (md as TTreemapDataItem).name;
323            },
324        }),
325        // send min and max value percentages to the palette provider as 2 params
326        paletteProvider: new StockTreemapPaletteProvider({
327            minValue: Math.min(...treemapData.map((d) => (d.data as TTreemapDataItem).progress)),
328            maxValue: Math.max(...treemapData.map((d) => (d.data as TTreemapDataItem).progress)),
329        }),
330    });
331    sciChartSurface.renderableSeries.add(rectangleSeries);
332
333    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomExtentsModifier(), new ZoomPanModifier());
334
335    return { sciChartSurface, wasmContext };
336}
337