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

package/src/charts/cartesian-model.js

@@ -0,0 +1,234 @@
+import { Aggregator, colorForRow, filterRows, getColumnValue, getNumber, sortRowsByNumber, toNumber } from "../chart-data/projection-utils.js";
+import { GRID_OUTER_BOUNDS, axisStyle, dataZoomOption, hasSlider, legendOption, markLineOption, textStyle, tooltipOption } from "../options/common.js";
+import { resolveColor } from "../theme/chartTheme.js";
+const seriesIds = (series)=>{
+    const ids = new Set();
+    return series.map(({ columnName, id = columnName }, i)=>{
+        const uniqueId = ids.has(id) ? `${id}-${i}` : id;
+        ids.add(uniqueId);
+        return uniqueId;
+    });
+};
+const createCartesianModel = ({ aggregation, crosshair = true, dataSource, dataZoom, legend, orientation = "vertical", series, showTooltip = true, xAxis, yAxes = [
+    {}
+] })=>{
+    const xType = xAxis.type ?? "category";
+    const isCategory = "category" === xType;
+    const horizontal = "horizontal" === orientation;
+    const hasBars = series.some((s)=>"bar" === s.type);
+    const ids = seriesIds(series);
+    const legendPosition = legend ?? (series.length > 1 ? "top" : "none");
+    const dataSources = [
+        dataSource
+    ].concat(series.flatMap((s)=>s.dataSource ? [
+            s.dataSource
+        ] : []));
+    const buildBaseOption = (theme)=>{
+        const { palette } = theme;
+        const categoryAxis = {
+            id: "x",
+            type: xType,
+            name: xAxis.name,
+            boundaryGap: isCategory ? hasBars : void 0,
+            scale: "value" === xType ? true : void 0,
+            ...axisStyle(theme, false),
+            ...isCategory ? {
+                data: []
+            } : void 0
+        };
+        const valueAxes = yAxes.map((y, i)=>({
+                id: `y${i}`,
+                type: y.type ?? "value",
+                name: y.name,
+                position: y.position ?? (horizontal ? void 0 : 0 === i ? "left" : "right"),
+                scale: y.scale ?? !hasBars,
+                min: y.min,
+                max: y.max,
+                ...axisStyle(theme, 0 === i)
+            }));
+        const slider = hasSlider(dataZoom);
+        return {
+            animation: false,
+            backgroundColor: theme.backgroundColor,
+            color: palette,
+            textStyle: textStyle(theme),
+            grid: {
+                id: "main",
+                left: 8,
+                right: 8,
+                outerBounds: GRID_OUTER_BOUNDS,
+                top: "top" === legendPosition ? 32 : 16,
+                bottom: (slider ? 32 : 8) + ("bottom" === legendPosition ? 24 : 0)
+            },
+            legend: legendOption(theme, legendPosition),
+            tooltip: tooltipOption(theme, {
+                crosshair,
+                show: showTooltip
+            }),
+            xAxis: horizontal ? valueAxes : [
+                categoryAxis
+            ],
+            yAxis: horizontal ? [
+                categoryAxis
+            ] : valueAxes,
+            dataZoom: dataZoomOption(dataZoom, theme, [
+                0
+            ], horizontal ? "y" : "x"),
+            series: series.map((s, i)=>{
+                const color = resolveColor(s.color, theme) ?? palette[i % palette.length];
+                const isLine = "line" === s.type || "area" === s.type;
+                const axisIndex = s.yAxisIndex ?? 0;
+                return {
+                    id: ids[i],
+                    name: s.name ?? s.columnName,
+                    type: isLine ? "line" : s.type,
+                    color,
+                    ...horizontal ? {
+                        xAxisIndex: axisIndex
+                    } : {
+                        yAxisIndex: axisIndex
+                    },
+                    encode: horizontal ? {
+                        x: 1,
+                        y: 0
+                    } : {
+                        x: 0,
+                        y: 1
+                    },
+                    stack: s.stack,
+                    ...isLine ? {
+                        step: s.step ?? false,
+                        smooth: s.smooth ?? false,
+                        showSymbol: s.showSymbol ?? false,
+                        symbolSize: s.symbolSize ?? 4,
+                        connectNulls: true,
+                        lineStyle: {
+                            width: 1.5
+                        },
+                        areaStyle: "area" === s.type ? {
+                            opacity: s.areaOpacity ?? 0.25
+                        } : void 0
+                    } : void 0,
+                    ..."scatter" === s.type ? {
+                        symbolSize: s.symbolSize ?? 8
+                    } : void 0,
+                    ..."bar" === s.type ? {
+                        barMaxWidth: 40
+                    } : void 0,
+                    data: []
+                };
+            })
+        };
+    };
+    const buildDataOption = (data, theme)=>{
+        const { columnMap: mainColumnMap, rows: mainRows } = data.get(dataSource);
+        const categories = [];
+        const categoryIndex = new Map();
+        const addCategory = (value)=>{
+            const key = String(value);
+            let index = categoryIndex.get(key);
+            if (void 0 === index) {
+                index = categories.length;
+                categories.push(key);
+                categoryIndex.set(key, index);
+            }
+            return index;
+        };
+        if (isCategory) for (const row of mainRows)addCategory(getColumnValue(row, mainColumnMap, xAxis.columnName));
+        const rowLookup = {};
+        const seriesData = series.map((s, i)=>{
+            const ds = s.dataSource ?? dataSource;
+            const { columnMap, rows: allRows } = data.get(ds);
+            const xColumn = s.xColumnName ?? xAxis.columnName;
+            let rows = filterRows(allRows, columnMap, s.where);
+            if (!isCategory) rows = sortRowsByNumber(rows, columnMap, xColumn);
+            const items = [];
+            const values = [];
+            const itemRows = [];
+            const pushItem = (x, y, row)=>{
+                const color = s.colorBy ? colorForRow(row, columnMap, s.colorBy, theme) : void 0;
+                items.push(color ? {
+                    value: [
+                        x,
+                        y
+                    ],
+                    itemStyle: {
+                        color
+                    }
+                } : [
+                    x,
+                    y
+                ]);
+                values.push(y);
+                itemRows.push(row);
+            };
+            if (isCategory && aggregation) {
+                const aggregators = new Map();
+                for (const row of rows){
+                    const x = addCategory(getColumnValue(row, columnMap, xColumn));
+                    let entry = aggregators.get(x);
+                    if (void 0 === entry) {
+                        entry = [
+                            new Aggregator(aggregation),
+                            row
+                        ];
+                        aggregators.set(x, entry);
+                    }
+                    entry[0].add(getNumber(row, columnMap, s.columnName));
+                }
+                const entries = Array.from(aggregators.entries()).sort(([x1], [x2])=>x1 - x2);
+                for (const [x, [aggregator, row]] of entries)pushItem(x, aggregator.value, row);
+            } else for (const row of rows){
+                const xValue = getColumnValue(row, columnMap, xColumn);
+                const x = isCategory ? addCategory(xValue) : toNumber(xValue);
+                if (null !== x) pushItem(x, getNumber(row, columnMap, s.columnName), row);
+            }
+            rowLookup[ids[i]] = {
+                dataSource: ds,
+                rows: itemRows
+            };
+            const markLine = markLineOption(s.markLines, theme, values, {
+                axis: horizontal ? "xAxis" : "yAxis",
+                defaultColor: resolveColor(s.color, theme) ?? theme.palette[i % theme.palette.length],
+                weights: s.markLines?.reduce((w, def)=>{
+                    if (void 0 === w && "object" == typeof def.value) {
+                        const weightColumn = def.value.weightedAverage;
+                        return itemRows.map((row)=>getNumber(row, columnMap, weightColumn));
+                    }
+                    return w;
+                }, void 0)
+            });
+            return {
+                id: ids[i],
+                data: items,
+                ...markLine ? {
+                    markLine
+                } : void 0
+            };
+        });
+        const categoryAxisData = isCategory ? [
+            {
+                id: "x",
+                data: categories
+            }
+        ] : void 0;
+        const option = {
+            series: seriesData,
+            ...categoryAxisData ? horizontal ? {
+                yAxis: categoryAxisData
+            } : {
+                xAxis: categoryAxisData
+            } : void 0
+        };
+        return {
+            option,
+            rowLookup
+        };
+    };
+    return {
+        buildBaseOption,
+        buildDataOption,
+        dataSources
+    };
+};
+export { createCartesianModel, seriesIds };

