From 74f93ec37747ea458ee9d3f59744f761380574ba Mon Sep 17 00:00:00 2001
From: lxfu1 <954055752@qq.com>
Date: Tue, 17 Oct 2023 22:39:20 +0800
Subject: [PATCH] chore: upgrade charts
---
package.json | 2 +-
.../analysis/components/IntroduceRow.tsx | 37 +++++----
.../analysis/components/OfflineData.tsx | 23 +++--
.../analysis/components/ProportionSales.tsx | 24 ++----
.../analysis/components/SalesCard.tsx | 70 ++++++----------
.../analysis/components/TopSearch.tsx | 22 ++++-
.../monitor/components/ActiveChart/index.tsx | 11 ++-
src/pages/dashboard/monitor/index.tsx | 83 ++++++++++++-------
src/pages/dashboard/workplace/index.tsx | 24 ++++--
9 files changed, 161 insertions(+), 135 deletions(-)
diff --git a/package.json b/package.json
index b68e31f6e6..0ce49c3c69 100644
--- a/package.json
+++ b/package.json
@@ -38,8 +38,8 @@
"not ie <= 10"
],
"dependencies": {
- "@ant-design/charts": "^0.9.13",
"@ant-design/icons": "^4.8.1",
+ "@ant-design/plots": "^2.0.0-beta.1",
"@ant-design/pro-components": "^2.6.28",
"@ant-design/use-emotion-css": "1.0.4",
"@antv/data-set": "^0.11.8",
diff --git a/src/pages/dashboard/analysis/components/IntroduceRow.tsx b/src/pages/dashboard/analysis/components/IntroduceRow.tsx
index 8096fd25d0..a1ff5fda38 100644
--- a/src/pages/dashboard/analysis/components/IntroduceRow.tsx
+++ b/src/pages/dashboard/analysis/components/IntroduceRow.tsx
@@ -1,5 +1,5 @@
-import { Progress, TinyArea, TinyColumn } from '@ant-design/charts';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { Tiny } from '@ant-design/plots';
import { Col, Row, Tooltip } from 'antd';
import numeral from 'numeral';
import type { DataItem } from '../data.d';
@@ -65,14 +65,14 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
footer={}
contentHeight={46}
>
-
@@ -90,7 +90,13 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
footer={}
contentHeight={46}
>
-
+
@@ -128,18 +134,15 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
}
contentHeight={46}
>
-
diff --git a/src/pages/dashboard/analysis/components/OfflineData.tsx b/src/pages/dashboard/analysis/components/OfflineData.tsx
index 2dd0b11f2b..7dc794c604 100644
--- a/src/pages/dashboard/analysis/components/OfflineData.tsx
+++ b/src/pages/dashboard/analysis/components/OfflineData.tsx
@@ -1,4 +1,4 @@
-import { Line, RingProgress } from '@ant-design/charts';
+import { Line, Tiny } from '@ant-design/plots';
import { Card, Col, Row, Tabs } from 'antd';
import type { DataItem, OfflineDataType } from '../data.d';
import useStyles from '../style.style';
@@ -32,7 +32,7 @@ const CustomTab = ({
paddingTop: 36,
}}
>
-
+
);
@@ -73,21 +73,20 @@ const OfflineData = ({
}}
>
diff --git a/src/pages/dashboard/analysis/components/ProportionSales.tsx b/src/pages/dashboard/analysis/components/ProportionSales.tsx
index c8747e524b..d36ea85212 100644
--- a/src/pages/dashboard/analysis/components/ProportionSales.tsx
+++ b/src/pages/dashboard/analysis/components/ProportionSales.tsx
@@ -1,5 +1,4 @@
-import { Donut } from '@ant-design/charts';
-import type { DonutConfig } from '@ant-design/charts/es/donut';
+import { Pie } from '@ant-design/plots';
import { Card, Radio, Typography } from 'antd';
import type { RadioChangeEvent } from 'antd/es/radio';
import numeral from 'numeral';
@@ -45,29 +44,20 @@ const ProportionSales = ({
>
销售额
- {
- // eslint-disable-next-line no-underscore-dangle
- return `${item._origin.x}: ${numeral(item._origin.y).format('0,0')}`;
+ position: 'spider',
+ text: (item: { x: number; y: number }) => {
+ return `${item.x}: ${numeral(item.y).format('0,0')}`;
},
}}
- statistic={
- {
- totalLabel: '销售额',
- } as DonutConfig['statistic']
- }
/>
diff --git a/src/pages/dashboard/analysis/components/SalesCard.tsx b/src/pages/dashboard/analysis/components/SalesCard.tsx
index e8cb8123fb..b7c03a2aa8 100644
--- a/src/pages/dashboard/analysis/components/SalesCard.tsx
+++ b/src/pages/dashboard/analysis/components/SalesCard.tsx
@@ -1,4 +1,4 @@
-import { Column } from '@ant-design/charts';
+import { Column } from '@ant-design/plots';
import { Card, Col, DatePicker, Row, Tabs } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
import type dayjs from 'dayjs';
@@ -86,33 +86,26 @@ const SalesCard = ({
@@ -153,33 +146,24 @@ const SalesCard = ({
diff --git a/src/pages/dashboard/analysis/components/TopSearch.tsx b/src/pages/dashboard/analysis/components/TopSearch.tsx
index 236cbd25e5..32a5e26aa0 100644
--- a/src/pages/dashboard/analysis/components/TopSearch.tsx
+++ b/src/pages/dashboard/analysis/components/TopSearch.tsx
@@ -1,5 +1,5 @@
-import { TinyArea } from '@ant-design/charts';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { Tiny } from '@ant-design/plots';
import { Card, Col, Row, Table, Tooltip } from 'antd';
import numeral from 'numeral';
import React from 'react';
@@ -112,7 +112,15 @@ const TopSearch = ({
status="up"
subTotal={17.1}
/>
-
+
-
+
diff --git a/src/pages/dashboard/monitor/components/ActiveChart/index.tsx b/src/pages/dashboard/monitor/components/ActiveChart/index.tsx
index 6425a37bb8..edd5d4267a 100644
--- a/src/pages/dashboard/monitor/components/ActiveChart/index.tsx
+++ b/src/pages/dashboard/monitor/components/ActiveChart/index.tsx
@@ -1,4 +1,4 @@
-import { TinyArea } from '@ant-design/charts';
+import { Tiny } from '@ant-design/plots';
import { Statistic } from 'antd';
import { useEffect, useRef, useState } from 'react';
import useStyles from './index.style';
@@ -48,7 +48,14 @@ const ActiveChart = () => {
marginTop: 32,
}}
>
-
+
{activeData && (
diff --git a/src/pages/dashboard/monitor/index.tsx b/src/pages/dashboard/monitor/index.tsx
index ae80ea86ed..0b77c61234 100644
--- a/src/pages/dashboard/monitor/index.tsx
+++ b/src/pages/dashboard/monitor/index.tsx
@@ -1,6 +1,5 @@
-import { Gauge, Liquid, RingProgress, WordCloud } from '@ant-design/charts';
+import { Gauge, Liquid, Tiny, WordCloud } from '@ant-design/plots';
import { GridContent } from '@ant-design/pro-components';
-import type { WordCloudData } from '@antv/g2plot/esm/plots/word-cloud/layer';
import { useRequest } from '@umijs/max';
import { Card, Col, Row, Statistic } from 'antd';
import numeral from 'numeral';
@@ -12,10 +11,24 @@ import useStyles from './style.style';
const { Countdown } = Statistic;
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
+const getAnnotations = (value: number) => [
+ {
+ type: 'text',
+ style: {
+ text: `${value * 100}%`,
+ x: '50%',
+ y: '50%',
+ textAlign: 'center',
+ fontSize: 16,
+ fontStyle: 'bold',
+ },
+ },
+];
+
const Monitor: FC = () => {
const { styles } = useStyles();
const { loading, data } = useRequest(queryTags);
- const wordCloudData: WordCloudData[] = (data?.list || []).map((item) => {
+ const wordCloudData = (data?.list || []).map((item) => {
return {
id: +Date.now(),
word: item.name,
@@ -82,15 +95,19 @@ const Monitor: FC = () => {
>
`优`,
+ }}
+ meta={{
+ color: {
+ range: ['#6395FA', '#62DAAB', '#657798', '#F7C128', '#1F8718'],
+ },
}}
/>
@@ -113,13 +130,28 @@ const Monitor: FC = () => {
}}
>
-
+
-
+
-
+
@@ -143,14 +175,11 @@ const Monitor: FC = () => {
>
- {/* */}
{
}}
bordered={false}
>
- `${((100 * value) / 10000).toFixed(1)}%`,
- }}
- />
+
diff --git a/src/pages/dashboard/workplace/index.tsx b/src/pages/dashboard/workplace/index.tsx
index 256dc02379..c511785a6a 100644
--- a/src/pages/dashboard/workplace/index.tsx
+++ b/src/pages/dashboard/workplace/index.tsx
@@ -1,4 +1,4 @@
-import { Radar } from '@ant-design/charts';
+import { Radar } from '@ant-design/plots';
import { PageContainer } from '@ant-design/pro-components';
import { Link, useRequest } from '@umijs/max';
import { Avatar, Card, Col, List, Row, Skeleton, Statistic } from 'antd';
@@ -228,17 +228,25 @@ const Workplace: FC = () => {