Skip to content

Commit 4604653

Browse files
authored
Merge pull request #4390 from rosco54/MonotoneCubic_paths_refactoring
MonotoneCubic paths feature completion
2 parents 52e3b0b + 0abd03b commit 4604653

File tree

7 files changed

+1249
-82
lines changed

7 files changed

+1249
-82
lines changed
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)