datastake-daf 0.6.99 → 0.6.100

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+	"cSpell.words": ["cukura"],
+	"files.autoSave": "afterDelay",
+	"editor.wordWrap": "on",
+	"editor.autoClosingBrackets": "always",
+	"editor.autoClosingComments": "always",
+	"editor.autoClosingQuotes": "always",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnPaste": true,
+	"editor.formatOnSave": true,
+	"notebook.defaultFormatter": "esbenp.prettier-vscode",
+	"javascript.format.semicolons": "insert"
+}

package/dist/components/index.js

@@ -13220,6 +13220,16 @@ const AjaxSelectRenderer = ({
   });
 };
 
+const EVENT_COLORS = {
+  MAJOR: "#cf1322",
+  // Red for major incidents
+  MODERATE: "#fa8c16",
+  // Orange for moderate incidents
+  MINOR: "#fadb14",
+  // Yellow for minor incidents
+  CORRECTIVE: "#12b76a" // Green for corrective actions
+};
+
 /**
  * Converts a latitude or longitude coordinate to degrees, minutes and seconds.
  *
@@ -13248,14 +13258,71 @@ const toDegreesMinutesAndSeconds = coordinate => {
  */
 const convertDMS = (lat, lng) => {
   const latitude = toDegreesMinutesAndSeconds(lat);
-  const latitudeCardinal = lat >= 0 ? 'N' : 'S';
+  const latitudeCardinal = lat >= 0 ? "N" : "S";
   const longitude = toDegreesMinutesAndSeconds(lng);
-  const longitudeCardinal = lng >= 0 ? 'E' : 'W';
+  const longitudeCardinal = lng >= 0 ? "E" : "W";
   return [latitude + '"' + latitudeCardinal, longitude + '"' + longitudeCardinal];
 };
 const southWest = L__default["default"].latLng(85, -180),
   northEast = L__default["default"].latLng(-85, 180),
   maxBounds = L__default["default"].latLngBounds(southWest, northEast);
