datastake-daf 0.6.273 → 0.6.274

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

@@ -1,202 +0,0 @@
-import SimpleGlobe from "./SimpleGlobe";
-import SimpleGlobeDebug from "./SimpleGlobeDebug";
-import ThemeLayout from "../../ThemeLayout";
-import Widget from "../Widget";
-
-// Sample project data
-const SAMPLE_PROJECTS = [
-  {
-    _id: "sample-1",
-    name: "Dakar Solar Initiative",
-    country: "SN",
-    datastakeId: "PRJ-SAMPLE-001",
-    sectoralScope: "energy",
-    percentageCompletion: 75,
-    projectDescription: "Large-scale solar energy project in Dakar region",
-    latitude: 14.7167,
-    longitude: -17.4677,
-    author: { name: "Dakar Energy Co." }
-  },
-  {
-    _id: "sample-2", 
-    name: "Saint-Louis Wind Farm",
-    country: "SN",
-    datastakeId: "PRJ-SAMPLE-002",
-    sectoralScope: "energy",
-    percentageCompletion: 45,
-    projectDescription: "Wind energy project in Saint-Louis region",
-    latitude: 16.0167,
-    longitude: -16.4833,
-    author: { name: "Wind Power Solutions" }
-  },
-  {
-    _id: "sample-3",
-    name: "Casamance Reforestation",
-    country: "SN", 
-    datastakeId: "PRJ-SAMPLE-003",
-    sectoralScope: "agricultureForestryAndOtherLandUse",
-    percentageCompletion: 60,
-    projectDescription: "Forest restoration project in Casamance region",
-    latitude: 12.5833,
-    longitude: -16.2667,
-    author: { name: "Green Casamance" }
-  },
-  {
-    _id: "sample-4",
-    name: "Lagos Tech Hub",
-    country: "NG",
-    datastakeId: "PRJ-SAMPLE-004",
-    sectoralScope: "technology",
-    percentageCompletion: 30,
-    projectDescription: "Technology innovation center in Lagos",
-    latitude: 6.5244,
-    longitude: 3.3792,
-    author: { name: "Lagos Tech Foundation" }
-  },
-  {
-    _id: "sample-5",
-    name: "Cairo Water Management",
-    country: "EG",
-    datastakeId: "PRJ-SAMPLE-005",
-    sectoralScope: "water",
-    percentageCompletion: 85,
-    projectDescription: "Water conservation project in Cairo",
-    latitude: 30.0444,
-    longitude: 31.2357,
-    author: { name: "Cairo Water Authority" }
-  }
-];
-
-export default {
-  title: "Dashboard/Globe/SimpleGlobe",
-  component: SimpleGlobe,
-  tags: ["autodocs"],
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: false,
-    onProjectClick: (project) => console.log('Project clicked:', project)
-  },
-  decorators: [
-    (Story) => (
-  
-        <ThemeLayout>
-          <Widget title="Simple Globe with Project Pins" className="no-px no-pb-body">
-            {/* <div style={{ width: '100%', height: '600px' }}> */}
-              <Story />
-            {/* </div> */}
-          </Widget>
-        </ThemeLayout>
- 
-    ),
-  ],
-};
-
-export const Default = {
-  name: "Default Project Globe",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: false
-  }
-};
-
-export const TestSimple = {
-  name: "Test Simple Data",
-  args: {
-    projects: [
-      {
-        name: "Test Project 1",
-        latitude: 14.7167,
-        longitude: -17.4677,
-        percentageCompletion: 75,
-        projectDescription: "Test project in Dakar"
-      },
-      {
-        name: "Test Project 2",
-        latitude: 16.0167,
-        longitude: -16.4833,
-        percentageCompletion: 45,
-        projectDescription: "Test project in Saint-Louis"
-      }
-    ],
-    showSider: true
-  }
-};
-
-export const WithSidebar = {
-  name: "With Sidebar",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true
-  }
-};
-
-export const CustomMapConfig = {
-  name: "Custom Map Configuration",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true,
-    mapConfig: {
-      maxZoom: 6,
-      minZoom: 2
-    }
-  }
-};
-
-export const SingleProject = {
-  name: "Single Project",
-  args: {
-    projects: [SAMPLE_PROJECTS[0]],
-    showSider: true
-  }
-};
-
-export const EmptyState = {
-  name: "Empty State",
-  args: {
-    projects: [],
-    showSider: false
-  }
-};
-
-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: () => (
-    <div style={{ margin: "3em" }}>
-      <ThemeLayout>
-        <Widget title="Debug Globe (Direct Mapbox)" className="no-px no-pb-body">
-          <div style={{ width: '100%', height: '600px' }}>
-            <SimpleGlobeDebug projects={SAMPLE_PROJECTS} />
-          </div>
-        </Widget>
-      </ThemeLayout>
-    </div>
-  )
-};

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

@@ -1,85 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
-
-const SimpleGlobeDebug = ({ projects = [] }) => {
-  const mapContainer = useRef(null);
-  const map = useRef(null);
-
-  useEffect(() => {
-    if (map.current) return; // Initialize map only once
-
-    // Set Mapbox access token
-    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
-
-    console.log('🗺️ [DEBUG] Creating map...');
-    
-    // Create map
-    map.current = new mapboxgl.Map({
-      container: mapContainer.current,
-      style: 'mapbox://styles/mapbox/satellite-v9',
-      center: [0, 0],
-      zoom: 3,
-      projection: 'globe'
-    });
-
-    // Add markers when map loads
-    map.current.on('load', () => {
-      console.log('🗺️ [DEBUG] Map loaded, adding markers...');
-      
-      projects.forEach((project, index) => {
-        console.log(`📍 [DEBUG] Adding marker ${index}:`, project);
-        
-        // Create marker element
-        const el = document.createElement('div');
-        el.className = 'mapboxgl-marker';
-        el.style.width = '20px';
-        el.style.height = '20px';
-        el.style.backgroundColor = '#00809E';
-        el.style.borderRadius = '50%';
-        el.style.border = '2px solid white';
-        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.innerHTML = `<span>${project.percentageCompletion || 0}</span>`;
-
-        // Create popup
-        const popup = new mapboxgl.Popup({ offset: 25 })
-          .setHTML(`
-            <div>
-              <h3>${project.name}</h3>
-              <p>${project.projectDescription || 'No description'}</p>
-              <p>Completion: ${project.percentageCompletion || 0}%</p>
-            </div>
-          `);
-
-        // Add marker to map
-        new mapboxgl.Marker(el)
-          .setLngLat([project.longitude, project.latitude])
-          .setPopup(popup)
-          .addTo(map.current);
-          
-        console.log(`✅ [DEBUG] Marker ${index} added at:`, [project.longitude, project.latitude]);
-      });
-    });
-
-    return () => {
-      if (map.current) {
-        map.current.remove();
-        map.current = null;
-      }
-    };
-  }, []);
-
-  return (
-    <div style={{ width: '100%', height: '600px', border: '2px solid #ccc' }}>
-      <div ref={mapContainer} style={{ width: '100%', height: '100%' }} />
-    </div>
-  );
-};
-
-export default SimpleGlobeDebug;

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

@@ -1,75 +0,0 @@
-import React from 'react';
-import SimpleGlobe from './SimpleGlobe';
-
-// Your sample project data
-const SAMPLE_PROJECTS = [
-  {
-    _id: "sample-1",
-    name: "Dakar Solar Initiative",
-    country: "SN",
-    datastakeId: "PRJ-SAMPLE-001",
-    sectoralScope: "energy",
-    percentageCompletion: 75,
-    projectDescription: "Large-scale solar energy project in Dakar region",
-    latitude: 14.7167,
-    longitude: -17.4677,
-    author: { name: "Dakar Energy Co." }
-  },
-  {
-    _id: "sample-2", 
-    name: "Saint-Louis Wind Farm",
-    country: "SN",
-    datastakeId: "PRJ-SAMPLE-002",
-    sectoralScope: "energy",
-    percentageCompletion: 45,
-    projectDescription: "Wind energy project in Saint-Louis region",
-    latitude: 16.0167,
-    longitude: -16.4833,
-    author: { name: "Wind Power Solutions" }
-  },
-  {
-    _id: "sample-3",
-    name: "Casamance Reforestation",
-    country: "SN", 
-    datastakeId: "PRJ-SAMPLE-003",
-    sectoralScope: "agricultureForestryAndOtherLandUse",
-    percentageCompletion: 60,
-    projectDescription: "Forest restoration project in Casamance region",
-    latitude: 12.5833,
-    longitude: -16.2667,
-    author: { name: "Green Casamance" }
-  }
-];
-
-/**
- * SimpleGlobeExample - Example usage of the SimpleGlobe component
- * 
- * This shows how easy it is to display your project data as pins on a 3D globe.
- * Just pass your project array to the SimpleGlobe component!
- */
-const SimpleGlobeExample = () => {
-  const handleProjectClick = (projectData) => {
-    console.log('Project clicked:', projectData);
-    // You can add your custom logic here, like:
-    // - Navigate to project details page
-    // - Show project information in a modal
-    // - Update application state
-    alert(`Clicked on: ${projectData.name}\nCompletion: ${projectData.percentageCompletion}%`);
-  };
-
-  return (
-    <div style={{ width: '100%', height: '600px' }}>
-      <SimpleGlobe
-        projects={SAMPLE_PROJECTS}
-        showSider={true}
-        onProjectClick={handleProjectClick}
-        mapConfig={{
-          maxZoom: 8,
-          minZoom: 2
-        }}
-      />
-    </div>
-  );
-};
-
-export default SimpleGlobeExample;

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import SimpleGlobe from './SimpleGlobe';
-
-// Test with a simple, known working dataset
-const TEST_PROJECTS = [
-  {
-    _id: "test-1",
-    name: "Test Project 1",
-    latitude: 14.7167,
-    longitude: -17.4677,
-    percentageCompletion: 75,
-    projectDescription: "Test project in Dakar"
-  },
-  {
-    _id: "test-2", 
-    name: "Test Project 2",
-    latitude: 16.0167,
-    longitude: -16.4833,
-    percentageCompletion: 45,
-    projectDescription: "Test project in Saint-Louis"
-  }
-];
-
-const SimpleGlobeTest = () => {
-  console.log('🧪 [SIMPLE GLOBE TEST] Test projects:', TEST_PROJECTS);
-
-  const handleProjectClick = (projectData) => {
-    console.log('🧪 [SIMPLE GLOBE TEST] Project clicked:', projectData);
-    alert(`Clicked: ${projectData.name} at ${projectData.gps?.latitude}, ${projectData.gps?.longitude}`);
-  };
-
-  return (
-    <div style={{ width: '100%', height: '600px', border: '2px solid #ccc' }}>
-      <h3>SimpleGlobe Test</h3>
-      <SimpleGlobe
-        projects={TEST_PROJECTS}
-        showSider={true}
-        onProjectClick={handleProjectClick}
-        mapConfig={{
-          maxZoom: 8,
-          minZoom: 2
-        }}
-      />
-    </div>
-  );
-};
-
-export default SimpleGlobeTest;

