ngskcloud
/
flow-playform-react
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pref: 移除无用的chart文件

Browse Source
master
钟良源 5 months ago
parent c84f9946cd
commit 5c8a36e10f
9 changed files with 0 additions and 584 deletions
Show Stats Download Patch File Download Diff File

92
src/components/Chart/area-polar.tsx
Unescape Escape View File

@ -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;

42
src/components/Chart/customer-tooltip.tsx
Unescape Escape View File

@ -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;

67
src/components/Chart/fact-multi-pie.tsx
Unescape Escape View File

@ -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;

76
src/components/Chart/horizontal-interval.tsx
Unescape Escape View File

@ -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;

63
src/components/Chart/multi-area-line.tsx
Unescape Escape View File

@ -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;

44
src/components/Chart/multi-stack-interval.tsx
Unescape Escape View File

@ -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;

83
src/components/Chart/overview-area-line.tsx
Unescape Escape View File

@ -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;

81
src/components/Chart/period-legend-line.tsx
Unescape Escape View File

@ -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;

36
src/components/Chart/style/index.module.less
Unescape Escape View File

@ -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);
}
}
}
Write Preview
Loading…
Cancel
Save