checkpointing current state of branch

RENCI · May 6, 2024 · d96611e · d96611e
1 parent a317555
commit d96611e
Show file tree

Hide file tree

Showing 4 changed files with 273 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,7 +63,8 @@
     "react-leaflet": "^4.2.1",
     "react-map-gl": "^7.1.7",
     "react-query": "^3.39.3",
-    "react-timeago": "^7.2.0"
+    "react-timeago": "^7.2.0",
+    "recharts": "^2.12.6"
   },
   "overrides": {
     "json5": "^2.2.2",

diff --git a/src/components/map/observation-dialog.js b/src/components/map/observation-dialog.js
@@ -3,12 +3,58 @@ import PropTypes from 'prop-types';
 import BaseFloatingDialog from "@utils/base-floating-dialog";
 import {useLayers} from "@context";
 import ObservationChart from "@utils/observation-chart";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 // define the properties of this component
 ObservationDialog.propTypes = {
   obs_data: PropTypes.object
 };
 
+const data = [
+  {
+    name: 'Page A',
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: 'Page B',
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: 'Page C',
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: 'Page D',
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: 'Page E',
+    uv: 1890,
+    pv: 4800,
+    amt: 2181,
+  },
+  {
+    name: 'Page F',
+    uv: 2390,
+    pv: 3800,
+    amt: 2500,
+  },
+  {
+    name: 'Page G',
+    uv: 3490,
+    pv: 4300,
+    amt: 2100,
+  },
+];
+
 export default function ObservationDialog(obs_data) {
 
     // get references to the observation data/list
@@ -23,7 +69,21 @@ export default function ObservationDialog(obs_data) {
 
         return (
             <Fragment>
-                <ObservationChart  {...args}/>
+                <ResponsiveContainer width="100%" height="100%">
+                    <LineChart
+                        width={500}
+                        height={300}
+                        data={data}
+                        margin={{
+                            top: 5,
+                            right: 30,
+                            left: 20,
+                            bottom: 5,
+                        }}
+                    >
+                    </LineChart>
+                </ResponsiveContainer>
+                {/*<ObservationChart {...args} />*/}
             </Fragment>
         );
     };