Air-Quality-Web/client_src/js/LayerHeatmap.mjs

226 lines
6.3 KiB
JavaScript
Raw Normal View History

"use strict";
import HeatmapOverlay from 'leaflet-heatmap';
import Config from './Config.mjs';
import GetFromUrl from './Helpers/GetFromUrl.mjs';
class LayerHeatmap {
/**
* Creates a new heatmap manager wrapper class fort he given map.
* @param {L.Map} in_map The leaflet map to attach to.
*/
constructor(in_map) {
this.map = in_map;
2019-01-18 21:25:30 +00:00
this.overlay_config = {
radius: Config.heatmap.blob_radius,
minOpacity: 0.5,
maxOpacity: 0.8,
scaleRadius: true,
useLocalExtrema: false,
latField: "latitude",
lngField: "longitude",
valueField: "value",
gradient: {
// 0 to 35 low (green), 36 to 53 moderate (amber) 54 to 70 high (red) and above 71 (purple)
0.233: "green",
0.593: "orange",
0.827: "red",
1: "purple"
}
2019-01-18 21:25:30 +00:00
};
this.layer = new L.LayerGroup();
this.map.addLayer(this.layer);
this.recreate_overlay();
// Custom configuration directives to apply based on the reading type displayed.
this.reading_type_configs = {
"PM25": {
// 0 to 35 low (green), 36 to 53 moderate (amber) 54 to 70 high (red) and above 71 (purple)
max: 75,
gradient: {
"0": "hsla(111, 76%, 42%, 0.00)",
"0.233": "hsl(111, 76%, 42%)", // green
"0.593": "orange",
"0.827": "red",
"1": "purple"
}
},
"PM10": {
// 0 to 50 low (green) 51 to75 moderate (amber) 76 to 100 high (red) and more than 100 very high (purple)
max: 100,
gradient: {
"0": "hsla(111, 76%, 42%, 0)",
"0.45": "hsl(111, 76%, 42%)", // green
"0.573": "orange",
"0.8": "red",
"1": "purple"
}
},
"humidity": {
max: 100,
gradient: {
"0": "hsla(176, 77%, 40%, 0)",
"0.5": "hsl(176, 77%, 40%)",
"1": "blue"
}
2019-01-19 15:14:59 +00:00
},
"temperature": {
max: 40,
gradient: {
"-0.25": "blue",
"0.25": "cyan",
"0.375": "green",
"0.5": "yellow",
"0.75": "orange",
"1": "red"
}
}
};
this.reading_cache = new Map();
}
/**
* Re-creates the heatmap overlay layer.
* Needed sometimes internally to work around an annoying bug.
*/
recreate_overlay() {
if(typeof this.heatmap != "undefined")
this.layer.removeLayer(this.heatmap);
this.heatmap = new HeatmapOverlay(this.overlay_config);
this.layer.addLayer(this.heatmap);
}
/**
* Sets the display data to the given array of data points.
* @param {object[]} readings_list The array of data points to display.
*/
set_data(readings_list) {
let data_object = {
max: 0,
data: readings_list
};
if(typeof this.reading_type_configs[this.reading_type] != "undefined")
data_object.max = this.reading_type_configs[this.reading_type].max;
else
data_object.max = readings_list.reduce((prev, next) => next.value > prev ? next.value : prev, 0);
console.log("[map/heatmap] Displaying", this.reading_type, data_object);
this.heatmap.setData(data_object);
}
/**
* Updates the heatmap with data for the specified datetime & reading type,
* fetching new data if necessary.
* @param {Date} datetime The datetime to display.
* @param {string} reading_type The reading type to display data for.
* @return {Promise} A promise that resolves when the operation is completed.
*/
async update_data(datetime, reading_type) {
if(!(datetime instanceof Date))
throw new Exception("Error: 'datetime' must be an instance of Date.");
if(typeof reading_type != "string")
throw new Exception("Error: 'reading_type' must be a string.");
this.datetime = datetime;
this.reading_type = reading_type;
console.log("[map/heatmap] Updating values to", this.reading_type, "@", this.datetime);
if(typeof this.reading_type_configs[this.reading_type] != "undefined") {
this.overlay_config.gradient = this.reading_type_configs[this.reading_type].gradient;
console.log("[map/heatmap] Gradient is now", this.overlay_config.gradient);
this.recreate_overlay();
}
else {
delete this.overlay_config.gradient;
}
try {
this.set_data(await this.fetch_data(this.datetime, this.reading_type));
} catch(error) {
console.log(error);
alert(error);
}
}
/**
* Fetches & decodes data for the given datetime and the current reading type.
* @param {Date} datetime The Date to fetch data for.
* @param {string} reading_type The reading type code to fetch data for.
* @return {Promise} The requested data array, as the return value of a promise
*/
async fetch_data(datetime, reading_type) {
let cache_key = `${reading_type}|${datetime.toISOString()}`;
let result = this.reading_cache.get(cache_key);
if(typeof result == "undefined") {
result = JSON.parse(await GetFromUrl(
`${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(datetime.toISOString())}&reading_type=${encodeURIComponent(reading_type)}`
));
this.prune_cache(100);
this.reading_cache.set(cache_key, { data: result, inserted: new Date() });
}
else
result = result.data;
return result;
}
/**
* Prunes the reading cache, leaving at most newest_count items behind.
* The items inserted first are deleted first.
* @param {Number} newest_count The numebr of items to leave behind in the cache.
* @returns {Number} The number of items deleted from the cache.
*/
prune_cache(newest_count) {
let items = [];
for(let next_key of this.reading_cache) {
let cache_item = this.reading_cache.get(next_key);
if(typeof cache_item == "undefined") {
this.reading_cache.delete(cache_item);
continue;
}
items.push({
key: next_key,
date: cache_item.inserted
});
}
items.sort((a, b) => a.date - b.date);
let deleted = 0;
for(let i = 0; i < items.length - newest_count; i++) {
this.reading_cache.delete(this.items[i].key);
deleted++;
}
return deleted;
}
/**
* Whether the reading cache contains data for the given datetime & reading type.
* @param {Date} datetime The datetime to check.
* @param {string} reading_type The reading type code to check.
* @return {Boolean} Whether the reading cache contains data for the requested datetime & reading type.
*/
is_data_cached(datetime, reading_type) {
let cache_key = Symbol.for(`${reading_type}|${datetime.toISOString()}`);
return this.reading_cache.has(cache_key);
}
async update_reading_type(reading_type) {
await this.update_data(
this.datetime,
reading_type
);
}
}
export default LayerHeatmap;