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

package/esm/useChartContextMenu.js

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

package/esm/useChartContextMenu.js.map

@@ -1 +0,0 @@
-{"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 { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { useCallback } from \"react\";\nimport { DataSourceValue } from \"./ChartSeries\";\n\nexport type ChartMenuLocation = \"canvas\" | \"series\";\n\ntype EChartContextMenuEvent = {\n  event: PointerEvent;\n  offsetX: number;\n  offsetY: number;\n  stop: () => void;\n  type: \"contextmenu\";\n};\n\nexport type ChartContextMenuOptions = {\n  categoryColumn: string;\n  categoryValue: VuuRowDataItemType;\n  row: DataSourceRow;\n  valueColumn: string;\n  value: VuuRowDataItemType;\n};\n\ntype EChartContextMenuHandlerParams = {\n  data: DataSourceValue;\n  dataIndex: number;\n  event: EChartContextMenuEvent;\n  name: string;\n  seriesId: string;\n  seriesName: string;\n  value: DataSourceValue;\n};\n\ninterface ChartContextMenuHookProps {\n  allowContextMenu?: boolean;\n  categoryColumnName: string;\n}\n\nexport const useChartContextMenu = ({\n  categoryColumnName,\n}: ChartContextMenuHookProps) => {\n  const showContextMenu = useContextMenu();\n\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  const onContextMenu = useCallback<any>(\n    ({\n      data,\n      event,\n      name: categoryValue,\n      seriesName: valueColumn,\n      value: keyedValue,\n      ...rest\n    }: EChartContextMenuHandlerParams) => {\n      event.stop();\n      console.log({ rest });\n      const { row, value } = data;\n\n      const menuOptions: ChartContextMenuOptions = {\n        categoryColumn: categoryColumnName,\n        categoryValue,\n        row,\n        valueColumn,\n        value,\n      };\n\n      showContextMenu(event.event, \"series\", menuOptions, {\n        onOpenChange: (isOpen: boolean) => {\n          console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);\n        },\n      });\n    },\n    [categoryColumnName, showContextMenu],\n  );\n\n  return onContextMenu;\n};\n"],"names":[],"mappings":";;;AAuCO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,CAAiC,KAAA;AAC/B,EAAA,MAAM,kBAAkB,cAAe,EAAA;AAIvC,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC;AAAA,MACC,IAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAM,EAAA,aAAA;AAAA,MACN,UAAY,EAAA,WAAA;AAAA,MACZ,KAAO,EAAA,UAAA;AAAA,MACP,GAAG;AAAA,KACiC,KAAA;AACpC,MAAA,KAAA,CAAM,IAAK,EAAA;AACX,MAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,IAAA,EAAM,CAAA;AACpB,MAAM,MAAA,EAAE,GAAK,EAAA,KAAA,EAAU,GAAA,IAAA;AAEvB,MAAA,MAAM,WAAuC,GAAA;AAAA,QAC3C,cAAgB,EAAA,kBAAA;AAAA,QAChB,aAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAgB,eAAA,CAAA,KAAA,CAAM,KAAO,EAAA,QAAA,EAAU,WAAa,EAAA;AAAA,QAClD,YAAA,EAAc,CAAC,MAAoB,KAAA;AACjC,UAAQ,OAAA,CAAA,GAAA,CAAI,CAAsC,mCAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AAAA;AAC5D,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,oBAAoB,eAAe;AAAA,GACtC;AAEA,EAAO,OAAA,aAAA;AACT;;;;"}

package/esm/useChartOptions.js

