fix: dashboard re-render
This commit is contained in:
jialin
@@ -1,94 +0,0 @@
|
||||
import { Area } from '@ant-design/plots';
|
||||
import EmptyData from './empty-data';
|
||||
|
||||
interface LineChartProps {
|
||||
title?: string;
|
||||
height?: number;
|
||||
data: any[];
|
||||
color?: string;
|
||||
xField?: string;
|
||||
yField?: string;
|
||||
locale?: string;
|
||||
labelFormatter?: (v: any) => string;
|
||||
slider?: any;
|
||||
}
|
||||
const LineChart: React.FC<LineChartProps> = (props) => {
|
||||
const {
|
||||
data,
|
||||
title,
|
||||
color,
|
||||
xField,
|
||||
locale,
|
||||
yField,
|
||||
slider,
|
||||
height,
|
||||
labelFormatter
|
||||
} = props;
|
||||
const config = {
|
||||
height,
|
||||
xField: xField || 'time',
|
||||
yField: yField || 'value',
|
||||
autoFit: true,
|
||||
slider,
|
||||
// shapeField: 'smooth',
|
||||
axis: {
|
||||
x: {
|
||||
textStyle: {
|
||||
autoRoate: true
|
||||
},
|
||||
labelFormatter
|
||||
},
|
||||
y: {
|
||||
tick: false,
|
||||
// size: 14,
|
||||
// title: '%',
|
||||
titlePosition: 'top',
|
||||
titleFontSize: 12
|
||||
}
|
||||
},
|
||||
style: {
|
||||
fill: (params: any) => {
|
||||
console.log('area param=========', params);
|
||||
return color || 'rgba(84, 204, 152,0.8)';
|
||||
},
|
||||
stroke: (params: any) => {
|
||||
console.log('area param========2=', params);
|
||||
return color || 'rgba(84, 204, 152,0.8)';
|
||||
}
|
||||
},
|
||||
title: {
|
||||
title,
|
||||
style: {
|
||||
align: 'center',
|
||||
titleFontSize: 14,
|
||||
titleFill: 'rgba(0,0,0,0.88)',
|
||||
titleFontWeight: 500
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
color: {
|
||||
layout: { justifyContent: 'center' }
|
||||
},
|
||||
|
||||
size: {
|
||||
itemLabelFontSize: 14,
|
||||
itemLabelFontWeight: 500
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
title: 'time',
|
||||
items: [{ channel: 'y' }]
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{data.length === 0 ? (
|
||||
<EmptyData height={height} title={title} />
|
||||
) : (
|
||||
<Area data={data} {...config} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LineChart;
|
||||
@@ -1,113 +0,0 @@
|
||||
import { Column } from '@ant-design/plots';
|
||||
|
||||
import EmptyData from './empty-data';
|
||||
|
||||
interface BarChartProps {
|
||||
data: any[];
|
||||
xField: string;
|
||||
yField: string;
|
||||
title?: string;
|
||||
height?: number;
|
||||
group?: boolean;
|
||||
colorField?: string;
|
||||
seriesField?: string;
|
||||
stack?: boolean;
|
||||
legend?: any;
|
||||
labelFormatter?: (v: any) => string;
|
||||
}
|
||||
const BarChart: React.FC<BarChartProps> = (props) => {
|
||||
const {
|
||||
data,
|
||||
xField,
|
||||
yField,
|
||||
title,
|
||||
height = 260,
|
||||
group,
|
||||
colorField,
|
||||
seriesField,
|
||||
stack,
|
||||
legend = undefined,
|
||||
labelFormatter
|
||||
} = props;
|
||||
const config = {
|
||||
data,
|
||||
xField,
|
||||
yField,
|
||||
colorField: colorField || 'name',
|
||||
direction: 'vertical',
|
||||
stack,
|
||||
seriesField,
|
||||
height,
|
||||
group,
|
||||
scale: {
|
||||
x: {
|
||||
type: 'band',
|
||||
padding: 0.5
|
||||
}
|
||||
},
|
||||
legend:
|
||||
legend === 'undefined'
|
||||
? {
|
||||
color: {
|
||||
position: 'top',
|
||||
layout: {
|
||||
justifyContent: 'center'
|
||||
}
|
||||
}
|
||||
}
|
||||
: legend,
|
||||
axis: {
|
||||
x: {
|
||||
xAxis: true,
|
||||
tick: false,
|
||||
labelFormatter
|
||||
},
|
||||
y: {
|
||||
tick: false,
|
||||
labelAutoWrap: true
|
||||
}
|
||||
},
|
||||
title: {
|
||||
title,
|
||||
style: {
|
||||
align: 'center',
|
||||
titleFontSize: 14,
|
||||
titleFill: 'rgba(0,0,0,0.88)',
|
||||
titleFontWeight: 500
|
||||
}
|
||||
},
|
||||
split: {
|
||||
type: 'line',
|
||||
line: {
|
||||
color: 'red',
|
||||
style: {
|
||||
color: 'red',
|
||||
lineDash: [4, 5]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
style: {
|
||||
fill: (params: any) => {
|
||||
console.log('colbar=====', params);
|
||||
return params.color || 'rgba(84, 204, 152,0.8)';
|
||||
},
|
||||
// radiusTopLeft: 12,
|
||||
// radiusTopRight: 12,
|
||||
align: 'center',
|
||||
width: 20
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{data.length > 0 ? (
|
||||
<Column {...config} />
|
||||
) : (
|
||||
<EmptyData height={height} title={title} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BarChart;
|
||||
@@ -1,8 +0,0 @@
|
||||
export const titleStyle = {
|
||||
style: {
|
||||
align: 'center',
|
||||
titleFontSize: 14,
|
||||
titleFill: 'rgba(0,0,0,0.88)',
|
||||
titleFontWeight: 500
|
||||
}
|
||||
};
|
||||
@@ -1,67 +0,0 @@
|
||||
import { Gauge } from '@ant-design/plots';
|
||||
import React from 'react';
|
||||
|
||||
interface GaugeChartProps {
|
||||
target: number;
|
||||
total: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
title?: string;
|
||||
thresholds: number[];
|
||||
rangColor: string[];
|
||||
}
|
||||
|
||||
const GaugeChart: React.FC<GaugeChartProps> = (props) => {
|
||||
const { target, total, width, height, thresholds, rangColor, title } = props;
|
||||
const config = {
|
||||
width,
|
||||
height,
|
||||
box: {
|
||||
padding: [0, 0, 0, 0],
|
||||
style: {
|
||||
padding: [0, 0, 0, 0]
|
||||
}
|
||||
},
|
||||
guide: {
|
||||
arc: {
|
||||
style: {
|
||||
lineWidth: 30
|
||||
}
|
||||
}
|
||||
},
|
||||
autoFit: true,
|
||||
data: {
|
||||
target,
|
||||
total,
|
||||
name: 'score',
|
||||
thresholds
|
||||
},
|
||||
legend: false,
|
||||
scale: {
|
||||
color: {
|
||||
range: rangColor
|
||||
}
|
||||
},
|
||||
startAngle: Math.PI,
|
||||
endAngle: 0,
|
||||
title: {
|
||||
title,
|
||||
size: 0,
|
||||
style: {
|
||||
align: 'center',
|
||||
titleFontSize: 14,
|
||||
titleFill: 'rgba(0,0,0,0.88)',
|
||||
titleFontWeight: 500
|
||||
}
|
||||
},
|
||||
style: {
|
||||
arcShape: 'round',
|
||||
textContent: (target: number, total: number) => {
|
||||
return `${(target / total) * 100}%`;
|
||||
}
|
||||
}
|
||||
};
|
||||
return <Gauge {...config} />;
|
||||
};
|
||||
|
||||
export default GaugeChart;
|
||||
@@ -1,111 +0,0 @@
|
||||
import { Bar } from '@ant-design/plots';
|
||||
import EmptyData from './empty-data';
|
||||
|
||||
interface BarChartProps {
|
||||
data: any[];
|
||||
xField: string;
|
||||
yField: string;
|
||||
title?: string;
|
||||
height?: number;
|
||||
group?: boolean;
|
||||
colorField?: string;
|
||||
seriesField?: string;
|
||||
stack?: boolean;
|
||||
legend?: any;
|
||||
showYAxis?: boolean;
|
||||
}
|
||||
const BarChart: React.FC<BarChartProps> = (props) => {
|
||||
const {
|
||||
data,
|
||||
xField,
|
||||
yField,
|
||||
title,
|
||||
height,
|
||||
group,
|
||||
colorField,
|
||||
seriesField,
|
||||
stack,
|
||||
showYAxis = true,
|
||||
legend = undefined
|
||||
} = props;
|
||||
const config = {
|
||||
data,
|
||||
xField,
|
||||
yField,
|
||||
colorField: colorField || 'name',
|
||||
direction: 'vertical',
|
||||
seriesField,
|
||||
height,
|
||||
group,
|
||||
stack,
|
||||
legend:
|
||||
legend === 'undefined'
|
||||
? {
|
||||
color: {
|
||||
position: 'top',
|
||||
layout: {
|
||||
justifyContent: 'center'
|
||||
}
|
||||
}
|
||||
}
|
||||
: legend,
|
||||
scale: {
|
||||
x: {
|
||||
type: 'band',
|
||||
padding: 0.5
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
xAxis: true,
|
||||
tick: false
|
||||
},
|
||||
y: showYAxis
|
||||
? {
|
||||
tick: false
|
||||
}
|
||||
: null
|
||||
},
|
||||
title: {
|
||||
title,
|
||||
style: {
|
||||
align: 'start',
|
||||
titleFontSize: 14,
|
||||
titleFill: 'rgba(0,0,0,0.88)',
|
||||
titleFontWeight: 500
|
||||
}
|
||||
},
|
||||
split: {
|
||||
type: 'line',
|
||||
line: {
|
||||
style: {
|
||||
lineDash: [4, 5]
|
||||
}
|
||||
}
|
||||
},
|
||||
markBackground: {},
|
||||
style: {
|
||||
fill: (params: any) => {
|
||||
return (
|
||||
params.color ||
|
||||
'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)'
|
||||
);
|
||||
},
|
||||
// radiusTopLeft: 12,
|
||||
// radiusTopRight: 12,
|
||||
height: 20
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{data.length === 0 ? (
|
||||
<EmptyData height={height} title={title} />
|
||||
) : (
|
||||
<Bar {...config} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BarChart;
|
||||
@@ -1,92 +0,0 @@
|
||||
import { Line } from '@ant-design/plots';
|
||||
import EmptyData from './empty-data';
|
||||
|
||||
interface LineChartProps {
|
||||
title?: string;
|
||||
height?: number;
|
||||
data: any[];
|
||||
color?: string[];
|
||||
xField?: string;
|
||||
yField?: string;
|
||||
locale?: string;
|
||||
labelFormatter?: (v: any) => string;
|
||||
slider?: any;
|
||||
}
|
||||
const LineChart: React.FC<LineChartProps> = (props) => {
|
||||
const {
|
||||
data,
|
||||
title,
|
||||
color,
|
||||
xField,
|
||||
locale,
|
||||
yField,
|
||||
slider,
|
||||
height,
|
||||
labelFormatter
|
||||
} = props;
|
||||
const config = {
|
||||
title,
|
||||
height,
|
||||
xField: xField || 'time',
|
||||
yField: yField || 'value',
|
||||
// color: color || ['red', 'blue', 'green', 'yellow'],
|
||||
colorField: 'type',
|
||||
autoFit: true,
|
||||
slider,
|
||||
shapeField: 'smooth',
|
||||
axis: {
|
||||
x: {
|
||||
textStyle: {
|
||||
autoRoate: true
|
||||
}
|
||||
},
|
||||
y: {
|
||||
tick: false,
|
||||
// size: 14,
|
||||
// title: '%',
|
||||
titlePosition: 'top',
|
||||
titleFontSize: 12,
|
||||
labelFormatter
|
||||
}
|
||||
},
|
||||
// point: {
|
||||
// shapeField: 'circle',
|
||||
// sizeField: 2
|
||||
// },
|
||||
style: {
|
||||
lineWidth: 1.5,
|
||||
opacity: 0.7
|
||||
// fill: (params: any) => {
|
||||
// return params.color;
|
||||
// }
|
||||
// stroke: (params: any) => {
|
||||
// console.log('line param=========', params.color);
|
||||
// return params.color;
|
||||
// }
|
||||
},
|
||||
legend: {
|
||||
color: {
|
||||
layout: { justifyContent: 'center' }
|
||||
},
|
||||
size: {
|
||||
itemLabelFontSize: 14,
|
||||
itemLabelFontWeight: 500
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
title: 'time',
|
||||
items: [{ channel: 'y' }]
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{data.length === 0 ? (
|
||||
<EmptyData height={height} title={title} />
|
||||
) : (
|
||||
<Line data={data} {...config} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LineChart;
|
||||
@@ -1,79 +0,0 @@
|
||||
import { Liquid } from '@ant-design/plots';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface LiquidChartProps {
|
||||
percent: number;
|
||||
color?: string;
|
||||
title?: string;
|
||||
height?: number;
|
||||
width?: number;
|
||||
thresholds?: number[];
|
||||
rangColor?: string[];
|
||||
}
|
||||
const LiquidChart: React.FC<LiquidChartProps> = (props) => {
|
||||
const {
|
||||
percent = 0,
|
||||
color,
|
||||
title,
|
||||
width,
|
||||
height,
|
||||
thresholds = [],
|
||||
rangColor = []
|
||||
} = props;
|
||||
|
||||
const primaryColor = 'rgba(84, 204, 152,0.8)';
|
||||
const [fillColor, setFillColor] = useState<string>(primaryColor);
|
||||
|
||||
const calcColorByPercent = () => {
|
||||
if (color) {
|
||||
return color;
|
||||
}
|
||||
if (!rangColor.length) {
|
||||
return primaryColor;
|
||||
}
|
||||
|
||||
if (rangColor.length && thresholds.length) {
|
||||
let index = 0;
|
||||
for (let i = 0; i < thresholds.length; i++) {
|
||||
if (percent <= thresholds[i]) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return rangColor[index];
|
||||
}
|
||||
return primaryColor;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fc = calcColorByPercent();
|
||||
setFillColor(fc);
|
||||
}, [percent]);
|
||||
|
||||
const config = {
|
||||
percent,
|
||||
textAlign: 'center',
|
||||
autoFit: true,
|
||||
title: {
|
||||
title,
|
||||
size: 0,
|
||||
style: {
|
||||
align: 'center',
|
||||
titleFontSize: 12,
|
||||
titleFill: 'rgba(0,0,0,0.88)',
|
||||
titleFontWeight: 500
|
||||
}
|
||||
},
|
||||
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
outlineBorder: 2,
|
||||
waveLength: 128,
|
||||
stroke: fillColor,
|
||||
fill: fillColor
|
||||
}
|
||||
};
|
||||
return <Liquid {...config} />;
|
||||
};
|
||||
|
||||
export default LiquidChart;
|
||||
@@ -1,37 +0,0 @@
|
||||
import { Pie } from '@ant-design/plots';
|
||||
import numeral from 'numeral';
|
||||
|
||||
interface PieChartProps {
|
||||
data: { label: string; value: number }[];
|
||||
height?: number;
|
||||
radius?: number;
|
||||
}
|
||||
const PieChart: React.FC<PieChartProps> = (props) => {
|
||||
const { data, height = 340, radius = 0.9 } = props;
|
||||
|
||||
return (
|
||||
<Pie
|
||||
height={height}
|
||||
radius={radius}
|
||||
angleField="value"
|
||||
colorField="label"
|
||||
data={data}
|
||||
legend={{
|
||||
color: {
|
||||
position: 'bottom',
|
||||
layout: {
|
||||
justifyContent: 'center'
|
||||
}
|
||||
}
|
||||
}}
|
||||
label={{
|
||||
position: 'outside',
|
||||
text: (item: { label: number; value: number }) => {
|
||||
return `${item.label}: ${numeral(item.value).format('0,0')}`;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default PieChart;
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
yAxis
|
||||
} from '@/components/echarts/config';
|
||||
import _ from 'lodash';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { memo, useEffect, useState } from 'react';
|
||||
import { ChartProps } from './types';
|
||||
|
||||
const BarChart: React.FC<ChartProps> = (props) => {
|
||||
@@ -90,4 +90,4 @@ const BarChart: React.FC<ChartProps> = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default BarChart;
|
||||
export default memo(BarChart);
|
||||
|
||||
@@ -37,7 +37,6 @@ export const legend = {
|
||||
|
||||
export const xAxis = {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
yAxis
|
||||
} from '@/components/echarts/config';
|
||||
import _ from 'lodash';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { memo, useEffect, useState } from 'react';
|
||||
import { ChartProps } from './types';
|
||||
|
||||
const BarChart: React.FC<ChartProps> = (props) => {
|
||||
@@ -87,7 +87,6 @@ const BarChart: React.FC<ChartProps> = (props) => {
|
||||
},
|
||||
xAxis: {
|
||||
...options.xAxis,
|
||||
boundaryGap: true,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
@@ -113,4 +112,4 @@ const BarChart: React.FC<ChartProps> = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default BarChart;
|
||||
export default memo(BarChart);
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { isNotEmptyValue } from '@/utils/index';
|
||||
import type { InputNumberProps } from 'antd';
|
||||
import { Form, InputNumber } from 'antd';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
@@ -24,7 +25,7 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (props.value) {
|
||||
if (isNotEmptyValue(props.value)) {
|
||||
setIsFocus(true);
|
||||
}
|
||||
}, [props.value]);
|
||||
|
||||
Reference in New Issue
Block a user