Skip to content

Commit

Permalink
Merge pull request #4085 from davidchateau/main
Browse files Browse the repository at this point in the history 
added a demo for rangebar brush
  • Loading branch information
@junedchhipa
junedchhipa authored Oct 31, 2023
2 parents e1f64ff + 61bb16f commit ac28f00
Show file tree
Hide file tree
Showing 4 changed files with 1,067 additions and 0 deletions.
297 changes: 297 additions & 0 deletions samples/react/timelines/brush-rangebars.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,297 @@
<!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>Brush with range bars</title>

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

<style>

#wrapper {
padding-top: 20px;
padding-left: 10px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.1);
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>

<script>

function generateTimeRangeData(label, startDate, endDate, count) {
var points = []; // random points between start and end date
var series = []; // series between points 1 and 2, 3 and 4 etc

// Generate random points
for (var i = 0; i < count; i++) {
points.push(new Date(
startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())
));
}

// Sort the points in ascending order
points.sort((a, b) => a - b);

// Create ranges
for (var i = 0; i < points.length; i += 2) {
if (i + 1 < points.length) {
var startDateTime = points[i];
var endDateTime = points[i + 1];
series.push({
x: label,
y: [startDateTime.getTime(), endDateTime.getTime()],
});
}
}

return series;
}

var startDate = new Date("2023-10-01T00:00:00.000Z");
var endDate = new Date("2023-10-30T00:00:00.000Z");

var event1Series = generateTimeRangeData("event 1", startDate, endDate, 60);
var event2Series = generateTimeRangeData("event 2", startDate, endDate, 50);
var event3Series = generateTimeRangeData("event 3", startDate, endDate, 40);

var dataSeries = [{ data: event1Series }, { data: event2Series }, { data: event3Series }]

var barColors = ['#008ffb', '#00e396', '#feb019']

</script>
</head>

<body>

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

<div id="html">
&lt;div id=&quot;wrapper&quot;&gt;
&lt;div id=&quot;chart-TopChart&quot;&gt;
&lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;rangeBar&quot; height={230} /&gt;
&lt;/div&gt;
&lt;div id=&quot;chart-BrushChart&quot;&gt;
&lt;ReactApexChart options={this.state.optionsBrushChart} series={this.state.seriesBrushChart} type=&quot;rangeBar&quot; height={100} /&gt;
&lt;/div&gt;
&lt;/div&gt;
</div>

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

this.state = {

series: dataSeries,
options: {
chart: {
height: 230,
type: 'rangeBar',
id: 'TopChart',
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},

plotOptions: {
bar: {
horizontal: true,
barHeight: '50%',
borderRadius: 2,
rangeBarGroupRows: true
}
},

xaxis: {
type: 'datetime',
tooltip: {
enabled: false,
},
},

colors: barColors,

fill: {
type: 'solid',
opacity: 0.5,
},

stroke: {
show: true,
width: 2,
},

dataLabels: {
enabled: false,
},

tooltip: {
enabled: true,
x: {
show: true,
formatter: function (value, opts) {
if (typeof value === 'number') {
var d = new Date(value)
const timeLabel = `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
return timeLabel;
}
return value;
}
},
},

legend: {
show: false,
}
},

seriesBrushChart: dataSeries,
optionsBrushChart: {
chart: {
height: 100,
type: 'rangeBar',
id: 'BrushChart',
brush: {
target: 'TopChart',
enabled: true
},
toolbar: {
show: false,
},
selection: {
enabled: true,
type: 'x',
xaxis: {
min: new Date("2023-10-25T00:00:00.000Z").getTime(),
max: new Date("2023-10-30T00:00:00.000Z").getTime(),
}
},
},

plotOptions: {
bar: {
horizontal: true,
barHeight: '50%',
rangeBarGroupRows: true
}
},

xaxis: {
type: 'datetime',
min: new Date("2023-10-01T00:00:00.000Z").getTime(),
max: new Date("2023-10-30T00:00:00.000Z").getTime(),
tooltip: {
enabled: false,
},
},

yaxis: {
labels: {
style: {
colors: ['#fff', '#fff', '#fff'], // just hiding the labels here
}
},
},

colors: barColors,

fill: {
type: 'solid',
opacity: 0.5,
},

stroke: {
show: true,
width: 1,
},

dataLabels: {
enabled: false,
},

tooltip: {
enabled: true,
x: {
show: true,
},
},

legend: {
show: false,
}
},


};
}



render() {
return (
<div>
<div id="wrapper">
<div id="chart-TopChart">
<ReactApexChart options={this.state.options} series={this.state.series} type="rangeBar" height={230} />
</div>
<div id="chart-BrushChart">
<ReactApexChart options={this.state.optionsBrushChart} series={this.state.seriesBrushChart} type="rangeBar" height={100} />
</div>
</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 ac28f00

Please sign in to comment.