Add map to Data Insights

HACC-2023 · Nov 9, 2023 · 3ce55ee · 3ce55ee
1 parent 67314b4
commit 3ce55ee
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/my-app/src/components/map/LocationAggregatorMap.jsx b/my-app/src/components/map/LocationAggregatorMap.jsx
@@ -8,11 +8,7 @@ import PropTypes from "prop-types";
 import { FlyToInterpolator } from "deck.gl";
 
 // import map config
-import {
-  lightingEffect,
-  material,
-  colorRange,
-} from "@/lib/mapconfig";
+import { lightingEffect, material, colorRange } from "@/lib/mapconfig";
 import { ISLANDS_CENTER_COORDINATES } from "@/constants/constants";
 
 const LocationAggregatorMap = ({
@@ -49,7 +45,6 @@ const LocationAggregatorMap = ({
     //   intensity: 1,
     //   threshold: 0.03
     // })
-
   ];
   const [initialViewState, setInitialViewState] = useState({
     longitude: -157,
@@ -71,17 +66,17 @@ const LocationAggregatorMap = ({
     });
   }, []);
 
-  function getTooltip({object}) {
+  function getTooltip({ object }) {
     if (!object) {
       return null;
     }
     const lat = object.position[1];
     const lng = object.position[0];
     const count = object.points.length;
-  
+
     return `\
-      latitude: ${Number.isFinite(lat) ? lat.toFixed(6) : ''}
-      longitude: ${Number.isFinite(lng) ? lng.toFixed(6) : ''}
+      latitude: ${Number.isFinite(lat) ? lat.toFixed(6) : ""}
+      longitude: ${Number.isFinite(lng) ? lng.toFixed(6) : ""}
       ${count} Reports`;
   }
 
@@ -112,13 +107,11 @@ const LocationAggregatorMap = ({
           onSelectIsland({
             longitude: mapInfo.long,
             latitude: mapInfo.lat,
-            zoom: mapInfo.zoom
-          })
+            zoom: mapInfo.zoom,
+          });
         }}
       >
-        <option disabled>
-          Select an Island
-        </option>
+        <option disabled>Select an Island</option>
         {Object.values(ISLANDS_CENTER_COORDINATES).map((island) => (
           <option key={island.name} value={JSON.stringify(island.mapInfo)}>
             {island.name}

diff --git a/my-app/src/pages/data-insights/index.jsx b/my-app/src/pages/data-insights/index.jsx
@@ -1,15 +1,34 @@
-import { useState } from "react";
-import CityMap from "@/components/visualizations/CityMapBox";
+import { useState, useEffect } from "react";
+// import CityMap from "@/components/visualizations/CityMapBox";
 import IslandBarChart from "@/components/visualizations/IslandBarChart";
 import PieChart from "@/components/visualizations/PieChart";
 import ReportTimesSeries from "@/components/visualizations/ReportTimeSeries";
 import OrganizationFunnel from "@/components/visualizations/OrganizationFunnel";
 import ComponentsPieChart from "@/components/visualizations/ComponentsPieChart";
 import DisposalBarChart from "@/components/visualizations/DisposalBarChart";
 import SankeyChart from "@/components/visualizations/SankeyChart";
+import dynamic from "next/dynamic";
+
+const LocationAggregatorMap = dynamic(
+  () => import("@/components/map/LocationAggregatorMap"),
+  { ssr: false }
+);
 
 const DataInsights = () => {
   const [activeTab, setActiveTab] = useState(0);
+  const [coordinates, setCoordinates] = useState([]);
+
+  useEffect(() => {
+    const getData = async () => {
+      const res = await fetch('/api/mongo/event/all');
+      const data = await res.json();
+      const coords = data.map((item) => {
+        return { COORDINATES: [item.mapLong, item.mapLat] };
+      });
+      setCoordinates(coords);
+    };
+    getData().then(r => console.log('Fetched locations'));
+  }, []);
 
   const tabContent = [
     <div key="tab1">
@@ -18,7 +37,8 @@ const DataInsights = () => {
           <h6 className="text-lg font-semibold text-gray-600 mb-2">
             Aggregated Reports By City
           </h6>
-          <CityMap />
+          {/* <CityMap /> */}
+          <LocationAggregatorMap data={coordinates} />
         </div>
         <div className="w-2/4 pl-4">
           <h6 className="text-lg font-semibold text-gray-600 mb-4">