Skip to content

Commit 0abd03b

Browse files
rosco54rosco54
committed
MonotoneCubic fixes:
Line and area charts with null data points now work. RangeArea with null data points now works. RangeArea with forecast line combo chart now works. Refactored to implement full series interpolation before segmenting (segments relate to each other). Fix libs/monotone-cubic.js splice.slice(): NEEDS TO BE PUSHED UPSTREAM was crashing on single point slices. New sample as a regression test to verify most of the above.
1 parent 52e3b0b commit 0abd03b

File tree

7 files changed

+1249
-82
lines changed

7 files changed

+1249
-82
lines changed

‎samples/react/rangeArea/range-area-line-combo-monotoneCubic.html

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
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>Range Area - Line - monotone cubic (Combo)</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/eligrey-classlist-js-polyfill@1.2.20171210/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/react@16.12/umd/react.production.min.js"></script>
37+
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>
38+
<script src="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/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/react-apexcharts@1.3.6/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+
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;rangeArea&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+
{
76+
type: 'rangeArea',
77+
name: 'Team B Range',
78+
79+
data: [
80+
{
81+
x: 'Jan',
82+
y: [null, null]
83+
},
84+
{
85+
x: 'Feb',
86+
y: [1200, 1800]
87+
},
88+
{
89+
x: 'Mar',
90+
y: [900, 2900]
91+
},
92+
{
93+
x: 'Apr',
94+
y: [1400, 2700]
95+
},
96+
{
97+
x: 'May',
98+
y: [2600, 3900]
99+
},
100+
{
101+
x: 'Jun',
102+
y: [500, 1700]
103+
},
104+
{
105+
x: 'Jul',
106+
y: [1900, 2300]
107+
},
108+
{
109+
x: 'Aug',
110+
y: [1000, 1500]
111+
}
112+
]
113+
},
114+
115+
{
116+
type: 'rangeArea',
117+
name: 'Team A Range',
118+
data: [
119+
{
120+
x: 'Jan',
121+
y: [3100, 3400]
122+
},
123+
{
124+
x: 'Feb',
125+
y: [4200, 5200]
126+
},
127+
{
128+
x: 'Mar',
129+
y: [null, null]
130+
},
131+
{
132+
x: 'Apr',
133+
y: [3400, 3900]
134+
},
135+
{
136+
x: 'May',
137+
y: [5100, 5900]
138+
},
139+
{
140+
x: 'Jun',
141+
y: [5400, 6700]
142+
},
143+
{
144+
x: 'Jul',
145+
y: [4300, 4600]
146+
},
147+
{
148+
x: 'Aug',
149+
y: [null, null]
150+
}
151+
]
152+
},
153+
154+
{
155+
type: 'line',
156+
name: 'Team B Median',
157+
data: [
158+
{
159+
x: 'Jan',
160+
y: 1500
161+
},
162+
{
163+
x: 'Feb',
164+
y: 1700
165+
},
166+
{
167+
x: 'Mar',
168+
y: 1900
169+
},
170+
{
171+
x: 'Apr',
172+
y: 2200
173+
},
174+
{
175+
x: 'May',
176+
y: 3000
177+
},
178+
{
179+
x: 'Jun',
180+
y: 1000
181+
},
182+
{
183+
x: 'Jul',
184+
y: 2100
185+
},
186+
{
187+
x: 'Aug',
188+
y: 1200
189+
},
190+
{
191+
x: 'Sep',
192+
y: 1800
193+
},
194+
{
195+
x: 'Oct',
196+
y: 2000
197+
}
198+
]
199+
},
200+
{
201+
type: 'line',
202+
name: 'Team A Median',
203+
data: [
204+
{
205+
x: 'Jan',
206+
y: 3300
207+
},
208+
{
209+
x: 'Feb',
210+
y: 4900
211+
},
212+
{
213+
x: 'Mar',
214+
y: 4300
215+
},
216+
{
217+
x: 'Apr',
218+
y: 3700
219+
},
220+
{
221+
x: 'May',
222+
y: 5500
223+
},
224+
{
225+
x: 'Jun',
226+
y: 5900
227+
},
228+
{
229+
x: 'Jul',
230+
y: 4500
231+
},
232+
{
233+
x: 'Aug',
234+
y: 2400
235+
},
236+
{
237+
x: 'Sep',
238+
y: 2100
239+
},
240+
{
241+
x: 'Oct',
242+
y: 1500
243+
}
244+
]
245+
}
246+
],
247+
options: {
248+
chart: {
249+
height: 350,
250+
type: 'rangeArea',
251+
animations: {
252+
speed: 500
253+
}
254+
},
255+
colors: ['#d4526e', '#33b2df', '#d4526e', '#33b2df'],
256+
dataLabels: {
257+
enabled: false
258+
},
259+
fill: {
260+
opacity: [0.24, 0.24, 1, 1]
261+
},
262+
forecastDataPoints: {
263+
count: 2
264+
},
265+
stroke: {
266+
curve: 'monotoneCubic',
267+
width: [0, 0, 2, 2]
268+
},
269+
legend: {
270+
show: true,
271+
customLegendItems: ['Team B', 'Team A'],
272+
inverseOrder: true
273+
},
274+
title: {
275+
text: 'MonotoneCubic Range Area, Forecast Line, Missing Data'
276+
},
277+
markers: {
278+
hover: {
279+
sizeOffset: 5
280+
}
281+
}
282+
},
283+
284+
285+
};
286+
}
287+
288+
289+
290+
render() {
291+
return (
292+
<div>
293+
<div id="chart">
294+
<ReactApexChart options={this.state.options} series={this.state.series} type="rangeArea" height={350} />
295+
</div>
296+
<div id="html-dist"></div>
297+
</div>
298+
);
299+
}
300+
}
301+
302+
const domContainer = document.querySelector('#app');
303+
ReactDOM.render(React.createElement(ApexChart), domContainer);
304+
</script>
305+
306+
307+
</body>
308+
</html>

0 commit comments

Comments
 (0)