@mamrp/components 1.0.34 → 1.0.36

package/dist/charts/index.d.mts

@@ -0,0 +1,146 @@
+import * as React from 'react';
+
+interface Props$1 {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: number[];
+        backgroundColor: string;
+        borderColor?: string;
+        borderWidth?: number;
+        type?: "line";
+        order?: number;
+        tension?: number;
+        pointRadius?: number;
+        fill?: boolean;
+    }[];
+    height?: number;
+}
+/**
+ * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)
+ *
+ * @component BarChart
+ *
+ * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).
+ * @param {Array<{
+ *   label: string,
+ *   data: number[],
+ *   backgroundColor: string,
+ *   borderColor?: string,
+ *   borderWidth?: number,
+ *   type?: "line",
+ *   order?: number,
+ *   tension?: number,
+ *   pointRadius?: number,
+ *   fill?: boolean
+ * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.
+ *   - label: عنوان داده‌ها (نمایش در legend)
+ *   - data: آرایه‌ای از مقادیر هر سری
+ *   - backgroundColor: رنگ میله یا خط
+ *   - borderColor: (اختیاری) رنگ خط دور میله یا خط
+ *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط
+ *   - type: (اختیاری) اگر "line" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)
+ *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)
+ *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)
+ *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)
+ *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)
+ *
+ * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)
+ *
+ * @description
+ * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.
+ * - پشتیبانی از فونت وزیر و راست‌چین
+ * - ریسپانسیو و مناسب صفحات فارسی
+ * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)
+ * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری
+ *
+ * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی
+ *
+ * @example
+ * ```jsx
+ * <BarChart
+ *   labels={["شنبه", "یکشنبه", "دوشنبه"]}
+ *   datasets={[
+ *     {
+ *       label: "فروش",
+ *       data: [10, 20, 15],
+ *       backgroundColor: "rgba(75,192,192,0.7)",
+ *     },
+ *     {
+ *       label: "میانگین",
+ *       data: [12, 18, 14],
+ *       borderColor: "red",
+ *       backgroundColor: "transparent",
+ *       type: "line",
+ *       order: 0,
+ *       borderWidth: 3,
+ *       tension: 0.4,
+ *       pointRadius: 4,
+ *       fill: false,
+ *     },
+ *   ]}
+ *   height={400}
+ * />
+ * ```
+ */
+declare function BarChart({ labels, datasets, height }: Props$1): React.JSX.Element;
+
+interface Props {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: number[];
+        backgroundColor: string | string[];
+        borderWidth?: number;
+    }[];
+    height?: number;
+    disableLogo?: boolean;
+    logoSRC?: string;
+}
+/**
+ * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)
+ *
+ * @component PieChart
+ *
+ * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.
+ * @param {Array<{
+ *   label: string,
+ *   data: number[],
+ *   backgroundColor: string[],
+ *   borderWidth?: number
+ * }>} datasets - آرایه‌ای شامل یک آبجکت داده برای مقداردهی بخش‌های نمودار.
+ *   - label: عنوان داده‌ها (نمایش در legend)
+ *   - data: آرایه‌ای از مقادیر هر بخش
+ *   - backgroundColor: آرایه‌ای از رنگ‌ها برای هر بخش
+ *   - borderWidth: (اختیاری) ضخامت خط دور هر بخش
+ * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)
+ *
+ * @description
+ * این کامپوننت یک نمودار دایره‌ای با قابلیت شخصی‌سازی رنگ، داده و فونت (هماهنگ با وزیر) است.
+ * - ریسپانسیو و مناسب صفحات فارسی
+ * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار
+ *
+ * @returns {JSX.Element} یک نمودار دایره‌ای با داده‌های ورودی
+ *
+ * @example
+ * ```jsx
+ * <PieChart
+ *   labels={["بخش اول", "بخش دوم", "بخش سوم"]}
+ *   datasets={[
+ *     {
+ *       label: "مقدار",
+ *       data: [10, 20, 30],
+ *       backgroundColor: [
+ *         "rgba(75,192,192,1)",
+ *         "rgba(255,99,132,1)",
+ *         "rgba(153,102,255,1)",
+ *       ],
+ *       borderWidth: 2,
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function PieChart({ labels, datasets, height, disableLogo, logoSRC }: Props): React.JSX.Element;
+
+export { BarChart, PieChart };

package/dist/charts/index.d.ts

@@ -0,0 +1,146 @@
+import * as React from 'react';
+
+interface Props$1 {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: number[];
+        backgroundColor: string;
+        borderColor?: string;
+        borderWidth?: number;
+        type?: "line";
+        order?: number;
+        tension?: number;
+        pointRadius?: number;
+        fill?: boolean;
+    }[];
+    height?: number;
+}
+/**
+ * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)
+ *
+ * @component BarChart
+ *
+ * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).
+ * @param {Array<{
+ *   label: string,
+ *   data: number[],
+ *   backgroundColor: string,
+ *   borderColor?: string,
+ *   borderWidth?: number,
+ *   type?: "line",
+ *   order?: number,
+ *   tension?: number,
+ *   pointRadius?: number,
+ *   fill?: boolean
+ * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.
+ *   - label: عنوان داده‌ها (نمایش در legend)
+ *   - data: آرایه‌ای از مقادیر هر سری
+ *   - backgroundColor: رنگ میله یا خط
+ *   - borderColor: (اختیاری) رنگ خط دور میله یا خط
+ *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط
+ *   - type: (اختیاری) اگر "line" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)
+ *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)
+ *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)
+ *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)
+ *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)
+ *
+ * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)
+ *
+ * @description
+ * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.
+ * - پشتیبانی از فونت وزیر و راست‌چین
+ * - ریسپانسیو و مناسب صفحات فارسی
+ * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)
+ * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری
+ *
+ * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی
+ *
+ * @example
+ * ```jsx
+ * <BarChart
+ *   labels={["شنبه", "یکشنبه", "دوشنبه"]}
+ *   datasets={[
+ *     {
+ *       label: "فروش",
+ *       data: [10, 20, 15],
+ *       backgroundColor: "rgba(75,192,192,0.7)",
+ *     },
+ *     {
+ *       label: "میانگین",
+ *       data: [12, 18, 14],
+ *       borderColor: "red",
+ *       backgroundColor: "transparent",
+ *       type: "line",
+ *       order: 0,
+ *       borderWidth: 3,
+ *       tension: 0.4,
+ *       pointRadius: 4,
+ *       fill: false,
+ *     },
+ *   ]}
+ *   height={400}
+ * />
+ * ```
+ */
+declare function BarChart({ labels, datasets, height }: Props$1): React.JSX.Element;
+
+interface Props {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: number[];
+        backgroundColor: string | string[];
+        borderWidth?: number;
+    }[];
+    height?: number;
+    disableLogo?: boolean;
+    logoSRC?: string;
+}
+/**
+ * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)
+ *
+ * @component PieChart
+ *
+ * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.
+ * @param {Array<{
+ *   label: string,
+ *   data: number[],
+ *   backgroundColor: string[],
+ *   borderWidth?: number
+ * }>} datasets - آرایه‌ای شامل یک آبجکت داده برای مقداردهی بخش‌های نمودار.
+ *   - label: عنوان داده‌ها (نمایش در legend)
+ *   - data: آرایه‌ای از مقادیر هر بخش
+ *   - backgroundColor: آرایه‌ای از رنگ‌ها برای هر بخش
+ *   - borderWidth: (اختیاری) ضخامت خط دور هر بخش
+ * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)
+ *
+ * @description
+ * این کامپوننت یک نمودار دایره‌ای با قابلیت شخصی‌سازی رنگ، داده و فونت (هماهنگ با وزیر) است.
+ * - ریسپانسیو و مناسب صفحات فارسی
+ * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار
+ *
+ * @returns {JSX.Element} یک نمودار دایره‌ای با داده‌های ورودی
+ *
+ * @example
+ * ```jsx
+ * <PieChart
+ *   labels={["بخش اول", "بخش دوم", "بخش سوم"]}
+ *   datasets={[
+ *     {
+ *       label: "مقدار",
+ *       data: [10, 20, 30],
+ *       backgroundColor: [
+ *         "rgba(75,192,192,1)",
+ *         "rgba(255,99,132,1)",
+ *         "rgba(153,102,255,1)",
+ *       ],
+ *       borderWidth: 2,
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function PieChart({ labels, datasets, height, disableLogo, logoSRC }: Props): React.JSX.Element;
+
+export { BarChart, PieChart };

package/dist/charts/index.js

@@ -0,0 +1,193 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/charts/index.ts
+var charts_exports = {};
+__export(charts_exports, {
+  BarChart: () => BarChart,
+  PieChart: () => PieChart
+});
+module.exports = __toCommonJS(charts_exports);
+
+// react-shim.js
+var React = __toESM(require("react"));
+
+// src/charts/bar/index.tsx
+var import_react_chartjs_2 = require("react-chartjs-2");
+var import_chart = require("chart.js");
+var import_material = require("@mui/material");
+import_chart.Chart.register(
+  import_chart.BarElement,
+  import_chart.LineElement,
+  import_chart.PointElement,
+  import_chart.CategoryScale,
+  import_chart.LinearScale,
+  import_chart.Tooltip,
+  import_chart.Legend
+);
+function BarChart({ labels, datasets, height }) {
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        ticks: {
+          font: {
+            family: "'Vazir', sans-serif",
+            size: 14
+          }
+        }
+      },
+      x: {
+        ticks: {
+          autoSkip: false,
+          font: {
+            family: "'Vazir', sans-serif",
+            size: 13
+          }
+        }
+      }
+    },
+    plugins: {
+      tooltip: {
+        bodyFont: {
+          family: "'Vazir', sans-serif",
+          size: 14
+        },
+        titleFont: {
+          family: "'Vazir', sans-serif",
+          size: 16
+        }
+      },
+      legend: {
+        labels: {
+          generateLabels: function(chart) {
+            const labels2 = import_chart.Chart.defaults.plugins.legend.labels.generateLabels(chart);
+            return labels2.map((label) => ({
+              ...label,
+              text: "     " + label.text + " ",
+              boxWidth: 40,
+              boxHeight: 20
+            }));
+          },
+          padding: 15,
+          usePointStyle: true,
+          font: {
+            size: 16,
+            family: "'Vazir', sans-serif"
+          },
+          boxWidth: 40,
+          paddingBottom: 10
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ React.createElement(import_material.Box, { height: height ?? 600 }, /* @__PURE__ */ React.createElement(import_react_chartjs_2.Chart, { type: "bar", data: { labels, datasets }, options }));
+}
+
+// src/charts/pie/index.tsx
+var import_react_chartjs_22 = require("react-chartjs-2");
+var import_chart2 = require("chart.js");
+var import_material2 = require("@mui/material");
+var import_image = __toESM(require("next/image"));
+import_chart2.Chart.register(import_chart2.ArcElement, import_chart2.Tooltip, import_chart2.Legend);
+function PieChart({ labels, datasets, height, disableLogo, logoSRC }) {
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    cutout: !disableLogo ? "59%" : "0%",
+    plugins: {
+      tooltip: {
+        bodyFont: {
+          family: "'Vazir', sans-serif",
+          size: 14
+        },
+        titleFont: {
+          family: "'Vazir', sans-serif",
+          size: 16
+        }
+      },
+      legend: {
+        labels: {
+          padding: 15,
+          usePointStyle: true,
+          font: {
+            size: 16,
+            family: "'Vazir', sans-serif"
+          },
+          boxWidth: 40,
+          paddingBottom: 10
+        }
+      }
+    }
+  };
+  const CenterComponent = () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          padding: "10px",
+          borderRadius: "8px",
+          textAlign: "center",
+          width: 220
+        }
+      },
+      /* @__PURE__ */ React.createElement(import_image.default, { alt: "", width: 220, height: 220, src: logoSRC ?? "/assets/images/pilogo.png", unoptimized: true })
+    );
+  };
+  return /* @__PURE__ */ React.createElement(import_material2.Box, { height: height ?? 600, sx: { position: "relative" } }, /* @__PURE__ */ React.createElement(
+    import_react_chartjs_22.Pie,
+    {
+      data: {
+        labels,
+        datasets
+      },
+      options
+    }
+  ), !disableLogo && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "53%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        pointerEvents: "none"
+        // جلوگیری از دریافت event روی این لایه
+      }
+    },
+    /* @__PURE__ */ React.createElement(CenterComponent, null)
+  ));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BarChart,
+  PieChart
+});
+//# sourceMappingURL=index.js.map

