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

package/cjs/useChartOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnMap, itemsChanged } from \"@vuu-ui/vuu-utils\";\nimport { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport type {\n  ChartSelectionModel,\n  ItemColorFunction,\n  SymbolSize,\n  SymbolSizeFunction,\n  SymbolType,\n} from \"./chart-types\";\nimport { ChartSeries } from \"./ChartSeries\";\nimport { chartTooltip } from \"./chartTooltip\";\n\nconst defaultPalette = [\n  \"#4676bf\",\n  \"#ab6528\",\n  \"#9f55c2\",\n  \"#2a8285\",\n  \"#697694\",\n  \"#B0549d\",\n];\n\nexport interface ChartConfig {\n  itemColorFunction?: ItemColorFunction;\n  selectionModel?: ChartSelectionModel;\n  symbolSize?: SymbolSize;\n}\n\nexport interface DataExclusionOptions {\n  isExcludedData: (\n    row: DataSourceRow,\n    columnMap: ColumnMap,\n    column: string,\n  ) => boolean;\n  /**\n   * An embedded SVG path. If provided, will be used to render excluded values.\n   */\n  symbol?: SymbolType;\n}\n\nexport interface ChartOptionsProps {\n  categoryColumnName: string;\n  config: ChartConfig;\n  dataExclusions?: DataExclusionOptions;\n  dataSource: DataSource;\n  itemColorFunction?: ItemColorFunction;\n  palette?: string[];\n  seriesColumnNames: string[];\n  showTooltip?: boolean;\n  symbolSizeFunction?: SymbolSizeFunction;\n}\n\nconst combineConfig = (config: ChartConfig, overrides: ChartConfig) => {\n  return {\n    ...config,\n    ...overrides,\n  };\n};\n\nexport const useChartOptions = ({\n  categoryColumnName,\n  config,\n  dataExclusions,\n  dataSource,\n  itemColorFunction,\n  palette = defaultPalette,\n  seriesColumnNames,\n  showTooltip = true,\n  symbolSizeFunction: symbolSize,\n}: ChartOptionsProps) => {\n  const [, forceRender] = useState({});\n\n  const chartSeries = useMemo(() => {\n    const cs = new ChartSeries({\n      config: combineConfig(config, { itemColorFunction, symbolSize }),\n      dataExclusions,\n      dataSource,\n      palette,\n    });\n    cs.on(\"update\", () => forceRender({}));\n    return cs;\n  }, [dataSource, config]);\n\n  useMemo(() => {\n    if (categoryColumnName !== chartSeries.categoryColumn) {\n      chartSeries.categoryColumn = categoryColumnName;\n    }\n    if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {\n      chartSeries.seriesColumnNames = seriesColumnNames;\n    }\n  }, [categoryColumnName, chartSeries, seriesColumnNames]);\n\n  return {\n    animation: false,\n    color: chartSeries.palette,\n    dataZoom: [\n      {\n        backgroundColor: \"var(--vuuChart-zoom-background, transparent)\",\n        borderColor: \"var(--vuuChart-zoom-borderColor, white)\",\n        handleStyle: {\n          color: \"var(--vuuChart-zoom-handleColor, white)\",\n        },\n        moveHandleStyle: {\n          color: \"var(--vuuChart-zoom-slideColor, white)\",\n        },\n        type: \"slider\",\n        start: 0,\n        end: 100,\n      },\n    ],\n    grid: {\n      left: \"0\",\n      bottom: 0,\n      right: 5,\n    },\n    series: chartSeries.series,\n    tooltip: showTooltip\n      ? {\n          alwaysShowContent: true,\n          backgroundColor: \"\",\n          borderColor: \"\",\n          // borderWidth: \"\",\n          className: \"vuuChartTooltip\",\n          enterable: true,\n          formatter: chartTooltip,\n          // padding: \"\",\n          trigger: \"axis\",\n        }\n      : undefined,\n    xAxis: {\n      data: chartSeries.categories,\n    },\n    yAxis: {\n      splitLine: {\n        lineStyle: {\n          color: \"var(--salt-separable-tertiary-borderColor)\",\n        },\n      },\n    },\n  } as EChartsCoreOption;\n};\n"],"names":["useState","useMemo","ChartSeries","itemsChanged","chartTooltip"],"mappings":"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"}

package/cjs/useChartSelection.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var react = require('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] = react.useState([]);
+  const [, setHighlightedKey] = react.useState();
+  const selectedKeysRef = react.useRef(selectedKeys);
+  const highlightedKeyRef = react.useRef(void 0);
+  const handleClick = react.useCallback(
+    ({ data, event, seriesName: column }) => {
+      if (column) {
+        event?.stop();
+        const { row } = data;
+        const key = row[6];
+        setSelectedKeys((currentSelection) => {
+          return selectedKeysRef.current = dataItemInList(
+            currentSelection,
+            column,
+            key
+          ) ? [] : [{ column, key }];
+        });
+      }
+    },
+    []
+  );
+  const handleMouseOver = react.useCallback(
+    ({ data, seriesName }) => {
+      if (seriesName) {
+        const { row } = data;
+        setHighlightedKey(
+          highlightedKeyRef.current = { column: seriesName, key: row[6] }
+        );
+      }
+    },
+    []
+  );
+  const handleMouseOut = react.useCallback(() => {
+    setHighlightedKey(highlightedKeyRef.current = void 0);
+  }, []);
+  const itemColorFunction = react.useCallback(
+    ({ color, data, seriesName }) => {
+      return dataItemInList(selectedKeysRef.current, seriesName, data.key) ? "purple" : color;
+    },
+    []
+  );
+  const symbolSizeFunction = react.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
+  };
+};
+
+exports.useChartSelection = useChartSelection;
+//# sourceMappingURL=useChartSelection.js.map

