113 lines
3.8 KiB
HTML
113 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Twitch-Channel-Points-Miner-v2</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div style="text-align: center">
|
|
<img width="600px" src="{{url_for('static', filename='banner.png')}}" alt="banner">
|
|
<br>
|
|
|
|
<a style="text-decoration: none;" href="https://github.com/Tkd-Alex/Twitch-Channel-Points-Miner-v2/blob/master/LICENSE">
|
|
<img alt="License" src="https://img.shields.io/github/license/Tkd-Alex/Twitch-Channel-Points-Miner-v2" />
|
|
</a>
|
|
<a style="text-decoration: none;" href="https://www.python.org/download/releases/3.0/">
|
|
<img alt="Python3" src="https://img.shields.io/badge/built%20with-Python3-red.svg?style=flat" />
|
|
</a>
|
|
<a style="text-decoration: none;" href="https://github.com/Tkd-Alex/Twitch-Channel-Points-Miner-v2/pulls">
|
|
<img alt="PRsWelcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" />
|
|
</a>
|
|
<a style="text-decoration: none;" href="https://github.com/Tkd-Alex/Twitch-Channel-Points-Miner-v2/stargazers">
|
|
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Tkd-Alex/Twitch-Channel-Points-Miner-v2" />
|
|
</a>
|
|
<a style="text-decoration: none;" href="https://github.com/Tkd-Alex/Twitch-Channel-Points-Miner-v2/issues?q=is%3Aissue+is%3Aclosed">
|
|
<img alt="GitHub closed issues" src="https://img.shields.io/github/issues-closed/Tkd-Alex/Twitch-Channel-Points-Miner-v2">
|
|
</a>
|
|
<a style="text-decoration: none;" href="https://github.com/Tkd-Alex/Twitch-Channel-Points-Miner-v2">
|
|
<img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/Tkd-Alex/Twitch-Channel-Points-Miner-v2" />
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div id="chart"></div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
// https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/
|
|
var options = {
|
|
series: [],
|
|
chart: {
|
|
type: 'area',
|
|
stacked: false,
|
|
height: 350,
|
|
zoom: {
|
|
type: 'x',
|
|
enabled: true,
|
|
autoScaleYaxis: true
|
|
},
|
|
toolbar: {
|
|
autoSelected: 'zoom'
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
},
|
|
title: {
|
|
text: 'Channel points',
|
|
align: 'left'
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
inverseColors: false,
|
|
opacityFrom: 0.5,
|
|
opacityTo: 0,
|
|
stops: [0, 90, 100]
|
|
},
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Channel points'
|
|
},
|
|
},
|
|
xaxis: {
|
|
type: 'datetime'
|
|
},
|
|
tooltip: {
|
|
shared: false
|
|
},
|
|
noData: {
|
|
text: 'Loading...'
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
|
chart.render();
|
|
|
|
var streamers = '{{ streamers }}';
|
|
streamers = streamers.split(',');
|
|
|
|
streamers.forEach(streamer => {
|
|
$.getJSON(`./json/${streamer}`, function (response) {
|
|
chart.appendSeries({
|
|
name: streamer.replace(".json", ""),
|
|
data: response["series"]
|
|
})
|
|
response["points"].forEach(annotation => {
|
|
chart.addPointAnnotation(annotation, true)
|
|
})
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</html>
|