Merge pull request #275 from chrishiguto/fix/data-viz-optional-dependencies

fix: data viz optional dependencies

Author: andreneto97

packages/react-data-viz/package.json

@@ -21,21 +21,21 @@
   "optionalDependencies": {
     "@cubejs-client/core": "^1.0.0",
     "@cubejs-client/react": "^1.0.0",
-    "leaflet": "^1.9.4",
+    "react-leaflet": "^4.0.0",
+    "@react-leaflet/core": "^2.0.0",
+    "leaflet": "^1.8.0",
     "leaflet.markercluster": "^1.5.3"
   },
   "peerDependencies": {
     "@cubejs-client/core": "^1.0.0",
     "@cubejs-client/react": "^1.0.0",
-    "leaflet": "^1.9.4",
+    "react-leaflet": "^4.0.0",
+    "@react-leaflet/core": "^2.0.0",
+    "leaflet": "^1.8.0",
     "leaflet.markercluster": "^1.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "dependencies": {
-    "@react-leaflet/core": "^3.0.0",
-    "react-leaflet": "4.2.1"
-  },
   "devDependencies": {
     "@types/leaflet": "^1",
     "@types/leaflet.markercluster": "^1",

packages/react-data-viz/src/maps/Map.tsx

@@ -1,7 +1,7 @@
+import { PropsWithChildren } from 'react';
 import { MapContainer, MapContainerProps, TileLayer } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
-import { PropsWithChildren } from 'react';
 import { LatLngTuple } from 'leaflet';
 
 const GLOBE_CENTER: LatLngTuple = [0, 0];

packages/react-data-viz/src/maps/MapMarkerCluster.tsx

@@ -14,20 +14,22 @@ type Position = {
 export type MapMarkerClusterProps = {
   data: Position[];
   markerClusterProps?: MarkerClusterGroupOptions;
+  loading?: boolean;
 } & MapContainerProps;
 
 const MapMarkerCluster = ({
   data,
   markerClusterProps,
+  loading = false,
   ...props
 }: MapMarkerClusterProps) => (
   <Map {...props}>
     <MarkerClusterGroup showCoverageOnHover={false} {...markerClusterProps}>
-      {data.map((address, index) => {
+      {data?.map((address, index) => {
         const { lat, lon } = address;
 
         // Loose equality to check for `undefined` or `null`
-        if (lat == undefined || lon == undefined) {
+        if (lat == undefined || lon == undefined || loading) {
           return null;
         }