panda.js (7280B) download
1let zooToken = ':3jvl7yb5sRr80s6lTdeOyxV9VTQZkCPRp7bKOWKFWxfL2vhsU4Hhpgcmz9qe0zEk';
2let facilityToken = ':ae9c50dc5cd58c538a0d6aedb17fffedcaffd568d22381dab3ae72baaeb24684';
3let windchills = [];
4
5fetch(`http://localhost:8080/api/${zooToken}`)
6 .then(response => response.json())
7 .then(data => {
8 data.forEach(weatherdata => {
9 windchills.push(weatherdata)
10 })
11 windchills.sort(jsonSorter('windchill'));
12 let slicedArray = windchills.slice(0, 5);
13
14 let weatherlist = document.querySelector('.topFiveTable tbody');
15 for (i=0; i<5; i++) {
16 let newRow = weatherlist.insertRow()
17 let newCellRank = newRow.insertCell();
18 let newTextRank = document.createTextNode(i+1 + '.');
19 newCellRank.appendChild(newTextRank);
20
21 let newCellZoo = newRow.insertCell();
22 let newTextZoo = document.createTextNode(slicedArray[i].location + ' - ' + slicedArray[i].country );
23 newCellZoo.appendChild(newTextZoo);
24
25 let newCellChill = newRow.insertCell();
26 let newTextChill = document.createTextNode(slicedArray[i].windchill);
27 newCellChill.appendChild(newTextChill);
28 }
29 });
30
31
32function jsonSorter(key) {
33 return function(a, b) {
34 if (a[key] > b[key]) {
35 return 1;
36 } else if (a[key] < b[key]) {
37 return -1;
38 }
39 return 0;
40 }
41}
42
43// Get the canvas element
44var ctx = document.getElementById('myChart').getContext('2d');
45
46// Create the chart instance
47var myChart = new Chart(ctx, {
48 type: 'line',
49 data: {
50 labels: ['', '', '', '', ''],
51 datasets: [
52 {
53 label: 'Chengdu Research Facility 1',
54 data: [],
55 backgroundColor: 'rgba(176, 204, 207, 1)',
56 borderColor: 'rgba(176, 204, 207, 1)',
57 borderWidth: 5,
58 pointBackgroundColor: [],
59 pointBorderColor: [],
60 pointBorderWidth: [],
61 pointRadius: 5,
62 lineTension: 0.3
63 },
64 {
65 label: 'Chengdu Research Facility 2',
66 data: [],
67 backgroundColor: 'rgba(176, 145, 207, 1)',
68 borderColor: 'rgba(176, 145, 207, 1)',
69 borderWidth: 5,
70 pointBackgroundColor: [],
71 pointBorderColor: [],
72 pointBorderWidth: [],
73 pointRadius: 5,
74 lineTension: 0.3
75 }
76 ]
77 },
78 options: {
79 responsive: true,
80 scales: {
81 y: {
82 title: {
83 display: true,
84 text: 'Humidity (%)',
85 color: 'white'
86 },
87 grid: {
88 color: 'gray'
89 },
90 ticks: {
91 color: 'white'
92 }
93 },
94 x: {
95 title: {
96 display: true,
97 text: 'Time (H:M:S)',
98 color: 'white'
99 },
100 grid: {
101 color: 'gray'
102 },
103 ticks: {
104 color: 'white'
105 }
106 }
107 },
108 plugins: {
109 title: {
110 display: true,
111 position: 'top',
112 color: 'white',
113 font: {
114 size: 30,
115 weight: 'bold'
116 }
117 },
118 legend: {
119 labels: {
120 color: 'white'
121 }
122 },
123 pointColor: {
124 color: 'green'
125 }
126 }
127 }
128});
129
130function fetchDataAndUpdateChart() {
131 fetch(`http://localhost:8080/api/${facilityToken}`)
132 .then(response => response.json())
133 .then(data => {
134 let splitDataResult = splitData(data);
135 let chengduData = splitDataResult.chengduData.splice(-5);
136 let kangdingData = splitDataResult.kangdingData.splice(-5);
137 let chengduHumidity = getHumidity(chengduData);
138 let kangdingHumidity = getHumidity(kangdingData);
139
140 let firstDateTime = getFirstDate(chengduData.slice(0), kangdingData.slice(0));
141 let secondDateTime = chengduData.slice(-4)
142 let fourthDateTime = chengduData.slice(-2)
143 let thirdDateTime = chengduData.slice(-3)
144 let latestDateTime = getLatestDate(chengduData.slice(-1), kangdingData.slice(-1));
145
146 let parts = latestDateTime[0]['datetime'].split(" ")[0].split('-');
147 let latestDate = parts[2]+'-'+parts[1]+'-'+parts[0];
148
149 myChart.options.plugins.title.text = `Date: ${latestDate}`;
150
151 myChart.data.labels[0] = firstDateTime[0]['datetime'].split(" ")[1];
152 myChart.data.labels[1] = secondDateTime[0]['datetime'].split(" ")[1];
153 myChart.data.labels[2] = thirdDateTime[0]['datetime'].split(" ")[1];
154 myChart.data.labels[3] = fourthDateTime[0]['datetime'].split(" ")[1];
155 myChart.data.labels[4] = latestDateTime[0]['datetime'].split(" ")[1];
156
157 myChart.data.datasets[0].pointBackgroundColor = chengduHumidity.map(value => value > 80 ? 'rgba(207, 72, 72, 1)' : 'rgba(176, 204, 207, 1)');
158 myChart.data.datasets[0].pointBorderColor = chengduHumidity.map(value => value > 80 ? 'rgba(207, 72, 72, 1)' : 'rgba(176, 204, 207, 1)');
159 myChart.data.datasets[0].pointBorderWidth = chengduHumidity.map(value => value > 80 ? 10 : 2);
160 myChart.data.datasets[0].data = chengduHumidity;
161
162 myChart.data.datasets[1].pointBackgroundColor = kangdingHumidity.map(value => value > 80 ? 'rgba(207, 72, 72, 1)' : 'rgba(176, 145, 207, 1)');
163 myChart.data.datasets[1].pointBorderColor = kangdingHumidity.map(value => value > 80 ? 'rgba(207, 72, 72, 1)' : 'rgba(176, 145, 207, 1)');
164 myChart.data.datasets[1].pointBorderWidth = kangdingHumidity.map(value => value > 80 ? 10 : 2);
165 myChart.data.datasets[1].data = kangdingHumidity;
166
167 myChart.update();
168 })
169}
170
171function splitData(data) {
172 let chengduData = [];
173 let kangdingData = [];
174
175 for (let item of data) {
176 if (item.location === 'Chengdu') {
177 chengduData.push(item);
178 } else if (item.location === 'Kangding') {
179 kangdingData.push(item);
180 }
181 }
182 return { chengduData, kangdingData };
183}
184
185function getHumidity(entries){
186 let humidity = []
187 entries.forEach(el => {
188 humidity.push(el['humidity'])
189 });
190 return humidity;
191}
192
193function getFirstDate(entry1, entry2) {
194 let datetime1 = new Date(entry1['datetime']);
195 let datetime2 = new Date(entry2['datetime']);
196
197 if (datetime1 < datetime2) {
198 return entry1;
199 } else {
200 return entry2;
201 }
202}
203
204function getLatestDate(entry1, entry2) {
205 let datetime1 = new Date(entry1['datetime']);
206 let datetime2 = new Date(entry2['datetime']);
207
208 if (datetime1 > datetime2) {
209 return entry1;
210 } else {
211 return entry2;
212 }
213}
214
215fetchDataAndUpdateChart();
216setInterval(fetchDataAndUpdateChart, 3000);