datastake-daf 0.6.266 → 0.6.268

package/dist/components/index.js

@@ -20903,7 +20903,9 @@ const SimpleGlobe = _ref => {
     projects = [],
     mapConfig = {},
     showSider = false,
-    onProjectClick = () => {}
+    onProjectClick = () => {},
+    type = "default",
+    color = "var(--color-primary-60)"
   } = _ref;
   const mapContainer = React.useRef(null);
   const map = React.useRef(null);
@@ -20959,27 +20961,41 @@ const SimpleGlobe = _ref => {
           console.log('⚠️ [SIMPLE GLOBE] Could not set any fog configuration');
         }
       }
+
+      // Calculate bounds to fit all markers
+      const bounds = new mapboxgl.LngLatBounds();
+      let hasValidCoordinates = false;
       projects.forEach((project, index) => {
         var _project$author;
         console.log("\uD83D\uDCCD [SIMPLE GLOBE] Adding marker ".concat(index, ":"), project);
 
-        // Create marker element
+        // Create marker element based on type
         const el = document.createElement('div');
-        el.className = 'mapboxgl-marker';
-        el.style.width = '25px';
-        el.style.height = '25px';
-        el.style.backgroundColor = '#00809E';
-        el.style.borderRadius = '50%';
-        el.style.border = '2px solid white';
+        el.className = 'mapboxgl-marker map-marker';
         el.style.cursor = 'pointer';
         el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
         el.style.display = 'flex';
         el.style.alignItems = 'center';
         el.style.justifyContent = 'center';
-        el.style.color = 'white';
-        el.style.fontWeight = 'bold';
-        el.style.fontSize = '12px';
-        el.innerHTML = "<span>".concat(project.percentageCompletion || 0, "</span>");
+        if (type === "location") {
+          // Location marker - SVG map pin style
+          el.style.width = '28px';
+          el.style.height = '33px';
+          el.innerHTML = "\n            <svg\n              width=\"28\"\n              height=\"33\"\n              viewBox=\"0 0 28 33\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M5.14346 4.87419C10.0688 -0.15896 18.0528 -0.162058 22.9757 4.86861C27.6563 9.65161 27.8841 17.2616 23.6622 22.3255H23.6608C23.427 22.6141 23.1808 22.894 22.9211 23.1623L14.0671 32.2101L5.44057 23.3948L5.13868 23.096C0.215857 18.0655 0.218422 9.90737 5.14346 4.87419Z\"\n                fill=\"".concat(color, "\"\n                stroke=\"white\"\n              />\n            </svg>\n          ");
+        } else {
+          // Default circular marker style
+          el.style.width = '30px';
+          el.style.height = '30px';
+          el.style.backgroundColor = color;
+          el.style.borderRadius = '50%';
+          el.style.border = '2px solid white';
+          el.style.color = 'white';
+          el.style.fontWeight = 'bold';
+          el.style.fontSize = '14px';
+          el.style.textAlign = 'center';
+          el.style.lineHeight = '1';
+          el.innerHTML = "<span style=\"display: block; line-height: 1;\">".concat(project.percentageCompletion || 0, "</span>");
+        }
 
         // Create popup content using the same structure as minesitemap
         const popupContent = "\n          <div class=\"daf-tooltip-cont\">\n            <div class=\"daf-tooltip-head\">\n              <div class=\"daf-tooltip-title\">\n                <div>\n                  <h4>".concat(project.name, "</h4>\n                  <h5>").concat(project.sectoralScope || 'Project', "</h5>\n                </div>\n              </div>\n            </div>\n            <div class=\"daf-tooltip-list\">\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">Country</span>\n                <span class=\"daf-tooltip-value\">").concat(project.country || 'N/A', "</span>\n              </div>\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">Completion</span>\n                <span class=\"daf-tooltip-value\">").concat(project.percentageCompletion || 0, "%</span>\n              </div>\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">Author</span>\n                <span class=\"daf-tooltip-value\">").concat(((_project$author = project.author) === null || _project$author === void 0 ? void 0 : _project$author.name) || 'N/A', "</span>\n              </div>\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">ID</span>\n                <span class=\"daf-tooltip-value\">").concat(project.datastakeId || 'N/A', "</span>\n              </div>\n            </div>\n          </div>\n        ");
@@ -20991,16 +21007,46 @@ const SimpleGlobe = _ref => {
           closeOnClick: false
         }).setHTML(popupContent);
 
-        // Add marker to map
-        new mapboxgl.Marker(el).setLngLat([project.longitude, project.latitude]).setPopup(popup).addTo(map.current);
+        // Ensure coordinates are valid numbers
+        const lng = Number(project.longitude);
+        const lat = Number(project.latitude);
+        console.log("\uD83D\uDCCD [SIMPLE GLOBE] Marker ".concat(index, " coordinates:"), {
+          lng,
+          lat
+        });
+
+        // Validate coordinates
+        if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+          console.error("\u274C [SIMPLE GLOBE] Invalid coordinates for project ".concat(index, ":"), {
+            lng,
+            lat
+          });
+          return;
+        }
+
+        // Add coordinates to bounds
+        bounds.extend([lng, lat]);
+        hasValidCoordinates = true;
+
+        // Add marker to map with proper coordinate order [lng, lat]
+        new mapboxgl.Marker(el).setLngLat([lng, lat]).setPopup(popup).addTo(map.current);
 
         // Add click handler
         el.addEventListener('click', () => {
           console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
           onProjectClick(project);
         });
