chore: upgrade charts (#11011)

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",

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={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
           contentHeight={46}
         >
-          <TinyArea
+          <Tiny.Area
-            color="#975FE4"
             xField="x"
-            height={46}
-            forceFit
             yField="y"
-            smooth
+            shapeField="smooth"
+            height={46}
+            style={{ fill: 'linear-gradient(-90deg, white 0%, #975FE4 100%)', fillOpacity: 0.6 }}
             data={visitData}
+            line={{ style: { stroke: '#975FE4' } }}
           />
         </ChartCard>
       </Col>
@@ -90,7 +90,13 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
           footer={<Field label="转化率" value="60%" />}
           contentHeight={46}
         >
-          <TinyColumn xField="x" height={46} forceFit yField="y" data={visitData} />
+          <Tiny.Column
+            xField="x"
+            yField="y"
+            height={46}
+            data={visitData}
+            scale={{ x: { paddingInner: 0.4 } }}
+          />
         </ChartCard>
       </Col>
       <Col {...topColResponsiveProps}>
@@ -128,18 +134,15 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
           }
           contentHeight={46}
         >
-          <Progress
+          <Tiny.Progress
-            height={46}
+            height={12}
+            color={['#E9EEF4', '#13C2C2']}
             percent={0.78}
-            color="#13C2C2"
+            annotations={[
-            forceFit
-            size={8}
-            marker={[
               {
-                value: 0.8,
+                type: 'lineY',
-                style: {
+                data: [0.8],
-                  stroke: '#13C2C2',
+                style: { stroke: '#13C2C2', strokeOpacity: 1 },
-                },
               },
             ]}
           />

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,
       }}
     >
-      <RingProgress forceFit height={60} width={60} percent={data.cvr} />
+      <Tiny.Ring height={60} width={60} percent={data.cvr} color={['#E8EEF4', '#5FABF4']} />
     </Col>
   </Row>
 );
@@ -73,21 +73,20 @@ const OfflineData = ({
               }}
             >
               <Line
-                forceFit
                 height={400}
                 data={offlineChartData}
-                responsive
                 xField="date"
                 yField="value"
-                seriesField="type"
+                colorField="type"
-                interactions={[
+                slider={{ x: true }}
-                  {
+                axis={{
-                    type: 'slider',
+                  x: { title: false },
-                    cfg: {},
+                  y: { title: false, gridLineDash: null, gridStroke: '#ccc', gridStrokeOpacity: 1 },
-                  },
+                }}
-                ]}
                 legend={{
-                  position: 'top-center',
+                  color: {
+                    layout: { justifyContent: 'center' },
+                  },
                 }}
               />
             </div>

src/pages/dashboard/analysis/components/ProportionSales.tsx

@@ -1,5 +1,4 @@
-import { Donut } from '@ant-design/charts';
+import { Pie } from '@ant-design/plots';
-import type { DonutConfig } from '@ant-design/charts/es/donut';
 import { Card, Radio, Typography } from 'antd';
 import type { RadioChangeEvent } from 'antd/es/radio';
 import numeral from 'numeral';
