test-graph-view | integration with dev

frontend/src/Components/RoadDetails/MapArea.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
 import ImageGallery from './ImageGallery';
 import MapWrapper from '../Map/MapWrapper';
+import ForceMapUpdate from '../Map/ForceMapUpdate';
 
+interface Props {
+  triggerUpdate: number;
+}
 /**
  * The map area op the road details(road inspect) page
  */
-const MapArea: React.FC = () => {
+const MapArea: React.FC<Props> = ({ triggerUpdate }) => {
   return (
     <div className="map-area">
       <div className="map_area" style={{ height: '100%' }}>
-        <MapWrapper></MapWrapper>
+        <MapWrapper>
+          <ForceMapUpdate triggerUpdate={triggerUpdate} />
+        </MapWrapper>
       </div>
       <div className="imageGallery_container">
         <ImageGallery /> {/* Use the imageGallery component */}

frontend/src/Components/RoadDetails/RoadImage.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 const maproadStyles = {
   margin: 0,
   padding: 20,
-  color: '#333',
 };
 
 const road_area = <h1 style={maproadStyles}>Road surface image</h1>;

frontend/src/css/road_details.css

@@ -13,7 +13,7 @@
 .road-image,
 .map-area {
   /* background-color: #eee; Example color for the middle area */
-  height: 60vh; /* Occupying half of the page vertically */
+  height: 100%; /* Occupying half of the page vertically */
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -81,6 +81,14 @@
   transition: 0.4s;
 }
 
+.road-conditions-graph {
+  position: relative;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 /* Style to change the background color when switched on */
 input:checked + .slider {
   background-color: #4caf50;

frontend/src/pages/RoadDetails.tsx

@@ -1,19 +1,77 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import '../css/road_details.css'; // Import the CSS file
 import MapArea from '../Components/RoadDetails/MapArea';
 import RoadImage from '../Components/RoadDetails/RoadImage';
 import TopBar from '../Components/RoadDetails/TopBar';
+import Split from 'react-split';
+import ConditionsGraph from '../Components/RoadDetails/ConditionsGraph';
+import { ChartData } from 'chart.js';
+import { getConditionsWay } from '../queries/conditions';
+import '../css/split.css';
 
 const RoadDetails = () => {
   const [showMapImageMode, setShowRoadImageMode] = useState(false);
+  const [wayData, setWayData] =
+    useState<ChartData<'scatter', number[], number>>();
+  const [triggerUpdate, setTriggerUpdate] = useState<number>(0);
+
+  useEffect(() => {
+    getConditionsWay('0cba0666-d75e-45bd-9da6-62ef0fe9544c', (wc) => {
+      console.log(wc);
+      setWayData({
+        labels: wc.map((p) => p.way_dist * 100),
+        datasets: [
+          {
+            //@ts-ignore
+            type: 'line' as const,
+            label: 'KPI',
+            borderColor: 'rgb(255, 99, 132)',
+            borderWidth: 2,
+            fill: false,
+            tension: 0.2,
+            data: wc.map((p) => p.KPI),
+            yAxisID: 'KPI',
+          },
+          {
+            //@ts-ignore
+            type: 'line' as const,
+            label: 'DI',
+            borderColor: 'rgb(120, 245, 23)',
+            borderWidth: 2,
+            fill: false,
+            tension: 0.2,
+            data: wc.map((p) => p.DI),
+            yAxisID: 'DI',
+          },
+        ],
+      });
+    });
+  }, []);
 
   return (
     <div>
       <TopBar isToggleOn={setShowRoadImageMode} />
-      {showMapImageMode ? <RoadImage /> : <MapArea />}
-      {/* TODO: putting plots here */}
-      <div className="plot-area">{/* Content for the plot area */}</div>
+      <Split
+        className="split"
+        direction="vertical"
+        sizes={[45, 55]}
+        minSize={150}
+        snapOffset={10}
+        onDragEnd={() => {
+          setTriggerUpdate((prev) => prev + 1);
+        }}
+      >
+        <div>
+          {showMapImageMode ? (
+            <RoadImage />
+          ) : (
+            <MapArea triggerUpdate={triggerUpdate} />
+          )}
+        </div>
+        <ConditionsGraph data={wayData} />
+      </Split>
+      ,
     </div>
   );
 };