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

package/src/chart-data/projection-utils.js

@@ -0,0 +1,119 @@
+import { resolveColor } from "../theme/chartTheme.js";
+const toNumber = (value)=>{
+    if ("number" == typeof value) return Number.isFinite(value) ? value : null;
+    if ("bigint" == typeof value) return Number(value);
+    if ("string" == typeof value && "" !== value.trim()) {
+        const n = Number(value);
+        return Number.isFinite(n) ? n : null;
+    }
+    return null;
+};
+const getColumnValue = (row, columnMap, columnName)=>{
+    const index = columnMap[columnName];
+    return void 0 === index ? void 0 : row[index];
+};
+const getNumber = (row, columnMap, columnName)=>toNumber(getColumnValue(row, columnMap, columnName));
+const filterRows = (rows, columnMap, where)=>{
+    if (void 0 === where) return rows;
+    {
+        if ("function" == typeof where) return rows.filter((row)=>where(row, columnMap));
+        const entries = Object.entries(where);
+        return rows.filter((row)=>entries.every(([columnName, value])=>getColumnValue(row, columnMap, columnName) === value));
+    }
+};
+const sortRowsByNumber = (rows, columnMap, columnName, descending = false)=>{
+    const index = columnMap[columnName];
+    if (void 0 === index) return rows;
+    const value = (row)=>toNumber(row[index]) ?? 0;
+    const dir = descending ? -1 : 1;
+    let sorted = true;
+    for(let i = 1; i < rows.length; i++)if (dir * (value(rows[i]) - value(rows[i - 1])) < 0) {
+        sorted = false;
+        break;
+    }
+    return sorted ? rows : rows.slice().sort((r1, r2)=>dir * (value(r1) - value(r2)));
+};
+const colorForRow = (row, columnMap, colorBy, theme)=>{
+    const value = getColumnValue(row, columnMap, colorBy.columnName);
+    const color = colorBy.colors[String(value)] ?? colorBy.defaultColor;
+    return resolveColor(color, theme);
+};
+class Aggregator {
+    #aggregation;
+    count = 0;
+    #value = null;
+    constructor(aggregation){
+        this.#aggregation = aggregation;
+    }
+    add(value) {
+        if ("count" === this.#aggregation) {
+            this.count += 1;
+            return;
+        }
+        if (null === value) return;
+        this.count += 1;
+        const current = this.#value;
+        switch(this.#aggregation){
+            case "sum":
+            case "avg":
+                this.#value = (current ?? 0) + value;
+                break;
+            case "min":
+                this.#value = null === current ? value : Math.min(current, value);
+                break;
+            case "max":
+                this.#value = null === current ? value : Math.max(current, value);
+                break;
+            case "last":
+                this.#value = value;
+                break;
+        }
+    }
+    get value() {
+        switch(this.#aggregation){
+            case "count":
+                return this.count;
+            case "avg":
+                return null === this.#value ? null : this.#value / this.count;
+            default:
+                return this.#value;
+        }
+    }
+}
+const computeMarkLineValue = (def, values, weights)=>{
+    const { value } = def;
+    if ("number" == typeof value) return value;
+    const nums = values.filter((v)=>null !== v);
+    if (0 === nums.length) return null;
+    if ("last" === value) return nums[nums.length - 1];
+    if ("min" === value) return Math.min(...nums);
+    if ("max" === value) return Math.max(...nums);
+    if ("average" === value) return nums.reduce((s, n)=>s + n, 0) / nums.length;
+    if (weights) {
+        let total = 0;
+        let totalWeight = 0;
+        values.forEach((v, i)=>{
+            const w = weights[i];
+            if (null !== v && null != w) {
+                total += v * Math.abs(w);
+                totalWeight += Math.abs(w);
+            }
+        });
+        return 0 === totalWeight ? null : total / totalWeight;
+    }
+    return null;
+};
+const findFloorIndex = (sortedValues, target)=>{
+    let lo = 0;
+    let hi = sortedValues.length - 1;
+    let result = -1;
+    while(lo <= hi){
+        const mid = lo + hi >> 1;
+        if (sortedValues[mid] <= target) {
+            result = mid;
+            lo = mid + 1;
+        } else hi = mid - 1;
+    }
+    return result;
+};
+export { Aggregator, colorForRow, computeMarkLineValue, filterRows, findFloorIndex, getColumnValue, getNumber, sortRowsByNumber, toNumber };

