@vuu-ui/vuu-chart 4.0.0-alpha.21 → 4.0.0-alpha.22

package/src/charts/hierarchy-model.js

@@ -0,0 +1,224 @@
+import { Aggregator, filterRows, getColumnValue, getNumber } from "../chart-data/projection-utils.js";
+import { GROUP_KEY_SEPARATOR } from "../engine/ChartModel.js";
+import { legendOption, textStyle, tooltipOption } from "../options/common.js";
+const defaultFormatValue = (value)=>Math.abs(value) >= 1000 ? value.toLocaleString(void 0, {
+        maximumFractionDigits: 0
+    }) : value.toLocaleString(void 0, {
+        maximumFractionDigits: 2
+    });
+const buildHierarchy = (rows, getGroupValue, getValue, depth, aggregation)=>{
+    const root = new Map();
+    for (const row of rows){
+        const value = getValue(row);
+        let level = root;
+        let key = "";
+        for(let d = 0; d < depth; d++){
+            const name = String(getGroupValue(row, d) ?? "");
+            key = 0 === d ? name : `${key}${GROUP_KEY_SEPARATOR}${name}`;
+            let group = level.get(name);
+            if (void 0 === group) {
+                group = {
+                    name,
+                    key,
+                    aggregator: new Aggregator(aggregation),
+                    rows: [],
+                    children: d < depth - 1 ? new Map() : void 0
+                };
+                level.set(name, group);
+            }
+            group.aggregator.add(value);
+            group.rows.push(row);
+            if (group.children) level = group.children;
+        }
+    }
+    return Array.from(root.values());
+};
+const createHierarchyModel = ({ aggregation = "sum", colorMode = "palette", dataSource, donut = false, formatValue = defaultFormatValue, groupByColumnNames, legend = "none", showTooltip = true, type, valueColumnName, where })=>{
+    const depth = "pie" === type ? 1 : Math.max(1, groupByColumnNames.length);
+    const seriesId = type;
+    const tooltipFormatter = (params)=>{
+        const node = params.data;
+        if (!node) return params.name;
+        const path = node.vuuGroupKey.split(GROUP_KEY_SEPARATOR).join(" / ");
+        const percent = void 0 !== params.percent ? ` (${params.percent.toFixed(1)}%)` : "";
+        return `${path}<br/>${valueColumnName}: <b>${formatValue(node.signedValue)}</b>${percent}`;
+    };
+    const buildBaseOption = (theme)=>{
+        const labelStyle = {
+            color: theme.foregroundColor,
+            fontFamily: theme.fontFamily
+        };
+        const seriesBase = {
+            id: seriesId,
+            name: valueColumnName,
+            type,
+            data: []
+        };
+        let series;
+        series = "treemap" === type ? {
+            ...seriesBase,
+            roam: false,
+            nodeClick: "zoomToNode",
+            top: 8,
+            left: 0,
+            right: 0,
+            bottom: 28,
+            visibleMin: 100,
+            breadcrumb: {
+                show: depth > 1,
+                height: 20,
+                bottom: 4,
+                itemStyle: {
+                    color: theme.tooltipBackgroundColor,
+                    borderColor: theme.axisLineColor,
+                    textStyle: {
+                        color: theme.foregroundColor
+                    }
+                }
+            },
+            label: {
+                show: true,
+                ...labelStyle,
+                color: "#fff",
+                formatter: (p)=>p.data ? `${p.name}\n${formatValue(p.data.signedValue)}` : p.name
+            },
+            upperLabel: {
+                show: depth > 1,
+                height: 18,
+                color: "#fff"
+            },
+            itemStyle: {
+                borderColor: theme.backgroundColor,
+                gapWidth: 1
+            },
+            levels: [
+                {
+                    itemStyle: {
+                        borderColor: theme.backgroundColor,
+                        borderWidth: 0,
+                        gapWidth: 2
+                    },
+                    upperLabel: {
+                        show: false
+                    }
+                },
+                {
+                    itemStyle: {
+                        borderColor: theme.splitLineColor,
+                        borderWidth: 2,
+                        gapWidth: 1
+                    }
+                }
+            ]
+        } : "sunburst" === type ? {
+            ...seriesBase,
+            radius: [
+                "12%",
+                "95%"
+            ],
+            sort: "desc",
+            nodeClick: "rootToNode",
+            label: {
+                ...labelStyle,
+                rotate: "radial",
+                minAngle: 8,
+                color: "#fff"
+            },
+            itemStyle: {
+                borderColor: theme.backgroundColor,
+                borderWidth: 1
+            }
+        } : {
+            ...seriesBase,
+            radius: donut ? [
+                "45%",
+                "75%"
+            ] : "75%",
+            center: [
+                "50%",
+                "52%"
+            ],
+            label: {
+                ...labelStyle,
+                formatter: "{b}: {d}%"
+            },
+            labelLine: {
+                lineStyle: {
+                    color: theme.axisLineColor
+                }
+            },
+            itemStyle: {
+                borderColor: theme.backgroundColor,
+                borderWidth: 1
+            }
+        };
+        return {
+            animation: false,
+            backgroundColor: theme.backgroundColor,
+            color: theme.palette,
+            textStyle: textStyle(theme),
+            legend: legendOption(theme, "pie" === type ? legend : "none"),
+            tooltip: {
+                ...tooltipOption(theme, {
+                    show: showTooltip,
+                    trigger: "item"
+                }),
+                formatter: tooltipFormatter
+            },
+            series: [
+                series
+            ]
+        };
+    };
+    const buildDataOption = (data, theme)=>{
+        const { columnMap, rows: allRows } = data.get(dataSource);
+        const rows = filterRows(allRows, columnMap, where);
+        const groups = buildHierarchy(rows, (row, d)=>getColumnValue(row, columnMap, groupByColumnNames[d]), (row)=>getNumber(row, columnMap, valueColumnName), depth, aggregation);
+        const groupRows = new Map();
+        const toNode = (group)=>{
+            groupRows.set(group.key, group.rows);
+            const signedValue = group.aggregator.value ?? 0;
+            const node = {
+                name: group.name,
+                value: "sign" === colorMode ? Math.abs(signedValue) : signedValue,
+                signedValue,
+                vuuGroupKey: group.key
+            };
+            if ("sign" === colorMode) node.itemStyle = {
+                color: signedValue < 0 ? theme.downColor : theme.upColor
+            };
+            if (group.children) {
+                node.children = Array.from(group.children.values()).map(toNode);
+                node.value = node.children.reduce((sum, child)=>sum + child.value, 0);
+            }
+            return node;
+        };
+        const nodes = groups.map(toNode).sort((n1, n2)=>Math.abs(n2.value) - Math.abs(n1.value));
+        const rowLookup = {
+            [seriesId]: {
+                dataSource,
+                rows: [],
+                groups: groupRows
+            }
+        };
+        return {
+            option: {
+                series: [
+                    {
+                        id: seriesId,
+                        data: nodes
+                    }
+                ]
+            },
+            rowLookup
+        };
+    };
+    return {
+        buildBaseOption,
+        buildDataOption,
+        dataSources: [
+            dataSource
+        ]
+    };
+};
+export { buildHierarchy, createHierarchyModel };

