diff --git a/package-lock.json b/package-lock.json
index 3dfb5da..0b905dc 100644
--- 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",
diff --git a/package.json b/package.json
index c51cd27..a560c0c 100644
--- 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",
diff --git a/public/locales/fa/chart.js b/public/locales/fa/chart.js
new file mode 100644
index 0000000..6b0d6dc
--- /dev/null
+++ 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": "بازنشانی بزرگنمایی"
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/dashboard/first/index.jsx b/src/components/dashboard/first/index.jsx
index ee4f80a..c44fb4a 100644
--- 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 ;
+ 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 (
+
+
+
+
+
+ );
};
export default DashboardFirstComponent;
diff --git a/src/core/components/Chart.jsx b/src/core/components/Chart.jsx
new file mode 100644
index 0000000..b1128a7
--- /dev/null
+++ 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
+};
+
+export default Chart;
diff --git a/src/lib/app/contexts/language.jsx b/src/lib/app/contexts/language.jsx
index e3f41f4..a6df674 100644
--- 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();