World color option for SimpleMap

Author: phpp28

src/main/resources/static/css/shared/controls.css

@@ -347,3 +347,14 @@ output {
     text-align: end;
   }
 }
+
+.dv-color-input {
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--bg-color);
+  cursor: pointer;
+
+  &:focus {
+    outline: 1px solid var(--primary);
+  }
+}

src/main/resources/static/js/shared/modules/inputFactories.js

@@ -147,4 +147,14 @@ export default {
 
     return createElement("div", { className: "dv-switch" }, [input, track]);
   },
+
+  color(key, value, _, onchange) {
+    return createElement("input", {
+      name: key,
+      type: "color",
+      value,
+      className: "dv-color-input",
+      onchange,
+    });
+  },
 };

src/main/resources/static/js/widgets/charts/SimpleMap.js

@@ -6,7 +6,9 @@ export default class SimpleMap extends D3Visualization {
     type: "SimpleMap",
     title: "Simple Map",
     generator: { id: "" },
-    options: {},
+    options: {
+      worldColor: "#b8b8b8",
+    },
     icon: "bi bi-map",
     w: 8,
     h: 6,
@@ -21,6 +23,10 @@ export default class SimpleMap extends D3Visualization {
       label: "Generator",
       options: () => getGeneratorOptions("MapCoordinates"),
     },
+    "options.worldColor": {
+      type: "color",
+      label: "World color",
+    },
   };
   static previewData = [
     {
@@ -41,6 +47,8 @@ export default class SimpleMap extends D3Visualization {
 
   constructor(root, config) {
     super(root, config, { top: 0, right: 0, bottom: 0, left: 0 });
+
+    this.worldColor = config.options.worldColor || "#b8b8b8";
   }
 
   async fetch() {
@@ -71,7 +79,7 @@ export default class SimpleMap extends D3Visualization {
         .join("path")
         .attr("class", "world")
         .attr("d", path)
-        .attr("fill", "#b8b8b8")
+        .attr("fill", this.worldColor)
         .style("stroke", "#fff")
         .style("stroke-width", 0.1);