+const getEventMarkerStyle = data => {
+  const incidents = data?.data || [];
+  const totals = {
+    major: incidents.filter(d => d.type === "major_incident").length,
+    minor: incidents.filter(d => d.type === "minor_incident").length,
+    moderate: incidents.filter(d => d.type === "moderate_incident").length,
+    correctiveActions: incidents.filter(d => d.type === "correctiveActions").length
+  };
+  const total = incidents.length;
+  let background = "#f1f1f1";
+  if (total > 0) {
+    // Build a dynamic array of categories with colors & percentages
+    const categories = [{
+      key: "major",
+      value: totals.major,
+      color: EVENT_COLORS.MAJOR
+    }, {
+      key: "moderate",
+      value: totals.moderate,
+      color: EVENT_COLORS.MODERATE
+    }, {
+      key: "minor",
+      value: totals.minor,
+      color: EVENT_COLORS.MINOR
+    }, {
+      key: "corrective",
+      value: totals.correctiveActions,
+      color: EVENT_COLORS.CORRECTIVE
+    }].filter(c => c.value > 0).map(c => ({
+      ...c,
+      perc: c.value / total * 100
+    }));
+    if (categories.length === 1) {
+      background = categories[0].color;
+    } else {
+      const gradientStops = categories.map((cat, index) => {
+        const stop = categories.slice(0, index).reduce((acc, c) => acc + c.perc, 0);
+        return `${cat.color} ${Math.round(stop)}%`;
+      });
+      background = `radial-gradient(circle, ${gradientStops.join(", ")})`;
+    }
+  }
+  let radius = 35;
+  if (data.total > 20) {
+    radius = 65;
+  } else if (data.total > 10) {
+    radius = 50;
+  } else {
+    radius = 40;
+  }
+  return {
+    radius,
+    background,
+    totals,
+    total
+  };
+};
 
 const Styles$a = dt.div`
 	display: flex;
@@ -16894,15 +16961,6 @@ function StakeholderIcon({
   });
 }
 
-const EVENT_COLORS = {
-  MAJOR: "#cf1322",
-  // Red for major incidents
-  MODERATE: "#fa8c16",
-  // Orange for moderate incidents
-  MINOR: "#fadb14",
-  // Yellow for minor incidents
-  CORRECTIVE: "#12b76a" // Green for corrective actions
-};
 function useMapHelper$1({
   type,
   mapRef,
@@ -16999,11 +17057,6 @@ function useMapHelper$1({
     return null;
   }, [mapRef, renderMarker]);
 
-  // console.log({
-  // 	activeMarker,
-  // 	mapMarkers,
-  // });
-
   // Draws the marker in the map and saves it in mapMarkers state
   const addIconToMapInitialy = React.useCallback((coordinates, groupName, markerName, data, maxTotal = 0, i = 0) => {
     if (mapRef) {
@@ -17013,55 +17066,62 @@ function useMapHelper$1({
       let iconSize = [25, 25];
       if (type === "event") {
         iconClassName = "incident rounded";
-        const incidents = data?.data || [];
+
+        /* 					const incidents = data?.data || [];
         const totals = {
-          major: incidents.filter(d => d.type === "major_incident").length,
-          minor: incidents.filter(d => d.type === "minor_incident").length,
-          moderate: incidents.filter(d => d.type === "moderate_incident").length,
-          correctiveActions: incidents.filter(d => d.type === "correctiveActions").length
+        major: incidents.filter((d) => d.type === "major_incident").length,
+        minor: incidents.filter((d) => d.type === "minor_incident").length,
+        moderate: incidents.filter((d) => d.type === "moderate_incident").length,
+        correctiveActions: incidents.filter((d) => d.type === "correctiveActions")
+        .length,
         };
         const total = incidents.length;
         let background = "#f1f1f1";
         if (total > 0) {
-          // Build a dynamic array of categories with colors & percentages
-          const categories = [{
-            key: "major",
-            value: totals.major,
-            color: EVENT_COLORS.MAJOR
-          }, {
-            key: "moderate",
-            value: totals.moderate,
-            color: EVENT_COLORS.MODERATE
-          }, {
-            key: "minor",
-            value: totals.minor,
-            color: EVENT_COLORS.MINOR
-          }, {
-            key: "corrective",
-            value: totals.correctiveActions,
-            color: EVENT_COLORS.CORRECTIVE
-          }].filter(c => c.value > 0).map(c => ({
-            ...c,
-            perc: c.value / total * 100
-          }));
-          if (categories.length === 1) {
-            background = categories[0].color;
-          } else {
-            const gradientStops = categories.map((cat, index) => {
-              const stop = categories.slice(0, index).reduce((acc, c) => acc + c.perc, 0);
-              return `${cat.color} ${Math.round(stop)}%`;
-            });
-            background = `radial-gradient(circle, ${gradientStops.join(", ")})`;
-          }
+        const categories = [
+        { key: "major", value: totals.major, color: EVENT_COLORS.MAJOR },
+        {
+        key: "moderate",
+        value: totals.moderate,
+        color: EVENT_COLORS.MODERATE,
+        },
+        { key: "minor", value: totals.minor, color: EVENT_COLORS.MINOR },
+        {
+        key: "corrective",
+        value: totals.correctiveActions,
+        color: EVENT_COLORS.CORRECTIVE,
+        },
+        ]
+        .filter((c) => c.value > 0)
+        .map((c) => ({ ...c, perc: (c.value / total) * 100 }));
+        if (categories.length === 1) {
+        background = categories[0].color;
+        } else {
+        let currentStop = 0;
+        const gradientStops = categories.map((cat, index) => {
+        const stop = categories
+        .slice(0, index)
+        .reduce((acc, c) => acc + c.perc, 0);
+        return `${cat.color} ${Math.round(stop)}%`;
+        });
+        background = `radial-gradient(circle, ${gradientStops.join(", ")})`;
+        }
         }
         let radius = 35;
         if (data.total > 20) {
-          radius = 65;
+        radius = 65;
         } else if (data.total > 10) {
-          radius = 50;
+        radius = 50;
         } else {
-          radius = 40;
+        radius = 40;
         }
+        */
+
+        const {
+          background,
+          radius,
+          totals
+        } = getEventMarkerStyle(data);
         innerHtml = `
     <div class="main" style="background: ${background}; border: 2px solid white; width: ${radius}px; height: ${radius}px;">
       <span>${data.total || 0}</span>

package/dist/style/datastake/_index.css

@@ -0,0 +1,5 @@
+@import "./fonts/outfit.css";
+@import "./fonts/sfDisplay.css";
+@import "./datastake.css";
+@import "./leaflet.css";
+@import "./leaflet.markercluster.css";