@yuneta/gobj-ui 7.23.96 → 7.23.98

package/dist/gobj-ui.cjs.js

@@ -9683,9 +9683,27 @@ function load_devices(gobj) {
 		source: "devices",
 		filter: ["has", "point_count"],
 		layout: {
-			"text-field": "{point_count_abbreviated}",
+			"text-field": [
+				"case",
+				[
+					"<",
+					["get", "connected"],
+					["get", "point_count"]
+				],
+				[
+					"concat",
+					["get", "point_count_abbreviated"],
+					" !"
+				],
+				["get", "point_count_abbreviated"]
+			],
 			"text-font": ["Noto Sans Regular"],
 			"text-size": 14
+		},
+		paint: {
+			"text-color": "#ffffff",
+			"text-halo-color": "rgba(0,0,0,0.35)",
+			"text-halo-width": 1
 		}
 	});
 	map.addLayer({
@@ -9700,12 +9718,16 @@ function load_devices(gobj) {
 			"text-offset": [0, -2.5],
 			"text-anchor": "top"
 		},
-		paint: { "text-color": [
-			"case",
-			["get", "connected"],
-			"green",
-			"red"
-		] }
+		paint: {
+			"text-color": [
+				"case",
+				["get", "connected"],
+				"#1e7a3c",
+				"#b3243a"
+			],
+			"text-halo-color": "#ffffff",
+			"text-halo-width": 1.4
+		}
 	});
 	map.addLayer({
 		id: "unclustered-point",
@@ -9724,6 +9746,28 @@ function load_devices(gobj) {
 			"circle-stroke-color": "#fff"
 		}
 	});