package/src/charts/CandlestickChart.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { VuuChartContainer } from "../engine/VuuChartContainer.js";
+import { useStructuralMemo } from "../engine/useStructuralMemo.js";
+import { createCandlestickModel } from "./candlestick-model.js";
+const CandlestickChart = ({ crosshair, dataSource, dataZoom, formatTime, legend, markLines, ohlcColumnNames, overlays, showTooltip, timeColumnName, volumeColumnName, volumePaneHeight, xAxisType, ...props })=>{
+    const options = useStructuralMemo({
+        crosshair,
+        dataSource,
+        dataZoom,
+        formatTime,
+        legend,
+        markLines,
+        ohlcColumnNames,
+        overlays,
+        showTooltip,
+        timeColumnName,
+        volumeColumnName,
+        volumePaneHeight,
+        xAxisType
+    });
+    const model = useMemo(()=>createCandlestickModel(options), [
+        options
+    ]);
+    return /*#__PURE__*/ jsx(VuuChartContainer, {
+        ...props,
+        chartType: "candlestick",
+        model: model
+    });
+};
+export { CandlestickChart };

package/src/charts/CartesianChart.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { VuuChartContainer } from "../engine/VuuChartContainer.js";
+import { useStructuralMemo } from "../engine/useStructuralMemo.js";
+import { createCartesianModel } from "./cartesian-model.js";
+const CartesianChart = ({ aggregation, crosshair, dataSource, dataZoom, legend, orientation, series, showTooltip, xAxis, yAxes, ...props })=>{
+    const options = useStructuralMemo({
+        aggregation,
+        crosshair,
+        dataSource,
+        dataZoom,
+        legend,
+        orientation,
+        series,
+        showTooltip,
+        xAxis,
+        yAxes
+    });
+    const model = useMemo(()=>createCartesianModel(options), [
+        options
+    ]);
+    return /*#__PURE__*/ jsx(VuuChartContainer, {
+        ...props,
+        chartType: "cartesian",
+        model: model
+    });
+};
+export { CartesianChart };

package/src/charts/DepthChart.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { VuuChartContainer } from "../engine/VuuChartContainer.js";
+import { useStructuralMemo } from "../engine/useStructuralMemo.js";
+import { createDepthModel } from "./depth-model.js";
+const DepthChart = ({ askValue, bidValue, cumulativeSizeColumnName, dataSource, legend, priceColumnName, showMidPrice, showTooltip, sideColumnName, sizeColumnName, ...props })=>{
+    const options = useStructuralMemo({
+        askValue,
+        bidValue,
+        cumulativeSizeColumnName,
+        dataSource,
+        legend,
+        priceColumnName,
+        showMidPrice,
+        showTooltip,
+        sideColumnName,
+        sizeColumnName
+    });
+    const model = useMemo(()=>createDepthModel(options), [
+        options
+    ]);
+    return /*#__PURE__*/ jsx(VuuChartContainer, {
+        ...props,
+        chartType: "depth",
+        model: model
+    });
+};
+export { DepthChart };

package/src/charts/HeatmapChart.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { VuuChartContainer } from "../engine/VuuChartContainer.js";
+import { useStructuralMemo } from "../engine/useStructuralMemo.js";
+import { createHeatmapModel } from "./heatmap-model.js";
+const HeatmapChart = ({ aggregation, colorScale, dataSource, dataZoom, formatTime, max, min, showTooltip, showVisualMap, valueColumnName, where, xAxis, yAxis, ...props })=>{
+    const options = useStructuralMemo({
+        aggregation,
+        colorScale,
+        dataSource,
+        dataZoom,
+        formatTime,
+        max,
+        min,
+        showTooltip,
+        showVisualMap,
+        valueColumnName,
+        where,
+        xAxis,
+        yAxis
+    });
+    const model = useMemo(()=>createHeatmapModel(options), [
+        options
+    ]);
+    return /*#__PURE__*/ jsx(VuuChartContainer, {
+        ...props,
+        chartType: "heatmap",
+        model: model
+    });
+};
+export { HeatmapChart };

