Skip to content

Commit 7f04fa3

Browse files
rosco54rosco54
committed
Base the default grid on a nice scaled axis so that it reflects a
users settings, rather than the linearscale(). That is, the grid shown when all series are collapsed or have no data or null data. To hide the yaxis labels, title, etc it is still required to explicitly set yaxis.showForNullSeries: false, which is 'true' by default. See the sample: vanilla-js/misc/no-data.html, for example. Improved generalization of series stacking. Rename two methods in the Scales class to reflect their newer function. Miscellaneous fixes: 1) series.type: 'column' was not checked for positive/negative stacked sums. 'bar' was. 2) Grid now renders based off the first visible yaxis, rather than yaxis[0], which may have been hidden. 3) stacked bars when yaxis.showAlways: true now stack properly when series are collapsed. 4) legend now remains visible when yaxis.showAlways: true and all series are collapsed. 5) Stacked, grouped bar/column series improved axis scaling. 6) w.globals.seriesGroups: don't leave series names as 'undefined'. 7) Remove the assumption that, if one series group is bar-like then all series groups are bar-like, when computing bar locations. 8) Update e2e snapshot area/area-github-style.png New samples: 1) misc/no-data.xml 2) mixed/line-column-area-stacked-grouped.xml
1 parent 0eef318 commit 7f04fa3

24 files changed

+1790
-108
lines changed

‎samples/react/misc/no-data.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
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>Custom Legend</title>
8+
9+
<link href="../../assets/styles.css" rel="stylesheet" />
10+
11+
<style>
12+
13+
#chart {
14+
max-width: 650px;
15+
margin: 35px auto;
16+
}
17+
18+
</style>
19+
20+
<script>
21+
window.Promise ||
22+
document.write(
23+
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
24+
)
25+
window.Promise ||
26+
document.write(
27+
'<script src="https://cdn.jsdelivr.net/npm/[email protected]/classList.min.js"><\/script>'
28+
)
29+
window.Promise ||
30+
document.write(
31+
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
32+
)
33+
</script>
34+
35+
36+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
37+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
38+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/prop-types.min.js"></script>
39+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
40+
<script src="../../../dist/apexcharts.js"></script>
41+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/react-apexcharts.iife.min.js"></script>
42+
43+
44+
<script>
45+
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
46+
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
47+
var _seed = 42;
48+
Math.random = function() {
49+
_seed = _seed * 16807 % 2147483647;
50+
return (_seed - 1) / 2147483646;
51+
};
52+
</script>
53+
54+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
55+
</head>
56+
57+
<body>
58+
59+
<div id="app"></div>
60+
61+
<div id="html">
62+
&lt;div id=&quot;chart&quot;&gt;
63+
&lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;area&quot; height={350} /&gt;
64+
&lt;/div&gt;
65+
</div>
66+
67+
<script type="text/babel">
68+
class ApexChart extends React.Component {
69+
constructor(props) {
70+
super(props);
71+
72+
this.state = {
73+
74+
series: [{
75+
name: 'Network In',
76+
data: [],
77+
}],
78+
options: {
79+
chart: {
80+
type: 'area',
81+
height: 350,
82+
animations: {
83+
enabled: false
84+
},
85+
zoom: {
86+
enabled: false
87+
},
88+
},
89+
dataLabels: {
90+
enabled: false
91+
},
92+
stroke: {
93+
curve: 'smooth'
94+
},
95+
markers: {
96+
size: 5,
97+
hover: {
98+
size: 9
99+
}
100+
},
101+
title: {
102+
text: 'Network Monitoring',
103+
},
104+
tooltip: {
105+
intersect: true,
106+
shared: false
107+
},
108+
theme: {
109+
palette: 'palette1'
110+
},
111+
xaxis: {
112+
type: 'datetime',
113+
},
114+
yaxis: {
115+
showForNullSeries: false,
116+
tickAmount: 3,
117+
min: 0,
118+
title: {
119+
text: 'Received MB'
120+
}
121+
},
122+
noData: {
123+
text: 'No Data',
124+
style: {
125+
color: '#FCC',
126+
fontSize: '24px'
127+
}
128+
}
129+
},
130+
131+
132+
};
133+
}
134+
135+
136+
137+
render() {
138+
return (
139+
<div>
140+
<div id="chart">
141+
<ReactApexChart options={this.state.options} series={this.state.series} type="area" height={350} />
142+
</div>
143+
<div id="html-dist"></div>
144+
</div>
145+
);
146+
}
147+
}
148+
149+
const domContainer = document.querySelector('#app');
150+
ReactDOM.render(React.createElement(ApexChart), domContainer);
151+
</script>
152+
153+
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)