+	map.addLayer({
+		id: "unclustered-alert",
+		type: "symbol",
+		source: "devices",
+		filter: [
+			"all",
+			["!", ["has", "point_count"]],
+			["!", ["get", "connected"]]
+		],
+		layout: {
+			"text-field": "!",
+			"text-font": ["Noto Sans Regular"],
+			"text-size": 18,
+			"text-allow-overlap": true,
+			"text-ignore-placement": true
+		},
+		paint: {
+			"text-color": "#ffffff",
+			"text-halo-color": "rgba(0,0,0,0.45)",
+			"text-halo-width": 1
+		}
+	});
 	center_map(gobj);
 	map.on("click", "clusters", async (e) => {
 		const features = map.queryRenderedFeatures(e.point, { layers: ["clusters"] });
@@ -10019,6 +10063,66 @@ function register_c_yui_map() {
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
+*  The ink of a chart, and its palette.
+*
+*  uPlot is built for a white page: its axis labels are `#000`
+*  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+*  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+*  not there. And the series were CSS colour names: `blue` is
+*  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
+*  whichever scheme you were in, one of the lines was a rumour.
+*
+*  These are given to uPlot as FUNCTIONS: it calls them when it
+*  draws, so the value can never be stale -- what goes stale is
+*  the canvas, and that is what EV_THEME redraws.
+*
+*  The palette is six colours that clear 3:1 on BOTH grounds
+*  (worst 3.39 on white, 3.71 on near-black), ordered so the
+*  first two are the pair that survives colour blindness -- blue
+*  and orange, never red and green as the opening pair.
+***************************************************************/
+function axis_ink() {
+	return yui_is_dark() ? "#c7cdd8" : "#2e333d";
+}
+function grid_ink() {
+	return yui_is_dark() ? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
+}
+var CHART_PALETTE = [
+	{
+		stroke: "#2f6fd0",
+		fill: "rgba(47,111,208,0.10)"
+	},
+	{
+		stroke: "#b8620a",
+		fill: "rgba(184,98,10,0.10)"
+	},
+	{
+		stroke: "#2f8f4e",
+		fill: "rgba(47,143,78,0.10)"
+	},
+	{
+		stroke: "#8b5cf6",
+		fill: "rgba(139,92,246,0.10)"
+	},
+	{
+		stroke: "#0e9aa7",
+		fill: "rgba(14,154,167,0.10)"
+	},
+	{
+		stroke: "#d1344b",
+		fill: "rgba(209,52,75,0.10)"
+	}
+];
+function themed_axes(axes) {
+	return (Array.isArray(axes) ? axes : [axes || {}]).map((ax) => {
+		let a = Object.assign({}, ax || {});
+		if (a.stroke === void 0) a.stroke = axis_ink;
+		a.grid = Object.assign({ stroke: grid_ink }, a.grid || {});
+		a.ticks = Object.assign({ stroke: grid_ink }, a.ticks || {});
+		return a;
+	});
+}
+/***************************************************************
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$14 = "C_YUI_UPLOT";
@@ -10035,24 +10139,7 @@ var attrs_table$14 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "axes", 0, [{}], "Chart axes"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "scales", 0, {}, "Chart scales"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "data", 0, [[]], "Chart data"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "colors", 0, [
-		{
-			stroke: "red",
-			fill: "rgba(255,0,0,0.05)"
-		},
-		{
-			stroke: "green",
-			fill: "rgba(0,255,0,0.07)"
-		},
-		{
-			stroke: "blue",
-			fill: "rgba(0,0,255,0.05)"
-		},
-		{
-			stroke: "orange",
-			fill: "rgba(255,165,0,0.1)"
-		}
-	], "Color settings"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "colors", 0, CHART_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for the chart"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "own_container", 0, false, "If true, container is gobj-managed"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "uplot", 0, null, "uPlot instance"),
@@ -10060,7 +10147,7 @@ var attrs_table$14 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "timeout_idle", 0, 5, "Idle timeout (seconds)"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
-var PRIVATE_DATA$14 = {};
+var PRIVATE_DATA$14 = { theme_observer: null };
 var __gclass__$14 = null;
 /******************************
 *      Framework Methods
@@ -10070,6 +10157,7 @@ var __gclass__$14 = null;
 ***************************************************************/
 function mt_create$14(gobj) {
 	build_ui$13(gobj);
+	gobj.priv.theme_observer = yui_watch_theme(gobj);
 	let subscriber = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "subscriber");
 	if (!subscriber) subscriber = (0, _yuneta_gobj_js.gobj_parent)(gobj);
 	(0, _yuneta_gobj_js.gobj_subscribe_event)(gobj, null, {}, subscriber);
@@ -10086,6 +10174,10 @@ function mt_stop$14(gobj) {}
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$14(gobj) {
+	if (gobj.priv.theme_observer) {
+		gobj.priv.theme_observer.disconnect();
+		gobj.priv.theme_observer = null;
+	}
 	let uplot$1 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
 	if (uplot$1) {
 		uplot$1.destroy();
@@ -10114,7 +10206,7 @@ function build_ui$13(gobj) {
 		width: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "width"),
 		height: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "height"),
 		series: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "series"),
-		axes: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "axes"),
+		axes: themed_axes((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "axes")),
 		scales: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "scales")
 	};
 	let uplot$2 = new uplot.default(uPlot_options, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "data"), $container);
@@ -10214,29 +10306,40 @@ function ac_add_serie(gobj, event, kw, src) {
 			return -1;
 		}
 	}
-	let color = {
-		stroke: "Orange",
-		fill: "rgb(255, 165, 0, 0.05)"
-	};
 	let colors = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "colors");
