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

package/package.json

@@ -1,16 +1,17 @@
 {
-  "version": "2.1.18",
+  "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.18",
-    "@vuu-ui/vuu-protocol-types": "2.1.18"
+    "@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.18",
-    "@vuu-ui/vuu-utils": "2.1.18",
+    "@vuu-ui/vuu-context-menu": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
     "clsx": "^2.0.0"
   },
   "peerDependencies": {
@@ -20,20 +21,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,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 };

package/cjs/Chart.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var chartCss = "\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    &> div > div {\n        &>div:nth-child(1) {\n            /* Title */\n            color: var(--salt-content-primary-foreground) !important;\n        }\n\n        &>div:nth-child(2) > div {\n            &>div {\n                align-items: center;\n                display: flex;\n                /* Line item */\n                span:nth-child(1){\n                    /* icon */\n                    flex: 0 0 12px\n                }\n                span:nth-child(2){\n                    /* label */\n                    color: var(--salt-content-secondary-foreground)  !important;\n                    flex: 0 0 auto;\n                    font-size: var(--salt-text-label-fontSize) !important;\n                    text-transform: capitalize;\n                }\n                span:nth-child(3){\n                    /* 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":";;;;;;"}

package/cjs/Chart.js

@@ -1,70 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var echarts = require('echarts');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var useChartOptions = require('./useChartOptions.js');
-var useChartContextMenu = require('./useChartContextMenu.js');
-var cx = require('clsx');
-var Chart$1 = require('./Chart.css.js');
-
-const classBase = "vuuChart";
-const Chart = ({
-  categoryColumnName,
-  chartSettings = { useCoarsePointer: true, renderer: "svg" },
-  // enables clicking near a line and still highlighting it
-  className,
-  dataSource,
-  itemColorFunction,
-  optionSettings = { notMerge: true },
-  // don't merge two options together when updating option
-  palette,
-  showTooltip,
-  style = { width: "100%", height: "100%" },
-  seriesColumnNames,
-  ...htmlAttributes
-}) => {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-toast-notification",
-    css: Chart$1,
-    window: targetWindow
-  });
-  const chartRef = react.useRef(null);
-  const option = useChartOptions.useChartOptions({
-    categoryColumnName,
-    itemColorFunction,
-    palette,
-    dataSource,
-    seriesColumnNames,
-    showTooltip
-  });
-  const onContextMenu = useChartContextMenu.useChartContextMenu({ categoryColumnName });
-  react.useEffect(() => {
-    const chart = echarts.init(chartRef.current, null, chartSettings);
-    chart.on("contextmenu", onContextMenu);
-    return () => {
-      chart?.dispose();
-    };
-  }, [chartSettings, onContextMenu]);
-  react.useEffect(() => {
-    if (chartRef.current) {
-      const chart = echarts.getInstanceByDom(chartRef.current);
-      chart?.setOption(option, optionSettings);
-    }
-  }, [option, optionSettings]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx(classBase, className),
-      ref: chartRef,
-      style
-    }
-  );
-};
-
-exports.Chart = Chart;
-//# sourceMappingURL=Chart.js.map