package/src/echarts.js

@@ -0,0 +1,26 @@
+import { BarChart, CandlestickChart, HeatmapChart, LineChart, PieChart, ScatterChart, SunburstChart, TreemapChart } from "echarts/charts";
+import { AxisPointerComponent, DataZoomInsideComponent, DataZoomSliderComponent, GridComponent, LegendComponent, MarkLineComponent, TitleComponent, TooltipComponent, VisualMapContinuousComponent } from "echarts/components";
+import { getInstanceByDom, init, use } from "echarts/core";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+use([
+    BarChart,
+    CandlestickChart,
+    HeatmapChart,
+    LineChart,
+    PieChart,
+    ScatterChart,
+    SunburstChart,
+    TreemapChart,
+    AxisPointerComponent,
+    DataZoomInsideComponent,
+    DataZoomSliderComponent,
+    GridComponent,
+    LegendComponent,
+    MarkLineComponent,
+    TitleComponent,
+    TooltipComponent,
+    VisualMapContinuousComponent,
+    CanvasRenderer,
+    SVGRenderer
+]);
+export { getInstanceByDom, init };

package/src/engine/ChartModel.js

@@ -0,0 +1,2 @@
+const GROUP_KEY_SEPARATOR = "\u001f";
+export { GROUP_KEY_SEPARATOR };

