panda.js (7280B)
1 let zooToken = ':3jvl7yb5sRr80s6lTdeOyxV9VTQZkCPRp7bKOWKFWxfL2vhsU4Hhpgcmz9qe0zEk'; 2 let facilityToken = ':ae9c50dc5cd58c538a0d6aedb17fffedcaffd568d22381dab3ae72baaeb24684'; 3 let windchills = []; 4 5 fetch(`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 32 function 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 44 var ctx = document.getElementById('myChart').getContext('2d'); 45 46 // Create the chart instance 47 var 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 130 function 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 171 function 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 185 function getHumidity(entries){ 186 let humidity = [] 187 entries.forEach(el => { 188 humidity.push(el['humidity']) 189 }); 190 return humidity; 191 } 192 193 function 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 204 function 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 215 fetchDataAndUpdateChart(); 216 setInterval(fetchDataAndUpdateChart, 3000);