@@ -1,85 +0,0 @@
-import { useState, useMemo } from 'react';
-import { ChartSeries } from './ChartSeries.js';
-import { itemsChanged } from '@vuu-ui/vuu-utils';
-
-const defaultPalette = [
-  "#4676bf",
-  "#ab6528",
-  "#9f55c2",
-  "#2a8285",
-  "#697694",
-  "#B0549d"
-];
-const useChartOptions = ({
-  categoryColumnName,
-  dataSource,
-  itemColorFunction,
-  palette = defaultPalette,
-  seriesColumnNames,
-  showTooltip = true
-}) => {
-  const [, forceRender] = useState({});
-  const chartSeries = useMemo(() => {
-    console.log("new ChartSeries");
-    const cs = new ChartSeries({
-      itemColorFunction,
-      dataSource
-    });
-    cs.on("update", () => forceRender({}));
-    return cs;
-  }, [dataSource, itemColorFunction]);
-  useMemo(() => {
-    if (categoryColumnName !== chartSeries.categoryColumn) {
-      chartSeries.categoryColumn = categoryColumnName;
-    }
-    if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {
-      chartSeries.seriesColumnNames = seriesColumnNames;
-    }
-  }, [categoryColumnName, chartSeries, seriesColumnNames]);
-  return {
-    animation: false,
-    color: palette,
-    dataZoom: [
-      {
-        backgroundColor: "var(--vuuChart-zoom-background, transparent)",
-        borderColor: "var(--vuuChart-zoom-borderColor, white)",
-        handleStyle: {
-          color: "var(--vuuChart-zoom-handleColor, white)"
-        },
-        moveHandleStyle: {
-          color: "var(--vuuChart-zoom-slideColor, white)"
-        },
-        type: "slider",
-        start: 0,
-        end: 100
-      }
-    ],
-    grid: {
-      left: "0",
-      bottom: 0,
-      right: 5
-    },
-    series: chartSeries.series,
-    tooltip: showTooltip ? {
-      backgroundColor: "",
-      borderColor: "",
-      // borderWidth: "",
-      className: "vuuChartTooltip",
-      // 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 { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport { ChartSeries, ItemColorFunction } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { itemsChanged } from \"@vuu-ui/vuu-utils\";\n\nconst defaultPalette = [\n  \"#4676bf\",\n  \"#ab6528\",\n  \"#9f55c2\",\n  \"#2a8285\",\n  \"#697694\",\n  \"#B0549d\",\n];\nexport interface ChartOptionsProps {\n  categoryColumnName: string;\n  dataSource: DataSource;\n  itemColorFunction?: ItemColorFunction;\n  palette?: string[];\n  seriesColumnNames: string[];\n  showTooltip?: boolean;\n}\n\nexport const useChartOptions = ({\n  categoryColumnName,\n  dataSource,\n  itemColorFunction,\n  palette = defaultPalette,\n  seriesColumnNames,\n  showTooltip = true,\n}: ChartOptionsProps) => {\n  const [, forceRender] = useState({});\n\n  const chartSeries = useMemo(() => {\n    console.log(\"new ChartSeries\");\n    const cs = new ChartSeries({\n      itemColorFunction,\n      dataSource,\n    });\n    cs.on(\"update\", () => forceRender({}));\n    return cs;\n  }, [dataSource, itemColorFunction]);\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: 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          backgroundColor: \"\",\n          borderColor: \"\",\n          // borderWidth: \"\",\n          className: \"vuuChartTooltip\",\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":";;;;AAMA,MAAM,cAAiB,GAAA;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AAUO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAU,GAAA,cAAA;AAAA,EACV,iBAAA;AAAA,EACA,WAAc,GAAA;AAChB,CAAyB,KAAA;AACvB,EAAA,MAAM,GAAG,WAAW,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,OAAA,CAAQ,IAAI,iBAAiB,CAAA;AAC7B,IAAM,MAAA,EAAA,GAAK,IAAI,WAAY,CAAA;AAAA,MACzB,iBAAA;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,iBAAiB,CAAC,CAAA;AAElC,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,KAAO,EAAA,OAAA;AAAA,IACP,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,eAAiB,EAAA,EAAA;AAAA,MACjB,WAAa,EAAA,EAAA;AAAA;AAAA,MAEb,SAAW,EAAA,iBAAA;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;;;;"}