Skip to content

Commit

Permalink
MonotoneCubic fixes:
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@rosco54
rosco54 committed Apr 6, 2024
1 parent 52e3b0b commit 0abd03b
Show file tree
Hide file tree
Showing 7 changed files with 1,249 additions and 82 deletions.
308 changes: 308 additions & 0 deletions samples/react/rangeArea/range-area-line-combo-monotoneCubic.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,308 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Range Area - Line - monotone cubic (Combo)</title>

<link href="../../assets/styles.css" rel="stylesheet" />

<style>

#chart {
max-width: 650px;
margin: 35px auto;
}

</style>

<script>
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/[email protected]/classList.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
)
</script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="../../../dist/apexcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/react-apexcharts.iife.min.js"></script>


<script>
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
</script>


</head>

<body>

<div id="app"></div>

<div id="html">
&lt;div id=&quot;chart&quot;&gt;
&lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;rangeArea&quot; height={350} /&gt;
&lt;/div&gt;
</div>

<script type="text/babel">
class ApexChart extends React.Component {
constructor(props) {
super(props);

this.state = {

series: [
{
type: 'rangeArea',
name: 'Team B Range',

data: [
{
x: 'Jan',
y: [null, null]
},
{
x: 'Feb',
y: [1200, 1800]
},
{
x: 'Mar',
y: [900, 2900]
},
{
x: 'Apr',
y: [1400, 2700]
},
{
x: 'May',
y: [2600, 3900]
},
{
x: 'Jun',
y: [500, 1700]
},
{
x: 'Jul',
y: [1900, 2300]
},
{
x: 'Aug',
y: [1000, 1500]
}
]
},

{
type: 'rangeArea',
name: 'Team A Range',
data: [
{
x: 'Jan',
y: [3100, 3400]
},
{
x: 'Feb',
y: [4200, 5200]
},
{
x: 'Mar',
y: [null, null]
},
{
x: 'Apr',
y: [3400, 3900]
},
{
x: 'May',
y: [5100, 5900]
},
{
x: 'Jun',
y: [5400, 6700]
},
{
x: 'Jul',
y: [4300, 4600]
},
{
x: 'Aug',
y: [null, null]
}
]
},

{
type: 'line',
name: 'Team B Median',
data: [
{
x: 'Jan',
y: 1500
},
{
x: 'Feb',
y: 1700
},
{
x: 'Mar',
y: 1900
},
{
x: 'Apr',
y: 2200
},
{
x: 'May',
y: 3000
},
{
x: 'Jun',
y: 1000
},
{
x: 'Jul',
y: 2100
},
{
x: 'Aug',
y: 1200
},
{
x: 'Sep',
y: 1800
},
{
x: 'Oct',
y: 2000
}
]
},
{
type: 'line',
name: 'Team A Median',
data: [
{
x: 'Jan',
y: 3300
},
{
x: 'Feb',
y: 4900
},
{
x: 'Mar',
y: 4300
},
{
x: 'Apr',
y: 3700
},
{
x: 'May',
y: 5500
},
{
x: 'Jun',
y: 5900
},
{
x: 'Jul',
y: 4500
},
{
x: 'Aug',
y: 2400
},
{
x: 'Sep',
y: 2100
},
{
x: 'Oct',
y: 1500
}
]
}
],
options: {
chart: {
height: 350,
type: 'rangeArea',
animations: {
speed: 500
}
},
colors: ['#d4526e', '#33b2df', '#d4526e', '#33b2df'],
dataLabels: {
enabled: false
},
fill: {
opacity: [0.24, 0.24, 1, 1]
},
forecastDataPoints: {
count: 2
},
stroke: {
curve: 'monotoneCubic',
width: [0, 0, 2, 2]
},
legend: {
show: true,
customLegendItems: ['Team B', 'Team A'],
inverseOrder: true
},
title: {
text: 'MonotoneCubic Range Area, Forecast Line, Missing Data'
},
markers: {
hover: {
sizeOffset: 5
}
}
},


};
}



render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="rangeArea" height={350} />
</div>
<div id="html-dist"></div>
</div>
);
}
}

const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ApexChart), domContainer);
</script>


</body>
</html>
Loading

0 comments on commit 0abd03b

Please sign in to comment.