package/src/charts/depth-model.js

@@ -0,0 +1,159 @@
+import { getColumnValue, getNumber } from "../chart-data/projection-utils.js";
+import { GRID_OUTER_BOUNDS, axisStyle, legendOption, textStyle, tooltipOption } from "../options/common.js";
+const cumulativeDepth = (levels, side)=>{
+    const sorted = levels.slice().sort((l1, l2)=>"bid" === side ? l2.price - l1.price : l1.price - l2.price);
+    let total = 0;
+    return sorted.map((level)=>{
+        total = level.cum ?? total + level.size;
+        return {
+            price: level.price,
+            cumSize: total,
+            row: level.row
+        };
+    });
+};
+const createDepthModel = ({ askValue = "SELL", bidValue = "BUY", cumulativeSizeColumnName, dataSource, legend = "top", priceColumnName = "price", showMidPrice = true, showTooltip = true, sideColumnName = "side", sizeColumnName = "size" })=>{
+    const buildBaseOption = (theme)=>{
+        const sideSeries = (id, color)=>({
+                id,
+                name: "bids" === id ? "Bids" : "Asks",
+                type: "line",
+                step: "bids" === id ? "start" : "end",
+                color,
+                showSymbol: false,
+                lineStyle: {
+                    width: 1.5
+                },
+                areaStyle: {
+                    opacity: 0.25
+                },
+                encode: {
+                    x: 0,
+                    y: 1
+                },
+                data: []
+            });
+        return {
+            animation: false,
+            backgroundColor: theme.backgroundColor,
+            textStyle: textStyle(theme),
+            grid: {
+                id: "main",
+                left: 8,
+                right: 8,
+                outerBounds: GRID_OUTER_BOUNDS,
+                top: "top" === legend ? 32 : 16,
+                bottom: "bottom" === legend ? 32 : 8
+            },
+            legend: legendOption(theme, legend),
+            tooltip: tooltipOption(theme, {
+                show: showTooltip
+            }),
+            xAxis: [
+                {
+                    id: "x",
+                    type: "value",
+                    scale: true,
+                    ...axisStyle(theme, false)
+                }
+            ],
+            yAxis: [
+                {
+                    id: "y0",
+                    type: "value",
+                    position: "right",
+                    ...axisStyle(theme)
+                }
+            ],
+            series: [
+                sideSeries("bids", theme.upColor),
+                sideSeries("asks", theme.downColor)
+            ]
+        };
+    };
+    const buildDataOption = (data, theme)=>{
+        const { columnMap, rows } = data.get(dataSource);
+        const bids = [];
+        const asks = [];
+        for (const row of rows){
+            const price = getNumber(row, columnMap, priceColumnName);
+            if (null === price) continue;
+            const side = String(getColumnValue(row, columnMap, sideColumnName));
+            const level = {
+                price,
+                size: getNumber(row, columnMap, sizeColumnName) ?? 0,
+                cum: cumulativeSizeColumnName ? getNumber(row, columnMap, cumulativeSizeColumnName) ?? void 0 : void 0,
+                row
+            };
+            if (side === bidValue) bids.push(level);
+            else if (side === askValue) asks.push(level);
+        }
+        const bidPoints = cumulativeDepth(bids, "bid").reverse();
+        const askPoints = cumulativeDepth(asks, "ask");
+        const bestBid = bidPoints.at(-1)?.price;
+        const bestAsk = askPoints[0]?.price;
+        const midPrice = void 0 !== bestBid && void 0 !== bestAsk ? (bestBid + bestAsk) / 2 : void 0;
+        const rowLookup = {
+            bids: {
+                dataSource,
+                rows: bidPoints.map((p)=>p.row)
+            },
+            asks: {
+                dataSource,
+                rows: askPoints.map((p)=>p.row)
+            }
+        };
+        const option = {
+            series: [
+                {
+                    id: "bids",
+                    data: bidPoints.map((p)=>[
+                            p.price,
+                            p.cumSize
+                        ]),
+                    markLine: {
+                        silent: true,
+                        symbol: [
+                            "none",
+                            "none"
+                        ],
+                        animation: false,
+                        data: showMidPrice && void 0 !== midPrice ? [
+                            {
+                                xAxis: midPrice,
+                                lineStyle: {
+                                    color: theme.crosshairColor,
+                                    type: "dashed",
+                                    width: 1
+                                },
+                                label: {
+                                    color: theme.secondaryForegroundColor,
+                                    formatter: `Mid ${+midPrice.toFixed(6)}`
+                                }
+                            }
+                        ] : []
+                    }
+                },
+                {
+                    id: "asks",
+                    data: askPoints.map((p)=>[
+                            p.price,
+                            p.cumSize
+                        ])
+                }
+            ]
+        };
+        return {
+            option,
+            rowLookup
+        };
+    };
+    return {
+        buildBaseOption,
+        buildDataOption,
+        dataSources: [
+            dataSource
+        ]
+    };
+};
+export { createDepthModel, cumulativeDepth };