package/cjs/useChartSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartSelection.js","sources":["../../../packages/vuu-chart/src/useChartSelection.ts"],"sourcesContent":["import { ECElementEvent } from \"echarts\";\nimport { useCallback, useRef, useState } from \"react\";\nimport {\n  ChartSelectionModel,\n  EChartsCallbackParams,\n  ItemColorFunction,\n  SymbolSizeFunction,\n} from \"./chart-types\";\nimport { DataSourceValue } from \"./ChartSeries\";\n\ninterface ChartSelectionHookProps {\n  selectionModel?: ChartSelectionModel;\n  categoryColumnName: string;\n}\n\ntype DataItem = {\n  column: string;\n  key: string;\n};\n\nconst dataItemMatch = (\n  dataItem: DataItem | undefined,\n  targetSeries: string,\n  targetKey: string,\n) => dataItem?.column === targetSeries && dataItem?.key === targetKey;\nconst dataItemInList = (\n  dataItems: DataItem[],\n  targetColumn: string,\n  targetKey: string,\n) =>\n  dataItems.some((dataItem) =>\n    dataItemMatch(dataItem, targetColumn, targetKey),\n  );\n\nexport const useChartSelection = (_props: ChartSelectionHookProps) => {\n  const [selectedKeys, setSelectedKeys] = useState<DataItem[]>([]);\n  const [, setHighlightedKey] = useState<DataItem | undefined>();\n  const selectedKeysRef = useRef<DataItem[]>(selectedKeys);\n  const highlightedKeyRef = useRef<DataItem | undefined>(undefined);\n\n  const handleClick = useCallback(\n    ({ data, event, seriesName: column }: ECElementEvent) => {\n      if (column) {\n        event?.stop();\n\n        const { row } = data as DataSourceValue;\n        const key = row[6];\n\n        setSelectedKeys((currentSelection) => {\n          return (selectedKeysRef.current = dataItemInList(\n            currentSelection,\n            column,\n            key,\n          )\n            ? []\n            : [{ column, key }]);\n        });\n      }\n    },\n    [],\n  );\n\n  const handleMouseOver = useCallback(\n    ({ data, seriesName }: ECElementEvent) => {\n      if (seriesName) {\n        const { row } = data as DataSourceValue;\n        setHighlightedKey(\n          (highlightedKeyRef.current = { column: seriesName, key: row[6] }),\n        );\n      }\n    },\n    [],\n  );\n\n  const handleMouseOut = useCallback(() => {\n    setHighlightedKey((highlightedKeyRef.current = undefined));\n  }, []);\n\n  const itemColorFunction = useCallback<ItemColorFunction>(\n    ({ color, data, seriesName }) => {\n      return dataItemInList(selectedKeysRef.current, seriesName, data.key)\n        ? \"purple\"\n        : color;\n    },\n    [],\n  );\n\n  const symbolSizeFunction = useCallback<SymbolSizeFunction>(\n    (value: number, { data, seriesName }: EChartsCallbackParams) => {\n      const isSelected = dataItemInList(\n        selectedKeysRef.current,\n        seriesName,\n        data.key,\n      );\n      return isSelected ||\n        dataItemMatch(highlightedKeyRef.current, seriesName, data.key)\n        ? 16\n        : 6;\n    },\n    [],\n  );\n\n  return {\n    onClick: handleClick,\n    onMouseOver: handleMouseOver,\n    onMouseOut: handleMouseOut,\n    itemColorFunction,\n    symbolSizeFunction,\n  };\n};\n"],"names":["useState","useRef","useCallback"],"mappings":";;;;AAoBA,MAAM,aAAA,GAAgB,CACpB,QACA,EAAA,YAAA,EACA,cACG,QAAU,EAAA,MAAA,KAAW,YAAgB,IAAA,QAAA,EAAU,GAAQ,KAAA,SAAA;AAC5D,MAAM,cAAiB,GAAA,CACrB,SACA,EAAA,YAAA,EACA,cAEA,SAAU,CAAA,IAAA;AAAA,EAAK,CAAC,QAAA,KACd,aAAc,CAAA,QAAA,EAAU,cAAc,SAAS;AACjD,CAAA;AAEW,MAAA,iBAAA,GAAoB,CAAC,MAAoC,KAAA;AACpE,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAAA,cAAA,CAAqB,EAAE,CAAA;AAC/D,EAAA,MAAM,GAAG,iBAAiB,CAAA,GAAIA,cAA+B,EAAA;AAC7D,EAAM,MAAA,eAAA,GAAkBC,aAAmB,YAAY,CAAA;AACvD,EAAM,MAAA,iBAAA,GAAoBA,aAA6B,KAAS,CAAA,CAAA;AAEhE,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,EAAE,IAAA,EAAM,KAAO,EAAA,UAAA,EAAY,QAA6B,KAAA;AACvD,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,KAAA,EAAO,IAAK,EAAA;AAEZ,QAAM,MAAA,EAAE,KAAQ,GAAA,IAAA;AAChB,QAAM,MAAA,GAAA,GAAM,IAAI,CAAC,CAAA;AAEjB,QAAA,eAAA,CAAgB,CAAC,gBAAqB,KAAA;AACpC,UAAA,OAAQ,gBAAgB,OAAU,GAAA,cAAA;AAAA,YAChC,gBAAA;AAAA,YACA,MAAA;AAAA,YACA;AAAA,cAEE,EAAC,GACD,CAAC,EAAE,MAAA,EAAQ,KAAK,CAAA;AAAA,SACrB,CAAA;AAAA;AACH,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CAAC,EAAE,IAAM,EAAA,UAAA,EAAiC,KAAA;AACxC,MAAA,IAAI,UAAY,EAAA;AACd,QAAM,MAAA,EAAE,KAAQ,GAAA,IAAA;AAChB,QAAA,iBAAA;AAAA,UACG,iBAAA,CAAkB,UAAU,EAAE,MAAA,EAAQ,YAAY,GAAK,EAAA,GAAA,CAAI,CAAC,CAAE;AAAA,SACjE;AAAA;AACF,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAM,MAAA,cAAA,GAAiBA,kBAAY,MAAM;AACvC,IAAmB,iBAAA,CAAA,iBAAA,CAAkB,UAAU,KAAU,CAAA,CAAA;AAAA,GAC3D,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,iBAAoB,GAAAA,iBAAA;AAAA,IACxB,CAAC,EAAE,KAAO,EAAA,IAAA,EAAM,YAAiB,KAAA;AAC/B,MAAA,OAAO,eAAe,eAAgB,CAAA,OAAA,EAAS,YAAY,IAAK,CAAA,GAAG,IAC/D,QACA,GAAA,KAAA;AAAA,KACN;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,kBAAqB,GAAAA,iBAAA;AAAA,IACzB,CAAC,KAAA,EAAe,EAAE,IAAA,EAAM,YAAwC,KAAA;AAC9D,MAAA,MAAM,UAAa,GAAA,cAAA;AAAA,QACjB,eAAgB,CAAA,OAAA;AAAA,QAChB,UAAA;AAAA,QACA,IAAK,CAAA;AAAA,OACP;AACA,MAAO,OAAA,UAAA,IACL,cAAc,iBAAkB,CAAA,OAAA,EAAS,YAAY,IAAK,CAAA,GAAG,IAC3D,EACA,GAAA,CAAA;AAAA,KACN;AAAA,IACA;AAAC,GACH;AAEA,EAAO,OAAA;AAAA,IACL,OAAS,EAAA,WAAA;AAAA,IACT,WAAa,EAAA,eAAA;AAAA,IACb,UAAY,EAAA,cAAA;AAAA,IACZ,iBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/Chart.css.js

