Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: upgrade charts #11011

Merged
merged 1 commit into from
Oct 20, 2023
Merged

chore: upgrade charts #11011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
37 changes: 20 additions & 17 deletions src/pages/dashboard/analysis/components/IntroduceRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand All @@ -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}>
Expand Down Expand Up @@ -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 },
},
]}
/>
Expand Down
23 changes: 11 additions & 12 deletions src/pages/dashboard/analysis/components/OfflineData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -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>
Expand Down
24 changes: 7 additions & 17 deletions src/pages/dashboard/analysis/components/ProportionSales.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand Down
70 changes: 27 additions & 43 deletions src/pages/dashboard/analysis/components/SalesCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
22 changes: 19 additions & 3 deletions src/pages/dashboard/analysis/components/TopSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
11 changes: 9 additions & 2 deletions src/pages/dashboard/monitor/components/ActiveChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand Down
Loading
Loading