chore: upgrade charts

ant-design · Oct 17, 2023 · 74f93ec · 74f93ec
1 parent da0f9a7
commit 74f93ec
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 135 deletions.
diff --git 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
@@ -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
-            color="#975FE4"
+          <Tiny.Area
             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
-            height={46}
+          <Tiny.Progress
+            height={12}
+            color={['#E9EEF4', '#13C2C2']}
             percent={0.78}
-            color="#13C2C2"
-            forceFit
-            size={8}
-            marker={[
+            annotations={[
               {
-                value: 0.8,
-                style: {
-                  stroke: '#13C2C2',
-                },
+                type: 'lineY',
+                data: [0.8],
+                style: { stroke: '#13C2C2', strokeOpacity: 1 },
               },
             ]}
           />

diff --git 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,
       }}
     >
-      <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"
-                interactions={[
-                  {
-                    type: 'slider',
-                    cfg: {},
-                  },
-                ]}
+                colorField="type"
+                slider={{ x: true }}
+                axis={{
+                  x: { title: false },
+                  y: { title: false, gridLineDash: null, gridStroke: '#ccc', gridStrokeOpacity: 1 },
+                }}
                 legend={{
-                  position: 'top-center',
+                  color: {
+                    layout: { justifyContent: 'center' },
+                  },
                 }}
               />
             </div>

diff --git 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 = ({
     >
       <div>
         <Text>销售额</Text>
-        <Donut
-          forceFit
+        <Pie
           height={340}
           radius={0.8}
+          innerRadius={0.5}
           angleField="y"
           colorField="x"
           data={salesPieData as any}
-          legend={{
-            visible: false,
-          }}
+          legend={false}
           label={{
-            visible: true,
-            type: 'spider',
-            formatter: (text, item) => {
-              // 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']
-          }
         />
       </div>
     </Card>

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

diff --git 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}
           />
-          <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>

diff --git 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,
         }}
       >
-        <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>