Add chart rendering

wri · Dec 19, 2024 · 515a0e1 · 515a0e1
1 parent 8ea31ad
commit 515a0e1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 21 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,12 @@
 import { Box, Grid, Text } from "@chakra-ui/react";
+import { useAtomValue } from "jotai";
 import Providers from "./Providers";
 import { ChatInput, ChatOutput, Map } from "./components";
+import { chartDataAtom } from "./atoms";
+import BarChart from "./components/BarChart";
 
 function App() {
+  const chartData = useAtomValue(chartDataAtom);
   return (
     <Providers>
       <Grid
@@ -34,9 +38,16 @@ function App() {
               <ChatInput />
             </Box>
           </Grid>
-          <Box borderRadius="lg" shadow="md" overflow="hidden">
-            <Map />
-          </Box>
+          <Grid templateRows={chartData ? "1fr 250px" : "1fr"} gap="2">
+              <Box borderRadius="lg" shadow="md" overflow="hidden">
+                <Map />
+              </Box>
+              {chartData && (
+                <Box bgColor="white" borderRadius="lg" shadow="md" overflow="hidden">
+                  <BarChart data={chartData} />
+                </Box>
+              )}
+          </Grid>
         </Grid>
       </Grid>
     </Providers>

diff --git a/src/atoms.js b/src/atoms.js
@@ -5,6 +5,7 @@ export const mapLayersAtom = atom([]);
 export const chatHistoryAtom = atom([]);
 export const sessionIdAtom = atom(uuidv4());
 export const isLoadingAtom = atom(false);
+export const chartDataAtom = atom();
 
 function makeInputMessage(query) {
   return {

diff --git a/src/components/BarChart.jsx b/src/components/BarChart.jsx
@@ -14,8 +14,8 @@ const BarChart = ({ data }) => {
     const tooltip = d3.select(tooltipRef.current);
 
     const width = containerRef.current?.offsetWidth || 250;
-    const height = 250;
-    const margin = { top: 20, right: 20, bottom: 20, left: 50 };
+    const height = 230;
+    const margin = { top: 20, right: 20, bottom: 20, left: 60 };
 
     const x = d3.scaleBand()
       .domain(data.map(d => d.category))
@@ -32,14 +32,14 @@ const BarChart = ({ data }) => {
       .attr("transform", `translate(0,${height - margin.bottom})`)
       .call(d3.axisBottom(x))
       .selectAll("text")
-      .style("text-anchor", "end")
-      .attr("transform", "rotate(-45)")
       .style("font-size", "12px");
 
     // Add y-axis
     svg.append("g")
       .attr("transform", `translate(${margin.left},0)`)
-      .call(d3.axisLeft(y));
+      .call(d3.axisLeft(y))
+      .selectAll("text")
+      .style("font-size", "12px");
 
     // Add bars
     svg.append("g")
@@ -71,7 +71,7 @@ const BarChart = ({ data }) => {
       <svg
         ref={chartRef}
         width={containerRef.current?.offsetWidth || 250}
-        height={400}
+        height={230}
       />
       <div
         ref={tooltipRef}

diff --git a/src/components/MessageOut/MessageTool.jsx b/src/components/MessageOut/MessageTool.jsx
@@ -1,11 +1,9 @@
 import T from "prop-types";
-import { Box, Button }  from "@chakra-ui/react";
+import { Button }  from "@chakra-ui/react";
 import MessageOutWrapper from "./wrapper";
-import MiniMap from "../MiniMap";
-import BarChart from "../BarChart";
 
 import { useSetAtom } from "jotai";
-import { mapLayersAtom } from "../../atoms";
+import { mapLayersAtom, chartDataAtom } from "../../atoms";
 
 function ContextLayer({message}) {
   return (<p>Using context layer <b>{message}</b></p>);
@@ -61,20 +59,33 @@ function DistAlertsTool({message, artifact}) {
   // artifact is geojson object to render to a map
 
   const setMapLayers = useSetAtom(mapLayersAtom);
+  const setChartData = useSetAtom(chartDataAtom);
+
+  const numDisturbances = artifact ? artifact?.features.length : 0;
+
+  if (numDisturbances === 0) {
+    return <p>No disturbances found in the region.</p>;
+  }
 
   const json = JSON.parse(message);
   const keys = Object.keys(json);
   const data = Object.entries(json[keys[0]]).map(([category, value]) => ({ category, value }));
+
   return (
     <>
-      <h2>Dist alerts tool</h2>
-      <h3>Dist alerts</h3>
-      <BarChart data={data} />
-      <h3>Map</h3>
-      <Box height="200px" position="relative">
-        <MiniMap artifact={artifact} />
-      </Box>
-      <Button size="xs" mt="4" onClick={() => setMapLayers(() => [artifact])}>Show on map</Button>
+      <p>Found {numDisturbances} disturbances in the region.</p>
+      <Button
+        size="xs"
+        mt="4"
+        borderRadius="full"
+        colorPalette="blue"
+        onClick={() => {
+          setMapLayers(() => [artifact]);
+          setChartData(data);
+        }}
+      >
+        Show on map
+      </Button>
     </>
   );
 }