@@ -45,29 +44,20 @@ const ProportionSales = ({
     >
       <div>
         <Text>销售额</Text>
-        <Donut
+        <Pie
-          forceFit
           height={340}
           radius={0.8}
+          innerRadius={0.5}
           angleField="y"
           colorField="x"
           data={salesPieData as any}
-          legend={{
+          legend={false}
-            visible: false,
-          }}
           label={{
-            visible: true,
+            position: 'spider',
-            type: 'spider',
+            text: (item: { x: number; y: number }) => {
-            formatter: (text, item) => {
+              return `${item.x}: ${numeral(item.y).format('0,0')}`;
-              // eslint-disable-next-line no-underscore-dangle
-              return `${item._origin.x}: ${numeral(item._origin.y).format('0,0')}`;
             },
           }}
-          statistic={
-            {
-              totalLabel: '销售额',
-            } as DonutConfig['statistic']
-          }
         />
       </div>
     </Card>

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 = ({
                     <div className={styles.salesBar}>
                       <Column
                         height={300}
-                        forceFit
+                        data={salesData}
-                        data={salesData as any}
                         xField="x"
                         yField="y"
-                        xAxis={{
+                        paddingBottom={12}
-                          visible: true,
+                        axis={{
-                          title: {
+                          x: {
-                            visible: false,
+                            title: false,
                           },
-                        }}
+                          y: {
-                        yAxis={{
+                            title: false,
-                          visible: true,
+                            gridLineDash: null,
-                          title: {
+                            gridStroke: '#ccc',
-                            visible: false,
                           },
                         }}
-                        title={{
+                        scale={{
-                          visible: true,
+                          x: { paddingInner: 0.4 },
-                          text: '销售趋势',
-                          style: {
-                            fontSize: 14,
-                          },
                         }}
-                        meta={{
+                        tooltip={{
-                          y: {
+                          name: '销售量',
-                            alias: '销售量',
+                          channel: 'y',
-                          },
                         }}
                       />
                     </div>
@@ -153,33 +146,24 @@ const SalesCard = ({
                     <div className={styles.salesBar}>
                       <Column
                         height={300}
-                        forceFit
+                        data={salesData}
-                        data={salesData as any}
                         xField="x"
                         yField="y"
-                        xAxis={{
+                        paddingBottom={12}
-                          visible: true,
+                        axis={{
-                          title: {
+                          x: {
-                            visible: false,
+                            title: false,
                           },
-                        }}
+                          y: {
-                        yAxis={{
+                            title: false,
-                          visible: true,
-                          title: {
-                            visible: false,
                           },
                         }}
-                        title={{
+                        scale={{
-                          visible: true,
+                          x: { paddingInner: 0.4 },
-                          text: '访问量趋势',
-                          style: {
-                            fontSize: 14,
-                          },
                         }}
-                        meta={{
+                        tooltip={{
-                          y: {
+                          name: '访问量',
-                            alias: '访问量',
+                          channel: 'y',
-                          },
                         }}
                       />
                     </div>

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}
           />
-          <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
+          <Tiny.Area
+            xField="x"
+            yField="y"
+            shapeField="smooth"
+            height={45}
+            style={{ fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', fillOpacity: 0.4 }}
+            data={visitData2}
+            line={{ style: { stroke: '#6294FA' } }}
+          />
         </Col>
         <Col
           sm={12}
@@ -139,7 +147,15 @@ const TopSearch = ({
             subTotal={26.2}
             gap={8}
           />
-          <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
+          <Tiny.Area
+            xField="x"
+            yField="y"
+            shapeField="smooth"
+            height={45}
+            style={{ fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', fillOpacity: 0.4 }}
+            data={visitData2}
+            line={{ style: { stroke: '#6294FA' } }}
+          />
         </Col>
       </Row>
       <Table<any>

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,
         }}
       >
-        <TinyArea data={activeData} xField="x" forceFit yField="y" height={84} />
+        <Tiny.Area
+          xField="x"
+          yField="y"
+          height={84}
+          style={{ fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', fillOpacity: 0.6 }}
+          data={activeData}
+          line={{ style: { stroke: '#6294FA' } }}
+        />
       </div>
       {activeData && (
         <div>

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 = () => {
             >
               <Gauge
                 height={180}
-                min={0}
+                data={{
-                max={100}
+                  target: 80,
-                forceFit
+                  total: 100,
-                value={87}
+                  name: 'score',
-                range={[0, 25, 50, 75, 100]}
+                  thresholds: [20, 40, 60, 80, 100],
-                statistic={{
+                }}
-                  visible: true,
+                style={{
-                  text: '优',
+                  textContent: () => `优`,
-                  color: '#30bf78',
+                }}
+                meta={{
+                  color: {
+                    range: ['#6395FA', '#62DAAB', '#657798', '#F7C128', '#1F8718'],
+                  },
                 }}
               />
             </Card>
@@ -113,13 +130,28 @@ const Monitor: FC = () => {
                 }}
               >
                 <Col span={8}>
-                  <RingProgress forceFit height={128} percent={0.28} />
+                  <Tiny.Ring
+                    height={128}
+                    percent={0.3}
+                    color={['#E8EEF4', '#5FABF4']}
+                    annotations={getAnnotations(0.3)}
+                  />
                 </Col>
                 <Col span={8}>
-                  <RingProgress color="#5DDECF" forceFit height={128} percent={0.22} />
+                  <Tiny.Ring
+                    height={128}
+                    percent={0.22}
+                    color={['#E8EEF4', '#5DDECF']}
+                    annotations={getAnnotations(0.22)}
+                  />
                 </Col>
                 <Col span={8}>
-                  <RingProgress color="#2FC25B" forceFit height={128} percent={0.32} />
+                  <Tiny.Ring
+                    height={128}
+                    percent={0.32}
+                    color={['#E8EEF4', '#2FC25B']}
+                    annotations={getAnnotations(0.32)}
+                  />
                 </Col>
               </Row>
             </Card>
@@ -143,14 +175,11 @@ const Monitor: FC = () => {
             >
               <WordCloud
                 data={wordCloudData}
-                forceFit
                 height={162}
-                wordStyle={{
+                textField="word"
-                  fontSize: [10, 20],
+                colorField="word"
-                }}
+                layout={{ spiral: 'rectangular', fontSize: [10, 20] }}
-                shape="triangle"
               />
-              {/* <TagCloud data={data?.list || []} height={161} /> */}
             </Card>
           </Col>
           <Col
@@ -170,17 +199,7 @@ const Monitor: FC = () => {
               }}
               bordered={false}
             >
-              <Liquid
+              <Liquid height={160} percent={0.35} />
-                height={161}
-                min={0}
-                max={10000}
-                value={5639}
-                forceFit
-                padding={[0, 0, 0, 0]}
-                statistic={{
-                  formatter: (value) => `${((100 * value) / 10000).toFixed(1)}%`,
-                }}
-              />
             </Card>
           </Col>
         </Row>

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 = () => {
               <Radar
                 height={343}
                 data={data?.radarData || []}
-                angleField="label"
+                xField="label"
-                seriesField="name"
+                colorField="name"
-                radiusField="value"
+                yField="value"
+                shapeField="smooth"
                 area={{
-                  visible: false,
+                  style: {
+                    fillOpacity: 0.4
+                  }
                 }}
-                point={{
+                axis={{
-                  visible: true,
+                  y: {
+                    gridStrokeOpacity: 0.5,
+                  }
                 }}
                 legend={{
-                  position: 'bottom-center',
+                  color: {
+                    position: 'bottom',
+                    layout: { justifyContent: 'center' },
+                  },
                 }}
               />
             </div>