package/dist/charts/index.js.map

@@ -0,0 +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","import { Chart } from \"react-chartjs-2\";\nimport {\n  Chart as ChartJS,\n  BarElement,\n  LineElement,\n  PointElement,\n  CategoryScale,\n  LinearScale,\n  Tooltip,\n  Legend,\n  Chart as ChartType,\n} from \"chart.js\";\nimport { Box } from \"@mui/material\";\n\nChartJS.register(\n  BarElement,\n  LineElement,\n  PointElement,\n  CategoryScale,\n  LinearScale,\n  Tooltip,\n  Legend\n);\n\ninterface Props {\n  labels: string[];\n  datasets: {\n    label: string;\n    data: number[];\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  height?: number;\n}\n/**\n * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)\n *\n * @component BarChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).\n * @param {Array<{\n *   label: string,\n *   data: number[],\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 * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.\n *   - label: عنوان داده‌ها (نمایش در legend)\n *   - data: آرایه‌ای از مقادیر هر سری\n *   - backgroundColor: رنگ میله یا خط\n *   - borderColor: (اختیاری) رنگ خط دور میله یا خط\n *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\n *   - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)\n *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)\n *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)\n *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)\n *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)\n *\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.\n * - پشتیبانی از فونت وزیر و راست‌چین\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)\n * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری\n *\n * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی\n *\n * @example\n * ```jsx\n * <BarChart\n *   labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\n *   datasets={[\n *     {\n *       label: \"فروش\",\n *       data: [10, 20, 15],\n *       backgroundColor: \"rgba(75,192,192,0.7)\",\n *     },\n *     {\n *       label: \"میانگین\",\n *       data: [12, 18, 14],\n *       borderColor: \"red\",\n *       backgroundColor: \"transparent\",\n *       type: \"line\",\n *       order: 0,\n *       borderWidth: 3,\n *       tension: 0.4,\n *       pointRadius: 4,\n *       fill: false,\n *     },\n *   ]}\n *   height={400}\n * />\n * ```\n */\nexport default function BarChart({ labels, datasets, height }: Props) {\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    scales: {\n      y: {\n        ticks: {\n          font: {\n            family: \"'Vazir', sans-serif\",\n            size: 14,\n          },\n        },\n      },\n      x: {\n        ticks: {\n          autoSkip: false,\n          font: {\n            family: \"'Vazir', sans-serif\",\n            size: 13,\n          },\n        },\n      },\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          generateLabels: function (chart: ChartType) {\n            const labels =\n              ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\n            return labels.map((label) => ({\n              ...label,\n              text: \"     \" + label.text + \" \",\n              boxWidth: 40,\n              boxHeight: 20,\n            }));\n          },\n          padding: 15,\n          usePointStyle: true,\n          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n        },\n      },\n    },\n  };\n\n  return (\n    <Box height={height ?? 600}>\n      <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\n    </Box>\n  );\n}\n","import { 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\";\nChartJS.register(ArcElement, Tooltip, Legend);\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}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\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 * @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 * />\n * ```\n */\nexport default function PieChart({ labels, datasets, height , disableLogo,logoSRC }: 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          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n        },\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 alt=\"\" width={220} height={220} src={logoSRC ?? \"/assets/images/pilogo.png\"} unoptimized/>\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 && <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    </Box>\n  );\n}\n"],"mappings":"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","names":["ChartJS","labels","import_react_chartjs_2","import_chart","import_material","ChartJS","Image"]}

