@trackunit/react-chart-components 1.3.86 → 1.3.87

package/index.cjs.js

@@ -1,63 +1,191 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactComponents = require('@trackunit/react-components');
-var EChart = require('echarts-for-react');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var sharedUtils = require('@trackunit/shared-utils');
+var echarts = require('echarts');
 var react = require('react');
+var uiDesignTokens = require('@trackunit/ui-design-tokens');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
 
+var echarts__namespace = /*#__PURE__*/_interopNamespaceDefault(echarts);
+
+function isECElementEvent(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "type" in value &&
+        "componentType" in value &&
+        "componentSubType" in value &&
+        "componentIndex" in value &&
+        "seriesIndex" in value);
+}
 /**
- * The Chart component is a wrapper component for ECharts.
- *
- * Handles events and click functionality.
- *
- * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
- *
- * @param {ChartProps} props - The props for the Chart component
- * @returns {ReactElement} Chart component
+ * A React wrapper for ECharts that handles initialization, events, and cleanup.
  */
-const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
-    const echartsRef = react.useRef(null);
+const EChart = ({ option, style, className, onChartReady, onClick, onEvents, notMerge = false, renderer = "canvas", dataTestId, }) => {
+    const containerRef = react.useRef(null);
+    const internalChartRef = react.useRef(undefined);
+    const isInitialRender = react.useRef(true);
+    const setupEventHandlers = react.useCallback((chart) => {
+        // Handle click events
+        if (onClick) {
+            chart.on("click", function (event) {
+                if (isECElementEvent(event)) {
+                    onClick(event);
+                }
+            });
+            const zr = chart.getZr();
+            zr.setCursorStyle("pointer");
+        }
+        // Handle other events
+        if (onEvents) {
+            Object.entries(onEvents).forEach(([eventName, handler]) => {
+                if (eventName !== "click" || !onClick) {
+                    // Don't double-register click if onClick is provided
+                    chart.on(eventName, function (event) {
+                        if (isECElementEvent(event)) {
+                            handler(event);
+                        }
+                    });
+                }
+            });
+        }
+    }, [onClick, onEvents]);
+    const initChart = react.useCallback(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        // Dispose existing instance if any
+        if (internalChartRef.current) {
+            internalChartRef.current.dispose();
+            internalChartRef.current = undefined;
+        }
+        // Create new chart instance
+        const newChart = echarts__namespace.init(container, undefined, {
+            renderer,
+            width: "auto",
+            height: "auto",
+        });
+        // Store reference and notify ready
+        internalChartRef.current = newChart;
+        if (onChartReady) {
+            onChartReady(newChart);
+        }
+    }, [renderer, onChartReady]);
+    // Initialize chart and handle cleanup
     react.useEffect(() => {
-        const instance = echartsRef.current?.getEchartsInstance();
-        if (instance) {
-            if (onClick) {
-                instance.on("click", onClick);
+        initChart();
+        isInitialRender.current = true;
+        const resizeObserver = new ResizeObserver(() => {
+            const chart = internalChartRef.current;
+            if (!chart) {
+                return;
+            }
+            if (!chart.isDisposed()) {
+                chart.resize();
+            }
+        });
+        const container = containerRef.current;
+        if (container) {
+            resizeObserver.observe(container);
+        }
+        return () => {
+            resizeObserver.disconnect();
+            const chart = internalChartRef.current;
+            if (!chart) {
+                return;
             }
-            else {
-                instance.getZr().setCursorStyle("default");
+            if (!chart.isDisposed()) {
+                const zr = chart.getZr();
+                zr.setCursorStyle("default");
+                chart.dispose();
+                internalChartRef.current = undefined;
             }
+        };
+    }, [initChart]);
+    // Setup event handlers
+    react.useEffect(() => {
+        const chart = internalChartRef.current;
+        if (chart && !chart.isDisposed()) {
+            // Setup handlers
+            setupEventHandlers(chart);
         }
         return () => {
-            if (instance && !instance.isDisposed()) {
-                instance.off("click", onClick);
+            if (chart && !chart.isDisposed()) {
+                // Clean up all event handlers
+                chart.off("click");
+                if (onEvents) {
+                    sharedUtils.objectKeys(onEvents).forEach(eventName => {
+                        chart.off(eventName);
+                    });
+                }
             }
         };
-    }, [onClick, echartsRef]);
-    return (jsxRuntime.jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: style?.height ?? "300px", width: style?.width ?? "100%" }, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), loadingOption?.text ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart, { className: className, notMerge: !merge, onChartReady: onChartReady, onEvents: onEvents, option: options ?? unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
+    }, [onEvents, setupEventHandlers]);
+    // Handle options updates
+    react.useEffect(() => {
+        const chart = internalChartRef.current;
+        if (!chart) {
+            return;
+        }
+        if (!chart.isDisposed()) {
+            // Force notMerge on initial render, respect prop afterwards
+            chart.setOption(option, isInitialRender.current || notMerge);
+            isInitialRender.current = false;
+        }
+    }, [option, notMerge]);
+    return jsxRuntime.jsx("div", { className: cvaEChart({ className }), "data-testid": dataTestId, ref: containerRef, style: style });
+};
+const cvaEChart = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full"]);
+
+/**
+ * The Chart component is a wrapper component for ECharts.
+ * Handles events and click functionality.
+ */
+const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
+    const containerStyle = {
+        height: style?.height ?? "300px",
+        width: style?.width ?? "100%",
+        ...style,
+    };
+    return (jsxRuntime.jsx("div", { className: "grid h-full w-full grid-cols-1 grid-rows-1 items-center gap-1", "data-testid": dataTestId, style: containerStyle, children: showLoading ? (jsxRuntime.jsxs("div", { className: "grid place-items-center overflow-y-auto", "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), loadingOption?.text ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart, { className: className, dataTestId: `${dataTestId}-chart`, notMerge: !merge, onChartReady: onChartReady, onClick: onClick, onEvents: onEvents, option: options ?? unsafeOptions, renderer: renderer, style: style }), timezoneLabel] })) }));
 };
-const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
-const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
 
 const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
-    "inline-flex",
+    "flex",
     "items-center",
     "transition-all",
     "ease-in-out",
     "duration-200",
-    "text-neutral-500",
-    "hover:text-neutral-700",
-    "text-sm",
-    "gap-2",
+    "text-secondary-600",
+    "hover:text-secondary-900",
 ], {
     variants: {
         selected: {
             false: "",
-            true: "font-medium text-black",
+            true: ["font-semibold", "text-secondary-900"],
         },
         disabled: {
             false: "",
-            true: "text-neutral-300",
+            true: ["text-secondary-400", "hover:text-secondary-400"],
         },
         isClickable: {
             false: "cursor-default",
@@ -70,11 +198,11 @@ const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
         isClickable: false,
     },
 });
-const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-3", "h-3", "rounded-[50%]"], {
+const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-3", "mr-1", "h-3", "rounded-[50%]", "flex-none"], {
     variants: {
         selected: {
             false: "",
-            true: "border border-black border-opacity-50",
+            true: "",
         },
     },
     defaultVariants: {
@@ -88,79 +216,235 @@ const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-3", "h-3",
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
+const LegendItem = ({ className, count, label, disabled, selected, onClick, color, dataTestId, onMouseEnter, onMouseLeave, }) => {
     const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-    return (jsxRuntime.jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, children: [jsxRuntime.jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), label ? jsxRuntime.jsx("p", { children: label }) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), jsxRuntime.jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), jsxRuntime.jsxs("p", { className: "text-xs", children: ["(", count || 0, ")"] })] }));
+};
+
+/**
+ * Re-ordered chart colors to ensure that adjacent colors are visually different.
+ *
+ * @returns {string[]} The reordered chart colors.
+ */
+const useChartColor = () => {
+    const chartColor = react.useCallback((index) => {
+        return uiDesignTokens.DEFAULT_CHART_COLORS[index % uiDesignTokens.DEFAULT_CHART_COLORS.length] ?? "#000000";
+    }, []);
+    const chartColorArray = react.useCallback((total) => {
+        return Array.from({ length: total }, (_, index) => chartColor(index));
+    }, [chartColor]);
+    const chartStatusColor = react.useCallback((status) => {
+        return uiDesignTokens.CHART_STATUS_COLORS[status];
+    }, []);
+    return {
+        chartColor,
+        chartColorArray,
+        chartStatusColor,
+    };
+};
+
+/**
+ * Limits the data set to the given limit.
+ * If the data set is larger than the limit, the data set is limited to the limit and the rest of the data is added to the "Others" group.
+ *
+ * @param data - The data set to limit.
+ * @param limit - The limit to apply to the data set.
+ * @returns {object} The limited data set with and without the "others" category.
+ */
+const useLimitDataSet = (data, limit) => {
+    const limitedData = react.useMemo(() => {
+        const sortedData = data.sort((a, b) => (b.count ?? 0) - (a.count ?? 0));
+        if (sortedData.length > limit) {
+            const result = sortedData.slice(0, limit);
+            result.push({
+                id: "defaultOther",
+                name: "Others",
+                selected: false,
+                count: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.count ?? 0), 0),
+                color: uiDesignTokens.DEFAULT_CHART_OTHER,
+                original: { defaultOther: true },
+            });
+            return result;
+        }
+        return sortedData;
+    }, [data, limit]);
+    const limitedDataWithoutOthers = react.useMemo(() => limitedData.filter(item => !item.original?.defaultOther), [limitedData]);
+    return { limitedData, limitedDataWithoutOthers };
 };
 
 /**
- * Create a PieChart with legends based on our current Chart component
+ * Create a DonutChart with legends based on our current Chart component
  *
- * @param {PieChartProps} props - The props for the Chart component
+ * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
-    const totalCount = data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0;
-    const { hovering, onMouseEnter, onMouseLeave } = reactComponents.useHover({ debounced: true });
-    return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { children: size === "full" && (jsxRuntime.jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data?.map(item => (jsxRuntime.jsx(LegendItem, { color: item.color, dataTestId: `legend-${item.id}`, label: item.count !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected }, item.id))) })) }), jsxRuntime.jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsxRuntime.jsx(Chart, { dataTestId: "pie-chart", onClick: evt => {
-                        const clickedEntry = data?.find(x => x.id === evt.data.id);
-                        if (onClick && clickedEntry) {
-                            onClick(clickedEntry);
-                        }
-                    }, options: {
-                        legend: {
-                            show: false,
-                        },
-                        tooltip: {
-                            show: false,
+const DonutChart = ({ data, size = "full", loading, onClick, className, dataTestId, legendPosition = "Right", maxDataPoints = 6, showOthers = true, }) => {
+    const containerRef = react.useRef(null);
+    const chartRef = react.useRef(null);
+    const totalCount = react.useMemo(() => data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data]);
+    const [hoveringItem, setHoveringItem] = react.useState(null);
+    const currentCount = react.useMemo(() => hoveringItem?.count ?? totalCount, [hoveringItem, totalCount]);
+    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints);
+    const { chartColor } = useChartColor();
+    const handleChartReady = react.useCallback((chart) => {
+        chartRef.current = chart;
+    }, []);
+    const handleChartClick = react.useCallback((evt) => {
+        if (onClick && data) {
+            const clickedEntry = data.find(x => {
+                if (!evt.data || typeof evt.data !== "object" || !("id" in evt.data)) {
+                    return false;
+                }
+                return x.id === evt.data.id;
+            });
+            if (clickedEntry) {
+                onClick(clickedEntry);
+            }
+        }
+    }, [onClick, data]);
+    const handleChartEvents = react.useMemo(() => ({
+        mouseover: (evt) => {
+            const hoveredItem = data?.[evt.dataIndex];
+            if (hoveredItem) {
+                setHoveringItem(hoveredItem);
+            }
+        },
+        mouseout: () => {
+            setHoveringItem(null);
+        },
+    }), [data, setHoveringItem]);
+    const handleLegendMouseEnter = react.useCallback((item) => {
+        setHoveringItem(item);
+        const chart = chartRef.current;
+        if (!chart) {
+            return;
+        }
+        // Find the index in the current chart data
+        const index = (showOthers ? limitedData : limitedDataWithoutOthers).findIndex(d => d.id === item.id);
+        if (index !== -1) {
+            chart.dispatchAction({
+                type: "highlight",
+                seriesIndex: 0,
+                dataIndex: index,
+            });
+        }
+    }, [limitedData, limitedDataWithoutOthers, showOthers]);
+    const handleLegendMouseLeave = react.useCallback(() => {
+        setHoveringItem(null);
+        const chart = chartRef.current;
+        if (!chart) {
+            return;
+        }
+        chart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+    }, []);
+    const chartOptions = react.useMemo(() => {
+        return {
+            legend: {
+                show: false,
+            },
+            tooltip: {
+                show: false,
+            },
+            series: [
+                {
+                    type: "pie",
+                    radius: ["50%", "75%"],
+                    center: ["50%", "50%"],
+                    minAngle: 5,
+                    selectedOffset: 8,
+                    itemStyle: {
+                        borderColor: "#ffffff",
+                        borderWidth: 2,
+                    },
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: true,
+                        position: "center",
+                        fontSize: size === "full" ? 18 : 12,
+                        fontWeight: "bold",
+                        formatter: currentCount.toString(),
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            formatter: "{c}",
                         },
-                        series: [
-                            {
-                                type: "pie",
-                                radius: ["50%", "75%"], //can't be 100 since it'll be cut off when hovering
-                                center: ["50%", "50%"],
-                                minAngle: 10,
-                                selectedOffset: 8,
-                                itemStyle: {
-                                    borderColor: "#ffffff",
-                                    borderWidth: 2,
-                                },
-                                avoidLabelOverlap: false,
-                                label: {
-                                    show: !hovering,
-                                    position: "center",
-                                    fontSize: size === "full" ? 18 : 12,
-                                    fontWeight: "bold",
-                                    formatter: totalCount.toString(),
-                                },
-                                emphasis: {
-                                    label: {
-                                        show: hovering,
-                                        formatter: "{c}",
-                                    },
-                                },
-                                labelLine: {
-                                    show: false,
-                                },
-                                data: data?.map(item => ({
-                                    id: item.id,
-                                    name: item.name,
-                                    value: item.count ?? 0,
-                                    itemStyle: { color: item.color },
-                                })),
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    data: (showOthers ? limitedData : limitedDataWithoutOthers)
+                        .map((item, index) => {
+                        const itemColor = item.color ?? chartColor(index);
+                        return {
+                            id: item.id,
+                            name: item.name,
+                            value: item.count ?? 0,
+                            itemStyle: {
+                                color: itemColor,
                             },
-                        ],
-                    }, showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 } }) })] }));
+                            emphasis: {
+                                disabled: false,
+                                scale: true,
+                                scaleSize: 5,
+                            },
+                            selected: hoveringItem?.id === item.id,
+                        };
+                    })
+                        .filter(item => item.value),
+                },
+            ],
+        };
+    }, [size, currentCount, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
+    return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsxRuntime.jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsxRuntime.jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsxRuntime.jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsxRuntime.jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.count, dataTestId: `legend-${item.id}`, disabled: item.count === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
 };
-const cvaChartRoot = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-direction-col",
-    "flex-wrap-reverse",
-    "justify-between",
-    "items-center",
-    "h-full",
-]);
+const cvaChartRoot = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
+    variants: {
+        legendPosition: {
+            Right: ["items-center", "justify-items-stretch", "flex-row"],
+            Bottom: ["items-center", "flex-col"],
+        },
+    },
+});
+const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["flex-1", "h-full"], {
+    variants: {
+        legendPosition: {
+            Right: ["justify-end"],
+            Bottom: ["flex", "items-center", "w-full"],
+        },
+    },
+});
+const cvaChart = cssClassVarianceUtilities.cvaMerge(["flex-0", "max-w-[200px]", "max-h-[200px]", "place-self-center"], {
+    variants: {
+        legendPosition: {
+            Right: [],
+            Bottom: ["max-h-[230px]"],
+        },
+        size: {
+            full: ["min-h-[140px]"],
+            compact: ["w-[60px]", "h-[60px]"],
+        },
+    },
+    defaultVariants: {
+        size: "full",
+    },
+});
+const cvaLegend = cssClassVarianceUtilities.cvaMerge(["flex", "overflow-auto"], {
+    variants: {
+        legendPosition: {
+            Right: ["justify-start", "flex-col", "flex-1"],
+            Bottom: ["flex-wrap", "justify-end", "flex-row"],
+        },
+    },
+    defaultVariants: {
+        legendPosition: "Right",
+    },
+});
 
 exports.Chart = Chart;
+exports.DonutChart = DonutChart;
 exports.LegendItem = LegendItem;
-exports.PieChart = PieChart;
+exports.useChartColor = useChartColor;