@trackunit/react-chart-components 0.0.299 → 0.0.300
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 +11 -11
- package/index.esm.js +11 -11
- package/package.json +1 -1
- package/src/LegendItem/LegendItem.d.ts +3 -3
- package/src/PieChart/PieChart.d.ts +6 -6
package/index.cjs.js
CHANGED
|
@@ -43,26 +43,26 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
|
|
|
43
43
|
if (mouseMoveChart !== undefined) {
|
|
44
44
|
values.mouseMove = (event) => {
|
|
45
45
|
var _a;
|
|
46
|
-
mouseMoveChart(event, (_a = echartsRef
|
|
46
|
+
mouseMoveChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
|
|
47
47
|
};
|
|
48
48
|
}
|
|
49
49
|
if (mouseOverChart !== undefined) {
|
|
50
50
|
values.mouseOver = (event) => {
|
|
51
51
|
var _a;
|
|
52
|
-
mouseOverChart(event, (_a = echartsRef
|
|
52
|
+
mouseOverChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
55
|
if (mouseOutChart !== undefined) {
|
|
56
56
|
values.mouseOut = (event) => {
|
|
57
57
|
var _a;
|
|
58
|
-
mouseOutChart(event, (_a = echartsRef
|
|
58
|
+
mouseOutChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
|
|
59
59
|
};
|
|
60
60
|
}
|
|
61
61
|
return values;
|
|
62
62
|
}, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOutChart, mouseOverChart]);
|
|
63
63
|
react.useEffect(() => {
|
|
64
64
|
var _a;
|
|
65
|
-
const instance = (_a = echartsRef
|
|
65
|
+
const instance = (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
|
|
66
66
|
if (instance && onClick) {
|
|
67
67
|
instance.on("click", onClick);
|
|
68
68
|
}
|
|
@@ -72,7 +72,7 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
|
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
74
|
}, [onClick, echartsRef]);
|
|
75
|
-
return (jsxRuntime.jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, 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%" }, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text)
|
|
75
|
+
return (jsxRuntime.jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, 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%" }, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart__default["default"], { className: className, notMerge: !merge, onChartReady: onChartReady, onEvents: eventHandlers, option: options !== null && options !== void 0 ? options : unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
|
|
76
76
|
};
|
|
77
77
|
const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
|
|
78
78
|
const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
|
|
@@ -161,7 +161,7 @@ const cvaKpiContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col",
|
|
|
161
161
|
* @returns {JSX.Element} Kpi component
|
|
162
162
|
*/
|
|
163
163
|
const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
|
|
164
|
-
return (jsxRuntime.jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart
|
|
164
|
+
return (jsxRuntime.jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart ? (jsxRuntime.jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 20 }), jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 50 })] })) : (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxRuntime.jsxs("span", { className: cvaKpiCountContainer(), children: [jsxRuntime.jsx("span", { className: cvaKpiCount(), children: typeof count === "number" ? count : "=" }), suffix ? (jsxRuntime.jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsxRuntime.jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
|
|
165
165
|
};
|
|
166
166
|
|
|
167
167
|
const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
|
|
@@ -210,12 +210,12 @@ const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-3", "h-3",
|
|
|
210
210
|
/**
|
|
211
211
|
* The LegendItem component is used to show form legends.
|
|
212
212
|
*
|
|
213
|
-
* @param {
|
|
213
|
+
* @param {LegendItem} props - The props for the LegendItem component
|
|
214
214
|
* @returns {JSX.Element} LegendItem component
|
|
215
215
|
*/
|
|
216
216
|
const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
|
|
217
217
|
const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
|
|
218
|
-
return (jsxRuntime.jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, children: [jsxRuntime.jsx("div", { className: cvaLegendItemIndicator({ selected }), style: { backgroundColor: color } }), label
|
|
218
|
+
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] }));
|
|
219
219
|
};
|
|
220
220
|
|
|
221
221
|
/**
|
|
@@ -226,9 +226,9 @@ const LegendItem = ({ className, label, disabled, selected, onClick, color, data
|
|
|
226
226
|
*/
|
|
227
227
|
const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
|
|
228
228
|
var _a;
|
|
229
|
-
const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item
|
|
229
|
+
const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item.count) !== null && _a !== void 0 ? _a : 0; }).reduce((a, b) => a + b, 0)) !== null && _a !== void 0 ? _a : 0;
|
|
230
230
|
const { hovering, onMouseEnter, onMouseLeave } = reactComponents.useHover({ debounced: true });
|
|
231
|
-
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, { color: item.color, dataTestId: `legend-${item.id}`, label:
|
|
231
|
+
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, { 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 => {
|
|
232
232
|
const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
|
|
233
233
|
if (onClick && clickedEntry) {
|
|
234
234
|
onClick(clickedEntry);
|
|
@@ -273,7 +273,7 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
|
|
|
273
273
|
return ({
|
|
274
274
|
id: item.id,
|
|
275
275
|
name: item.name,
|
|
276
|
-
value: (_a = item
|
|
276
|
+
value: (_a = item.count) !== null && _a !== void 0 ? _a : 0,
|
|
277
277
|
itemStyle: { color: item.color },
|
|
278
278
|
});
|
|
279
279
|
}),
|
package/index.esm.js
CHANGED
|
@@ -35,26 +35,26 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
|
|
|
35
35
|
if (mouseMoveChart !== undefined) {
|
|
36
36
|
values.mouseMove = (event) => {
|
|
37
37
|
var _a;
|
|
38
|
-
mouseMoveChart(event, (_a = echartsRef
|
|
38
|
+
mouseMoveChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
|
|
39
39
|
};
|
|
40
40
|
}
|
|
41
41
|
if (mouseOverChart !== undefined) {
|
|
42
42
|
values.mouseOver = (event) => {
|
|
43
43
|
var _a;
|
|
44
|
-
mouseOverChart(event, (_a = echartsRef
|
|
44
|
+
mouseOverChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
|
|
45
45
|
};
|
|
46
46
|
}
|
|
47
47
|
if (mouseOutChart !== undefined) {
|
|
48
48
|
values.mouseOut = (event) => {
|
|
49
49
|
var _a;
|
|
50
|
-
mouseOutChart(event, (_a = echartsRef
|
|
50
|
+
mouseOutChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
53
|
return values;
|
|
54
54
|
}, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOutChart, mouseOverChart]);
|
|
55
55
|
useEffect(() => {
|
|
56
56
|
var _a;
|
|
57
|
-
const instance = (_a = echartsRef
|
|
57
|
+
const instance = (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
|
|
58
58
|
if (instance && onClick) {
|
|
59
59
|
instance.on("click", onClick);
|
|
60
60
|
}
|
|
@@ -64,7 +64,7 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
|
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
66
|
}, [onClick, echartsRef]);
|
|
67
|
-
return (jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, 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%" }, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text)
|
|
67
|
+
return (jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, 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%" }, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) ? (jsx(Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxs(Fragment, { children: [jsx(EChart, { className: className, notMerge: !merge, onChartReady: onChartReady, onEvents: eventHandlers, option: options !== null && options !== void 0 ? options : unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
|
|
68
68
|
};
|
|
69
69
|
const cvaChartContainer = cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
|
|
70
70
|
const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
|
|
@@ -153,7 +153,7 @@ const cvaKpiContainer = cvaMerge(["flex", "flex-col", "items-baseline"], {
|
|
|
153
153
|
* @returns {JSX.Element} Kpi component
|
|
154
154
|
*/
|
|
155
155
|
const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
|
|
156
|
-
return (jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart
|
|
156
|
+
return (jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart ? (jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] })) : (jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxs("span", { className: cvaKpiCountContainer(), children: [jsx("span", { className: cvaKpiCount(), children: typeof count === "number" ? count : "=" }), suffix ? (jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
|
|
157
157
|
};
|
|
158
158
|
|
|
159
159
|
const cvaLegendItem = cvaMerge([
|
|
@@ -202,12 +202,12 @@ const cvaLegendItemIndicator = cvaMerge(["w-3", "h-3", "rounded-[50%]"], {
|
|
|
202
202
|
/**
|
|
203
203
|
* The LegendItem component is used to show form legends.
|
|
204
204
|
*
|
|
205
|
-
* @param {
|
|
205
|
+
* @param {LegendItem} props - The props for the LegendItem component
|
|
206
206
|
* @returns {JSX.Element} LegendItem component
|
|
207
207
|
*/
|
|
208
208
|
const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
|
|
209
209
|
const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
|
|
210
|
-
return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, children: [jsx("div", { className: cvaLegendItemIndicator({ selected }), style: { backgroundColor: color } }), label
|
|
210
|
+
return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, children: [jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), label ? jsx("p", { children: label }) : null] }));
|
|
211
211
|
};
|
|
212
212
|
|
|
213
213
|
/**
|
|
@@ -218,9 +218,9 @@ const LegendItem = ({ className, label, disabled, selected, onClick, color, data
|
|
|
218
218
|
*/
|
|
219
219
|
const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
|
|
220
220
|
var _a;
|
|
221
|
-
const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item
|
|
221
|
+
const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item.count) !== null && _a !== void 0 ? _a : 0; }).reduce((a, b) => a + b, 0)) !== null && _a !== void 0 ? _a : 0;
|
|
222
222
|
const { hovering, onMouseEnter, onMouseLeave } = useHover({ debounced: true });
|
|
223
|
-
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, { color: item.color, dataTestId: `legend-${item.id}`, label:
|
|
223
|
+
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, { 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))) })) }), jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsx(Chart, { dataTestId: "pie-chart", onClick: evt => {
|
|
224
224
|
const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
|
|
225
225
|
if (onClick && clickedEntry) {
|
|
226
226
|
onClick(clickedEntry);
|
|
@@ -265,7 +265,7 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
|
|
|
265
265
|
return ({
|
|
266
266
|
id: item.id,
|
|
267
267
|
name: item.name,
|
|
268
|
-
value: (_a = item
|
|
268
|
+
value: (_a = item.count) !== null && _a !== void 0 ? _a : 0,
|
|
269
269
|
itemStyle: { color: item.color },
|
|
270
270
|
});
|
|
271
271
|
}),
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export interface
|
|
2
|
+
export interface LegendItemProps {
|
|
3
3
|
label?: string;
|
|
4
4
|
selected?: boolean;
|
|
5
5
|
disabled?: boolean;
|
|
@@ -11,7 +11,7 @@ export interface ILegendItem {
|
|
|
11
11
|
/**
|
|
12
12
|
* The LegendItem component is used to show form legends.
|
|
13
13
|
*
|
|
14
|
-
* @param {
|
|
14
|
+
* @param {LegendItem} props - The props for the LegendItem component
|
|
15
15
|
* @returns {JSX.Element} LegendItem component
|
|
16
16
|
*/
|
|
17
|
-
export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }:
|
|
17
|
+
export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }: LegendItemProps) => JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CommonProps } from "@trackunit/react-components";
|
|
3
3
|
type Size = "compact" | "full";
|
|
4
|
-
export interface ChartData<
|
|
4
|
+
export interface ChartData<TProps extends object = object> {
|
|
5
5
|
/**
|
|
6
6
|
* Unique ID for this entry. Not visible for the user
|
|
7
7
|
*/
|
|
@@ -25,17 +25,17 @@ export interface ChartData<T extends object = object> {
|
|
|
25
25
|
/**
|
|
26
26
|
* Supply the original object that this chart data item was constructed from. It'll be available on callbacks
|
|
27
27
|
*/
|
|
28
|
-
original?:
|
|
28
|
+
original?: TProps;
|
|
29
29
|
}
|
|
30
|
-
export interface PieChartProps<
|
|
30
|
+
export interface PieChartProps<TProps extends object> extends CommonProps {
|
|
31
31
|
/**
|
|
32
32
|
* Array of data points to show
|
|
33
33
|
*/
|
|
34
|
-
data: ChartData<
|
|
34
|
+
data: ChartData<TProps>[] | undefined;
|
|
35
35
|
/**
|
|
36
36
|
* onClick handler which includes the data object clicked on
|
|
37
37
|
*/
|
|
38
|
-
onClick?: (data: ChartData<
|
|
38
|
+
onClick?: (data: ChartData<TProps>) => void;
|
|
39
39
|
/**
|
|
40
40
|
* Show chart as loading
|
|
41
41
|
*/
|
|
@@ -51,5 +51,5 @@ export interface PieChartProps<T extends object> extends CommonProps {
|
|
|
51
51
|
* @param {PieChartProps} props - The props for the Chart component
|
|
52
52
|
* @returns {JSX.Element} Chart component
|
|
53
53
|
*/
|
|
54
|
-
export declare const PieChart: <
|
|
54
|
+
export declare const PieChart: <TProps extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<TProps>) => JSX.Element;
|
|
55
55
|
export {};
|