@vuu-ui/vuu-chart 3.0.0 → 3.1.0-beta.1

package/package.json

@@ -1,17 +1,23 @@
 {
-  "version": "3.0.0",
+  "version": "3.1.0-beta.1",
   "description": "support for apache echarts using vuu data",
+  "main": "src/index.ts",
   "license": "Apache-2.0",
+  "scripts": {
+    "build:dev": "node ../../scripts/run-build.mjs",
+    "build": "node ../../scripts/run-build-rslib.ts",
+    "type-defs": "node ../../scripts/build-type-defs.mjs"
+  },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.0.0",
-    "@vuu-ui/vuu-protocol-types": "3.0.0",
-    "@vuu-ui/vuu-data-local": "3.0.0"
+    "@vuu-ui/vuu-data-types": "3.1.0-beta.1",
+    "@vuu-ui/vuu-protocol-types": "3.1.0-beta.1",
+    "@vuu-ui/vuu-data-local": "3.1.0-beta.1"
   },
   "dependencies": {
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "3.0.0",
-    "@vuu-ui/vuu-utils": "3.0.0",
+    "@vuu-ui/vuu-context-menu": "3.1.0-beta.1",
+    "@vuu-ui/vuu-utils": "3.1.0-beta.1",
     "clsx": "^2.0.0"
   },
   "peerDependencies": {
@@ -21,19 +27,16 @@
   },
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "module": "index.js",
   "name": "@vuu-ui/vuu-chart",
   "type": "module",
   "types": "types/index.d.ts"

package/src/Chart.css.js

@@ -0,0 +1,46 @@
+const css = `
+.vuuChart {
+  & .vuuChartTooltip {
+    background-color: var(--salt-container-primary-background) !important;
+    border-color: var(--salt-selectable-borderColor-selected) !important;
+    font-family: var(--salt-text-fontFamily) !important;
+    border-radius: 6px !important;
+
+    & .vuuChart-tooltip-title {
+      color: var(--salt-content-primary-foreground) !important;
+    }
+
+    & .vuuChart-tooltip-entry {
+      align-items: center;
+      gap: 6px;
+      display: flex;
+
+      & .vuuChart-tooltip-icon {
+        border-radius: 12px;
+        flex: 0 0 12px;
+        height: 12px;
+        display: block;
+      }
+
+      & .vuuChart-tooltip-label {
+        text-transform: capitalize;
+        flex: auto;
+        min-width: 60px;
+        padding-top: 3px;
+        color: var(--salt-content-secondary-foreground) !important;
+        font-size: var(--salt-text-label-fontSize) !important;
+      }
+
+      & .vuuChart-tooltip-value {
+        text-align: right;
+        flex: auto;
+        color: var(--salt-content-primary-foreground) !important;
+        font-size: var(--salt-text-label-fontSize) !important;
+      }
+    }
+  }
+}
+
+
+`;
+export default css;

package/src/Chart.mjs

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { getInstanceByDom, init } from "echarts";
+import { useEffect, useRef } from "react";
+import { useChartContextMenu } from "./useChartContextMenu.mjs";
+import { useChartOptions } from "./useChartOptions.mjs";
+import { useChartSelection } from "./useChartSelection.mjs";
+import { buildColumnMap } from "@vuu-ui/vuu-utils";
+import Chart from "./Chart.css";
+const classBase = "vuuChart";
+const Chart_Chart = ({ categoryColumnName, chartSettings = {
+    useCoarsePointer: true,
+    renderer: "svg"
+}, className, config, dataExclusions, dataSource, optionSettings = {
+    notMerge: true
+}, palette, showTooltip, style = {
+    width: "100%",
+    height: "100%"
+}, seriesColumnNames, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-toast-notification",
+        css: Chart,
+        window: targetWindow
+    });
+    const chartRef = useRef(null);
+    const columnMap = buildColumnMap(dataSource.columns);
+    const onContextMenu = useChartContextMenu({
+        categoryColumnName,
+        columnMap
+    });
+    const { itemColorFunction, onClick, onMouseOut, onMouseOver, symbolSizeFunction } = useChartSelection({
+        categoryColumnName,
+        selectionModel: config?.selectionModel
+    });
+    const option = useChartOptions({
+        categoryColumnName,
+        config,
+        itemColorFunction,
+        palette,
+        dataExclusions,
+        dataSource,
+        seriesColumnNames,
+        symbolSizeFunction,
+        showTooltip
+    });
+    useEffect(()=>{
+        const chart = init(chartRef.current, null, chartSettings);
+        chart.on("contextmenu", onContextMenu);
+        chart.on("click", onClick);
+        chart.on("mouseover", onMouseOver);
+        chart.on("mouseout", onMouseOut);
+        return ()=>{
+            chart?.dispose();
+        };
+    }, [
+        chartSettings,
+        onClick,
+        onContextMenu,
+        onMouseOver,
+        onMouseOut
+    ]);
+    useEffect(()=>{
+        if (chartRef.current) {
+            const chart = getInstanceByDom(chartRef.current);
+            chart?.setOption(option, optionSettings);
+        }
+    }, [
+        option,
+        optionSettings
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        ref: chartRef,
+        style: style
+    });
+};
+export { Chart_Chart as Chart };

