diff --git a/app/(defaults)/chint/inverters/page.tsx b/app/(defaults)/chint/inverters/page.tsx
index 5013a1a..17bf6f4 100644
--- a/app/(defaults)/chint/inverters/page.tsx
+++ b/app/(defaults)/chint/inverters/page.tsx
@@ -7,13 +7,19 @@ import Tippy from '@tippyjs/react';
import axios from 'axios';
import React, { useEffect, useState } from 'react'
+// import ReactApexChart from 'react-apexcharts';
+import dynamic from 'next/dynamic';
+const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
type Props = {}
const SungrowInverters = (props: Props) => {
const [inverters, setInverters] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
+ const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
+ setIsMounted(true);
const fetchData = async () => {
try {
const res = await axios.get("https://api-a.fomware.com.cn/asset/v1/list?type=2", {
@@ -33,6 +39,51 @@ const SungrowInverters = (props: Props) => {
fetchData()
}, [])
+
+ const chartConfigs: any = {
+ options: {
+ chart: {
+ height: 58,
+ type: 'line',
+ fontFamily: 'Nunito, sans-serif',
+ sparkline: {
+ enabled: true,
+ },
+ dropShadow: {
+ enabled: true,
+ blur: 3,
+ color: '#009688',
+ opacity: 0.4,
+ },
+ },
+ stroke: {
+ curve: 'smooth',
+ width: 2,
+ },
+ colors: ['#009688'],
+ grid: {
+ padding: {
+ top: 5,
+ bottom: 5,
+ left: 5,
+ right: 5,
+ },
+ },
+ tooltip: {
+ x: {
+ show: false,
+ },
+ y: {
+ title: {
+ formatter: () => {
+ return '';
+ },
+ },
+ },
+ },
+ },
+ };
+
// inverter status 0: initial, 1: standby, 2: fault, 3: running, 5: offline, 9: shutdown, 10: unknown
return (
@@ -95,8 +146,18 @@ const SungrowInverters = (props: Props) => {
<div>{data.eTodayWithUnit}</div>
</td>
<td>
- <div>{data.eTodayWithUnit}</div>
- </td>
+ {isMounted && (
+ <ReactApexChart
+ series={[{ data: data.weekTrend.map((point: any) => point.y) }]}
+ options={{
+ ...chartConfigs.options,
+ xaxis: { categories: data.weekTrend.map((point: any) => point.x) },
+ }}
+ type="line"
+ height={58}
+ width={'100%'}
+ />
+ )} </td>
<td>{formatUnixTimestamp(data.createdAt)}</td>
<td>{formatUnixTimestamp(data.updatedAt)}</td>
<td className="text-center">
diff --git a/package-lock.json b/package-lock.json
index 294337d..ef63e45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
"@types/node": "18.11.18",
"@types/react": "18.0.27",
"@types/react-dom": "18.0.10",
+ "apexcharts": "^4.5.0",
"axios": "^1.7.9",
"eslint": "8.32.0",
"eslint-config-next": "13.1.2",
@@ -23,6 +24,7 @@
"ni18n": "^1.0.5",
"react": "18.2.0",
"react-animate-height": "^3.1.0",
+ "react-apexcharts": "^1.7.0",
"react-dom": "18.2.0",
"react-i18next": "^12.1.5",
"react-perfect-scrollbar": "^1.5.8",
@@ -635,6 +637,57 @@
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
"integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
},
+ "node_modules/@svgdotjs/svg.draggable.js": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.draggable.js/-/svg.draggable.js-3.0.6.tgz",
+ "integrity": "sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==",
+ "peerDependencies": {
+ "@svgdotjs/svg.js": "^3.2.4"
+ }
+ },
+ "node_modules/@svgdotjs/svg.filter.js": {
+ "version": "3.0.8",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.filter.js/-/svg.filter.js-3.0.8.tgz",
+ "integrity": "sha512-YshF2YDaeRA2StyzAs5nUPrev7npQ38oWD0eTRwnsciSL2KrRPMoUw8BzjIXItb3+dccKGTX3IQOd2NFzmHkog==",
+ "dependencies": {
+ "@svgdotjs/svg.js": "^3.1.1"
+ },
+ "engines": {
+ "node": ">= 0.8.0"
+ }
+ },
+ "node_modules/@svgdotjs/svg.js": {
+ "version": "3.2.4",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.4.tgz",
+ "integrity": "sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/Fuzzyma"
+ }
+ },
+ "node_modules/@svgdotjs/svg.resize.js": {
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.resize.js/-/svg.resize.js-2.0.5.tgz",
+ "integrity": "sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==",
+ "engines": {
+ "node": ">= 14.18"
+ },
+ "peerDependencies": {
+ "@svgdotjs/svg.js": "^3.2.4",
+ "@svgdotjs/svg.select.js": "^4.0.1"
+ }
+ },
+ "node_modules/@svgdotjs/svg.select.js": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.select.js/-/svg.select.js-4.0.2.tgz",
+ "integrity": "sha512-5gWdrvoQX3keo03SCmgaBbD+kFftq0F/f2bzCbNnpkkvW6tk4rl4MakORzFuNjvXPWwB4az9GwuvVxQVnjaK2g==",
+ "engines": {
+ "node": ">= 14.18"
+ },
+ "peerDependencies": {
+ "@svgdotjs/svg.js": "^3.2.4"
+ }
+ },
"node_modules/@swc/helpers": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
@@ -857,6 +910,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.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@@ -932,6 +990,19 @@
"node": ">= 8"
}
},
+ "node_modules/apexcharts": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-4.5.0.tgz",
+ "integrity": "sha512-E7ZkrVqPNBUWy/Rmg8DEIqHNBmElzICE/oxOX5Ekvs2ICQUOK/VkEkMH09JGJu+O/EA0NL31hxlmF+wrwrSLaQ==",
+ "dependencies": {
+ "@svgdotjs/svg.draggable.js": "^3.0.4",
+ "@svgdotjs/svg.filter.js": "^3.0.8",
+ "@svgdotjs/svg.js": "^3.2.4",
+ "@svgdotjs/svg.resize.js": "^2.0.2",
+ "@svgdotjs/svg.select.js": "^4.0.1",
+ "@yr/monotone-cubic-spline": "^1.0.3"
+ }
+ },
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -4047,6 +4118,18 @@
"react-dom": ">=16.8.0"
}
},
+ "node_modules/react-apexcharts": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.7.0.tgz",
+ "integrity": "sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==",
+ "dependencies": {
+ "prop-types": "^15.8.1"
+ },
+ "peerDependencies": {
+ "apexcharts": ">=4.0.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",
@@ -5498,6 +5581,37 @@
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
"integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
},
+ "@svgdotjs/svg.draggable.js": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.draggable.js/-/svg.draggable.js-3.0.6.tgz",
+ "integrity": "sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==",
+ "requires": {}
+ },
+ "@svgdotjs/svg.filter.js": {
+ "version": "3.0.8",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.filter.js/-/svg.filter.js-3.0.8.tgz",
+ "integrity": "sha512-YshF2YDaeRA2StyzAs5nUPrev7npQ38oWD0eTRwnsciSL2KrRPMoUw8BzjIXItb3+dccKGTX3IQOd2NFzmHkog==",
+ "requires": {
+ "@svgdotjs/svg.js": "^3.1.1"
+ }
+ },
+ "@svgdotjs/svg.js": {
+ "version": "3.2.4",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.4.tgz",
+ "integrity": "sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg=="
+ },
+ "@svgdotjs/svg.resize.js": {
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.resize.js/-/svg.resize.js-2.0.5.tgz",
+ "integrity": "sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==",
+ "requires": {}
+ },
+ "@svgdotjs/svg.select.js": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@svgdotjs/svg.select.js/-/svg.select.js-4.0.2.tgz",
+ "integrity": "sha512-5gWdrvoQX3keo03SCmgaBbD+kFftq0F/f2bzCbNnpkkvW6tk4rl4MakORzFuNjvXPWwB4az9GwuvVxQVnjaK2g==",
+ "requires": {}
+ },
"@swc/helpers": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
@@ -5662,6 +5776,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.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@@ -5713,6 +5832,19 @@
"picomatch": "^2.0.4"
}
},
+ "apexcharts": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-4.5.0.tgz",
+ "integrity": "sha512-E7ZkrVqPNBUWy/Rmg8DEIqHNBmElzICE/oxOX5Ekvs2ICQUOK/VkEkMH09JGJu+O/EA0NL31hxlmF+wrwrSLaQ==",
+ "requires": {
+ "@svgdotjs/svg.draggable.js": "^3.0.4",
+ "@svgdotjs/svg.filter.js": "^3.0.8",
+ "@svgdotjs/svg.js": "^3.2.4",
+ "@svgdotjs/svg.resize.js": "^2.0.2",
+ "@svgdotjs/svg.select.js": "^4.0.1",
+ "@yr/monotone-cubic-spline": "^1.0.3"
+ }
+ },
"arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -7854,6 +7986,14 @@
"integrity": "sha512-+0pW2OzB8PzVn10dpTB9q5jFI+GwQTnCDLbzyqPBUzKXJfpBrlWW954uud/59Mreo+laRN/fPzvckuA+WTptXA==",
"requires": {}
},
+ "react-apexcharts": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.7.0.tgz",
+ "integrity": "sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==",
+ "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",
diff --git a/package.json b/package.json
index dd38f81..84bee27 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"@types/node": "18.11.18",
"@types/react": "18.0.27",
"@types/react-dom": "18.0.10",
+ "apexcharts": "^4.5.0",
"axios": "^1.7.9",
"eslint": "8.32.0",
"eslint-config-next": "13.1.2",
@@ -24,6 +25,7 @@
"ni18n": "^1.0.5",
"react": "18.2.0",
"react-animate-height": "^3.1.0",
+ "react-apexcharts": "^1.7.0",
"react-dom": "18.2.0",
"react-i18next": "^12.1.5",
"react-perfect-scrollbar": "^1.5.8",