package/src/engine/VuuChartContainer.js

@@ -0,0 +1,196 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { MeasuredContainer } from "@vuu-ui/vuu-ui-controls";
+import { ThemeContext } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { ChartDataStores } from "../chart-data/ChartDataStore.js";
+import { init } from "../echarts.js";
+import { mergeEChartsOptions } from "../options/mergeOptions.js";
+import { resolveChartTheme } from "../theme/chartTheme.js";
+import { GROUP_KEY_SEPARATOR } from "./ChartModel.js";
+import { useStructuralMemo } from "./useStructuralMemo.js";
+import Chart from "../Chart.css";
+const classBase = "vuuChart";
+const applyOverride = (option, override)=>"function" == typeof override ? override(option) : mergeEChartsOptions(option, override);
+const VuuChartContainer = ({ chartType, className, echartsOptions, height, legend: _legend, maxRows, model, onChartReady, onItemClick, onItemContextMenu, renderer = "canvas", resizeStrategy, showTooltip: _showTooltip, style = {
+    width: "100%",
+    height: "100%"
+}, theme: themeOverrides, width, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-chart",
+        css: Chart,
+        window: targetWindow
+    });
+    const { themeMode } = useContext(ThemeContext);
+    const [chartElement, setChartElement] = useState(null);
+    const [chart, setChart] = useState(void 0);
+    const overrides = useStructuralMemo(themeOverrides);
+    const userOptions = useStructuralMemo(echartsOptions);
+    const dataSources = useStructuralMemo(model.dataSources);
+    const theme = useMemo(()=>resolveChartTheme(chartElement, overrides), [
+        chartElement,
+        overrides,
+        themeMode
+    ]);
+    const modelRef = useRef(model);
+    modelRef.current = model;
+    const themeRef = useRef(theme);
+    themeRef.current = theme;
+    const storesRef = useRef(void 0);
+    const rowLookupRef = useRef({});
+    const frameRef = useRef(void 0);
+    const handlersRef = useRef({
+        onItemClick,
+        onItemContextMenu
+    });
+    handlersRef.current = {
+        onItemClick,
+        onItemContextMenu
+    };
+    const onChartReadyRef = useRef(onChartReady);
+    onChartReadyRef.current = onChartReady;
+    useLayoutEffect(()=>{
+        if (!chartElement) return;
+        const echart = init(chartElement, null, {
+            renderer,
+            useCoarsePointer: true
+        });
+        const toItemEvent = (params)=>{
+            const seriesId = params.seriesId ?? "";
+            const lookup = rowLookupRef.current[seriesId];
+            if (lookup) {
+                const store = storesRef.current?.get(lookup.dataSource);
+                const groupKey = params.data?.vuuGroupKey;
+                const groupRows = void 0 !== groupKey ? lookup.groups?.get(groupKey) : void 0;
+                return {
+                    columnMap: store?.columnMap ?? {},
+                    dataIndex: params.dataIndex,
+                    dataSource: lookup.dataSource,
+                    groupPath: groupKey?.split(GROUP_KEY_SEPARATOR),
+                    nativeEvent: params.event?.event,
+                    row: groupRows ? groupRows[0] : lookup.rows[params.dataIndex],
+                    rows: groupRows,
+                    seriesId,
+                    seriesName: params.seriesName ?? "",
+                    value: params.value
+                };
+            }
+        };
+        echart.on("click", (params)=>{
+            const { onItemClick } = handlersRef.current;
+            const evt = onItemClick && toItemEvent(params);
+            if (evt) onItemClick?.(evt);
+        });
+        echart.on("contextmenu", (params)=>{
+            const { onItemContextMenu } = handlersRef.current;
+            const evt = onItemContextMenu && toItemEvent(params);
+            if (evt) {
+                params.event?.stop();
+                onItemContextMenu?.(evt);
+            }
+        });
+        setChart(echart);
+        onChartReadyRef.current?.(echart);
+        return ()=>{
+            setChart(void 0);
+            echart.dispose();
+        };
+    }, [
+        chartElement,
+        renderer
+    ]);
+    const buildFullOption = useCallback(()=>{
+        const stores = storesRef.current;
+        if (chart && !chart.isDisposed() && stores) {
+            const { buildBaseOption, buildDataOption } = modelRef.current;
+            const theme = themeRef.current;
+            const { option: dataOption, rowLookup = {} } = buildDataOption(stores, theme);
+            const option = applyOverride(mergeEChartsOptions(buildBaseOption(theme), dataOption), userOptions);
+            rowLookupRef.current = rowLookup;
+            chart.setOption(option, {
+                notMerge: true
+            });
+        }
+    }, [
+        chart,
+        userOptions
+    ]);
+    const applyDataUpdate = useCallback(()=>{
+        frameRef.current = void 0;
+        const stores = storesRef.current;
+        if (chart && !chart.isDisposed() && stores) {
+            const { option, rowLookup = {} } = modelRef.current.buildDataOption(stores, themeRef.current);
+            rowLookupRef.current = rowLookup;
+            chart.setOption(option, {
+                lazyUpdate: false,
+                silent: true
+            });
+        }
+    }, [
+        chart
+    ]);
+    const scheduleDataUpdate = useCallback(()=>{
+        if (void 0 === frameRef.current) frameRef.current = requestAnimationFrame(applyDataUpdate);
+    }, [
+        applyDataUpdate
+    ]);
+    useEffect(()=>{
+        if (!chart) return;
+        const stores = new ChartDataStores(dataSources, {
+            maxRows
+        }, scheduleDataUpdate);
+        storesRef.current = stores;
+        stores.subscribe();
+        return ()=>{
+            if (void 0 !== frameRef.current) {
+                cancelAnimationFrame(frameRef.current);
+                frameRef.current = void 0;
+            }
+            stores.dispose();
+            storesRef.current = void 0;
+        };
+    }, [
+        chart,
+        dataSources,
+        maxRows,
+        scheduleDataUpdate
+    ]);
+    useEffect(()=>{
+        buildFullOption();
+    }, [
+        buildFullOption,
+        dataSources,
+        maxRows,
+        model,
+        theme
+    ]);
+    const onResize = useCallback((size)=>{
+        chart?.resize({
+            height: size.height,
+            width: size.width
+        });
+    }, [
+        chart
+    ]);
+    return /*#__PURE__*/ jsx(MeasuredContainer, {
+        ...htmlAttributes,
+        className: clsx(classBase, `${classBase}-${chartType}`, className),
+        height: height,
+        onResize: onResize,
+        resizeStrategy: resizeStrategy,
+        style: style,
+        width: width,
+        children: /*#__PURE__*/ jsx("div", {
+            className: `${classBase}-canvas`,
+            ref: setChartElement,
+            style: {
+                height: "100%",
+                width: "100%"
+            }
+        })
+    });
+};
+export { VuuChartContainer };