package/dist/charts/index.mjs

@@ -0,0 +1,164 @@
+// react-shim.js
+import * as React from "react";
+
+// src/charts/bar/index.tsx
+import { Chart } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  BarElement,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend
+} from "chart.js";
+import { Box } from "@mui/material";
+ChartJS.register(
+  BarElement,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend
+);
+function BarChart({ labels, datasets, height }) {
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        ticks: {
+          font: {
+            family: "'Vazir', sans-serif",
+            size: 14
+          }
+        }
+      },
+      x: {
+        ticks: {
+          autoSkip: false,
+          font: {
+            family: "'Vazir', sans-serif",
+            size: 13
+          }
+        }
+      }
+    },
+    plugins: {
+      tooltip: {
+        bodyFont: {
+          family: "'Vazir', sans-serif",
+          size: 14
+        },
+        titleFont: {
+          family: "'Vazir', sans-serif",
+          size: 16
+        }
+      },
+      legend: {
+        labels: {
+          generateLabels: function(chart) {
+            const labels2 = ChartJS.defaults.plugins.legend.labels.generateLabels(chart);
+            return labels2.map((label) => ({
+              ...label,
+              text: "     " + label.text + " ",
+              boxWidth: 40,
+              boxHeight: 20
+            }));
+          },
+          padding: 15,
+          usePointStyle: true,
+          font: {
+            size: 16,
+            family: "'Vazir', sans-serif"
+          },
+          boxWidth: 40,
+          paddingBottom: 10
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Box, { height: height ?? 600 }, /* @__PURE__ */ React.createElement(Chart, { type: "bar", data: { labels, datasets }, options }));
+}
+
+// src/charts/pie/index.tsx
+import { Pie } from "react-chartjs-2";
+import { Chart as ChartJS2, ArcElement, Tooltip as Tooltip2, Legend as Legend2 } from "chart.js";
+import { Box as Box2 } from "@mui/material";
+import Image from "next/image";
+ChartJS2.register(ArcElement, Tooltip2, Legend2);
+function PieChart({ labels, datasets, height, disableLogo, logoSRC }) {
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    cutout: !disableLogo ? "59%" : "0%",
+    plugins: {
+      tooltip: {
+        bodyFont: {
+          family: "'Vazir', sans-serif",
+          size: 14
+        },
+        titleFont: {
+          family: "'Vazir', sans-serif",
+          size: 16
+        }
+      },
+      legend: {
+        labels: {
+          padding: 15,
+          usePointStyle: true,
+          font: {
+            size: 16,
+            family: "'Vazir', sans-serif"
+          },
+          boxWidth: 40,
+          paddingBottom: 10
+        }
+      }
+    }
+  };
+  const CenterComponent = () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          padding: "10px",
+          borderRadius: "8px",
+          textAlign: "center",
+          width: 220
+        }
+      },
+      /* @__PURE__ */ React.createElement(Image, { alt: "", width: 220, height: 220, src: logoSRC ?? "/assets/images/pilogo.png", unoptimized: true })
+    );
+  };
+  return /* @__PURE__ */ React.createElement(Box2, { height: height ?? 600, sx: { position: "relative" } }, /* @__PURE__ */ React.createElement(
+    Pie,
+    {
+      data: {
+        labels,
+        datasets
+      },
+      options
+    }
+  ), !disableLogo && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "53%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        pointerEvents: "none"
+        // جلوگیری از دریافت event روی این لایه
+      }
+    },
+    /* @__PURE__ */ React.createElement(CenterComponent, null)
+  ));
+}
+export {
+  BarChart,
+  PieChart
+};
+//# sourceMappingURL=index.mjs.map