mirror of
https://github.com/ConnectedHumber/Air-Quality-Web
synced 2024-11-24 06:43:01 +00:00
47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
|
"use strict";
|
||
|
|
|
||
|
|
import chroma from 'chroma-js';
|
||
|
|
|
||
|
|
import marker_svg from '../marker-embed.svg';
|
||
|
|
import gradients from './Gradients.mjs';
|
||
|
|
|
||
|
|
class MarkerGenerator {
|
||
|
|
constructor() {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
marker_default() {
|
||
|
|
return marker_svg.replace("{{colour_a}}", "#1975c8")
|
||
|
|
.replace("{{colour_b}}", "#5ea6d5")
|
||
|
|
.replace("{{colour_dark}}", "#2e6d99");
|
||
|
|
}
|
||
|
|
|
||
|
|
marker(value, type) {
|
||
|
|
let col = this.get_colour(value, type);
|
||
|
|
let result = marker_svg.replace(/\{\{colour_a\}\}/g, col.darken(0.25).hex())
|
||
|
|
.replace(/\{\{colour_b\}\}/g, col.brighten(0.25).hex())
|
||
|
|
.replace(/\{\{colour_dark\}\}/g, col.darken(1))
|
||
|
|
.replace(/\{\{id_grad\}\}/g, `marker-grad-${btoa(`${type}-${value}`).replace(/\+/g, "-").replace(/\//g, "_")}`);
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Fetches the colour for a given value of a given type.
|
||
|
|
* Currently a gradient is not used - i.e. a value is coloured according to
|
||
|
|
* the last threshold it crossed in the associated gradient definition.
|
||
|
|
* TODO: Calculate the gradient instead.
|
||
|
|
* @param {number} value The value to calculate the colour for.
|
||
|
|
* @param {string} type The type of measurement value we're working with. Determines the gradient to use.
|
||
|
|
* @return {chroma} The calculated colour.
|
||
|
|
*/
|
||
|
|
get_colour(value, type) {
|
||
|
|
if(typeof gradients[type] == "undefined") {
|
||
|
|
console.warn(`[MarkerGenerator] Warning: Unknown gradient type '${type}', using unknown instead.`);
|
||
|
|
type = "unknown";
|
||
|
|
}
|
||
|
|
return gradients[type].chroma(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MarkerGenerator;
|