228 lines
8.9 KiB
HTML
228 lines
8.9 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>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
|
|
|
|
<link href="{{url_for('static', filename='dark-theme.css')}}" rel="stylesheet"/>
|
|
</head>
|
|
|
|
<body style="height: 100vh;">
|
|
<div class="container">
|
|
<div style="text-align: center">
|
|
<img style="margin-top: -20px;" width="600px" src="{{url_for('static', filename='banner.png')}}" alt="banner">
|
|
<br>
|
|
<div style="margin-top: -15px;">
|
|
<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/downloads/release/python-360/">
|
|
<img alt="Python3" src="https://img.shields.io/badge/built%20for-Python≥3.6-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>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="columns">
|
|
<div class="column is-10">
|
|
<div class="tabs">
|
|
<ul>
|
|
{% for streamer in streamers.split(',')|sort %}
|
|
<li onClick="changeStreamer('{{ streamer }}', {{ loop.index }})"><a>{{ streamer.replace(".json", "") }}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="column" style="text-align: right">
|
|
<label class="checkbox">
|
|
Annotations
|
|
<input type="checkbox" checked="true" id="annotations">
|
|
</label>
|
|
<label class="checkbox">
|
|
Dark mode
|
|
<input type="checkbox" checked="true" id="dark-mode">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box" id="chart" style="padding: 0.30rem;"></div>
|
|
|
|
<!-- <hr style="margin: 1.2rem 0;"> -->
|
|
<div style="text-align: center">If you want to help on this project, please leave a star 🌟 and share it with your friends! 😎 - A coffee is always a gesture of LOVE ❤️
|
|
<a href="https://www.buymeacoffee.com/tkdalex" target="_blank">
|
|
<img style="margin-bottom: -8px; margin-left: 10px;" src="https://cdn.buymeacoffee.com/buttons/lato-yellow.png" alt="Buy Me A Coffee" height="5" width="138">
|
|
</a>
|
|
</div>
|
|
|
|
<br>
|
|
</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: 400,
|
|
zoom: {
|
|
type: 'x',
|
|
enabled: true,
|
|
autoScaleYaxis: true
|
|
},
|
|
// background: '#2B2D3E',
|
|
foreColor: '#fff'
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
},
|
|
title: {
|
|
text: 'Channel points (dates are displayed in UTC)',
|
|
align: 'left'
|
|
},
|
|
colors: ["#f9826c"],
|
|
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',
|
|
labels: {
|
|
datetimeUTC: false
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
shared: false,
|
|
x: {
|
|
show: true,
|
|
format: 'HH:mm:ss dd MMM',
|
|
},
|
|
custom: ({series, seriesIndex, dataPointIndex, w}) => {
|
|
return (`<div class="apexcharts-active">
|
|
<div class="apexcharts-tooltip-title">${w.globals.seriesNames[seriesIndex]}</div>
|
|
<div class="apexcharts-tooltip-series-group apexcharts-active" style="order: 1; display: flex; padding-bottom: 0px !important;">
|
|
<div class="apexcharts-tooltip-text">
|
|
<div class="apexcharts-tooltip-y-group">
|
|
<span class="apexcharts-tooltip-text-label"><b>Points</b>: ${series[seriesIndex][dataPointIndex]}</span><br>
|
|
<span class="apexcharts-tooltip-text-label"><b>Reason</b>: ${w.globals.seriesZ[seriesIndex][dataPointIndex] ? w.globals.seriesZ[seriesIndex][dataPointIndex] : ''}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
)
|
|
}
|
|
},
|
|
noData: {
|
|
text: 'Loading...'
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
|
var currentStreamer = null;
|
|
var annotations = [];
|
|
|
|
var refresh = parseInt("{{ refresh }}");
|
|
|
|
$(document).ready(function() {
|
|
chart.render();
|
|
$("li").eq(0).click();
|
|
});
|
|
|
|
function changeStreamer(streamer, index) {
|
|
$("li").removeClass( "is-active" )
|
|
$("li").eq(index - 1).addClass('is-active');
|
|
currentStreamer = streamer;
|
|
getStreamerData(streamer);
|
|
}
|
|
|
|
function getStreamerData(streamer) {
|
|
if(currentStreamer == streamer){
|
|
$.getJSON(`./json/${streamer}`, function (response) {
|
|
chart.updateSeries([{
|
|
name: streamer.replace(".json", ""),
|
|
data: response["series"]
|
|
}], true)
|
|
annotations = response["annotations"];
|
|
updateAnnotations()
|
|
setTimeout(function(){getStreamerData(streamer);}, 300000); // 5 minutes
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateAnnotations() {
|
|
if($('#annotations').prop("checked") === true){
|
|
clearAnnotations()
|
|
if(annotations && annotations.length > 0)
|
|
annotations.forEach((annotation, index) => {
|
|
annotations[index]['id'] = `id-${index}`
|
|
chart.addXaxisAnnotation(annotation, true)
|
|
})
|
|
} else clearAnnotations()
|
|
}
|
|
|
|
function clearAnnotations(){
|
|
if(annotations && annotations.length > 0)
|
|
annotations.forEach((annotation, index) => {
|
|
chart.removeAnnotation(annotation['id'])
|
|
})
|
|
}
|
|
|
|
function toggleDarkMode(){
|
|
var darkMode = $('#dark-mode').prop("checked")
|
|
$("link[href='{{url_for('static', filename='dark-theme.css')}}']").prop("disabled", !darkMode);
|
|
chart.updateOptions({
|
|
colors: darkMode === true ? ["#f9826c"] : ['#008ffb'],
|
|
chart: {
|
|
foreColor: darkMode === true ? "#fff" : '#373d3f'
|
|
},
|
|
tooltip: {
|
|
theme: darkMode === true ? "dark" : "light"
|
|
}
|
|
})
|
|
// if (darkMode === true) $("#chart").addClass("box")
|
|
// else $("#chart").removeClass("box")
|
|
}
|
|
|
|
$('#annotations').click(() => { updateAnnotations(); });
|
|
$('#dark-mode').click(() => { toggleDarkMode(); });
|
|
|
|
</script>
|
|
|
|
</html>
|