pref: 移除无用的chart文件
parent
c84f9946cd
commit
5c8a36e10f
@ -1,92 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
Chart,
|
|
||||||
Line,
|
|
||||||
Axis,
|
|
||||||
Area,
|
|
||||||
Tooltip,
|
|
||||||
Coordinate,
|
|
||||||
Legend,
|
|
||||||
} from 'bizcharts';
|
|
||||||
import CustomTooltip from './customer-tooltip';
|
|
||||||
import { Spin } from '@arco-design/web-react';
|
|
||||||
import DataSet from '@antv/data-set';
|
|
||||||
|
|
||||||
interface AreaPolarProps {
|
|
||||||
data: any[];
|
|
||||||
loading: boolean;
|
|
||||||
fields: string[];
|
|
||||||
height: number;
|
|
||||||
}
|
|
||||||
function AreaPolar(props: AreaPolarProps) {
|
|
||||||
const { data, loading, fields, height } = props;
|
|
||||||
|
|
||||||
const { DataView } = DataSet;
|
|
||||||
const dv = new DataView().source(data);
|
|
||||||
dv.transform({
|
|
||||||
type: 'fold',
|
|
||||||
fields: fields, // 展开字段集
|
|
||||||
key: 'category', // key字段
|
|
||||||
value: 'score', // value字段
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Spin loading={loading} style={{ width: '100%' }}>
|
|
||||||
<Chart
|
|
||||||
height={height || 400}
|
|
||||||
padding={0}
|
|
||||||
data={dv.rows}
|
|
||||||
autoFit
|
|
||||||
scale={{
|
|
||||||
score: {
|
|
||||||
min: 0,
|
|
||||||
max: 80,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
interactions={['legend-highlight']}
|
|
||||||
className={'chart-wrapper'}
|
|
||||||
>
|
|
||||||
<Coordinate type="polar" radius={0.8} />
|
|
||||||
<Tooltip shared>
|
|
||||||
{(title, items) => {
|
|
||||||
return <CustomTooltip title={title} data={items} />;
|
|
||||||
}}
|
|
||||||
</Tooltip>
|
|
||||||
<Line
|
|
||||||
position="item*score"
|
|
||||||
size="2"
|
|
||||||
color={['category', ['#313CA9', '#21CCFF', '#249EFF']]}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
position="item*score"
|
|
||||||
tooltip={false}
|
|
||||||
color={[
|
|
||||||
'category',
|
|
||||||
[
|
|
||||||
'rgba(49, 60, 169, 0.4)',
|
|
||||||
'rgba(33, 204, 255, 0.4)',
|
|
||||||
'rgba(36, 158, 255, 0.4)',
|
|
||||||
],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<Axis name="score" label={false} />
|
|
||||||
<Legend
|
|
||||||
position="right"
|
|
||||||
marker={(_, index) => {
|
|
||||||
return {
|
|
||||||
symbol: 'circle',
|
|
||||||
style: {
|
|
||||||
r: 4,
|
|
||||||
lineWidth: 0,
|
|
||||||
fill: ['#313CA9', '#21CCFF', '#249EFF'][index],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
name="category"
|
|
||||||
/>
|
|
||||||
</Chart>
|
|
||||||
</Spin>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AreaPolar;
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Typography, Badge } from '@arco-design/web-react';
|
|
||||||
import styles from './style/index.module.less';
|
|
||||||
|
|
||||||
const { Text } = Typography;
|
|
||||||
interface TooltipProps {
|
|
||||||
title: string;
|
|
||||||
data: {
|
|
||||||
name: string;
|
|
||||||
value: string;
|
|
||||||
color: string;
|
|
||||||
}[];
|
|
||||||
color?: string;
|
|
||||||
name?: string;
|
|
||||||
formatter?: (value: string) => React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CustomTooltip(props: TooltipProps) {
|
|
||||||
const { formatter = (value) => value, color, name } = props;
|
|
||||||
return (
|
|
||||||
<div className={styles['customer-tooltip']}>
|
|
||||||
<div className={styles['customer-tooltip-title']}>
|
|
||||||
<Text bold>{props.title}</Text>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{props.data.map((item, index) => (
|
|
||||||
<div className={styles['customer-tooltip-item']} key={index}>
|
|
||||||
<div>
|
|
||||||
<Badge color={color || item.color} />
|
|
||||||
{name || item.name}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text bold>{formatter(item.value)}</Text>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CustomTooltip;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Chart, Legend, Facet } from 'bizcharts';
|
|
||||||
import useBizTheme from '@/utils/useChartTheme';
|
|
||||||
|
|
||||||
interface FactMultiPieProps {
|
|
||||||
data: any[];
|
|
||||||
loading: boolean;
|
|
||||||
height: number;
|
|
||||||
}
|
|
||||||
function FactMultiPie(props: FactMultiPieProps) {
|
|
||||||
return (
|
|
||||||
<Chart
|
|
||||||
theme={useBizTheme()}
|
|
||||||
forceUpdate
|
|
||||||
autoFit
|
|
||||||
data={props.data}
|
|
||||||
height={props.height || 400}
|
|
||||||
padding={[0, 0, 10, 0]}
|
|
||||||
>
|
|
||||||
<Legend visible={true} />
|
|
||||||
<Facet
|
|
||||||
fields={['category']}
|
|
||||||
type="rect"
|
|
||||||
showTitle={false}
|
|
||||||
eachView={(view, facet) => {
|
|
||||||
const data = facet.data;
|
|
||||||
view.coordinate({
|
|
||||||
type: 'theta',
|
|
||||||
cfg: {
|
|
||||||
radius: 0.8,
|
|
||||||
innerRadius: 0.7,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
view
|
|
||||||
.interval()
|
|
||||||
.adjust('stack')
|
|
||||||
.position('value')
|
|
||||||
.color('type', [
|
|
||||||
'#249eff',
|
|
||||||
'#846BCE',
|
|
||||||
'#21CCFF',
|
|
||||||
' #86DF6C',
|
|
||||||
'#0E42D2',
|
|
||||||
])
|
|
||||||
.label('value', {
|
|
||||||
content: (content) => {
|
|
||||||
return `${(content.value * 100).toFixed(2)} %`;
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
view.annotation().text({
|
|
||||||
position: ['50%', '46%'],
|
|
||||||
content: data[0].category,
|
|
||||||
style: {
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 500,
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
offsetY: 10,
|
|
||||||
});
|
|
||||||
view.interaction('element-single-selected');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Chart>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default FactMultiPie;
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Chart, Tooltip, Interval, Axis, Coordinate, G2 } from 'bizcharts';
|
|
||||||
import { Spin } from '@arco-design/web-react';
|
|
||||||
import CustomTooltip from './customer-tooltip';
|
|
||||||
|
|
||||||
function HorizontalInterval({
|
|
||||||
data,
|
|
||||||
loading,
|
|
||||||
height,
|
|
||||||
}: {
|
|
||||||
data: any[];
|
|
||||||
loading: boolean;
|
|
||||||
height?: number;
|
|
||||||
}) {
|
|
||||||
G2.registerShape('interval', 'border-radius', {
|
|
||||||
draw(cfg, container) {
|
|
||||||
const points = cfg.points as unknown as { x: string; y: number };
|
|
||||||
let path = [];
|
|
||||||
path.push(['M', points[0].x, points[0].y]);
|
|
||||||
path.push(['L', points[1].x, points[1].y]);
|
|
||||||
path.push(['L', points[2].x, points[2].y]);
|
|
||||||
path.push(['L', points[3].x, points[3].y]);
|
|
||||||
path.push('Z');
|
|
||||||
path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
|
|
||||||
|
|
||||||
const group = container.addGroup();
|
|
||||||
const radius = (path[1][2] - path[2][2]) / 2;
|
|
||||||
group.addShape('rect', {
|
|
||||||
attrs: {
|
|
||||||
x: path[0][1], // 矩形起始点为左上角
|
|
||||||
y: path[0][2] - radius * 2,
|
|
||||||
width: path[1][1] - path[0][1],
|
|
||||||
height: path[1][2] - path[2][2],
|
|
||||||
fill: cfg.color,
|
|
||||||
radius: radius,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return group;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Spin loading={loading} style={{ width: '100%' }}>
|
|
||||||
<Chart
|
|
||||||
height={height || 370}
|
|
||||||
padding="auto"
|
|
||||||
data={data}
|
|
||||||
autoFit
|
|
||||||
className={'chart-wrapper'}
|
|
||||||
>
|
|
||||||
<Coordinate transpose />
|
|
||||||
<Interval
|
|
||||||
color="#4086FF"
|
|
||||||
position="name*count"
|
|
||||||
size={10}
|
|
||||||
shape="border-radius"
|
|
||||||
/>
|
|
||||||
<Tooltip>
|
|
||||||
{(title, items) => {
|
|
||||||
return <CustomTooltip title={title} data={items} />;
|
|
||||||
}}
|
|
||||||
</Tooltip>
|
|
||||||
<Axis
|
|
||||||
name="count"
|
|
||||||
label={{
|
|
||||||
formatter(text) {
|
|
||||||
return `${Number(text) / 1000}k`;
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Chart>
|
|
||||||
</Spin>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default HorizontalInterval;
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Chart, Line, Axis, Legend, Area, Tooltip } from 'bizcharts';
|
|
||||||
import { Spin } from '@arco-design/web-react';
|
|
||||||
import CustomTooltip from './customer-tooltip';
|
|
||||||
|
|
||||||
const areaColorMap = [
|
|
||||||
'l (90) 0:rgba(131, 100, 255, 0.5) 1:rgba(80, 52, 255, 0.001)',
|
|
||||||
'l (90) 0:rgba(100, 255, 236, 0.5) 1:rgba(52, 255, 243, 0.001)',
|
|
||||||
'l (90) 0:rgba(255, 211, 100, 0.5) 1:rgba(255, 235, 52, 0.001)',
|
|
||||||
'l (90) 0:rgba(100, 162, 255, 0.5) 1:rgba(52, 105, 255, 0.001)',
|
|
||||||
];
|
|
||||||
|
|
||||||
const lineColorMap = ['#722ED1', '#33D1C9', '#F77234', '#165DFF'];
|
|
||||||
|
|
||||||
function MultiAreaLine({ data, loading }: { data: any[]; loading: boolean }) {
|
|
||||||
return (
|
|
||||||
<Spin loading={loading} style={{ width: '100%' }}>
|
|
||||||
<Chart
|
|
||||||
height={352}
|
|
||||||
data={data}
|
|
||||||
padding={[10, 0, 30, 30]}
|
|
||||||
autoFit
|
|
||||||
scale={{ time: 'time' }}
|
|
||||||
className={'chart-wrapper'}
|
|
||||||
>
|
|
||||||
<Line
|
|
||||||
shape="smooth"
|
|
||||||
position="time*count"
|
|
||||||
color={['name', lineColorMap]}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
position="time*count"
|
|
||||||
shape="smooth"
|
|
||||||
color={['name', areaColorMap]}
|
|
||||||
tooltip={false}
|
|
||||||
/>
|
|
||||||
<Tooltip
|
|
||||||
crosshairs={{ type: 'x' }}
|
|
||||||
showCrosshairs
|
|
||||||
shared
|
|
||||||
showMarkers={true}
|
|
||||||
>
|
|
||||||
{(title, items) => {
|
|
||||||
return (
|
|
||||||
<CustomTooltip
|
|
||||||
title={title}
|
|
||||||
data={items.sort((a, b) => b.value - a.value)}
|
|
||||||
formatter={(value) => Number(value).toLocaleString()}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Tooltip>
|
|
||||||
<Axis
|
|
||||||
name="count"
|
|
||||||
label={{ formatter: (value) => `${Number(value) / 100} k` }}
|
|
||||||
/>
|
|
||||||
<Legend visible={false} />
|
|
||||||
</Chart>
|
|
||||||
</Spin>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MultiAreaLine;
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Chart, Tooltip, Interval, Axis, Legend } from 'bizcharts';
|
|
||||||
import { Spin } from '@arco-design/web-react';
|
|
||||||
import CustomTooltip from './customer-tooltip';
|
|
||||||
|
|
||||||
function MultiInterval({ data, loading }: { data: any[]; loading: boolean }) {
|
|
||||||
return (
|
|
||||||
<Spin loading={loading} style={{ width: '100%' }}>
|
|
||||||
<Chart
|
|
||||||
height={370}
|
|
||||||
padding="auto"
|
|
||||||
data={data}
|
|
||||||
autoFit
|
|
||||||
className={'chart-wrapper'}
|
|
||||||
>
|
|
||||||
<Interval
|
|
||||||
adjust="stack"
|
|
||||||
color={['name', ['#81E2FF', '#00B2FF', '#246EFF']]}
|
|
||||||
position="time*count"
|
|
||||||
size={16}
|
|
||||||
style={{
|
|
||||||
radius: [2, 2, 0, 0],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Tooltip crosshairs={{ type: 'x' }} showCrosshairs shared>
|
|
||||||
{(title, items) => {
|
|
||||||
return <CustomTooltip title={title} data={items} />;
|
|
||||||
}}
|
|
||||||
</Tooltip>
|
|
||||||
<Axis
|
|
||||||
name="count"
|
|
||||||
label={{
|
|
||||||
formatter(text) {
|
|
||||||
return `${Number(text) / 1000}k`;
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Legend name="name" marker={{ symbol: 'circle' }} />
|
|
||||||
</Chart>
|
|
||||||
</Spin>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MultiInterval;
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Chart, Line, Axis, Area, Tooltip } from 'bizcharts';
|
|
||||||
import { Spin } from '@arco-design/web-react';
|
|
||||||
import CustomTooltip from './customer-tooltip';
|
|
||||||
|
|
||||||
function OverviewAreaLine({
|
|
||||||
data,
|
|
||||||
loading,
|
|
||||||
name = '总内容量',
|
|
||||||
color = '#4080FF',
|
|
||||||
}: {
|
|
||||||
data: any[];
|
|
||||||
loading: boolean;
|
|
||||||
name?: string;
|
|
||||||
color?: string;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<Spin loading={loading} style={{ width: '100%' }}>
|
|
||||||
<Chart
|
|
||||||
scale={{ value: { min: 0 } }}
|
|
||||||
padding={[10, 20, 50, 40]}
|
|
||||||
autoFit
|
|
||||||
height={300}
|
|
||||||
data={data}
|
|
||||||
className={'chart-wrapper'}
|
|
||||||
>
|
|
||||||
<Axis
|
|
||||||
name="count"
|
|
||||||
title
|
|
||||||
grid={{
|
|
||||||
line: {
|
|
||||||
style: {
|
|
||||||
lineDash: [4, 4],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
label={{
|
|
||||||
formatter(text) {
|
|
||||||
return `${Number(text) / 1000}k`;
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Axis name="date" grid={{ line: { style: { stroke: '#E5E8EF' } } }} />
|
|
||||||
<Line
|
|
||||||
shape="smooth"
|
|
||||||
position="date*count"
|
|
||||||
size={3}
|
|
||||||
color="l (0) 0:#1EE7FF .57:#249AFF .85:#6F42FB"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
position="date*count"
|
|
||||||
shape="smooth"
|
|
||||||
color="l (90) 0:rgba(17, 126, 255, 0.5) 1:rgba(17, 128, 255, 0)"
|
|
||||||
/>
|
|
||||||
<Tooltip
|
|
||||||
showCrosshairs={true}
|
|
||||||
showMarkers={true}
|
|
||||||
marker={{
|
|
||||||
lineWidth: 3,
|
|
||||||
stroke: color,
|
|
||||||
fill: '#ffffff',
|
|
||||||
symbol: 'circle',
|
|
||||||
r: 8,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{(title, items) => {
|
|
||||||
return (
|
|
||||||
<CustomTooltip
|
|
||||||
title={title}
|
|
||||||
data={items}
|
|
||||||
color={color}
|
|
||||||
name={name}
|
|
||||||
formatter={(value) => Number(value).toLocaleString()}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Tooltip>
|
|
||||||
</Chart>
|
|
||||||
</Spin>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default OverviewAreaLine;
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Chart, Line, Axis, Tooltip, Legend, Slider } from 'bizcharts';
|
|
||||||
import { Spin } from '@arco-design/web-react';
|
|
||||||
import CustomTooltip from './customer-tooltip';
|
|
||||||
import useBizTheme from '@/utils/useChartTheme';
|
|
||||||
|
|
||||||
const lineColor = ['#21CCFF', '#313CA9', '#249EFF'];
|
|
||||||
function PeriodLine({ data, loading }: { data: any[]; loading: boolean }) {
|
|
||||||
return (
|
|
||||||
<Spin loading={loading} style={{ width: '100%' }}>
|
|
||||||
<Chart
|
|
||||||
theme={useBizTheme()}
|
|
||||||
forceUpdate
|
|
||||||
height={370}
|
|
||||||
padding={[10, 20, 120, 60]}
|
|
||||||
data={data}
|
|
||||||
autoFit
|
|
||||||
scale={{ time: 'time' }}
|
|
||||||
className={'chart-wrapper'}
|
|
||||||
>
|
|
||||||
<Line shape="smooth" position="time*rate" color={['name', lineColor]} />
|
|
||||||
<Tooltip crosshairs={{ type: 'x' }} showCrosshairs shared>
|
|
||||||
{(title, items) => {
|
|
||||||
return <CustomTooltip title={title} data={items} />;
|
|
||||||
}}
|
|
||||||
</Tooltip>
|
|
||||||
<Axis
|
|
||||||
name="rate"
|
|
||||||
label={{
|
|
||||||
formatter(text) {
|
|
||||||
return `${Number(text)} %`;
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Legend
|
|
||||||
name="name"
|
|
||||||
marker={(_, index) => {
|
|
||||||
return {
|
|
||||||
symbol: 'circle',
|
|
||||||
style: {
|
|
||||||
fill: lineColor[index],
|
|
||||||
r: 4,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Slider
|
|
||||||
foregroundStyle={{
|
|
||||||
borderRadius: ' 4px',
|
|
||||||
fill: 'l (180) 0:rgba(206, 224, 255, 0.9) 1:rgba(146, 186, 255, 0.8)',
|
|
||||||
opacity: 0.3,
|
|
||||||
}}
|
|
||||||
trendCfg={{
|
|
||||||
data: data.map((item) => item.rate),
|
|
||||||
isArea: true,
|
|
||||||
areaStyle: {
|
|
||||||
fill: 'rgba(4, 135, 255, 0.15)',
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
backgroundStyle: {
|
|
||||||
fill: '#F2F3F5',
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
stroke: 'rgba(36, 158, 255, 0.3)',
|
|
||||||
lineWidth: 2,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
handlerStyle={{
|
|
||||||
fill: '#ffffff',
|
|
||||||
opacity: 1,
|
|
||||||
width: 22,
|
|
||||||
height: 22,
|
|
||||||
stroke: '#165DFF',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Chart>
|
|
||||||
</Spin>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PeriodLine;
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
.customer-tooltip {
|
|
||||||
&-title {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
height: 32px;
|
|
||||||
line-height: 32px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 8px;
|
|
||||||
background: rgb(255 255 255 / 90%);
|
|
||||||
box-shadow: 6px 0 20px rgb(34 87 188 / 10%);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--color-text-2);
|
|
||||||
|
|
||||||
:global(.arco-badge-status-dot) {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-item:not(:last-child) {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body[arco-theme='dark'] {
|
|
||||||
.customer-tooltip {
|
|
||||||
&-item {
|
|
||||||
background: #2a2a2b;
|
|
||||||
box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue