@columenlabs/lumen-ui 0.1.0 → 0.1.1

package/dist/lumen-geo-map.js

@@ -15,6 +15,20 @@ const FULL_TURN = 360;
 const HEIGHT = 260;
 /** Country borders, thin enough to read small countries at 110m. */
 const BORDER = 0.5;
+/**
+ * A CSS colour as `rgb(r, g, b)`. ECharts blends a visual map's colours itself and reads only hex
+ * and rgb, so a theme colour in another form (`oklch(…)`, `color-mix(…)`) blends to black. The
+ * browser paints it on one pixel and the pixel is read back.
+ */
+function toRgb(color) {
+    const ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    if (!ctx)
+        return color;
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    return `rgb(${r}, ${g}, ${b})`;
+}
 /** Moves every far-west longitude in nested GeoJSON coordinates one turn east, in place. */
 function unwrap(c) {
     if (!Array.isArray(c))
@@ -94,7 +108,7 @@ export function LumenGeoMap({ values, label, unit, height = HEIGHT, }) {
                 show: false,
                 min: 0,
                 max,
-                inRange: { color: [t.border, t.primary] },
+                inRange: { color: [toRgb(t.border), toRgb(t.primary)] },
             },
             series: [
                 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.0",
+    "@columenlabs/lumen-ui-types": "0.1.1",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",