diff --git a/src/components/dashboard/reports/BarChart.jsx b/src/components/dashboard/reports/BarChart.jsx
index 461b01f..9065dea 100644
--- a/src/components/dashboard/reports/BarChart.jsx
+++ b/src/components/dashboard/reports/BarChart.jsx
@@ -1,40 +1,91 @@
-import {Grid} from "@mui/material";
import Chart from "@/core/components/Chart";
-const DashboardReportsComponent = (props) => {
+function calculateGradientColor(percentage) {
+ let colorStops = [
+ {percent: 0, color: [199, 18, 5]}, // 0%: #3D0C11
+ {percent: 33, color: [240, 59, 47]}, // 33%: #D80032
+ {percent: 34, color: [237, 204, 101]}, // 34%: #F2F7A1
+ {percent: 66, color: [240, 184, 7]}, // 66%: #E9B824
+ {percent: 67, color: [167, 211, 151]}, // 67%: #B0D9B1
+ {percent: 100, color: [0, 91, 65]} // 100%: #005B41
+ ];
+
+ let segment;
+ for (let i = 0; i < colorStops.length - 1; i++) {
+ if (percentage >= colorStops[i].percent && percentage <= colorStops[i + 1].percent) {
+ segment = i;
+ break;
+ }
+ }
+
+ let color1 = colorStops[segment].color;
+ let color2 = colorStops[segment + 1].color;
+ let ratio = (percentage - colorStops[segment].percent) / (colorStops[segment + 1].percent - colorStops[segment].percent);
+
+ let color = [
+ Math.round(color1[0] + ratio * (color2[0] - color1[0])),
+ Math.round(color1[1] + ratio * (color2[1] - color1[1])),
+ Math.round(color1[2] + ratio * (color2[2] - color1[2]))
+ ];
+
+ return `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+
+}
+
+const BarChart = ({data}) => {
+ const usableArray = data.map(({name, data, ...rest}) => ({
+ x: name,
+ y: data,
+ ...rest
+ }));
+ let colorArray = data.map(obj => calculateGradientColor(obj.data));
const specialOption = {
title: {
- text: "مامامیا ماماسیتا",
- align: "center"
+ text: "درصد پیشرفت تسویه وام",
+ align: "center",
+ style: {
+ color: "#7e7e7e",
+ fontWeight: 500
+ }
},
+
plotOptions: {
bar: {
- borderRadius: 1,
+ distributed: true,
horizontal: false,
+ },
+ },
+ legend: {
+ show: false,
+ },
+ colors: colorArray,
+ xaxis: {
+ labels: {
+ rotate: 45,
+ rotateAlways: false,
+ trim: false,
+ style: {
+ fontWeight: 600,
+ fontSize: "11px",
+ colors: '#7e7e7e'
+ }
}
},
+ yaxis: {
+ min: 0,
+ max: 100
+ },
dataLabels: {
enabled: true
},
};
const series = [{
name: 'اطلاعی ندارم',
- data: [
- {x: 'قم', y: 300},
- {x: 'شیراز', y: 240},
- {x: 'اصفهان', y: 190},
- {x: 'تهران', y: 150},
- {x: 'کرج', y: 120},
- {x: 'زنجان', y: 250},
- {x: 'سیستان بلوچستان', y: 180},
- {x: 'هرمزگان', y: 260}
- ]
+ data: usableArray
}]
return (
-
-
-
+
)
};
-export default DashboardReportsComponent;
\ No newline at end of file
+export default BarChart;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/PolarChart.jsx b/src/components/dashboard/reports/PolarChart.jsx
index 4af549a..c7b0289 100644
--- a/src/components/dashboard/reports/PolarChart.jsx
+++ b/src/components/dashboard/reports/PolarChart.jsx
@@ -1,39 +1,21 @@
-import {Grid} from "@mui/material";
import Chart from "@/core/components/Chart";
-const DashboardReportsComponent = (props) => {
+const PolarChart = ({data}) => {
const specialOption = {
title: {
text: "مامامیا ماماسیتا",
align: "center"
},
- stroke: {
- colors: ['#fff']
- },
- responsive: [{
- breakpoint: 480,
- options: {
- chart: {
- width: 200
- },
- legend: {
- position: 'bottom'
- }
- }
- }],
+ labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
+ colors: ['red', 'blue', 'green', 'yellow', 'pink'],
dataLabels: {
enabled: true
},
};
- const series = [{
- name: 'اطلاعی ندارم',
- data: [14, 23, 21, 17, 15, 10, 12, 17, 21]
- }]
+ const series = [14, 23, 21, 17, 15]
return (
-
-
-
+
)
};
-export default DashboardReportsComponent;
\ No newline at end of file
+export default PolarChart;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/index.jsx b/src/components/dashboard/reports/index.jsx
index 681b1ca..24ce45f 100644
--- a/src/components/dashboard/reports/index.jsx
+++ b/src/components/dashboard/reports/index.jsx
@@ -1,41 +1,49 @@
-import {Grid} from "@mui/material";
+import {Grid, Paper} from "@mui/material";
import BarChart from "@/components/dashboard/reports/BarChart";
import PolarChart from "@/components/dashboard/reports/PolarChart";
+const fakeData = [
+ {name: "قم", data: 0},
+ {name: "اراک", data: 33},
+ {name: "شیراز", data: 90},
+ {name: "اصفهان", data: 30},
+ {name: "تبریز", data: 70},
+ {name: "مشهد", data: 32},
+ {name: "تهران", data: 12},
+ {name: "اراک", data: 44},
+ {name: "شیراز", data: 95},
+ {name: "اصفهان", data: 30},
+ {name: "تبریز", data: 70},
+ {name: "مشهد", data: 10},
+ {name: "تهران", data: 28},
+ {name: "شیراز", data: 85},
+ {name: "اصفهان", data: 30},
+ {name: "تبریز", data: 70},
+ {name: "مشهد", data: 10},
+ {name: "تهران", data: 12},
+ {name: "اراک", data: 40},
+ {name: " asdراز", data: 85},
+ {name: "اصفهان", data: 30},
+ {name: "تبریز", data: 67},
+ {name: "مشهد", data: 100}
+];
+
const DashboardReportsComponent = (props) => {
- const specialOption = {
- title: {
- text: "مامامیا ماماسیتا",
- align: "center"
- },
- plotOptions: {
- bar: {
- borderRadius: 1,
- horizontal: false,
- }
- },
- dataLabels: {
- enabled: true
- },
- };
- const series = [{
- name: 'اطلاعی ندارم',
- data: [
- {x: 'قم', y: 300},
- {x: 'شیراز', y: 240},
- {x: 'اصفهان', y: 190},
- {x: 'تهران', y: 150},
- {x: 'کرج', y: 120},
- {x: 'زنجان', y: 250},
- {x: 'سیستان بلوچستان', y: 180},
- {x: 'هرمزگان', y: 260}
- ]
- }]
return (
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
)
};
diff --git a/src/lib/app/contexts/chart.jsx b/src/lib/app/contexts/chart.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/app/contexts/language.jsx b/src/lib/app/contexts/language.jsx
index a6df674..a31ffd9 100644
--- a/src/lib/app/contexts/language.jsx
+++ b/src/lib/app/contexts/language.jsx
@@ -13,7 +13,7 @@ export const LanguageProvider = ({children}) => {
key: "fa",
dir: "rtl",
name: "فارسی",
- fontFamily: `IRANSans, sans-serif`,
+ fontFamily: `IRANSansFaNum, sans-serif`,
tableLocalization: FA_DATATABLE_LOCALIZATION,
chartLocalization: FA_CHART_LOCALIZATION
}
diff --git a/src/lib/app/hooks/useChart.jsx b/src/lib/app/hooks/useChart.jsx
new file mode 100644
index 0000000..e69de29