package/src/charts/heatmap-model.js

@@ -0,0 +1,243 @@
+import { Aggregator, filterRows, getColumnValue, getNumber, toNumber } from "../chart-data/projection-utils.js";
+import { axisStyle, dataZoomOption, formatTimeLabel, hasSlider, textStyle, tooltipOption } from "../options/common.js";
+const decimalPlaces = (n)=>{
+    const [, fraction = ""] = String(n).split(".");
+    return fraction.length;
+};
+const bucketFloor = (value, bucketSize)=>{
+    const bucket = Math.floor(value / bucketSize + 1e-9) * bucketSize;
+    return Number(bucket.toFixed(decimalPlaces(bucketSize)));
+};
+const bucketValue = (value, axis)=>{
+    const isNumeric = "time" === axis.type || "value" === axis.type;
+    if (isNumeric || void 0 !== axis.bucketSize) {
+        const num = toNumber(value);
+        if (null === num) return null;
+        return axis.bucketSize ? bucketFloor(num, axis.bucketSize) : num;
+    }
+    return null == value ? null : String(value);
+};
+const sortKeys = (keys, axis)=>"time" === axis.type || "value" === axis.type || void 0 !== axis.bucketSize ? keys.slice().sort((k1, k2)=>Number(k1) - Number(k2)) : keys;
+const createHeatmapModel = ({ aggregation = "sum", colorScale = "sequential", dataSource, dataZoom, formatTime = formatTimeLabel, max, min, showTooltip = true, showVisualMap = true, valueColumnName, where, xAxis, yAxis })=>{
+    const labelFormatter = (axis)=>"time" === axis.type ? (value)=>formatTime(Number(value)) : void 0;
+    const diverging = "diverging" === colorScale;
+    const visualMapRange = (hasValues, minValue, maxValue)=>{
+        if (diverging) {
+            const extent = hasValues ? Math.max(Math.abs(minValue), Math.abs(maxValue), 1) : 1;
+            return {
+                min: min ?? -extent,
+                max: max ?? extent
+            };
+        }
+        return {
+            min: min ?? (hasValues ? Math.min(0, minValue) : 0),
+            max: max ?? (hasValues ? Math.max(maxValue, minValue + 1) : 1)
+        };
+    };
+    let xLabels = [];
+    let yLabels = [];
+    const formatKey = (key, axis)=>void 0 !== key && "time" === axis.type ? formatTime(Number(key)) : key ?? "";
+    const buildBaseOption = (theme)=>{
+        const slider = hasSlider(dataZoom);
+        return {
+            animation: false,
+            backgroundColor: theme.backgroundColor,
+            textStyle: textStyle(theme),
+            grid: {
+                id: "main",
+                left: 8,
+                right: showVisualMap ? 56 : 8,
+                top: 16,
+                bottom: slider ? 36 : 8
+            },
+            tooltip: {
+                ...tooltipOption(theme, {
+                    show: showTooltip,
+                    trigger: "item"
+                }),
+                formatter: ({ value })=>{
+                    const [x, y, v] = value;
+                    return `${xAxis.name ?? xAxis.columnName}: ${formatKey(xLabels[x], xAxis)}<br/>${yAxis.name ?? yAxis.columnName}: ${formatKey(yLabels[y], yAxis)}<br/>${valueColumnName}: <b>${v ?? "-"}</b>`;
+                }
+            },
+            xAxis: [
+                {
+                    id: "x",
+                    type: "category",
+                    name: xAxis.name,
+                    data: [],
+                    splitArea: {
+                        show: false
+                    },
+                    ...axisStyle(theme, false),
+                    axisLabel: {
+                        ...axisStyle(theme).axisLabel,
+                        formatter: labelFormatter(xAxis)
+                    }
+                }
+            ],
+            yAxis: [
+                {
+                    id: "y0",
+                    type: "category",
+                    name: yAxis.name,
+                    data: [],
+                    ...axisStyle(theme, false),
+                    axisLabel: {
+                        ...axisStyle(theme).axisLabel,
+                        formatter: labelFormatter(yAxis)
+                    }
+                }
+            ],
+            visualMap: [
+                {
+                    id: "vm",
+                    type: "continuous",
+                    show: showVisualMap,
+                    calculable: true,
+                    orient: "vertical",
+                    right: 0,
+                    top: "center",
+                    itemHeight: 120,
+                    itemWidth: 12,
+                    min: min ?? 0,
+                    max: max ?? 1,
+                    inRange: {
+                        color: diverging ? [
+                            theme.downColor,
+                            theme.splitLineColor,
+                            theme.upColor
+                        ] : theme.heatmapColors
+                    },
+                    textStyle: {
+                        color: theme.secondaryForegroundColor
+                    }
+                }
+            ],
+            dataZoom: dataZoomOption(dataZoom, theme, [
+                0
+            ]),
+            series: [
+                {
+                    id: "heatmap",
+                    name: valueColumnName,
+                    type: "heatmap",
+                    encode: {
+                        x: 0,
+                        y: 1,
+                        value: 2
+                    },
+                    progressive: 0,
+                    emphasis: {
+                        itemStyle: {
+                            borderColor: theme.foregroundColor,
+                            borderWidth: 1
+                        }
+                    },
+                    data: []
+                }
+            ]
+        };
+    };
+    const buildDataOption = (data)=>{
+        const { columnMap, rows: allRows } = data.get(dataSource);
+        const rows = filterRows(allRows, columnMap, where);
+        const cells = new Map();
+        const xKeys = new Set();
+        const yKeys = new Set();
+        for (const row of rows){
+            const x = bucketValue(getColumnValue(row, columnMap, xAxis.columnName), xAxis);
+            const y = bucketValue(getColumnValue(row, columnMap, yAxis.columnName), yAxis);
+            if (null === x || null === y) continue;
+            xKeys.add(x);
+            yKeys.add(y);
+            const key = `${x}|${y}`;
+            let cell = cells.get(key);
+            if (void 0 === cell) {
+                cell = {
+                    x,
+                    y,
+                    agg: new Aggregator(aggregation),
+                    rows: []
+                };
+                cells.set(key, cell);
+            }
+            cell.agg.add(getNumber(row, columnMap, valueColumnName));
+            cell.rows.push(row);
+        }
+        const xCategories = sortKeys(Array.from(xKeys), xAxis);
+        const yCategories = sortKeys(Array.from(yKeys), yAxis);
+        const xIndex = new Map(xCategories.map((k, i)=>[
+                k,
+                i
+            ]));
+        const yIndex = new Map(yCategories.map((k, i)=>[
+                k,
+                i
+            ]));
+        let minValue = 1 / 0;
+        let maxValue = -1 / 0;
+        const items = [];
+        const itemRows = [];
+        for (const cell of cells.values()){
+            const value = cell.agg.value;
+            if (null !== value) {
+                minValue = Math.min(minValue, value);
+                maxValue = Math.max(maxValue, value);
+            }
+            items.push([
+                xIndex.get(cell.x) ?? 0,
+                yIndex.get(cell.y) ?? 0,
+                value
+            ]);
+            itemRows.push(cell.rows[0]);
+        }
+        const hasValues = Number.isFinite(minValue);
+        xLabels = xCategories.map(String);
+        yLabels = yCategories.map(String);
+        const rowLookup = {
+            heatmap: {
+                dataSource,
+                rows: itemRows
+            }
+        };
+        const option = {
+            xAxis: [
+                {
+                    id: "x",
+                    data: xLabels
+                }
+            ],
+            yAxis: [
+                {
+                    id: "y0",
+                    data: yLabels
+                }
+            ],
+            visualMap: [
+                {
+                    id: "vm",
+                    ...visualMapRange(hasValues, minValue, maxValue)
+                }
+            ],
+            series: [
+                {
+                    id: "heatmap",
+                    data: items
+                }
+            ]
+        };
+        return {
+            option,
+            rowLookup
+        };
+    };
+    return {
+        buildBaseOption,
+        buildDataOption,
+        dataSources: [
+            dataSource
+        ]
+    };
+};
+export { createHeatmapModel };