You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
390 lines
11 KiB
390 lines
11 KiB
4 years ago
|
var ctx = document.getElementById('myChart');
|
||
|
|
var chartData={}
|
||
|
|
|
||
|
|
const EVENTSTART=moment('2021-02-05 12:00:00+09:00');
|
||
|
|
const EVENTEND=moment('2021-02-12 20:59:59+09:00');
|
||
|
|
|
||
|
|
var diffData=[]
|
||
|
|
|
||
|
|
function ChartData(rank) {
|
||
|
|
if (!chartData[rank]) {
|
||
|
|
return [{x:0,y:0}]
|
||
|
|
}
|
||
|
|
if (rank<=20) {
|
||
|
|
return [...chartData[rank].map((data)=>{return {x:data.date,y:data.points}}),{x:moment().isBefore(EVENTEND)?moment():EVENTEND,y:chartData[rank][chartData[rank].length-1].points}]
|
||
|
|
} else {
|
||
|
|
return [{x:EVENTSTART,y:0},...chartData[rank].map((data)=>{return {x:data.date,y:data.points}})]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function GetRank(rank) {
|
||
|
|
if (chartData[rank]) {
|
||
|
|
return chartData[rank][chartData[rank].length-1].points
|
||
|
|
} else {
|
||
|
|
return "???"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function GetDiffData(rank1,rank2) {
|
||
|
|
for (var i=0;i<chartData[rank1].length;i++) {
|
||
|
|
diffData[i]=GetClosestPoint(rank2,i,chartData[rank1][i].date)
|
||
|
|
.then((response)=>{
|
||
|
|
return response[0].then((data)=>{
|
||
|
|
//console.log(data[0].points)
|
||
|
|
return {y:chartData[rank1][response[1]].points-data[0].points,x:chartData[rank1][response[1]].date}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.catch((err)=>{
|
||
|
|
return {y:0,x:0}
|
||
|
|
})
|
||
|
|
await new Promise(r => setTimeout(r, 10));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function GetClosestPoint(rank,i,date) {
|
||
|
|
return fetch("http://www.projectdivar.com/eventdata/t20?date="+encodeURI(date)+"&rank="+rank)
|
||
|
|
.then(response => [response.json(),i])
|
||
|
|
.catch((err)=>{
|
||
|
|
return [{points:0},i]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
document.getElementsByClassName('time')[0].innerHTML=(moment().isAfter(EVENTEND))?EVENTEND.diff(EVENTSTART,'hours')+1:moment().diff(EVENTSTART,'hours')
|
||
|
|
|
||
|
|
var extraData = []
|
||
|
|
var extraData2 = []
|
||
|
|
|
||
|
|
Chart.defaults.global.elements.point.radius=0
|
||
|
|
/*fetch("http://www.projectdivar.com/eventdata/t20?tier=100&event=7")
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => data.map((obj)=>{extraData=[...extraData,obj]}))
|
||
|
|
.then(()=>fetch("http://www.projectdivar.com/eventdata/t20?tier=500&event=7"))
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => data.map((obj)=>{extraData2=[...extraData2,obj]}))
|
||
|
|
.then(()=>fetch("http://www.projectdivar.com/eventdata/t20?all=true&event=8"))*/
|
||
|
|
fetch("http://www.projectdivar.com/eventdata/t20?all=true&event=9")
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => data.map((obj)=>{if (chartData[obj.rank]) {chartData[obj.rank]=[...chartData[obj.rank],obj]} else {chartData[obj.rank]=[obj]}}))
|
||
|
|
/*.then(()=>GetDiffData(1,2))
|
||
|
|
.then(()=>Promise.all(diffData))*/
|
||
|
|
.then((values)=>{
|
||
|
|
//console.log(values)
|
||
|
|
var tiers= [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,50,100,500,1000,2000,5000,10000,20000]
|
||
|
|
for (t of tiers) {
|
||
|
|
var fields = document.getElementsByClassName('points'+t)
|
||
|
|
var fields2 = document.getElementsByClassName('points'+t+'rate')
|
||
|
|
if (fields.length>0) {
|
||
|
|
fields[0].innerHTML=GetRank(t)
|
||
|
|
}
|
||
|
|
if (fields2.length>0) {
|
||
|
|
console.log(EVENTSTART.diff(moment(),'minutes'))
|
||
|
|
fields2[0].innerHTML=Math.ceil(GetRank(t)/(moment().diff(EVENTSTART,'minutes')/60))+"/hr"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var myChart = new Chart(ctx, {
|
||
|
|
type: 'line',
|
||
|
|
data: {
|
||
|
|
datasets: [{
|
||
|
|
label: 'T1',
|
||
|
|
data: ChartData(1),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(255, 99, 132, 0.05)',
|
||
|
|
'rgba(54, 162, 235, 0.05)',
|
||
|
|
'rgba(255, 206, 86, 0.05)',
|
||
|
|
'rgba(75, 192, 192, 0.05)',
|
||
|
|
'rgba(153, 102, 255, 0.05)',
|
||
|
|
'rgba(255, 159, 64, 0.05)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(255, 99, 132, 1)',
|
||
|
|
'rgba(54, 162, 235, 1)',
|
||
|
|
'rgba(255, 206, 86, 1)',
|
||
|
|
'rgba(75, 192, 192, 1)',
|
||
|
|
'rgba(153, 102, 255, 1)',
|
||
|
|
'rgba(255, 159, 64, 1)'
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T2',
|
||
|
|
data: ChartData(2),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(54, 162, 235, 0.05)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(54, 162, 235, 1)'
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T3',
|
||
|
|
data: ChartData(3),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(255, 206, 86, 0.05)',
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(255, 206, 86, 1)',
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T4',
|
||
|
|
data: ChartData(4),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(75, 192, 192, 0.05)',
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(75, 192, 192, 1)',
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T5',
|
||
|
|
data: ChartData(5),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(153, 102, 255, 0.05)',
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(153, 102, 255, 1)',
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T6',
|
||
|
|
data: ChartData(6),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(255, 159, 64, 0.05)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(255, 159, 64, 1)'
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T7',
|
||
|
|
data: ChartData(7),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(255, 99, 132, 0.05)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(255, 99, 132, 1)'
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T8',
|
||
|
|
data: ChartData(8),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(54, 162, 235, 0.05)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(54, 162, 235, 1)'
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T9',
|
||
|
|
data: ChartData(9),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(255, 206, 86, 0.05)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(255, 206, 86, 1)'
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T10',
|
||
|
|
data: ChartData(10),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(75, 192, 192, 0.05)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(75, 192, 192, 1)'
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T20',
|
||
|
|
data: ChartData(20),
|
||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||
|
|
borderColor: 'rgba(0, 0, 0, 1)',
|
||
|
|
/*pointBorderColor: 'rgba(60,60,60,0.5)',
|
||
|
|
pointStyle:'dash',
|
||
|
|
pointRadius: 1*/
|
||
|
|
},{
|
||
|
|
label: 'T50',
|
||
|
|
data: ChartData(50),
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
||
|
|
pointBackgroundColor: 'rgba(255, 255, 255, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
borderColor: 'rgba(255, 255, 255, 1)',
|
||
|
|
pointRadius: 2
|
||
|
|
}
|
||
|
|
/*,{
|
||
|
|
label: 'T50 (First Part)',
|
||
|
|
data: extraData.map((data)=>{return {x:moment(data.date).add(12,'d'),y:data.points}}),
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(0, 255, 255, 0.5)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(0, 255, 255, 1)'
|
||
|
|
]
|
||
|
|
}*/,{
|
||
|
|
label: 'T100',
|
||
|
|
data: ChartData(100),
|
||
|
|
backgroundColor: 'rgba(150, 255, 150, 0.5)',
|
||
|
|
pointBackgroundColor: 'rgba(150, 255, 150, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
borderColor: 'rgba(150, 255, 150, 1)',
|
||
|
|
pointRadius: 2
|
||
|
|
}/*,{
|
||
|
|
label: 'T100 (First Part)',
|
||
|
|
data: extraData.map((data)=>{return {x:moment(data.date).add(12,'d'),y:data.points}}),
|
||
|
|
backgroundColor: 'rgba(255, 150, 0, 0.5)',
|
||
|
|
borderColor: 'rgba(255, 150, 0, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
pointRadius: 2
|
||
|
|
}*/,{
|
||
|
|
label: 'T500',
|
||
|
|
data: ChartData(500),
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(160, 0, 0, 0.5)',
|
||
|
|
pointBackgroundColor:
|
||
|
|
'rgba(160, 0, 0, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
borderColor:
|
||
|
|
'rgba(160, 0, 0, 1)',
|
||
|
|
pointRadius: 2
|
||
|
|
}/*,{
|
||
|
|
label: 'T500 (First Part)',
|
||
|
|
data: extraData2.map((data)=>{return {x:moment(data.date).add(12,'d'),y:data.points}}),
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(65, 60, 0, 0.5)',
|
||
|
|
borderColor:
|
||
|
|
'rgba(65, 60, 0, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
pointRadius: 2
|
||
|
|
}*/,{
|
||
|
|
label: 'T1000',
|
||
|
|
data: ChartData(1000),
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(255, 150, 150, 0.5)',
|
||
|
|
pointBackgroundColor:
|
||
|
|
'rgba(255, 150, 150, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
borderColor:
|
||
|
|
'rgba(255, 150, 150, 1)',
|
||
|
|
pointRadius: 2
|
||
|
|
},{
|
||
|
|
label: 'T2000',
|
||
|
|
data: ChartData(2000),
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(220, 220, 0, 0.5)',
|
||
|
|
pointBackgroundColor:
|
||
|
|
'rgba(220, 220, 0, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
borderColor:
|
||
|
|
'rgba(220, 220, 0, 1)',
|
||
|
|
pointRadius: 2
|
||
|
|
},{
|
||
|
|
label: 'T5000',
|
||
|
|
data: ChartData(5000),
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(0, 140, 0, 0.5)',
|
||
|
|
pointBackgroundColor:
|
||
|
|
'rgba(0, 140, 0, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
borderColor:
|
||
|
|
'rgba(0, 140, 0, 1)',
|
||
|
|
pointRadius: 2
|
||
|
|
}/*,{
|
||
|
|
label: 'T10000 (Last Event)',
|
||
|
|
data: extraData.map((data)=>{return {x:moment(data.date).add(12,'d'),y:data.points}}),
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(30, 30, 255, 0.5)',
|
||
|
|
pointBackgroundColor:
|
||
|
|
'rgba(30, 30, 255, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
borderColor:
|
||
|
|
'rgba(30, 30, 255, 1)',
|
||
|
|
pointRadius: 2
|
||
|
|
}*/,{
|
||
|
|
label: 'T10000',
|
||
|
|
data: ChartData(10000),
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(30, 30, 255, 0.5)',
|
||
|
|
pointBackgroundColor:
|
||
|
|
'rgba(30, 30, 255, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
borderColor:
|
||
|
|
'rgba(30, 30, 255, 1)',
|
||
|
|
pointRadius: 2
|
||
|
|
},{
|
||
|
|
label: 'T20000',
|
||
|
|
data: ChartData(20000),
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(0, 0, 60, 0.5)',
|
||
|
|
pointBackgroundColor:
|
||
|
|
'rgba(0, 0, 60, 1)',
|
||
|
|
pointBorderColor: 'black',
|
||
|
|
borderColor:
|
||
|
|
'rgba(0, 0, 60, 1)',
|
||
|
|
pointRadius: 2
|
||
|
|
},/*{
|
||
|
|
label: 'T1 vs T2',
|
||
|
|
data: values,
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(30, 30, 255, 0.5)',
|
||
|
|
borderColor:
|
||
|
|
'rgba(30, 30, 255, 1)'
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
label: 'T100 HAPPY FORTUNE NEW YEAR',
|
||
|
|
data:
|
||
|
|
{x:moment('2021-01-12 12:00:00+09:00').add(0,'days').add(0,'hours'),y:0},
|
||
|
|
{x:moment('2021-01-12 12:00:00+09:00').add(0,'days').add(7,'hours'),y:54036},
|
||
|
|
{x:moment('2021-01-12 12:00:00+09:00').add(4,'days').add(23,'hours'),y:451398},
|
||
|
|
{x:moment('2021-01-12 12:00:00+09:00').add(5,'days').add(3,'hours'),y:470204},
|
||
|
|
{x:moment('2021-01-12 12:00:00+09:00').add(7,'days').add(18,'hours'),y:671150},
|
||
|
|
{x:moment('2021-01-12 12:00:00+09:00').add(8,'days').add(15,'hours'),y:915147},
|
||
|
|
{x:moment('2021-01-12 12:00:00+09:00').add(8,'days').add(17,'hours'),y:952330},
|
||
|
|
{x:moment('2021-01-12 12:00:00+09:00').add(8,'days').add(19,'hours'),y:988548},
|
||
|
|
{x:moment('2021-01-12 12:00:00+09:00').add(8,'days').add(21,'hours'),y:1027488},,
|
||
|
|
backgroundColor:
|
||
|
|
'rgba(255, 255, 150, 0.5)',
|
||
|
|
borderColor:
|
||
|
|
'rgba(255, 255, 150, 1)'
|
||
|
|
]
|
||
|
|
}*/]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
tooltips: {
|
||
|
|
callbacks: {
|
||
|
|
title: function(tooltipItem, data) {
|
||
|
|
//console.log(JSON.stringify(tooltipItem))
|
||
|
|
//var title = data.datasets[tooltipItem.datasetIndex].label || '';
|
||
|
|
/*
|
||
|
|
[{"xLabel":"2021-01-25T05:42:58.214Z","yLabel":1148478,"label":"2021-01-25T05:42:58.214Z","value":"1148478","index":615,"datasetIndex":0,"x":108.39772118267871,"y":99.4803316356776}]
|
||
|
|
*/
|
||
|
|
return moment(tooltipItem[0].xLabel);
|
||
|
|
},
|
||
|
|
label: function(tooltipItem, data) {
|
||
|
|
var label = data.datasets[tooltipItem.datasetIndex].label || '';
|
||
|
|
|
||
|
|
if (label) {
|
||
|
|
label += ' ';
|
||
|
|
}
|
||
|
|
label += tooltipItem.yLabel+" Pt";
|
||
|
|
return label;
|
||
|
|
},
|
||
|
|
footer: function(tooltipItem, data) {
|
||
|
|
return Math.ceil(Number(tooltipItem[0].yLabel)/(moment(tooltipItem[0].xLabel).diff(EVENTSTART,'minutes')/60))+"/hr";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
yAxes: [{
|
||
|
|
ticks: {
|
||
|
|
beginAtZero: true,
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
xAxes: [{
|
||
|
|
type: 'time',
|
||
|
|
time: {
|
||
|
|
unit: 'hours',
|
||
|
|
displayFormats: {
|
||
|
|
hours: 'MMM D hA'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
bounds:'ticks',
|
||
|
|
ticks: {
|
||
|
|
min:EVENTSTART,
|
||
|
|
max:EVENTEND
|
||
|
|
},
|
||
|
|
distribution: 'linear'
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|