LFFE-10 bring bar chart / make diffrent component for each chart / gradiant colorize for charts (compelete structural)

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: "مامامیا ماماسیتا",
+            text: "درصد پیشرفت تسویه وام",
-            align: "center"
+            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: [
+        data: usableArray
-            {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 (
-        <Grid item xs={8}>
+        <Chart type="bar" specialOption={specialOption} series={series}/>
-            <Chart type="bar" specialOption={specialOption} series={series}/>
-        </Grid>
     )
 };
 
-export default DashboardReportsComponent;
+export default BarChart;

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: {
+        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
-            colors: ['#fff']
+        colors: ['red', 'blue', 'green', 'yellow', 'pink'],
-        },
-        responsive: [{
-            breakpoint: 480,
-            options: {
-                chart: {
-                    width: 200
-                },
-                legend: {
-                    position: 'bottom'
-                }
-            }
-        }],
         dataLabels: {
             enabled: true
         },
     };
-    const series = [{
+    const series = [14, 23, 21, 17, 15]
-        name: 'اطلاعی ندارم',
-        data: [14, 23, 21, 17, 15, 10, 12, 17, 21]
-    }]
     return (
-        <Grid item xs={4}>
+        <Chart type="polarArea" specialOption={specialOption} series={series}/>
-            <Chart type="polarArea" specialOption={specialOption} series={series}/>
-        </Grid>
     )
 };
 
-export default DashboardReportsComponent;
+export default PolarChart;

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 (
-        <Grid container spacing={2} sx={{height: "500px"}}>
+        <>
-            <BarChart/>
+            <Paper elevation={3}>
-            <PolarChart/>
+                <Grid container spacing={2}>
-        </Grid>
+                    <Grid item xs={12} sx={{height: "400px",}}>
+                        <BarChart data={fakeData}/>
+                    </Grid>
+                </Grid>
+                <Grid container spacing={2}>
+                    <Grid item xs={5}>
+                        <PolarChart data={fakeData}/>
+                    </Grid>
+                </Grid>
+            </Paper>
+        </>
     )
 };
 

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
         }