@trackunit/react-chart-components 0.0.6-alpha-0b53b6cf53.0 → 0.0.6

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "0.0.6-alpha-0b53b6cf53.0",
+  "version": "0.0.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/react-components": "0.1.65-alpha-0b53b6cf53.0",
-    "@trackunit/ui-design-tokens": "0.0.61-alpha-0b53b6cf53.0",
+    "@trackunit/react-components": "0.1.65",
+    "@trackunit/ui-design-tokens": "0.0.60",
     "@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": "module",
+  "type": "commonjs",
   "types": "./src/index.d.ts",
   "peerDependencies": {}
 }

package/index.js

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