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

package/esm/useChartOptions.js

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

package/esm/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":[],"mappings":";;;;;AAcA,MAAM,cAAiB,GAAA;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AAgCA,MAAM,aAAA,GAAgB,CAAC,MAAA,EAAqB,SAA2B,KAAA;AACrE,EAAO,OAAA;AAAA,IACL,GAAG,MAAA;AAAA,IACH,GAAG;AAAA,GACL;AACF,CAAA;AAEO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAU,GAAA,cAAA;AAAA,EACV,iBAAA;AAAA,EACA,WAAc,GAAA,IAAA;AAAA,EACd,kBAAoB,EAAA;AACtB,CAAyB,KAAA;AACvB,EAAA,MAAM,GAAG,WAAW,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAM,MAAA,EAAA,GAAK,IAAI,WAAY,CAAA;AAAA,MACzB,QAAQ,aAAc,CAAA,MAAA,EAAQ,EAAE,iBAAA,EAAmB,YAAY,CAAA;AAAA,MAC/D,cAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAA,EAAA,CAAG,GAAG,QAAU,EAAA,MAAM,WAAY,CAAA,EAAE,CAAC,CAAA;AACrC,IAAO,OAAA,EAAA;AAAA,GACN,EAAA,CAAC,UAAY,EAAA,MAAM,CAAC,CAAA;AAEvB,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAI,IAAA,kBAAA,KAAuB,YAAY,cAAgB,EAAA;AACrD,MAAA,WAAA,CAAY,cAAiB,GAAA,kBAAA;AAAA;AAE/B,IAAA,IAAI,YAAa,CAAA,iBAAA,EAAmB,WAAY,CAAA,iBAAiB,CAAG,EAAA;AAClE,MAAA,WAAA,CAAY,iBAAoB,GAAA,iBAAA;AAAA;AAClC,GACC,EAAA,CAAC,kBAAoB,EAAA,WAAA,EAAa,iBAAiB,CAAC,CAAA;AAEvD,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,OAAO,WAAY,CAAA,OAAA;AAAA,IACnB,QAAU,EAAA;AAAA,MACR;AAAA,QACE,eAAiB,EAAA,8CAAA;AAAA,QACjB,WAAa,EAAA,yCAAA;AAAA,QACb,WAAa,EAAA;AAAA,UACX,KAAO,EAAA;AAAA,SACT;AAAA,QACA,eAAiB,EAAA;AAAA,UACf,KAAO,EAAA;AAAA,SACT;AAAA,QACA,IAAM,EAAA,QAAA;AAAA,QACN,KAAO,EAAA,CAAA;AAAA,QACP,GAAK,EAAA;AAAA;AACP,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,IAAM,EAAA,GAAA;AAAA,MACN,MAAQ,EAAA,CAAA;AAAA,MACR,KAAO,EAAA;AAAA,KACT;AAAA,IACA,QAAQ,WAAY,CAAA,MAAA;AAAA,IACpB,SAAS,WACL,GAAA;AAAA,MACE,iBAAmB,EAAA,IAAA;AAAA,MACnB,eAAiB,EAAA,EAAA;AAAA,MACjB,WAAa,EAAA,EAAA;AAAA;AAAA,MAEb,SAAW,EAAA,iBAAA;AAAA,MACX,SAAW,EAAA,IAAA;AAAA,MACX,SAAW,EAAA,YAAA;AAAA;AAAA,MAEX,OAAS,EAAA;AAAA,KAEX,GAAA,KAAA,CAAA;AAAA,IACJ,KAAO,EAAA;AAAA,MACL,MAAM,WAAY,CAAA;AAAA,KACpB;AAAA,IACA,KAAO,EAAA;AAAA,MACL,SAAW,EAAA;AAAA,QACT,SAAW,EAAA;AAAA,UACT,KAAO,EAAA;AAAA;AACT;AACF;AACF,GACF;AACF;;;;"}

package/esm/useChartSelection.js

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

package/esm/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":[],"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,GAAA,QAAA,CAAqB,EAAE,CAAA;AAC/D,EAAA,MAAM,GAAG,iBAAiB,CAAA,GAAI,QAA+B,EAAA;AAC7D,EAAM,MAAA,eAAA,GAAkB,OAAmB,YAAY,CAAA;AACvD,EAAM,MAAA,iBAAA,GAAoB,OAA6B,KAAS,CAAA,CAAA;AAEhE,EAAA,MAAM,WAAc,GAAA,WAAA;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,GAAA,WAAA;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,GAAiB,YAAY,MAAM;AACvC,IAAmB,iBAAA,CAAA,iBAAA,CAAkB,UAAU,KAAU,CAAA,CAAA;AAAA,GAC3D,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,iBAAoB,GAAA,WAAA;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,GAAA,WAAA;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/package.json

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

package/types/Chart.d.ts