package/src/@daf/core/components/Dashboard/Globe/storyConfig.js

@@ -1,243 +0,0 @@
-import { storyConfig as EventConfig } from "./storyConfig1.js";
-// Create default configs since the other files were deleted
-const DefaultGlobeConfig = {
-	data: [
-		{
-			gps: { latitude: 40.7128, longitude: -74.0060 },
-			name: "New York City",
-			description: "Major metropolitan area in the United States",
-			total: 15,
-			sources: 3,
-		},
-		{
-			gps: { latitude: 51.5074, longitude: -0.1278 },
-			name: "London",
-			description: "Capital of the United Kingdom",
-			total: 12,
-			sources: 2,
-		},
-		{
-			gps: { latitude: 35.6762, longitude: 139.6503 },
-			name: "Tokyo",
-			description: "Capital of Japan",
-			total: 8,
-			sources: 1,
-		},
-		{
-			gps: { latitude: -33.8688, longitude: 151.2093 },
-			name: "Sydney",
-			description: "Major city in Australia",
-			total: 6,
-			sources: 2,
-		},
-		{
-			gps: { latitude: -22.9068, longitude: -43.1729 },
-			name: "Rio de Janeiro",
-			description: "Major city in Brazil",
-			total: 10,
-			sources: 1,
-		},
-	],
-	renderTooltip: (data) => [
-		{ label: "City", value: data.name || "-" },
-		{ label: "Total Events", value: data.total || 0 },
-		{ label: "Sources", value: data.sources || 0 },
-		{ label: "Description", value: data.description || "-" },
-	],
-	primaryLink: true,
-	showSider: false,
-};
-
-const TerritoryGlobeConfig = {
-	data: [
-		{
-			gps: { latitude: 39.9042, longitude: 116.4074 },
-			name: "Beijing Territory",
-			description: "Administrative region in China",
-			total: 25,
-			sources: 4,
-		},
-		{
-			gps: { latitude: 55.7558, longitude: 37.6176 },
-			name: "Moscow Region",
-			description: "Federal subject of Russia",
-			total: 18,
-			sources: 3,
-		},
-		{
-			gps: { latitude: -26.2041, longitude: 28.0473 },
-			name: "Gauteng Province",
-			description: "Province in South Africa",
-			total: 14,
-			sources: 2,
-		},
-		{
-			gps: { latitude: 19.4326, longitude: -99.1332 },
-			name: "Mexico City Territory",
-			description: "Federal district in Mexico",
-			total: 20,
-			sources: 3,
-		},
-	],
-	renderTooltip: (data) => [
-		{ label: "Territory", value: data.name || "-" },
-		{ label: "Total Events", value: data.total || 0 },
-		{ label: "Sources", value: data.sources || 0 },
-		{ label: "Description", value: data.description || "-" },
-	],
-	primaryLink: true,
-	showSider: false,
-};
-
-const StakeholderGlobeConfig = {
-	data: [
-		{
-			gps: { latitude: 48.8566, longitude: 2.3522 },
-			name: "Paris NGO",
-			description: "Environmental NGO in France",
-			total: 12,
-			sources: 2,
-		},
-		{
-			gps: { latitude: 37.7749, longitude: -122.4194 },
-			name: "San Francisco Tech",
-			description: "Technology company in California",
-			total: 8,
-			sources: 1,
-		},
-		{
-			gps: { latitude: 1.3521, longitude: 103.8198 },
-			name: "Singapore Corp",
-			description: "Multinational corporation",
-			total: 15,
-			sources: 3,
-		},
-		{
-			gps: { latitude: 52.5200, longitude: 13.4050 },
-			name: "Berlin Institute",
-			description: "Research institute in Germany",
-			total: 9,
-			sources: 2,
-		},
-		{
-			gps: { latitude: -34.6037, longitude: -58.3816 },
-			name: "Buenos Aires Union",
-			description: "Labor union in Argentina",
-			total: 11,
-			sources: 1,
-		},
-	],
-	renderTooltip: (data) => [
-		{ label: "Stakeholder", value: data.name || "-" },
-		{ label: "Total Events", value: data.total || 0 },
-		{ label: "Sources", value: data.sources || 0 },
-		{ label: "Description", value: data.description || "-" },
-	],
-	primaryLink: true,
-	showSider: false,
-};
-
-const ChainGlobeConfig = {
-	data: [
-		{
-			gps: { latitude: 23.1291, longitude: 113.2644 },
-			name: "Guangzhou Manufacturing",
-			description: "Electronics manufacturing hub in China",
-			total: 22,
-			sources: 4,
-		},
-		{
-			gps: { latitude: 12.9716, longitude: 77.5946 },
-			name: "Bangalore Tech Hub",
-			description: "Software development center in India",
-			total: 18,
-			sources: 3,
-		},
-		{
-			gps: { latitude: 41.8781, longitude: -87.6298 },
-			name: "Chicago Logistics",
-			description: "Transportation and logistics hub in USA",
-			total: 16,
-			sources: 2,
-		},
-		{
-			gps: { latitude: 25.2048, longitude: 55.2708 },
-			name: "Dubai Trade Center",
-			description: "International trade and commerce hub",
-			total: 14,
-			sources: 3,
-		},
-		{
-			gps: { latitude: -23.5505, longitude: -46.6333 },
-			name: "São Paulo Distribution",
-			description: "Distribution center in Brazil",
-			total: 12,
-			sources: 2,
-		},
-	],
-	renderTooltip: (data) => [
-		{ label: "Supply Chain Node", value: data.name || "-" },
-		{ label: "Total Events", value: data.total || 0 },
-		{ label: "Sources", value: data.sources || 0 },
-		{ label: "Description", value: data.description || "-" },
-	],
-	primaryLink: true,
-	showSider: false,
-};
-
-const ProjectGlobeConfig = {
-	data: [
-		{
-			gps: { latitude: 6.5244, longitude: 3.3792 },
-			name: "Lagos Solar Project",
-			description: "Renewable energy project in Nigeria",
-			total: 8,
-			sources: 2,
-		},
-		{
-			gps: { latitude: -1.2921, longitude: 36.8219 },
-			name: "Nairobi Water Initiative",
-			description: "Water management project in Kenya",
-			total: 12,
-			sources: 3,
-		},
-		{
-			gps: { latitude: 13.7563, longitude: 100.5018 },
-			name: "Bangkok Green City",
-			description: "Urban sustainability project in Thailand",
-			total: 15,
-			sources: 4,
-		},
-		{
-			gps: { latitude: -12.0464, longitude: -77.0428 },
-			name: "Lima Education Hub",
-			description: "Educational development project in Peru",
-			total: 10,
-			sources: 2,
-		},
-		{
-			gps: { latitude: 30.0444, longitude: 31.2357 },
-			name: "Cairo Infrastructure",
-			description: "Infrastructure development project in Egypt",
-			total: 14,
-			sources: 3,
-		},
-		{
-			gps: { latitude: 55.7558, longitude: 37.6176 },
-			name: "Moscow Innovation Center",
-			description: "Technology innovation project in Russia",
-			total: 9,
-			sources: 2,
-		},
-	],
-	renderTooltip: (data) => [
-		{ label: "Project Name", value: data.name || "-" },
-		{ label: "Total Events", value: data.total || 0 },
-		{ label: "Sources", value: data.sources || 0 },
-		{ label: "Description", value: data.description || "-" },
-	],
-	primaryLink: true,
-	showSider: false,
-};
-
-export { DefaultGlobeConfig, TerritoryGlobeConfig, StakeholderGlobeConfig, EventConfig, ChainGlobeConfig, ProjectGlobeConfig };