package/src/engine/useStructuralMemo.js

@@ -0,0 +1,18 @@
+import { useRef } from "react";
+const isPlainObject = (value)=>null !== value && "object" == typeof value && (Object.getPrototypeOf(value) === Object.prototype || null === Object.getPrototypeOf(value));
+const isStructurallyEqual = (a, b)=>{
+    if (a === b) return true;
+    if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i)=>isStructurallyEqual(v, b[i]));
+    if (isPlainObject(a) && isPlainObject(b)) {
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        return keysA.length === keysB.length && keysA.every((key)=>isStructurallyEqual(a[key], b[key]));
+    }
+    return false;
+};
+const useStructuralMemo = (value)=>{
+    const ref = useRef(value);
+    if (!isStructurallyEqual(ref.current, value)) ref.current = value;
+    return ref.current;
+};
+export { isStructurallyEqual, useStructuralMemo };

package/src/index.js

@@ -1,2 +1,10 @@
 export { Chart } from "./Chart.js";
 export { ChartSeries } from "./ChartSeries.js";
+export { CandlestickChart } from "./charts/CandlestickChart.js";
+export { CartesianChart } from "./charts/CartesianChart.js";
+export { DepthChart } from "./charts/DepthChart.js";
+export { HeatmapChart } from "./charts/HeatmapChart.js";
+export { HierarchyChart, PieChart, SunburstChart, TreemapChart } from "./charts/HierarchyChart.js";
+export { ChartDataStore } from "./chart-data/ChartDataStore.js";
+export { mergeEChartsOptions } from "./options/mergeOptions.js";
+export { defaultChartTheme, resolveChartTheme } from "./theme/chartTheme.js";

