Skip to content

Commit 758e85a

Browse files
junedchhipajunedchhipa
committed
fix: remove pivot element from gauge; it is no more required as needle base width fulfils the need
1 parent a15ffd7 commit 758e85a

23 files changed

Lines changed: 1121 additions & 690 deletions

‎samples/react/gauge/gauge-with-bands.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
},
8989
},
9090
},
91-
fill: { opacity: 1 },
91+
fill: { opacity: 0.8 },
9292
labels: ['System Health'],
9393
},
9494

‎samples/react/gauge/live-needle-gauge.html‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Live Needle Gauge</title>
8+
9+
<link href="../../assets/styles.css" rel="stylesheet" />
10+
11+
<style>
12+
13+
#chart {
14+
padding: 0;
15+
max-width: 560px;
16+
margin: 35px auto;
17+
}
18+
19+
</style>
20+
21+
22+
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
23+
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
24+
<script src="https://cdn.jsdelivr.net/npm/prop-types@15.8.1/prop-types.min.js"></script>
25+
<script src="https://cdn.jsdelivr.net/npm/babel-core@5.8.34/browser.min.js"></script>
26+
<script src="../../../dist/apexcharts.js"></script>
27+
<script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.7.0/dist/react-apexcharts.iife.min.js"></script>
28+
29+
30+
<script>
31+
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
32+
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
33+
var _seed = 42
34+
Math.random = function () {
35+
_seed = (_seed * 16807) % 2147483647
36+
return (_seed - 1) / 2147483646
37+
}
38+
</script>
39+
40+
41+
</head>
42+
43+
<body>
44+
45+
<div id="app"></div>
46+
47+
<div id="html">&lt;div id=&quot;chart&quot;&gt;
48+
&lt;ReactApexChart options={state.options} series={state.series} type=&quot;gauge&quot; height={360} /&gt;
49+
&lt;/div&gt;</div>
50+
51+
<script type="text/babel">
52+
const ApexChart = () => {
53+
const [state, setState] = React.useState({
54+
55+
series: [86],
56+
options: {
57+
chart: {
58+
height: 360,
59+
type: 'gauge',
60+
animations: {
61+
enabled: true,
62+
dynamicAnimation: { enabled: true, speed: 800 },
63+
},
64+
},
65+
colors: ['#00A86F'],
66+
plotOptions: {
67+
radialBar: {
68+
shape: 'needle',
69+
startAngle: -90,
70+
endAngle: 90,
71+
min: 0,
72+
max: 100,
73+
ticks: {
74+
show: true,
75+
major: {
76+
count: 11,
77+
length: 0,
78+
width: 0,
79+
color: 'transparent',
80+
placement: 'outside',
81+
},
82+
minor: {
83+
count: 0,
84+
length: 0,
85+
width: 0,
86+
color: 'transparent',
87+
},
88+
labels: {
89+
show: true,
90+
offset: 25,
91+
fontSize: '12px',
92+
fontWeight: 500,
93+
color: '#0F172A',
94+
formatter: function (v) {
95+
return v + '%'
96+
},
97+
},
98+
},
99+
needle: {
100+
color: '#1E293B',
101+
length: '85%',
102+
baseWidth: 10,
103+
tipWidth: 1,
104+
showValueArc: true,
105+
},
106+
track: {
107+
show: true,
108+
background: '#ddd',
109+
strokeWidth: '100%',
110+
margin: 0,
111+
},
112+
hollow: {
113+
margin: 0,
114+
size: '70%',
115+
background: 'transparent',
116+
},
117+
dataLabels: {
118+
name: { show: false },
119+
value: {
120+
offsetY: 20,
121+
fontSize: '16px',
122+
fontWeight: 700,
123+
color: '#0F172A',
124+
formatter: function (val) {
125+
return val + '%'
126+
},
127+
},
128+
},
129+
},
130+
},
131+
stroke: {
132+
lineCap: 'butt',
133+
},
134+
labels: ['Progress'],
135+
},
136+
137+
138+
});
139+
140+
141+
useEffect(() => {
142+
const id = window.setInterval(() => {
143+
setState((s) => ({ ...s, series: [Math.floor(Math.random() * 101)] }))
144+
}, 2000)
145+
return () => window.clearInterval(id)
146+
}, [])
147+
148+
149+
return (
150+
<div>
151+
<div id="chart">
152+
<ReactApexChart options={state.options} series={state.series} type="gauge" height={360} />
153+
</div>
154+
<div id="html-dist"></div>
155+
</div>
156+
);
157+
}
158+
159+
const domContainer = document.querySelector('#app');
160+
ReactDOM.render(<ApexChart />, domContainer);
161+
</script>
162+
163+
164+
</body>
165+
</html>

