index.js
2.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React, { PureComponent } from 'react';
import { Chart } from '@antv/g2';
import debounce from 'lodash/debounce';
const primaryColor = '#2F9CFF';
const backgroundColor = '#F0F2F5';
class Gauge extends PureComponent {
componentDidMount() {
this.renderChart();
window.addEventListener('resize', this.resize);
}
componentWillReceiveProps(nextProps) {
if (!this.isEqual(this.props, nextProps)) {
this.renderChart(nextProps);
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
this.resize.cancel();
if (this.chart) {
this.chart.destroy();
}
}
resize = debounce(() => {
if (this.chart) {
this.chart.render();
}
}, 200);
isEqual = (prevProps, nextProps) => {
// Implement your own equality check logic
return prevProps.data === nextProps.data && prevProps.color === nextProps.color;
};
renderChart = (props = this.props) => {
const { data, color = primaryColor, bgColor = backgroundColor } = props;
const value = Math.min(Math.max(data, 0), 100); // Ensure value is between 0 and 100
if (this.chart) {
this.chart.destroy();
}
const chart = new Chart({
container: this.node,
autoFit: true,
height: 200,
padding: [20, 20, 60, 20],
});
chart.tooltip(false);
chart.coordinate('polar', {
startAngle: -Math.PI / 2,
endAngle: Math.PI / 2,
radius: 0.9,
});
chart.axis('value', false);
// Draw background arc
chart.guide().arc({
start: [0, 0.95],
end: [100, 0.95],
style: {
stroke: bgColor,
lineWidth: 12,
},
});
// Draw value arc
chart.guide().arc({
start: [0, 0.95],
end: [value, 0.95],
style: {
stroke: color,
lineWidth: 12,
},
});
// Draw center circle
chart.guide().html({
position: [50, 0.95],
html: `<div style="text-align: center; font-size: 12px; color: rgba(0, 0, 0, 0.43); transform: translate(-50%, -50%);">${value}%</div>`,
});
chart.render();
this.chart = chart;
};
handleRef = (node) => {
this.node = node;
};
render() {
return <div ref={this.handleRef}></div>;
}
}
export default Gauge;