Revenue Analytics
@@ -63,9 +84,12 @@ const BigChartBox = () => {
bottom: 0,
}}
>
-
-
-
+
+
+
+
diff --git a/src/components/chartbox/ChartBox.jsx b/src/components/chartbox/ChartBox.jsx
index 9cf3b7f..f92e3b9 100644
--- a/src/components/chartbox/ChartBox.jsx
+++ b/src/components/chartbox/ChartBox.jsx
@@ -1,12 +1,31 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import "./chartbox.scss"
import { Link } from 'react-router-dom';
-import { LineChart, Line, ResponsiveContainer, Tooltip } from 'recharts';
+import { LineChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid } from 'recharts';
+import Skeleton from '../skeleton/Skeleton';
const ChartBox = (props) => {
const {color, icon, title, dataKey, number, percentage, chartbox } = props;
+const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ // 模拟数据加载延迟
+ const timer = setTimeout(() => {
+ setLoading(false);
+ }, 600);
+
+ return () => clearTimeout(timer);
+ }, []);
+
+ if (loading) {
+ return (
+
+
+
+ );
+ }
return (
@@ -18,14 +37,17 @@ const {color, icon, title, dataKey, number, percentage, chartbox } = props;
{props.number}
View All
-
+
{/* Chart container */}
+
+
+
-
+
diff --git a/src/components/piechartbox/PieChartBox.js b/src/components/piechartbox/PieChartBox.js
index e4b505b..34f7a0b 100644
--- a/src/components/piechartbox/PieChartBox.js
+++ b/src/components/piechartbox/PieChartBox.js
@@ -1,5 +1,7 @@
import "./piechartbox.scss";
import { PieChart, Pie, Sector, Cell, ResponsiveContainer, Tooltip } from 'recharts';
+import Skeleton from '../skeleton/Skeleton';
+import React, { useState, useEffect } from 'react';
const data = [
@@ -12,6 +14,25 @@ const data = [
const PieChartBox = () => {
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ // 模拟数据加载延迟
+ const timer = setTimeout(() => {
+ setLoading(false);
+ }, 900);
+
+ return () => clearTimeout(timer);
+ }, []);
+
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
return (
Leads By source
@@ -19,7 +40,7 @@ const PieChartBox = () => {
+ contentStyle={{background:"#2a3447", borderRadius:"5px", border: "1px solid #384256", color: "#fff"}} />
{
+ return (
+
+ {type === 'chart' && (
+
+ )}
+ {type === 'pie' && (
+
+ )}
+ {type === 'bar' && (
+
+
+
+ {[...Array(7)].map((_, index) => (
+
+ ))}
+
+
+ )}
+