package/src/ChartSeries.mjs

@@ -0,0 +1,151 @@
+import { EventEmitter, Range, buildColumnMap, metadataKeys } from "@vuu-ui/vuu-utils";
+import { MovingDataRowWindow } from "./DataRowMovingWindow.mjs";
+import { defaultItemColorFunction } from "./chart-types.mjs";
+const { KEY: KEY } = metadataKeys;
+function DataSourceValue(key, row, value) {
+    return {
+        key,
+        row,
+        value
+    };
+}
+class ChartSeries extends EventEmitter {
+    #categoryColumn = "";
+    #colorMap = new Map();
+    #columnMap = {};
+    #config;
+    #dataExclusions;
+    #dataWindow = new MovingDataRowWindow(Range(0, 1000));
+    #dates = [];
+    #palette;
+    #series = [];
+    #seriesColumns = [];
+    handleData = (message)=>{
+        if ("subscribed" === message.type) this.#columnMap = buildColumnMap(message.tableSchema.columns);
+        else if ("viewport-update" === message.type) {
+            if ("size-only" === message.mode) ;
+            else if (message.rows) {
+                for (const row of message.rows)this.#dataWindow.add(row);
+                this.buildCategoriesAndSeries();
+            }
+        } else console.warn(JSON.stringify(message));
+    };
+    buildCategoriesAndSeries() {
+        if (this.#categoryColumn && this.#seriesColumns.length > 0) {
+            const [dates, series] = this.getCategoriesAndSeries();
+            this.#dates = dates;
+            this.#series = series;
+            this.emit("update");
+        }
+    }
+    constructor({ config, dataExclusions, dataSource, palette }){
+        super();
+        this.#config = config;
+        this.#dataExclusions = dataExclusions;
+        this.#palette = palette;
+        dataSource.subscribe({
+            range: Range(0, 1000)
+        }, this.handleData);
+    }
+    get palette() {
+        return this.#seriesColumns.map((col)=>this.#colorMap.get(col));
+    }
+    get categoryColumn() {
+        return this.#categoryColumn;
+    }
+    set categoryColumn(categoryColumn) {
+        this.#categoryColumn = categoryColumn;
+        if (this.#seriesColumns.length > 0) this.buildCategoriesAndSeries();
+    }
+    get seriesColumnNames() {
+        return this.#seriesColumns;
+    }
+    set seriesColumnNames(seriesColumnNames) {
+        this.#seriesColumns = seriesColumnNames;
+        if (this.#categoryColumn) this.buildCategoriesAndSeries();
+    }
+    get categories() {
+        return this.#dates;
+    }
+    get series() {
+        return this.#series;
+    }
+    getCategoriesAndSeries() {
+        const colorMap = this.#colorMap;
+        const columnMap = this.#columnMap;
+        const data = this.#dataWindow.data;
+        const categoryColumn = this.#categoryColumn;
+        const seriesColumns = this.#seriesColumns;
+        const config = this.#config;
+        const categoryValues = [];
+        const seriesMap = new Map();
+        const { itemColorFunction = defaultItemColorFunction, symbolSize = 6 } = config;
+        data.forEach((row)=>{
+            const categoryValue = row[columnMap[categoryColumn]];
+            categoryValues.push(categoryValue);
+            for (const seriesColumn of seriesColumns){
+                let lineSeries;
+                let scatterSeries;
+                const seriesTuple = seriesMap.get(seriesColumn);
+                if (seriesTuple) [lineSeries, scatterSeries] = seriesTuple;
+                else {
+                    if (!colorMap.has(seriesColumn)) colorMap.set(seriesColumn, this.#palette[this.#colorMap.size]);
+                    lineSeries = {
+                        id: seriesColumn,
+                        name: seriesColumn,
+                        label: seriesColumn,
+                        connectNulls: true,
+                        data: [],
+                        type: "line",
+                        itemStyle: {
+                            color: itemColorFunction
+                        },
+                        lineStyle: {
+                            width: 1.5
+                        },
+                        symbol: "circle",
+                        symbolSize
+                    };
+                    if (this.#dataExclusions) {
+                        const { symbol } = this.#dataExclusions;
+                        scatterSeries = {
+                            id: `${seriesColumn}-excluded`,
+                            data: [],
+                            itemStyle: {
+                                borderColor: "#FDC82F",
+                                color: "#101820",
+                                borderWidth: 2
+                            },
+                            label: "",
+                            name: seriesColumn,
+                            symbol,
+                            symbolSize: 20,
+                            type: "scatter"
+                        };
+                    }
+                    if (scatterSeries) seriesMap.set(seriesColumn, [
+                        lineSeries,
+                        scatterSeries
+                    ]);
+                    else seriesMap.set(seriesColumn, [
+                        lineSeries
+                    ]);
+                }
+                const key = row[KEY];
+                const value = row[columnMap[seriesColumn]];
+                if (this.#dataExclusions?.isExcludedData(row, columnMap, seriesColumn)) {
+                    lineSeries.data.push(DataSourceValue(key, row, null));
+                    scatterSeries?.data.push(DataSourceValue(key, row, value));
+                } else {
+                    lineSeries.data.push(DataSourceValue(key, row, value));
+                    scatterSeries?.data.push(DataSourceValue(key, row, null));
+                }
+            }
+        });
+        return [
+            categoryValues,
+            Array.from(seriesMap.values()).flat()
+        ];
+    }
+}
+export { ChartSeries };

package/src/DataRowMovingWindow.mjs

@@ -0,0 +1,64 @@
+import { WindowRange, metadataKeys } from "@vuu-ui/vuu-utils";
+const { IDX: IDX, KEY: KEY } = metadataKeys;
+class MovingDataRowWindow {
+    data;
+    rowCount = 0;
+    #range;
+    constructor({ from, to }){
+        this.#range = new WindowRange(from, to);
+        this.data = new Array(Math.max(0, to - from));
+        this.rowCount = 0;
+    }
+    setRowCount = (rowCount)=>{
+        if (rowCount < this.data.length) this.data.length = rowCount;
+        this.rowCount = rowCount;
+    };
+    add(data) {
+        const index = data[IDX];
+        if (this.isWithinRange(index)) {
+            const internalIndex = index - this.#range.from;
+            this.data[internalIndex] = data;
+        }
+    }
+    getAtIndex(index) {
+        return this.#range.isWithin(index) && null != this.data[index - this.#range.from] ? this.data[index - this.#range.from] : void 0;
+    }
+    getByKey(key) {
+        return this.data.find((row)=>row[KEY] === key);
+    }
+    isWithinRange(index) {
+        return this.#range.isWithin(index);
+    }
+    setRange({ from, to }) {
+        if (from !== this.#range.from || to !== this.#range.to) {
+            const [overlapFrom, overlapTo] = this.#range.overlap(from, to);
+            const newData = new Array(Math.max(0, to - from));
+            for(let i = overlapFrom; i < overlapTo; i++){
+                const data = this.getAtIndex(i);
+                if (data) {
+                    const index = i - from;
+                    newData[index] = data;
+                }
+            }
+            this.data = newData;
+            this.#range.from = from;
+            this.#range.to = to;
+        }
+    }
+    get hasData() {
+        return this.data.some((d)=>void 0 !== d);
+    }
+    get firstRow() {
+        for(let i = 0; i < this.data.length; i++)if (this.data[i]) return this.data[i];
+        throw Error("[DataRowMovingWinddow] firstRow, no data");
+    }
+    get range() {
+        return this.#range;
+    }
+    get hasAllRowsWithinRange() {
+        const { from, to } = this.#range;
+        for(let i = from; i < to; i++)if (void 0 === this.getAtIndex(i)) return false;
+        return true;
+    }
+}
+export { MovingDataRowWindow };

package/src/chart-types.mjs

@@ -0,0 +1,2 @@
+const defaultItemColorFunction = ({ color })=>color;
+export { defaultItemColorFunction };

package/src/chartTooltip.mjs

@@ -0,0 +1,23 @@
+const chartTooltip = (params)=>{
+    if (params.length > 0) {
+        const [{ axisValueLabel }] = params;
+        const values = [];
+        for (const { color, seriesName, seriesType, value } of params)if ('line' === seriesType) values.push({
+            color,
+            value,
+            seriesName
+        });
+        const tooltipEntries = values.map(({ color, value, seriesName })=>[
+                '<div class="vuuChart-tooltip-entry">',
+                `<span class="vuuChart-tooltip-icon" style="background:${color};"></span>`,
+                `<span class="vuuChart-tooltip-label">${seriesName}</span>`,
+                `<span class="vuuChart-tooltip-value">${value ?? 'n/a'}</span>`,
+                '</div>'
+            ].join(""));
+        return [
+            `<div class="vuuChart-tooltip-title">${axisValueLabel}</div>`,
+            '<div class="vuuChart-tooltip-container">'
+        ].concat(tooltipEntries).concat('</div>').join("");
+    }
+};
+export { chartTooltip };

package/src/index.mjs

@@ -0,0 +1,2 @@
+export { Chart } from "./Chart.mjs";
+export { ChartSeries } from "./ChartSeries.mjs";

package/src/useChartContextMenu.mjs

@@ -0,0 +1,22 @@
+import { useContextMenu } from "@vuu-ui/vuu-context-menu";
+import { useCallback } from "react";
+const useChartContextMenu = ({ columnMap })=>{
+    const showContextMenu = useContextMenu();
+    const onContextMenu = useCallback(({ data, event, seriesName })=>{
+        if (event && seriesName) {
+            event?.stop();
+            const { row } = data;
+            const menuOptions = {
+                column: seriesName,
+                columnMap,
+                row
+            };
+            showContextMenu(event.event, "series", menuOptions);
+        }
+    }, [
+        columnMap,
+        showContextMenu
+    ]);
+    return onContextMenu;
+};
+export { useChartContextMenu };

package/src/useChartOptions.mjs

@@ -0,0 +1,88 @@
+import { itemsChanged } from "@vuu-ui/vuu-utils";
+import { useMemo, useState } from "react";
+import { ChartSeries } from "./ChartSeries.mjs";
+import { chartTooltip } from "./chartTooltip.mjs";
+const defaultPalette = [
+    "#4676bf",
+    "#ab6528",
+    "#9f55c2",
+    "#2a8285",
+    "#697694",
+    "#B0549d"
+];
+const combineConfig = (config, overrides)=>({
+        ...config,
+        ...overrides
+    });
+const useChartOptions = ({ categoryColumnName, config, dataExclusions, dataSource, itemColorFunction, palette = defaultPalette, seriesColumnNames, showTooltip = true, symbolSizeFunction: symbolSize })=>{
+    const [, forceRender] = useState({});
+    const chartSeries = useMemo(()=>{
+        const cs = new ChartSeries({
+            config: combineConfig(config, {
+                itemColorFunction,
+                symbolSize
+            }),
+            dataExclusions,
+            dataSource,
+            palette
+        });
+        cs.on("update", ()=>forceRender({}));
+        return cs;
+    }, [
+        dataSource,
+        config
+    ]);
+    useMemo(()=>{
+        if (categoryColumnName !== chartSeries.categoryColumn) chartSeries.categoryColumn = categoryColumnName;
+        if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) chartSeries.seriesColumnNames = seriesColumnNames;
+    }, [
+        categoryColumnName,
+        chartSeries,
+        seriesColumnNames
+    ]);
+    return {
+        animation: false,
+        color: chartSeries.palette,
+        dataZoom: [
+            {
+                backgroundColor: "var(--vuuChart-zoom-background, transparent)",
+                borderColor: "var(--vuuChart-zoom-borderColor, white)",
+                handleStyle: {
+                    color: "var(--vuuChart-zoom-handleColor, white)"
+                },
+                moveHandleStyle: {
+                    color: "var(--vuuChart-zoom-slideColor, white)"
+                },
+                type: "slider",
+                start: 0,
+                end: 100
+            }
+        ],
+        grid: {
+            left: "0",
+            bottom: 0,
+            right: 5
+        },
+        series: chartSeries.series,
+        tooltip: showTooltip ? {
+            alwaysShowContent: true,
+            backgroundColor: "",
+            borderColor: "",
+            className: "vuuChartTooltip",
+            enterable: true,
+            formatter: chartTooltip,
+            trigger: "axis"
+        } : void 0,
+        xAxis: {
+            data: chartSeries.categories
+        },
+        yAxis: {
+            splitLine: {
+                lineStyle: {
+                    color: "var(--salt-separable-tertiary-borderColor)"
+                }
+            }
+        }
+    };
+};
+export { useChartOptions };

package/src/useChartSelection.mjs

@@ -0,0 +1,47 @@
+import { useCallback, useRef, useState } from "react";
+const dataItemMatch = (dataItem, targetSeries, targetKey)=>dataItem?.column === targetSeries && dataItem?.key === targetKey;
+const dataItemInList = (dataItems, targetColumn, targetKey)=>dataItems.some((dataItem)=>dataItemMatch(dataItem, targetColumn, targetKey));
+const useChartSelection = (_props)=>{
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [, setHighlightedKey] = useState();
+    const selectedKeysRef = useRef(selectedKeys);
+    const highlightedKeyRef = useRef(void 0);
+    const handleClick = useCallback(({ data, event, seriesName: column })=>{
+        if (column) {
+            event?.stop();
+            const { row } = data;
+            const key = row[6];
+            setSelectedKeys((currentSelection)=>selectedKeysRef.current = dataItemInList(currentSelection, column, key) ? [] : [
+                    {
+                        column,
+                        key
+                    }
+                ]);
+        }
+    }, []);
+    const handleMouseOver = useCallback(({ data, seriesName })=>{
+        if (seriesName) {
+            const { row } = data;
+            setHighlightedKey(highlightedKeyRef.current = {
+                column: seriesName,
+                key: row[6]
+            });
+        }
+    }, []);
+    const handleMouseOut = useCallback(()=>{
+        setHighlightedKey(highlightedKeyRef.current = void 0);
+    }, []);
+    const itemColorFunction = useCallback(({ color, data, seriesName })=>dataItemInList(selectedKeysRef.current, seriesName, data.key) ? "purple" : color, []);
+    const symbolSizeFunction = useCallback((value, { data, seriesName })=>{
+        const isSelected = dataItemInList(selectedKeysRef.current, seriesName, data.key);
+        return isSelected || dataItemMatch(highlightedKeyRef.current, seriesName, data.key) ? 16 : 6;
+    }, []);
+    return {
+        onClick: handleClick,
+        onMouseOver: handleMouseOver,
+        onMouseOut: handleMouseOut,
+        itemColorFunction,
+        symbolSizeFunction
+    };
+};
+export { useChartSelection };

package/cjs/Chart.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var chartCss = "\n\n.vuuChart {\n\n    .vuuChartTooltip {\n        background-color: var(--salt-container-primary-background) !important;\n        border-color:var(--salt-selectable-borderColor-selected) !important;\n        border-radius: 6px !important;\n        font-family: var(--salt-text-fontFamily)  !important;\n\n        .vuuChart-tooltip-title {\n            color: var(--salt-content-primary-foreground) !important;\n        }\n\n        .vuuChart-tooltip-entry {\n            align-items: center;\n            display: flex;\n            gap: 6px;\n\n            .vuuChart-tooltip-icon {\n                border-radius: 12px;\n                display: block;\n                flex: 0 0 12px;\n                height: 12px;\n            }\n            .vuuChart-tooltip-label {\n                color: var(--salt-content-secondary-foreground)  !important;\n                flex: 1 1 auto;\n                font-size: var(--salt-text-label-fontSize) !important;\n                min-width: 60px;\n                padding-top: 3px;\n                text-transform: capitalize;\n            }\n            .vuuChart-tooltip-value {\n                flex: 1 1 auto;\n                color: var(--salt-content-primary-foreground) !important;\n                font-size: var(--salt-text-label-fontSize) !important;\n                text-align: right;\n            }\n        }\n    }\n}\n\n";
-
-module.exports = chartCss;
-//# sourceMappingURL=Chart.css.js.map

package/cjs/Chart.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chart.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}