‎samples/react/gauge/needle-gauge.html‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -99,17 +99,10 @@
9999
},
100100
needle: {
101101
color: '#0F172A',
102-
baseRadius: 10,
103102
length: '60%',
104103
baseWidth: 6,
105104
tipWidth: 1,
106105
},
107-
pivot: {
108-
show: true,
109-
color: '#0F172A',
110-
strokeColor: '#fff',
111-
strokeWidth: 2,
112-
},
113106
hollow: {
114107
margin: 0,
115108
size: '70%',

‎samples/source/gauge/gauge-with-bands.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ plotOptions: {
4444
},
4545
},
4646
},
47-
fill: { opacity: 1 },
47+
fill: { opacity: 0.8 },
4848
labels: ['System Health'],
4949
</options>
5050

‎samples/source/gauge/live-needle-gauge.xml‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<title>Live Needle Gauge</title>
2+
3+
<style>
4+
#chart {
5+
padding: 0;
6+
max-width: 560px;
7+
margin: 35px auto;
8+
}
9+
</style>
10+
11+
<chart>
12+
<options>
13+
chart: {
14+
height: 360,
15+
type: 'gauge',
16+
animations: {
17+
enabled: true,
18+
dynamicAnimation: { enabled: true, speed: 800 },
19+
},
20+
},
21+
colors: ['#00A86F'],
22+
plotOptions: {
23+
radialBar: {
24+
shape: 'needle',
25+
startAngle: -90,
26+
endAngle: 90,
27+
min: 0,
28+
max: 100,
29+
ticks: {
30+
show: true,
31+
major: {
32+
count: 11,
33+
length: 0,
34+
width: 0,
35+
color: 'transparent',
36+
placement: 'outside',
37+
},
38+
minor: {
39+
count: 0,
40+
length: 0,
41+
width: 0,
42+
color: 'transparent',
43+
},
44+
labels: {
45+
show: true,
46+
offset: 25,
47+
fontSize: '12px',
48+
fontWeight: 500,
49+
color: '#0F172A',
50+
formatter: function (v) {
51+
return v + '%'
52+
},
53+
},
54+
},
55+
needle: {
56+
color: '#1E293B',
57+
length: '85%',
58+
baseWidth: 10,
59+
tipWidth: 1,
60+
showValueArc: true,
61+
},
62+
track: {
63+
show: true,
64+
background: '#ddd',
65+
strokeWidth: '100%',
66+
margin: 0,
67+
},
68+
hollow: {
69+
margin: 0,
70+
size: '70%',
71+
background: 'transparent',
72+
},
73+
dataLabels: {
74+
name: { show: false },
75+
value: {
76+
offsetY: 20,
77+
fontSize: '16px',
78+
fontWeight: 700,
79+
color: '#0F172A',
80+
formatter: function (val) {
81+
return val + '%'
82+
},
83+
},
84+
},
85+
},
86+
},
87+
stroke: {
88+
lineCap: 'butt',
89+
},
90+
labels: ['Progress'],
91+
</options>
92+
93+
<series>
94+
[86]
95+
</series>
96+
</chart>
97+
98+
<vanilla-js-script>
99+
window.setInterval(function () {
100+
var next = Math.floor(Math.random() * 101)
101+
chart.updateSeries([next])
102+
}, 2000)
103+
</vanilla-js-script>
104+
105+
<react-script>
106+
useEffect(() => {
107+
const id = window.setInterval(() => {
108+
setState((s) => ({ ...s, series: [Math.floor(Math.random() * 101)] }))
109+
}, 2000)
110+
return () => window.clearInterval(id)
111+
}, [])
112+
</react-script>
113+
114+
<vue-script>
115+
mounted() {
116+
this.tickId = window.setInterval(() => {
117+
this.series = [Math.floor(Math.random() * 101)]
118+
}, 2000)
119+
},
120+
beforeDestroy() {
121+
if (this.tickId) window.clearInterval(this.tickId)
122+
},
123+
</vue-script>

‎samples/source/gauge/needle-gauge.xml‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,10 @@ plotOptions: {
5555
},
5656
needle: {
5757
color: '#0F172A',
58-
baseRadius: 10,
5958
length: '60%',
6059
baseWidth: 6,
6160
tipWidth: 1,
6261
},
63-
pivot: {
64-
show: true,
65-
color: '#0F172A',
66-
strokeColor: '#fff',
67-
strokeWidth: 2,
68-
},
6962
hollow: {
7063
margin: 0,
7164
size: '70%',

‎samples/source/line/line-large-dataset-downsampling.xml‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -123,12 +123,7 @@
123123

124124
<div class="stats" id="stats"></div>
125125

126-
<div class="note">
127-
<b>Try it:</b> drag-select on the chart to zoom in. With downsampling
128-
enabled, the chart re-samples from the raw 500k-point series against
129-
the visible window — so zooming reveals progressively higher-resolution
130-
detail without ever drawing more than ~target SVG paths.
131-
</div>
126+
132127
</div>
133128

134129
{{ charts[0] }}

0 commit comments

Comments
 (0)