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

package/esm/useChartOptions.js

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

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

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

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