@communitiesuk/svelte-component-library 0.1.17

package/dist/components/data-vis/map/colors.d.ts

@@ -0,0 +1,13 @@
+export declare function contrastingColor(color: string): {
+    textColor: any;
+    textOutlineColor: string;
+    hoverBgColor: any;
+};
+export declare const colorPalette: {
+    3: string[];
+    4: string[];
+    5: string[];
+    6: string[];
+    7: string[];
+    8: string[];
+};

package/dist/components/data-vis/map/colors.js

@@ -0,0 +1,65 @@
+import { lab } from "d3-color";
+export function contrastingColor(color) {
+    const colorLab = lab(color);
+    const MIN_DIFF = 50;
+    const MAX_DIFF = 90;
+    let l = colorLab.l;
+    let output = 100 - l;
+    let contrast = Math.abs(l - output);
+    let textColor;
+    let hoverBgColor;
+    let textOutlineColor;
+    if (l < output) {
+        if (contrast < MIN_DIFF) {
+            output = l + MIN_DIFF;
+        }
+        else if (contrast > MAX_DIFF) {
+            output = l + MAX_DIFF;
+        }
+        textColor = lab(output, colorLab.a, colorLab.b);
+        textOutlineColor = "rgba(0, 0, 0, 0.5)";
+        hoverBgColor = colorLab.brighter();
+    }
+    else {
+        if (contrast < MIN_DIFF) {
+            output = l - MIN_DIFF;
+        }
+        else if (contrast > MAX_DIFF) {
+            output = l - MAX_DIFF;
+        }
+        textColor = lab(output, colorLab.a, colorLab.b);
+        textOutlineColor = "rgba(255, 255, 255, 0.5)";
+        hoverBgColor = colorLab.darker();
+    }
+    return {
+        textColor: textColor.formatRgb(),
+        textOutlineColor,
+        hoverBgColor: hoverBgColor.formatRgb(),
+    };
+}
+//From https://colorbrewer2.org/#type=sequential&scheme=YlGnBu
+export const colorPalette = {
+    3: ["#edf8b1", "#7fcdbb", "#2c7fb8"],
+    4: ["#ffffcc", "#a1dab4", "#41b6c4", "#225ea8"],
+    5: ["#ffffcc", "#a1dab4", "#41b6c4", "#2c7fb8", "#253494"],
+    6: ["#ffffcc", "#c7e9b4", "#7fcdbb", "#41b6c4", "#2c7fb8", "#253494"],
+    7: [
+        "#ffffcc",
+        "#c7e9b4",
+        "#7fcdbb",
+        "#41b6c4",
+        "#1d91c0",
+        "#225ea8",
+        "#0c2c84",
+    ],
+    8: [
+        "#ffffd9",
+        "#edf8b1",
+        "#c7e9b4",
+        "#7fcdbb",
+        "#41b6c4",
+        "#1d91c0",
+        "#225ea8",
+        "#0c2c84",
+    ],
+};

package/dist/components/data-vis/map/dataJoin.d.ts

@@ -0,0 +1,2 @@
+import type { FeatureCollection } from "geojson";
+export declare function joinData(filteredGeoJsonData: FeatureCollection, dataWithColor: any[]): FeatureCollection;

package/dist/components/data-vis/map/dataJoin.js

@@ -0,0 +1,27 @@
+export function joinData(filteredGeoJsonData, dataWithColor) {
+    const obj2Map = dataWithColor.reduce((map, item) => {
+        map[item.areaCode] = item; // Use 'areaCode' as the key for the second map
+        return map;
+    }, {});
+    return {
+        type: "FeatureCollection",
+        features: filteredGeoJsonData.features.map((item1) => {
+            // Get the matching item from obj2Map based on the areaCode
+            const match = obj2Map[item1.properties.areacd];
+            // If a match exists, merge the 'metric' and 'color' into the 'properties' of item1
+            if (match) {
+                return {
+                    ...item1, // Keep all properties of the feature
+                    properties: {
+                        ...item1.properties, // Keep the existing properties (like areaCode, etc.)
+                        metric: +match?.metric, // Add metric from the match
+                        color: match?.color, // Add color from the match
+                    },
+                };
+            }
+            // If no match, just return the feature as is
+            return item1;
+        }),
+        crs: { properties: { name: "EPSG:4326" }, type: "name" },
+    };
+}