datastake-daf 0.6.275 β 0.6.276
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.js +44 -326
- package/dist/utils/index.js +2 -2
- package/package.json +1 -1
- package/src/@daf/core/components/Dashboard/Globe/Globe.stories.js +5 -30
- package/src/@daf/core/components/Dashboard/Globe/hook.js +7 -63
- package/src/@daf/core/components/Dashboard/Globe/index.jsx +6 -24
- package/src/@daf/core/components/Dashboard/Globe/style.js +0 -1
- package/src/@daf/core/components/UI/CountryFlag/index.jsx +23 -0
- package/src/@daf/utils/tooltip.js +2 -2
- package/src/index.js +1 -1
- package/src/@daf/core/components/Dashboard/Globe/README.md +0 -106
- package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.jsx +0 -295
- package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.stories.js +0 -203
- package/src/@daf/core/components/Dashboard/Globe/SimpleGlobeDebug.jsx +0 -85
- package/src/@daf/core/components/Dashboard/Globe/SimpleGlobeExample.jsx +0 -75
- package/src/@daf/core/components/Dashboard/Globe/SimpleGlobeTest.jsx +0 -48
- package/src/@daf/core/components/Dashboard/Globe/storyConfig.js +0 -243
- package/src/@daf/core/components/Dashboard/Globe/storyConfig1.js +0 -354
package/dist/components/index.js
CHANGED
|
@@ -17106,13 +17106,13 @@ const renderTooltipJsx = ({
|
|
|
17106
17106
|
}
|
|
17107
17107
|
})
|
|
17108
17108
|
}), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
|
|
17109
|
-
title: item.label,
|
|
17109
|
+
title: item.tooltipLabel || item.label,
|
|
17110
17110
|
children: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
17111
17111
|
className: "daf-tooltip-name",
|
|
17112
17112
|
children: item.label
|
|
17113
17113
|
})
|
|
17114
17114
|
}), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
|
|
17115
|
-
title: item.value,
|
|
17115
|
+
title: item.tooltipValue || item.value,
|
|
17116
17116
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
17117
17117
|
style: {
|
|
17118
17118
|
height: "20px",
|
|
@@ -19363,7 +19363,6 @@ const Style$A = dt.div`
|
|
|
19363
19363
|
height: 100%;
|
|
19364
19364
|
}
|
|
19365
19365
|
|
|
19366
|
-
/* Narrow marker styling used by legacy components; avoid width/height overrides for SimpleGlobe */
|
|
19367
19366
|
.map-marker {
|
|
19368
19367
|
text-align: center;
|
|
19369
19368
|
width 100%;
|
|
@@ -19929,26 +19928,14 @@ const useGlobe = ({
|
|
|
19929
19928
|
const addedSources = React.useRef(new Set());
|
|
19930
19929
|
const isMounted = React.useRef(true);
|
|
19931
19930
|
const addAllDataToMap = React.useCallback(() => {
|
|
19932
|
-
|
|
19933
|
-
console.log('π [GLOBE HOOK] data:', data);
|
|
19934
|
-
console.log('π [GLOBE HOOK] mapRef exists:', !!mapRef);
|
|
19935
|
-
console.log('π [GLOBE HOOK] style loaded:', mapRef?.isStyleLoaded());
|
|
19936
|
-
if (!data || !mapRef) {
|
|
19937
|
-
console.log('β [GLOBE HOOK] addAllDataToMap early return - missing data or mapRef');
|
|
19938
|
-
return;
|
|
19939
|
-
}
|
|
19940
|
-
if (!mapRef.isStyleLoaded()) {
|
|
19941
|
-
console.log('β³ [GLOBE HOOK] Style not loaded yet, retrying in 100ms...');
|
|
19942
|
-
setTimeout(() => {
|
|
19943
|
-
addAllDataToMap();
|
|
19944
|
-
}, 100);
|
|
19931
|
+
if (!data || !mapRef || !mapRef.isStyleLoaded()) {
|
|
19945
19932
|
return;
|
|
19946
19933
|
}
|
|
19934
|
+
|
|
19935
|
+
// Prevent multiple calls with empty data
|
|
19947
19936
|
if (data.length === 0) {
|
|
19948
|
-
console.log('β [GLOBE HOOK] addAllDataToMap early return - no data');
|
|
19949
19937
|
return;
|
|
19950
19938
|
}
|
|
19951
|
-
console.log('β
[GLOBE HOOK] Starting to add markers to map...');
|
|
19952
19939
|
|
|
19953
19940
|
// Clear existing markers using functional update to avoid dependency issues
|
|
19954
19941
|
setMapMarkers(currentMarkers => {
|
|
@@ -20000,13 +19987,8 @@ const useGlobe = ({
|
|
|
20000
19987
|
if (data && mapRef) {
|
|
20001
19988
|
const newMarkers = [];
|
|
20002
19989
|
const maxTotal = Math.max(...(data || []).map(d => d.total || 0));
|
|
20003
|
-
console.log('π― [GLOBE HOOK] Processing data items:', data.length);
|
|
20004
19990
|
data.forEach((d, i) => {
|
|
20005
|
-
console.log(`π― [GLOBE HOOK] Processing item ${i}:`, d);
|
|
20006
|
-
console.log(`π― [GLOBE HOOK] Item ${i} marker:`, d?.marker);
|
|
20007
|
-
console.log(`π― [GLOBE HOOK] Item ${i} lat/lng:`, d?.marker?.lat, d?.marker?.lng);
|
|
20008
19991
|
if (d?.marker?.lat && d?.marker?.lng) {
|
|
20009
|
-
console.log(`β
[GLOBE HOOK] Item ${i} has valid coordinates, creating marker...`);
|
|
20010
19992
|
let marker;
|
|
20011
19993
|
let iconClassName = "";
|
|
20012
19994
|
let iconSize = [25, 25];
|
|
@@ -20086,7 +20068,6 @@ const useGlobe = ({
|
|
|
20086
20068
|
el.style.fontWeight = 'bold';
|
|
20087
20069
|
el.innerHTML = `<span>${d.total || 0}</span>`;
|
|
20088
20070
|
marker = new mapboxgl.Marker(el).setLngLat([d.marker.lng, d.marker.lat]).setPopup(new mapboxgl.Popup().setDOMContent(div)).addTo(mapRef);
|
|
20089
|
-
console.log(`π [GLOBE HOOK] Marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
|
|
20090
20071
|
} else if (type === "territory") {
|
|
20091
20072
|
// Handle territory polygons
|
|
20092
20073
|
if (d.area && Array.isArray(d.area)) {
|
|
@@ -20156,7 +20137,6 @@ const useGlobe = ({
|
|
|
20156
20137
|
}));
|
|
20157
20138
|
roots.current.push(root);
|
|
20158
20139
|
marker = new mapboxgl.Marker(el).setLngLat([d.marker.lng, d.marker.lat]).setPopup(new mapboxgl.Popup().setDOMContent(div)).addTo(mapRef);
|
|
20159
|
-
console.log(`π [GLOBE HOOK] Default marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
|
|
20160
20140
|
}
|
|
20161
20141
|
|
|
20162
20142
|
// Add click handler
|
|
@@ -20190,7 +20170,6 @@ const useGlobe = ({
|
|
|
20190
20170
|
mapboxgl.accessToken = MAP_TOKEN;
|
|
20191
20171
|
|
|
20192
20172
|
// Create the map with Mapbox GL JS - 3D globe
|
|
20193
|
-
console.log('πΊοΈ [GLOBE HOOK] Creating map with style:', STYLE_URL);
|
|
20194
20173
|
const map = new mapboxgl.Map({
|
|
20195
20174
|
container: container.current,
|
|
20196
20175
|
style: STYLE_URL,
|
|
@@ -20209,13 +20188,8 @@ const useGlobe = ({
|
|
|
20209
20188
|
|
|
20210
20189
|
// Configure the map when style loads
|
|
20211
20190
|
map.on('style.load', () => {
|
|
20212
|
-
console.log('π¨ [GLOBE HOOK] Style loaded event triggered');
|
|
20213
|
-
console.log('π¨ [GLOBE HOOK] Map style loaded:', map.isStyleLoaded());
|
|
20214
|
-
|
|
20215
20191
|
// Wait a bit for the style to fully load
|
|
20216
20192
|
setTimeout(() => {
|
|
20217
|
-
console.log('π¨ [GLOBE HOOK] After timeout - Map style loaded:', map.isStyleLoaded());
|
|
20218
|
-
|
|
20219
20193
|
// Set fog for the space background effect with stars - simplified to avoid errors
|
|
20220
20194
|
try {
|
|
20221
20195
|
map.setFog({
|
|
@@ -20311,10 +20285,9 @@ const useGlobe = ({
|
|
|
20311
20285
|
|
|
20312
20286
|
// Add navigation controls
|
|
20313
20287
|
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
|
|
20314
|
-
console.log('πΊοΈ [GLOBE HOOK] Map created successfully');
|
|
20315
20288
|
return map;
|
|
20316
20289
|
} catch (error) {
|
|
20317
|
-
console.error('
|
|
20290
|
+
console.error('Error creating Mapbox GL JS globe:', error);
|
|
20318
20291
|
return null;
|
|
20319
20292
|
}
|
|
20320
20293
|
}, []);
|
|
@@ -20327,12 +20300,9 @@ const useGlobe = ({
|
|
|
20327
20300
|
// }, [initialMarkerSetIsDone]);
|
|
20328
20301
|
|
|
20329
20302
|
React.useEffect(() => {
|
|
20330
|
-
console.log('π [GLOBE HOOK] useEffect for map creation - mapRef:', !!mapRef);
|
|
20331
20303
|
if (!mapRef) {
|
|
20332
|
-
console.log('π [GLOBE HOOK] Creating map instance...');
|
|
20333
20304
|
const instance = createInstance();
|
|
20334
20305
|
if (instance) {
|
|
20335
|
-
console.log('π [GLOBE HOOK] Map instance created, setting mapRef');
|
|
20336
20306
|
setMapRef(instance);
|
|
20337
20307
|
|
|
20338
20308
|
// Add comprehensive resize detection for Mapbox GL JS responsiveness
|
|
@@ -20413,22 +20383,14 @@ const useGlobe = ({
|
|
|
20413
20383
|
}
|
|
20414
20384
|
}, [polygon, mapRef]);
|
|
20415
20385
|
React.useEffect(() => {
|
|
20416
|
-
console.log('π₯ [GLOBE HOOK] allData received:', allData);
|
|
20417
|
-
console.log('π₯ [GLOBE HOOK] allData length:', allData?.length);
|
|
20418
20386
|
if (allData) {
|
|
20419
20387
|
if (allData.length === 0) {
|
|
20420
|
-
console.log('β οΈ [GLOBE HOOK] Empty data array');
|
|
20421
20388
|
setEmptyStateIsVisible(true);
|
|
20422
20389
|
} else if (emptyStateIsVisible) {
|
|
20423
20390
|
setEmptyStateIsVisible(false);
|
|
20424
20391
|
}
|
|
20425
|
-
|
|
20426
|
-
const filteredData = filterValidGPS(allData);
|
|
20427
|
-
console.log('π [GLOBE HOOK] filtered data result:', filteredData);
|
|
20428
|
-
console.log('π [GLOBE HOOK] filtered data length:', filteredData.length);
|
|
20429
|
-
setData(filteredData);
|
|
20392
|
+
setData(filterValidGPS(allData));
|
|
20430
20393
|
} else {
|
|
20431
|
-
console.log('β [GLOBE HOOK] No allData provided');
|
|
20432
20394
|
setData(null);
|
|
20433
20395
|
}
|
|
20434
20396
|
}, [allData, emptyStateIsVisible]);
|
|
@@ -20458,19 +20420,7 @@ const useGlobe = ({
|
|
|
20458
20420
|
}
|
|
20459
20421
|
}, [user, mapRef, allData]);
|
|
20460
20422
|
React.useEffect(() => {
|
|
20461
|
-
|
|
20462
|
-
mapRef: !!mapRef,
|
|
20463
|
-
data: !!data,
|
|
20464
|
-
dataLength: data?.length,
|
|
20465
|
-
initialMarkerSetIsDone,
|
|
20466
|
-
styleLoaded: mapRef?.isStyleLoaded()
|
|
20467
|
-
});
|
|
20468
|
-
if (mapRef && data && !initialMarkerSetIsDone) {
|
|
20469
|
-
console.log('π [GLOBE HOOK] Attempting to add markers...');
|
|
20470
|
-
console.log('π [GLOBE HOOK] Style loaded check:', mapRef.isStyleLoaded());
|
|
20471
|
-
|
|
20472
|
-
// Try to add markers immediately, and if style isn't loaded,
|
|
20473
|
-
// the addAllDataToMap function will handle it
|
|
20423
|
+
if (mapRef && data && !initialMarkerSetIsDone && mapRef.isStyleLoaded()) {
|
|
20474
20424
|
setInitialMarkerSetIsDone(true);
|
|
20475
20425
|
addAllDataToMap();
|
|
20476
20426
|
}
|
|
@@ -20683,7 +20633,7 @@ function Globe(_ref) {
|
|
|
20683
20633
|
renderSider = null,
|
|
20684
20634
|
renderMarker = null,
|
|
20685
20635
|
type = "default",
|
|
20686
|
-
showSider =
|
|
20636
|
+
showSider = true,
|
|
20687
20637
|
filtersConfig,
|
|
20688
20638
|
onFilterChange = () => {},
|
|
20689
20639
|
isSatellite = false,
|
|
@@ -20693,29 +20643,15 @@ function Globe(_ref) {
|
|
|
20693
20643
|
onUnmount
|
|
20694
20644
|
} = _ref;
|
|
20695
20645
|
// Map data to include marker coordinates
|
|
20696
|
-
const mappedData = React.useMemo(() => {
|
|
20697
|
-
|
|
20698
|
-
|
|
20699
|
-
|
|
20700
|
-
|
|
20701
|
-
|
|
20702
|
-
|
|
20703
|
-
const mapped = data.map((d, i) => {
|
|
20704
|
-
var _d$gps, _d$gps2;
|
|
20705
|
-
console.log("\uD83D\uDCCA [GLOBE COMPONENT] Mapping item ".concat(i, ":"), d);
|
|
20706
|
-
console.log("\uD83D\uDCCA [GLOBE COMPONENT] Item ".concat(i, " GPS:"), d === null || d === void 0 ? void 0 : d.gps);
|
|
20707
|
-
const result = _objectSpread2(_objectSpread2({}, d), {}, {
|
|
20708
|
-
marker: {
|
|
20709
|
-
lat: d === null || d === void 0 || (_d$gps = d.gps) === null || _d$gps === void 0 ? void 0 : _d$gps.latitude,
|
|
20710
|
-
lng: d === null || d === void 0 || (_d$gps2 = d.gps) === null || _d$gps2 === void 0 ? void 0 : _d$gps2.longitude
|
|
20711
|
-
}
|
|
20712
|
-
});
|
|
20713
|
-
console.log("\uD83D\uDCCA [GLOBE COMPONENT] Item ".concat(i, " mapped result:"), result);
|
|
20714
|
-
return result;
|
|
20646
|
+
const mappedData = React.useMemo(() => data.map(d => {
|
|
20647
|
+
var _d$gps, _d$gps2;
|
|
20648
|
+
return _objectSpread2(_objectSpread2({}, d), {}, {
|
|
20649
|
+
marker: {
|
|
20650
|
+
lat: d === null || d === void 0 || (_d$gps = d.gps) === null || _d$gps === void 0 ? void 0 : _d$gps.latitude,
|
|
20651
|
+
lng: d === null || d === void 0 || (_d$gps2 = d.gps) === null || _d$gps2 === void 0 ? void 0 : _d$gps2.longitude
|
|
20652
|
+
}
|
|
20715
20653
|
});
|
|
20716
|
-
|
|
20717
|
-
return mapped;
|
|
20718
|
-
}, [data]);
|
|
20654
|
+
}), [data]);
|
|
20719
20655
|
|
|
20720
20656
|
// Get resize context for sidebar state changes
|
|
20721
20657
|
const {
|
|
@@ -20899,250 +20835,6 @@ Globe.propTypes = {
|
|
|
20899
20835
|
nameAsSiderTitle: PropTypes__default["default"].bool
|
|
20900
20836
|
};
|
|
20901
20837
|
|
|
20902
|
-
const SimpleGlobe = _ref => {
|
|
20903
|
-
let {
|
|
20904
|
-
projects = [],
|
|
20905
|
-
mapConfig = {},
|
|
20906
|
-
showSider = false,
|
|
20907
|
-
onProjectClick = () => {},
|
|
20908
|
-
type = "default",
|
|
20909
|
-
color = "var(--color-primary-60)"
|
|
20910
|
-
} = _ref;
|
|
20911
|
-
const mapContainer = React.useRef(null);
|
|
20912
|
-
const map = React.useRef(null);
|
|
20913
|
-
const boundsRef = React.useRef(null);
|
|
20914
|
-
React.useEffect(() => {
|
|
20915
|
-
if (map.current) return; // Initialize map only once
|
|
20916
|
-
|
|
20917
|
-
console.log('πΊοΈ [SIMPLE GLOBE] Creating map...');
|
|
20918
|
-
|
|
20919
|
-
// Set Mapbox access token
|
|
20920
|
-
mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
|
|
20921
|
-
|
|
20922
|
-
// Create map with custom Straatos style
|
|
20923
|
-
map.current = new mapboxgl.Map({
|
|
20924
|
-
container: mapContainer.current,
|
|
20925
|
-
style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
|
|
20926
|
-
center: [0, 0],
|
|
20927
|
-
zoom: mapConfig.maxZoom || 3,
|
|
20928
|
-
projection: 'globe',
|
|
20929
|
-
attributionControl: false
|
|
20930
|
-
});
|
|
20931
|
-
|
|
20932
|
-
// Add markers when map loads
|
|
20933
|
-
map.current.on('load', () => {
|
|
20934
|
-
console.log('πΊοΈ [SIMPLE GLOBE] Map loaded, adding markers...');
|
|
20935
|
-
|
|
20936
|
-
// Hide Mapbox logo and attribution completely
|
|
20937
|
-
map.current.getContainer();
|
|
20938
|
-
const style = document.createElement('style');
|
|
20939
|
-
style.textContent = "\n .mapboxgl-ctrl-logo,\n .mapboxgl-ctrl-attrib,\n .mapboxgl-ctrl-bottom-left,\n .mapboxgl-ctrl-bottom-right {\n display: none !important;\n }\n .mapboxgl-canvas-container {\n overflow: hidden !important;\n }\n .mapboxgl-canvas {\n overflow: hidden !important;\n }\n ";
|
|
20940
|
-
document.head.appendChild(style);
|
|
20941
|
-
|
|
20942
|
-
// Set the space background with stars
|
|
20943
|
-
try {
|
|
20944
|
-
map.current.setFog({
|
|
20945
|
-
'color': 'rgb(0, 0, 0)',
|
|
20946
|
-
'high-color': 'rgb(0, 0, 0)',
|
|
20947
|
-
'horizon-blend': 0.1,
|
|
20948
|
-
'space-color': 'rgb(0, 0, 0)',
|
|
20949
|
-
'star-intensity': 0.6
|
|
20950
|
-
});
|
|
20951
|
-
console.log('β¨ [SIMPLE GLOBE] Space background with stars set');
|
|
20952
|
-
} catch (e) {
|
|
20953
|
-
console.log('β οΈ [SIMPLE GLOBE] Could not set fog, trying alternative...');
|
|
20954
|
-
// Fallback: try simpler fog configuration
|
|
20955
|
-
try {
|
|
20956
|
-
map.current.setFog({
|
|
20957
|
-
'color': 'rgb(0, 0, 0)',
|
|
20958
|
-
'high-color': 'rgb(0, 0, 0)',
|
|
20959
|
-
'horizon-blend': 0.1
|
|
20960
|
-
});
|
|
20961
|
-
console.log('β¨ [SIMPLE GLOBE] Alternative space background set');
|
|
20962
|
-
} catch (e2) {
|
|
20963
|
-
console.log('β οΈ [SIMPLE GLOBE] Could not set any fog configuration');
|
|
20964
|
-
}
|
|
20965
|
-
}
|
|
20966
|
-
|
|
20967
|
-
// Calculate bounds to fit all markers
|
|
20968
|
-
const bounds = new mapboxgl.LngLatBounds();
|
|
20969
|
-
let hasValidCoordinates = false;
|
|
20970
|
-
projects.forEach((project, index) => {
|
|
20971
|
-
var _project$author;
|
|
20972
|
-
console.log("\uD83D\uDCCD [SIMPLE GLOBE] Adding marker ".concat(index, ":"), project);
|
|
20973
|
-
|
|
20974
|
-
// Create marker element based on type
|
|
20975
|
-
const el = document.createElement('div');
|
|
20976
|
-
// Use a scoped class to avoid picking up broad styles like `.map-marker { width:100% }`
|
|
20977
|
-
el.className = 'daf-globe-marker';
|
|
20978
|
-
el.style.cursor = 'pointer';
|
|
20979
|
-
el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
|
|
20980
|
-
el.style.display = 'flex';
|
|
20981
|
-
el.style.alignItems = 'center';
|
|
20982
|
-
el.style.justifyContent = 'center';
|
|
20983
|
-
if (type === "location") {
|
|
20984
|
-
// Location marker - SVG map pin style
|
|
20985
|
-
el.style.width = '28px';
|
|
20986
|
-
el.style.height = '33px';
|
|
20987
|
-
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 ");
|
|
20988
|
-
} else {
|
|
20989
|
-
// Default circular marker style
|
|
20990
|
-
el.style.width = '30px';
|
|
20991
|
-
el.style.height = '30px';
|
|
20992
|
-
el.style.backgroundColor = color;
|
|
20993
|
-
el.style.borderRadius = '50%';
|
|
20994
|
-
el.style.border = '2px solid white';
|
|
20995
|
-
el.style.color = 'white';
|
|
20996
|
-
el.style.fontWeight = 'bold';
|
|
20997
|
-
el.style.fontSize = '14px';
|
|
20998
|
-
el.style.textAlign = 'center';
|
|
20999
|
-
el.style.lineHeight = '1';
|
|
21000
|
-
el.innerHTML = "<span style=\"display: block; line-height: 1;\">".concat(project.percentageCompletion || 0, "</span>");
|
|
21001
|
-
}
|
|
21002
|
-
|
|
21003
|
-
// Create popup content using the same structure as minesitemap
|
|
21004
|
-
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 ");
|
|
21005
|
-
|
|
21006
|
-
// Create popup
|
|
21007
|
-
const popup = new mapboxgl.Popup({
|
|
21008
|
-
offset: 25,
|
|
21009
|
-
closeButton: true,
|
|
21010
|
-
closeOnClick: false
|
|
21011
|
-
}).setHTML(popupContent);
|
|
21012
|
-
|
|
21013
|
-
// Ensure coordinates are valid numbers
|
|
21014
|
-
const lng = Number(project.longitude);
|
|
21015
|
-
const lat = Number(project.latitude);
|
|
21016
|
-
console.log("\uD83D\uDCCD [SIMPLE GLOBE] Marker ".concat(index, " coordinates:"), {
|
|
21017
|
-
lng,
|
|
21018
|
-
lat
|
|
21019
|
-
});
|
|
21020
|
-
|
|
21021
|
-
// Validate coordinates
|
|
21022
|
-
if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
|
|
21023
|
-
console.error("\u274C [SIMPLE GLOBE] Invalid coordinates for project ".concat(index, ":"), {
|
|
21024
|
-
lng,
|
|
21025
|
-
lat
|
|
21026
|
-
});
|
|
21027
|
-
return;
|
|
21028
|
-
}
|
|
21029
|
-
|
|
21030
|
-
// Add coordinates to bounds
|
|
21031
|
-
bounds.extend([lng, lat]);
|
|
21032
|
-
hasValidCoordinates = true;
|
|
21033
|
-
|
|
21034
|
-
// Add marker to map with proper coordinate order [lng, lat]
|
|
21035
|
-
new mapboxgl.Marker(el).setLngLat([lng, lat]).setPopup(popup).addTo(map.current);
|
|
21036
|
-
|
|
21037
|
-
// Add click handler
|
|
21038
|
-
el.addEventListener('click', () => {
|
|
21039
|
-
console.log('π [SIMPLE GLOBE] Marker clicked:', project);
|
|
21040
|
-
onProjectClick(project);
|
|
21041
|
-
});
|
|
21042
|
-
console.log("\u2705 [SIMPLE GLOBE] Marker ".concat(index, " added at:"), [lng, lat]);
|
|
21043
|
-
});
|
|
21044
|
-
|
|
21045
|
-
// Fit map to show all markers if we have valid coordinates
|
|
21046
|
-
if (hasValidCoordinates && !bounds.isEmpty()) {
|
|
21047
|
-
console.log('πΊοΈ [SIMPLE GLOBE] Fitting map to bounds:', bounds);
|
|
21048
|
-
map.current.fitBounds(bounds, {
|
|
21049
|
-
padding: {
|
|
21050
|
-
top: 20,
|
|
21051
|
-
bottom: 20,
|
|
21052
|
-
left: 20,
|
|
21053
|
-
right: 20
|
|
21054
|
-
},
|
|
21055
|
-
maxZoom: 6,
|
|
21056
|
-
duration: 1000
|
|
21057
|
-
});
|
|
21058
|
-
boundsRef.current = bounds;
|
|
21059
|
-
} else {
|
|
21060
|
-
boundsRef.current = null;
|
|
21061
|
-
}
|
|
21062
|
-
});
|
|
21063
|
-
return () => {
|
|
21064
|
-
if (map.current) {
|
|
21065
|
-
map.current.remove();
|
|
21066
|
-
map.current = null;
|
|
21067
|
-
}
|
|
21068
|
-
};
|
|
21069
|
-
}, [projects, onProjectClick, mapConfig]);
|
|
21070
|
-
const zoomIn = () => map.current && map.current.zoomIn();
|
|
21071
|
-
const zoomOut = () => map.current && map.current.zoomOut();
|
|
21072
|
-
const recenter = () => {
|
|
21073
|
-
if (!map.current) return;
|
|
21074
|
-
if (boundsRef.current && !boundsRef.current.isEmpty()) {
|
|
21075
|
-
map.current.fitBounds(boundsRef.current, {
|
|
21076
|
-
padding: {
|
|
21077
|
-
top: 20,
|
|
21078
|
-
bottom: 20,
|
|
21079
|
-
left: 20,
|
|
21080
|
-
right: 20
|
|
21081
|
-
},
|
|
21082
|
-
maxZoom: 6,
|
|
21083
|
-
duration: 800
|
|
21084
|
-
});
|
|
21085
|
-
return;
|
|
21086
|
-
}
|
|
21087
|
-
map.current.easeTo({
|
|
21088
|
-
center: [0, 0],
|
|
21089
|
-
zoom: 3,
|
|
21090
|
-
duration: 800
|
|
21091
|
-
});
|
|
21092
|
-
};
|
|
21093
|
-
const pitchUp = () => {
|
|
21094
|
-
var _map$current$getPitch, _map$current;
|
|
21095
|
-
if (!map.current) return;
|
|
21096
|
-
const next = Math.min((((_map$current$getPitch = (_map$current = map.current).getPitch) === null || _map$current$getPitch === void 0 ? void 0 : _map$current$getPitch.call(_map$current)) || 0) + 10, 85);
|
|
21097
|
-
map.current.setPitch(next);
|
|
21098
|
-
};
|
|
21099
|
-
const pitchDown = () => {
|
|
21100
|
-
var _map$current$getPitch2, _map$current2;
|
|
21101
|
-
if (!map.current) return;
|
|
21102
|
-
const next = Math.max((((_map$current$getPitch2 = (_map$current2 = map.current).getPitch) === null || _map$current$getPitch2 === void 0 ? void 0 : _map$current$getPitch2.call(_map$current2)) || 0) - 10, 0);
|
|
21103
|
-
map.current.setPitch(next);
|
|
21104
|
-
};
|
|
21105
|
-
return /*#__PURE__*/jsxRuntime.jsxs(Style$A, {
|
|
21106
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
21107
|
-
ref: mapContainer,
|
|
21108
|
-
style: {
|
|
21109
|
-
width: '100%',
|
|
21110
|
-
height: '500px',
|
|
21111
|
-
overflow: 'hidden',
|
|
21112
|
-
position: 'relative'
|
|
21113
|
-
}
|
|
21114
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
21115
|
-
className: "map-control-buttons",
|
|
21116
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("button", {
|
|
21117
|
-
type: "button",
|
|
21118
|
-
"aria-label": "Zoom in",
|
|
21119
|
-
onClick: zoomIn,
|
|
21120
|
-
children: "+"
|
|
21121
|
-
}), /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
21122
|
-
type: "button",
|
|
21123
|
-
"aria-label": "Zoom out",
|
|
21124
|
-
onClick: zoomOut,
|
|
21125
|
-
children: "\u2212"
|
|
21126
|
-
}), /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
21127
|
-
type: "button",
|
|
21128
|
-
"aria-label": "Recenter",
|
|
21129
|
-
onClick: recenter,
|
|
21130
|
-
children: "\u25CE"
|
|
21131
|
-
}), /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
21132
|
-
type: "button",
|
|
21133
|
-
"aria-label": "Pitch up",
|
|
21134
|
-
onClick: pitchUp,
|
|
21135
|
-
children: "^"
|
|
21136
|
-
}), /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
21137
|
-
type: "button",
|
|
21138
|
-
"aria-label": "Pitch down",
|
|
21139
|
-
onClick: pitchDown,
|
|
21140
|
-
children: "\u02C5"
|
|
21141
|
-
})]
|
|
21142
|
-
})]
|
|
21143
|
-
});
|
|
21144
|
-
};
|
|
21145
|
-
|
|
21146
20838
|
function WidgetPlaceholder(_ref) {
|
|
21147
20839
|
let {
|
|
21148
20840
|
icon = "",
|
|
@@ -61822,6 +61514,32 @@ function DataPoint(_ref) {
|
|
|
61822
61514
|
});
|
|
61823
61515
|
}
|
|
61824
61516
|
|
|
61517
|
+
const CountryFlag = _ref => {
|
|
61518
|
+
let {
|
|
61519
|
+
countryName,
|
|
61520
|
+
code,
|
|
61521
|
+
hasTooltip = true
|
|
61522
|
+
} = _ref;
|
|
61523
|
+
return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
|
|
61524
|
+
title: countryName,
|
|
61525
|
+
visible: hasTooltip || !countryName,
|
|
61526
|
+
children: /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
61527
|
+
alt: code,
|
|
61528
|
+
style: {
|
|
61529
|
+
width: 24,
|
|
61530
|
+
borderRadius: 100,
|
|
61531
|
+
height: 24
|
|
61532
|
+
},
|
|
61533
|
+
src: "https://flagcdn.com/w80/".concat(code.toLowerCase(), ".png")
|
|
61534
|
+
})
|
|
61535
|
+
});
|
|
61536
|
+
};
|
|
61537
|
+
CountryFlag.propTypes = {
|
|
61538
|
+
countryName: PropTypes__default["default"].string.isRequired,
|
|
61539
|
+
code: PropTypes__default["default"].string.isRequired,
|
|
61540
|
+
hasTooltip: PropTypes__default["default"].bool
|
|
61541
|
+
};
|
|
61542
|
+
|
|
61825
61543
|
exports.AccountTable = AccountTable;
|
|
61826
61544
|
exports.ActionWidget = ActionWidget;
|
|
61827
61545
|
exports.AdminDashboard = AdminDashboard;
|
|
@@ -61839,6 +61557,7 @@ exports.Button = DafButton;
|
|
|
61839
61557
|
exports.CarouselWidget = CarouselWidget;
|
|
61840
61558
|
exports.ColumnChart = ColumnChart;
|
|
61841
61559
|
exports.ComponentWithFocus = ComponentWithFocus;
|
|
61560
|
+
exports.CountryFlag = CountryFlag;
|
|
61842
61561
|
exports.CustomIcon = CustomIcon;
|
|
61843
61562
|
exports.DafDashboardDetails = Details;
|
|
61844
61563
|
exports.DafTheme = DafTheme;
|
|
@@ -61916,7 +61635,6 @@ exports.SelectFiltersTimeFrame = Timeframe;
|
|
|
61916
61635
|
exports.SettingsPopover = SettingsPopover;
|
|
61917
61636
|
exports.Sidenav = Sidenav;
|
|
61918
61637
|
exports.SidenavMenu = SidenavMenu;
|
|
61919
|
-
exports.SimpleGlobe = SimpleGlobe;
|
|
61920
61638
|
exports.StackChart = StackChart;
|
|
61921
61639
|
exports.StakeholderMappings = index$1;
|
|
61922
61640
|
exports.Steps = DAFSteps;
|
package/dist/utils/index.js
CHANGED
|
@@ -3479,13 +3479,13 @@ const renderTooltipJsx = ({
|
|
|
3479
3479
|
}
|
|
3480
3480
|
})
|
|
3481
3481
|
}), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
|
|
3482
|
-
title: item.label,
|
|
3482
|
+
title: item.tooltipLabel || item.label,
|
|
3483
3483
|
children: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3484
3484
|
className: "daf-tooltip-name",
|
|
3485
3485
|
children: item.label
|
|
3486
3486
|
})
|
|
3487
3487
|
}), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
|
|
3488
|
-
title: item.value,
|
|
3488
|
+
title: item.tooltipValue || item.value,
|
|
3489
3489
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3490
3490
|
style: {
|
|
3491
3491
|
height: "20px",
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@ import Globe from "./index";
|
|
|
2
2
|
import ThemeLayout from "../../ThemeLayout";
|
|
3
3
|
import Widget from "../Widget";
|
|
4
4
|
|
|
5
|
-
import * as configs from "
|
|
5
|
+
import * as configs from "../Map/storyConfig";
|
|
6
6
|
|
|
7
7
|
export default {
|
|
8
8
|
title: "Dashboard/Globe",
|
|
@@ -29,14 +29,14 @@ export default {
|
|
|
29
29
|
export const DefaultGlobe = {
|
|
30
30
|
name: "Default Globe",
|
|
31
31
|
args: {
|
|
32
|
-
...configs.
|
|
32
|
+
...configs.DefaultMapConfig,
|
|
33
33
|
},
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
export const SatelliteGlobe = {
|
|
37
37
|
name: "Satellite Globe",
|
|
38
38
|
args: {
|
|
39
|
-
...configs.
|
|
39
|
+
...configs.DefaultMapConfig,
|
|
40
40
|
isSatellite: true,
|
|
41
41
|
},
|
|
42
42
|
};
|
|
@@ -44,19 +44,11 @@ export const SatelliteGlobe = {
|
|
|
44
44
|
export const TerritoryGlobe = {
|
|
45
45
|
name: "Territory Globe",
|
|
46
46
|
args: {
|
|
47
|
-
...configs.
|
|
47
|
+
...configs.TerritoryMapConfig,
|
|
48
48
|
type: "territory",
|
|
49
49
|
},
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
-
export const StakeholderGlobe = {
|
|
53
|
-
name: "Stakeholder Globe",
|
|
54
|
-
args: {
|
|
55
|
-
...configs.StakeholderGlobeConfig,
|
|
56
|
-
type: "stakeholder",
|
|
57
|
-
},
|
|
58
|
-
};
|
|
59
|
-
|
|
60
52
|
export const EventGlobe = {
|
|
61
53
|
name: "Event Globe",
|
|
62
54
|
args: {
|
|
@@ -65,27 +57,10 @@ export const EventGlobe = {
|
|
|
65
57
|
},
|
|
66
58
|
};
|
|
67
59
|
|
|
68
|
-
export const ChainGlobe = {
|
|
69
|
-
name: "Supply Chain Globe",
|
|
70
|
-
args: {
|
|
71
|
-
...configs.ChainGlobeConfig,
|
|
72
|
-
type: "chain",
|
|
73
|
-
},
|
|
74
|
-
};
|
|
75
|
-
|
|
76
60
|
export const LocationGlobe = {
|
|
77
61
|
name: "Location Globe",
|
|
78
62
|
args: {
|
|
79
|
-
...configs.
|
|
63
|
+
...configs.DefaultMapConfig,
|
|
80
64
|
type: "location",
|
|
81
65
|
},
|
|
82
66
|
};
|
|
83
|
-
|
|
84
|
-
export const ProjectGlobe = {
|
|
85
|
-
name: "Project Globe",
|
|
86
|
-
args: {
|
|
87
|
-
...configs.ProjectGlobeConfig,
|
|
88
|
-
type: "project",
|
|
89
|
-
},
|
|
90
|
-
};
|
|
91
|
-
|