commit
8632eecf87
@ -0,0 +1 @@ |
||||
<iframe src="http://projectdivar.com:8080/event/" width="100%" height="100%" frameBorder="0"></iframe> |
||||
@ -0,0 +1,159 @@ |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>繋ぎ手たちは導かれ～前編～ Event Tracker</title> |
||||
</head> |
||||
<link rel="stylesheet" href="bootstrap.min.css"> |
||||
<script type="text/javascript" src="bootstrap.min.js"></script> |
||||
<script type="text/javascript" src="moment.js"></script> |
||||
<script type="text/javascript" src="Chart.js"></script> |
||||
<body style="background-color:#102030"> |
||||
<h1 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<sup>ᐊ</sup> <span style="position:relative0;text-decoration:underline;top:15px;">繋ぎ手たちは導かれ～前編～</span> <sup><a href="8.html">ᐅ</a></sup> |
||||
|
||||
</h1> |
||||
<h3 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
225 hours |
||||
</h3> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col col-8"> |
||||
<div class="chart-container" style=" position: relative;margin: auto;"> |
||||
<canvas id="myChart" width="320"></canvas> |
||||
</div> |
||||
<script type="text/javascript" src="chart_7.js"></script> |
||||
</div> |
||||
<div class="col col-4 pt-5"> |
||||
<div class="container"> |
||||
<div class="rounded row justify-content-md-center "> |
||||
<div class="p-0 col col-3 text-white bg-dark border border-light text-center"> |
||||
<h4>Position</h4> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<h4>Event Points</h4> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<h4>Rate</h4> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-warning bg-dark border border-light text-center"> |
||||
<b>1位</b> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b>6,370,130</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b>28,311/hr</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-primary bg-dark border border-light text-center"> |
||||
<b>2位</b> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
6,202,305 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
27,565/hr |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-secondary bg-dark border border-light text-center"> |
||||
<b>3位</b> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
4,876,543 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
21,673/hr |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
10位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
4,482,110 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
19,920/hr |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
50位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
2,199,288 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
8,624/hr |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
100位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
1,888,672 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
7,406/hr |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
500位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
~778,000 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
~3,457/hr |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
1000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
~546,000 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
~2,426/hr |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
5000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
~200,000 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
~784/hr |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
10000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
~114,000 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
~447/hr |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row justify-content-center"> |
||||
<div class="col-12"> |
||||
<img src="t20_7.png" class="pt-5" style="color:#999999;width:812;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
@ -0,0 +1,191 @@ |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>繋ぎ手たちは導かれ～後編～ Event Tracker</title> |
||||
</head> |
||||
<link rel="stylesheet" href="bootstrap.min.css"> |
||||
<script type="text/javascript" src="bootstrap.min.js"></script> |
||||
<script type="text/javascript" src="moment.js"></script> |
||||
<script type="text/javascript" src="Chart.js"></script> |
||||
<body style="background-color:#102030"> |
||||
<h1 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<sup><a href="7.html">ᐊ</a></sup> <span style="position:relative0;text-decoration:underline;top:15px;">繋ぎ手たちは導かれ～後編～</span> <sup><a href="9.html">ᐅ</a></sup> |
||||
</h1> |
||||
<h3 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<span class="time"></span>/225 hours |
||||
</h3> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col col-8"> |
||||
<div class="chart-container" style=" position: relative;margin: auto;"> |
||||
<canvas id="myChart" height="180"></canvas> |
||||
</div> |
||||
<script type="text/javascript" src="chart_8.js"></script> |
||||
</div> |
||||
<div class="col col-4 pt-5"> |
||||
<div class="container"> |
||||
<div class="rounded row justify-content-md-center "> |
||||
<div class="p-0 col col-3 text-white bg-dark border border-light text-center"> |
||||
<h4>Position</h4> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<h4>Event Points</h4> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<h4>Rate</h4> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-warning bg-dark border border-light text-center"> |
||||
<b>1位</b> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points1">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-primary bg-dark border border-light text-center"> |
||||
<b>2位</b> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points2">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points2rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-secondary bg-dark border border-light text-center"> |
||||
<b>3位</b> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points3">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points3rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
10位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points10">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points10rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
50位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points50">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points50rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
100位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points100">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points100rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
500位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points500">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points500rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
1000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
2000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points2000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points2000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
5000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points5000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points5000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
10000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points10000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points10000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
20000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points20000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points20000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
50000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points50000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points50000rate">...</b> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row justify-content-center"> |
||||
<div class="col-12"> |
||||
<img src="t20_8.png" class="pt-5" style="color:#999999;width:812;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
@ -0,0 +1,268 @@ |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>紅き純情、青い月夜に蕩けて Event Tracker</title> |
||||
</head> |
||||
<link rel="stylesheet" href="bootstrap.min.css"> |
||||
<script type="text/javascript" src="bootstrap.min.js"></script> |
||||
<script type="text/javascript" src="moment.js"></script> |
||||
<script type="text/javascript" src="Chart.js"></script> |
||||
<body style="background-color:#102030"> |
||||
<h1 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<sup><a href="8.html">ᐊ</a></sup> <span style="position:relative0;text-decoration:underline;top:15px;">紅き純情、青い月夜に蕩けて</span> <sup><a href="10.html">ᐅ</a></sup> |
||||
</h1> |
||||
<h3 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<span class="time"></span>/177 hours |
||||
</h3> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col"> |
||||
<div class="chart-container" style=" position: relative;margin: auto;"> |
||||
<canvas id="myChart" height="150"></canvas> |
||||
</div> |
||||
<script type="text/javascript" src="chart_9.js"></script> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col pt-5"> |
||||
<div class="container"> |
||||
<div class="rounded row justify-content-md-center "> |
||||
<div class="p-0 col col-1 text-white bg-dark border border-light text-center"> |
||||
<h6>#</h6> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<h6>Last Submit<br>直近スコア更新</h6> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<h6 style="color:#69a4c9;">Current Estimate<br>現在スコア予想</sub></h6> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<h6 style="color:#e3a03b;">Final Prediction<br>イベント終了スコア予想</h6> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<h6>Rate (EP/hr)<br>毎時獲得ポイント</h6> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-warning bg-dark border border-light text-center"> |
||||
<b>1位</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points1_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points1_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points1rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-primary bg-dark border border-light text-center"> |
||||
<b>2位</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points2_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points2_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points2rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-secondary bg-dark border border-light text-center"> |
||||
<b>3位</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points3_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points3_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points3rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
10位 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points10">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points10_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points10_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points10rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
50位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points50">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points50_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points50_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points50rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
100位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points100">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points100_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points100_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points100rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
500位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points500">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points500_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points500_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points500rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
1000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points1000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points1000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
2000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
~<b class="points2000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points2000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points2000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points2000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
5000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
~<b class="points5000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points5000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points5000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points5000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
10000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
~<b class="points10000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points10000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points10000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points10000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
20000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
~<b class="points20000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points20000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points20000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points20000rate">...</b> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row justify-content-center"> |
||||
<div class="col-12"> |
||||
<img src="t20_9.png" class="pt-5" style="color:#999999;width:812;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,703 @@ |
||||
var ctx = document.getElementById('myChart'); |
||||
var chartData={} |
||||
var predictionChartData={} |
||||
|
||||
const EVENTSTART=moment('2021-02-14 12:00:00+09:00'); |
||||
const EVENTEND=moment('2021-02-22 20:59:59+09:00'); |
||||
|
||||
var diffData=[] |
||||
|
||||
const PREDICTIONS=true |
||||
|
||||
const EVENTID=10 |
||||
|
||||
//var mm = moment()
|
||||
|
||||
//mm.locale('ja');
|
||||
|
||||
//console.log(mm.locale)
|
||||
|
||||
//console.log(moment().locale('ja').format('LLLL'))
|
||||
|
||||
function numberWithCommas(x) { |
||||
if (Number.isInteger(x)) { |
||||
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); |
||||
} else { |
||||
return x |
||||
} |
||||
} |
||||
|
||||
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick; |
||||
var newLegendClickHandler = function (e, legendItem) { |
||||
var index = legendItem.datasetIndex; |
||||
|
||||
|
||||
let ci = this.chart; |
||||
//console.log(Number(ci.data.datasets[index].label))
|
||||
[ |
||||
ci.getDatasetMeta(index), |
||||
ci.getDatasetMeta(index+1) |
||||
].forEach(function(meta) { |
||||
if (ci.data.datasets[index+1].label.includes("Prediction")) { |
||||
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; |
||||
} else { |
||||
if (meta===ci.getDatasetMeta(index)) { |
||||
ci.data.datasets[index].hidden=!ci.data.datasets[index].hidden |
||||
} |
||||
} |
||||
}); |
||||
ci.update(); |
||||
}; |
||||
|
||||
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 "???" |
||||
} |
||||
} |
||||
|
||||
function GetEstimate(rank) { |
||||
if (predictionChartData[rank]) { |
||||
var currentEstimate = chartData[rank][chartData[rank].length-1].y |
||||
if (rank>20 && moment().diff(moment(chartData[rank][chartData[rank].length-1].date),'hours')>0.5) { |
||||
for (var i=predictionChartData[rank].length-1;i>=0;i--) { |
||||
if (moment(predictionChartData[rank][i].x).isAfter(moment())) { |
||||
currentEstimate=predictionChartData[rank][i].y |
||||
} else { |
||||
break; |
||||
} |
||||
} |
||||
return currentEstimate |
||||
} else { |
||||
if (rank>20) { |
||||
return GetRank(rank) |
||||
} else { |
||||
return "---" |
||||
} |
||||
} |
||||
} else { |
||||
return "???" |
||||
} |
||||
} |
||||
function GetRate(rank) { |
||||
if (chartData[rank].length>2) { |
||||
var lastpoint=chartData[rank][chartData[rank].length-2] |
||||
for (var i=chartData[rank].length-1;i>=0;i--) { |
||||
if (moment(chartData[rank][chartData[rank].length-1].date).diff(chartData[rank][i].date,'hours')>=1) { |
||||
lastpoint=chartData[rank][i] |
||||
break; |
||||
} |
||||
} |
||||
return (chartData[rank][chartData[rank].length-1].points-lastpoint.points)/moment(chartData[rank][chartData[rank].length-1].date).diff(lastpoint.date,'hours') |
||||
} else { |
||||
return GetRank(rank)/(moment(startPoint.date).diff(EVENTSTART,'minutes')/60) |
||||
} |
||||
} |
||||
|
||||
function GetTime(rank) { |
||||
if (chartData[rank]) { |
||||
return moment(chartData[rank][chartData[rank].length-1].date).fromNow() |
||||
} else { |
||||
return "" |
||||
} |
||||
} |
||||
function GetUpdateColor(rank) { |
||||
if (chartData[rank]) { |
||||
return "rgba(255,"+Math.max(255-moment().diff(moment(chartData[rank][chartData[rank].length-1].date),'hours')*3,0)+","+Math.max(255-moment().diff(moment(chartData[rank][chartData[rank].length-1].date),'hours')*3,0)+",1)" |
||||
} else { |
||||
return "" |
||||
} |
||||
} |
||||
|
||||
//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]
|
||||
|
||||
const nyoomfactor={//Percentage of original speed to use when nyoom'ing
|
||||
1:1.0, |
||||
2:1.0, |
||||
3:1.0, |
||||
4:1.0, |
||||
5:1.0, |
||||
6:1.0, |
||||
7:1.0, |
||||
8:1.0, |
||||
9:1.0, |
||||
10:1.0, |
||||
11:1.0, |
||||
12:0.9, |
||||
13:0.7, |
||||
14:0.5, |
||||
15:0.3, |
||||
16:0.3, |
||||
17:0.3, |
||||
18:0.3, |
||||
19:0.3, |
||||
20:0.3, |
||||
50:0.79, |
||||
100:0.72, |
||||
500:0.25, |
||||
1000:0.2, |
||||
2000:0.06, |
||||
5000:0.055, |
||||
10000:0.015, |
||||
20000:0.01 |
||||
} |
||||
|
||||
const slowdownFactor={//Percentage of slowdown per hour.
|
||||
1:0.00001, |
||||
2:0.00003, |
||||
3:0.00003, |
||||
4:0.00005, |
||||
5:0.00005, |
||||
6:0.00005, |
||||
7:0.00005, |
||||
8:0.00005, |
||||
9:0.00005, |
||||
10:0.00005, |
||||
11:0.00005, |
||||
12:0.00006, |
||||
13:0.00007, |
||||
14:0.00008, |
||||
15:0.00009, |
||||
16:0.0001, |
||||
17:0.0001, |
||||
18:0.0001, |
||||
19:0.0001, |
||||
20:0.0001, |
||||
50:0.0002, |
||||
100:0.0003, |
||||
500:0.0004, |
||||
1000:0.0005, |
||||
2000:0.0007, |
||||
5000:0.001, |
||||
10000:0.002, |
||||
20000:0.003 |
||||
} |
||||
|
||||
var MAXSPEED=0 |
||||
|
||||
function SetupPredictionModel() { |
||||
if (chartData['1']&&chartData['1'].length>100) { |
||||
MAXSPEED=Math.floor(chartData['1'][100].points/(moment(chartData['1'][100].date).diff(EVENTSTART,'minutes')/60)) |
||||
} else
|
||||
if (chartData['1']){ |
||||
MAXSPEED=Math.floor(chartData['1'][chartData['1'].length-1].points/(moment(chartData['1'][chartData['1'].length-1].date).diff(EVENTSTART,'minutes')/60)) |
||||
} else { |
||||
MAXSPEED=0 |
||||
} |
||||
} |
||||
|
||||
function CreatePrediction(precision,rank) { |
||||
if (!chartData[rank]) { |
||||
return [] |
||||
} |
||||
var startPoint=chartData[rank][chartData[rank].length-1] |
||||
if (rank<=20) { |
||||
startPoint={points:startPoint.points,date:moment()} |
||||
} |
||||
var startTime=moment(startPoint.date) |
||||
if (PREDICTIONS&&startTime.diff(EVENTSTART,'hours')>24&&moment(startPoint.date).diff(EVENTSTART,'hours')>=24) { |
||||
//console.log(MAXSPEED)
|
||||
//Precision is in hours. 1 is default
|
||||
var finalChart=[{y:chartData[rank][chartData[rank].length-1].points,x:chartData[rank][chartData[rank].length-1].date}] |
||||
//Start from the time of the last reported rank.
|
||||
var myPoints = startPoint.points |
||||
var pointSpeed = GetRate(rank) |
||||
var speedGoal = MAXSPEED*nyoomfactor[rank] |
||||
while (startTime<EVENTEND) { |
||||
startTime.add(precision,'hours') |
||||
myPoints+=Math.floor(pointSpeed) |
||||
if (EVENTEND.diff(startTime,'hours')>11) { |
||||
pointSpeed-=pointSpeed*(slowdownFactor[rank]*10/*CONSTANT for adjustment*/) |
||||
} else { |
||||
pointSpeed=Math.max( |
||||
GetRank(rank)/(moment(startPoint.date).diff(EVENTSTART,'minutes')/60), |
||||
Math.min((12-EVENTEND.diff(startTime,'hours'))*(speedGoal/5),speedGoal)) |
||||
//pointSpeed+=(speedGoal-pointSpeed) //Increase towards final goal.
|
||||
//console.log(pointSpeed)
|
||||
} |
||||
finalChart=[...finalChart,{y:myPoints,x:moment(startTime)}] |
||||
} |
||||
predictionChartData[rank]=finalChart |
||||
return finalChart |
||||
} 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="+EVENTID) |
||||
.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)=>{ |
||||
SetupPredictionModel() |
||||
//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) { |
||||
CreatePrediction(1,t) |
||||
var fields = document.getElementsByClassName('points'+t) |
||||
var fields2 = document.getElementsByClassName('points'+t+'rate') |
||||
var fields3 = document.getElementsByClassName('points'+t+"_2") |
||||
var fields4 = document.getElementsByClassName('points'+t+"_3") |
||||
if (fields.length>0) { |
||||
fields[0].innerHTML=numberWithCommas(GetRank(t))+((t>20)?"<sub style=\"top:15px;float:right;color:"+GetUpdateColor(t)+"\">"+GetTime(t)+"</sub>":"") |
||||
/*if (predictionChartData[t]) { |
||||
fields[0].innerHTML=GetRank(t)+"<sub> / "+predictionChartData[t][predictionChartData[t].length-1].y+"</sub>" |
||||
} else { |
||||
fields[0].innerHTML=GetRank(t)+"<sub> / ???</sub>" |
||||
}*/ |
||||
} |
||||
if (fields2.length>0) { |
||||
//console.log(EVENTSTART.diff(moment(),'minutes'))
|
||||
if (chartData[t]) { |
||||
fields2[0].innerHTML=numberWithCommas(Math.ceil(GetRank(t)/(moment(chartData[t][chartData[t].length-1].date).diff(EVENTSTART,'minutes')/60))) |
||||
} |
||||
} |
||||
if (fields3.length>0) { |
||||
//console.log(EVENTSTART.diff(moment(),'minutes'))
|
||||
var est = GetEstimate(t) |
||||
fields3[0].innerHTML=Number.isInteger(est)?numberWithCommas(Math.ceil(est)):est |
||||
} |
||||
if (fields4.length>0&&predictionChartData[t]) { |
||||
//console.log(EVENTSTART.diff(moment(),'minutes'))
|
||||
fields4[0].innerHTML=numberWithCommas(predictionChartData[t][predictionChartData[t].length-1].y) |
||||
} |
||||
} |
||||
var myChart = new Chart(ctx, { |
||||
type: 'line', |
||||
data: { |
||||
datasets: [{ |
||||
label: 'T1', |
||||
data: ChartData(1), |
||||
backgroundColor: 'rgba(255, 99, 132, 0.05)', |
||||
borderColor: 'rgba(255, 99, 132, 1)' |
||||
}/*,{ |
||||
label: 'T1 (Prediction)', |
||||
data: predictionChartData[1], |
||||
backgroundColor: 'rgba(255, 99, 132, 0)', |
||||
borderColor: 'rgba(255, 99, 132, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth: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: 'T10 (Prediction)', |
||||
data: predictionChartData[10], |
||||
backgroundColor: 'rgba(75, 192, 192, 0)', |
||||
borderColor: 'rgba(75, 192, 192, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
/*pointBorderColor: 'rgba(60,60,60,0.5)', |
||||
pointStyle:'dash', |
||||
pointRadius: 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: 'T20 (Prediction)', |
||||
data: predictionChartData[20], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(0, 0, 0, 0.4)', |
||||
borderDash:[15,5], |
||||
borderWidth: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 (Prediction)', |
||||
data: predictionChartData[50], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(255, 255, 255, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
} |
||||
/*,{ |
||||
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 (Prediction)', |
||||
data: predictionChartData[100], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(150, 255, 150, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
}/*,{ |
||||
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 (Prediction)', |
||||
data: predictionChartData[500], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(160, 0, 0, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
}/*,{ |
||||
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: 'T1000 (Prediction)', |
||||
data: predictionChartData[1000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(255, 150, 150, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},{ |
||||
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: 'T2000 (Prediction)', |
||||
data: predictionChartData[2000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(220, 220, 0, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},{ |
||||
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: 'T5000 (Prediction)', |
||||
data: predictionChartData[5000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(0, 140, 0, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
}/*,{ |
||||
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: 'T10000 (Prediction)', |
||||
data: predictionChartData[10000], |
||||
backgroundColor: 'rgba(30, 30, 255, 0)', |
||||
borderColor: 'rgba(30, 30, 255, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},{ |
||||
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: 'T20000 (Prediction)', |
||||
data: predictionChartData[20000], |
||||
backgroundColor: 'rgba(30, 30, 255, 0)', |
||||
borderColor:
|
||||
'rgba(0, 0, 60, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},/*{ |
||||
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: { |
||||
legend:{ |
||||
onClick: newLegendClickHandler, |
||||
labels:{ |
||||
boxWidth:20, |
||||
filter:(item,data)=>!item.text.includes("Prediction") |
||||
} |
||||
}, |
||||
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' |
||||
}] |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
@ -0,0 +1,232 @@ |
||||
var ctx = document.getElementById('myChart'); |
||||
var chartData={} |
||||
|
||||
const EVENTSTART=moment('2021-01-12 12:00:00+09:00'); |
||||
const EVENTEND=moment('2021-01-21 20:59:59+09:00'); |
||||
|
||||
function ChartData(rank) { |
||||
if (rank<=20) { |
||||
return [...chartData[rank].map((data)=>{return {x:data.date,y:data.points}}),{x:moment().isBefore(EVENTEND)?moment():chartData[rank][chartData[rank].length-1].date,y:chartData[rank][chartData[rank].length-1].points}] |
||||
} else { |
||||
return chartData[rank].map((data)=>{return {x:data.date,y:data.points}}) |
||||
} |
||||
} |
||||
|
||||
Chart.defaults.global.elements.point.radius=0 |
||||
fetch("http://www.projectdivar.com/eventdata/t20?all=true&event=7") |
||||
.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(()=>{ |
||||
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)' |
||||
] |
||||
},{ |
||||
label: 'T50', |
||||
data: ChartData(50), |
||||
backgroundColor: [ |
||||
'rgba(255, 255, 255, 0.5)' |
||||
], |
||||
borderColor: [ |
||||
'rgba(255, 255, 255, 1)' |
||||
] |
||||
} |
||||
,{ |
||||
label: 'T100', |
||||
data: ChartData(100), |
||||
backgroundColor: [ |
||||
'rgba(150, 255, 150, 0.5)' |
||||
], |
||||
borderColor: [ |
||||
'rgba(150, 255, 150, 1)' |
||||
] |
||||
},{ |
||||
label: 'T500', |
||||
data: ChartData(500), |
||||
backgroundColor: [ |
||||
'rgba(160, 0, 0, 0.5)' |
||||
], |
||||
borderColor: [ |
||||
'rgba(160, 0, 0, 1)' |
||||
] |
||||
},{ |
||||
label: 'T1000', |
||||
data: ChartData(1000), |
||||
backgroundColor: [ |
||||
'rgba(255, 150, 150, 0.5)' |
||||
], |
||||
borderColor: [ |
||||
'rgba(255, 150, 150, 1)' |
||||
] |
||||
},{ |
||||
label: 'T5000', |
||||
data: ChartData(5000), |
||||
backgroundColor: [ |
||||
'rgba(0, 140, 0, 0.5)' |
||||
], |
||||
borderColor: [ |
||||
'rgba(0, 140, 0, 1)' |
||||
] |
||||
},{ |
||||
label: 'T10000', |
||||
data: ChartData(10000), |
||||
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: { |
||||
scales: { |
||||
yAxes: [{ |
||||
ticks: { |
||||
beginAtZero: true, |
||||
} |
||||
}], |
||||
xAxes: [{ |
||||
type: 'time', |
||||
time: { |
||||
unit: 'hours', |
||||
displayFormats: { |
||||
hours: 'MMM D hA' |
||||
} |
||||
}, |
||||
ticks: { |
||||
min:EVENTSTART, |
||||
max:EVENTEND |
||||
}, |
||||
distribution: 'linear' |
||||
}] |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
@ -0,0 +1,389 @@ |
||||
var ctx = document.getElementById('myChart'); |
||||
var chartData={} |
||||
|
||||
const EVENTSTART=moment('2021-01-24 12:00:00+09:00'); |
||||
const EVENTEND=moment('2021-02-02 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=8") |
||||
.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,50000] |
||||
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' |
||||
}] |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
@ -0,0 +1,674 @@ |
||||
var ctx = document.getElementById('myChart'); |
||||
var chartData={} |
||||
var predictionChartData={} |
||||
|
||||
const EVENTSTART=moment('2021-02-05 12:00:00+09:00'); |
||||
const EVENTEND=moment('2021-02-12 20:59:59+09:00'); |
||||
|
||||
var diffData=[] |
||||
|
||||
const PREDICTIONS=true |
||||
|
||||
//var mm = moment()
|
||||
|
||||
//mm.locale('ja');
|
||||
|
||||
//console.log(mm.locale)
|
||||
|
||||
//console.log(moment().locale('ja').format('LLLL'))
|
||||
|
||||
function numberWithCommas(x) { |
||||
if (Number.isInteger(x)) { |
||||
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); |
||||
} else { |
||||
return x |
||||
} |
||||
} |
||||
|
||||
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick; |
||||
var newLegendClickHandler = function (e, legendItem) { |
||||
var index = legendItem.datasetIndex; |
||||
|
||||
|
||||
let ci = this.chart; |
||||
//console.log(Number(ci.data.datasets[index].label))
|
||||
[ |
||||
ci.getDatasetMeta(index), |
||||
ci.getDatasetMeta(index+1) |
||||
].forEach(function(meta) { |
||||
if (ci.data.datasets[index+1].label.includes("Prediction")) { |
||||
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; |
||||
} else { |
||||
if (meta===ci.getDatasetMeta(index)) { |
||||
ci.data.datasets[index].hidden=!ci.data.datasets[index].hidden |
||||
} |
||||
} |
||||
}); |
||||
ci.update(); |
||||
}; |
||||
|
||||
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 "???" |
||||
} |
||||
} |
||||
|
||||
function GetEstimate(rank) { |
||||
if (predictionChartData[rank]) { |
||||
var currentEstimate = chartData[rank][chartData[rank].length-1].y |
||||
if (rank>20 && moment().diff(moment(chartData[rank][chartData[rank].length-1].date),'hours')>0.5) { |
||||
for (var i=predictionChartData[rank].length-1;i>=0;i--) { |
||||
if (moment(predictionChartData[rank][i].x).isAfter(moment())) { |
||||
currentEstimate=predictionChartData[rank][i].y |
||||
} else { |
||||
break; |
||||
} |
||||
} |
||||
return currentEstimate |
||||
} else { |
||||
if (rank>20) { |
||||
return GetRank(rank) |
||||
} else { |
||||
return "---" |
||||
} |
||||
} |
||||
} else { |
||||
return "???" |
||||
} |
||||
} |
||||
|
||||
function GetTime(rank) { |
||||
if (chartData[rank]) { |
||||
return moment(chartData[rank][chartData[rank].length-1].date).fromNow() |
||||
} else { |
||||
return "" |
||||
} |
||||
} |
||||
function GetUpdateColor(rank) { |
||||
if (chartData[rank]) { |
||||
return "rgba(255,"+Math.max(255-moment().diff(moment(chartData[rank][chartData[rank].length-1].date),'hours')*3,0)+","+Math.max(255-moment().diff(moment(chartData[rank][chartData[rank].length-1].date),'hours')*3,0)+",1)" |
||||
} else { |
||||
return "" |
||||
} |
||||
} |
||||
|
||||
//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]
|
||||
|
||||
const nyoomfactor={//Percentage of original speed to use when nyoom'ing
|
||||
1:1.0, |
||||
2:1.0, |
||||
3:1.0, |
||||
4:1.0, |
||||
5:1.0, |
||||
6:1.0, |
||||
7:1.0, |
||||
8:1.0, |
||||
9:1.0, |
||||
10:1.0, |
||||
11:1.0, |
||||
12:0.9, |
||||
13:0.7, |
||||
14:0.5, |
||||
15:0.3, |
||||
16:0.3, |
||||
17:0.3, |
||||
18:0.3, |
||||
19:0.3, |
||||
20:0.3, |
||||
50:0.79, |
||||
100:0.72, |
||||
500:0.28, |
||||
1000:0.13, |
||||
2000:0.07, |
||||
5000:0.05, |
||||
10000:0.009, |
||||
20000:0.007 |
||||
} |
||||
|
||||
const slowdownFactor={//Percentage of slowdown per hour.
|
||||
1:0.00001, |
||||
2:0.00003, |
||||
3:0.00003, |
||||
4:0.00005, |
||||
5:0.00005, |
||||
6:0.00005, |
||||
7:0.00005, |
||||
8:0.00005, |
||||
9:0.00005, |
||||
10:0.00005, |
||||
11:0.00005, |
||||
12:0.00006, |
||||
13:0.00007, |
||||
14:0.00008, |
||||
15:0.00009, |
||||
16:0.0001, |
||||
17:0.0001, |
||||
18:0.0001, |
||||
19:0.0001, |
||||
20:0.0001, |
||||
50:0.0002, |
||||
100:0.0003, |
||||
500:0.0004, |
||||
1000:0.0005, |
||||
2000:0.0007, |
||||
5000:0.001, |
||||
10000:0.002, |
||||
20000:0.003 |
||||
} |
||||
|
||||
var MAXSPEED=0 |
||||
|
||||
function SetupPredictionModel() { |
||||
if (chartData['1'].length>100) { |
||||
MAXSPEED=Math.floor(chartData['1'][100].points/(moment(chartData['1'][100].date).diff(EVENTSTART,'minutes')/60)) |
||||
} |
||||
} |
||||
|
||||
function CreatePrediction(precision,rank) { |
||||
var startPoint=chartData[rank][chartData[rank].length-1] |
||||
if (rank<=20) { |
||||
startPoint={points:startPoint.points,date:moment()} |
||||
} |
||||
var startTime=moment(startPoint.date) |
||||
if (PREDICTIONS&&startTime.diff(EVENTSTART,'hours')>24) { |
||||
//console.log(MAXSPEED)
|
||||
//Precision is in hours. 1 is default
|
||||
var finalChart=[{y:chartData[rank][chartData[rank].length-1].points,x:chartData[rank][chartData[rank].length-1].date}] |
||||
//Start from the time of the last reported rank.
|
||||
var myPoints = startPoint.points |
||||
var pointSpeed = GetRank(rank)/(moment(startPoint.date).diff(EVENTSTART,'minutes')/60) |
||||
var speedGoal = MAXSPEED*nyoomfactor[rank] |
||||
while (startTime<EVENTEND) { |
||||
startTime.add(precision,'hours') |
||||
myPoints+=Math.floor(pointSpeed) |
||||
if (EVENTEND.diff(startTime,'hours')>8) { |
||||
pointSpeed-=pointSpeed*(slowdownFactor[rank]*10/*CONSTANT for adjustment*/) |
||||
} else { |
||||
pointSpeed+=(speedGoal-pointSpeed) //Increase towards final goal.
|
||||
//console.log(pointSpeed)
|
||||
} |
||||
finalChart=[...finalChart,{y:myPoints,x:moment(startTime)}] |
||||
} |
||||
predictionChartData[rank]=finalChart |
||||
return finalChart |
||||
} 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)=>{ |
||||
SetupPredictionModel() |
||||
//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) { |
||||
//CreatePrediction(1,t)
|
||||
var fields = document.getElementsByClassName('points'+t) |
||||
var fields2 = document.getElementsByClassName('points'+t+'rate') |
||||
var fields3 = document.getElementsByClassName('points'+t+"_2") |
||||
var fields4 = document.getElementsByClassName('points'+t+"_3") |
||||
if (fields.length>0) { |
||||
fields[0].innerHTML=numberWithCommas(GetRank(t))+((t>20&&moment().isBefore(EVENTEND))?"<sub style=\"top:15px;float:right;color:"+GetUpdateColor(t)+"\">"+GetTime(t)+"</sub>":"") |
||||
/*if (predictionChartData[t]) { |
||||
fields[0].innerHTML=GetRank(t)+"<sub> / "+predictionChartData[t][predictionChartData[t].length-1].y+"</sub>" |
||||
} else { |
||||
fields[0].innerHTML=GetRank(t)+"<sub> / ???</sub>" |
||||
}*/ |
||||
} |
||||
if (fields2.length>0) { |
||||
//console.log(EVENTSTART.diff(moment(),'minutes'))
|
||||
fields2[0].innerHTML=numberWithCommas(Math.ceil(GetRank(t)/(moment().diff(EVENTSTART,'minutes')/60))) |
||||
}/* |
||||
if (fields3.length>0) { |
||||
//console.log(EVENTSTART.diff(moment(),'minutes'))
|
||||
var est = GetEstimate(t) |
||||
fields3[0].innerHTML=Number.isInteger(est)?numberWithCommas(Math.ceil(est)):est |
||||
} |
||||
if (fields4.length>0) { |
||||
//console.log(EVENTSTART.diff(moment(),'minutes'))
|
||||
fields4[0].innerHTML=numberWithCommas(predictionChartData[t][predictionChartData[t].length-1].y) |
||||
}*/ |
||||
} |
||||
var myChart = new Chart(ctx, { |
||||
type: 'line', |
||||
data: { |
||||
datasets: [{ |
||||
label: 'T1', |
||||
data: ChartData(1), |
||||
backgroundColor: 'rgba(255, 99, 132, 0.05)', |
||||
borderColor: 'rgba(255, 99, 132, 1)' |
||||
}/*,{ |
||||
label: 'T1 (Prediction)', |
||||
data: predictionChartData[1], |
||||
backgroundColor: 'rgba(255, 99, 132, 0)', |
||||
borderColor: 'rgba(255, 99, 132, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth: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: 'T10 (Prediction)', |
||||
data: predictionChartData[10], |
||||
backgroundColor: 'rgba(75, 192, 192, 0)', |
||||
borderColor: 'rgba(75, 192, 192, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
/*pointBorderColor: 'rgba(60,60,60,0.5)', |
||||
pointStyle:'dash', |
||||
pointRadius: 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: 'T20 (Prediction)', |
||||
data: predictionChartData[20], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(0, 0, 0, 0.4)', |
||||
borderDash:[15,5], |
||||
borderWidth: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 (Prediction)', |
||||
data: predictionChartData[50], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(255, 255, 255, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
} |
||||
/*,{ |
||||
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 (Prediction)', |
||||
data: predictionChartData[100], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(150, 255, 150, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
}/*,{ |
||||
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 (Prediction)', |
||||
data: predictionChartData[500], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(160, 0, 0, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
}/*,{ |
||||
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: 'T1000 (Prediction)', |
||||
data: predictionChartData[1000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(255, 150, 150, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},{ |
||||
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: 'T2000 (Prediction)', |
||||
data: predictionChartData[2000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(220, 220, 0, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},{ |
||||
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: 'T5000 (Prediction)', |
||||
data: predictionChartData[5000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(0, 140, 0, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
}/*,{ |
||||
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: 'T10000 (Prediction)', |
||||
data: predictionChartData[10000], |
||||
backgroundColor: 'rgba(30, 30, 255, 0)', |
||||
borderColor: 'rgba(30, 30, 255, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},{ |
||||
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: 'T20000 (Prediction)', |
||||
data: predictionChartData[20000], |
||||
backgroundColor: 'rgba(30, 30, 255, 0)', |
||||
borderColor:
|
||||
'rgba(0, 0, 60, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},/*{ |
||||
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: { |
||||
legend:{ |
||||
onClick: newLegendClickHandler, |
||||
labels:{ |
||||
boxWidth:20, |
||||
filter:(item,data)=>!item.text.includes("Prediction") |
||||
} |
||||
}, |
||||
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' |
||||
}] |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
@ -0,0 +1,599 @@ |
||||
var ctx = document.getElementById('myChart'); |
||||
var chartData={} |
||||
var predictionChartData={} |
||||
|
||||
const EVENTSTART=moment('2021-02-05 12:00:00+09:00'); |
||||
const EVENTEND=moment('2021-02-12 20:59:59+09:00'); |
||||
|
||||
var diffData=[] |
||||
|
||||
const PREDICTIONS=true |
||||
|
||||
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick; |
||||
var newLegendClickHandler = function (e, legendItem) { |
||||
var index = legendItem.datasetIndex; |
||||
|
||||
|
||||
let ci = this.chart; |
||||
//console.log(Number(ci.data.datasets[index].label))
|
||||
[ |
||||
ci.getDatasetMeta(index), |
||||
ci.getDatasetMeta(index+1) |
||||
].forEach(function(meta) { |
||||
if (ci.data.datasets[index+1].label.includes("Prediction")) { |
||||
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; |
||||
} else { |
||||
if (meta===ci.getDatasetMeta(index)) { |
||||
ci.data.datasets[index].hidden=!ci.data.datasets[index].hidden |
||||
} |
||||
} |
||||
}); |
||||
ci.update(); |
||||
}; |
||||
|
||||
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 "???" |
||||
} |
||||
} |
||||
|
||||
//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]
|
||||
|
||||
const nyoomfactor={//Percentage of original speed to use when nyoom'ing
|
||||
1:1.0, |
||||
2:1.0, |
||||
3:1.0, |
||||
4:1.0, |
||||
5:1.0, |
||||
6:1.0, |
||||
7:1.0, |
||||
8:1.0, |
||||
9:1.0, |
||||
10:1.0, |
||||
11:1.0, |
||||
12:0.9, |
||||
13:0.7, |
||||
14:0.5, |
||||
15:0.3, |
||||
16:0.3, |
||||
17:0.3, |
||||
18:0.3, |
||||
19:0.3, |
||||
20:0.3, |
||||
50:1.0, |
||||
100:0.9, |
||||
500:0.3, |
||||
1000:0.2, |
||||
2000:0.14, |
||||
5000:0.1, |
||||
10000:0.06, |
||||
20000:0.04 |
||||
} |
||||
|
||||
const slowdownFactor={//Percentage of slowdown per hour.
|
||||
1:0.00001, |
||||
2:0.00003, |
||||
3:0.00003, |
||||
4:0.00005, |
||||
5:0.00005, |
||||
6:0.00005, |
||||
7:0.00005, |
||||
8:0.00005, |
||||
9:0.00005, |
||||
10:0.00005, |
||||
11:0.00005, |
||||
12:0.00006, |
||||
13:0.00007, |
||||
14:0.00008, |
||||
15:0.00009, |
||||
16:0.0001, |
||||
17:0.0001, |
||||
18:0.0001, |
||||
19:0.0001, |
||||
20:0.0001, |
||||
50:0.0002, |
||||
100:0.0003, |
||||
500:0.0004, |
||||
1000:0.0005, |
||||
2000:0.0007, |
||||
5000:0.001, |
||||
10000:0.002, |
||||
20000:0.003 |
||||
} |
||||
|
||||
var MAXSPEED=0 |
||||
|
||||
function SetupPredictionModel() { |
||||
if (chartData['1'].length>100) { |
||||
MAXSPEED=Math.floor(chartData['1'][100].points/(moment(chartData['1'][100].date).diff(EVENTSTART,'minutes')/60)) |
||||
} |
||||
} |
||||
|
||||
function CreatePrediction(precision,rank) { |
||||
var startPoint=chartData[rank][chartData[rank].length-1] |
||||
if (rank<=20) { |
||||
startPoint={points:startPoint.points,date:moment()} |
||||
} |
||||
var startTime=moment(startPoint.date) |
||||
if (PREDICTIONS&&startTime.diff(EVENTSTART,'hours')>24) { |
||||
//console.log(MAXSPEED)
|
||||
//Precision is in hours. 1 is default
|
||||
var finalChart=[{y:chartData[rank][chartData[rank].length-1].points,x:chartData[rank][chartData[rank].length-1].date}] |
||||
//Start from the time of the last reported rank.
|
||||
var myPoints = startPoint.points |
||||
var pointSpeed = GetRank(rank)/(moment(startPoint.date).diff(EVENTSTART,'minutes')/60) |
||||
var speedGoal = MAXSPEED*nyoomfactor[rank] |
||||
while (startTime<EVENTEND) { |
||||
startTime.add(precision,'hours') |
||||
myPoints+=Math.floor(pointSpeed) |
||||
if (EVENTEND.diff(startTime,'hours')>8) { |
||||
pointSpeed-=pointSpeed*(slowdownFactor[rank]*5/*CONSTANT for adjustment*/) |
||||
} else { |
||||
pointSpeed+=(speedGoal-pointSpeed)/5 //Increase towards final goal.
|
||||
console.log(pointSpeed) |
||||
} |
||||
finalChart=[...finalChart,{y:myPoints,x:moment(startTime)}] |
||||
} |
||||
predictionChartData[rank]=finalChart |
||||
return finalChart |
||||
} 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)=>{ |
||||
SetupPredictionModel() |
||||
//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) { |
||||
CreatePrediction(1,t) |
||||
var fields = document.getElementsByClassName('points'+t) |
||||
var fields2 = document.getElementsByClassName('points'+t+'rate') |
||||
if (fields.length>0) { |
||||
if (predictionChartData[t]) { |
||||
fields[0].innerHTML=GetRank(t)+"<sub> / "+predictionChartData[t][predictionChartData[t].length-1].y+"</sub>" |
||||
} else { |
||||
fields[0].innerHTML=GetRank(t)+"<sub> / ???</sub>" |
||||
} |
||||
} |
||||
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)', |
||||
borderColor: 'rgba(255, 99, 132, 1)' |
||||
},{ |
||||
label: 'T1 (Prediction)', |
||||
data: predictionChartData[1], |
||||
backgroundColor: 'rgba(255, 99, 132, 0)', |
||||
borderColor: 'rgba(255, 99, 132, 0.5)', |
||||
borderDash:[15,5] |
||||
/*pointBorderColor: 'rgba(60,60,60,0.5)', |
||||
pointStyle:'dash', |
||||
pointRadius: 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: 'T10 (Prediction)', |
||||
data: predictionChartData[10], |
||||
backgroundColor: 'rgba(75, 192, 192, 0)', |
||||
borderColor: 'rgba(75, 192, 192, 0.5)', |
||||
borderDash:[15,5] |
||||
/*pointBorderColor: 'rgba(60,60,60,0.5)', |
||||
pointStyle:'dash', |
||||
pointRadius: 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: 'T20 (Prediction)', |
||||
data: predictionChartData[20], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(0, 0, 0, 0.4)', |
||||
borderDash:[15,5] |
||||
/*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 (Prediction)', |
||||
data: predictionChartData[50], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(255, 255, 255, 0.5)', |
||||
borderDash:[15,5] |
||||
} |
||||
/*,{ |
||||
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 (Prediction)', |
||||
data: predictionChartData[100], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(150, 255, 150, 0.5)', |
||||
borderDash:[15,5] |
||||
}/*,{ |
||||
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 (Prediction)', |
||||
data: predictionChartData[500], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(160, 0, 0, 0.5)', |
||||
borderDash:[15,5] |
||||
}/*,{ |
||||
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: 'T1000 (Prediction)', |
||||
data: predictionChartData[1000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(255, 150, 150, 0.5)', |
||||
borderDash:[15,5] |
||||
},{ |
||||
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: 'T2000 (Prediction)', |
||||
data: predictionChartData[2000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(220, 220, 0, 0.5)', |
||||
borderDash:[15,5] |
||||
},{ |
||||
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: 'T5000 (Prediction)', |
||||
data: predictionChartData[5000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(0, 140, 0, 0.5)', |
||||
borderDash:[15,5] |
||||
}/*,{ |
||||
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: 'T10000 (Prediction)', |
||||
data: predictionChartData[10000], |
||||
backgroundColor: 'rgba(30, 30, 255, 0)', |
||||
borderColor: 'rgba(30, 30, 255, 0.5)', |
||||
borderDash:[15,5] |
||||
},{ |
||||
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: 'T20000 (Prediction)', |
||||
data: predictionChartData[20000], |
||||
backgroundColor: 'rgba(30, 30, 255, 0)', |
||||
borderColor:
|
||||
'rgba(0, 0, 60, 0.5)', |
||||
borderDash:[15,5] |
||||
},/*{ |
||||
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: { |
||||
legend:{ |
||||
onClick: newLegendClickHandler, |
||||
labels:{ |
||||
boxWidth:20, |
||||
filter:(item,data)=>!item.text.includes("Prediction") |
||||
} |
||||
}, |
||||
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' |
||||
}] |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
@ -0,0 +1,704 @@ |
||||
var ctx = document.getElementById('myChart'); |
||||
var chartData={} |
||||
var predictionChartData={} |
||||
|
||||
const EVENTSTART=moment('2021-02-14 12:00:00+09:00'); |
||||
const EVENTEND=moment('2021-02-22 20:59:59+09:00'); |
||||
|
||||
var diffData=[] |
||||
|
||||
const PREDICTIONS=true |
||||
|
||||
const EVENTID=10 |
||||
|
||||
//var mm = moment()
|
||||
|
||||
//mm.locale('ja');
|
||||
|
||||
//console.log(mm.locale)
|
||||
|
||||
//console.log(moment().locale('ja').format('LLLL'))
|
||||
|
||||
function numberWithCommas(x) { |
||||
if (Number.isInteger(x)) { |
||||
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); |
||||
} else { |
||||
return x |
||||
} |
||||
} |
||||
|
||||
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick; |
||||
var newLegendClickHandler = function (e, legendItem) { |
||||
var index = legendItem.datasetIndex; |
||||
|
||||
|
||||
let ci = this.chart; |
||||
//console.log(Number(ci.data.datasets[index].label))
|
||||
[ |
||||
ci.getDatasetMeta(index), |
||||
ci.getDatasetMeta(index+1) |
||||
].forEach(function(meta) { |
||||
if (ci.data.datasets[index+1].label.includes("Prediction")) { |
||||
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; |
||||
} else { |
||||
if (meta===ci.getDatasetMeta(index)) { |
||||
ci.data.datasets[index].hidden=!ci.data.datasets[index].hidden |
||||
} |
||||
} |
||||
}); |
||||
ci.update(); |
||||
}; |
||||
|
||||
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 "???" |
||||
} |
||||
} |
||||
|
||||
function GetEstimate(rank) { |
||||
if (predictionChartData[rank]) { |
||||
var currentEstimate = chartData[rank][chartData[rank].length-1].y |
||||
if (rank>20 && moment().diff(moment(chartData[rank][chartData[rank].length-1].date),'hours')>0.5) { |
||||
for (var i=predictionChartData[rank].length-1;i>=0;i--) { |
||||
if (moment(predictionChartData[rank][i].x).isAfter(moment())) { |
||||
currentEstimate=predictionChartData[rank][i].y |
||||
} else { |
||||
break; |
||||
} |
||||
} |
||||
return currentEstimate |
||||
} else { |
||||
if (rank>20) { |
||||
return GetRank(rank) |
||||
} else { |
||||
return "---" |
||||
} |
||||
} |
||||
} else { |
||||
return "???" |
||||
} |
||||
} |
||||
|
||||
function GetRate(rank) { |
||||
if (chartData[rank].length>2) { |
||||
var lastpoint=chartData[rank][chartData[rank].length-2] |
||||
for (var i=chartData[rank].length-1;i>=0;i--) { |
||||
if (moment(chartData[rank][chartData[rank].length-1].date).diff(chartData[rank][i].date,'hours')>=1) { |
||||
lastpoint=chartData[rank][i] |
||||
break; |
||||
} |
||||
} |
||||
return (chartData[rank][chartData[rank].length-1].points-lastpoint.points)/moment(chartData[rank][chartData[rank].length-1].date).diff(lastpoint.date,'hours') |
||||
} else { |
||||
return GetRank(rank)/(moment(startPoint.date).diff(EVENTSTART,'minutes')/60) |
||||
} |
||||
} |
||||
|
||||
function GetTime(rank) { |
||||
if (chartData[rank]) { |
||||
return moment(chartData[rank][chartData[rank].length-1].date).fromNow() |
||||
} else { |
||||
return "" |
||||
} |
||||
} |
||||
function GetUpdateColor(rank) { |
||||
if (chartData[rank]) { |
||||
return "rgba(255,"+Math.max(255-moment().diff(moment(chartData[rank][chartData[rank].length-1].date),'hours')*3,0)+","+Math.max(255-moment().diff(moment(chartData[rank][chartData[rank].length-1].date),'hours')*3,0)+",1)" |
||||
} else { |
||||
return "" |
||||
} |
||||
} |
||||
|
||||
//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]
|
||||
|
||||
const nyoomfactor={//Percentage of original speed to use when nyoom'ing
|
||||
1:1.0, |
||||
2:1.0, |
||||
3:1.0, |
||||
4:1.0, |
||||
5:1.0, |
||||
6:1.0, |
||||
7:1.0, |
||||
8:1.0, |
||||
9:1.0, |
||||
10:1.0, |
||||
11:1.0, |
||||
12:0.9, |
||||
13:0.7, |
||||
14:0.5, |
||||
15:0.3, |
||||
16:0.3, |
||||
17:0.3, |
||||
18:0.3, |
||||
19:0.3, |
||||
20:0.3, |
||||
50:0.79, |
||||
100:0.72, |
||||
500:0.25, |
||||
1000:0.2, |
||||
2000:0.06, |
||||
5000:0.055, |
||||
10000:0.015, |
||||
20000:0.01 |
||||
} |
||||
|
||||
const slowdownFactor={//Percentage of slowdown per hour.
|
||||
1:0.00001, |
||||
2:0.00003, |
||||
3:0.00003, |
||||
4:0.00005, |
||||
5:0.00005, |
||||
6:0.00005, |
||||
7:0.00005, |
||||
8:0.00005, |
||||
9:0.00005, |
||||
10:0.00005, |
||||
11:0.00005, |
||||
12:0.00006, |
||||
13:0.00007, |
||||
14:0.00008, |
||||
15:0.00009, |
||||
16:0.0001, |
||||
17:0.0001, |
||||
18:0.0001, |
||||
19:0.0001, |
||||
20:0.0001, |
||||
50:0.0002, |
||||
100:0.0003, |
||||
500:0.0004, |
||||
1000:0.0005, |
||||
2000:0.0007, |
||||
5000:0.001, |
||||
10000:0.002, |
||||
20000:0.003 |
||||
} |
||||
|
||||
var MAXSPEED=0 |
||||
|
||||
function SetupPredictionModel() { |
||||
if (chartData['1']&&chartData['1'].length>100) { |
||||
MAXSPEED=Math.floor(chartData['1'][100].points/(moment(chartData['1'][100].date).diff(EVENTSTART,'minutes')/60)) |
||||
} else
|
||||
if (chartData['1']){ |
||||
MAXSPEED=Math.floor(chartData['1'][chartData['1'].length-1].points/(moment(chartData['1'][chartData['1'].length-1].date).diff(EVENTSTART,'minutes')/60)) |
||||
} else { |
||||
MAXSPEED=0 |
||||
} |
||||
} |
||||
|
||||
function CreatePrediction(precision,rank) { |
||||
if (!chartData[rank]) { |
||||
return [] |
||||
} |
||||
var startPoint=chartData[rank][chartData[rank].length-1] |
||||
if (rank<=20) { |
||||
startPoint={points:startPoint.points,date:moment()} |
||||
} |
||||
var startTime=moment(startPoint.date) |
||||
if (PREDICTIONS) { |
||||
//console.log(MAXSPEED)
|
||||
//Precision is in hours. 1 is default
|
||||
var finalChart=[{y:chartData[rank][chartData[rank].length-1].points,x:chartData[rank][chartData[rank].length-1].date}] |
||||
//Start from the time of the last reported rank.
|
||||
var myPoints = startPoint.points |
||||
var pointSpeed = GetRate(rank) |
||||
var speedGoal = MAXSPEED*nyoomfactor[rank] |
||||
while (startTime<EVENTEND) { |
||||
startTime.add(precision,'hours') |
||||
myPoints+=Math.floor(pointSpeed) |
||||
if (EVENTEND.diff(startTime,'hours')>11) { |
||||
pointSpeed-=pointSpeed*(slowdownFactor[rank]*10/*CONSTANT for adjustment*/) |
||||
} else { |
||||
pointSpeed=Math.max( |
||||
GetRank(rank)/(moment(startPoint.date).diff(EVENTSTART,'minutes')/60), |
||||
Math.min((12-EVENTEND.diff(startTime,'hours'))*(speedGoal/5),speedGoal)) |
||||
//pointSpeed+=(speedGoal-pointSpeed) //Increase towards final goal.
|
||||
//console.log(pointSpeed)
|
||||
} |
||||
finalChart=[...finalChart,{y:myPoints,x:moment(startTime)}] |
||||
} |
||||
predictionChartData[rank]=finalChart |
||||
return finalChart |
||||
} 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="+EVENTID) |
||||
.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)=>{ |
||||
SetupPredictionModel() |
||||
//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) { |
||||
CreatePrediction(1,t) |
||||
var fields = document.getElementsByClassName('points'+t) |
||||
var fields2 = document.getElementsByClassName('points'+t+'rate') |
||||
var fields3 = document.getElementsByClassName('points'+t+"_2") |
||||
var fields4 = document.getElementsByClassName('points'+t+"_3") |
||||
if (fields.length>0) { |
||||
fields[0].innerHTML=numberWithCommas(GetRank(t))+((t>20)?"<sub style=\"top:15px;float:right;color:"+GetUpdateColor(t)+"\">"+GetTime(t)+"</sub>":"") |
||||
/*if (predictionChartData[t]) { |
||||
fields[0].innerHTML=GetRank(t)+"<sub> / "+predictionChartData[t][predictionChartData[t].length-1].y+"</sub>" |
||||
} else { |
||||
fields[0].innerHTML=GetRank(t)+"<sub> / ???</sub>" |
||||
}*/ |
||||
} |
||||
if (fields2.length>0) { |
||||
//console.log(EVENTSTART.diff(moment(),'minutes'))
|
||||
if (chartData[t]) { |
||||
fields2[0].innerHTML=numberWithCommas(Math.ceil(GetRank(t)/(moment(chartData[t][chartData[t].length-1].date).diff(EVENTSTART,'minutes')/60))) |
||||
} |
||||
} |
||||
if (fields3.length>0) { |
||||
//console.log(EVENTSTART.diff(moment(),'minutes'))
|
||||
var est = GetEstimate(t) |
||||
fields3[0].innerHTML=Number.isInteger(est)?numberWithCommas(Math.ceil(est)):est |
||||
} |
||||
if (fields4.length>0&&predictionChartData[t]) { |
||||
//console.log(EVENTSTART.diff(moment(),'minutes'))
|
||||
fields4[0].innerHTML=numberWithCommas(predictionChartData[t][predictionChartData[t].length-1].y) |
||||
} |
||||
} |
||||
var myChart = new Chart(ctx, { |
||||
type: 'line', |
||||
data: { |
||||
datasets: [{ |
||||
label: 'T1', |
||||
data: ChartData(1), |
||||
backgroundColor: 'rgba(255, 99, 132, 0.05)', |
||||
borderColor: 'rgba(255, 99, 132, 1)' |
||||
}/*,{ |
||||
label: 'T1 (Prediction)', |
||||
data: predictionChartData[1], |
||||
backgroundColor: 'rgba(255, 99, 132, 0)', |
||||
borderColor: 'rgba(255, 99, 132, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth: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: 'T10 (Prediction)', |
||||
data: predictionChartData[10], |
||||
backgroundColor: 'rgba(75, 192, 192, 0)', |
||||
borderColor: 'rgba(75, 192, 192, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
/*pointBorderColor: 'rgba(60,60,60,0.5)', |
||||
pointStyle:'dash', |
||||
pointRadius: 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: 'T20 (Prediction)', |
||||
data: predictionChartData[20], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(0, 0, 0, 0.4)', |
||||
borderDash:[15,5], |
||||
borderWidth: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 (Prediction)', |
||||
data: predictionChartData[50], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(255, 255, 255, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
} |
||||
/*,{ |
||||
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 (Prediction)', |
||||
data: predictionChartData[100], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor: 'rgba(150, 255, 150, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
}/*,{ |
||||
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 (Prediction)', |
||||
data: predictionChartData[500], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(160, 0, 0, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
}/*,{ |
||||
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: 'T1000 (Prediction)', |
||||
data: predictionChartData[1000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(255, 150, 150, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},{ |
||||
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: 'T2000 (Prediction)', |
||||
data: predictionChartData[2000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(220, 220, 0, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},{ |
||||
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: 'T5000 (Prediction)', |
||||
data: predictionChartData[5000], |
||||
backgroundColor:
|
||||
'rgba(160, 0, 0, 0)', |
||||
borderColor:
|
||||
'rgba(0, 140, 0, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
}/*,{ |
||||
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: 'T10000 (Prediction)', |
||||
data: predictionChartData[10000], |
||||
backgroundColor: 'rgba(30, 30, 255, 0)', |
||||
borderColor: 'rgba(30, 30, 255, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},{ |
||||
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: 'T20000 (Prediction)', |
||||
data: predictionChartData[20000], |
||||
backgroundColor: 'rgba(30, 30, 255, 0)', |
||||
borderColor:
|
||||
'rgba(0, 0, 60, 0.5)', |
||||
borderDash:[15,5], |
||||
borderWidth:1 |
||||
},/*{ |
||||
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: { |
||||
legend:{ |
||||
onClick: newLegendClickHandler, |
||||
labels:{ |
||||
boxWidth:20, |
||||
filter:(item,data)=>!item.text.includes("Prediction") |
||||
} |
||||
}, |
||||
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' |
||||
}] |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
@ -0,0 +1,389 @@ |
||||
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' |
||||
}] |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
@ -0,0 +1,268 @@ |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>Shiny Smily Scratch！ Event Tracker</title> |
||||
</head> |
||||
<link rel="stylesheet" href="bootstrap.min.css"> |
||||
<script type="text/javascript" src="bootstrap.min.js"></script> |
||||
<script type="text/javascript" src="moment.js"></script> |
||||
<script type="text/javascript" src="Chart.js"></script> |
||||
<body style="background-color:#102030"> |
||||
<h1 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<sup><a href="9.html">ᐊ</a></sup> <span style="position:relative0;text-decoration:underline;top:15px;">Shiny Smily Scratch！</span> <sup>ᐅ</sup> |
||||
</h1> |
||||
<h3 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<span class="time"></span>/201 hours |
||||
</h3> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col"> |
||||
<div class="chart-container" style=" position: relative;margin: auto;"> |
||||
<canvas id="myChart" height="150"></canvas> |
||||
</div> |
||||
<script type="text/javascript" src="chart.js"></script> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col pt-5"> |
||||
<div class="container"> |
||||
<div class="rounded row justify-content-md-center "> |
||||
<div class="p-0 col col-1 text-white bg-dark border border-light text-center"> |
||||
<h6>#</h6> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<h6>Last Submit<br>直近スコア更新</h6> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<h6 style="color:#69a4c9;">Current Estimate<br>現在スコア予想</sub></h6> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<h6 style="color:#e3a03b;">Final Prediction<br>イベント終了スコア予想</h6> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<h6>Rate (EP/hr)<br>毎時獲得ポイント</h6> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-warning bg-dark border border-light text-center"> |
||||
<b>1位</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points1_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points1_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points1rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-primary bg-dark border border-light text-center"> |
||||
<b>2位</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points2_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points2_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points2rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-secondary bg-dark border border-light text-center"> |
||||
<b>3位</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points3_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points3_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points3rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
10位 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points10">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points10_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points10_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points10rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
50位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points50">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points50_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points50_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points50rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
100位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points100">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points100_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points100_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points100rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
500位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points500">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points500_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points500_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points500rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
1000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points1000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points1000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
2000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points2000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points2000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points2000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points2000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
5000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points5000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points5000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points5000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points5000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
10000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points10000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points10000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points10000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points10000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
20000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points20000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points20000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points20000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points20000rate">...</b> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row justify-content-center"> |
||||
<div class="col-12"> |
||||
<img src="t20.png" class="pt-5" style="color:#999999;width:812;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
@ -0,0 +1,180 @@ |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>紅き純情、青い月夜に蕩けて Event Tracker</title> |
||||
</head> |
||||
<link rel="stylesheet" href="bootstrap.min.css"> |
||||
<script type="text/javascript" src="bootstrap.min.js"></script> |
||||
<script type="text/javascript" src="moment.js"></script> |
||||
<script type="text/javascript" src="Chart.js"></script> |
||||
<body style="background-color:#102030"> |
||||
<h1 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
紅き純情、青い月夜に蕩けて |
||||
</h1> |
||||
<h3 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<span class="time"></span>/177 hours |
||||
</h3> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col col-8"> |
||||
<div class="chart-container" style=" position: relative;margin: auto;"> |
||||
<canvas id="myChart" height="180"></canvas> |
||||
</div> |
||||
<script type="text/javascript" src="chart.js"></script> |
||||
</div> |
||||
<div class="col col-4 pt-5"> |
||||
<div class="container"> |
||||
<div class="rounded row justify-content-md-center "> |
||||
<div class="p-0 col col-3 text-white bg-dark border border-light text-center"> |
||||
<h4>Position</h4> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<h4>Event Points</h4> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<h4>Rate</h4> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-warning bg-dark border border-light text-center"> |
||||
<b>1位</b> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points1">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-primary bg-dark border border-light text-center"> |
||||
<b>2位</b> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points2">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points2rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-secondary bg-dark border border-light text-center"> |
||||
<b>3位</b> |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points3">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points3rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
10位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points10">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points10rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
50位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points50">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points50rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
100位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points100">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points100rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
500位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points500">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points500rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
1000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
2000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points2000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points2000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
5000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points5000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points5000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
10000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points10000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points10000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
20000位 |
||||
</div> |
||||
<div class="col col-6 text-white bg-dark border border-light text-center"> |
||||
<b class="points20000">...</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points20000rate">...</b> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row justify-content-center"> |
||||
<div class="col-12"> |
||||
<img src="t20.png" class="pt-5" style="color:#999999;width:812;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,343 @@ |
||||
{ |
||||
"requires": true, |
||||
"lockfileVersion": 1, |
||||
"dependencies": { |
||||
"body-parser": { |
||||
"version": "1.19.0", |
||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz", |
||||
"integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==", |
||||
"requires": { |
||||
"bytes": "3.1.0", |
||||
"content-type": "~1.0.4", |
||||
"debug": "2.6.9", |
||||
"depd": "~1.1.2", |
||||
"http-errors": "1.7.2", |
||||
"iconv-lite": "0.4.24", |
||||
"on-finished": "~2.3.0", |
||||
"qs": "6.7.0", |
||||
"raw-body": "2.4.0", |
||||
"type-is": "~1.6.17" |
||||
} |
||||
}, |
||||
"buffer-writer": { |
||||
"version": "2.0.0", |
||||
"resolved": "https://registry.npmjs.org/buffer-writer/-/buffer-writer-2.0.0.tgz", |
||||
"integrity": "sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw==" |
||||
}, |
||||
"bytes": { |
||||
"version": "3.1.0", |
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", |
||||
"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==" |
||||
}, |
||||
"chart.js": { |
||||
"version": "2.9.4", |
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", |
||||
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", |
||||
"requires": { |
||||
"chartjs-color": "^2.1.0", |
||||
"moment": "^2.10.2" |
||||
} |
||||
}, |
||||
"chartjs-color": { |
||||
"version": "2.4.1", |
||||
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", |
||||
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", |
||||
"requires": { |
||||
"chartjs-color-string": "^0.6.0", |
||||
"color-convert": "^1.9.3" |
||||
} |
||||
}, |
||||
"chartjs-color-string": { |
||||
"version": "0.6.0", |
||||
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", |
||||
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", |
||||
"requires": { |
||||
"color-name": "^1.0.0" |
||||
} |
||||
}, |
||||
"color-convert": { |
||||
"version": "1.9.3", |
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", |
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", |
||||
"requires": { |
||||
"color-name": "1.1.3" |
||||
}, |
||||
"dependencies": { |
||||
"color-name": { |
||||
"version": "1.1.3", |
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", |
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" |
||||
} |
||||
} |
||||
}, |
||||
"color-name": { |
||||
"version": "1.1.4", |
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", |
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" |
||||
}, |
||||
"content-type": { |
||||
"version": "1.0.4", |
||||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", |
||||
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" |
||||
}, |
||||
"debug": { |
||||
"version": "2.6.9", |
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", |
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", |
||||
"requires": { |
||||
"ms": "2.0.0" |
||||
} |
||||
}, |
||||
"depd": { |
||||
"version": "1.1.2", |
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", |
||||
"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" |
||||
}, |
||||
"ee-first": { |
||||
"version": "1.1.1", |
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", |
||||
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" |
||||
}, |
||||
"http-errors": { |
||||
"version": "1.7.2", |
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", |
||||
"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==", |
||||
"requires": { |
||||
"depd": "~1.1.2", |
||||
"inherits": "2.0.3", |
||||
"setprototypeof": "1.1.1", |
||||
"statuses": ">= 1.5.0 < 2", |
||||
"toidentifier": "1.0.0" |
||||
}, |
||||
"dependencies": { |
||||
"inherits": { |
||||
"version": "2.0.3", |
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", |
||||
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" |
||||
} |
||||
} |
||||
}, |
||||
"iconv-lite": { |
||||
"version": "0.4.24", |
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", |
||||
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", |
||||
"requires": { |
||||
"safer-buffer": ">= 2.1.2 < 3" |
||||
} |
||||
}, |
||||
"inherits": { |
||||
"version": "2.0.4", |
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", |
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" |
||||
}, |
||||
"media-typer": { |
||||
"version": "0.3.0", |
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", |
||||
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" |
||||
}, |
||||
"mime-db": { |
||||
"version": "1.45.0", |
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz", |
||||
"integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==" |
||||
}, |
||||
"mime-types": { |
||||
"version": "2.1.28", |
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz", |
||||
"integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==", |
||||
"requires": { |
||||
"mime-db": "1.45.0" |
||||
} |
||||
}, |
||||
"moment": { |
||||
"version": "2.29.1", |
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", |
||||
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" |
||||
}, |
||||
"ms": { |
||||
"version": "2.0.0", |
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", |
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" |
||||
}, |
||||
"on-finished": { |
||||
"version": "2.3.0", |
||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", |
||||
"integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", |
||||
"requires": { |
||||
"ee-first": "1.1.1" |
||||
} |
||||
}, |
||||
"packet-reader": { |
||||
"version": "1.0.0", |
||||
"resolved": "https://registry.npmjs.org/packet-reader/-/packet-reader-1.0.0.tgz", |
||||
"integrity": "sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ==" |
||||
}, |
||||
"pg": { |
||||
"version": "8.5.1", |
||||
"resolved": "https://registry.npmjs.org/pg/-/pg-8.5.1.tgz", |
||||
"integrity": "sha512-9wm3yX9lCfjvA98ybCyw2pADUivyNWT/yIP4ZcDVpMN0og70BUWYEGXPCTAQdGTAqnytfRADb7NERrY1qxhIqw==", |
||||
"requires": { |
||||
"buffer-writer": "2.0.0", |
||||
"packet-reader": "1.0.0", |
||||
"pg-connection-string": "^2.4.0", |
||||
"pg-pool": "^3.2.2", |
||||
"pg-protocol": "^1.4.0", |
||||
"pg-types": "^2.1.0", |
||||
"pgpass": "1.x" |
||||
} |
||||
}, |
||||
"pg-connection-string": { |
||||
"version": "2.4.0", |
||||
"resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.4.0.tgz", |
||||
"integrity": "sha512-3iBXuv7XKvxeMrIgym7njT+HlZkwZqqGX4Bu9cci8xHZNT+Um1gWKqCsAzcC0d95rcKMU5WBg6YRUcHyV0HZKQ==" |
||||
}, |
||||
"pg-int8": { |
||||
"version": "1.0.1", |
||||
"resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz", |
||||
"integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==" |
||||
}, |
||||
"pg-pool": { |
||||
"version": "3.2.2", |
||||
"resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.2.2.tgz", |
||||
"integrity": "sha512-ORJoFxAlmmros8igi608iVEbQNNZlp89diFVx6yV5v+ehmpMY9sK6QgpmgoXbmkNaBAx8cOOZh9g80kJv1ooyA==" |
||||
}, |
||||
"pg-protocol": { |
||||
"version": "1.4.0", |
||||
"resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.4.0.tgz", |
||||
"integrity": "sha512-El+aXWcwG/8wuFICMQjM5ZSAm6OWiJicFdNYo+VY3QP+8vI4SvLIWVe51PppTzMhikUJR+PsyIFKqfdXPz/yxA==" |
||||
}, |
||||
"pg-types": { |
||||
"version": "2.2.0", |
||||
"resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz", |
||||
"integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==", |
||||
"requires": { |
||||
"pg-int8": "1.0.1", |
||||
"postgres-array": "~2.0.0", |
||||
"postgres-bytea": "~1.0.0", |
||||
"postgres-date": "~1.0.4", |
||||
"postgres-interval": "^1.1.0" |
||||
} |
||||
}, |
||||
"pgpass": { |
||||
"version": "1.0.4", |
||||
"resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.4.tgz", |
||||
"integrity": "sha512-YmuA56alyBq7M59vxVBfPJrGSozru8QAdoNlWuW3cz8l+UX3cWge0vTvjKhsSHSJpo3Bom8/Mm6hf0TR5GY0+w==", |
||||
"requires": { |
||||
"split2": "^3.1.1" |
||||
} |
||||
}, |
||||
"postgres-array": { |
||||
"version": "2.0.0", |
||||
"resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz", |
||||
"integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==" |
||||
}, |
||||
"postgres-bytea": { |
||||
"version": "1.0.0", |
||||
"resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz", |
||||
"integrity": "sha1-AntTPAqokOJtFy1Hz5zOzFIazTU=" |
||||
}, |
||||
"postgres-date": { |
||||
"version": "1.0.7", |
||||
"resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz", |
||||
"integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==" |
||||
}, |
||||
"postgres-interval": { |
||||
"version": "1.2.0", |
||||
"resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz", |
||||
"integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==", |
||||
"requires": { |
||||
"xtend": "^4.0.0" |
||||
} |
||||
}, |
||||
"qs": { |
||||
"version": "6.7.0", |
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", |
||||
"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==" |
||||
}, |
||||
"raw-body": { |
||||
"version": "2.4.0", |
||||
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", |
||||
"integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==", |
||||
"requires": { |
||||
"bytes": "3.1.0", |
||||
"http-errors": "1.7.2", |
||||
"iconv-lite": "0.4.24", |
||||
"unpipe": "1.0.0" |
||||
} |
||||
}, |
||||
"readable-stream": { |
||||
"version": "3.6.0", |
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", |
||||
"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", |
||||
"requires": { |
||||
"inherits": "^2.0.3", |
||||
"string_decoder": "^1.1.1", |
||||
"util-deprecate": "^1.0.1" |
||||
} |
||||
}, |
||||
"safe-buffer": { |
||||
"version": "5.2.1", |
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", |
||||
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" |
||||
}, |
||||
"safer-buffer": { |
||||
"version": "2.1.2", |
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", |
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" |
||||
}, |
||||
"setprototypeof": { |
||||
"version": "1.1.1", |
||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", |
||||
"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==" |
||||
}, |
||||
"split2": { |
||||
"version": "3.2.2", |
||||
"resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz", |
||||
"integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==", |
||||
"requires": { |
||||
"readable-stream": "^3.0.0" |
||||
} |
||||
}, |
||||
"statuses": { |
||||
"version": "1.5.0", |
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", |
||||
"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" |
||||
}, |
||||
"string_decoder": { |
||||
"version": "1.3.0", |
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", |
||||
"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", |
||||
"requires": { |
||||
"safe-buffer": "~5.2.0" |
||||
} |
||||
}, |
||||
"toidentifier": { |
||||
"version": "1.0.0", |
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", |
||||
"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" |
||||
}, |
||||
"type-is": { |
||||
"version": "1.6.18", |
||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", |
||||
"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", |
||||
"requires": { |
||||
"media-typer": "0.3.0", |
||||
"mime-types": "~2.1.24" |
||||
} |
||||
}, |
||||
"unpipe": { |
||||
"version": "1.0.0", |
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", |
||||
"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" |
||||
}, |
||||
"util-deprecate": { |
||||
"version": "1.0.2", |
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", |
||||
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" |
||||
}, |
||||
"xtend": { |
||||
"version": "4.0.2", |
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", |
||||
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==" |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,268 @@ |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>Shiny Smily Scratch！ Event Tracker</title> |
||||
</head> |
||||
<link rel="stylesheet" href="bootstrap.min.css"> |
||||
<script type="text/javascript" src="bootstrap.min.js"></script> |
||||
<script type="text/javascript" src="moment.js"></script> |
||||
<script type="text/javascript" src="Chart.js"></script> |
||||
<body style="background-color:#102030"> |
||||
<h1 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<sup><a href="9.html">ᐊ</a></sup> <span style="position:relative0;text-decoration:underline;top:15px;">Shiny Smily Scratch！</span> <sup>ᐅ</sup> |
||||
</h1> |
||||
<h3 style="color:#999999;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
<span class="time"></span>/201 hours |
||||
</h3> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col"> |
||||
<div class="chart-container" style=" position: relative;margin: auto;"> |
||||
<canvas id="myChart" height="150"></canvas> |
||||
</div> |
||||
<script type="text/javascript" src="chart_test.js"></script> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col pt-5"> |
||||
<div class="container"> |
||||
<div class="rounded row justify-content-md-center "> |
||||
<div class="p-0 col col-1 text-white bg-dark border border-light text-center"> |
||||
<h6>#</h6> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<h6>Last Submit<br>直近スコア更新</h6> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<h6 style="color:#69a4c9;">Current Estimate<br>現在スコア予想</sub></h6> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<h6 style="color:#e3a03b;">Final Prediction<br>イベント終了スコア予想</h6> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<h6>Rate (EP/hr)<br>毎時獲得ポイント</h6> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-warning bg-dark border border-light text-center"> |
||||
<b>1位</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points1_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points1_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points1rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-primary bg-dark border border-light text-center"> |
||||
<b>2位</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points2_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points2_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points2rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-secondary bg-dark border border-light text-center"> |
||||
<b>3位</b> |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points3_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points3_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points3rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
10位 |
||||
</div> |
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points10">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points10_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points10_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points10rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
50位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points50">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points50_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points50_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points50rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
100位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points100">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points100_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points100_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points100rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
500位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points500">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points500_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points500_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points500rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
1000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points1000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points1000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points1000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
2000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points2000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points2000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points2000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points2000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
5000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points5000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points5000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points5000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points5000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
10000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points10000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points10000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points10000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points10000rate">...</b> |
||||
</div> |
||||
</div> |
||||
<div class="rounded row justify-content-md-center"> |
||||
<div class="col col-1 text-white bg-dark border border-light text-center"> |
||||
20000位 |
||||
</div> |
||||
|
||||
<div class="col col-3 text-white bg-dark border border-light text-center"> |
||||
<b class="points20000">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#95b4c7" class="points20000_2">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b style="color:#e0bb82" class="points20000_3">...</b> |
||||
</div> |
||||
<div class="col col-2 text-white bg-dark border border-light text-center"> |
||||
<b class="points20000rate">...</b> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row justify-content-center"> |
||||
<div class="col-12"> |
||||
<img src="t20.png" class="pt-5" style="color:#999999;width:812;text-align:center;margin-left:auto;margin-right:auto;"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
Loading…
Reference in new issue