@mamrp/components 1.7.28 → 1.7.31
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/dist/charts/index.d.mts +13 -79
- package/dist/charts/index.d.ts +13 -79
- package/dist/charts/index.js +180 -76
- package/dist/charts/index.js.map +1 -1
- package/dist/charts/index.mjs +182 -77
- package/dist/charts/index.mjs.map +1 -1
- package/dist/date-pickers/index.d.mts +13 -0
- package/dist/date-pickers/index.d.ts +13 -0
- package/dist/date-pickers/index.js +3 -1
- package/dist/date-pickers/index.js.map +1 -1
- package/dist/date-pickers/index.mjs +3 -1
- package/dist/date-pickers/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/charts/index.d.mts
CHANGED
|
@@ -1,88 +1,22 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
+
interface Dataset {
|
|
4
|
+
label: string;
|
|
5
|
+
data: (number | null)[];
|
|
6
|
+
backgroundColor: string;
|
|
7
|
+
borderColor?: string;
|
|
8
|
+
borderWidth?: number;
|
|
9
|
+
type?: "line";
|
|
10
|
+
order?: number;
|
|
11
|
+
tension?: number;
|
|
12
|
+
pointRadius?: number;
|
|
13
|
+
fill?: boolean;
|
|
14
|
+
}
|
|
3
15
|
interface Props$1 {
|
|
4
16
|
labels: string[];
|
|
5
|
-
datasets:
|
|
6
|
-
label: string;
|
|
7
|
-
data: (number | null)[];
|
|
8
|
-
backgroundColor: string;
|
|
9
|
-
borderColor?: string;
|
|
10
|
-
borderWidth?: number;
|
|
11
|
-
type?: "line";
|
|
12
|
-
order?: number;
|
|
13
|
-
tension?: number;
|
|
14
|
-
pointRadius?: number;
|
|
15
|
-
fill?: boolean;
|
|
16
|
-
}[];
|
|
17
|
+
datasets: Dataset[];
|
|
17
18
|
height?: number;
|
|
18
19
|
}
|
|
19
|
-
/**
|
|
20
|
-
* 📊 BarChart — کامپوننت نمودار میلهای (Bar/Combo)
|
|
21
|
-
*
|
|
22
|
-
* @component BarChart
|
|
23
|
-
*
|
|
24
|
-
* @param {string[]} labels - آرایهای از برچسبها برای محور افقی (X).
|
|
25
|
-
* @param {Array<{
|
|
26
|
-
* label: string,
|
|
27
|
-
* data: number[],
|
|
28
|
-
* backgroundColor: string,
|
|
29
|
-
* borderColor?: string,
|
|
30
|
-
* borderWidth?: number,
|
|
31
|
-
* type?: "line",
|
|
32
|
-
* order?: number,
|
|
33
|
-
* tension?: number,
|
|
34
|
-
* pointRadius?: number,
|
|
35
|
-
* fill?: boolean
|
|
36
|
-
* }>} datasets - آرایهای از آبجکتهای داده برای هر سری نمودار.
|
|
37
|
-
* - label: عنوان دادهها (نمایش در legend)
|
|
38
|
-
* - data: آرایهای از مقادیر هر سری
|
|
39
|
-
* - backgroundColor: رنگ میله یا خط
|
|
40
|
-
* - borderColor: (اختیاری) رنگ خط دور میله یا خط
|
|
41
|
-
* - borderWidth: (اختیاری) ضخامت خط دور میله یا خط
|
|
42
|
-
* - type: (اختیاری) اگر "line" باشد، سری به صورت خطی نمایش داده میشود (نمودار ترکیبی)
|
|
43
|
-
* - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار میگیرد)
|
|
44
|
-
* - tension: (اختیاری) میزان خمیدگی خط (برای سریهای خطی)
|
|
45
|
-
* - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سریهای خطی)
|
|
46
|
-
* - fill: (اختیاری) پر شدن زیر خط (برای سریهای خطی)
|
|
47
|
-
*
|
|
48
|
-
* @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)
|
|
49
|
-
*
|
|
50
|
-
* @description
|
|
51
|
-
* این کامپوننت یک نمودار میلهای (Bar) یا ترکیبی Bar/Line با قابلیت شخصیسازی کامل است.
|
|
52
|
-
* - پشتیبانی از فونت وزیر و راستچین
|
|
53
|
-
* - ریسپانسیو و مناسب صفحات فارسی
|
|
54
|
-
* - امکان نمایش چند سری داده به صورت میلهای و خطی همزمان (Combo)
|
|
55
|
-
* - شخصیسازی رنگ، ضخامت، ترتیب و استایل هر سری
|
|
56
|
-
*
|
|
57
|
-
* @returns {JSX.Element} یک نمودار میلهای یا ترکیبی با دادههای ورودی
|
|
58
|
-
*
|
|
59
|
-
* @example
|
|
60
|
-
* ```jsx
|
|
61
|
-
* <BarChart
|
|
62
|
-
* labels={["شنبه", "یکشنبه", "دوشنبه"]}
|
|
63
|
-
* datasets={[
|
|
64
|
-
* {
|
|
65
|
-
* label: "فروش",
|
|
66
|
-
* data: [10, 20, 15],
|
|
67
|
-
* backgroundColor: "rgba(75,192,192,0.7)",
|
|
68
|
-
* },
|
|
69
|
-
* {
|
|
70
|
-
* label: "میانگین",
|
|
71
|
-
* data: [12, 18, 14],
|
|
72
|
-
* borderColor: "red",
|
|
73
|
-
* backgroundColor: "transparent",
|
|
74
|
-
* type: "line",
|
|
75
|
-
* order: 0,
|
|
76
|
-
* borderWidth: 3,
|
|
77
|
-
* tension: 0.4,
|
|
78
|
-
* pointRadius: 4,
|
|
79
|
-
* fill: false,
|
|
80
|
-
* },
|
|
81
|
-
* ]}
|
|
82
|
-
* height={400}
|
|
83
|
-
* />
|
|
84
|
-
* ```
|
|
85
|
-
*/
|
|
86
20
|
declare function BarChart({ labels, datasets, height }: Props$1): React.JSX.Element;
|
|
87
21
|
|
|
88
22
|
interface Props {
|
package/dist/charts/index.d.ts
CHANGED
|
@@ -1,88 +1,22 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
+
interface Dataset {
|
|
4
|
+
label: string;
|
|
5
|
+
data: (number | null)[];
|
|
6
|
+
backgroundColor: string;
|
|
7
|
+
borderColor?: string;
|
|
8
|
+
borderWidth?: number;
|
|
9
|
+
type?: "line";
|
|
10
|
+
order?: number;
|
|
11
|
+
tension?: number;
|
|
12
|
+
pointRadius?: number;
|
|
13
|
+
fill?: boolean;
|
|
14
|
+
}
|
|
3
15
|
interface Props$1 {
|
|
4
16
|
labels: string[];
|
|
5
|
-
datasets:
|
|
6
|
-
label: string;
|
|
7
|
-
data: (number | null)[];
|
|
8
|
-
backgroundColor: string;
|
|
9
|
-
borderColor?: string;
|
|
10
|
-
borderWidth?: number;
|
|
11
|
-
type?: "line";
|
|
12
|
-
order?: number;
|
|
13
|
-
tension?: number;
|
|
14
|
-
pointRadius?: number;
|
|
15
|
-
fill?: boolean;
|
|
16
|
-
}[];
|
|
17
|
+
datasets: Dataset[];
|
|
17
18
|
height?: number;
|
|
18
19
|
}
|
|
19
|
-
/**
|
|
20
|
-
* 📊 BarChart — کامپوننت نمودار میلهای (Bar/Combo)
|
|
21
|
-
*
|
|
22
|
-
* @component BarChart
|
|
23
|
-
*
|
|
24
|
-
* @param {string[]} labels - آرایهای از برچسبها برای محور افقی (X).
|
|
25
|
-
* @param {Array<{
|
|
26
|
-
* label: string,
|
|
27
|
-
* data: number[],
|
|
28
|
-
* backgroundColor: string,
|
|
29
|
-
* borderColor?: string,
|
|
30
|
-
* borderWidth?: number,
|
|
31
|
-
* type?: "line",
|
|
32
|
-
* order?: number,
|
|
33
|
-
* tension?: number,
|
|
34
|
-
* pointRadius?: number,
|
|
35
|
-
* fill?: boolean
|
|
36
|
-
* }>} datasets - آرایهای از آبجکتهای داده برای هر سری نمودار.
|
|
37
|
-
* - label: عنوان دادهها (نمایش در legend)
|
|
38
|
-
* - data: آرایهای از مقادیر هر سری
|
|
39
|
-
* - backgroundColor: رنگ میله یا خط
|
|
40
|
-
* - borderColor: (اختیاری) رنگ خط دور میله یا خط
|
|
41
|
-
* - borderWidth: (اختیاری) ضخامت خط دور میله یا خط
|
|
42
|
-
* - type: (اختیاری) اگر "line" باشد، سری به صورت خطی نمایش داده میشود (نمودار ترکیبی)
|
|
43
|
-
* - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار میگیرد)
|
|
44
|
-
* - tension: (اختیاری) میزان خمیدگی خط (برای سریهای خطی)
|
|
45
|
-
* - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سریهای خطی)
|
|
46
|
-
* - fill: (اختیاری) پر شدن زیر خط (برای سریهای خطی)
|
|
47
|
-
*
|
|
48
|
-
* @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)
|
|
49
|
-
*
|
|
50
|
-
* @description
|
|
51
|
-
* این کامپوننت یک نمودار میلهای (Bar) یا ترکیبی Bar/Line با قابلیت شخصیسازی کامل است.
|
|
52
|
-
* - پشتیبانی از فونت وزیر و راستچین
|
|
53
|
-
* - ریسپانسیو و مناسب صفحات فارسی
|
|
54
|
-
* - امکان نمایش چند سری داده به صورت میلهای و خطی همزمان (Combo)
|
|
55
|
-
* - شخصیسازی رنگ، ضخامت، ترتیب و استایل هر سری
|
|
56
|
-
*
|
|
57
|
-
* @returns {JSX.Element} یک نمودار میلهای یا ترکیبی با دادههای ورودی
|
|
58
|
-
*
|
|
59
|
-
* @example
|
|
60
|
-
* ```jsx
|
|
61
|
-
* <BarChart
|
|
62
|
-
* labels={["شنبه", "یکشنبه", "دوشنبه"]}
|
|
63
|
-
* datasets={[
|
|
64
|
-
* {
|
|
65
|
-
* label: "فروش",
|
|
66
|
-
* data: [10, 20, 15],
|
|
67
|
-
* backgroundColor: "rgba(75,192,192,0.7)",
|
|
68
|
-
* },
|
|
69
|
-
* {
|
|
70
|
-
* label: "میانگین",
|
|
71
|
-
* data: [12, 18, 14],
|
|
72
|
-
* borderColor: "red",
|
|
73
|
-
* backgroundColor: "transparent",
|
|
74
|
-
* type: "line",
|
|
75
|
-
* order: 0,
|
|
76
|
-
* borderWidth: 3,
|
|
77
|
-
* tension: 0.4,
|
|
78
|
-
* pointRadius: 4,
|
|
79
|
-
* fill: false,
|
|
80
|
-
* },
|
|
81
|
-
* ]}
|
|
82
|
-
* height={400}
|
|
83
|
-
* />
|
|
84
|
-
* ```
|
|
85
|
-
*/
|
|
86
20
|
declare function BarChart({ labels, datasets, height }: Props$1): React.JSX.Element;
|
|
87
21
|
|
|
88
22
|
interface Props {
|
package/dist/charts/index.js
CHANGED
|
@@ -39,12 +39,14 @@ module.exports = __toCommonJS(charts_exports);
|
|
|
39
39
|
var React = __toESM(require("react"));
|
|
40
40
|
|
|
41
41
|
// src/charts/bar/index.tsx
|
|
42
|
+
var import_react = require("react");
|
|
42
43
|
var import_react_chartjs_2 = require("react-chartjs-2");
|
|
43
44
|
var import_chart = require("chart.js");
|
|
44
45
|
var import_material = require("@mui/material");
|
|
45
46
|
import_chart.Chart.register(
|
|
46
47
|
import_chart.CategoryScale,
|
|
47
48
|
import_chart.LinearScale,
|
|
49
|
+
import_chart.LogarithmicScale,
|
|
48
50
|
import_chart.BarElement,
|
|
49
51
|
import_chart.LineElement,
|
|
50
52
|
import_chart.PointElement,
|
|
@@ -54,76 +56,119 @@ import_chart.Chart.register(
|
|
|
54
56
|
import_chart.LineController
|
|
55
57
|
);
|
|
56
58
|
function BarChart({ labels, datasets, height }) {
|
|
59
|
+
const chartRef = (0, import_react.useRef)(null);
|
|
60
|
+
const [hiddenIndices, setHiddenIndices] = (0, import_react.useState)(/* @__PURE__ */ new Set());
|
|
61
|
+
const visibleDatasets = datasets.filter((_, i) => !hiddenIndices.has(i));
|
|
62
|
+
const allValues = [].concat(
|
|
63
|
+
...visibleDatasets.map(
|
|
64
|
+
(ds) => ds.data.filter((v) => v !== null)
|
|
65
|
+
)
|
|
66
|
+
);
|
|
67
|
+
const minValue = allValues.length ? Math.min(...allValues) : 0;
|
|
68
|
+
const maxValue = allValues.length ? Math.max(...allValues) : 1;
|
|
69
|
+
const useLogScale = maxValue / (minValue || 1) > 50;
|
|
70
|
+
const scaleType = useLogScale ? "logarithmic" : "linear";
|
|
71
|
+
let yMin = minValue;
|
|
72
|
+
let yMax = maxValue;
|
|
73
|
+
let stepSize = 1;
|
|
74
|
+
if (scaleType === "linear") {
|
|
75
|
+
const range = yMax - yMin;
|
|
76
|
+
const targetLines = 8;
|
|
77
|
+
let rawStep = range / targetLines;
|
|
78
|
+
const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
|
|
79
|
+
const normalized = rawStep / magnitude;
|
|
80
|
+
if (normalized <= 1) stepSize = 1 * magnitude;
|
|
81
|
+
else if (normalized <= 2) stepSize = 2 * magnitude;
|
|
82
|
+
else if (normalized <= 5) stepSize = 5 * magnitude;
|
|
83
|
+
else stepSize = 10 * magnitude;
|
|
84
|
+
yMin = Math.floor(yMin / stepSize) * stepSize;
|
|
85
|
+
yMax = Math.ceil(yMax / stepSize) * stepSize;
|
|
86
|
+
} else {
|
|
87
|
+
yMin = Math.max(minValue, 1);
|
|
88
|
+
yMax = maxValue;
|
|
89
|
+
stepSize = void 0;
|
|
90
|
+
}
|
|
57
91
|
const options = {
|
|
58
92
|
responsive: true,
|
|
59
93
|
maintainAspectRatio: false,
|
|
94
|
+
animation: { duration: 500 },
|
|
60
95
|
scales: {
|
|
61
96
|
y: {
|
|
97
|
+
type: scaleType,
|
|
98
|
+
min: yMin,
|
|
99
|
+
max: yMax,
|
|
62
100
|
ticks: {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
101
|
+
...stepSize !== void 0 ? { stepSize } : {},
|
|
102
|
+
callback: (value) => {
|
|
103
|
+
const num = Number(value);
|
|
104
|
+
if (scaleType === "logarithmic") return num.toLocaleString();
|
|
105
|
+
if (num >= 1e3) return num.toLocaleString();
|
|
106
|
+
if (stepSize && stepSize < 1) return num.toFixed(2);
|
|
107
|
+
return num;
|
|
108
|
+
},
|
|
109
|
+
font: { family: "'Vazir', sans-serif", size: 14 }
|
|
67
110
|
}
|
|
68
111
|
},
|
|
69
112
|
x: {
|
|
70
113
|
ticks: {
|
|
71
114
|
autoSkip: false,
|
|
72
|
-
font: {
|
|
73
|
-
family: "'Vazir', sans-serif",
|
|
74
|
-
size: 13
|
|
75
|
-
}
|
|
115
|
+
font: { family: "'Vazir', sans-serif", size: 13 }
|
|
76
116
|
}
|
|
77
117
|
}
|
|
78
118
|
},
|
|
79
119
|
plugins: {
|
|
80
|
-
datalabels: {
|
|
81
|
-
display: false
|
|
82
|
-
// ← غیرفعال
|
|
83
|
-
},
|
|
84
|
-
tooltip: {
|
|
85
|
-
bodyFont: {
|
|
86
|
-
family: "'Vazir', sans-serif",
|
|
87
|
-
size: 14
|
|
88
|
-
},
|
|
89
|
-
titleFont: {
|
|
90
|
-
family: "'Vazir', sans-serif",
|
|
91
|
-
size: 16
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
120
|
legend: {
|
|
95
121
|
labels: {
|
|
96
|
-
generateLabels: function(chart) {
|
|
97
|
-
const labels2 = import_chart.Chart.defaults.plugins.legend.labels.generateLabels(chart);
|
|
98
|
-
return labels2.map((label) => ({
|
|
99
|
-
...label,
|
|
100
|
-
text: " " + label.text + " ",
|
|
101
|
-
boxWidth: 40,
|
|
102
|
-
boxHeight: 20
|
|
103
|
-
}));
|
|
104
|
-
},
|
|
105
|
-
padding: 15,
|
|
106
122
|
usePointStyle: true,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
123
|
+
// دایرهای
|
|
124
|
+
font: { size: 16, family: "'Vazir', sans-serif" }
|
|
125
|
+
},
|
|
126
|
+
onClick: (e, legendItem, legend) => {
|
|
127
|
+
const index = legendItem.datasetIndex;
|
|
128
|
+
const newHidden = new Set(hiddenIndices);
|
|
129
|
+
if (hiddenIndices.has(index)) newHidden.delete(index);
|
|
130
|
+
else newHidden.add(index);
|
|
131
|
+
setHiddenIndices(newHidden);
|
|
113
132
|
}
|
|
114
|
-
}
|
|
133
|
+
},
|
|
134
|
+
tooltip: {
|
|
135
|
+
bodyFont: { family: "'Vazir', sans-serif", size: 14 },
|
|
136
|
+
titleFont: { family: "'Vazir', sans-serif", size: 16 }
|
|
137
|
+
},
|
|
138
|
+
datalabels: { display: false }
|
|
115
139
|
}
|
|
116
140
|
};
|
|
117
|
-
|
|
141
|
+
import_chart.Chart.defaults.elements.point.radius = 5;
|
|
142
|
+
import_chart.Chart.defaults.elements.point.hoverRadius = 9;
|
|
143
|
+
import_chart.Chart.defaults.elements.point.borderWidth = 0.2;
|
|
144
|
+
import_chart.Chart.defaults.elements.point.backgroundColor = "red";
|
|
145
|
+
import_chart.Chart.defaults.elements.point.borderColor = "black";
|
|
146
|
+
return /* @__PURE__ */ React.createElement(import_material.Box, { height: height ?? 600 }, /* @__PURE__ */ React.createElement(
|
|
147
|
+
import_react_chartjs_2.Chart,
|
|
148
|
+
{
|
|
149
|
+
ref: chartRef,
|
|
150
|
+
type: "bar",
|
|
151
|
+
data: {
|
|
152
|
+
labels,
|
|
153
|
+
datasets: datasets.map((ds, i) => ({
|
|
154
|
+
...ds,
|
|
155
|
+
hidden: hiddenIndices.has(i)
|
|
156
|
+
}))
|
|
157
|
+
},
|
|
158
|
+
options
|
|
159
|
+
}
|
|
160
|
+
));
|
|
118
161
|
}
|
|
119
162
|
|
|
120
163
|
// src/charts/pie/index.tsx
|
|
121
164
|
var import_react_chartjs_22 = require("react-chartjs-2");
|
|
122
165
|
var import_chart2 = require("chart.js");
|
|
166
|
+
var import_react2 = require("react");
|
|
123
167
|
var import_material2 = require("@mui/material");
|
|
124
168
|
var import_image = __toESM(require("next/image"));
|
|
125
169
|
var import_chartjs_plugin_datalabels = __toESM(require("chartjs-plugin-datalabels"));
|
|
126
170
|
import_chart2.Chart.register(import_chart2.ArcElement, import_chart2.Tooltip, import_chart2.Legend, import_chartjs_plugin_datalabels.default);
|
|
171
|
+
import_chart2.Chart.defaults.font.family = "Vazir, sans-serif";
|
|
127
172
|
function PieChart({
|
|
128
173
|
labels,
|
|
129
174
|
datasets,
|
|
@@ -133,18 +178,83 @@ function PieChart({
|
|
|
133
178
|
showDataLabels = false,
|
|
134
179
|
showPercentage = false
|
|
135
180
|
}) {
|
|
136
|
-
const
|
|
181
|
+
const chartRef = (0, import_react2.useRef)(null);
|
|
182
|
+
const [dataLabels, setDataLabels] = (0, import_react2.useState)([]);
|
|
183
|
+
const containerRef = (0, import_react2.useRef)(null);
|
|
184
|
+
const calculateLabels = () => {
|
|
185
|
+
if (!showDataLabels || !chartRef.current || !containerRef.current) return;
|
|
186
|
+
const chart = chartRef.current;
|
|
187
|
+
const meta = chart.getDatasetMeta(0);
|
|
188
|
+
const data = chart.data.datasets[0].data;
|
|
189
|
+
const chartArea = chart.chartArea;
|
|
190
|
+
const visibleTotal = data.reduce((sum, val, index) => {
|
|
191
|
+
if (!meta.data[index] || meta.data[index].hidden !== true) {
|
|
192
|
+
return sum + val;
|
|
193
|
+
}
|
|
194
|
+
return sum;
|
|
195
|
+
}, 0);
|
|
196
|
+
const newLabels = [];
|
|
197
|
+
meta.data.forEach((arc, index) => {
|
|
198
|
+
if (arc.hidden) return;
|
|
199
|
+
const value = data[index];
|
|
200
|
+
if (value === 0) return;
|
|
201
|
+
const centerAngle = (arc.startAngle + arc.endAngle) / 2;
|
|
202
|
+
const midRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) * 0.65;
|
|
203
|
+
const x = arc.x - Math.cos(centerAngle) * midRadius;
|
|
204
|
+
const y = arc.y + Math.sin(centerAngle) * midRadius;
|
|
205
|
+
let text;
|
|
206
|
+
if (showPercentage) {
|
|
207
|
+
const percentage = (value / visibleTotal * 100).toFixed(1);
|
|
208
|
+
text = percentage + "%";
|
|
209
|
+
} else {
|
|
210
|
+
text = String(value);
|
|
211
|
+
}
|
|
212
|
+
newLabels.push({ x, y, text, opacity: 1 });
|
|
213
|
+
});
|
|
214
|
+
setDataLabels(newLabels);
|
|
215
|
+
};
|
|
216
|
+
(0, import_react2.useEffect)(() => {
|
|
217
|
+
if (!showDataLabels) {
|
|
218
|
+
setDataLabels([]);
|
|
219
|
+
return;
|
|
220
|
+
}
|
|
221
|
+
const timeout = setTimeout(() => {
|
|
222
|
+
calculateLabels();
|
|
223
|
+
}, 500);
|
|
224
|
+
return () => clearTimeout(timeout);
|
|
225
|
+
}, [datasets, showDataLabels, showPercentage]);
|
|
226
|
+
(0, import_react2.useEffect)(() => {
|
|
227
|
+
if (!chartRef.current || !showDataLabels) return;
|
|
228
|
+
const chart = chartRef.current;
|
|
229
|
+
const originalUpdate = chart.update.bind(chart);
|
|
230
|
+
chart.update = function(...args) {
|
|
231
|
+
setDataLabels((prev) => prev.map((l) => ({ ...l, opacity: 0 })));
|
|
232
|
+
originalUpdate(...args);
|
|
233
|
+
setTimeout(() => {
|
|
234
|
+
calculateLabels();
|
|
235
|
+
}, 250);
|
|
236
|
+
};
|
|
237
|
+
return () => {
|
|
238
|
+
chart.update = originalUpdate;
|
|
239
|
+
};
|
|
240
|
+
}, [showDataLabels, showPercentage]);
|
|
241
|
+
const options = (0, import_react2.useMemo)(() => ({
|
|
137
242
|
responsive: true,
|
|
138
243
|
maintainAspectRatio: false,
|
|
139
244
|
cutout: !disableLogo ? "59%" : "0%",
|
|
245
|
+
animation: {
|
|
246
|
+
animateRotate: true,
|
|
247
|
+
animateScale: true,
|
|
248
|
+
duration: 400
|
|
249
|
+
},
|
|
140
250
|
plugins: {
|
|
141
251
|
tooltip: {
|
|
142
252
|
bodyFont: {
|
|
143
|
-
family: "
|
|
253
|
+
family: "Vazir, sans-serif",
|
|
144
254
|
size: 14
|
|
145
255
|
},
|
|
146
256
|
titleFont: {
|
|
147
|
-
family: "
|
|
257
|
+
family: "Vazir, sans-serif",
|
|
148
258
|
size: 16
|
|
149
259
|
}
|
|
150
260
|
},
|
|
@@ -156,7 +266,7 @@ function PieChart({
|
|
|
156
266
|
// رنگ متن legend را نرمتر میکند
|
|
157
267
|
font: {
|
|
158
268
|
size: 16,
|
|
159
|
-
family: "
|
|
269
|
+
family: "Vazir, sans-serif"
|
|
160
270
|
},
|
|
161
271
|
boxWidth: 40,
|
|
162
272
|
paddingBottom: 10,
|
|
@@ -187,38 +297,11 @@ function PieChart({
|
|
|
187
297
|
}
|
|
188
298
|
},
|
|
189
299
|
datalabels: {
|
|
190
|
-
display:
|
|
191
|
-
|
|
192
|
-
},
|
|
193
|
-
color: "#fff",
|
|
194
|
-
font: {
|
|
195
|
-
size: 14,
|
|
196
|
-
weight: "bold",
|
|
197
|
-
family: "'Vazir', sans-serif"
|
|
198
|
-
},
|
|
199
|
-
anchor: "center",
|
|
200
|
-
// ← روی مرکز هر تکه
|
|
201
|
-
align: "center",
|
|
202
|
-
offset: 20,
|
|
203
|
-
// فاصله از مرکز (میتونی کم/زیاد کنی)
|
|
204
|
-
formatter: showPercentage ? (value, context) => {
|
|
205
|
-
if (value === 0) return "";
|
|
206
|
-
const total = context.chart.data.datasets[context.datasetIndex].data.reduce(
|
|
207
|
-
(sum, val, index) => {
|
|
208
|
-
const meta = context.chart.getDatasetMeta(context.datasetIndex);
|
|
209
|
-
if (!meta.data[index] || meta.data[index].hidden !== true) {
|
|
210
|
-
return sum + val;
|
|
211
|
-
}
|
|
212
|
-
return sum;
|
|
213
|
-
},
|
|
214
|
-
0
|
|
215
|
-
);
|
|
216
|
-
const percentage = (value / total * 100).toFixed(1);
|
|
217
|
-
return percentage + "%";
|
|
218
|
-
} : (value) => value === 0 ? "" : value
|
|
300
|
+
display: false
|
|
301
|
+
// غیرفعال - لیبلها با React رندر میشوند
|
|
219
302
|
}
|
|
220
303
|
}
|
|
221
|
-
};
|
|
304
|
+
}), [disableLogo]);
|
|
222
305
|
const CenterComponent = () => {
|
|
223
306
|
return /* @__PURE__ */ React.createElement(
|
|
224
307
|
"div",
|
|
@@ -242,16 +325,37 @@ function PieChart({
|
|
|
242
325
|
)
|
|
243
326
|
);
|
|
244
327
|
};
|
|
245
|
-
return /* @__PURE__ */ React.createElement(import_material2.Box, { height: height ?? 600, sx: { position: "relative" } }, /* @__PURE__ */ React.createElement(
|
|
328
|
+
return /* @__PURE__ */ React.createElement(import_material2.Box, { ref: containerRef, height: height ?? 600, sx: { position: "relative" } }, /* @__PURE__ */ React.createElement(
|
|
246
329
|
import_react_chartjs_22.Pie,
|
|
247
330
|
{
|
|
331
|
+
ref: chartRef,
|
|
248
332
|
data: {
|
|
249
333
|
labels,
|
|
250
334
|
datasets
|
|
251
335
|
},
|
|
252
336
|
options
|
|
253
337
|
}
|
|
254
|
-
),
|
|
338
|
+
), showDataLabels && dataLabels.map((label, index) => /* @__PURE__ */ React.createElement(
|
|
339
|
+
import_material2.Typography,
|
|
340
|
+
{
|
|
341
|
+
key: index,
|
|
342
|
+
sx: {
|
|
343
|
+
position: "absolute",
|
|
344
|
+
left: label.x / (window.devicePixelRatio || 1),
|
|
345
|
+
top: label.y / (window.devicePixelRatio || 1),
|
|
346
|
+
transform: "translate(-50%, -50%)",
|
|
347
|
+
color: "#fff",
|
|
348
|
+
fontWeight: "bold",
|
|
349
|
+
fontSize: 14,
|
|
350
|
+
fontFamily: "Vazir, sans-serif",
|
|
351
|
+
pointerEvents: "none",
|
|
352
|
+
textShadow: "0 1px 2px rgba(0,0,0,0.5)",
|
|
353
|
+
opacity: label.opacity,
|
|
354
|
+
transition: "opacity 0.2s ease-in-out, left 0.2s ease-in-out, top 0.2s ease-in-out"
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
|
+
label.text
|
|
358
|
+
)), !disableLogo && /* @__PURE__ */ React.createElement(
|
|
255
359
|
"div",
|
|
256
360
|
{
|
|
257
361
|
style: {
|
package/dist/charts/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/charts/index.ts","../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["export { default as BarChart } from \"./bar\";\nexport { default as PieChart } from \"./pie\";\n","import * as React from \"react\";\nexport { React };\n","\"use client\";\r\nimport { Chart } from \"react-chartjs-2\";\r\nimport {\r\n Chart as ChartJS,\r\n CategoryScale,\r\n LinearScale,\r\n BarElement,\r\n LineElement,\r\n PointElement,\r\n Tooltip,\r\n Legend,\r\n BarController,\r\n LineController,\r\n Chart as ChartType,\r\n} from \"chart.js\";\r\nimport { Box } from \"@mui/material\";\r\n\r\nChartJS.register(\r\n CategoryScale,\r\n LinearScale,\r\n BarElement,\r\n LineElement,\r\n PointElement,\r\n Tooltip,\r\n Legend,\r\n BarController,\r\n LineController\r\n);\r\n\r\ninterface Props {\r\n labels: string[];\r\n datasets: {\r\n label: string;\r\n data: (number | null)[];\r\n backgroundColor: string;\r\n borderColor?: string;\r\n borderWidth?: number;\r\n type?: \"line\";\r\n order?: number;\r\n tension?: number;\r\n pointRadius?: number;\r\n fill?: boolean;\r\n }[];\r\n height?: number;\r\n}\r\n/**\r\n * 📊 BarChart — کامپوننت نمودار میلهای (Bar/Combo)\r\n *\r\n * @component BarChart\r\n *\r\n * @param {string[]} labels - آرایهای از برچسبها برای محور افقی (X).\r\n * @param {Array<{\r\n * label: string,\r\n * data: number[],\r\n * backgroundColor: string,\r\n * borderColor?: string,\r\n * borderWidth?: number,\r\n * type?: \"line\",\r\n * order?: number,\r\n * tension?: number,\r\n * pointRadius?: number,\r\n * fill?: boolean\r\n * }>} datasets - آرایهای از آبجکتهای داده برای هر سری نمودار.\r\n * - label: عنوان دادهها (نمایش در legend)\r\n * - data: آرایهای از مقادیر هر سری\r\n * - backgroundColor: رنگ میله یا خط\r\n * - borderColor: (اختیاری) رنگ خط دور میله یا خط\r\n * - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\r\n * - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده میشود (نمودار ترکیبی)\r\n * - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار میگیرد)\r\n * - tension: (اختیاری) میزان خمیدگی خط (برای سریهای خطی)\r\n * - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سریهای خطی)\r\n * - fill: (اختیاری) پر شدن زیر خط (برای سریهای خطی)\r\n *\r\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\r\n *\r\n * @description\r\n * این کامپوننت یک نمودار میلهای (Bar) یا ترکیبی Bar/Line با قابلیت شخصیسازی کامل است.\r\n * - پشتیبانی از فونت وزیر و راستچین\r\n * - ریسپانسیو و مناسب صفحات فارسی\r\n * - امکان نمایش چند سری داده به صورت میلهای و خطی همزمان (Combo)\r\n * - شخصیسازی رنگ، ضخامت، ترتیب و استایل هر سری\r\n *\r\n * @returns {JSX.Element} یک نمودار میلهای یا ترکیبی با دادههای ورودی\r\n *\r\n * @example\r\n * ```jsx\r\n * <BarChart\r\n * labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\r\n * datasets={[\r\n * {\r\n * label: \"فروش\",\r\n * data: [10, 20, 15],\r\n * backgroundColor: \"rgba(75,192,192,0.7)\",\r\n * },\r\n * {\r\n * label: \"میانگین\",\r\n * data: [12, 18, 14],\r\n * borderColor: \"red\",\r\n * backgroundColor: \"transparent\",\r\n * type: \"line\",\r\n * order: 0,\r\n * borderWidth: 3,\r\n * tension: 0.4,\r\n * pointRadius: 4,\r\n * fill: false,\r\n * },\r\n * ]}\r\n * height={400}\r\n * />\r\n * ```\r\n */\r\nexport default function BarChart({ labels, datasets, height }: Props) {\r\n const options = {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n y: {\r\n ticks: {\r\n font: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 14,\r\n },\r\n },\r\n },\r\n x: {\r\n ticks: {\r\n autoSkip: false,\r\n font: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 13,\r\n },\r\n },\r\n },\r\n },\r\n plugins: {\r\n datalabels: {\r\n display: false, // ← غیرفعال\r\n },\r\n tooltip: {\r\n bodyFont: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 14,\r\n },\r\n titleFont: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 16,\r\n },\r\n },\r\n legend: {\r\n labels: {\r\n generateLabels: function (chart: ChartType) {\r\n const labels =\r\n ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\r\n return labels.map((label) => ({\r\n ...label,\r\n text: \" \" + label.text + \" \",\r\n boxWidth: 40,\r\n boxHeight: 20,\r\n }));\r\n },\r\n padding: 15,\r\n usePointStyle: true,\r\n font: {\r\n size: 16,\r\n family: \"'Vazir', sans-serif\",\r\n },\r\n boxWidth: 40,\r\n paddingBottom: 10,\r\n },\r\n },\r\n },\r\n };\r\n\r\n return (\r\n <Box height={height ?? 600}>\r\n <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\r\n </Box>\r\n );\r\n}\r\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n labels: string[];\n datasets: {\n label: string;\n data: number[];\n backgroundColor: string | string[];\n borderWidth?: number;\n }[];\n height?: number;\n disableLogo?: boolean;\n logoSRC?: string;\n showDataLabels?: boolean;\n showPercentage?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسبهای دادهها\n * @param {boolean} [showPercentage] - نمایش درصد به جای مقدار عددی در برچسبهای دادهها (در صورت فعال بودن showDataLabels). درصد بر اساس دادههای قابل مشاهده محاسبه میشود.\n * @param {Array<{\n * label: string,\n * data: number[],\n * backgroundColor: string[],\n * borderWidth?: number\n * }>} datasets - آرایهای شامل یک آبجکت داده برای مقداردهی بخشهای نمودار.\n * - label: عنوان دادهها (نمایش در legend)\n * - data: آرایهای از مقادیر هر بخش\n * - backgroundColor: آرایهای از رنگها برای هر بخش\n * - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایرهای با قابلیت شخصیسازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n * - امکان نمایش درصد یا مقدار عددی در برچسبهای دادهها بر اساس دادههای قابل مشاهده\n *\n * @returns {JSX.Element} یک نمودار دایرهای با دادههای ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n * labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n * datasets={[\n * {\n * label: \"مقدار\",\n * data: [10, 20, 30],\n * backgroundColor: [\n * \"rgba(75,192,192,1)\",\n * \"rgba(255,99,132,1)\",\n * \"rgba(153,102,255,1)\",\n * ],\n * borderWidth: 2,\n * },\n * ]}\n * showDataLabels={true}\n * showPercentage={true}\n * />\n * ```\n */\nexport default function PieChart({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = false,\n showPercentage = false,\n}: Props) {\n const options = {\n responsive: true,\n maintainAspectRatio: false,\n cutout: !disableLogo ? \"59%\" : \"0%\",\n plugins: {\n tooltip: {\n bodyFont: {\n family: \"'Vazir', sans-serif\",\n size: 14,\n },\n titleFont: {\n family: \"'Vazir', sans-serif\",\n size: 16,\n },\n },\n legend: {\n labels: {\n padding: 15,\n usePointStyle: true,\n color: '#666', // رنگ متن legend را نرمتر میکند\n font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n generateLabels: (chart: any) => {\n const data = chart.data;\n const meta = chart.getDatasetMeta(0);\n return data.labels.map((label: string, index: number) => {\n const hidden = meta.data[index] ? meta.data[index].hidden : false;\n return {\n text: label,\n fillStyle: data.datasets[0].backgroundColor[index] || '#000',\n hidden: hidden,\n index: index,\n datasetIndex: 0,\n textDecoration: hidden ? 'line-through' : undefined,\n };\n });\n },\n },\n onClick: (e: any, legendItem: any, legend: any) => {\n const ci = legend.chart;\n const meta = ci.getDatasetMeta(legendItem.datasetIndex || 0);\n const index = legendItem.index;\n if (meta.data[index]) {\n meta.data[index].hidden = !meta.data[index].hidden;\n }\n ci.update();\n },\n },\n datalabels: {\n display: (context: any) => {\n return showDataLabels && !context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].hidden;\n },\n color: \"#fff\",\n font: {\n size: 14,\n weight: \"bold\",\n family: \"'Vazir', sans-serif\",\n } as const,\n anchor: \"center\" as const, // ← روی مرکز هر تکه\n align: \"center\" as const,\n offset: 20, // فاصله از مرکز (میتونی کم/زیاد کنی)\n formatter: showPercentage\n ? (value: number, context: any) => {\n if (value === 0) return \"\";\n // محاسبه مجموع دادههای قابل مشاهده\n const total = context.chart.data.datasets[context.datasetIndex].data.reduce(\n (sum: number, val: number, index: number) => {\n const meta = context.chart.getDatasetMeta(context.datasetIndex);\n if (!meta.data[index] || meta.data[index].hidden !== true) {\n return sum + val;\n }\n return sum;\n },\n 0\n );\n const percentage = ((value / total) * 100).toFixed(1);\n return percentage + \"%\";\n }\n : (value: number) => (value === 0 ? \"\" : value),\n },\n },\n };\n\n // کامپوننتی که میخواهید در مرکز نمودار نمایش داده شود\n const CenterComponent = () => {\n return (\n <div\n style={{\n padding: \"10px\",\n borderRadius: \"8px\",\n textAlign: \"center\",\n width: 220,\n }}\n >\n <Image\n alt=\"\"\n width={220}\n height={220}\n src={logoSRC ?? \"/assets/images/pilogo.png\"}\n unoptimized\n />\n </div>\n );\n };\n\n return (\n <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n <Pie\n data={{\n labels: labels,\n datasets: datasets,\n }}\n options={options}\n />\n {!disableLogo && (\n <div\n style={{\n position: \"absolute\",\n top: \"53%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n }}\n >\n <CenterComponent />\n </div>\n )}\n </Box>\n );\n}\n"],"mappings":"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","names":["ChartJS","labels","import_react_chartjs_2","import_chart","import_material","ChartJS","ChartDataLabels","Image"]}
|
|
1
|
+
{"version":3,"sources":["../../src/charts/index.ts","../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["export { default as BarChart } from \"./bar\";\nexport { default as PieChart } from \"./pie\";\n","import * as React from \"react\";\nexport { React };\n","\"use client\";\nimport { useRef, useState } from \"react\";\nimport { Chart } from \"react-chartjs-2\";\nimport {\n Chart as ChartJS,\n CategoryScale,\n LinearScale,\n LogarithmicScale,\n BarElement,\n LineElement,\n PointElement,\n Tooltip,\n Legend,\n BarController,\n LineController,\n Chart as ChartType,\n} from \"chart.js\";\nimport { Box } from \"@mui/material\";\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n LogarithmicScale,\n BarElement,\n LineElement,\n PointElement,\n Tooltip,\n Legend,\n BarController,\n LineController\n);\n\ninterface Dataset {\n label: string;\n data: (number | null)[];\n backgroundColor: string;\n borderColor?: string;\n borderWidth?: number;\n type?: \"line\";\n order?: number;\n tension?: number;\n pointRadius?: number;\n fill?: boolean;\n}\n\ninterface Props {\n labels: string[];\n datasets: Dataset[];\n height?: number;\n}\n\nexport default function BarChart({ labels, datasets, height }: Props) {\n const chartRef = useRef<ChartType | null>(null);\n const [hiddenIndices, setHiddenIndices] = useState<Set<number>>(new Set());\n\n // --- دادههای visible ---\n const visibleDatasets = datasets.filter((_, i) => !hiddenIndices.has(i));\n const allValues = ([] as number[]).concat(\n ...visibleDatasets.map((ds) =>\n ds.data.filter((v): v is number => v !== null)\n )\n );\n\n const minValue = allValues.length ? Math.min(...allValues) : 0;\n const maxValue = allValues.length ? Math.max(...allValues) : 1;\n\n // --- تصمیم هوشمند برای scale ---\n const useLogScale = maxValue / (minValue || 1) > 50; // اگر اختلاف >50 برابر باشد log scale\n const scaleType: \"linear\" | \"logarithmic\" = useLogScale\n ? \"logarithmic\"\n : \"linear\";\n\n // --- محاسبه محور Y ---\n let yMin = minValue;\n let yMax = maxValue;\n let stepSize: number | undefined = 1;\n\n if (scaleType === \"linear\") {\n const range = yMax - yMin;\n const targetLines = 8;\n let rawStep = range / targetLines;\n\n const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));\n const normalized = rawStep / magnitude;\n if (normalized <= 1) stepSize = 1 * magnitude;\n else if (normalized <= 2) stepSize = 2 * magnitude;\n else if (normalized <= 5) stepSize = 5 * magnitude;\n else stepSize = 10 * magnitude;\n\n yMin = Math.floor(yMin / stepSize) * stepSize;\n yMax = Math.ceil(yMax / stepSize) * stepSize;\n } else {\n yMin = Math.max(minValue, 1);\n yMax = maxValue;\n stepSize = undefined;\n }\n\n // --- تنظیمات Chart.js ---\n const options = {\n responsive: true,\n maintainAspectRatio: false,\n animation: { duration: 500 },\n scales: {\n y: {\n type: scaleType,\n min: yMin,\n max: yMax,\n ticks: {\n ...(stepSize !== undefined ? { stepSize } : {}),\n callback: (value: any) => {\n // محدود کردن تعداد اعشار به حداکثر 2\n const num = Number(value);\n if (scaleType === \"logarithmic\") return num.toLocaleString();\n // اگر عدد خیلی بزرگ است، بدون اعشار\n if (num >= 1000) return num.toLocaleString();\n // اعشار برای اعداد کوچک\n if (stepSize && stepSize < 1) return num.toFixed(2);\n return num;\n },\n font: { family: \"'Vazir', sans-serif\", size: 14 },\n },\n },\n x: {\n ticks: {\n autoSkip: false,\n font: { family: \"'Vazir', sans-serif\", size: 13 },\n },\n },\n },\n plugins: {\n legend: {\n labels: {\n usePointStyle: true, // دایرهای\n font: { size: 16, family: \"'Vazir', sans-serif\" },\n },\n onClick: (e: any, legendItem: any, legend: any) => {\n const index = legendItem.datasetIndex as number;\n const newHidden = new Set(hiddenIndices);\n if (hiddenIndices.has(index)) newHidden.delete(index);\n else newHidden.add(index);\n setHiddenIndices(newHidden);\n },\n },\n tooltip: {\n bodyFont: { family: \"'Vazir', sans-serif\", size: 14 },\n titleFont: { family: \"'Vazir', sans-serif\", size: 16 },\n },\n datalabels: { display: false },\n },\n };\n\n // --- تنظیمات نقاط ---\n ChartJS.defaults.elements.point.radius = 5;\n ChartJS.defaults.elements.point.hoverRadius = 9;\n ChartJS.defaults.elements.point.borderWidth = 0.2;\n ChartJS.defaults.elements.point.backgroundColor = \"red\";\n ChartJS.defaults.elements.point.borderColor = \"black\";\n\n return (\n <Box height={height ?? 600}>\n <Chart\n ref={chartRef}\n type=\"bar\"\n data={{\n labels,\n datasets: datasets.map((ds, i) => ({\n ...ds,\n hidden: hiddenIndices.has(i),\n })),\n }}\n options={options}\n />\n </Box>\n );\n}\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo, useRef, useEffect, useState } from \"react\";\nimport { Box, Typography } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\n// تنظیم فونت پیشفرض Chart.js به Vazir\nChartJS.defaults.font.family = \"Vazir, sans-serif\";\n\ninterface Props {\n labels: string[];\n datasets: {\n label: string;\n data: number[];\n backgroundColor: string | string[];\n borderWidth?: number;\n }[];\n height?: number;\n disableLogo?: boolean;\n logoSRC?: string;\n showDataLabels?: boolean;\n showPercentage?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسبهای دادهها\n * @param {boolean} [showPercentage] - نمایش درصد به جای مقدار عددی در برچسبهای دادهها (در صورت فعال بودن showDataLabels). درصد بر اساس دادههای قابل مشاهده محاسبه میشود.\n * @param {Array<{\n * label: string,\n * data: number[],\n * backgroundColor: string[],\n * borderWidth?: number\n * }>} datasets - آرایهای شامل یک آبجکت داده برای مقداردهی بخشهای نمودار.\n * - label: عنوان دادهها (نمایش در legend)\n * - data: آرایهای از مقادیر هر بخش\n * - backgroundColor: آرایهای از رنگها برای هر بخش\n * - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایرهای با قابلیت شخصیسازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n * - امکان نمایش درصد یا مقدار عددی در برچسبهای دادهها بر اساس دادههای قابل مشاهده\n *\n * @returns {JSX.Element} یک نمودار دایرهای با دادههای ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n * labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n * datasets={[\n * {\n * label: \"مقدار\",\n * data: [10, 20, 30],\n * backgroundColor: [\n * \"rgba(75,192,192,1)\",\n * \"rgba(255,99,132,1)\",\n * \"rgba(153,102,255,1)\",\n * ],\n * borderWidth: 2,\n * },\n * ]}\n * showDataLabels={true}\n * showPercentage={true}\n * />\n * ```\n */\nexport default function PieChart({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = false,\n showPercentage = false,\n}: Props) {\n const chartRef = useRef<ChartJS<\"pie\">>(null);\n const [dataLabels, setDataLabels] = useState<{ x: number; y: number; text: string; opacity: number }[]>([]);\n const containerRef = useRef<HTMLDivElement>(null);\n\n // تابع محاسبه موقعیت لیبلها\n const calculateLabels = () => {\n if (!showDataLabels || !chartRef.current || !containerRef.current) return;\n\n const chart = chartRef.current;\n const meta = chart.getDatasetMeta(0);\n const data = chart.data.datasets[0].data as number[];\n\n // گرفتن اطلاعات chart area\n const chartArea = chart.chartArea;\n\n // محاسبه مجموع دادههای قابل مشاهده\n const visibleTotal = data.reduce((sum, val, index) => {\n if (!meta.data[index] || (meta.data[index] as any).hidden !== true) {\n return sum + val;\n }\n return sum;\n }, 0);\n\n const newLabels: { x: number; y: number; text: string; opacity: number }[] = [];\n\n meta.data.forEach((arc: any, index: number) => {\n if (arc.hidden) return;\n\n const value = data[index];\n if (value === 0) return;\n\n // محاسبه مرکز arc\n const centerAngle = (arc.startAngle + arc.endAngle) / 2;\n // نزدیکتر به دیواره (0.7 = بین مرکز و لبه، هرچه بیشتر به 1 نزدیکتر = نزدیکتر به لبه)\n const midRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) * 0.65;\n\n // موقعیت در chart area - آینه کردن روی محور X\n const x = arc.x - Math.cos(centerAngle) * midRadius;\n const y = arc.y + Math.sin(centerAngle) * midRadius;\n\n let text: string;\n if (showPercentage) {\n const percentage = ((value / visibleTotal) * 100).toFixed(1);\n text = percentage + \"%\";\n } else {\n text = String(value);\n }\n\n newLabels.push({ x, y, text, opacity: 1 });\n });\n\n setDataLabels(newLabels);\n };\n\n // محاسبه موقعیت لیبلها بعد از اتمام انیمیشن\n useEffect(() => {\n if (!showDataLabels) {\n setDataLabels([]);\n return;\n }\n\n // صبر برای اتمام انیمیشن اولیه (500ms)\n const timeout = setTimeout(() => {\n calculateLabels();\n }, 500);\n\n return () => clearTimeout(timeout);\n }, [datasets, showDataLabels, showPercentage]);\n\n // آپدیت لیبلها بعد از هر تغییر در chart (مثل کلیک روی legend)\n useEffect(() => {\n if (!chartRef.current || !showDataLabels) return;\n\n const chart = chartRef.current;\n const originalUpdate = chart.update.bind(chart);\n\n chart.update = function (...args: any[]) {\n // مخفی کردن لیبلها قبل از آپدیت\n setDataLabels(prev => prev.map(l => ({ ...l, opacity: 0 })));\n\n originalUpdate(...args);\n\n // محاسبه مجدد لیبلها بعد از انیمیشن\n setTimeout(() => {\n calculateLabels();\n }, 250);\n };\n\n return () => {\n chart.update = originalUpdate;\n };\n }, [showDataLabels, showPercentage]);\n\n const options = useMemo(() => ({\n responsive: true,\n maintainAspectRatio: false,\n cutout: !disableLogo ? \"59%\" : \"0%\",\n animation: {\n animateRotate: true,\n animateScale: true,\n duration: 400,\n },\n plugins: {\n tooltip: {\n bodyFont: {\n family: \"Vazir, sans-serif\",\n size: 14,\n },\n titleFont: {\n family: \"Vazir, sans-serif\",\n size: 16,\n },\n },\n legend: {\n labels: {\n padding: 15,\n usePointStyle: true,\n color: '#666', // رنگ متن legend را نرمتر میکند\n font: {\n size: 16,\n family: \"Vazir, sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n generateLabels: (chart: any) => {\n const data = chart.data;\n const meta = chart.getDatasetMeta(0);\n return data.labels.map((label: string, index: number) => {\n const hidden = meta.data[index] ? meta.data[index].hidden : false;\n return {\n text: label,\n fillStyle: data.datasets[0].backgroundColor[index] || '#000',\n hidden: hidden,\n index: index,\n datasetIndex: 0,\n textDecoration: hidden ? 'line-through' : undefined,\n };\n });\n },\n },\n onClick: (e: any, legendItem: any, legend: any) => {\n const ci = legend.chart;\n const meta = ci.getDatasetMeta(legendItem.datasetIndex || 0);\n const index = legendItem.index;\n if (meta.data[index]) {\n meta.data[index].hidden = !meta.data[index].hidden;\n }\n ci.update();\n },\n },\n datalabels: {\n display: false, // غیرفعال - لیبلها با React رندر میشوند\n },\n },\n }), [disableLogo]);\n\n // کامپوننتی که میخواهید در مرکز نمودار نمایش داده شود\n const CenterComponent = () => {\n return (\n <div\n style={{\n padding: \"10px\",\n borderRadius: \"8px\",\n textAlign: \"center\",\n width: 220,\n }}\n >\n <Image\n alt=\"\"\n width={220}\n height={220}\n src={logoSRC ?? \"/assets/images/pilogo.png\"}\n unoptimized\n />\n </div>\n );\n };\n\n return (\n <Box ref={containerRef} height={height ?? 600} sx={{ position: \"relative\" }}>\n <Pie\n ref={chartRef}\n data={{\n labels: labels,\n datasets: datasets,\n }}\n options={options}\n />\n {/* لیبلهای سفارشی با فونت Vazir */}\n {showDataLabels && dataLabels.map((label, index) => (\n <Typography\n key={index}\n sx={{\n position: \"absolute\",\n left: label.x / (window.devicePixelRatio || 1),\n top: label.y / (window.devicePixelRatio || 1),\n transform: \"translate(-50%, -50%)\",\n color: \"#fff\",\n fontWeight: \"bold\",\n fontSize: 14,\n fontFamily: \"Vazir, sans-serif\",\n pointerEvents: \"none\",\n textShadow: \"0 1px 2px rgba(0,0,0,0.5)\",\n opacity: label.opacity,\n transition: \"opacity 0.2s ease-in-out, left 0.2s ease-in-out, top 0.2s ease-in-out\",\n }}\n >\n {label.text}\n </Typography>\n ))}\n {!disableLogo && (\n <div\n style={{\n position: \"absolute\",\n top: \"53%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n }}\n >\n <CenterComponent />\n </div>\n )}\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACCvB,mBAAiC;AACjC,6BAAsB;AACtB,mBAaO;AACP,sBAAoB;AAEpB,aAAAA,MAAQ;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAqBe,SAAR,SAA0B,EAAE,QAAQ,UAAU,OAAO,GAAU;AACpE,QAAM,eAAW,qBAAyB,IAAI;AAC9C,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAsB,oBAAI,IAAI,CAAC;AAGzE,QAAM,kBAAkB,SAAS,OAAO,CAAC,GAAG,MAAM,CAAC,cAAc,IAAI,CAAC,CAAC;AACvE,QAAM,YAAa,CAAC,EAAe;AAAA,IACjC,GAAG,gBAAgB;AAAA,MAAI,CAAC,OACtB,GAAG,KAAK,OAAO,CAAC,MAAmB,MAAM,IAAI;AAAA,IAC/C;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,SAAS,KAAK,IAAI,GAAG,SAAS,IAAI;AAC7D,QAAM,WAAW,UAAU,SAAS,KAAK,IAAI,GAAG,SAAS,IAAI;AAG7D,QAAM,cAAc,YAAY,YAAY,KAAK;AACjD,QAAM,YAAsC,cACxC,gBACA;AAGJ,MAAI,OAAO;AACX,MAAI,OAAO;AACX,MAAI,WAA+B;AAEnC,MAAI,cAAc,UAAU;AAC1B,UAAM,QAAQ,OAAO;AACrB,UAAM,cAAc;AACpB,QAAI,UAAU,QAAQ;AAEtB,UAAM,YAAY,KAAK,IAAI,IAAI,KAAK,MAAM,KAAK,MAAM,OAAO,CAAC,CAAC;AAC9D,UAAM,aAAa,UAAU;AAC7B,QAAI,cAAc,EAAG,YAAW,IAAI;AAAA,aAC3B,cAAc,EAAG,YAAW,IAAI;AAAA,aAChC,cAAc,EAAG,YAAW,IAAI;AAAA,QACpC,YAAW,KAAK;AAErB,WAAO,KAAK,MAAM,OAAO,QAAQ,IAAI;AACrC,WAAO,KAAK,KAAK,OAAO,QAAQ,IAAI;AAAA,EACtC,OAAO;AACL,WAAO,KAAK,IAAI,UAAU,CAAC;AAC3B,WAAO;AACP,eAAW;AAAA,EACb;AAGA,QAAM,UAAU;AAAA,IACd,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,WAAW,EAAE,UAAU,IAAI;AAAA,IAC3B,QAAQ;AAAA,MACN,GAAG;AAAA,QACD,MAAM;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AAAA,QACL,OAAO;AAAA,UACL,GAAI,aAAa,SAAY,EAAE,SAAS,IAAI,CAAC;AAAA,UAC7C,UAAU,CAAC,UAAe;AAExB,kBAAM,MAAM,OAAO,KAAK;AACxB,gBAAI,cAAc,cAAe,QAAO,IAAI,eAAe;AAE3D,gBAAI,OAAO,IAAM,QAAO,IAAI,eAAe;AAE3C,gBAAI,YAAY,WAAW,EAAG,QAAO,IAAI,QAAQ,CAAC;AAClD,mBAAO;AAAA,UACT;AAAA,UACA,MAAM,EAAE,QAAQ,uBAAuB,MAAM,GAAG;AAAA,QAClD;AAAA,MACF;AAAA,MACA,GAAG;AAAA,QACD,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAM,EAAE,QAAQ,uBAAuB,MAAM,GAAG;AAAA,QAClD;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,eAAe;AAAA;AAAA,UACf,MAAM,EAAE,MAAM,IAAI,QAAQ,sBAAsB;AAAA,QAClD;AAAA,QACA,SAAS,CAAC,GAAQ,YAAiB,WAAgB;AACjD,gBAAM,QAAQ,WAAW;AACzB,gBAAM,YAAY,IAAI,IAAI,aAAa;AACvC,cAAI,cAAc,IAAI,KAAK,EAAG,WAAU,OAAO,KAAK;AAAA,cAC/C,WAAU,IAAI,KAAK;AACxB,2BAAiB,SAAS;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,UAAU,EAAE,QAAQ,uBAAuB,MAAM,GAAG;AAAA,QACpD,WAAW,EAAE,QAAQ,uBAAuB,MAAM,GAAG;AAAA,MACvD;AAAA,MACA,YAAY,EAAE,SAAS,MAAM;AAAA,IAC/B;AAAA,EACF;AAGA,eAAAA,MAAQ,SAAS,SAAS,MAAM,SAAS;AACzC,eAAAA,MAAQ,SAAS,SAAS,MAAM,cAAc;AAC9C,eAAAA,MAAQ,SAAS,SAAS,MAAM,cAAc;AAC9C,eAAAA,MAAQ,SAAS,SAAS,MAAM,kBAAkB;AAClD,eAAAA,MAAQ,SAAS,SAAS,MAAM,cAAc;AAE9C,SACE,oCAAC,uBAAI,QAAQ,UAAU,OACrB;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,MAAM;AAAA,QACJ;AAAA,QACA,UAAU,SAAS,IAAI,CAAC,IAAI,OAAO;AAAA,UACjC,GAAG;AAAA,UACH,QAAQ,cAAc,IAAI,CAAC;AAAA,QAC7B,EAAE;AAAA,MACJ;AAAA,MACA;AAAA;AAAA,EACF,CACF;AAEJ;;;AC7KA,IAAAC,0BAAoB;AACpB,IAAAC,gBAAqE;AACrE,IAAAC,gBAAqD;AACrD,IAAAC,mBAAgC;AAChC,mBAAkB;AAClB,uCAA4B;AAE5B,cAAAC,MAAQ,SAAS,0BAAY,uBAAS,sBAAQ,iCAAAC,OAAe;AAG7D,cAAAD,MAAQ,SAAS,KAAK,SAAS;AAiEhB,SAAR,SAA0B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GAAU;AACR,QAAM,eAAW,sBAAuB,IAAI;AAC5C,QAAM,CAAC,YAAY,aAAa,QAAI,wBAAoE,CAAC,CAAC;AAC1G,QAAM,mBAAe,sBAAuB,IAAI;AAGhD,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,kBAAkB,CAAC,SAAS,WAAW,CAAC,aAAa,QAAS;AAEnE,UAAM,QAAQ,SAAS;AACvB,UAAM,OAAO,MAAM,eAAe,CAAC;AACnC,UAAM,OAAO,MAAM,KAAK,SAAS,CAAC,EAAE;AAGpC,UAAM,YAAY,MAAM;AAGxB,UAAM,eAAe,KAAK,OAAO,CAAC,KAAK,KAAK,UAAU;AACpD,UAAI,CAAC,KAAK,KAAK,KAAK,KAAM,KAAK,KAAK,KAAK,EAAU,WAAW,MAAM;AAClE,eAAO,MAAM;AAAA,MACf;AACA,aAAO;AAAA,IACT,GAAG,CAAC;AAEJ,UAAM,YAAuE,CAAC;AAE9E,SAAK,KAAK,QAAQ,CAAC,KAAU,UAAkB;AAC7C,UAAI,IAAI,OAAQ;AAEhB,YAAM,QAAQ,KAAK,KAAK;AACxB,UAAI,UAAU,EAAG;AAGjB,YAAM,eAAe,IAAI,aAAa,IAAI,YAAY;AAEtD,YAAM,YAAY,IAAI,eAAe,IAAI,cAAc,IAAI,eAAe;AAG1E,YAAM,IAAI,IAAI,IAAI,KAAK,IAAI,WAAW,IAAI;AAC1C,YAAM,IAAI,IAAI,IAAI,KAAK,IAAI,WAAW,IAAI;AAE1C,UAAI;AACJ,UAAI,gBAAgB;AAClB,cAAM,cAAe,QAAQ,eAAgB,KAAK,QAAQ,CAAC;AAC3D,eAAO,aAAa;AAAA,MACtB,OAAO;AACL,eAAO,OAAO,KAAK;AAAA,MACrB;AAEA,gBAAU,KAAK,EAAE,GAAG,GAAG,MAAM,SAAS,EAAE,CAAC;AAAA,IAC3C,CAAC;AAED,kBAAc,SAAS;AAAA,EACzB;AAGA,+BAAU,MAAM;AACd,QAAI,CAAC,gBAAgB;AACnB,oBAAc,CAAC,CAAC;AAChB;AAAA,IACF;AAGA,UAAM,UAAU,WAAW,MAAM;AAC/B,sBAAgB;AAAA,IAClB,GAAG,GAAG;AAEN,WAAO,MAAM,aAAa,OAAO;AAAA,EACnC,GAAG,CAAC,UAAU,gBAAgB,cAAc,CAAC;AAG7C,+BAAU,MAAM;AACd,QAAI,CAAC,SAAS,WAAW,CAAC,eAAgB;AAE1C,UAAM,QAAQ,SAAS;AACvB,UAAM,iBAAiB,MAAM,OAAO,KAAK,KAAK;AAE9C,UAAM,SAAS,YAAa,MAAa;AAEvC,oBAAc,UAAQ,KAAK,IAAI,QAAM,EAAE,GAAG,GAAG,SAAS,EAAE,EAAE,CAAC;AAE3D,qBAAe,GAAG,IAAI;AAGtB,iBAAW,MAAM;AACf,wBAAgB;AAAA,MAClB,GAAG,GAAG;AAAA,IACR;AAEA,WAAO,MAAM;AACX,YAAM,SAAS;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,QAAM,cAAU,uBAAQ,OAAO;AAAA,IAC7B,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,QAAQ,CAAC,cAAc,QAAQ;AAAA,IAC/B,WAAW;AAAA,MACT,eAAe;AAAA,MACf,cAAc;AAAA,MACd,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,QACP,UAAU;AAAA,UACR,QAAQ;AAAA,UACR,MAAM;AAAA,QACR;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,QACR;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,eAAe;AAAA,UACf,OAAO;AAAA;AAAA,UACP,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,QAAQ;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV,eAAe;AAAA,UACf,gBAAgB,CAAC,UAAe;AAC9B,kBAAM,OAAO,MAAM;AACnB,kBAAM,OAAO,MAAM,eAAe,CAAC;AACnC,mBAAO,KAAK,OAAO,IAAI,CAAC,OAAe,UAAkB;AACvD,oBAAM,SAAS,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,KAAK,EAAE,SAAS;AAC5D,qBAAO;AAAA,gBACL,MAAM;AAAA,gBACN,WAAW,KAAK,SAAS,CAAC,EAAE,gBAAgB,KAAK,KAAK;AAAA,gBACtD;AAAA,gBACA;AAAA,gBACA,cAAc;AAAA,gBACd,gBAAgB,SAAS,iBAAiB;AAAA,cAC5C;AAAA,YACF,CAAC;AAAA,UACH;AAAA,QACF;AAAA,QACA,SAAS,CAAC,GAAQ,YAAiB,WAAgB;AACjD,gBAAM,KAAK,OAAO;AAClB,gBAAM,OAAO,GAAG,eAAe,WAAW,gBAAgB,CAAC;AAC3D,gBAAM,QAAQ,WAAW;AACzB,cAAI,KAAK,KAAK,KAAK,GAAG;AACpB,iBAAK,KAAK,KAAK,EAAE,SAAS,CAAC,KAAK,KAAK,KAAK,EAAE;AAAA,UAC9C;AACA,aAAG,OAAO;AAAA,QACZ;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,IAAI,CAAC,WAAW,CAAC;AAGjB,QAAM,kBAAkB,MAAM;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,cAAc;AAAA,UACd,WAAW;AAAA,UACX,OAAO;AAAA,QACT;AAAA;AAAA,MAEA;AAAA,QAAC,aAAAE;AAAA,QAAA;AAAA,UACC,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,KAAK,WAAW;AAAA,UAChB,aAAW;AAAA;AAAA,MACb;AAAA,IACF;AAAA,EAEJ;AAEA,SACE,oCAAC,wBAAI,KAAK,cAAc,QAAQ,UAAU,KAAK,IAAI,EAAE,UAAU,WAAW,KACxE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA;AAAA,EACF,GAEC,kBAAkB,WAAW,IAAI,CAAC,OAAO,UACxC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,QACF,UAAU;AAAA,QACV,MAAM,MAAM,KAAK,OAAO,oBAAoB;AAAA,QAC5C,KAAK,MAAM,KAAK,OAAO,oBAAoB;AAAA,QAC3C,WAAW;AAAA,QACX,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,SAAS,MAAM;AAAA,QACf,YAAY;AAAA,MACd;AAAA;AAAA,IAEC,MAAM;AAAA,EACT,CACD,GACA,CAAC,eACA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW;AAAA,QACX,eAAe;AAAA;AAAA,MACjB;AAAA;AAAA,IAEA,oCAAC,qBAAgB;AAAA,EACnB,CAEJ;AAEJ;","names":["ChartJS","import_react_chartjs_2","import_chart","import_react","import_material","ChartJS","ChartDataLabels","Image"]}
|