📦 added React Chart

2025-02-24 15:27:32 +08:00 · 2025-02-24 15:27:32 +08:00 · 6c46cdcf3c
commit 6c46cdcf3c
parent 51609f00f5
3 changed files with 205 additions and 2 deletions
--- 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">
--- 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",
--- 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",