@mamrp/components 1.4.16 → 1.5.0
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 +0 -0
- package/dist/charts/index.d.ts +0 -0
- package/dist/charts/index.js +0 -0
- package/dist/charts/index.js.map +1 -1
- package/dist/charts/index.mjs +0 -0
- package/dist/charts/index.mjs.map +1 -1
- package/dist/date-pickers/index.d.mts +0 -0
- package/dist/date-pickers/index.d.ts +0 -0
- package/dist/date-pickers/index.js +0 -0
- package/dist/date-pickers/index.js.map +0 -0
- package/dist/date-pickers/index.mjs +0 -0
- package/dist/date-pickers/index.mjs.map +0 -0
- package/dist/index.d.mts +0 -0
- package/dist/index.d.ts +0 -0
- package/dist/index.js +48 -48
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +33 -34
- package/dist/index.mjs.map +1 -1
- package/dist/pagination/index.d.mts +0 -0
- package/dist/pagination/index.d.ts +0 -0
- package/dist/pagination/index.js +0 -0
- package/dist/pagination/index.js.map +0 -0
- package/dist/pagination/index.mjs +0 -0
- package/dist/pagination/index.mjs.map +0 -0
- package/dist/selectors/index.d.mts +0 -0
- package/dist/selectors/index.d.ts +0 -0
- package/dist/selectors/index.js +0 -0
- package/dist/selectors/index.js.map +1 -1
- package/dist/selectors/index.mjs +0 -0
- package/dist/selectors/index.mjs.map +1 -1
- package/package.json +24 -24
package/dist/charts/index.d.mts
CHANGED
|
File without changes
|
package/dist/charts/index.d.ts
CHANGED
|
File without changes
|
package/dist/charts/index.js
CHANGED
|
File without changes
|
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\";\nimport { Chart } from \"react-chartjs-2\";\nimport {\n Chart as ChartJS,\n CategoryScale,\n LinearScale,\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 BarElement,\n LineElement,\n PointElement,\n Tooltip,\n Legend,\n BarController,\n LineController\n);\n\ninterface Props {\n labels: string[];\n datasets: {\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 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 datalabels: {\n display: false, // ← غیرفعال\n },\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","'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}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [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 * @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({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = 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 font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n datalabels: {\n display: showDataLabels,\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: (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\";\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}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [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 * @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({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = 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 font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n datalabels: {\n display: showDataLabels,\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: (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"]}
|
package/dist/charts/index.mjs
CHANGED
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["import * as React from \"react\";\nexport { React };\n","\"use client\";\nimport { Chart } from \"react-chartjs-2\";\nimport {\n Chart as ChartJS,\n CategoryScale,\n LinearScale,\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 BarElement,\n LineElement,\n PointElement,\n Tooltip,\n Legend,\n BarController,\n LineController\n);\n\ninterface Props {\n labels: string[];\n datasets: {\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 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 datalabels: {\n display: false, // ← غیرفعال\n },\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","'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}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [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 * @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({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = 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 font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n datalabels: {\n display: showDataLabels,\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: (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,YAAY,WAAW;;;ACCvB,SAAS,aAAa;AACtB;AAAA,EACE,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,WAAW;AAEpB,QAAQ;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,kBAAMA,UACJ,QAAQ,SAAS,QAAQ,OAAO,OAAO,eAAe,KAAK;AAC7D,mBAAOA,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,OAAI,QAAQ,UAAU,OACrB,oCAAC,SAAM,MAAK,OAAM,MAAM,EAAE,QAAQ,SAAS,GAAG,SAAkB,CAClE;AAEJ;;;AClLA,SAAS,WAAW;AACpB,SAAS,SAASC,UAAS,YAAY,WAAAC,UAAS,UAAAC,eAAqB;AAErE,SAAS,OAAAC,YAAW;AACpB,OAAO,WAAW;AAClB,OAAO,qBAAqB;AAE5BH,SAAQ,SAAS,YAAYC,UAASC,SAAQ,eAAe;AA4D9C,SAAR,SAA0B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,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,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,QAAQ;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,QACT,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,CAAC,UAAmB,UAAU,IAAI,KAAK;AAAA,MACpD;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;AAAA;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,oCAACC,MAAA,EAAI,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":["labels","ChartJS","Tooltip","Legend","Box"]}
|
|
1
|
+
{"version":3,"sources":["../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["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}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [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 * @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({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = 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 font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n datalabels: {\n display: showDataLabels,\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: (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":["labels","ChartJS","Tooltip","Legend","Box"]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/dist/index.d.mts
CHANGED
|
File without changes
|
package/dist/index.d.ts
CHANGED
|
File without changes
|
package/dist/index.js
CHANGED
|
@@ -144,7 +144,7 @@ function LicensePlate({
|
|
|
144
144
|
readOnly = true,
|
|
145
145
|
size
|
|
146
146
|
}) {
|
|
147
|
-
const
|
|
147
|
+
const theme3 = (0, import_material.useTheme)();
|
|
148
148
|
const [open, setOpen] = (0, import_react.useState)(false);
|
|
149
149
|
const [selectedValue, setSelectedValue] = (0, import_react.useState)("");
|
|
150
150
|
const [inputValues, setInputValues] = (0, import_react.useState)({
|
|
@@ -271,7 +271,7 @@ function LicensePlate({
|
|
|
271
271
|
maxLength: 2,
|
|
272
272
|
placeholder: "- -",
|
|
273
273
|
style: {
|
|
274
|
-
color:
|
|
274
|
+
color: theme3.palette.text.primary,
|
|
275
275
|
width: "24px",
|
|
276
276
|
textAlign: "center",
|
|
277
277
|
backgroundColor: "transparent",
|
|
@@ -321,7 +321,7 @@ function LicensePlate({
|
|
|
321
321
|
maxLength: 3,
|
|
322
322
|
placeholder: "-",
|
|
323
323
|
style: {
|
|
324
|
-
color:
|
|
324
|
+
color: theme3.palette.text.primary,
|
|
325
325
|
width: "28px",
|
|
326
326
|
textAlign: "center",
|
|
327
327
|
backgroundColor: "transparent",
|
|
@@ -423,7 +423,7 @@ function LicensePlate({
|
|
|
423
423
|
maxLength: 3,
|
|
424
424
|
placeholder: "- - -",
|
|
425
425
|
style: {
|
|
426
|
-
color:
|
|
426
|
+
color: theme3.palette.text.primary,
|
|
427
427
|
width: "40px",
|
|
428
428
|
// w-10
|
|
429
429
|
textAlign: "center",
|
|
@@ -470,7 +470,7 @@ function LicensePlate({
|
|
|
470
470
|
maxLength: 2,
|
|
471
471
|
placeholder: "- -",
|
|
472
472
|
style: {
|
|
473
|
-
color:
|
|
473
|
+
color: theme3.palette.text.primary,
|
|
474
474
|
width: "24px",
|
|
475
475
|
textAlign: "center",
|
|
476
476
|
backgroundColor: "transparent",
|
|
@@ -741,7 +741,7 @@ function AdvancedSearchButton({
|
|
|
741
741
|
paddingY,
|
|
742
742
|
fontSize
|
|
743
743
|
}) {
|
|
744
|
-
const
|
|
744
|
+
const theme3 = (0, import_material4.useTheme)();
|
|
745
745
|
return /* @__PURE__ */ import_react3.default.createElement(
|
|
746
746
|
import_material4.Button,
|
|
747
747
|
{
|
|
@@ -751,7 +751,7 @@ function AdvancedSearchButton({
|
|
|
751
751
|
},
|
|
752
752
|
startIcon: /* @__PURE__ */ import_react3.default.createElement(AnimatedIcon, { isShowFilter }),
|
|
753
753
|
sx: {
|
|
754
|
-
color:
|
|
754
|
+
color: theme3.palette.text.primary ?? color,
|
|
755
755
|
borderRadius,
|
|
756
756
|
paddingY,
|
|
757
757
|
fontSize
|
|
@@ -894,7 +894,7 @@ function ConfirmationDialog({
|
|
|
894
894
|
position: "absolute",
|
|
895
895
|
right: 8,
|
|
896
896
|
top: 8,
|
|
897
|
-
color: (
|
|
897
|
+
color: (theme3) => theme3.palette.grey[500]
|
|
898
898
|
}
|
|
899
899
|
},
|
|
900
900
|
/* @__PURE__ */ React7.createElement(import_md.MdClose, null)
|
|
@@ -1008,7 +1008,7 @@ var TimePickerComponent = ({
|
|
|
1008
1008
|
autoRefresh,
|
|
1009
1009
|
disabled = false
|
|
1010
1010
|
}) => {
|
|
1011
|
-
const
|
|
1011
|
+
const theme3 = (0, import_material8.useTheme)();
|
|
1012
1012
|
const initialHour = value ? parseInt(value.split(":")[0]) : null;
|
|
1013
1013
|
const initialMinute = value ? parseInt(value.split(":")[1]) : null;
|
|
1014
1014
|
const [isModalOpen, setIsModalOpen] = (0, import_react6.useState)(false);
|
|
@@ -1105,7 +1105,7 @@ var TimePickerComponent = ({
|
|
|
1105
1105
|
},
|
|
1106
1106
|
InputProps: {
|
|
1107
1107
|
...!disabled && {
|
|
1108
|
-
endAdornment: /* @__PURE__ */ React.createElement(import_material8.InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(import_Tooltip.default, { title: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646" }, /* @__PURE__ */ React.createElement(import_material8.IconButton, { onClick: () => setIsModalOpen(true) }, /* @__PURE__ */ React.createElement(import_common.Clock, { size: 22, color:
|
|
1108
|
+
endAdornment: /* @__PURE__ */ React.createElement(import_material8.InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(import_Tooltip.default, { title: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646" }, /* @__PURE__ */ React.createElement(import_material8.IconButton, { onClick: () => setIsModalOpen(true) }, /* @__PURE__ */ React.createElement(import_common.Clock, { size: 22, color: theme3.palette.text.primary }))))
|
|
1109
1109
|
}
|
|
1110
1110
|
},
|
|
1111
1111
|
sx: { width: fullwidth ? "100%" : "8rem" },
|
|
@@ -1139,7 +1139,7 @@ var TimePickerComponent = ({
|
|
|
1139
1139
|
position: "absolute",
|
|
1140
1140
|
right: 8,
|
|
1141
1141
|
top: 8,
|
|
1142
|
-
color: (
|
|
1142
|
+
color: (theme4) => theme4.palette.grey[500]
|
|
1143
1143
|
}
|
|
1144
1144
|
},
|
|
1145
1145
|
/* @__PURE__ */ React.createElement(import_md2.MdClose, null)
|
|
@@ -2882,7 +2882,7 @@ function ConfirmationDialog2({
|
|
|
2882
2882
|
position: "absolute",
|
|
2883
2883
|
right: 8,
|
|
2884
2884
|
top: 8,
|
|
2885
|
-
color: (
|
|
2885
|
+
color: (theme3) => theme3.palette.grey[500]
|
|
2886
2886
|
}
|
|
2887
2887
|
},
|
|
2888
2888
|
/* @__PURE__ */ React15.createElement(import_md4.MdClose, null)
|
|
@@ -2935,7 +2935,7 @@ function NoResult({
|
|
|
2935
2935
|
description,
|
|
2936
2936
|
sx = {}
|
|
2937
2937
|
}) {
|
|
2938
|
-
const
|
|
2938
|
+
const theme3 = (0, import_material16.useTheme)();
|
|
2939
2939
|
return /* @__PURE__ */ import_react17.default.createElement(
|
|
2940
2940
|
import_material16.Card,
|
|
2941
2941
|
{
|
|
@@ -2943,7 +2943,7 @@ function NoResult({
|
|
|
2943
2943
|
width: "100%",
|
|
2944
2944
|
minWidth: 300,
|
|
2945
2945
|
borderRadius: "12px",
|
|
2946
|
-
border: `1px solid ${
|
|
2946
|
+
border: `1px solid ${theme3.palette.secondary.light}`
|
|
2947
2947
|
}
|
|
2948
2948
|
},
|
|
2949
2949
|
/* @__PURE__ */ import_react17.default.createElement(
|
|
@@ -4267,6 +4267,7 @@ function ImageViewer({
|
|
|
4267
4267
|
}
|
|
4268
4268
|
|
|
4269
4269
|
// src/enhanced-upload-image/index.tsx
|
|
4270
|
+
var import_theme2 = __toESM(require("@mamrp/layout/theme"));
|
|
4270
4271
|
var UploadImage2 = ({
|
|
4271
4272
|
placeholder,
|
|
4272
4273
|
name,
|
|
@@ -4279,7 +4280,6 @@ var UploadImage2 = ({
|
|
|
4279
4280
|
allowGallery = false,
|
|
4280
4281
|
imageFit = "cover"
|
|
4281
4282
|
}) => {
|
|
4282
|
-
const theme2 = (0, import_material24.useTheme)();
|
|
4283
4283
|
const [viewerOpen, setViewerOpen] = (0, import_react27.useState)(false);
|
|
4284
4284
|
const [viewerSrc, setViewerSrc] = (0, import_react27.useState)("");
|
|
4285
4285
|
const compressImage = (file, quality = 0.9, maxWidth = 1600, maxHeight = 1600) => {
|
|
@@ -4374,13 +4374,13 @@ var UploadImage2 = ({
|
|
|
4374
4374
|
height,
|
|
4375
4375
|
borderRadius: 3,
|
|
4376
4376
|
overflow: "hidden",
|
|
4377
|
-
backgroundColor: selectedImage ? "transparent" : (0, import_material24.alpha)(
|
|
4378
|
-
border: selectedImage ? `2px solid ${(0, import_material24.alpha)(
|
|
4377
|
+
backgroundColor: selectedImage ? "transparent" : (0, import_material24.alpha)(import_theme2.default.palette.primary.main, 0.02),
|
|
4378
|
+
border: selectedImage ? `2px solid ${(0, import_material24.alpha)(import_theme2.default.palette.primary.main, 0.1)}` : `2px dashed ${(0, import_material24.alpha)(import_theme2.default.palette.primary.main, 0.2)}`,
|
|
4379
4379
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4380
4380
|
cursor: allowGallery ? "default" : "pointer",
|
|
4381
4381
|
"&:hover": {
|
|
4382
|
-
borderColor: selectedImage ? (0, import_material24.alpha)(
|
|
4383
|
-
backgroundColor: selectedImage ? "transparent" : (0, import_material24.alpha)(
|
|
4382
|
+
borderColor: selectedImage ? (0, import_material24.alpha)(import_theme2.default.palette.primary.main, 0.3) : (0, import_material24.alpha)(import_theme2.default.palette.primary.main, 0.4),
|
|
4383
|
+
backgroundColor: selectedImage ? "transparent" : (0, import_material24.alpha)(import_theme2.default.palette.primary.main, 0.04)
|
|
4384
4384
|
}
|
|
4385
4385
|
}
|
|
4386
4386
|
},
|
|
@@ -4416,17 +4416,17 @@ var UploadImage2 = ({
|
|
|
4416
4416
|
position: "absolute",
|
|
4417
4417
|
top: 12,
|
|
4418
4418
|
right: 12,
|
|
4419
|
-
backgroundColor: (0, import_material24.alpha)(
|
|
4419
|
+
backgroundColor: (0, import_material24.alpha)(import_theme2.default.palette.error.main, 0.9),
|
|
4420
4420
|
color: "white",
|
|
4421
4421
|
width: 40,
|
|
4422
4422
|
height: 40,
|
|
4423
4423
|
"&:hover": {
|
|
4424
|
-
backgroundColor:
|
|
4424
|
+
backgroundColor: import_theme2.default.palette.error.main,
|
|
4425
4425
|
transform: "scale(1.1)"
|
|
4426
4426
|
},
|
|
4427
4427
|
transition: "all 0.2s ease",
|
|
4428
4428
|
boxShadow: `0 4px 12px ${(0, import_material24.alpha)(
|
|
4429
|
-
|
|
4429
|
+
import_theme2.default.palette.error.main,
|
|
4430
4430
|
0.3
|
|
4431
4431
|
)}`
|
|
4432
4432
|
}
|
|
@@ -4451,7 +4451,7 @@ var UploadImage2 = ({
|
|
|
4451
4451
|
height: 64,
|
|
4452
4452
|
borderRadius: "50%",
|
|
4453
4453
|
backgroundColor: (0, import_material24.alpha)(
|
|
4454
|
-
|
|
4454
|
+
import_theme2.default.palette.successLight.main,
|
|
4455
4455
|
0.1
|
|
4456
4456
|
),
|
|
4457
4457
|
display: "flex",
|
|
@@ -4464,7 +4464,7 @@ var UploadImage2 = ({
|
|
|
4464
4464
|
import_md8.MdAddPhotoAlternate,
|
|
4465
4465
|
{
|
|
4466
4466
|
size: 32,
|
|
4467
|
-
color:
|
|
4467
|
+
color: import_theme2.default.palette.successLight.main,
|
|
4468
4468
|
style: { opacity: 0.8 }
|
|
4469
4469
|
}
|
|
4470
4470
|
)
|
|
@@ -4473,7 +4473,7 @@ var UploadImage2 = ({
|
|
|
4473
4473
|
{
|
|
4474
4474
|
variant: "h6",
|
|
4475
4475
|
sx: {
|
|
4476
|
-
color:
|
|
4476
|
+
color: import_theme2.default.palette.text.primary,
|
|
4477
4477
|
fontWeight: 500,
|
|
4478
4478
|
textAlign: "center",
|
|
4479
4479
|
mb: 1
|
|
@@ -4485,7 +4485,7 @@ var UploadImage2 = ({
|
|
|
4485
4485
|
{
|
|
4486
4486
|
variant: "body2",
|
|
4487
4487
|
sx: {
|
|
4488
|
-
color:
|
|
4488
|
+
color: import_theme2.default.palette.text.secondary,
|
|
4489
4489
|
textAlign: "center",
|
|
4490
4490
|
fontSize: "0.875rem"
|
|
4491
4491
|
}
|
|
@@ -4507,20 +4507,20 @@ var UploadImage2 = ({
|
|
|
4507
4507
|
textTransform: "none",
|
|
4508
4508
|
fontWeight: 600,
|
|
4509
4509
|
boxShadow: `0 4px 12px ${(0, import_material24.alpha)(
|
|
4510
|
-
|
|
4510
|
+
import_theme2.default.palette.successLight.main,
|
|
4511
4511
|
0.3
|
|
4512
4512
|
)}`,
|
|
4513
4513
|
zIndex: 1,
|
|
4514
4514
|
transition: "all 0.2s ease",
|
|
4515
4515
|
"&:hover": {
|
|
4516
4516
|
boxShadow: `0 6px 20px ${(0, import_material24.alpha)(
|
|
4517
|
-
|
|
4517
|
+
import_theme2.default.palette.successLight.main,
|
|
4518
4518
|
0.4
|
|
4519
4519
|
)}`,
|
|
4520
4520
|
transform: "translateY(-1px)"
|
|
4521
4521
|
}
|
|
4522
4522
|
},
|
|
4523
|
-
color: "
|
|
4523
|
+
color: "success"
|
|
4524
4524
|
},
|
|
4525
4525
|
"\u062F\u0648\u0631\u0628\u06CC\u0646"
|
|
4526
4526
|
), /* @__PURE__ */ import_react27.default.createElement(
|
|
@@ -4541,13 +4541,13 @@ var UploadImage2 = ({
|
|
|
4541
4541
|
transition: "all 0.2s ease",
|
|
4542
4542
|
"&:hover": {
|
|
4543
4543
|
boxShadow: `0 6px 20px ${(0, import_material24.alpha)(
|
|
4544
|
-
|
|
4544
|
+
import_theme2.default.palette.successLight.main,
|
|
4545
4545
|
0.4
|
|
4546
4546
|
)}`,
|
|
4547
4547
|
transform: "translateY(-1px)"
|
|
4548
4548
|
}
|
|
4549
4549
|
},
|
|
4550
|
-
color: "
|
|
4550
|
+
color: "success"
|
|
4551
4551
|
},
|
|
4552
4552
|
"\u06AF\u0627\u0644\u0631\u06CC"
|
|
4553
4553
|
))
|
|
@@ -4597,8 +4597,8 @@ var UploadImage2 = ({
|
|
|
4597
4597
|
mt: 1.5,
|
|
4598
4598
|
p: 1.5,
|
|
4599
4599
|
borderRadius: 1,
|
|
4600
|
-
backgroundColor: (0, import_material24.alpha)(
|
|
4601
|
-
border: `1px solid ${(0, import_material24.alpha)(
|
|
4600
|
+
backgroundColor: (0, import_material24.alpha)(import_theme2.default.palette.error.main, 0.05),
|
|
4601
|
+
border: `1px solid ${(0, import_material24.alpha)(import_theme2.default.palette.error.main, 0.2)}`
|
|
4602
4602
|
}
|
|
4603
4603
|
},
|
|
4604
4604
|
/* @__PURE__ */ import_react27.default.createElement(
|
|
@@ -4640,8 +4640,8 @@ var import_react28 = require("react");
|
|
|
4640
4640
|
function Page({
|
|
4641
4641
|
data
|
|
4642
4642
|
}) {
|
|
4643
|
-
const Accordion = (0, import_styles2.styled)((props) => /* @__PURE__ */ React.createElement(import_Accordion.default, { disableGutters: true, elevation: 0, square: true, ...props }))(({ theme:
|
|
4644
|
-
border: `1px solid ${
|
|
4643
|
+
const Accordion = (0, import_styles2.styled)((props) => /* @__PURE__ */ React.createElement(import_Accordion.default, { disableGutters: true, elevation: 0, square: true, ...props }))(({ theme: theme3 }) => ({
|
|
4644
|
+
border: `1px solid ${theme3.palette.divider}`,
|
|
4645
4645
|
"&:not(:last-child)": {
|
|
4646
4646
|
borderBottom: 0
|
|
4647
4647
|
},
|
|
@@ -4649,21 +4649,21 @@ function Page({
|
|
|
4649
4649
|
display: "none"
|
|
4650
4650
|
}
|
|
4651
4651
|
}));
|
|
4652
|
-
const AccordionSummary = (0, import_styles2.styled)((props) => /* @__PURE__ */ React.createElement(import_AccordionSummary.default, { expandIcon: /* @__PURE__ */ React.createElement(import_io2.IoIosArrowForward, null), ...props }))(({ theme:
|
|
4652
|
+
const AccordionSummary = (0, import_styles2.styled)((props) => /* @__PURE__ */ React.createElement(import_AccordionSummary.default, { expandIcon: /* @__PURE__ */ React.createElement(import_io2.IoIosArrowForward, null), ...props }))(({ theme: theme3 }) => ({
|
|
4653
4653
|
backgroundColor: "rgba(0, 0, 0, .03)",
|
|
4654
4654
|
flexDirection: "row-reverse",
|
|
4655
4655
|
[`& .${import_AccordionSummary.accordionSummaryClasses.expandIconWrapper}.${import_AccordionSummary.accordionSummaryClasses.expanded}`]: {
|
|
4656
4656
|
transform: "rotate(90deg)"
|
|
4657
4657
|
},
|
|
4658
4658
|
[`& .${import_AccordionSummary.accordionSummaryClasses.content}`]: {
|
|
4659
|
-
marginLeft:
|
|
4659
|
+
marginLeft: theme3.spacing(1)
|
|
4660
4660
|
},
|
|
4661
|
-
...
|
|
4661
|
+
...theme3.applyStyles("dark", {
|
|
4662
4662
|
backgroundColor: "rgba(255, 255, 255, .05)"
|
|
4663
4663
|
})
|
|
4664
4664
|
}));
|
|
4665
|
-
const AccordionDetails = (0, import_styles2.styled)(import_AccordionDetails.default)(({ theme:
|
|
4666
|
-
padding:
|
|
4665
|
+
const AccordionDetails = (0, import_styles2.styled)(import_AccordionDetails.default)(({ theme: theme3 }) => ({
|
|
4666
|
+
padding: theme3.spacing(2),
|
|
4667
4667
|
borderTop: "1px solid rgba(0, 0, 0, .125)"
|
|
4668
4668
|
}));
|
|
4669
4669
|
const [expanded, setExpanded] = (0, import_react28.useState)("");
|
|
@@ -4709,11 +4709,11 @@ var SwitchButton = ({
|
|
|
4709
4709
|
iconChecked,
|
|
4710
4710
|
iconUnchecked
|
|
4711
4711
|
}) => {
|
|
4712
|
-
const
|
|
4713
|
-
const isDarkMode =
|
|
4714
|
-
const CustomSwitch = (0, import_system8.styled)(import_material26.Switch)(({ theme:
|
|
4712
|
+
const theme3 = (0, import_material27.useTheme)();
|
|
4713
|
+
const isDarkMode = theme3.palette.mode === "dark";
|
|
4714
|
+
const CustomSwitch = (0, import_system8.styled)(import_material26.Switch)(({ theme: theme4 }) => ({
|
|
4715
4715
|
"& .MuiSwitch-switchBase.Mui-checked": {
|
|
4716
|
-
color:
|
|
4716
|
+
color: theme4.palette.primary.main
|
|
4717
4717
|
},
|
|
4718
4718
|
"& .MuiSwitch-switchBase": {
|
|
4719
4719
|
color: isDarkMode ? "rgba(220,220,220,1)" : "rgba(188,188,188,1)"
|
|
@@ -4724,16 +4724,16 @@ var SwitchButton = ({
|
|
|
4724
4724
|
border: isDarkMode ? "2px solid white" : "2px solid rgba(80,80,80, 1)"
|
|
4725
4725
|
}
|
|
4726
4726
|
}));
|
|
4727
|
-
const BoxContainer = (0, import_system8.styled)(import_material26.Box)(({ theme:
|
|
4727
|
+
const BoxContainer = (0, import_system8.styled)(import_material26.Box)(({ theme: theme4 }) => ({
|
|
4728
4728
|
display: "flex",
|
|
4729
4729
|
alignItems: "center",
|
|
4730
4730
|
backgroundColor: "rgba(188,188,188, 0.1)",
|
|
4731
4731
|
border: "2px solid rgba(200,200,200, 1)",
|
|
4732
4732
|
borderRadius: 10,
|
|
4733
4733
|
transition: "all 0.3s ease",
|
|
4734
|
-
paddingTop:
|
|
4735
|
-
paddingBottom:
|
|
4736
|
-
paddingLeft:
|
|
4734
|
+
paddingTop: theme4.spacing(0.1),
|
|
4735
|
+
paddingBottom: theme4.spacing(0.1),
|
|
4736
|
+
paddingLeft: theme4.spacing(1)
|
|
4737
4737
|
}));
|
|
4738
4738
|
const LabelContainer = (0, import_system8.styled)("div")({
|
|
4739
4739
|
transition: "all 0.2s ease",
|