package/cjs/Chart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chart.js","sources":["../../../packages/vuu-chart/src/Chart.tsx"],"sourcesContent":["import { useRef, useEffect, HTMLAttributes } from \"react\";\nimport { init, getInstanceByDom } from \"echarts\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ChartOptionsProps, useChartOptions } from \"./useChartOptions\";\nimport { useChartContextMenu } from \"./useChartContextMenu\";\nimport cx from \"clsx\";\n\nimport { ItemColorFunction } from \"./ChartSeries\";\n\nimport chartCss from \"./Chart.css\";\n\nconst classBase = \"vuuChart\";\n\ntype OptionSettings = {\n  notMerge: boolean;\n};\n\ntype ChartSettings = {\n  renderer: \"svg\" | \"canvas\";\n  useCoarsePointer: boolean;\n};\n\nexport interface ChartProps\n  extends ChartOptionsProps,\n    HTMLAttributes<HTMLDivElement> {\n  chartSettings?: ChartSettings;\n  itemColorFunction?: ItemColorFunction;\n  optionSettings?: OptionSettings;\n  palette?: string[];\n  showTooltip?: boolean;\n}\n\nexport const Chart = ({\n  categoryColumnName,\n  chartSettings = { useCoarsePointer: true, renderer: \"svg\" }, // enables clicking near a line and still highlighting it\n  className,\n  dataSource,\n  itemColorFunction,\n  optionSettings = { notMerge: true }, // don't merge two options together when updating option\n  palette,\n  showTooltip,\n  style = { width: \"100%\", height: \"100%\" },\n  seriesColumnNames,\n  ...htmlAttributes\n}: ChartProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toast-notification\",\n    css: chartCss,\n    window: targetWindow,\n  });\n\n  const chartRef = useRef<HTMLDivElement>(null);\n\n  const option = useChartOptions({\n    categoryColumnName,\n    itemColorFunction,\n    palette,\n    dataSource,\n    seriesColumnNames,\n    showTooltip,\n  });\n\n  const onContextMenu = useChartContextMenu({ categoryColumnName });\n\n  // Debounce resize event so it only fires periodically instead of constantly\n  //   const resizeChart = useMemo(\n  //     () =>\n  //       debounce(() => {\n  //         if (chartRef.current) {\n  //           const chart = getInstanceByDom(chartRef.current);\n  //           chart.resize();\n  //         }\n  //       }, 100),\n  //     [],\n  //   );\n\n  useEffect(() => {\n    // Initialize chart\n    const chart = init(chartRef.current, null, chartSettings);\n\n    chart.on(\"contextmenu\", onContextMenu);\n\n    // Resize event listener\n    // const resizeObserver = new ResizeObserver(() => {\n    //   resizeChart();\n    // });\n\n    // resizeObserver.observe(chartRef.current);\n\n    // Return cleanup function\n    return () => {\n      chart?.dispose();\n\n      //   if (chartRef.current) {\n      //     resizeObserver.unobserve(chartRef.current);\n      //   }\n      //   resizeObserver.disconnect();\n    };\n  }, [chartSettings, onContextMenu]);\n\n  useEffect(() => {\n    if (chartRef.current) {\n      // Re-render chart when option changes\n      const chart = getInstanceByDom(chartRef.current);\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      chart?.setOption(option, optionSettings);\n    }\n  }, [option, optionSettings]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={chartRef}\n      style={style}\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","chartCss","useRef","useChartOptions","useChartContextMenu","useEffect","init","getInstanceByDom","jsx"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,UAAA;AAqBX,MAAM,QAAQ,CAAC;AAAA,EACpB,kBAAA;AAAA,EACA,aAAgB,GAAA,EAAE,gBAAkB,EAAA,IAAA,EAAM,UAAU,KAAM,EAAA;AAAA;AAAA,EAC1D,SAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA,GAAiB,EAAE,QAAA,EAAU,IAAK,EAAA;AAAA;AAAA,EAClC,OAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAQ,GAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,EACxC,iBAAA;AAAA,EACA,GAAG;AACL,CAAkB,KAAA;AAChB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,aAAuB,IAAI,CAAA;AAE5C,EAAA,MAAM,SAASC,+BAAgB,CAAA;AAAA,IAC7B,kBAAA;AAAA,IACA,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAAC,uCAAA,CAAoB,EAAE,kBAAA,EAAoB,CAAA;AAchE,EAAAC,eAAA,CAAU,MAAM;AAEd,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAK,QAAS,CAAA,OAAA,EAAS,MAAM,aAAa,CAAA;AAExD,IAAM,KAAA,CAAA,EAAA,CAAG,eAAe,aAAa,CAAA;AAUrC,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,EAAO,OAAQ,EAAA;AAAA,KAMjB;AAAA,GACC,EAAA,CAAC,aAAe,EAAA,aAAa,CAAC,CAAA;AAEjC,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,OAAS,EAAA;AAEpB,MAAM,MAAA,KAAA,GAAQE,wBAAiB,CAAA,QAAA,CAAS,OAAO,CAAA;AAG/C,MAAO,KAAA,EAAA,SAAA,CAAU,QAAQ,cAAc,CAAA;AAAA;AACzC,GACC,EAAA,CAAC,MAAQ,EAAA,cAAc,CAAC,CAAA;AAE3B,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,QAAA;AAAA,MACL;AAAA;AAAA,GACF;AAEJ;;;;"}

package/cjs/ChartSeries.js

