React Waterfall Chart | Bridge Chart

1import {
2    NumericAxis,
3    ZoomPanModifier,
4    ZoomExtentsModifier,
5    MouseWheelZoomModifier,
6    SciChartSurface,
7    ENumericFormat,
8    FastRectangleRenderableSeries,
9    XyxyDataSeries,
10    EColumnYMode,
11    EColumnMode,
12    EDataPointWidthMode,
13    NumberRange,
14    EHorizontalTextPosition,
15    EVerticalTextPosition,
16    TextLabelProvider,
17    RectangleSeriesDataLabelProvider,
18    formatNumber,
19    IRectangleSeriesDataLabelProviderOptions,
20    EDataLabelSkipMode,
21    EMultiLineAlignment,
22    IPointMetadata,
23    IFillPaletteProvider,
24    EFillPaletteMode,
25    parseColorToUIntArgb,
26    ELabelAlignment,
27    Thickness,
28} from "scichart";
29import { appTheme } from "../../../theme";
30
31const data = [
32    { date: "Jan.", profit: 387264 },
33    { date: "Feb.", profit: 772096 },
34    { date: "Mar.", profit: 638075 },
35    { date: "Apr.", profit: -211386 },
36    { date: "May", profit: -138135 },
37    { date: "Jun.", profit: -267238 },
38    { date: "Jul.", profit: 431406 },
39    { date: "Aug.", profit: 363018 },
40    { date: "Sep.", profit: -224638 },
41    { date: "Oct.", profit: -299867 },
42    { date: "Nov.", profit: 607365 },
43    { date: "Dec.", profit: 1106986 },
44];
45
46const waterfall = function (numbers: { date: string; profit: number }[]) {
47    let last = 0,
48        accu = 0;
49    const waterfall = numbers.map((d, i) => {
50        last = accu;
51        accu += d.profit;
52        return {
53            date: d.date,
54            nextDay: i < numbers.length - 1 ? numbers[i + 1].date : "Total",
55            prior: last,
56            accu: accu,
57            profit: d.profit,
58        };
59    });
60
61    waterfall.push({
62        date: "Total",
63        nextDay: null,
64        prior: 0,
65        accu: accu,
66        profit: 0,
67    });
68
69    return waterfall;
70};
71
72const generatedData = waterfall(data);
73
74const labelProvider = new TextLabelProvider({
75    labels: [...generatedData.map((d) => d.date)],
76    maxLength: 15,
77});
78
79export const drawExample = async (rootElement: string | HTMLDivElement) => {
80    // Create a SciChartSurface
81    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
82        theme: appTheme.SciChartJsTheme,
83    });
84
85    const growBy = new NumberRange(0.05, 0.05);
86
87    // Create an XAxis with a TextLabelProvider
88    const xAxis = new NumericAxis(wasmContext, {
89        // labelprovider maps Xaxis values (in this case index) to labels (in this case manufacturer name)
90        labelProvider,
91        labelStyle: {
92            alignment: ELabelAlignment.Center,
93            padding: new Thickness(2, 1, 2, 1),
94            fontSize: 11,
95        },
96        maxAutoTicks: 15,
97        growBy: new NumberRange(0.05, 0.05), // add some horizontal padding
98    });
99
100    sciChartSurface.xAxes.add(xAxis);
101
102    // Create a YAxis
103    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy, labelFormat: ENumericFormat.Engineering }));
104
105    class CustomFillProvider implements IFillPaletteProvider {
106        public readonly fillPaletteMode = EFillPaletteMode.SOLID;
107
108        public onAttached(): void {}
109        public onDetached(): void {}
110
111        public overrideFillArgb(
112            _xValue: number,
113            _yValue: number,
114            _index: number,
115            _opacity?: number,
116            metadata?: IPointMetadata
117        ): number {
118            const profit = (metadata as unknown as { profit: number })?.profit;
119
120            if (profit > 0) {
121                return parseColorToUIntArgb(appTheme.VividTeal, 255);
122            }
123
124            if (profit < 0) {
125                return parseColorToUIntArgb(appTheme.VividPink, 255);
126            }
127
128            return parseColorToUIntArgb(appTheme.VividBlue, 128);
129        }
130    }
131
132    class TreemapDataLabelProvider extends RectangleSeriesDataLabelProvider {
133        constructor(options?: IRectangleSeriesDataLabelProviderOptions) {
134            super(options);
135        }
136
137        // Override "getText" method to provide dynamic text based on rectangle size
138        getText(state: any): string {
139            const metadata = state.getMetaData() as any;
140
141            return (
142                `${formatNumber(metadata.accu, ENumericFormat.Engineering, 2)}$` +
143                (metadata.profit === 0
144                    ? ""
145                    : `\n${metadata.profit > 0 ? "+" : ""}${formatNumber(
146                        metadata.profit,
147                        ENumericFormat.Engineering,
148                        this.precision
149                    )}$`)
150            );
151        }
152    }
153
154    // Prepare data and create rectangle series
155
156    const rectangleSeries = new FastRectangleRenderableSeries(wasmContext, {
157        dataSeries: new XyxyDataSeries(wasmContext, {
158            xValues: generatedData.map((d, i) => i),
159            yValues: generatedData.map((d) => d.prior),
160            x1Values: generatedData.map((d, i) => i),
161            y1Values: generatedData.map((d) => d.accu),
162            metadata: generatedData as any[],
163        }),
164        columnXMode: EColumnMode.Mid,
165        columnYMode: EColumnYMode.TopBottom,
166        dataPointWidthMode: EDataPointWidthMode.Range,
167        stroke: "black",
168        strokeThickness: 1,
169        opacity: 0.5,
170        fill: appTheme.DarkIndigo,
171        dataLabelProvider: new TreemapDataLabelProvider({
172            skipMode: EDataLabelSkipMode.ShowAll,
173            color: "white",
174            style: {
175                fontSize: 11,
176                multiLineAlignment: EMultiLineAlignment.Center,
177                lineSpacing: 5,
178            },
179            horizontalTextPosition: EHorizontalTextPosition.Center,
180            verticalTextPosition: EVerticalTextPosition.Center,
181            metaDataSelector: (md: unknown) => {
182                return (md as { profit: string }).profit;
183            },
184        }),
185        paletteProvider: new CustomFillProvider(),
186    });
187    sciChartSurface.renderableSeries.add(rectangleSeries);
188
189    // Add interactivity modifiers
190    sciChartSurface.chartModifiers.add(
191        new ZoomPanModifier({ enableZoom: true }),
192        new ZoomExtentsModifier(),
193        new MouseWheelZoomModifier()
194    );
195
196    return { sciChartSurface, wasmContext };
197};
198