Data/index.html at master · andmcadams/Data · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="datavals.js"></script>
  </head>

  <body>
    <div id="general">
      <!-- JS generated list of bosses in order of kills per day -->
      <h4>Most Killed Bosses Yesterday</h4>
    </div>
    <div id="specific">
      <h4>In-depth Look</h4>
      <div class="selectors">
        <select onchange="updateBoss(this)">
    			<option value=11>Abyssal Sire</option>
    			<option value=12>Alchemical Hydra</option>
    			<option value=13>Barrows Chests</option>
    			<option value=14>Bryophyta</option>
    			<option value=15>Callisto</option>
    			<option value=16>Cerberus</option>
    			<option value=17>CoX</option>
    			<option value=18>Cox CM</option>
    			<option value=19>Chaos Elemental</option>
    			<option value=20>Chaos Fanatic</option>
    			<option value=21>Commander Zilyana</option>
    			<option value=22>Corporeal Beast</option>
    			<option value=23>Crazy Archaeologist</option>
    			<option value=24>Dagannoth Prime</option>
    			<option value=25>Dagannoth Rex</option>
    			<option value=26>Dagannoth Supreme</option>
    			<option value=27>Deranged Archaeologist</option>
    			<option value=28>General Graardor</option>
    			<option value=29>Giant Mole</option>
    			<option value=30>Grotesque Guardians</option>
    			<option value=31>Hespori</option>
    			<option value=32>Kalphite Queen</option>
    			<option value=33>King Black Dragon</option>
    			<option value=34>Kraken</option>
    			<option value=35>Kree'Arra</option>
    			<option value=36>K'ril Tsutsaroth</option>
    			<option value=37>Mimic</option>
    			<option value=39>Obor</option>
    			<option value=40>Sarachnis</option>
    			<option value=41>Scorpia</option>
    			<option value=42>Skotizo</option>
    			<option value=43>The Gauntlet</option>
    			<option value=44>The Corrupted Gauntlet</option>
    			<option value=45>Theatre of Blood</option>
    			<option value=46>Thermonuclear Smoke Devil</option>
    			<option value=47>TzKal-Zuk</option>
    			<option value=48>TzTok-Jad</option>
    			<option value=49>Venenatis</option>
    			<option value=50>Vet'ion</option>
    			<option value=51>Vorkath</option>
    			<option value=54>Zulrah</option>
    		</select>
    		<select onchange="updateType(this)">
    			<option value=0>Delta</option>
    			<option value=1>Total KC</option>
    		</select>
      </div>

      <div id="chart_div"></div>
        <div class="info">
            <div class="col">
          <p>Maximum kills/day: <span id="maxKills"></span></p>
          <p>Current players: <span id="currentPlayers"></span></p>
            </div>
            <div class="col">
          <p>Average kills/day: <span id="avgKills"></span></p>
          <p>Minimum kills to be on leaderboards: <span id="minKills"></span></p>
            </div>
        </div>
      </div>

    </div>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      var chart;
      var view;
      var deltaView;
      var options;
      var currentView;

      function generateList() {
        let bossList = [];
        let lastRow = deltaData['rows'].length-1
        for(let i = 1; i < data['cols'].length; i++) {
          bossList.push( [data['cols'][i]['label'], deltaData['rows'][lastRow]["c"][i]["v"]] );
        }
        bossList.sort(function(a, b) {
          return b[1] - a[1];
        });

        let general = document.getElementById("general");
        for(let i = 0; i < bossList.length; i+=10) {
          let listDiv = document.createElement("div");
          listDiv.className = "col2";
          let ol = document.createElement("ol");
          ol.setAttribute("start", i+1);
          for(let j = i; j < Math.min(bossList.length, i+10); j++) {
            let li = document.createElement("li");
            li.textContent = bossList[j][0];
            ol.appendChild(li);
          }
          listDiv.append(ol);
          general.append(listDiv);
        }
      }

      generateList();

      function addInfo(infoIndex) {
        let maxKills = document.getElementById('maxKills');
        let avgKills = document.getElementById('avgKills');
        let currentPlayers = document.getElementById('currentPlayers');
        let minKills = document.getElementById('minKills');

        function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        minKills.textContent = minValues[infoIndex];
        currentPlayers.textContent = numberWithCommas(players[infoIndex]);
        maxKills.textContent = numberWithCommas(max_day[infoIndex]);
        avgKills.textContent = numberWithCommas(avg_day[infoIndex]);
      }

      function resolveBoss(bossNumber) {
        for(let i = 1; i < data['cols'].length; i++) {
          if (data['cols'][i]["id"] === bossNumber) {
            return i;
          }
        }
        return null;
      }

      function drawChart() {

        // Create the data table.

        var dataTab = new google.visualization.DataTable(data);
        var deltaTab = new google.visualization.DataTable(deltaData);

        // Set chart options
        options = {'title':'Kills per day', 'pointSize': 5};

        // Instantiate and draw our chart, passing in some options.
        // Create a view that shows everyone hired since 2007.
        view = new google.visualization.DataView(dataTab);
        deltaView = new google.visualization.DataView(deltaTab);
        currentView = deltaView
        currentView.setColumns([0, 1]);
        chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(currentView, options);
        addInfo(resolveBoss(11));
      }

      function updateBoss(selectObject) {
        let val = parseInt(selectObject.value)
        currentView.setColumns([0, resolveBoss(val)]);

        chart.draw(currentView, options);
        addInfo(resolveBoss(val));
      }

      function updateType(selectObject) {
        let val = parseInt(selectObject.value)
        let cols = currentView.getViewColumns()
        if (val === 0) {
          currentView = deltaView
          options = {'title':'Kills per day', 'pointSize': 5};
        }
        else {
          currentView = view
          options = {'title':'Total kill count', 'pointSize': 5}
        }
        currentView.setColumns(cols)
        chart.draw(currentView, options)
      }
    </script>
  </body>
</html>