package/src/options/common.js

@@ -0,0 +1,181 @@
+import { resolveColor } from "../theme/chartTheme.js";
+import { computeMarkLineValue } from "../chart-data/projection-utils.js";
+const pad = (n, width = 2)=>String(n).padStart(width, "0");
+const formatTimeLabel = (ts)=>{
+    if (!Number.isFinite(ts)) return "";
+    const d = new Date(ts);
+    const h = d.getHours();
+    const m = d.getMinutes();
+    const s = d.getSeconds();
+    if (0 === h && 0 === m && 0 === s) return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+    return 0 === s ? `${pad(h)}:${pad(m)}` : `${pad(h)}:${pad(m)}:${pad(s)}`;
+};
+const formatTimestamp = (ts)=>{
+    if (!Number.isFinite(ts)) return "";
+    const d = new Date(ts);
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+};
+const textStyle = (theme)=>({
+        color: theme.foregroundColor,
+        fontFamily: theme.fontFamily
+    });
+const GRID_OUTER_BOUNDS = {
+    left: 4,
+    right: 12,
+    top: 0,
+    bottom: 0
+};
+const axisStyle = (theme, showSplitLine = true)=>({
+        axisLine: {
+            lineStyle: {
+                color: theme.axisLineColor
+            }
+        },
+        axisTick: {
+            lineStyle: {
+                color: theme.axisLineColor
+            }
+        },
+        axisLabel: {
+            color: theme.secondaryForegroundColor,
+            fontFamily: theme.fontFamily,
+            hideOverlap: true
+        },
+        nameTextStyle: {
+            color: theme.secondaryForegroundColor,
+            fontFamily: theme.fontFamily
+        },
+        splitLine: {
+            show: showSplitLine,
+            lineStyle: {
+                color: theme.splitLineColor
+            }
+        }
+    });
+const axisPointerLabel = (theme)=>({
+        backgroundColor: theme.crosshairColor,
+        color: theme.tooltipBackgroundColor,
+        fontFamily: theme.fontFamily
+    });
+const tooltipOption = (theme, { crosshair = true, show = true, trigger = "axis" } = {})=>({
+        show,
+        trigger,
+        confine: true,
+        className: "vuuChartTooltip",
+        backgroundColor: theme.tooltipBackgroundColor,
+        borderColor: theme.tooltipBorderColor,
+        textStyle: {
+            ...textStyle(theme),
+            fontSize: 12
+        },
+        axisPointer: "axis" === trigger ? {
+            type: crosshair ? "cross" : "line",
+            lineStyle: {
+                color: theme.crosshairColor,
+                type: "dashed"
+            },
+            crossStyle: {
+                color: theme.crosshairColor
+            },
+            label: axisPointerLabel(theme)
+        } : void 0
+    });
+const legendOption = (theme, position)=>"none" === position ? {
+        show: false
+    } : {
+        show: true,
+        type: "scroll",
+        [position]: 0,
+        textStyle: {
+            color: theme.secondaryForegroundColor,
+            fontFamily: theme.fontFamily
+        },
+        pageTextStyle: {
+            color: theme.secondaryForegroundColor
+        }
+    };
+const hasSlider = (dataZoom)=>"slider" === dataZoom || "both" === dataZoom;
+const dataZoomOption = (dataZoom, theme, axisIndex = [
+    0
+], orientation = "x")=>{
+    if (!dataZoom) return [];
+    const axisKey = "x" === orientation ? "xAxisIndex" : "yAxisIndex";
+    const zoom = [];
+    if (true === dataZoom || "inside" === dataZoom || "both" === dataZoom) zoom.push({
+        id: "zoom-inside",
+        type: "inside",
+        [axisKey]: axisIndex,
+        filterMode: "filter"
+    });
+    if (hasSlider(dataZoom)) zoom.push({
+        id: "zoom-slider",
+        type: "slider",
+        [axisKey]: axisIndex,
+        height: 20,
+        bottom: 4,
+        borderColor: theme.axisLineColor,
+        backgroundColor: "transparent",
+        fillerColor: "rgba(127,127,127,0.15)",
+        dataBackground: {
+            lineStyle: {
+                color: theme.axisLineColor
+            },
+            areaStyle: {
+                color: theme.splitLineColor
+            }
+        },
+        handleStyle: {
+            color: theme.tooltipBackgroundColor,
+            borderColor: theme.axisLineColor
+        },
+        moveHandleStyle: {
+            color: theme.axisLineColor
+        },
+        textStyle: {
+            color: theme.secondaryForegroundColor
+        },
+        filterMode: "filter"
+    });
+    return zoom;
+};
+const formatMarkLineValue = (value)=>Math.abs(value) >= 1000 ? value.toFixed(0) : Number(value.toPrecision(6)).toString();
+const markLineOption = (defs, theme, values, { axis = "yAxis", defaultColor, weights } = {})=>{
+    if (!defs || 0 === defs.length) return;
+    const data = [];
+    for (const def of defs){
+        const value = computeMarkLineValue(def, values, weights);
+        if (null !== value) {
+            const color = resolveColor(def.color, theme) ?? defaultColor ?? theme.crosshairColor;
+            data.push({
+                name: def.label ?? "",
+                [axis]: value,
+                lineStyle: {
+                    color,
+                    type: def.lineType ?? "dashed",
+                    width: 1
+                },
+                label: {
+                    color: theme.tooltipBackgroundColor,
+                    backgroundColor: color,
+                    padding: [
+                        2,
+                        4
+                    ],
+                    borderRadius: 2,
+                    position: def.labelPosition ?? "insideEndTop",
+                    formatter: def.label ? `${def.label} ${formatMarkLineValue(value)}` : formatMarkLineValue(value)
+                }
+            });
+        }
+    }
+    return {
+        silent: true,
+        symbol: [
+            "none",
+            "none"
+        ],
+        animation: false,
+        data
+    };
+};
+export { GRID_OUTER_BOUNDS, axisPointerLabel, axisStyle, dataZoomOption, formatTimeLabel, formatTimestamp, hasSlider, legendOption, markLineOption, textStyle, tooltipOption };