LFFE-8 Localization of charts and make a HOC component

2023-11-04 11:37:33 +03:30
parent d5dd75cfb2
commit d93c9c1653
6 changed files with 385 additions and 1 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
        "@mui/icons-material": "^5.11.16",
        "@mui/material": "^5.12.0",
        "@mui/x-date-pickers": "^6.9.2",
+        "apexcharts": "^3.44.0",
        "axios": "^1.4.0",
        "colord": "^2.9.3",
        "date-fns-jalali": "^2.13.0-0",
@@ -33,6 +34,7 @@
        "nextjs-progressbar": "^0.0.16",
        "prop-types": "^15.8.1",
        "react": "^18.2.0",
+        "react-apexcharts": "^1.4.1",
        "react-dom": "^18.2.0",
        "react-toastify": "^9.1.3",
        "sass": "^1.62.0",
@@ -1276,6 +1278,11 @@
        "url": "https://opencollective.com/typescript-eslint"
      }
    },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
    "node_modules/acorn": {
      "version": "8.8.2",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -1369,6 +1376,20 @@
        "node": ">= 8"
      }
    },
+    "node_modules/apexcharts": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.44.0.tgz",
+      "integrity": "sha512-u7Xzrbcxc2yWznN78Jh5NMCYVAsWDfBjRl5ea++rVzFAqjU2hLz4RgKIFwYOBDRQtW1e/Qz8azJTqIJ1+Vu9Qg==",
+      "dependencies": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
    "node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -4598,6 +4619,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-apexcharts": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
+      "integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "apexcharts": "^3.41.0",
+        "react": ">=0.13"
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5115,6 +5148,89 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
    "node_modules/swr": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/swr/-/swr-2.1.5.tgz",
@@ -6327,6 +6443,11 @@
        "eslint-visitor-keys": "^3.3.0"
      }
    },
+    "@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
    "acorn": {
      "version": "8.8.2",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -6386,6 +6507,20 @@
        "picomatch": "^2.0.4"
      }
    },
+    "apexcharts": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.44.0.tgz",
+      "integrity": "sha512-u7Xzrbcxc2yWznN78Jh5NMCYVAsWDfBjRl5ea++rVzFAqjU2hLz4RgKIFwYOBDRQtW1e/Qz8azJTqIJ1+Vu9Qg==",
+      "requires": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
    "argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -8717,6 +8852,14 @@
        "loose-envify": "^1.1.0"
      }
    },
+    "react-apexcharts": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
+      "integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
    "react-dom": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -9086,6 +9229,70 @@
      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
    },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
    "swr": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/swr/-/swr-2.1.5.tgz",
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.12.0",
    "@mui/x-date-pickers": "^6.9.2",
+    "apexcharts": "^3.44.0",
    "axios": "^1.4.0",
    "colord": "^2.9.3",
    "date-fns-jalali": "^2.13.0-0",
@@ -38,6 +39,7 @@
    "nextjs-progressbar": "^0.0.16",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
    "react-dom": "^18.2.0",
    "react-toastify": "^9.1.3",
    "sass": "^1.62.0",
--- a/public/locales/fa/chart.js
+++ b/public/locales/fa/chart.js
@@ -0,0 +1,63 @@
+export const FA_CHART_LOCALIZATION = {
+    "name": "fa",
+    "options": {
+        "months": [
+            "فروردین",
+            "اردیبهشت",
+            "خرداد",
+            "تیر",
+            "مرداد",
+            "شهریور",
+            "مهر",
+            "آبان",
+            "آذر",
+            "دی",
+            "بهمن",
+            "اسفند"
+        ],
+        "shortMonths": [
+            "فرو",
+            "ارد",
+            "خرد",
+            "تیر",
+            "مرد",
+            "شهر",
+            "مهر",
+            "آبا",
+            "آذر",
+            "دی",
+            "بهمـ",
+            "اسفـ"
+        ],
+        "days": [
+            "یکشنبه",
+            "دوشنبه",
+            "سه شنبه",
+            "چهارشنبه",
+            "پنجشنبه",
+            "جمعه",
+            "شنبه"
+        ],
+        "shortDays": [
+            "ی",
+            "د",
+            "س",
+            "چ",
+            "پ",
+            "ج",
+            "ش"
+        ],
+        "toolbar": {
+            "exportToSVG": "دانلود SVG",
+            "exportToPNG": "دانلود PNG",
+            "exportToCSV": "دانلود CSV",
+            "menu": "منو",
+            "selection": "انتخاب",
+            "selectionZoom": "بزرگنمایی انتخابی",
+            "zoomIn": "بزرگنمایی",
+            "zoomOut": "کوچکنمایی",
+            "pan": "پیمایش",
+            "reset": "بازنشانی بزرگنمایی"
+        }
+    }
+}
--- a/src/components/dashboard/first/index.jsx
+++ b/src/components/dashboard/first/index.jsx
@@ -1,7 +1,96 @@
 import DashboardLayouts from "@/layouts/dashboardLayouts";