package/src/charts/HierarchyChart.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { VuuChartContainer } from "../engine/VuuChartContainer.js";
+import { useStructuralMemo } from "../engine/useStructuralMemo.js";
+import { createHierarchyModel } from "./hierarchy-model.js";
+const HierarchyChart = ({ aggregation, colorMode, dataSource, donut, formatValue, groupByColumnNames, legend, showTooltip, type, valueColumnName, where, ...props })=>{
+    const options = useStructuralMemo({
+        aggregation,
+        colorMode,
+        dataSource,
+        donut,
+        formatValue,
+        groupByColumnNames,
+        legend,
+        showTooltip,
+        type,
+        valueColumnName,
+        where
+    });
+    const model = useMemo(()=>createHierarchyModel(options), [
+        options
+    ]);
+    return /*#__PURE__*/ jsx(VuuChartContainer, {
+        ...props,
+        chartType: type,
+        model: model
+    });
+};
+const TreemapChart = (props)=>/*#__PURE__*/ jsx(HierarchyChart, {
+        ...props,
+        type: "treemap"
+    });
+const SunburstChart = (props)=>/*#__PURE__*/ jsx(HierarchyChart, {
+        ...props,
+        type: "sunburst"
+    });
+const PieChart = (props)=>/*#__PURE__*/ jsx(HierarchyChart, {
+        ...props,
+        type: "pie"
+    });
+export { HierarchyChart, PieChart, SunburstChart, TreemapChart };

package/src/charts/candlestick-model.js