@@ -0,0 +1,4 @@
+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";
+
+export { chartCss as default };
+//# sourceMappingURL=Chart.css.js.map

package/esm/Chart.css.js.map

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

package/esm/Chart.js

@@ -0,0 +1,87 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { init, getInstanceByDom } from 'echarts';
+import { useRef, useEffect } from 'react';
+import { useChartContextMenu } from './useChartContextMenu.js';
+import { useChartOptions } from './useChartOptions.js';
+import { useChartSelection } from './useChartSelection.js';
+import { buildColumnMap } from '@vuu-ui/vuu-utils';
+import chartCss from './Chart.css.js';
+
+const classBase = "vuuChart";
+const Chart = ({
+  categoryColumnName,
+  chartSettings = { useCoarsePointer: true, renderer: "svg" },
+  className,
+  config,
+  dataExclusions,
+  dataSource,
+  optionSettings = { notMerge: true },
+  // don't merge two options together when updating option
+  palette,
+  showTooltip,
+  style = { width: "100%", height: "100%" },
+  seriesColumnNames,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-toast-notification",
+    css: chartCss,
+    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: cx(classBase, className),
+      ref: chartRef,
+      style
+    }
+  );
+};
+
+export { Chart };
+//# sourceMappingURL=Chart.js.map

