@trackunit/react-chart-components 0.0.97 → 0.0.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.js +53 -47
- package/index.esm.js +54 -48
- package/package.json +2 -2
package/index.cjs.js
CHANGED
|
@@ -96831,57 +96831,63 @@ const LegendItem = ({ className, label, disabled, selected, onClick, color, data
|
|
|
96831
96831
|
* @param {PieChartProps} props - The props for the Chart component
|
|
96832
96832
|
* @returns {JSX.Element} Chart component
|
|
96833
96833
|
*/
|
|
96834
|
-
const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) =>
|
|
96835
|
-
|
|
96836
|
-
|
|
96837
|
-
|
|
96838
|
-
|
|
96839
|
-
|
|
96840
|
-
|
|
96841
|
-
|
|
96842
|
-
|
|
96843
|
-
|
|
96844
|
-
|
|
96845
|
-
},
|
|
96846
|
-
series: [
|
|
96847
|
-
{
|
|
96848
|
-
type: "pie",
|
|
96849
|
-
radius: ["50%", "75%"],
|
|
96850
|
-
center: ["50%", "50%"],
|
|
96851
|
-
minAngle: 10,
|
|
96852
|
-
selectedOffset: 8,
|
|
96853
|
-
itemStyle: {
|
|
96854
|
-
borderColor: "#ffffff",
|
|
96855
|
-
borderWidth: 2,
|
|
96856
|
-
},
|
|
96857
|
-
avoidLabelOverlap: false,
|
|
96858
|
-
label: {
|
|
96834
|
+
const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
|
|
96835
|
+
var _a;
|
|
96836
|
+
const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0; }).reduce((a, b) => a + b, 0)) !== null && _a !== void 0 ? _a : 0;
|
|
96837
|
+
const { hovering, onMouseEnter, onMouseLeave } = reactComponents.useHover({ debounced: true });
|
|
96838
|
+
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 === null || data === void 0 ? void 0 : data.map(item => (jsxRuntime.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))) })) }), jsxRuntime.jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsxRuntime.jsx(Chart, { dataTestId: "pie-chart", showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 }, onClick: evt => {
|
|
96839
|
+
const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
|
|
96840
|
+
if (onClick && clickedEntry) {
|
|
96841
|
+
onClick(clickedEntry);
|
|
96842
|
+
}
|
|
96843
|
+
}, options: {
|
|
96844
|
+
legend: {
|
|
96859
96845
|
show: false,
|
|
96860
|
-
position: "center",
|
|
96861
|
-
fontSize: "18",
|
|
96862
|
-
fontWeight: "bold",
|
|
96863
96846
|
},
|
|
96864
|
-
|
|
96865
|
-
label: {
|
|
96866
|
-
show: true,
|
|
96867
|
-
formatter: "{c}",
|
|
96868
|
-
},
|
|
96869
|
-
},
|
|
96870
|
-
labelLine: {
|
|
96847
|
+
tooltip: {
|
|
96871
96848
|
show: false,
|
|
96872
96849
|
},
|
|
96873
|
-
|
|
96874
|
-
|
|
96875
|
-
|
|
96876
|
-
|
|
96877
|
-
|
|
96878
|
-
|
|
96879
|
-
|
|
96880
|
-
|
|
96881
|
-
|
|
96882
|
-
|
|
96883
|
-
|
|
96884
|
-
|
|
96850
|
+
series: [
|
|
96851
|
+
{
|
|
96852
|
+
type: "pie",
|
|
96853
|
+
radius: ["50%", "75%"],
|
|
96854
|
+
center: ["50%", "50%"],
|
|
96855
|
+
minAngle: 10,
|
|
96856
|
+
selectedOffset: 8,
|
|
96857
|
+
itemStyle: {
|
|
96858
|
+
borderColor: "#ffffff",
|
|
96859
|
+
borderWidth: 2,
|
|
96860
|
+
},
|
|
96861
|
+
avoidLabelOverlap: false,
|
|
96862
|
+
label: {
|
|
96863
|
+
show: !hovering,
|
|
96864
|
+
position: "center",
|
|
96865
|
+
fontSize: size === "full" ? 18 : 12,
|
|
96866
|
+
fontWeight: "bold",
|
|
96867
|
+
formatter: totalCount.toString(),
|
|
96868
|
+
},
|
|
96869
|
+
emphasis: {
|
|
96870
|
+
label: {
|
|
96871
|
+
show: hovering,
|
|
96872
|
+
formatter: "{c}",
|
|
96873
|
+
},
|
|
96874
|
+
},
|
|
96875
|
+
labelLine: {
|
|
96876
|
+
show: false,
|
|
96877
|
+
},
|
|
96878
|
+
data: data === null || data === void 0 ? void 0 : data.map(item => {
|
|
96879
|
+
var _a;
|
|
96880
|
+
return ({
|
|
96881
|
+
id: item.id,
|
|
96882
|
+
name: item.name,
|
|
96883
|
+
value: (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0,
|
|
96884
|
+
itemStyle: { color: item.color },
|
|
96885
|
+
});
|
|
96886
|
+
}),
|
|
96887
|
+
},
|
|
96888
|
+
],
|
|
96889
|
+
} }) })] }));
|
|
96890
|
+
};
|
|
96885
96891
|
const cvaChartRoot = cssClassVarianceUtilities.cvaMerge([
|
|
96886
96892
|
"flex",
|
|
96887
96893
|
"flex-direction-col",
|
package/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { cvaMerge } from '@trackunit/css-class-variance-utilities';
|
|
3
|
-
import { Spinner, Text, SkeletonLines } from '@trackunit/react-components';
|
|
3
|
+
import { Spinner, Text, SkeletonLines, useHover } from '@trackunit/react-components';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import React__default, { PureComponent } from 'react';
|
|
6
6
|
import { DEFAULT_CHART_COLORS } from '@trackunit/ui-design-tokens';
|
|
@@ -96805,57 +96805,63 @@ const LegendItem = ({ className, label, disabled, selected, onClick, color, data
|
|
|
96805
96805
|
* @param {PieChartProps} props - The props for the Chart component
|
|
96806
96806
|
* @returns {JSX.Element} Chart component
|
|
96807
96807
|
*/
|
|
96808
|
-
const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) =>
|
|
96809
|
-
|
|
96810
|
-
|
|
96811
|
-
|
|
96812
|
-
|
|
96813
|
-
|
|
96814
|
-
|
|
96815
|
-
|
|
96816
|
-
|
|
96817
|
-
|
|
96818
|
-
|
|
96819
|
-
},
|
|
96820
|
-
series: [
|
|
96821
|
-
{
|
|
96822
|
-
type: "pie",
|
|
96823
|
-
radius: ["50%", "75%"],
|
|
96824
|
-
center: ["50%", "50%"],
|
|
96825
|
-
minAngle: 10,
|
|
96826
|
-
selectedOffset: 8,
|
|
96827
|
-
itemStyle: {
|
|
96828
|
-
borderColor: "#ffffff",
|
|
96829
|
-
borderWidth: 2,
|
|
96830
|
-
},
|
|
96831
|
-
avoidLabelOverlap: false,
|
|
96832
|
-
label: {
|
|
96808
|
+
const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
|
|
96809
|
+
var _a;
|
|
96810
|
+
const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0; }).reduce((a, b) => a + b, 0)) !== null && _a !== void 0 ? _a : 0;
|
|
96811
|
+
const { hovering, onMouseEnter, onMouseLeave } = useHover({ debounced: true });
|
|
96812
|
+
return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsx("div", { children: size === "full" && (jsx("div", { 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("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsx(Chart, { dataTestId: "pie-chart", showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 }, onClick: evt => {
|
|
96813
|
+
const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
|
|
96814
|
+
if (onClick && clickedEntry) {
|
|
96815
|
+
onClick(clickedEntry);
|
|
96816
|
+
}
|
|
96817
|
+
}, options: {
|
|
96818
|
+
legend: {
|
|
96833
96819
|
show: false,
|
|
96834
|
-
position: "center",
|
|
96835
|
-
fontSize: "18",
|
|
96836
|
-
fontWeight: "bold",
|
|
96837
96820
|
},
|
|
96838
|
-
|
|
96839
|
-
label: {
|
|
96840
|
-
show: true,
|
|
96841
|
-
formatter: "{c}",
|
|
96842
|
-
},
|
|
96843
|
-
},
|
|
96844
|
-
labelLine: {
|
|
96821
|
+
tooltip: {
|
|
96845
96822
|
show: false,
|
|
96846
96823
|
},
|
|
96847
|
-
|
|
96848
|
-
|
|
96849
|
-
|
|
96850
|
-
|
|
96851
|
-
|
|
96852
|
-
|
|
96853
|
-
|
|
96854
|
-
|
|
96855
|
-
|
|
96856
|
-
|
|
96857
|
-
|
|
96858
|
-
|
|
96824
|
+
series: [
|
|
96825
|
+
{
|
|
96826
|
+
type: "pie",
|
|
96827
|
+
radius: ["50%", "75%"],
|
|
96828
|
+
center: ["50%", "50%"],
|
|
96829
|
+
minAngle: 10,
|
|
96830
|
+
selectedOffset: 8,
|
|
96831
|
+
itemStyle: {
|
|
96832
|
+
borderColor: "#ffffff",
|
|
96833
|
+
borderWidth: 2,
|
|
96834
|
+
},
|
|
96835
|
+
avoidLabelOverlap: false,
|
|
96836
|
+
label: {
|
|
96837
|
+
show: !hovering,
|
|
96838
|
+
position: "center",
|
|
96839
|
+
fontSize: size === "full" ? 18 : 12,
|
|
96840
|
+
fontWeight: "bold",
|
|
96841
|
+
formatter: totalCount.toString(),
|
|
96842
|
+
},
|
|
96843
|
+
emphasis: {
|
|
96844
|
+
label: {
|
|
96845
|
+
show: hovering,
|
|
96846
|
+
formatter: "{c}",
|
|
96847
|
+
},
|
|
96848
|
+
},
|
|
96849
|
+
labelLine: {
|
|
96850
|
+
show: false,
|
|
96851
|
+
},
|
|
96852
|
+
data: data === null || data === void 0 ? void 0 : data.map(item => {
|
|
96853
|
+
var _a;
|
|
96854
|
+
return ({
|
|
96855
|
+
id: item.id,
|
|
96856
|
+
name: item.name,
|
|
96857
|
+
value: (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0,
|
|
96858
|
+
itemStyle: { color: item.color },
|
|
96859
|
+
});
|
|
96860
|
+
}),
|
|
96861
|
+
},
|
|
96862
|
+
],
|
|
96863
|
+
} }) })] }));
|
|
96864
|
+
};
|
|
96859
96865
|
const cvaChartRoot = cvaMerge([
|
|
96860
96866
|
"flex",
|
|
96861
96867
|
"flex-direction-col",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-chart-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.99",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"@trackunit/css-class-variance-utilities": "0.0.12",
|
|
11
|
-
"@trackunit/react-components": "0.1.
|
|
11
|
+
"@trackunit/react-components": "0.1.154",
|
|
12
12
|
"@trackunit/ui-design-tokens": "0.0.75",
|
|
13
13
|
"echarts": "5.4.0",
|
|
14
14
|
"echarts-for-react": "3.0.2",
|