+import Chart from "@/core/components/Chart";
+import {Box} from "@mui/material";
+import useLanguage from "@/lib/app/hooks/useLanguage";

 const DashboardFirstComponent = () => {
-    return <DashboardLayouts></DashboardLayouts>;
+    const {languageList} = useLanguage();
+    const specialOption = {
+        title: {
+            text: 'چارت بورس',
+            align: 'center',
+            style: {
+                fontSize: '17px',
+                fontWeight: 500
+            }
+        },
+        toolbar: {
+            style: {
+                justifyContent: 'center',
+            }
+        },
+        plotOptions: {
+            treemap: {
+                enableShades: true,
+                shadeIntensity: 0.5,
+                reverseNegativeShade: true,
+            }
+        },
+        colors: [
+            '#421243',
+            '#3B93A5',
+            '#F7B844',
+            '#ADD8C7',
+            '#EC3C65',
+            '#CDD7B6',
+            '#C1F666',
+            '#D43F97',
+            '#1E5D8C',
+            '#7F94B0',
+        ],
+    }
+    const series = [{
+        name: "finance",
+        data: [
+            {
+                x: 'INTC',
+                y: 1.2
+            },
+            {
+                x: 'GS',
+                y: 0.4
+            },
+            {
+                x: 'CVX',
+                y: -1.4
+            },
+            {
+                x: 'GE',
+                y: 2.7
+            },
+            {
+                x: 'CAT',
+                y: -0.3
+            },
+            {
+                x: 'RTX',
+                y: 5.1
+            },
+            {
+                x: 'CSCO',
+                y: -2.3
+            },
+            {
+                x: 'JNJ',
+                y: 2.1
+            },
+            {
+                x: 'PG',
+                y: 0.3
+            },
+            {
+                x: 'TRV',
+                y: 0.12
+            }
+        ]
+    }]
+    return (
+        <DashboardLayouts>
+            <Box sx={{width: "100%", height: "500px", position: "relative"}}>
+                <Chart type="treemap" series={series} specialOption={specialOption}/>
+            </Box>
+        </DashboardLayouts>
+    );
 };

 export default DashboardFirstComponent;
--- a/src/core/components/Chart.jsx
+++ b/src/core/components/Chart.jsx
@@ -0,0 +1,21 @@
+import dynamic from "next/dynamic";
+import useLanguage from "@/lib/app/hooks/useLanguage";
+
+const ApexChart = dynamic(() => import("react-apexcharts"), {ssr: false});
+
+const Chart = ({type, series, specialOption}) => {
+    const {languageApp, languageList} = useLanguage();
+    const fa = languageList.find((item) => item.key == languageApp).chartLocalization
+    const options = {
+        chart: {
+            locales: [fa],
+            defaultLocale: 'fa',
+            fontFamily: languageList[0].fontFamily
+        },
+        ...(specialOption ? specialOption : {})
+    }
+    console.log(options)
+    return <ApexChart type={type} options={options} series={series} width="100%" height="100%"/>
+};
+
+export default Chart; 
--- a/src/lib/app/contexts/language.jsx
+++ b/src/lib/app/contexts/language.jsx
@@ -1,4 +1,5 @@
 import {FA_DATATABLE_LOCALIZATION} from "&/locales/fa/datatable";
+import {FA_CHART_LOCALIZATION} from "&/locales/fa/chart";
 import {useRouter} from "next/router";
 import {createContext, useEffect, useState} from "react";
 import useUser from "../hooks/useUser";
@@ -14,6 +15,7 @@ export const LanguageProvider = ({children}) => {
            name: "فارسی",
            fontFamily: `IRANSans, sans-serif`,
            tableLocalization: FA_DATATABLE_LOCALIZATION,
+            chartLocalization: FA_CHART_LOCALIZATION
        }
    ];
    const {user, userChangedLanguage, changeLanguageState} = useUser();