@design-automation/mobius-inline-funcs
Version:
Mobius Spatial Information Model
52 lines • 5.12 kB
JavaScript
import * as chroma from 'chroma-js';
/**
* Returns an html string representing a color legend.
*
* @param size Either height, or [width, height] in pixels.
* @param labels A list of strings, which will be added as labels on the right side.
* @param col_scale (optional) A color scale, e.g. ['blue', 'green']
* @returns An html string.
*/
export function htmlColLeg(size, labels, col_scale = null) {
size = Array.isArray(size) ? size : [size, 20];
// calc heights
const col_row_height = 2; // 2px
const label_row_height = Math.round(size[0] / ((labels.length - 1) * col_row_height)) * col_row_height;
const col_table_height = label_row_height * (labels.length - 1);
const col_num_rows = col_table_height / col_row_height;
const col_width = size[1];
// if no scale is provided, then default to false color scale
col_scale = col_scale === null ? ['blue', 'cyan', 'green', 'yellow', 'red'] : col_scale;
// color
const ch_scale = chroma.scale(col_scale);
const ch_domain = ch_scale.domain([0, col_num_rows]);
// ---------------------------------------------------------------------------------------------
// table with colours
let table_html1 = '<table cellspacing="0">';
const table_row1 = '<tr>' +
'<td style="height:' + col_row_height + 'px; width:' + col_width +
'px;padding:0px;background-color:rgb($col)" />' +
'</tr>';
for (let i = 0; i < col_num_rows; i++) {
const col = ch_domain(i).gl();
const col_str = Math.round(col[0] * 255) + ',' +
Math.round(col[1] * 255) + ',' +
Math.round(col[2] * 255);
table_html1 += table_row1.replace('$col', col_str);
}
table_html1 += '</table>';
// ---------------------------------------------------------------------------------------------
// table with labels
let table_html2 = '<table cellspacing="0">';
const table_row2 = '<tr>' +
'<td style="height:' + label_row_height + 'px;padding:0px;">$text</td>' +
'</tr>';
for (const label of labels) {
table_html2 += table_row2.replace('$text', ' ' + label);
}
table_html2 += '</table>';
// ---------------------------------------------------------------------------------------------
// join and return
return '<table><td>' + table_html1 + '</td><td>' + table_html2 + '</td></table>';
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHRtbENvbExlZy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9pbmxpbmUvaHRtbC9odG1sQ29sTGVnLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE1BQU0sV0FBVyxDQUFDO0FBQ3BDOzs7Ozs7O0dBT0c7QUFDSCxNQUFNLFVBQVUsVUFBVSxDQUNsQixJQUE4QixFQUM5QixNQUFnQixFQUNoQixZQUFzQixJQUFJO0lBRTlCLElBQUksR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBcUIsQ0FBQztJQUNuRSxlQUFlO0lBQ2YsTUFBTSxjQUFjLEdBQUcsQ0FBQyxDQUFDLENBQUMsT0FBTztJQUNqQyxNQUFNLGdCQUFnQixHQUFXLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxHQUFHLGNBQWMsQ0FBQyxDQUFDLEdBQUcsY0FBYyxDQUFDO0lBQy9HLE1BQU0sZ0JBQWdCLEdBQVcsZ0JBQWdCLEdBQUcsQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ3hFLE1BQU0sWUFBWSxHQUFXLGdCQUFnQixHQUFHLGNBQWMsQ0FBQztJQUMvRCxNQUFNLFNBQVMsR0FBVyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDbEMsNkRBQTZEO0lBQzdELFNBQVMsR0FBRyxTQUFTLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO0lBQ3hGLFFBQVE7SUFDUixNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3pDLE1BQU0sU0FBUyxHQUFHLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsWUFBWSxDQUFDLENBQUMsQ0FBQztJQUNyRCxnR0FBZ0c7SUFDaEcscUJBQXFCO0lBQ3JCLElBQUksV0FBVyxHQUFHLHlCQUF5QixDQUFBO0lBQzNDLE1BQU0sVUFBVSxHQUNaLE1BQU07UUFDRixvQkFBb0IsR0FBRyxjQUFjLEdBQUcsWUFBWSxHQUFHLFNBQVM7UUFDNUQsK0NBQStDO1FBQ3ZELE9BQU8sQ0FBQTtJQUNYLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxZQUFZLEVBQUUsQ0FBQyxFQUFFLEVBQUU7UUFDbkMsTUFBTSxHQUFHLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDO1FBQzlCLE1BQU0sT0FBTyxHQUNULElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUc7WUFDOUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRztZQUM5QixJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQztRQUM3QixXQUFXLElBQUksVUFBVSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsT0FBTyxDQUFDLENBQUM7S0FDdEQ7SUFDRCxXQUFXLElBQUksVUFBVSxDQUFDO0lBQzFCLGdHQUFnRztJQUNoRyxvQkFBb0I7SUFDcEIsSUFBSSxXQUFXLEdBQUcseUJBQXlCLENBQUE7SUFDM0MsTUFBTSxVQUFVLEdBQ1osTUFBTTtRQUNGLG9CQUFvQixHQUFHLGdCQUFnQixHQUFHLDZCQUE2QjtRQUMzRSxPQUFPLENBQUE7SUFDWCxLQUFLLE1BQU0sS0FBSyxJQUFJLE1BQU0sRUFBRTtRQUN4QixXQUFXLElBQUksVUFBVSxDQUFDLE9BQU8sQ0FBQyxPQUFPLEVBQUUsSUFBSSxHQUFHLEtBQUssQ0FBQyxDQUFDO0tBQzVEO0lBQ0QsV0FBVyxJQUFJLFVBQVUsQ0FBQztJQUMxQixnR0FBZ0c7SUFDaEcsa0JBQWtCO0lBQ2xCLE9BQU8sYUFBYSxHQUFHLFdBQVcsR0FBRyxXQUFXLEdBQUcsV0FBVyxHQUFHLGVBQWUsQ0FBQztBQUNyRixDQUFDIn0=