Finish off initial voronoi diagram implementation & update changelog.

Next up, we need to reconnect the UI
pull/35/head
Starbeamrainbowlabs 4 years ago
parent 4df93a3683
commit 38345222e7
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 3
      Changelog.md
  2. 28
      client_src/js/Overlay/VoronoiManager.mjs
  3. 24
      client_src/js/Overlay/VoronoiOverlay.mjs
  4. 6
      package-lock.json
  5. 1
      package.json

@ -1,5 +1,8 @@
# Changelog
# v0.10
- Change heatmap into a voronoi diagram ([#30](https://github.com/ConnectedHumber/Air-Quality-Web/issues/30))
# v0.9.2 - 3rd June 2019
- [API] Updated the [API documentation](https://aq.connectedhumber.org/__nightdocs/05-API-Docs.html) with a quick reference of the available actions at the top.

@ -14,24 +14,20 @@ import Vector2 from '../Helpers/Vector2.mjs';
import GetFromUrl from '../Helpers/GetFromUrl.mjs';
class VoronoiManager {
get layer() { return this.overlay.layer; }
constructor(in_device_data, map) {
constructor(in_device_data, in_map) {
this.device_data = in_device_data;
this.map = in_map;
this.layer = null;
this.setup_overlay(map);
this.setup_guage();
this.setup_overlay();
}
setup_overlay(map) {
setup_overlay() {
this.overlay = new VoronoiOverlay();
this.overlay.addCells(...this.device_data.devices
.filter((device) => typeof device.latitude == "number" &&
typeof device.longitude == "number")
.map((device) =>
new VoronoiCell(new Vector2(device.longitude, device.latitude))
));
this.overlay.add_to(map);
this.set_data(new Date(), "PM25"); // TODO: Make this customisable
}
setup_guage() {
@ -60,11 +56,19 @@ class VoronoiManager {
device.longitude,
device.latitude
),
// See https://gka.github.io/chroma.js/
this.spec.chroma(row.value).toString()
));
}
this.overlay.set_cells(result);
if(this.layer !== null)
this.layer.remove(); // Remove the old layer if it exists
// Generate & add the new layer
this.layer = this.overlay.generate_layer();
this.layer.addTo(this.map);
console.log(result);
}
}

@ -20,15 +20,15 @@ class VoronoiOverlay {
* Sets the list of cells in the voronoi overlay.
* @param {VoronoiCell[]} cells The cells to add, as an array.
*/
setCells(cells) {
set_cells(cells) {
this.cells.length = 0;
this.addCells(...cells);
this.add_cells(...cells);
}
/**
* Adds a cell to the voronoi overlay.
* @param {VoronoiCell} cells The cell to add. May be specified as many times as requires to add cells in bulk.
*/
addCells(...cells) {
add_cells(...cells) {
this.cells.push(...cells);
}
@ -99,23 +99,21 @@ class VoronoiOverlay {
"coordinates": [cell.polygon.map((point) => [point.x, point.y])],
},
"properties": {
// TODO: Replace this with an actual colour
"colour": `hsl(${(Math.random()*360).toFixed(2)}, 50%, 50%)`
"colour": cell.colour == null ? "hsl(0, 100%, 100%)" : cell.colour
}
});
}
return geojson;
}
add_to(map) {
this.layer = L.geoJSON(this.render(), {
style: (feature) => { return { color: feature.properties.colour } }
generate_layer() {
return L.geoJSON(this.render(), {
// FUTURE: If we want to be even moar fanceh, we can check out https://leafletjs.com/reference-1.5.0.html#path
style: (feature) => { return {
color: feature.properties.colour,
fillOpacity: 0.4
} }
});
this.layer.addTo(map);
}
generate_overlay() {
// TODO: Generate the Leaflet SVGOverlay here
}
}

6
package-lock.json generated

@ -30,6 +30,12 @@
"integrity": "sha512-z4j5PWjQff3qGF+5nJIegI5b7drtGA6+XAxoAOINZYkkUuwlmBvjbGtruUAugbaxQkLcCklKZ88dZaPSnFNggg==",
"dev": true
},
"@types/chroma-js": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-1.4.1.tgz",
"integrity": "sha512-i9hUiO3bwgmzZUDwBuR65WqsBQ/nwN+H2fKX0bykXCdd8cFQEuIj8vI7FXjyb2f5z5h+pv76I/uakikKSgaqTA==",
"dev": true
},
"@types/d3-delaunay": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-4.1.0.tgz",

@ -35,6 +35,7 @@
},
"devDependencies": {
"@types/chart.js": "^2.7.53",
"@types/chroma-js": "^1.4.1",
"@types/d3-delaunay": "^4.1.0",
"@types/leaflet": "^1.4.4",
"@types/leaflet-fullscreen": "^1.0.4",

Loading…
Cancel
Save