@trackunit/react-chart-components 0.0.6 → 0.0.7

package/index.js

@@ -0,0 +1,160 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Spinner, Text } from '@trackunit/react-components';
+import { tw, tws } from '@trackunit/tailwind-styled-components';
+import EChart from 'echarts-for-react';
+import * as React from 'react';
+
+/**
+ * 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 {JSX.Element} Chart component
+ */
+const Chart = ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
+    var _a, _b;
+    const echartsRef = React.useRef(null);
+    const eventHandlers = React.useMemo(() => {
+        const values = {};
+        if (onDataZoom !== undefined) {
+            values.dataZoom = onDataZoom;
+        }
+        if (onBrush !== undefined) {
+            values.brush = onBrush;
+        }
+        if (onBrushSelected !== undefined) {
+            values.brushSelected = onBrushSelected;
+        }
+        if (mouseLeaveChart !== undefined) {
+            values.globalout = mouseLeaveChart;
+        }
+        if (mouseMoveChart !== undefined) {
+            values.mouseMove = (event) => {
+                var _a;
+                mouseMoveChart(event, (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
+            };
+        }
+        return values;
+    }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart]);
+    React.useEffect(() => {
+        var _a;
+        const instance = (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
+        if (instance && onClick) {
+            instance.on("click", onClick);
+        }
+        return () => {
+            if (instance && !instance.isDisposed()) {
+                instance.off("click", onClick);
+            }
+        };
+    }, [onClick, echartsRef]);
+    return (jsx(ChartContainer, Object.assign({ style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId }, { children: showLoading ? (jsxs(SpinnerContainer, { children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsx(Text, Object.assign({ align: "center", subtle: true }, { children: loadingOption.text })))] })) : (jsxs(Fragment, { children: [jsx(EChart, { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) })));
+};
+const SpinnerContainer = tw.div `
+  tu-chart-spinner-container
+`;
+const ChartContainer = tw.div `
+  tu-chart-container
+`;
+
+/**
+ * The LegendItem component is used to show form legends.
+ *
+ * @param {ILegendItem} props - The props for the LegendItem component
+ * @returns {JSX.Element} LegendItem component
+ */
+const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
+    const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
+    return (jsxs(Root, Object.assign({ "data-testid": dataTestId, "$disabled": disabled, className: className, "$selected": selected, onClick: handleOnClick }, { children: [jsx(Indicator, { style: { backgroundColor: color }, "$selected": selected }), label && jsx("p", { children: label })] })));
+};
+const Root = tw.div `
+  inline-flex
+  items-center
+  transition-all
+  ease-in-out
+  duration-200
+  text-neutral-500
+  hover:text-neutral-700
+  text-sm
+  gap-2
+  ${p => (p.$disabled ? tws `text-neutral-300` : p.$selected ? tws `text-black` : "")}
+  ${p => (p.$selected ? tws `font-medium` : null)}
+  ${p => (p.onClick ? tws `cursor-pointer` : tws `cursor-default`)}
+`;
+const Indicator = tw.div `
+  w-3
+  h-3
+  rounded-[50%]
+  ${p => (p.$selected ? tws `border border-black border-opacity-50` : null)}
+`;
+
+/**
+ * Create a PieChart with legends based on our current Chart component
+ *
+ * @param {PieChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => (jsxs(ChartRoot, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx("div", { children: size === "full" && (jsx("div", Object.assign({ className: "flex flex-col", "data-testid": "legend" }, { children: data === null || data === void 0 ? void 0 : data.map(item => (jsx(LegendItem, { dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected, color: item.color }, item.id))) }))) }), jsx(Chart, { showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 }, onClick: evt => {
+                const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
+                if (onClick && clickedEntry) {
+                    onClick(clickedEntry);
+                }
+            }, options: {
+                legend: {
+                    show: false,
+                },
+                tooltip: {
+                    show: false,
+                },
+                series: [
+                    {
+                        type: "pie",
+                        radius: ["50%", "75%"],
+                        center: ["50%", "50%"],
+                        minAngle: 10,
+                        selectedOffset: 8,
+                        itemStyle: {
+                            borderColor: "#ffffff",
+                            borderWidth: 2,
+                        },
+                        avoidLabelOverlap: false,
+                        label: {
+                            show: false,
+                            position: "center",
+                            fontSize: "18",
+                            fontWeight: "bold",
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                formatter: "{c}",
+                            },
+                        },
+                        labelLine: {
+                            show: false,
+                        },
+                        data: data === null || data === void 0 ? void 0 : data.map(item => {
+                            var _a;
+                            return ({
+                                id: item.id,
+                                name: item.name,
+                                value: (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0,
+                                itemStyle: { color: item.color },
+                            });
+                        }),
+                    },
+                ],
+            } })] })));
+const ChartRoot = tw.div `
+  flex
+  flex-direction-col
+  flex-wrap-reverse
+  justify-between
+  items-center
+  h-full
+`;
+
+export { Chart, LegendItem, PieChart };

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/react-components": "0.1.65",
-    "@trackunit/ui-design-tokens": "0.0.60",
+    "@trackunit/react-components": "0.1.66",
+    "@trackunit/ui-design-tokens": "0.0.61",
     "@trackunit/tailwind-styled-components": "0.0.54",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",
     "react": "18.2.0"
   },
+  "module": "./index.js",
   "main": "./index.cjs",
-  "type": "commonjs",
+  "type": "module",
   "types": "./src/index.d.ts",
   "peerDependencies": {}
 }