Skip to content

Commit

Permalink
chore(dashboard): 修复charts升级引起的报错
Browse files Browse the repository at this point in the history
  • Loading branch information
@wangxingkang
wangxingkang committed Oct 21, 2020
1 parent bc719b5 commit 2d7cb45
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 116 deletions.
36 changes: 10 additions & 26 deletions src/pages/dashboard/components/introduce-row/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@ import Trend from '../trend';
import styles from './index.less';

interface IntroduceRowProps {
data?: { time: string; value: number }[];
loading?: boolean;
}

const IntroduceRow: React.FC<IntroduceRowProps> = ({
loading,
data = []
loading
}) => {
const progressConfig = {
height: 46,
percent: 0.7,
barWidthRatio: 0.2,
};

return (
<Card gutter={16} ghost>
<Card
Expand Down Expand Up @@ -59,13 +63,10 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
<Statistic value={8846} />
<div className={styles.contentFixed}>
<TinyArea
color="#975FE4"
xField="date"
height={46}
autoFit
yField="value"
smooth
data={data}
data={new Array(100).fill(0).map(() => Math.random() * 20)}
/>
</div>
</div>
Expand All @@ -86,11 +87,8 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
<Statistic value={6560} />
<div className={styles.contentFixed}>
<TinyColumn
xField="date"
height={46}
forceFit
yField="value"
data={data}
data={new Array(20).fill(0).map(() => Math.random() * 100)}
/>
</div>
</div>
Expand All @@ -110,21 +108,7 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
<div className={styles.content}>
<Statistic value={78} suffix="%" />
<div className={styles.contentFixed}>
<Progress
height={46}
percent={0.78}
color="#13C2C2"
autoFit
size={8}
marker={[
{
value: 0.8,
style: {
stroke: '#13C2C2',
},
}
]}
/>
<Progress {...progressConfig} />
</div>
</div>
</Card>
Expand Down
82 changes: 20 additions & 62 deletions src/pages/dashboard/components/sales-card/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,33 +76,12 @@ const SalesCard: React.FC<SalesCardProps> = ({
<Col xl={16} lg={12} md={12} sm={24} xs={24}>
<Column
height={300}
forceFit
data={data}
xField= 'date'
yField='value'
xAxis={{
visible: true,
title: {
visible: false
}
}}
yAxis={{
visible: true,
title: {
visible: false
}
}}
title={{
visible: true,
text: '销售趋势',
style: {
fontSize: 14
}
}}
meta={{
y: {
alias: '销售量'
}
meta= {{
type: { alias: '类别' },
sales: { alias: '销售额' },
}}
/>
</Col>
Expand All @@ -113,44 +92,23 @@ const SalesCard: React.FC<SalesCardProps> = ({
</Card.TabPane>
<Card.TabPane key="views" tab="访问量">
<Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}>
<Column
height={300}
forceFit
data={data}
xField="date"
yField="value"
xAxis={{
visible: true,
title: {
visible: false
}
}}
yAxis={{
visible: true,
title: {
visible: false
}
}}
title={{
visible: true,
text: '访问量趋势',
style: {
fontSize: 14
}
}}
meta={{
y: {
alias: '访问量'
}
}}
/>
</Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}>
<Rank title="门店访问量排名" list={rankingListData} />
</Col>
</Row>
</Card.TabPane>
<Col xl={16} lg={12} md={12} sm={24} xs={24}>
<Column
height={300}
data={data}
xField="date"
yField="value"
meta= {{
type: { alias: '类别' },
sales: { alias: '访问量' },
}}
/>
</Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}>
<Rank title="门店访问量排名" list={rankingListData} />
</Col>
</Row>
</Card.TabPane>
</Card>
)
}
Expand Down
42 changes: 15 additions & 27 deletions src/pages/dashboard/components/top-search/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import moment from 'moment';
import { Row, Col, Statistic, Table } from 'antd';
import Card from '@ant-design/pro-card';
import { TinyArea } from '@ant-design/charts';
Expand All @@ -13,16 +12,6 @@ interface SearchData {
status: number;
}

const visitData: { x: string, y: number }[] = [];
const beginDay = new Date().getTime();
const fakeY = [1, 6, 4, 8, 3, 7, 2];
for (let i = 0; i < fakeY.length; i += 1) {
visitData.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: fakeY[i],
});
}

const searchData: SearchData[] = [];
for (let i = 0; i < 50; i += 1) {
searchData.push({
Expand All @@ -35,6 +24,19 @@ for (let i = 0; i < 50; i += 1) {
}

const TopSearch: React.FC = () => {
const config = {
height: 45,
width: 300,
autoFit: false,
data: new Array(50).fill(0).map(() => Math.random() * 100),
smooth: true,
lineStyle: {
lineDash: [2, 2],
stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
},
areaStyle: { fill: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff' },
};

const columns = [
{
title: '排名',
Expand Down Expand Up @@ -71,25 +73,11 @@ const TopSearch: React.FC = () => {
<Row gutter={68} style={{ marginBottom: 24 }}>
<Col sm={12} xs={24}>
<Statistic title="搜索用户数" value={112893} />
<TinyArea
xField="x"
height={45}
forceFit
yField="y"
smooth
data={visitData}
/>
<TinyArea {...config} />
</Col>
<Col sm={12} xs={24}>
<Statistic title="人均搜索次数" value={2.7} />
<TinyArea
xField="x"
height={45}
forceFit
yField="y"
smooth
data={visitData}
/>
<TinyArea {...config} />
</Col>
</Row>

Expand Down
2 changes: 1 addition & 1 deletion src/pages/dashboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Dashboard: React.FC = () => {
<GridContent>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Suspense fallback={<PageLoading />}>
<IntroduceRow data={data?.visitData || []} loading={loading} />
<IntroduceRow loading={loading} />
</Suspense>

<Suspense fallback={null}>
Expand Down

1 comment on commit 2d7cb45

@vercel
Copy link

@vercel vercel bot commented on 2d7cb45 Oct 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.