@@ -1,130 +0,0 @@
-'use strict';
-
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var DataRowMovingWindow = require('./DataRowMovingWindow.js');
-
-var __defProp = Object.defineProperty;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _categoryColumn, _columnMap, _itemColorFunction, _dataWindow, _dates, _series, _seriesColumns;
-const defaultItemColorFunction = ({ color }) => color;
-const { KEY } = vuuUtils.metadataKeys;
-function DataSourceValue(key, row, value) {
-  return { key, row, value };
-}
-function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns, itemColorFunction = defaultItemColorFunction) {
-  const categoryValues = [];
-  const seriesMap = /* @__PURE__ */ 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 = {
-          //any reason we can't simply use col name here ?
-          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 vuuUtils.EventEmitter {
-  constructor({ dataSource, itemColorFunction }) {
-    super();
-    __privateAdd(this, _categoryColumn, "");
-    __privateAdd(this, _columnMap, {});
-    __privateAdd(this, _itemColorFunction);
-    __privateAdd(this, _dataWindow, new DataRowMovingWindow.MovingDataRowWindow(vuuUtils.Range(0, 1e3)));
-    __privateAdd(this, _dates, []);
-    __privateAdd(this, _series, []);
-    __privateAdd(this, _seriesColumns, []);
-    __publicField(this, "handleData", (message) => {
-      if (message.type === "subscribed") {
-        __privateSet(this, _columnMap, vuuUtils.buildColumnMap(message.tableSchema.columns));
-      } else if (message.type === "viewport-update") {
-        if (message.mode === "size-only") ; else if (message.rows) {
-          for (const row of message.rows) {
-            __privateGet(this, _dataWindow).add(row);
-          }
-          this.buildCategoriesAndSeries();
-        }
-      } else {
-        console.warn(JSON.stringify(message));
-      }
-    });
-    __privateSet(this, _itemColorFunction, itemColorFunction);
-    dataSource.subscribe({ range: vuuUtils.Range(0, 1e3) }, this.handleData);
-  }
-  buildCategoriesAndSeries() {
-    if (__privateGet(this, _categoryColumn) && __privateGet(this, _seriesColumns).length > 0) {
-      const [dates, series] = getCategoriesAndSeries(
-        __privateGet(this, _columnMap),
-        __privateGet(this, _dataWindow).data,
-        __privateGet(this, _categoryColumn),
-        __privateGet(this, _seriesColumns),
-        __privateGet(this, _itemColorFunction)
-      );
-      __privateSet(this, _dates, dates);
-      __privateSet(this, _series, series);
-      this.emit("update");
-    }
-  }
-  get categoryColumn() {
-    return __privateGet(this, _categoryColumn);
-  }
-  set categoryColumn(categoryColumn) {
-    __privateSet(this, _categoryColumn, categoryColumn);
-    if (__privateGet(this, _seriesColumns).length > 0) {
-      this.buildCategoriesAndSeries();
-    }
-  }
-  get seriesColumnNames() {
-    return __privateGet(this, _seriesColumns);
-  }
-  set seriesColumnNames(seriesColumnNames) {
-    __privateSet(this, _seriesColumns, seriesColumnNames);
-    if (__privateGet(this, _categoryColumn)) {
-      this.buildCategoriesAndSeries();
-    }
-  }
-  get categories() {
-    return __privateGet(this, _dates);
-  }
-  get series() {
-    return __privateGet(this, _series);
-  }
-}
-_categoryColumn = new WeakMap();
-_columnMap = new WeakMap();
-_itemColorFunction = new WeakMap();
-_dataWindow = new WeakMap();
-_dates = new WeakMap();
-_series = new WeakMap();
-_seriesColumns = new WeakMap();
-
-exports.ChartSeries = ChartSeries;
-//# sourceMappingURL=ChartSeries.js.map

package/cjs/ChartSeries.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChartSeries.js","sources":["../../../packages/vuu-chart/src/ChartSeries.ts"],"sourcesContent":["import {\n  DataSource,\n  DataSourceRow,\n  DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  buildColumnMap,\n  ColumnMap,\n  EventEmitter,\n  Range,\n  metadataKeys,\n} from \"@vuu-ui/vuu-utils\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\n\ntype Series = {\n  id: string;\n  name: string;\n  label: string;\n  data: DataSourceValue<number>[];\n  lineStyle: {\n    width: number;\n  };\n  itemStyle: {\n    color: string | ItemColorFunction;\n  };\n  symbol: \"emptyCircle\" | \"circle\";\n  type: \"line\";\n};\n\nexport type ItemColorFunction = (params: {\n  color: string;\n  data: DataSourceValue;\n  dataIndex: number;\n  name: string;\n  seriesName: string;\n}) => string;\n\nconst defaultItemColorFunction: ItemColorFunction = ({ color }) => color;\n\nconst { KEY } = metadataKeys;\n\nexport type DataSourceValue<T extends VuuRowDataItemType = number> = {\n  key: string;\n  readonly row: DataSourceRow;\n  value: T;\n};\n\nfunction DataSourceValue<T extends VuuRowDataItemType = number>(\n  key: string,\n  row: DataSourceRow,\n  value: T,\n): DataSourceValue<T> {\n  return { key, row, value };\n}\n\nfunction getCategoriesAndSeries(\n  columnMap: ColumnMap,\n  data: DataSourceRow[],\n  categoryColumn: string,\n  seriesColumns: string[],\n  itemColorFunction = defaultItemColorFunction,\n): [string[], Series[]] {\n  const categoryValues: string[] = [];\n  const seriesMap = new Map<string, Series>();\n\n  data.forEach((row) => {\n    const categoryValue = row[columnMap[categoryColumn]] as string;\n    categoryValues.push(categoryValue);\n\n    for (const seriesColumn of seriesColumns) {\n      let series = seriesMap.get(seriesColumn);\n      if (!series) {\n        series = {\n          //any reason we can't simply use col name here ?\n          id: seriesColumn,\n          name: seriesColumn,\n          label: seriesColumn,\n          data: [],\n          type: \"line\",\n          itemStyle: {\n            color: itemColorFunction,\n          },\n          lineStyle: {\n            width: 1.5,\n          },\n          symbol: \"circle\",\n        };\n        seriesMap.set(seriesColumn, series);\n      }\n\n      const key = row[KEY] as string;\n      const value = row[columnMap[seriesColumn]] as number;\n      series.data.push(DataSourceValue(key, row, value));\n    }\n  });\n\n  return [categoryValues, Array.from(seriesMap.values())];\n}\n\nexport type ChartEvents = {\n  update: () => void;\n};\nexport interface ChartSeriesConstructorProps {\n  dataSource: DataSource;\n  itemColorFunction?: ItemColorFunction;\n}\n\nexport class ChartSeries extends EventEmitter<ChartEvents> {\n  #categoryColumn = \"\";\n  #columnMap: ColumnMap = {};\n  #itemColorFunction: ItemColorFunction | undefined;\n  #dataWindow = new MovingDataRowWindow(Range(0, 1000));\n\n  #dates: string[] = [];\n  #series: Series[] = [];\n  #seriesColumns: string[] = [];\n\n  handleData: DataSourceSubscribeCallback = (message) => {\n    if (message.type === \"subscribed\") {\n      this.#columnMap = buildColumnMap(message.tableSchema.columns);\n    } else if (message.type === \"viewport-update\") {\n      if (message.mode === \"size-only\") {\n        // ???\n      } else if (message.rows) {\n        for (const row of message.rows) {\n          this.#dataWindow.add(row);\n        }\n        this.buildCategoriesAndSeries();\n      }\n    } else {\n      console.warn(JSON.stringify(message));\n    }\n  };\n\n  buildCategoriesAndSeries() {\n    if (this.#categoryColumn && this.#seriesColumns.length > 0) {\n      const [dates, series] = getCategoriesAndSeries(\n        this.#columnMap,\n        this.#dataWindow.data,\n        this.#categoryColumn,\n        this.#seriesColumns,\n        this.#itemColorFunction,\n      );\n      this.#dates = dates;\n      this.#series = series;\n\n      this.emit(\"update\");\n    }\n  }\n\n  constructor({ dataSource, itemColorFunction }: ChartSeriesConstructorProps) {\n    super();\n    this.#itemColorFunction = itemColorFunction;\n    dataSource.subscribe({ range: Range(0, 1000) }, this.handleData);\n  }\n\n  get categoryColumn() {\n    return this.#categoryColumn;\n  }\n\n  set categoryColumn(categoryColumn: string) {\n    this.#categoryColumn = categoryColumn;\n    if (this.#seriesColumns.length > 0) {\n      this.buildCategoriesAndSeries();\n    }\n  }\n\n  get seriesColumnNames() {\n    return this.#seriesColumns;\n  }\n\n  set seriesColumnNames(seriesColumnNames: string[]) {\n    this.#seriesColumns = seriesColumnNames;\n    if (this.#categoryColumn) {\n      this.buildCategoriesAndSeries();\n    }\n  }\n\n  get categories() {\n    return this.#dates;\n  }\n\n  get series() {\n    return this.#series;\n  }\n}\n"],"names":["metadataKeys","EventEmitter","MovingDataRowWindow","Range","buildColumnMap"],"mappings":"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"}