@@ -0,0 +1,373 @@
+import { colorForRow, filterRows, findFloorIndex, getNumber, sortRowsByNumber } from "../chart-data/projection-utils.js";
+import { GRID_OUTER_BOUNDS, axisPointerLabel, axisStyle, dataZoomOption, formatTimeLabel, formatTimestamp, hasSlider, legendOption, markLineOption, textStyle, tooltipOption } from "../options/common.js";
+import { resolveColor } from "../theme/chartTheme.js";
+const defaultOhlc = {
+    open: "open",
+    high: "high",
+    low: "low",
+    close: "close"
+};
+const withMarkLine = (markLine)=>markLine ? {
+        markLine
+    } : void 0;
+const compactNumber = (value)=>{
+    const abs = Math.abs(value);
+    if (abs >= 1e9) return `${+(value / 1e9).toFixed(1)}B`;
+    if (abs >= 1e6) return `${+(value / 1e6).toFixed(1)}M`;
+    if (abs >= 1e3) return `${+(value / 1e3).toFixed(1)}K`;
+    return String(value);
+};
+const createCandlestickModel = ({ crosshair = true, dataSource, dataZoom = "both", formatTime = formatTimeLabel, legend, markLines, ohlcColumnNames, overlays = [], showTooltip = true, timeColumnName = "start", volumeColumnName, volumePaneHeight = 20, xAxisType = "category" })=>{
+    const ohlc = {
+        ...defaultOhlc,
+        ...ohlcColumnNames
+    };
+    const isCategory = "category" === xAxisType;
+    const hasVolume = void 0 !== volumeColumnName;
+    const legendPosition = legend ?? (overlays.length > 0 ? "top" : "none");
+    const overlayIds = overlays.map(({ columnName, id = columnName }, i)=>`overlay-${i}-${id}`);
+    const dataSources = [
+        dataSource
+    ].concat(overlays.flatMap((o)=>o.dataSource ? [
+            o.dataSource
+        ] : []));
+    const buildBaseOption = (theme)=>{
+        const slider = hasSlider(dataZoom);
+        const bottomMargin = slider ? 36 : 8;
+        const top = "top" === legendPosition ? 32 : 16;
+        const labelFormatter = isCategory ? (value)=>formatTime(Number(value)) : void 0;
+        const pointerFormatter = ({ value })=>formatTimestamp(Number(value));
+        const grids = [
+            {
+                id: "price",
+                left: 8,
+                right: 8,
+                outerBounds: GRID_OUTER_BOUNDS,
+                top,
+                bottom: hasVolume ? `${volumePaneHeight + 8}%` : bottomMargin
+            }
+        ];
+        const xAxes = [
+            {
+                id: "x",
+                type: xAxisType,
+                gridIndex: 0,
+                boundaryGap: isCategory ? true : void 0,
+                ...axisStyle(theme, false),
+                axisLabel: {
+                    ...axisStyle(theme).axisLabel,
+                    formatter: labelFormatter,
+                    show: !hasVolume
+                },
+                axisPointer: {
+                    label: {
+                        formatter: isCategory ? pointerFormatter : void 0
+                    }
+                },
+                ...isCategory ? {
+                    data: []
+                } : void 0
+            }
+        ];
+        const yAxes = [
+            {
+                id: "price",
+                type: "value",
+                gridIndex: 0,
+                position: "right",
+                scale: true,
+                ...axisStyle(theme)
+            }
+        ];
+        if (hasVolume) {
+            grids.push({
+                id: "volume",
+                left: 8,
+                right: 8,
+                outerBounds: GRID_OUTER_BOUNDS,
+                height: `${volumePaneHeight}%`,
+                bottom: bottomMargin
+            });
+            xAxes.push({
+                id: "x-volume",
+                type: xAxisType,
+                gridIndex: 1,
+                boundaryGap: isCategory ? true : void 0,
+                ...axisStyle(theme, false),
+                axisLabel: {
+                    ...axisStyle(theme).axisLabel,
+                    formatter: labelFormatter
+                },
+                axisPointer: {
+                    label: {
+                        formatter: isCategory ? pointerFormatter : void 0
+                    }
+                },
+                ...isCategory ? {
+                    data: []
+                } : void 0
+            });
+            yAxes.push({
+                id: "volume",
+                type: "value",
+                gridIndex: 1,
+                position: "right",
+                splitNumber: 2,
+                ...axisStyle(theme),
+                axisLabel: {
+                    ...axisStyle(theme).axisLabel,
+                    formatter: compactNumber
+                }
+            });
+        }
+        const { palette } = theme;
+        const series = [
+            {
+                id: "candles",
+                name: "OHLC",
+                type: "candlestick",
+                xAxisIndex: 0,
+                yAxisIndex: 0,
+                encode: {
+                    x: 0,
+                    y: [
+                        1,
+                        2,
+                        3,
+                        4
+                    ]
+                },
+                barMaxWidth: 16,
+                itemStyle: {
+                    color: theme.upColor,
+                    color0: theme.downColor,
+                    borderColor: theme.upColor,
+                    borderColor0: theme.downColor
+                },
+                data: []
+            }
+        ];
+        if (hasVolume) series.push({
+            id: "volume",
+            name: volumeColumnName,
+            type: "bar",
+            xAxisIndex: 1,
+            yAxisIndex: 1,
+            encode: {
+                x: 0,
+                y: 1
+            },
+            barMaxWidth: 16,
+            itemStyle: {
+                opacity: 0.6
+            },
+            data: []
+        });
+        overlays.forEach((o, i)=>{
+            const color = resolveColor(o.color, theme) ?? palette[i % palette.length];
+            series.push({
+                id: overlayIds[i],
+                name: o.name ?? o.columnName,
+                type: o.type,
+                xAxisIndex: 0,
+                yAxisIndex: 0,
+                encode: {
+                    x: 0,
+                    y: 1
+                },
+                color,
+                ..."line" === o.type ? {
+                    showSymbol: false,
+                    connectNulls: true,
+                    lineStyle: {
+                        width: 1.5
+                    }
+                } : {
+                    symbol: o.symbol ?? "circle",
+                    symbolSize: o.symbolSize ?? 10,
+                    z: 5
+                },
+                data: []
+            });
+        });
+        return {
+            animation: false,
+            backgroundColor: theme.backgroundColor,
+            color: palette,
+            textStyle: textStyle(theme),
+            axisPointer: {
+                link: [
+                    {
+                        xAxisIndex: "all"
+                    }
+                ],
+                label: axisPointerLabel(theme)
+            },
+            grid: grids,
+            legend: {
+                ...legendOption(theme, legendPosition),
+                ..."none" !== legendPosition ? {
+                    data: overlays.map((o)=>o.name ?? o.columnName)
+                } : void 0
+            },
+            tooltip: tooltipOption(theme, {
+                crosshair,
+                show: showTooltip
+            }),
+            xAxis: xAxes,
+            yAxis: yAxes,
+            dataZoom: dataZoomOption(dataZoom, theme, hasVolume ? [
+                0,
+                1
+            ] : [
+                0
+            ]),
+            series
+        };
+    };
+    const buildDataOption = (data, theme)=>{
+        const { columnMap, rows: allRows } = data.get(dataSource);
+        const rows = sortRowsByNumber(allRows, columnMap, timeColumnName);
+        const times = [];
+        const candles = [];
+        const volumes = [];
+        const closes = [];
+        const candleRows = [];
+        for (const row of rows){
+            const time = getNumber(row, columnMap, timeColumnName);
+            if (null === time) continue;
+            const x = isCategory ? times.length : time;
+            times.push(time);
+            candleRows.push(row);
+            const open = getNumber(row, columnMap, ohlc.open);
+            const close = getNumber(row, columnMap, ohlc.close);
+            candles.push([
+                x,
+                open,
+                close,
+                getNumber(row, columnMap, ohlc.low),
+                getNumber(row, columnMap, ohlc.high)
+            ]);
+            closes.push(close);
+            if (volumeColumnName) volumes.push({
+                value: [
+                    x,
+                    getNumber(row, columnMap, volumeColumnName)
+                ],
+                itemStyle: {
+                    color: (close ?? 0) >= (open ?? 0) ? theme.upColor : theme.downColor
+                }
+            });
+        }
+        const lastCandle = candles.at(-1);
+        const lastColor = lastCandle && (lastCandle[2] ?? 0) < (lastCandle[1] ?? 0) ? theme.downColor : theme.upColor;
+        const rowLookup = {
+            candles: {
+                dataSource,
+                rows: candleRows
+            }
+        };
+        const series = [
+            {
+                id: "candles",
+                data: candles,
+                ...withMarkLine(markLineOption(markLines, theme, closes, {
+                    defaultColor: lastColor
+                }))
+            }
+        ];
+        if (volumeColumnName) {
+            rowLookup.volume = {
+                dataSource,
+                rows: candleRows
+            };
+            series.push({
+                id: "volume",
+                data: volumes
+            });
+        }
+        overlays.forEach((o, i)=>{
+            const ds = o.dataSource ?? dataSource;
+            const isOwnDataSource = ds === dataSource;
+            const { columnMap: oColumnMap, rows: oAllRows } = isOwnDataSource ? {
+                columnMap,
+                rows
+            } : data.get(ds);
+            const oTimeColumn = o.timeColumnName ?? timeColumnName;
+            const oRows = sortRowsByNumber(filterRows(oAllRows, oColumnMap, o.where), oColumnMap, oTimeColumn);
+            const items = [];
+            const values = [];
+            const itemRows = [];
+            for (const row of oRows){
+                const time = getNumber(row, oColumnMap, oTimeColumn);
+                if (null === time) continue;
+                let x = time;
+                if (isCategory) {
+                    x = findFloorIndex(times, time);
+                    if (-1 === x) continue;
+                }
+                const y = getNumber(row, oColumnMap, o.columnName);
+                const color = o.colorBy ? colorForRow(row, oColumnMap, o.colorBy, theme) : void 0;
+                items.push(color ? {
+                    value: [
+                        x,
+                        y
+                    ],
+                    itemStyle: {
+                        color
+                    }
+                } : [
+                    x,
+                    y
+                ]);
+                values.push(y);
+                itemRows.push(row);
+            }
+            const weightDef = o.markLines?.find((m)=>"object" == typeof m.value);
+            const weightColumn = weightDef && "object" == typeof weightDef.value ? weightDef.value.weightedAverage : void 0;
+            rowLookup[overlayIds[i]] = {
+                dataSource: ds,
+                rows: itemRows
+            };
+            series.push({
+                id: overlayIds[i],
+                data: items,
+                ...withMarkLine(markLineOption(o.markLines, theme, values, {
+                    defaultColor: resolveColor(o.color, theme) ?? theme.palette[i % theme.palette.length],
+                    weights: weightColumn ? itemRows.map((row)=>getNumber(row, oColumnMap, weightColumn)) : void 0
+                }))
+            });
+        });
+        const option = {
+            series
+        };
+        if (isCategory) {
+            const categories = times.map(String);
+            option.xAxis = hasVolume ? [
+                {
+                    id: "x",
+                    data: categories
+                },
+                {
+                    id: "x-volume",
+                    data: categories
+                }
+            ] : [
+                {
+                    id: "x",
+                    data: categories
+                }
+            ];
+        }
+        return {
+            option,
+            rowLookup
+        };
+    };
+    return {
+        buildBaseOption,
+        buildDataOption,
+        dataSources
+    };
+};
+export { createCandlestickModel };