@vuu-ui/vuu-chart 2.1.19-beta.1 → 2.1.19-beta.2

package/package.json

@@ -1,17 +1,17 @@
 {
-  "version": "2.1.19-beta.1",
+  "version": "2.1.19-beta.2",
   "description": "support for apache echarts using vuu data",
   "type": "module",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.1"
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2"
   },
   "dependencies": {
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "2.1.19-beta.1",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.1",
+    "@vuu-ui/vuu-context-menu": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
     "clsx": "^2.0.0"
   },
   "peerDependencies": {
@@ -21,13 +21,12 @@
   },
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },

package/src/Chart.css.js

@@ -0,0 +1,42 @@
+const css = `
+.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;
+
+  & > div > div {
+    & > div:first-child {
+      color: var(--salt-content-primary-foreground) !important;
+    }
+
+    & > div:nth-child(2) > div {
+      & > div {
+        align-items: center;
+        display: flex;
+
+        & span:first-child {
+          flex: 0 0 12px;
+        }
+
+        & span:nth-child(2) {
+          text-transform: capitalize;
+          flex: none;
+          color: var(--salt-content-secondary-foreground) !important;
+          font-size: var(--salt-text-label-fontSize) !important;
+        }
+
+        & span:nth-child(3) {
+          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.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { getInstanceByDom, init } from "echarts";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useChartOptions } from "./useChartOptions.js";
+import { useChartContextMenu } from "./useChartContextMenu.js";
+import clsx from "clsx";
+import Chart from "./Chart.css";
+const classBase = "vuuChart";
+const Chart_Chart = ({ categoryColumnName, chartSettings = {
+    useCoarsePointer: true,
+    renderer: "svg"
+}, className, dataSource, itemColorFunction, 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 option = useChartOptions({
+        categoryColumnName,
+        itemColorFunction,
+        palette,
+        dataSource,
+        seriesColumnNames,
+        showTooltip
+    });
+    const onContextMenu = useChartContextMenu({
+        categoryColumnName
+    });
+    useEffect(()=>{
+        const chart = init(chartRef.current, null, chartSettings);
+        chart.on("contextmenu", onContextMenu);
+        return ()=>{
+            chart?.dispose();
+        };
+    }, [
+        chartSettings,
+        onContextMenu
+    ]);
+    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.js

@@ -0,0 +1,101 @@
+import { EventEmitter, Range, buildColumnMap, metadataKeys } from "@vuu-ui/vuu-utils";
+import { MovingDataRowWindow } from "./DataRowMovingWindow.js";
+const defaultItemColorFunction = ({ color })=>color;
+const { KEY: KEY } = metadataKeys;
+function DataSourceValue(key, row, value) {
+    return {
+        key,
+        row,
+        value
+    };
+}
+function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns, itemColorFunction = defaultItemColorFunction) {
+    const categoryValues = [];
+    const seriesMap = new Map();
+    data.forEach((row)=>{
+        const categoryValue = row[columnMap[categoryColumn]];
+        categoryValues.push(categoryValue);
+        for (const seriesColumn of seriesColumns){
+            let series = seriesMap.get(seriesColumn);
+            if (!series) {
+                series = {
+                    id: seriesColumn,
+                    name: seriesColumn,
+                    label: seriesColumn,
+                    data: [],
+                    type: "line",
+                    itemStyle: {
+                        color: itemColorFunction
+                    },
+                    lineStyle: {
+                        width: 1.5
+                    },
+                    symbol: "circle"
+                };
+                seriesMap.set(seriesColumn, series);
+            }
+            const key = row[KEY];
+            const value = row[columnMap[seriesColumn]];
+            series.data.push(DataSourceValue(key, row, value));
+        }
+    });
+    return [
+        categoryValues,
+        Array.from(seriesMap.values())
+    ];
+}
+class ChartSeries extends EventEmitter {
+    #categoryColumn = "";
+    #columnMap = {};
+    #itemColorFunction;
+    #dataWindow = new MovingDataRowWindow(Range(0, 1000));
+    #dates = [];
+    #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] = getCategoriesAndSeries(this.#columnMap, this.#dataWindow.data, this.#categoryColumn, this.#seriesColumns, this.#itemColorFunction);
+            this.#dates = dates;
+            this.#series = series;
+            this.emit("update");
+        }
+    }
+    constructor({ dataSource, itemColorFunction }){
+        super();
+        this.#itemColorFunction = itemColorFunction;
+        dataSource.subscribe({
+            range: Range(0, 1000)
+        }, this.handleData);
+    }
+    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;
+    }
+}
+export { ChartSeries };

package/src/DataRowMovingWindow.js

@@ -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/index.js

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

package/src/useChartContextMenu.js

@@ -0,0 +1,29 @@
+import { useContextMenu } from "@vuu-ui/vuu-context-menu";
+import { useCallback } from "react";
+const useChartContextMenu = ({ categoryColumnName })=>{
+    const showContextMenu = useContextMenu();
+    const onContextMenu = useCallback(({ data, event, name: categoryValue, seriesName: valueColumn, value: keyedValue, ...rest })=>{
+        event.stop();
+        console.log({
+            rest
+        });
+        const { row, value } = data;
+        const menuOptions = {
+            categoryColumn: categoryColumnName,
+            categoryValue,
+            row,
+            valueColumn,
+            value
+        };
+        showContextMenu(event.event, "series", menuOptions, {
+            onOpenChange: (isOpen)=>{
+                console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);
+            }
+        });
+    }, [
+        categoryColumnName,
+        showContextMenu
+    ]);
+    return onContextMenu;
+};
+export { useChartContextMenu };

package/src/useChartOptions.js

@@ -0,0 +1,76 @@
+import { useMemo, useState } from "react";
+import { ChartSeries } from "./ChartSeries.js";
+import { itemsChanged } from "@vuu-ui/vuu-utils";
+const defaultPalette = [
+    "#4676bf",
+    "#ab6528",
+    "#9f55c2",
+    "#2a8285",
+    "#697694",
+    "#B0549d"
+];
+const useChartOptions = ({ categoryColumnName, dataSource, itemColorFunction, palette = defaultPalette, seriesColumnNames, showTooltip = true })=>{
+    const [, forceRender] = useState({});
+    const chartSeries = useMemo(()=>{
+        console.log("new ChartSeries");
+        const cs = new ChartSeries({
+            itemColorFunction,
+            dataSource
+        });
+        cs.on("update", ()=>forceRender({}));
+        return cs;
+    }, [
+        dataSource,
+        itemColorFunction
+    ]);
+    useMemo(()=>{
+        if (categoryColumnName !== chartSeries.categoryColumn) chartSeries.categoryColumn = categoryColumnName;
+        if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) chartSeries.seriesColumnNames = seriesColumnNames;
+    }, [
+        categoryColumnName,
+        chartSeries,
+        seriesColumnNames
+    ]);
+    return {
+        animation: false,
+        color: 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 ? {
+            backgroundColor: "",
+            borderColor: "",
+            className: "vuuChartTooltip",
+            trigger: "axis"
+        } : void 0,
+        xAxis: {
+            data: chartSeries.categories
+        },
+        yAxis: {
+            splitLine: {
+                lineStyle: {
+                    color: "var(--salt-separable-tertiary-borderColor)"
+                }
+            }
+        }
+    };
+};
+export { useChartOptions };