package/esm/Chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","sources":["../../../packages/vuu-chart/src/Chart.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { getInstanceByDom, init } from \"echarts\";\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\nimport { useChartContextMenu } from \"./useChartContextMenu\";\nimport { ChartOptionsProps, useChartOptions } from \"./useChartOptions\";\nimport { useChartSelection } from \"./useChartSelection\";\nimport { buildColumnMap } from \"@vuu-ui/vuu-utils\";\n\nimport chartCss from \"./Chart.css\";\n\nconst classBase = \"vuuChart\";\n\ntype OptionSettings = {\n  notMerge: boolean;\n};\n\ntype ChartSettings = {\n  /**\n   * Default value will be svg\n   */\n  renderer: \"svg\" | \"canvas\";\n  /**\n   * Enlarges 'click zone' around interactive elements.\n   * Default value true;\n   */\n  useCoarsePointer: boolean;\n};\n\nexport interface ChartProps\n  extends ChartOptionsProps,\n    HTMLAttributes<HTMLDivElement> {\n  chartSettings?: Partial<ChartSettings>;\n  optionSettings?: OptionSettings;\n  /**\n   * An array of color values that will be assigned, in the order given\n   * to rendered series.\n   */\n  palette?: string[];\n  showTooltip?: boolean;\n}\n\nexport const Chart = ({\n  categoryColumnName,\n  chartSettings = { useCoarsePointer: true, renderer: \"svg\" },\n  className,\n  config,\n  dataExclusions,\n  dataSource,\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 columnMap = buildColumnMap(dataSource.columns);\n\n  const onContextMenu = useChartContextMenu({ categoryColumnName, columnMap });\n  const {\n    itemColorFunction,\n    onClick,\n    onMouseOut,\n    onMouseOver,\n    symbolSizeFunction,\n  } = useChartSelection({\n    categoryColumnName,\n    selectionModel: config?.selectionModel,\n  });\n\n  const option = useChartOptions({\n    categoryColumnName,\n    config,\n    itemColorFunction,\n    palette,\n    dataExclusions,\n    dataSource,\n    seriesColumnNames,\n    symbolSizeFunction,\n    showTooltip,\n  });\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    chart.on(\"click\", onClick);\n    chart.on(\"mouseover\", onMouseOver);\n    chart.on(\"mouseout\", onMouseOut);\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, onClick, onContextMenu, onMouseOver, onMouseOut]);\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":[],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,UAAA;AA+BX,MAAM,QAAQ,CAAC;AAAA,EACpB,kBAAA;AAAA,EACA,aAAgB,GAAA,EAAE,gBAAkB,EAAA,IAAA,EAAM,UAAU,KAAM,EAAA;AAAA,EAC1D,SAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;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,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA;AAE5C,EAAM,MAAA,SAAA,GAAY,cAAe,CAAA,UAAA,CAAW,OAAO,CAAA;AAEnD,EAAA,MAAM,aAAgB,GAAA,mBAAA,CAAoB,EAAE,kBAAA,EAAoB,WAAW,CAAA;AAC3E,EAAM,MAAA;AAAA,IACJ,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACE,iBAAkB,CAAA;AAAA,IACpB,kBAAA;AAAA,IACA,gBAAgB,MAAQ,EAAA;AAAA,GACzB,CAAA;AAED,EAAA,MAAM,SAAS,eAAgB,CAAA;AAAA,IAC7B,kBAAA;AAAA,IACA,MAAA;AAAA,IACA,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAcD,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,QAAS,CAAA,OAAA,EAAS,MAAM,aAAa,CAAA;AAExD,IAAM,KAAA,CAAA,EAAA,CAAG,eAAe,aAAa,CAAA;AACrC,IAAM,KAAA,CAAA,EAAA,CAAG,SAAS,OAAO,CAAA;AACzB,IAAM,KAAA,CAAA,EAAA,CAAG,aAAa,WAAW,CAAA;AACjC,IAAM,KAAA,CAAA,EAAA,CAAG,YAAY,UAAU,CAAA;AAU/B,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,EAAO,OAAQ,EAAA;AAAA,KAMjB;AAAA,KACC,CAAC,aAAA,EAAe,SAAS,aAAe,EAAA,WAAA,EAAa,UAAU,CAAC,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,OAAS,EAAA;AAEpB,MAAM,MAAA,KAAA,GAAQ,gBAAiB,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,uBAAA,GAAA;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/esm/ChartSeries.js

