@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.
@@ -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 {
@@ -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 {
@@ -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
- font: {
64
- family: "'Vazir', sans-serif",
65
- size: 14
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
- font: {
108
- size: 16,
109
- family: "'Vazir', sans-serif"
110
- },
111
- boxWidth: 40,
112
- paddingBottom: 10
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
- return /* @__PURE__ */ React.createElement(import_material.Box, { height: height ?? 600 }, /* @__PURE__ */ React.createElement(import_react_chartjs_2.Chart, { type: "bar", data: { labels, datasets }, options }));
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 options = {
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: "'Vazir', sans-serif",
253
+ family: "Vazir, sans-serif",
144
254
  size: 14
145
255
  },
146
256
  titleFont: {
147
- family: "'Vazir', sans-serif",
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: "'Vazir', sans-serif"
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: (context) => {
191
- return showDataLabels && !context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].hidden;
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
- ), !disableLogo && /* @__PURE__ */ React.createElement(
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: {
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACCvB,6BAAsB;AACtB,mBAYO;AACP,sBAAoB;AAEpB,aAAAA,MAAQ;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAqFe,SAAR,SAA0B,EAAE,QAAQ,UAAU,OAAO,GAAU;AACpE,QAAM,UAAU;AAAA,IACd,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,QAAQ;AAAA,MACN,GAAG;AAAA,QACD,OAAO;AAAA,UACL,MAAM;AAAA,YACJ,QAAQ;AAAA,YACR,MAAM;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,MACA,GAAG;AAAA,QACD,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAM;AAAA,YACJ,QAAQ;AAAA,YACR,MAAM;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,QACV,SAAS;AAAA;AAAA,MACX;AAAA,MACA,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,gBAAgB,SAAU,OAAkB;AAC1C,kBAAMC,UACJ,aAAAD,MAAQ,SAAS,QAAQ,OAAO,OAAO,eAAe,KAAK;AAC7D,mBAAOC,QAAO,IAAI,CAAC,WAAW;AAAA,cAC5B,GAAG;AAAA,cACH,MAAM,UAAU,MAAM,OAAO;AAAA,cAC7B,UAAU;AAAA,cACV,WAAW;AAAA,YACb,EAAE;AAAA,UACJ;AAAA,UACA,SAAS;AAAA,UACT,eAAe;AAAA,UACf,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,QAAQ;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE,oCAAC,uBAAI,QAAQ,UAAU,OACrB,oCAAC,gCAAM,MAAK,OAAM,MAAM,EAAE,QAAQ,SAAS,GAAG,SAAkB,CAClE;AAEJ;;;AClLA,IAAAC,0BAAoB;AACpB,IAAAC,gBAAqE;AAErE,IAAAC,mBAAoB;AACpB,mBAAkB;AAClB,uCAA4B;AAE5B,cAAAC,MAAQ,SAAS,0BAAY,uBAAS,sBAAQ,iCAAAC,OAAe;AAiE9C,SAAR,SAA0B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GAAU;AACR,QAAM,UAAU;AAAA,IACd,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,QAAQ,CAAC,cAAc,QAAQ;AAAA,IAC/B,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,CAAC,YAAiB;AACzB,iBAAO,kBAAkB,CAAC,QAAQ,MAAM,eAAe,QAAQ,YAAY,EAAE,KAAK,QAAQ,SAAS,EAAE;AAAA,QACvG;AAAA,QACA,OAAO;AAAA,QACP,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,QAAQ;AAAA,QACV;AAAA,QACA,QAAQ;AAAA;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,QACR,WAAW,iBACP,CAAC,OAAe,YAAiB;AACjC,cAAI,UAAU,EAAG,QAAO;AAExB,gBAAM,QAAQ,QAAQ,MAAM,KAAK,SAAS,QAAQ,YAAY,EAAE,KAAK;AAAA,YACnE,CAAC,KAAa,KAAa,UAAkB;AAC3C,oBAAM,OAAO,QAAQ,MAAM,eAAe,QAAQ,YAAY;AAC9D,kBAAI,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,EAAE,WAAW,MAAM;AACzD,uBAAO,MAAM;AAAA,cACf;AACA,qBAAO;AAAA,YACT;AAAA,YACA;AAAA,UACF;AACA,gBAAM,cAAe,QAAQ,QAAS,KAAK,QAAQ,CAAC;AACpD,iBAAO,aAAa;AAAA,QACtB,IACE,CAAC,UAAmB,UAAU,IAAI,KAAK;AAAA,MAC7C;AAAA,IACF;AAAA,EACF;AAGA,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,aAAAC;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,QAAQ,UAAU,KAAK,IAAI,EAAE,UAAU,WAAW,KACrD;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA;AAAA,EACF,GACC,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","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":"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","names":["ChartJS","import_react_chartjs_2","import_chart","import_react","import_material","ChartJS","ChartDataLabels","Image"]}