@vuu-ui/vuu-chart 3.1.0 → 3.2.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "support for apache echarts using vuu data",
   "main": "./src/index.js",
   "license": "Apache-2.0",
@@ -9,15 +9,15 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.1.0",
-    "@vuu-ui/vuu-protocol-types": "3.1.0",
-    "@vuu-ui/vuu-data-local": "3.1.0"
+    "@vuu-ui/vuu-data-types": "3.2.0",
+    "@vuu-ui/vuu-protocol-types": "3.2.0",
+    "@vuu-ui/vuu-data-local": "3.2.0"
   },
   "dependencies": {
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "3.1.0",
-    "@vuu-ui/vuu-utils": "3.1.0",
+    "@vuu-ui/vuu-context-menu": "3.2.0",
+    "@vuu-ui/vuu-utils": "3.2.0",
     "clsx": "^2.0.0"
   },
   "peerDependencies": {

package/src/Chart.js

@@ -3,22 +3,23 @@ import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import clsx from "clsx";
 import { getInstanceByDom, init } from "echarts";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } 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 { MeasuredContainer } from "@vuu-ui/vuu-ui-controls";
 import Chart from "./Chart.css";
 const classBase = "vuuChart";
 const Chart_Chart = ({ categoryColumnName, chartSettings = {
     useCoarsePointer: true,
     renderer: "svg"
-}, className, config, dataExclusions, dataSource, optionSettings = {
+}, className, config, dataExclusions, dataSource, height, optionSettings = {
     notMerge: true
-}, palette, showTooltip, style = {
+}, palette, resizeStrategy, showTooltip, style = {
     width: "100%",
     height: "100%"
-}, seriesColumnNames, ...htmlAttributes })=>{
+}, seriesColumnNames, width, ...htmlAttributes })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-toast-notification",
@@ -26,6 +27,17 @@ const Chart_Chart = ({ categoryColumnName, chartSettings = {
         window: targetWindow
     });
     const chartRef = useRef(null);
+    const [chartElement, setChartElement] = useState(null);
+    const setChartRef = useCallback((element)=>{
+        chartRef.current = element;
+        setChartElement(element);
+    }, []);
+    const onResize = useCallback((size)=>{
+        if (chartRef.current) getInstanceByDom(chartRef.current)?.resize({
+            height: size.height,
+            width: size.width
+        });
+    }, []);
     const columnMap = buildColumnMap(dataSource.columns);
     const onContextMenu = useChartContextMenu({
         categoryColumnName,
@@ -47,7 +59,8 @@ const Chart_Chart = ({ categoryColumnName, chartSettings = {
         showTooltip
     });
     useEffect(()=>{
-        const chart = init(chartRef.current, null, chartSettings);
+        if (!chartElement) return;
+        const chart = init(chartElement, null, chartSettings);
         chart.on("contextmenu", onContextMenu);
         chart.on("click", onClick);
         chart.on("mouseover", onMouseOver);
@@ -56,6 +69,7 @@ const Chart_Chart = ({ categoryColumnName, chartSettings = {
             chart?.dispose();
         };
     }, [
+        chartElement,
         chartSettings,
         onClick,
         onContextMenu,
@@ -63,19 +77,30 @@ const Chart_Chart = ({ categoryColumnName, chartSettings = {
         onMouseOut
     ]);
     useEffect(()=>{
-        if (chartRef.current) {
-            const chart = getInstanceByDom(chartRef.current);
+        if (chartElement) {
+            const chart = getInstanceByDom(chartElement);
             chart?.setOption(option, optionSettings);
         }
     }, [
+        chartElement,
         option,
         optionSettings
     ]);
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(MeasuredContainer, {
         ...htmlAttributes,
         className: clsx(classBase, className),
-        ref: chartRef,
-        style: style
+        height: height,
+        onResize: onResize,
+        resizeStrategy: resizeStrategy,
+        style: style,
+        width: width,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: setChartRef,
+            style: {
+                height: "100%",
+                width: "100%"
+            }
+        })
     });
 };
 export { Chart_Chart as Chart };

package/types/Chart.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from "react";
 import { ChartOptionsProps } from "./useChartOptions";
+import { type MeasuredContainerProps } from "@vuu-ui/vuu-ui-controls";
 type OptionSettings = {
     notMerge: boolean;
 };
@@ -14,7 +14,7 @@ type ChartSettings = {
      */
     useCoarsePointer: boolean;
 };
-export interface ChartProps extends ChartOptionsProps, HTMLAttributes<HTMLDivElement> {
+export interface ChartProps extends ChartOptionsProps, Omit<MeasuredContainerProps, "children" | "onResize"> {
     chartSettings?: Partial<ChartSettings>;
     optionSettings?: OptionSettings;
     /**
@@ -24,5 +24,5 @@ export interface ChartProps extends ChartOptionsProps, HTMLAttributes<HTMLDivEle
     palette?: string[];
     showTooltip?: boolean;
 }
-export declare const Chart: ({ categoryColumnName, chartSettings, className, config, dataExclusions, dataSource, optionSettings, palette, showTooltip, style, seriesColumnNames, ...htmlAttributes }: ChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chart: ({ categoryColumnName, chartSettings, className, config, dataExclusions, dataSource, height, optionSettings, palette, resizeStrategy, showTooltip, style, seriesColumnNames, width, ...htmlAttributes }: ChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};