@@ -0,0 +1,181 @@
+import { EventEmitter, Range, metadataKeys, buildColumnMap } from '@vuu-ui/vuu-utils';
+import { MovingDataRowWindow } from './DataRowMovingWindow.js';
+import { defaultItemColorFunction } from './chart-types.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, _colorMap, _columnMap, _config, _dataExclusions, _dataWindow, _dates, _palette, _series, _seriesColumns;
+const { KEY } = metadataKeys;
+function DataSourceValue(key, row, value) {
+  return { key, row, value };
+}
+class ChartSeries extends EventEmitter {
+  constructor({
+    config,
+    dataExclusions,
+    dataSource,
+    palette
+  }) {
+    super();
+    __privateAdd(this, _categoryColumn, "");
+    __privateAdd(this, _colorMap, /* @__PURE__ */ new Map());
+    __privateAdd(this, _columnMap, {});
+    __privateAdd(this, _config);
+    __privateAdd(this, _dataExclusions);
+    __privateAdd(this, _dataWindow, new MovingDataRowWindow(Range(0, 1e3)));
+    __privateAdd(this, _dates, []);
+    __privateAdd(this, _palette);
+    __privateAdd(this, _series, []);
+    __privateAdd(this, _seriesColumns, []);
+    __publicField(this, "handleData", (message) => {
+      if (message.type === "subscribed") {
+        __privateSet(this, _columnMap, 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, _config, config);
+    __privateSet(this, _dataExclusions, dataExclusions);
+    __privateSet(this, _palette, palette);
+    dataSource.subscribe({ range: Range(0, 1e3) }, this.handleData);
+  }
+  buildCategoriesAndSeries() {
+    if (__privateGet(this, _categoryColumn) && __privateGet(this, _seriesColumns).length > 0) {
+      const [dates, series] = this.getCategoriesAndSeries();
+      __privateSet(this, _dates, dates);
+      __privateSet(this, _series, series);
+      this.emit("update");
+    }
+  }
+  get palette() {
+    return __privateGet(this, _seriesColumns).map((col) => __privateGet(this, _colorMap).get(col));
+  }
+  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);
+  }
+  getCategoriesAndSeries() {
+    const colorMap = __privateGet(this, _colorMap);
+    const columnMap = __privateGet(this, _columnMap);
+    const data = __privateGet(this, _dataWindow).data;
+    const categoryColumn = __privateGet(this, _categoryColumn);
+    const seriesColumns = __privateGet(this, _seriesColumns);
+    const config = __privateGet(this, _config);
+    const categoryValues = [];
+    const seriesMap = /* @__PURE__ */ 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 = void 0;
+        const seriesTuple = seriesMap.get(seriesColumn);
+        if (seriesTuple) {
+          [lineSeries, scatterSeries] = seriesTuple;
+        } else {
+          if (!colorMap.has(seriesColumn)) {
+            colorMap.set(seriesColumn, __privateGet(this, _palette)[__privateGet(this, _colorMap).size]);
+          }
+          lineSeries = {
+            //any reason we can't simply use col name here ?
+            id: seriesColumn,
+            name: seriesColumn,
+            label: seriesColumn,
+            connectNulls: true,
+            data: [],
+            type: "line",
+            itemStyle: {
+              color: itemColorFunction
+            },
+            lineStyle: {
+              width: 1.5
+            },
+            symbol: "circle",
+            symbolSize
+          };
+          if (__privateGet(this, _dataExclusions)) {
+            const { symbol } = __privateGet(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 (__privateGet(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()];
+  }
+}
+_categoryColumn = new WeakMap();
+_colorMap = new WeakMap();
+_columnMap = new WeakMap();
+_config = new WeakMap();
+_dataExclusions = new WeakMap();
+_dataWindow = new WeakMap();
+_dates = new WeakMap();
+_palette = new WeakMap();
+_series = new WeakMap();
+_seriesColumns = new WeakMap();
+
+export { ChartSeries };
+//# sourceMappingURL=ChartSeries.js.map

package/esm/ChartSeries.js.map

@@ -0,0 +1 @@
+{"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 {\n  buildColumnMap,\n  ColumnMap,\n  EventEmitter,\n  metadataKeys,\n  Range,\n} from \"@vuu-ui/vuu-utils\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\nimport {\n  defaultItemColorFunction,\n  LineSeries,\n  ScatterSeries,\n  Series,\n} from \"./chart-types\";\nimport { ChartConfig, DataExclusionOptions } from \"./useChartOptions\";\n\nconst { KEY } = metadataKeys;\n\nexport type DataSourceValue = {\n  key: string;\n  readonly row: DataSourceRow;\n  value: number | null;\n};\n\nfunction DataSourceValue(\n  key: string,\n  row: DataSourceRow,\n  value: number | null,\n): DataSourceValue {\n  return { key, row, value };\n}\n\nexport type ChartEvents = {\n  update: () => void;\n};\nexport interface ChartSeriesConstructorProps {\n  dataExclusions?: DataExclusionOptions;\n  dataSource: DataSource;\n  config: ChartConfig;\n  palette: string[];\n}\n\nexport class ChartSeries extends EventEmitter<ChartEvents> {\n  #categoryColumn = \"\";\n  #colorMap = new Map<string, string>();\n  #columnMap: ColumnMap = {};\n  #config: ChartConfig;\n  #dataExclusions: DataExclusionOptions | undefined;\n  #dataWindow = new MovingDataRowWindow(Range(0, 1000));\n\n  #dates: string[] = [];\n  #palette: 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] = this.getCategoriesAndSeries();\n      this.#dates = dates;\n      this.#series = series;\n\n      this.emit(\"update\");\n    }\n  }\n\n  constructor({\n    config,\n    dataExclusions,\n    dataSource,\n    palette,\n  }: ChartSeriesConstructorProps) {\n    super();\n    this.#config = config;\n    this.#dataExclusions = dataExclusions;\n    this.#palette = palette;\n    dataSource.subscribe({ range: Range(0, 1000) }, this.handleData);\n  }\n\n  get palette() {\n    return this.#seriesColumns.map((col) => this.#colorMap.get(col));\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  private getCategoriesAndSeries(): [string[], Series[]] {\n    const colorMap = this.#colorMap;\n    const columnMap = this.#columnMap;\n    const data = this.#dataWindow.data;\n    const categoryColumn = this.#categoryColumn;\n    const seriesColumns = this.#seriesColumns;\n    const config = this.#config;\n\n    const categoryValues: string[] = [];\n    const seriesMap = new Map<\n      string,\n      [LineSeries, ScatterSeries] | [LineSeries]\n    >();\n    const { itemColorFunction = defaultItemColorFunction, symbolSize = 6 } =\n      config;\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 lineSeries: LineSeries;\n        let scatterSeries: ScatterSeries | undefined = undefined;\n\n        const seriesTuple = seriesMap.get(seriesColumn);\n        if (seriesTuple) {\n          [lineSeries, scatterSeries] = seriesTuple;\n        } else {\n          if (!colorMap.has(seriesColumn)) {\n            // Record palette color used for each series so we can preserve the color\n            // associations even if some series are hidden by user.\n            colorMap.set(seriesColumn, this.#palette[this.#colorMap.size]);\n          }\n\n          lineSeries = {\n            //any reason we can't simply use col name here ?\n            id: seriesColumn,\n            name: seriesColumn,\n            label: seriesColumn,\n            connectNulls: true,\n            data: [],\n            type: \"line\",\n            itemStyle: {\n              color: itemColorFunction,\n            },\n            lineStyle: {\n              width: 1.5,\n            },\n            symbol: \"circle\",\n            symbolSize,\n          };\n\n          if (this.#dataExclusions) {\n            const { symbol } = this.#dataExclusions;\n            scatterSeries = {\n              id: `${seriesColumn}-excluded`,\n              data: [],\n              itemStyle: {\n                borderColor: \"#FDC82F\",\n                color: \"#101820\",\n                borderWidth: 2,\n              },\n              label: \"\",\n              name: seriesColumn,\n              symbol,\n              symbolSize: 20,\n              type: \"scatter\",\n            };\n          }\n\n          if (scatterSeries) {\n            seriesMap.set(seriesColumn, [lineSeries, scatterSeries]);\n          } else {\n            seriesMap.set(seriesColumn, [lineSeries]);\n          }\n        }\n\n        const key = row[KEY] as string;\n        const value = row[columnMap[seriesColumn]] as number;\n\n        if (\n          this.#dataExclusions?.isExcludedData(row, columnMap, seriesColumn)\n        ) {\n          lineSeries.data.push(DataSourceValue(key, row, null));\n          scatterSeries?.data.push(DataSourceValue(key, row, value));\n        } else {\n          lineSeries.data.push(DataSourceValue(key, row, value));\n          scatterSeries?.data.push(DataSourceValue(key, row, null));\n        }\n      }\n    });\n\n    return [categoryValues, Array.from(seriesMap.values()).flat()];\n  }\n}\n"],"names":[],"mappings":"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"}

package/esm/DataRowMovingWindow.js

@@ -0,0 +1,95 @@
+import { WindowRange, metadataKeys } from '@vuu-ui/vuu-utils';
+
+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, typeof key !== "symbol" ? key + "" : 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 _range;
+const { IDX, KEY } = metadataKeys;
+class MovingDataRowWindow {
+  constructor({ from, to }) {
+    __publicField(this, "data");
+    __publicField(this, "rowCount", 0);
+    __privateAdd(this, _range);
+    __publicField(this, "setRowCount", (rowCount) => {
+      if (rowCount < this.data.length) {
+        this.data.length = rowCount;
+      }
+      this.rowCount = rowCount;
+    });
+    __privateSet(this, _range, new WindowRange(from, to));
+    this.data = new Array(Math.max(0, to - from));
+    this.rowCount = 0;
+  }
+  add(data) {
+    const index = data[IDX];
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - __privateGet(this, _range).from;
+      this.data[internalIndex] = data;
+    }
+  }
+  getAtIndex(index) {
+    return __privateGet(this, _range).isWithin(index) && this.data[index - __privateGet(this, _range).from] != null ? this.data[index - __privateGet(this, _range).from] : void 0;
+  }
+  getByKey(key) {
+    return this.data.find((row) => row[KEY] === key);
+  }
+  isWithinRange(index) {
+    return __privateGet(this, _range).isWithin(index);
+  }
+  setRange({ from, to }) {
+    if (from !== __privateGet(this, _range).from || to !== __privateGet(this, _range).to) {
+      const [overlapFrom, overlapTo] = __privateGet(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;
+      __privateGet(this, _range).from = from;
+      __privateGet(this, _range).to = to;
+    }
+  }
+  get hasData() {
+    return this.data.some((d) => d !== void 0);
+  }
+  /**
+   * This will throw if there is no data. Check `hasData` first
+   * to guard against this, if not certain.
+   */
+  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 __privateGet(this, _range);
+  }
+  // TODO make this more performant, see implementation in
+  // array-backed-moving-window - use same implementation
+  get hasAllRowsWithinRange() {
+    const { from, to } = __privateGet(this, _range);
+    for (let i = from; i < to; i++) {
+      if (this.getAtIndex(i) === void 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+_range = new WeakMap();
+
+export { MovingDataRowWindow };
+//# sourceMappingURL=DataRowMovingWindow.js.map

package/esm/DataRowMovingWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataRowMovingWindow.js","sources":["../../../packages/vuu-chart/src/DataRowMovingWindow.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { WindowRange } from \"@vuu-ui/vuu-utils\";\nimport { metadataKeys } from \"@vuu-ui/vuu-utils\";\n\nconst { IDX, KEY } = metadataKeys;\n\nexport class MovingDataRowWindow {\n  public data: DataSourceRow[];\n  public rowCount = 0;\n  #range: WindowRange;\n\n  constructor({ from, to }: VuuRange) {\n    this.#range = new WindowRange(from, to);\n    //internal data is always 0 based, we add range.from to determine an offset\n    this.data = new Array(Math.max(0, to - from));\n    this.rowCount = 0;\n  }\n\n  setRowCount = (rowCount: number) => {\n    if (rowCount < this.data.length) {\n      this.data.length = rowCount;\n    }\n\n    this.rowCount = rowCount;\n  };\n\n  add(data: DataSourceRow) {\n    const index = data[IDX];\n    if (this.isWithinRange(index)) {\n      const internalIndex = index - this.#range.from;\n      this.data[internalIndex] = data;\n    }\n  }\n\n  getAtIndex(index: number) {\n    return this.#range.isWithin(index) &&\n      this.data[index - this.#range.from] != null\n      ? this.data[index - this.#range.from]\n      : undefined;\n  }\n\n  getByKey(key: string) {\n    return this.data.find((row) => row[KEY] === key);\n  }\n\n  isWithinRange(index: number) {\n    return this.#range.isWithin(index);\n  }\n\n  setRange({ from, to }: VuuRange) {\n    if (from !== this.#range.from || to !== this.#range.to) {\n      const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n      const newData = new Array(Math.max(0, to - from));\n      for (let i = overlapFrom; i < overlapTo; i++) {\n        const data = this.getAtIndex(i);\n        if (data) {\n          const index = i - from;\n          newData[index] = data;\n        }\n      }\n      this.data = newData;\n      this.#range.from = from;\n      this.#range.to = to;\n    }\n  }\n\n  get hasData() {\n    return this.data.some((d) => d !== undefined);\n  }\n\n  /**\n   * This will throw if there is no data. Check `hasData` first\n   * to guard against this, if not certain.\n   */\n  get firstRow() {\n    for (let i = 0; i < this.data.length; i++) {\n      if (this.data[i]) {\n        return this.data[i];\n      }\n    }\n    throw Error(`[DataRowMovingWinddow] firstRow, no data`);\n  }\n\n  get range() {\n    return this.#range;\n  }\n\n  // TODO make this more performant, see implementation in\n  // array-backed-moving-window - use same implementation\n  get hasAllRowsWithinRange(): boolean {\n    const { from, to } = this.#range;\n\n    for (let i = from; i < to; i++) {\n      if (this.getAtIndex(i) === undefined) {\n        return false;\n      }\n    }\n    return true;\n  }\n}\n"],"names":[],"mappings":"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"}

package/esm/chart-types.js

@@ -0,0 +1,4 @@
+const defaultItemColorFunction = ({ color }) => color;
+
+export { defaultItemColorFunction };
+//# sourceMappingURL=chart-types.js.map

package/esm/chart-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-types.js","sources":["../../../packages/vuu-chart/src/chart-types.ts"],"sourcesContent":["import { DataSourceValue } from \"./ChartSeries\";\n\nexport const defaultItemColorFunction: ItemColorFunction = ({ color }) => color;\n\nexport type EChartsCallbackParams = {\n  color: string;\n  data: DataSourceValue;\n  dataIndex: number;\n  name: string;\n  /**\n   * This is the Vuu column name\n   */\n  seriesName: string;\n};\n\nexport type SymbolSizeFunction = (\n  value: number,\n  params: EChartsCallbackParams,\n) => number | [number, number];\nexport type SymbolSize = number | [number, number] | SymbolSizeFunction;\nexport type SymbolType = \"emptyCircle\" | \"circle\" | `path://${string}`;\n\nexport type ItemColorFunction = (params: EChartsCallbackParams) => string;\n\nexport interface SeriesBase {\n  data: DataSourceValue[];\n  id: string;\n  itemStyle?: {\n    borderColor?: string;\n    color: string | ItemColorFunction;\n    borderWidth?: number;\n  };\n  label: string;\n  name: string;\n  symbol?: SymbolType;\n  symbolSize: SymbolSize;\n}\n\nexport interface LineSeries extends SeriesBase {\n  connectNulls?: boolean;\n  lineStyle: {\n    color?: string;\n    width: number;\n  };\n  type: \"line\";\n}\nexport interface ScatterSeries extends SeriesBase {\n  type: \"scatter\";\n}\n\nexport type Series = LineSeries | ScatterSeries;\n\nexport type ChartSelectionModel =\n  | \"none\"\n  | \"single\"\n  | \"single-no-deselect\"\n  | \"extended\";\n"],"names":[],"mappings":"AAEO,MAAM,wBAA8C,GAAA,CAAC,EAAE,KAAA,EAAY,KAAA;;;;"}

package/esm/chartTooltip.js

@@ -0,0 +1,25 @@
+const chartTooltip = (params) => {
+  if (params.length > 0) {
+    const [{ axisValueLabel }] = params;
+    const values = [];
+    for (const { color, seriesName, seriesType, value } of params) {
+      if (seriesType === "line") {
+        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 };
+//# sourceMappingURL=chartTooltip.js.map

package/esm/chartTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartTooltip.js","sources":["../../../packages/vuu-chart/src/chartTooltip.ts"],"sourcesContent":["import { DataSourceValue } from \"./ChartSeries\";\n\nexport interface TooltipParams {\n    axisValueLabel: string\n    color: string;\n    componentType: string;\n    componentSubType: string;\n    data: DataSourceValue;\n    seriesName: string;\n    seriesType: 'line' | 'scatter';\n    value: number;\n}\n\nexport const chartTooltip = (params: TooltipParams[]) => {\n\n    if (params.length > 0){\n        const [{axisValueLabel}] = params;\n\n        const values = [];\n\n        for (const {color, seriesName, seriesType, value} of params){\n            if (seriesType === 'line'){\n                values.push({color, value, seriesName})\n            }\n        }\n        \n        const tooltipEntries = values.map(({color, value, seriesName}) => \n                ['<div class=\"vuuChart-tooltip-entry\">',\n                 `<span class=\"vuuChart-tooltip-icon\" style=\"background:${color};\"></span>`,\n                 `<span class=\"vuuChart-tooltip-label\">${seriesName}</span>`,\n                 `<span class=\"vuuChart-tooltip-value\">${value ?? 'n/a'}</span>`,\n                 '</div>'\n                ].join(\"\"));\n\n\n        return [\n            `<div class=\"vuuChart-tooltip-title\">${axisValueLabel}</div>`,\n            '<div class=\"vuuChart-tooltip-container\">']\n            .concat(tooltipEntries)\n            .concat('</div>')\n            .join(\"\");\n\n    }\n\n}\n"],"names":[],"mappings":"AAaa,MAAA,YAAA,GAAe,CAAC,MAA4B,KAAA;AAErD,EAAI,IAAA,MAAA,CAAO,SAAS,CAAE,EAAA;AAClB,IAAA,MAAM,CAAC,EAAC,cAAc,EAAC,CAAI,GAAA,MAAA;AAE3B,IAAA,MAAM,SAAS,EAAC;AAEhB,IAAA,KAAA,MAAW,EAAC,KAAO,EAAA,UAAA,EAAY,UAAY,EAAA,KAAA,MAAU,MAAO,EAAA;AACxD,MAAA,IAAI,eAAe,MAAO,EAAA;AACtB,QAAA,MAAA,CAAO,IAAK,CAAA,EAAC,KAAO,EAAA,KAAA,EAAO,YAAW,CAAA;AAAA;AAC1C;AAGJ,IAAM,MAAA,cAAA,GAAiB,OAAO,GAAI,CAAA,CAAC,EAAC,KAAO,EAAA,KAAA,EAAO,YAC1C,KAAA;AAAA,MAAC,sCAAA;AAAA,MACA,yDAAyD,KAAK,CAAA,UAAA,CAAA;AAAA,MAC9D,wCAAwC,UAAU,CAAA,OAAA,CAAA;AAAA,MAClD,CAAA,qCAAA,EAAwC,SAAS,KAAK,CAAA,OAAA,CAAA;AAAA,MACtD;AAAA,KACD,CAAE,IAAK,CAAA,EAAE,CAAC,CAAA;AAGlB,IAAO,OAAA;AAAA,MACH,uCAAuC,cAAc,CAAA,MAAA,CAAA;AAAA,MACrD;AAAA,KAA0C,CACzC,OAAO,cAAc,CAAA,CACrB,OAAO,QAAQ,CAAA,CACf,KAAK,EAAE,CAAA;AAAA;AAIpB;;;;"}

package/esm/index.js

@@ -0,0 +1,3 @@
+export { Chart } from './Chart.js';
+export { ChartSeries } from './ChartSeries.js';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/esm/useChartContextMenu.js

@@ -0,0 +1,27 @@
+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 };
+//# sourceMappingURL=useChartContextMenu.js.map

package/esm/useChartContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartContextMenu.js","sources":["../../../packages/vuu-chart/src/useChartContextMenu.ts"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { useCallback } from \"react\";\nimport { ECElementEvent } from \"echarts\";\nimport { DataSourceValue } from \"./ChartSeries\";\nimport { ColumnMap } from \"@vuu-ui/vuu-utils\";\n\nexport type ChartMenuLocation = \"canvas\" | \"series\";\n\nexport type ChartContextMenuOptions = {\n  column: string;\n  columnMap: ColumnMap;\n  row: DataSourceRow;\n};\n\ninterface ChartContextMenuHookProps {\n  allowContextMenu?: boolean;\n  categoryColumnName?: string;\n  columnMap: ColumnMap;\n}\n\nexport const useChartContextMenu = ({\n  columnMap,\n}: ChartContextMenuHookProps) => {\n  const showContextMenu = useContextMenu();\n\n  const onContextMenu = useCallback(\n    ({ data, event, seriesName }: ECElementEvent) => {\n      if (event && seriesName) {\n        event?.stop();\n\n        const { row } = data as DataSourceValue;\n\n        const menuOptions: ChartContextMenuOptions = {\n          column: seriesName,\n          columnMap,\n          row,\n        };\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        showContextMenu(event.event as any, \"series\", menuOptions);\n      }\n    },\n    [columnMap, showContextMenu],\n  );\n\n  return onContextMenu;\n};\n"],"names":[],"mappings":";;;AAqBO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,CAAiC,KAAA;AAC/B,EAAA,MAAM,kBAAkB,cAAe,EAAA;AAEvC,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,YAAiC,KAAA;AAC/C,MAAA,IAAI,SAAS,UAAY,EAAA;AACvB,QAAA,KAAA,EAAO,IAAK,EAAA;AAEZ,QAAM,MAAA,EAAE,KAAQ,GAAA,IAAA;AAEhB,QAAA,MAAM,WAAuC,GAAA;AAAA,UAC3C,MAAQ,EAAA,UAAA;AAAA,UACR,SAAA;AAAA,UACA;AAAA,SACF;AAGA,QAAgB,eAAA,CAAA,KAAA,CAAM,KAAc,EAAA,QAAA,EAAU,WAAW,CAAA;AAAA;AAC3D,KACF;AAAA,IACA,CAAC,WAAW,eAAe;AAAA,GAC7B;AAEA,EAAO,OAAA,aAAA;AACT;;;;"}