-        console.log("\u2705 [SIMPLE GLOBE] Marker ".concat(index, " added at:"), [project.longitude, project.latitude]);
+        console.log("\u2705 [SIMPLE GLOBE] Marker ".concat(index, " added at:"), [lng, lat]);
       });
+
+      // Fit map to show all markers if we have valid coordinates
+      if (hasValidCoordinates && !bounds.isEmpty()) {
+        console.log('🗺️ [SIMPLE GLOBE] Fitting map to bounds:', bounds);
+        map.current.fitBounds(bounds, {
+          padding: 50,
+          maxZoom: 8
+        });
+      }
     });
     return () => {
       if (map.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.266",
+	"version": "0.6.268",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.jsx

@@ -21,12 +21,16 @@ import Style from './style';
  * @param {Object} mapConfig - Map configuration options (optional)
  * @param {boolean} showSider - Whether to show the sidebar (default: false)
  * @param {Function} onProjectClick - Callback when a project pin is clicked
+ * @param {string} type - Marker type: "default" for circular markers, "location" for map pin markers
+ * @param {string} color - Marker color (default: "var(--color-primary-60)")
  */
 const SimpleGlobe = ({ 
   projects = [], 
   mapConfig = {},
   showSider = false,
-  onProjectClick = () => {}
+  onProjectClick = () => {},
+  type = "default",
+  color = "var(--color-primary-60)"
 }) => {
   const mapContainer = useRef(null);
   const map = useRef(null);
@@ -91,26 +95,55 @@ const SimpleGlobe = ({
         }
       }
       
+      // Calculate bounds to fit all markers
+      const bounds = new mapboxgl.LngLatBounds();
+      let hasValidCoordinates = false;
+      
       projects.forEach((project, index) => {
         console.log(`📍 [SIMPLE GLOBE] Adding marker ${index}:`, project);
         
-        // Create marker element
+        // Create marker element based on type
         const el = document.createElement('div');
-        el.className = 'mapboxgl-marker';
-        el.style.width = '25px';
-        el.style.height = '25px';
-        el.style.backgroundColor = '#00809E';
-        el.style.borderRadius = '50%';
-        el.style.border = '2px solid white';
+        el.className = 'mapboxgl-marker map-marker';
         el.style.cursor = 'pointer';
         el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
         el.style.display = 'flex';
         el.style.alignItems = 'center';
         el.style.justifyContent = 'center';
-        el.style.color = 'white';
-        el.style.fontWeight = 'bold';
-        el.style.fontSize = '12px';
-        el.innerHTML = `<span>${project.percentageCompletion || 0}</span>`;
+        
+        if (type === "location") {
+          // Location marker - SVG map pin style
+          el.style.width = '28px';
+          el.style.height = '33px';
+          el.innerHTML = `
+            <svg
+              width="28"
+              height="33"
+              viewBox="0 0 28 33"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.14346 4.87419C10.0688 -0.15896 18.0528 -0.162058 22.9757 4.86861C27.6563 9.65161 27.8841 17.2616 23.6622 22.3255H23.6608C23.427 22.6141 23.1808 22.894 22.9211 23.1623L14.0671 32.2101L5.44057 23.3948L5.13868 23.096C0.215857 18.0655 0.218422 9.90737 5.14346 4.87419Z"
+                fill="${color}"
+                stroke="white"
+              />
+            </svg>
+          `;
+        } else {
+          // Default circular marker style
+          el.style.width = '30px';
+          el.style.height = '30px';
+          el.style.backgroundColor = color;
+          el.style.borderRadius = '50%';
+          el.style.border = '2px solid white';
+          el.style.color = 'white';
+          el.style.fontWeight = 'bold';
+          el.style.fontSize = '14px';
+          el.style.textAlign = 'center';
+          el.style.lineHeight = '1';
+          el.innerHTML = `<span style="display: block; line-height: 1;">${project.percentageCompletion || 0}</span>`;
+        }
 
         // Create popup content using the same structure as minesitemap
         const popupContent = `
@@ -151,9 +184,25 @@ const SimpleGlobe = ({
           closeOnClick: false
         }).setHTML(popupContent);
 
-        // Add marker to map
+        // Ensure coordinates are valid numbers
+        const lng = Number(project.longitude);
+        const lat = Number(project.latitude);
+        
+        console.log(`📍 [SIMPLE GLOBE] Marker ${index} coordinates:`, { lng, lat });
+        
+        // Validate coordinates
+        if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+          console.error(`❌ [SIMPLE GLOBE] Invalid coordinates for project ${index}:`, { lng, lat });
+          return;
+        }
+
+        // Add coordinates to bounds
+        bounds.extend([lng, lat]);
+        hasValidCoordinates = true;
+
+        // Add marker to map with proper coordinate order [lng, lat]
         const marker = new mapboxgl.Marker(el)
-          .setLngLat([project.longitude, project.latitude])
+          .setLngLat([lng, lat])
           .setPopup(popup)
           .addTo(map.current);
 
@@ -163,8 +212,17 @@ const SimpleGlobe = ({
           onProjectClick(project);
         });
           
-        console.log(`✅ [SIMPLE GLOBE] Marker ${index} added at:`, [project.longitude, project.latitude]);
+        console.log(`✅ [SIMPLE GLOBE] Marker ${index} added at:`, [lng, lat]);
       });
+      
+      // Fit map to show all markers if we have valid coordinates
+      if (hasValidCoordinates && !bounds.isEmpty()) {
+        console.log('🗺️ [SIMPLE GLOBE] Fitting map to bounds:', bounds);
+        map.current.fitBounds(bounds, {
+          padding: 50,
+          maxZoom: 8
+        });
+      }
     });
 
     return () => {

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.stories.js

@@ -78,15 +78,15 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ margin: "3em" }}>
+  
         <ThemeLayout>
           <Widget title="Simple Globe with Project Pins" className="no-px no-pb-body">
-            <div style={{ width: '100%', height: '600px' }}>
+            {/* <div style={{ width: '100%', height: '600px' }}> */}
               <Story />
-            </div>
+            {/* </div> */}
           </Widget>
         </ThemeLayout>
-      </div>
+ 
     ),
   ],
 };
@@ -158,6 +158,34 @@ export const EmptyState = {
   }
 };
 
+export const LocationMarkers = {
+  name: "Location Markers (Map Pin Style)",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    type: "location"
+  }
+};
+
+export const CustomColorMarkers = {
+  name: "Custom Color Markers",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    color: "#FF6B6B"
+  }
+};
+
+export const LocationCustomColor = {
+  name: "Location Markers with Custom Color",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    type: "location",
+    color: "#4ECDC4"
+  }
+};
+
 export const DebugVersion = {
   name: "Debug Version (Direct Mapbox)",
   render: () => (