@@ -1,19 +1,28 @@
 import { HTMLAttributes } from "react";
 import { ChartOptionsProps } from "./useChartOptions";
-import { ItemColorFunction } from "./ChartSeries";
 type OptionSettings = {
     notMerge: boolean;
 };
 type ChartSettings = {
+    /**
+     * Default value will be svg
+     */
     renderer: "svg" | "canvas";
+    /**
+     * Enlarges 'click zone' around interactive elements.
+     * Default value true;
+     */
     useCoarsePointer: boolean;
 };
 export interface ChartProps extends ChartOptionsProps, HTMLAttributes<HTMLDivElement> {
-    chartSettings?: ChartSettings;
-    itemColorFunction?: ItemColorFunction;
+    chartSettings?: Partial<ChartSettings>;
     optionSettings?: OptionSettings;
+    /**
+     * An array of color values that will be assigned, in the order given
+     * to rendered series.
+     */
     palette?: string[];
     showTooltip?: boolean;
 }
-export declare const Chart: ({ categoryColumnName, chartSettings, className, dataSource, itemColorFunction, optionSettings, palette, showTooltip, style, seriesColumnNames, ...htmlAttributes }: ChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chart: ({ categoryColumnName, chartSettings, className, config, dataExclusions, dataSource, optionSettings, palette, showTooltip, style, seriesColumnNames, ...htmlAttributes }: ChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/ChartSeries.d.ts

@@ -1,49 +1,32 @@
 import { DataSource, DataSourceRow, DataSourceSubscribeCallback } from "@vuu-ui/vuu-data-types";
-import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
 import { EventEmitter } from "@vuu-ui/vuu-utils";
-type Series = {
-    id: string;
-    name: string;
-    label: string;
-    data: DataSourceValue<number>[];
-    lineStyle: {
-        width: number;
-    };
-    itemStyle: {
-        color: string | ItemColorFunction;
-    };
-    symbol: "emptyCircle" | "circle";
-    type: "line";
-};
-export type ItemColorFunction = (params: {
-    color: string;
-    data: DataSourceValue;
-    dataIndex: number;
-    name: string;
-    seriesName: string;
-}) => string;
-export type DataSourceValue<T extends VuuRowDataItemType = number> = {
+import { Series } from "./chart-types";
+import { ChartConfig, DataExclusionOptions } from "./useChartOptions";
+export type DataSourceValue = {
     key: string;
     readonly row: DataSourceRow;
-    value: T;
+    value: number | null;
 };
 export type ChartEvents = {
     update: () => void;
 };
 export interface ChartSeriesConstructorProps {
+    dataExclusions?: DataExclusionOptions;
     dataSource: DataSource;
-    itemColorFunction?: ItemColorFunction;
+    config: ChartConfig;
+    palette: string[];
 }
 export declare class ChartSeries extends EventEmitter<ChartEvents> {
     #private;
     handleData: DataSourceSubscribeCallback;
     buildCategoriesAndSeries(): void;
-    constructor({ dataSource, itemColorFunction }: ChartSeriesConstructorProps);
+    constructor({ config, dataExclusions, dataSource, palette, }: ChartSeriesConstructorProps);
+    get palette(): (string | undefined)[];
     get categoryColumn(): string;
     set categoryColumn(categoryColumn: string);
     get seriesColumnNames(): string[];
     set seriesColumnNames(seriesColumnNames: string[]);
     get categories(): string[];
     get series(): Series[];
+    private getCategoriesAndSeries;
 }
-export {};

package/types/chart-types.d.ts

@@ -0,0 +1,42 @@
+import { DataSourceValue } from "./ChartSeries";
+export declare const defaultItemColorFunction: ItemColorFunction;
+export type EChartsCallbackParams = {
+    color: string;
+    data: DataSourceValue;
+    dataIndex: number;
+    name: string;
+    /**
+     * This is the Vuu column name
+     */
+    seriesName: string;
+};
+export type SymbolSizeFunction = (value: number, params: EChartsCallbackParams) => number | [number, number];
+export type SymbolSize = number | [number, number] | SymbolSizeFunction;
+export type SymbolType = "emptyCircle" | "circle" | `path://${string}`;
+export type ItemColorFunction = (params: EChartsCallbackParams) => string;
+export interface SeriesBase {
+    data: DataSourceValue[];
+    id: string;
+    itemStyle?: {
+        borderColor?: string;
+        color: string | ItemColorFunction;
+        borderWidth?: number;
+    };
+    label: string;
+    name: string;
+    symbol?: SymbolType;
+    symbolSize: SymbolSize;
+}
+export interface LineSeries extends SeriesBase {
+    connectNulls?: boolean;
+    lineStyle: {
+        color?: string;
+        width: number;
+    };
+    type: "line";
+}
+export interface ScatterSeries extends SeriesBase {
+    type: "scatter";
+}
+export type Series = LineSeries | ScatterSeries;
+export type ChartSelectionModel = "none" | "single" | "single-no-deselect" | "extended";

package/types/chartTooltip.d.ts

@@ -0,0 +1,12 @@
+import { DataSourceValue } from "./ChartSeries";
+export interface TooltipParams {
+    axisValueLabel: string;
+    color: string;
+    componentType: string;
+    componentSubType: string;
+    data: DataSourceValue;
+    seriesName: string;
+    seriesType: 'line' | 'scatter';
+    value: number;
+}
+export declare const chartTooltip: (params: TooltipParams[]) => string | undefined;

package/types/index.d.ts

@@ -1,3 +1,5 @@
 export { Chart, type ChartProps } from "./Chart";
-export { ChartSeries, type DataSourceValue, type ItemColorFunction, } from "./ChartSeries";
-export type { ChartContextMenuOptions, ChartMenuLocation, } from "./useChartContextMenu";
+export type { ItemColorFunction, LineSeries as Series } from './chart-types';
+export { ChartSeries, type DataSourceValue } from "./ChartSeries";
+export type { ChartContextMenuOptions, ChartMenuLocation } from "./useChartContextMenu";
+export type { ChartConfig, DataExclusionOptions } from './useChartOptions';

package/types/useChartContextMenu.d.ts

@@ -1,16 +1,16 @@
 import { DataSourceRow } from "@vuu-ui/vuu-data-types";
-import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { ECElementEvent } from "echarts";
+import { ColumnMap } from "@vuu-ui/vuu-utils";
 export type ChartMenuLocation = "canvas" | "series";
 export type ChartContextMenuOptions = {
-    categoryColumn: string;
-    categoryValue: VuuRowDataItemType;
+    column: string;
+    columnMap: ColumnMap;
     row: DataSourceRow;
-    valueColumn: string;
-    value: VuuRowDataItemType;
 };
 interface ChartContextMenuHookProps {
     allowContextMenu?: boolean;
-    categoryColumnName: string;
+    categoryColumnName?: string;
+    columnMap: ColumnMap;
 }
-export declare const useChartContextMenu: ({ categoryColumnName, }: ChartContextMenuHookProps) => any;
+export declare const useChartContextMenu: ({ columnMap, }: ChartContextMenuHookProps) => ({ data, event, seriesName }: ECElementEvent) => void;
 export {};

package/types/useChartOptions.d.ts

@@ -1,12 +1,28 @@
+import { DataSource, DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { ColumnMap } from "@vuu-ui/vuu-utils";
 import { type EChartsCoreOption } from "echarts";
-import { ItemColorFunction } from "./ChartSeries";
-import { DataSource } from "@vuu-ui/vuu-data-types";
+import type { ChartSelectionModel, ItemColorFunction, SymbolSize, SymbolSizeFunction, SymbolType } from "./chart-types";
+export interface ChartConfig {
+    itemColorFunction?: ItemColorFunction;
+    selectionModel?: ChartSelectionModel;
+    symbolSize?: SymbolSize;
+}
+export interface DataExclusionOptions {
+    isExcludedData: (row: DataSourceRow, columnMap: ColumnMap, column: string) => boolean;
+    /**
+     * An embedded SVG path. If provided, will be used to render excluded values.
+     */
+    symbol?: SymbolType;
+}
 export interface ChartOptionsProps {
     categoryColumnName: string;
+    config: ChartConfig;
+    dataExclusions?: DataExclusionOptions;
     dataSource: DataSource;
     itemColorFunction?: ItemColorFunction;
     palette?: string[];
     seriesColumnNames: string[];
     showTooltip?: boolean;
+    symbolSizeFunction?: SymbolSizeFunction;
 }
-export declare const useChartOptions: ({ categoryColumnName, dataSource, itemColorFunction, palette, seriesColumnNames, showTooltip, }: ChartOptionsProps) => EChartsCoreOption;
+export declare const useChartOptions: ({ categoryColumnName, config, dataExclusions, dataSource, itemColorFunction, palette, seriesColumnNames, showTooltip, symbolSizeFunction: symbolSize, }: ChartOptionsProps) => EChartsCoreOption;

package/types/useChartSelection.d.ts

@@ -0,0 +1,14 @@
+import { ECElementEvent } from "echarts";
+import { ChartSelectionModel, ItemColorFunction, SymbolSizeFunction } from "./chart-types";
+interface ChartSelectionHookProps {
+    selectionModel?: ChartSelectionModel;
+    categoryColumnName: string;
+}
+export declare const useChartSelection: (_props: ChartSelectionHookProps) => {
+    onClick: ({ data, event, seriesName: column }: ECElementEvent) => void;
+    onMouseOver: ({ data, seriesName }: ECElementEvent) => void;
+    onMouseOut: () => void;
+    itemColorFunction: ItemColorFunction;
+    symbolSizeFunction: SymbolSizeFunction;
+};
+export {};

package/src/Chart.css.js

@@ -1,42 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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 };