-	if (idx < colors.length) color = colors[idx];
+	if (!Array.isArray(colors) || !colors.length) colors = CHART_PALETTE;
+	let color = colors[Math.max(0, idx - 1) % colors.length];
 	(0, _yuneta_gobj_js.kw_get_str)(gobj, kw, "stroke", color.stroke, _yuneta_gobj_js.kw_flag_t.KW_CREATE);
 	(0, _yuneta_gobj_js.kw_get_str)(gobj, kw, "fill", color.fill, _yuneta_gobj_js.kw_flag_t.KW_CREATE);
 	uplot$4.addSeries(kw);
 	return 0;
 }
 /******************************************************
+*   The scheme changed: the ink functions answer the new
+*   one already, the canvas is what has to be painted again.
+******************************************************/
+function ac_theme$4(gobj, event, kw, src) {
+	let uplot$5 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
+	if (!uplot$5) return 0;
+	try {
+		uplot$5.redraw();
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot redraw the chart: ${e}`);
+	}
+	return 0;
+}
+/******************************************************
 *
 ******************************************************/
 function ac_del_serie(gobj, event, kw, src) {
-	let uplot$5 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
-	for (let idx = 1; idx < uplot$5.series.length; idx++) {
-		let serie = uplot$5.series[idx];
+	let uplot$6 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
+	for (let idx = 1; idx < uplot$6.series.length; idx++) {
+		let serie = uplot$6.series[idx];
 		if (serie.id && serie.id === kw.id) {
-			uplot$5.delSeries(idx);
-			let data = uplot$5.data.splice(idx, 1);
+			uplot$6.delSeries(idx);
+			let data = uplot$6.data.splice(idx, 1);
 			if (data.length === 1) data = [[]];
-			uplot$5.setData(data);
+			uplot$6.setData(data);
 			return 0;
 		}
 	}
@@ -10246,9 +10349,9 @@ function ac_del_serie(gobj, event, kw, src) {
 *
 ******************************************************/
 function ac_clear(gobj, event, kw, src) {
-	let uplot$6 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
-	uplot$6.setData([[]]);
-	for (let idx = uplot$6.series.length - 1; idx > 0; idx--) uplot$6.delSeries(idx);
+	let uplot$7 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
+	uplot$7.setData([[]]);
+	for (let idx = uplot$7.series.length - 1; idx > 0; idx--) uplot$7.delSeries(idx);
 	return 0;
 }
 /***************************
@@ -10272,7 +10375,8 @@ function create_gclass$14(gclass_name) {
 		["EV_LOAD_DATA", 0],
 		["EV_ADD_SERIE", 0],
 		["EV_DEL_SERIE", 0],
-		["EV_CLEAR", 0]
+		["EV_CLEAR", 0],
+		["EV_THEME", 0]
 	], [["ST_IDLE", [
 		[
 			"EV_LOAD_DATA",
@@ -10293,6 +10397,11 @@ function create_gclass$14(gclass_name) {
 			"EV_CLEAR",
 			ac_clear,
 			null
+		],
+		[
+			"EV_THEME",
+			ac_theme$4,
+			null
 		]
 	]]], gmt$14, 0, attrs_table$14, PRIVATE_DATA$14, 0, 0, 0, 0);
 	if (!__gclass__$14) return -1;

package/dist/gobj-ui.es.js

@@ -9678,9 +9678,27 @@ function load_devices(gobj) {
 		source: "devices",
 		filter: ["has", "point_count"],
 		layout: {
-			"text-field": "{point_count_abbreviated}",
+			"text-field": [
+				"case",
+				[
+					"<",
+					["get", "connected"],
+					["get", "point_count"]
+				],
+				[
+					"concat",
+					["get", "point_count_abbreviated"],
+					" !"
+				],
+				["get", "point_count_abbreviated"]
+			],
 			"text-font": ["Noto Sans Regular"],
 			"text-size": 14
+		},
+		paint: {
+			"text-color": "#ffffff",
+			"text-halo-color": "rgba(0,0,0,0.35)",
+			"text-halo-width": 1
 		}
 	});
 	map.addLayer({
@@ -9695,12 +9713,16 @@ function load_devices(gobj) {
 			"text-offset": [0, -2.5],
 			"text-anchor": "top"
 		},
-		paint: { "text-color": [
-			"case",
-			["get", "connected"],
-			"green",
-			"red"
-		] }
+		paint: {
+			"text-color": [
+				"case",
+				["get", "connected"],
+				"#1e7a3c",
+				"#b3243a"
+			],
+			"text-halo-color": "#ffffff",
+			"text-halo-width": 1.4
+		}
 	});
 	map.addLayer({
 		id: "unclustered-point",
@@ -9719,6 +9741,28 @@ function load_devices(gobj) {
 			"circle-stroke-color": "#fff"
 		}
 	});
+	map.addLayer({
+		id: "unclustered-alert",
+		type: "symbol",
+		source: "devices",
+		filter: [
+			"all",
+			["!", ["has", "point_count"]],
+			["!", ["get", "connected"]]
+		],
+		layout: {
+			"text-field": "!",
+			"text-font": ["Noto Sans Regular"],
+			"text-size": 18,
+			"text-allow-overlap": true,
+			"text-ignore-placement": true
+		},
+		paint: {
+			"text-color": "#ffffff",
+			"text-halo-color": "rgba(0,0,0,0.45)",
+			"text-halo-width": 1
+		}
+	});
 	center_map(gobj);
 	map.on("click", "clusters", async (e) => {
 		const features = map.queryRenderedFeatures(e.point, { layers: ["clusters"] });
@@ -10014,6 +10058,66 @@ function register_c_yui_map() {
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
+*  The ink of a chart, and its palette.
+*
+*  uPlot is built for a white page: its axis labels are `#000`
+*  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+*  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+*  not there. And the series were CSS colour names: `blue` is
+*  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
+*  whichever scheme you were in, one of the lines was a rumour.
+*
+*  These are given to uPlot as FUNCTIONS: it calls them when it
+*  draws, so the value can never be stale -- what goes stale is
+*  the canvas, and that is what EV_THEME redraws.
+*
+*  The palette is six colours that clear 3:1 on BOTH grounds
+*  (worst 3.39 on white, 3.71 on near-black), ordered so the
+*  first two are the pair that survives colour blindness -- blue
+*  and orange, never red and green as the opening pair.
+***************************************************************/
+function axis_ink() {
+	return yui_is_dark() ? "#c7cdd8" : "#2e333d";
+}
+function grid_ink() {
+	return yui_is_dark() ? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
+}
+var CHART_PALETTE = [
+	{
+		stroke: "#2f6fd0",
+		fill: "rgba(47,111,208,0.10)"
+	},
+	{
+		stroke: "#b8620a",
+		fill: "rgba(184,98,10,0.10)"
+	},
+	{
+		stroke: "#2f8f4e",
+		fill: "rgba(47,143,78,0.10)"
+	},
+	{
+		stroke: "#8b5cf6",
+		fill: "rgba(139,92,246,0.10)"
+	},
+	{
+		stroke: "#0e9aa7",
+		fill: "rgba(14,154,167,0.10)"
+	},
+	{
+		stroke: "#d1344b",
+		fill: "rgba(209,52,75,0.10)"
+	}
+];
+function themed_axes(axes) {
+	return (Array.isArray(axes) ? axes : [axes || {}]).map((ax) => {
+		let a = Object.assign({}, ax || {});
+		if (a.stroke === void 0) a.stroke = axis_ink;
+		a.grid = Object.assign({ stroke: grid_ink }, a.grid || {});
+		a.ticks = Object.assign({ stroke: grid_ink }, a.ticks || {});
+		return a;
+	});
+}
+/***************************************************************
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$14 = "C_YUI_UPLOT";
@@ -10030,24 +10134,7 @@ var attrs_table$14 = [
 	SDATA(data_type_t.DTP_JSON, "axes", 0, [{}], "Chart axes"),
 	SDATA(data_type_t.DTP_JSON, "scales", 0, {}, "Chart scales"),
 	SDATA(data_type_t.DTP_JSON, "data", 0, [[]], "Chart data"),
-	SDATA(data_type_t.DTP_JSON, "colors", 0, [
-		{
-			stroke: "red",
-			fill: "rgba(255,0,0,0.05)"
-		},
-		{
-			stroke: "green",
-			fill: "rgba(0,255,0,0.07)"
-		},
-		{
-			stroke: "blue",
-			fill: "rgba(0,0,255,0.05)"
-		},
-		{
-			stroke: "orange",
-			fill: "rgba(255,165,0,0.1)"
-		}
-	], "Color settings"),
+	SDATA(data_type_t.DTP_JSON, "colors", 0, CHART_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for the chart"),
 	SDATA(data_type_t.DTP_BOOLEAN, "own_container", 0, false, "If true, container is gobj-managed"),
 	SDATA(data_type_t.DTP_POINTER, "uplot", 0, null, "uPlot instance"),
@@ -10055,7 +10142,7 @@ var attrs_table$14 = [
 	SDATA(data_type_t.DTP_INTEGER, "timeout_idle", 0, 5, "Idle timeout (seconds)"),
 	SDATA_END()
 ];
-var PRIVATE_DATA$14 = {};
+var PRIVATE_DATA$14 = { theme_observer: null };
 var __gclass__$14 = null;
 /******************************
 *      Framework Methods
@@ -10065,6 +10152,7 @@ var __gclass__$14 = null;
 ***************************************************************/
 function mt_create$14(gobj) {
 	build_ui$13(gobj);
+	gobj.priv.theme_observer = yui_watch_theme(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -10081,6 +10169,10 @@ function mt_stop$14(gobj) {}
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$14(gobj) {
+	if (gobj.priv.theme_observer) {
+		gobj.priv.theme_observer.disconnect();
+		gobj.priv.theme_observer = null;
+	}
 	let uplot = gobj_read_attr(gobj, "uplot");
 	if (uplot) {
 		uplot.destroy();
@@ -10109,7 +10201,7 @@ function build_ui$13(gobj) {
 		width: gobj_read_attr(gobj, "width"),
 		height: gobj_read_attr(gobj, "height"),
 		series: gobj_read_attr(gobj, "series"),
-		axes: gobj_read_attr(gobj, "axes"),
+		axes: themed_axes(gobj_read_attr(gobj, "axes")),
 		scales: gobj_read_attr(gobj, "scales")
 	};
 	let uplot = new uPlot(uPlot_options, gobj_read_attr(gobj, "data"), $container);
@@ -10209,18 +10301,29 @@ function ac_add_serie(gobj, event, kw, src) {
 			return -1;
 		}
 	}
-	let color = {
-		stroke: "Orange",
-		fill: "rgb(255, 165, 0, 0.05)"
-	};
 	let colors = gobj_read_attr(gobj, "colors");
-	if (idx < colors.length) color = colors[idx];
+	if (!Array.isArray(colors) || !colors.length) colors = CHART_PALETTE;
+	let color = colors[Math.max(0, idx - 1) % colors.length];
 	kw_get_str(gobj, kw, "stroke", color.stroke, kw_flag_t.KW_CREATE);
 	kw_get_str(gobj, kw, "fill", color.fill, kw_flag_t.KW_CREATE);
 	uplot.addSeries(kw);
 	return 0;
 }
 /******************************************************
+*   The scheme changed: the ink functions answer the new
+*   one already, the canvas is what has to be painted again.
+******************************************************/
+function ac_theme$4(gobj, event, kw, src) {
+	let uplot = gobj_read_attr(gobj, "uplot");
+	if (!uplot) return 0;
+	try {
+		uplot.redraw();
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot redraw the chart: ${e}`);
+	}
+	return 0;
+}
+/******************************************************
 *
 ******************************************************/
 function ac_del_serie(gobj, event, kw, src) {
@@ -10267,7 +10370,8 @@ function create_gclass$14(gclass_name) {
 		["EV_LOAD_DATA", 0],
 		["EV_ADD_SERIE", 0],
 		["EV_DEL_SERIE", 0],
-		["EV_CLEAR", 0]
+		["EV_CLEAR", 0],
+		["EV_THEME", 0]
 	], [["ST_IDLE", [
 		[
 			"EV_LOAD_DATA",
@@ -10288,6 +10392,11 @@ function create_gclass$14(gclass_name) {
 			"EV_CLEAR",
 			ac_clear,
 			null
+		],
+		[
+			"EV_THEME",
+			ac_theme$4,
+			null
 		]
 	]]], gmt$14, 0, attrs_table$14, PRIVATE_DATA$14, 0, 0, 0, 0);
 	if (!__gclass__$14) return -1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.96",
+  "version": "7.23.98",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_map.js

@@ -439,9 +439,27 @@ function load_devices(gobj)
         source: 'devices',
         filter: ['has', 'point_count'],
         layout: {
-            'text-field': '{point_count_abbreviated}',
+            /*  The mark travels INSIDE the count, not as a second symbol
+             *  layer on the same point: two symbols on one feature is a
+             *  placement question (and the badge lost it), while a
+             *  `concat` is just the label this cluster has.  */
+            'text-field': ['case',
+                ['<', ['get', 'connected'], ['get', 'point_count']],
+                ['concat', ['get', 'point_count_abbreviated'], ' !'],
+                ['get', 'point_count_abbreviated']
+            ],
             'text-font': ['Noto Sans Regular'],
             'text-size': 14
+        },
+        /*  It had no paint at all, which is maplibre's black -- on the
+         *  red circle of a cluster that is 5.25:1 and on the green one
+         *  4.09, both of them a number read at a glance. White with a
+         *  dark halo is 5.14 and 4.0 with the halo behind it, and it is
+         *  the same ink whatever colour the cluster takes.  */
+        paint: {
+            'text-color': '#ffffff',
+            'text-halo-color': 'rgba(0,0,0,0.35)',
+            'text-halo-width': 1
         }
     });
 
@@ -459,11 +477,21 @@ function load_devices(gobj)
             'text-anchor': 'top'
         },
         paint: {
+            /*  A label on a MAP is not text on a page: what is behind it
+             *  is a tile, and a tile is any colour there is. `green` and
+             *  `red` measured 4.48 and 3.48 on the beige of a typical
+             *  street tile -- and over water, forest or an aerial layer
+             *  the number means nothing at all. The colours are the
+             *  stronger pair (4.69 / 5.66 on that beige), and the HALO
+             *  is what actually carries them: it is drawn around every
+             *  glyph, so the label reads on whatever the tile is.  */
             'text-color': [
                 'case',
-                ['get', 'connected'], 'green',
-                'red'
-            ]
+                ['get', 'connected'], '#1e7a3c',
+                '#b3243a'
+            ],
+            'text-halo-color': '#ffffff',
+            'text-halo-width': 1.4
         }
     });
 
@@ -484,6 +512,38 @@ function load_devices(gobj)
         }
     });
 
+    /*  The state is a SHAPE too, and not only a colour.
+     *
+     *  Connected and disconnected were told apart by green vs red
+     *  alone -- in the circles as in the labels -- and that is the one
+     *  pair colour blindness does not read; in greyscale the two discs
+     *  are the same disc. A device that is DOWN carries an exclamation
+     *  mark on it, and a CLUSTER with something down carries the same
+     *  mark as a badge at its corner (its middle is taken by the
+     *  count). One glyph, legible without colour at any zoom, drawn
+     *  with the font the style already loads -- no image to fetch, so
+     *  it works offline like the rest of the chapter.
+     *
+     *  Added last, so they draw over the circles they mark.  */
+    map.addLayer({
+        id: 'unclustered-alert',
+        type: 'symbol',
+        source: 'devices',
+        filter: ['all', ['!', ['has', 'point_count']], ['!', ['get', 'connected']]],
+        layout: {
+            'text-field': '!',
+            'text-font': ['Noto Sans Regular'],
+            'text-size': 18,
+            'text-allow-overlap': true,
+            'text-ignore-placement': true
+        },
+        paint: {
+            'text-color': '#ffffff',
+            'text-halo-color': 'rgba(0,0,0,0.45)',
+            'text-halo-width': 1
+        }
+    });
+
     center_map(gobj);
 
     // inspect a cluster on click

package/src/c_yui_uplot.js

@@ -32,6 +32,62 @@ import {
 import uPlot from "uplot";
 import "uplot/dist/uPlot.min.css";
 
+import {yui_is_dark, yui_watch_theme} from "./yui_theme.js";
+
+
+/***************************************************************
+ *  The ink of a chart, and its palette.
+ *
+ *  uPlot is built for a white page: its axis labels are `#000`
+ *  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+ *  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+ *  not there. And the series were CSS colour names: `blue` is
+ *  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
+ *  whichever scheme you were in, one of the lines was a rumour.
+ *
+ *  These are given to uPlot as FUNCTIONS: it calls them when it
+ *  draws, so the value can never be stale -- what goes stale is
+ *  the canvas, and that is what EV_THEME redraws.
+ *
+ *  The palette is six colours that clear 3:1 on BOTH grounds
+ *  (worst 3.39 on white, 3.71 on near-black), ordered so the
+ *  first two are the pair that survives colour blindness -- blue
+ *  and orange, never red and green as the opening pair.
+ ***************************************************************/
+function axis_ink()
+{
+    return yui_is_dark()? "#c7cdd8" : "#2e333d";
+}
+
+function grid_ink()
+{
+    return yui_is_dark()? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
+}
+
+const CHART_PALETTE = [
+    {stroke: "#2f6fd0", fill: "rgba(47,111,208,0.10)"},     /*  4.88 / 3.71  */
+    {stroke: "#b8620a", fill: "rgba(184,98,10,0.10)"},      /*  4.38 / 4.13  */
+    {stroke: "#2f8f4e", fill: "rgba(47,143,78,0.10)"},      /*  4.07 / 4.45  */
+    {stroke: "#8b5cf6", fill: "rgba(139,92,246,0.10)"},     /*  4.23 / 4.28  */
+    {stroke: "#0e9aa7", fill: "rgba(14,154,167,0.10)"},     /*  3.39 / 5.35  */
+    {stroke: "#d1344b", fill: "rgba(209,52,75,0.10)"},      /*  4.88 / 3.71  */
+];
+
+/*  The axes the host asked for, with the ink it did not ask about.  */
+function themed_axes(axes)
+{
+    let list = Array.isArray(axes)? axes : [axes || {}];
+    return list.map((ax) => {
+        let a = Object.assign({}, ax || {});
+        if(a.stroke === undefined) {
+            a.stroke = axis_ink;
+        }
+        a.grid = Object.assign({stroke: grid_ink}, a.grid || {});
+        a.ticks = Object.assign({stroke: grid_ink}, a.ticks || {});
+        return a;
+    });
+}
+
 /***************************************************************
  *              Constants
  ***************************************************************/
@@ -50,12 +106,8 @@ SDATA(data_type_t.DTP_JSON,     "series",           0,  [{}],   "Data series"),
 SDATA(data_type_t.DTP_JSON,     "axes",             0,  [{}],   "Chart axes"),
 SDATA(data_type_t.DTP_JSON,     "scales",           0,  {},     "Chart scales"),
 SDATA(data_type_t.DTP_JSON,     "data",             0,  [[]],   "Chart data"),
-SDATA(data_type_t.DTP_JSON,     "colors",           0,  [
-    {stroke:"red", fill: "rgba(255,0,0,0.05)"},
-    {stroke:"green", fill: "rgba(0,255,0,0.07)"},
-    {stroke:"blue", fill: "rgba(0,0,255,0.05)"},
-    {stroke:"orange", fill: "rgba(255,165,0,0.1)"},
-], "Color settings"),
+SDATA(data_type_t.DTP_JSON,     "colors",           0,  CHART_PALETTE,
+    "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 SDATA(data_type_t.DTP_POINTER,  "$container",       0,  null,   "HTML container for the chart"),
 SDATA(data_type_t.DTP_BOOLEAN,  "own_container",    0,  false,  "If true, container is gobj-managed"),
 SDATA(data_type_t.DTP_POINTER,  "uplot",            0,  null,   "uPlot instance"),
@@ -64,7 +116,9 @@ SDATA(data_type_t.DTP_INTEGER,  "timeout_idle",     0,  5,      "Idle timeout (s
 SDATA_END()
 ];
 
-let PRIVATE_DATA = {};
+let PRIVATE_DATA = {
+    theme_observer: null,   /*  the DOM's data-theme, as an EV_THEME  */
+};
 
 let __gclass__ = null;
 
@@ -85,6 +139,11 @@ function mt_create(gobj)
 {
     build_ui(gobj);
 
+    /*  A canvas does not restyle itself: the ink is read when uPlot
+     *  DRAWS (see axis_ink), so a theme change only has to reach the
+     *  machine and ask for a redraw. Same wiring as the graphs.  */
+    gobj.priv.theme_observer = yui_watch_theme(gobj);
+
     /*
      *  CHILD subscription model
      */
@@ -114,6 +173,10 @@ function mt_stop(gobj)
  ***************************************************************/
 function mt_destroy(gobj)
 {
+    if(gobj.priv.theme_observer) {
+        gobj.priv.theme_observer.disconnect();
+        gobj.priv.theme_observer = null;
+    }
     let uplot = gobj_read_attr(gobj, "uplot");
     if(uplot) {
         uplot.destroy();
@@ -159,7 +222,7 @@ function build_ui(gobj)
         width: gobj_read_attr(gobj, "width"),
         height: gobj_read_attr(gobj, "height"),
         series: gobj_read_attr(gobj, "series"),
-        axes: gobj_read_attr(gobj, "axes"),
+        axes: themed_axes(gobj_read_attr(gobj, "axes")),
         scales: gobj_read_attr(gobj, "scales"),
     };
     let uplot = new uPlot(
@@ -381,11 +444,19 @@ function ac_add_serie(gobj, event, kw, src)
             return -1;
         }
     }
-    let color = {stroke: "Orange", fill: "rgb(255, 165, 0, 0.05)"};
     let colors = gobj_read_attr(gobj, "colors");
-    if(idx<colors.length) {
-        color = colors[idx];
+    if(!Array.isArray(colors) || !colors.length) {
+        colors = CHART_PALETTE;
     }
+    /*  `idx` counts uPlot's series, and series[0] is the X AXIS -- so
+     *  the first line drawn was taking colours[1] and the palette's
+     *  opener, the blue of the colour-blind-safe pair, was never used
+     *  by anybody. The data series are counted from zero here.
+     *
+     *  And it wraps around instead of falling back to one fixed
+     *  colour: the old fallback was `Orange`, 1.97:1 on a white page,
+     *  and it was what every series past the fourth got.  */
+    let color = colors[Math.max(0, idx - 1) % colors.length];
     kw_get_str(gobj, kw, "stroke", color.stroke, kw_flag_t.KW_CREATE);
     kw_get_str(gobj, kw, "fill", color.fill, kw_flag_t.KW_CREATE);
     //kw["paths"] = beziercurve_path; //rectangle_path;
@@ -393,6 +464,24 @@ function ac_add_serie(gobj, event, kw, src)
     return 0;
 }
 
+/******************************************************
+ *   The scheme changed: the ink functions answer the new
+ *   one already, the canvas is what has to be painted again.
+ ******************************************************/
+function ac_theme(gobj, event, kw, src)
+{
+    let uplot = gobj_read_attr(gobj, "uplot");
+    if(!uplot) {
+        return 0;
+    }
+    try {
+        uplot.redraw();
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: cannot redraw the chart: ${e}`);
+    }
+    return 0;
+}
+
 /******************************************************
  *
  ******************************************************/
@@ -466,7 +555,8 @@ function create_gclass(gclass_name)
             ["EV_LOAD_DATA",            ac_load_data,           null],
             ["EV_ADD_SERIE",            ac_add_serie,           null],
             ["EV_DEL_SERIE",            ac_del_serie,           null],
-            ["EV_CLEAR",                ac_clear,               null]
+            ["EV_CLEAR",                ac_clear,               null],
+            ["EV_THEME",                ac_theme,               null]
         ]]
     ];
 
@@ -477,7 +567,8 @@ function create_gclass(gclass_name)
         ["EV_LOAD_DATA",            0],
         ["EV_ADD_SERIE",            0],
         ["EV_DEL_SERIE",            0],
-        ["EV_CLEAR",                0]
+        ["EV_CLEAR",                0],
+        ["EV_THEME",                0]
     ];
 
     __gclass__ = gclass_create(