test-graph-view | removed dummy data, map to be fixed

DTU-SE-Group-D · Oct 3, 2023 · fea2c2c · fea2c2c
1 parent 495796d
commit fea2c2c
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 189 deletions.
diff --git a/frontend/src/Components/RoadConditions/ConditionsGraph.tsx b/frontend/src/Components/RoadConditions/ConditionsGraph.tsx
@@ -1,132 +1,25 @@
-// import { FC, useEffect, useMemo, useRef } from 'react';
-// import {
-//   ActiveElement,
-//   CategoryScale,
-//   Chart,
-//   ChartData,
-//   ChartEvent,
-//   ChartOptions,
-//   ChartTypeRegistry,
-//   Legend,
-//   LinearScale,
-//   LineElement,
-//   Plugin,
-//   PointElement,
-//   Title,
-//   Tooltip,
-// } from 'chart.js';
-// import { Line } from 'react-chartjs-2';
-//
-// import { ConditionType } from '../../models/graph';
-//
-// Chart.register(
-//   CategoryScale,
-//   LinearScale,
-//   PointElement,
-//   LineElement,
-//   Title,
-//   Tooltip,
-//   Legend,
-// );
-//
-// const options = ({ name, min, max }: ConditionType): ChartOptions<'line'> => ({
-//   responsive: true,
-//   maintainAspectRatio: false,
-//   plugins: {
-//     legend: {
-//       position: 'top' as const,
-//       labels: { color: 'white' },
-//     },
-//   },
-//   scales: {
-//     x: {
-//       title: {
-//         display: true,
-//         text: 'distance (m)',
-//       },
-//       ticks: {
-//         maxTicksLimit: 30,
-//         stepSize: 200,
-//         callback: (tick: string | number) =>
-//           Math.round(parseFloat(tick.toString())),
-//       },
-//     },
-//     y: {
-//       title: {
-//         display: true,
-//         text: name,
-//       },
-//       min: min,
-//       max: max,
-//     },
-//   },
-// });
-//
-// interface Props {
-//   type: ConditionType;
-//   data: ChartData<'line', number[], number> | undefined;
-// }
-//
-// const ConditionsGraph: FC<Props> = ({ type, data }) => {
-//   const ref = useRef<Chart<'line', number[], number>>(null);
-//
-//   useEffect(() => {
-//     if (ref.current === null) return;
-//     const chart = ref.current;
-//     chart.update();
-//   }, [ref, data]);
-//
-//   // attach events to the graph options
-//   const graphOptions: ChartOptions<'line'> = useMemo(
-//     () => ({
-//       ...options(type),
-//       onClick: (
-//         event: ChartEvent,
-//         elts: ActiveElement[],
-//         _chart: Chart<keyof ChartTypeRegistry, number[], unknown>,
-//       ) => {
-//         if (elts.length === 0) return;
-//         const elt = elts[0]; // doesnt work if multiple datasets
-//         const pointIndex = elt.index;
-//         console.log(pointIndex, event, elts);
-//       },
-//     }),
-//     [],
-//   );
-//
-//   const plugins: Plugin<'line'>[] = [
-//     {
-//       id: 'id',
-//     },
-//   ];
-//
-//   return (
-//     <div className="road-conditions-graph">
-//       {data && (
-//         <Line ref={ref} data={data} options={graphOptions} plugins={plugins} />
-//       )}
-//     </div>
-//   );
-// };
-//
-// export default ConditionsGraph;
-//
-import '../../css/road_conditions.css';
-import { Line } from 'react-chartjs-2';
-
+import { FC, useEffect, useMemo, useRef } from 'react';
 import {
-  Chart as ChartJS,
+  ActiveElement,
   CategoryScale,
+  Chart,
+  ChartData,
+  ChartEvent,
+  ChartOptions,
+  ChartTypeRegistry,
+  Legend,
   LinearScale,
-  PointElement,
   LineElement,
+  Plugin,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
 } from 'chart.js';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+
+import { ConditionType } from '../../models/graph';
 
-ChartJS.register(
+Chart.register(
   CategoryScale,
   LinearScale,
   PointElement,
@@ -136,79 +29,84 @@ ChartJS.register(
   Legend,
 );
 
-const dummyData = {
-  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-  datasets: [
-    {
-      label: 'Sample Line Chart',
-      data: [12, 19, 3, 5, 2, 3, 10],
-      fill: false,
-      backgroundColor: 'rgba(75,192,192,0.2)',
-      borderColor: 'rgba(75,192,192,1)',
+const options = ({ name, min, max }: ConditionType): ChartOptions<'line'> => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: 'top' as const,
+      labels: { color: 'white' },
     },
-  ],
-};
-console.log(dummyData);
-
-const colorCode = '#1478BD';
-// @ts-ignore
-const state = {
-  data: {
-    labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
-    datasets: [
-      {
-        backgroundColor: colorCode,
-        borderColor: colorCode,
-        borderWidth: 2,
-        data: [65, 59, 80, 81, 56, 65, 59, 80, 81, 56, 40, 56],
-      },
-    ],
   },
-  options: {
-    plugins: {
-      legend: {
+  scales: {
+    x: {
+      title: {
         display: true,
-        label: 'data',
+        text: 'distance (m)',
       },
-    },
-    scales: {
-      x: {
-        grid: {
-          display: false,
-        },
-        beginAtZero: false,
-        ticks: {
-          color: colorCode,
-        },
+      ticks: {
+        maxTicksLimit: 30,
+        stepSize: 200,
+        callback: (tick: string | number) =>
+          Math.round(parseFloat(tick.toString())),
       },
-      y: {
-        grid: {
-          display: false,
-        },
-        beginAtZero: true,
-        ticks: {
-          color: colorCode,
-        },
+    },
+    y: {
+      title: {
+        display: true,
+        text: name,
       },
+      min: min,
+      max: max,
     },
   },
-};
+});
 
-const ConditionsGraph: React.FC = () => {
-  return (
-    <div className="road-conditions-graph">
-      <Line data={state.data} options={state.options} />
-    </div>
+interface Props {
+  type: ConditionType;
+  data: ChartData<'line', number[], number> | undefined;
+}
+
+const ConditionsGraph: FC<Props> = ({ type, data }) => {
+  const ref = useRef<Chart<'line', number[], number>>(null);
+
+  useEffect(() => {
+    if (ref.current === null) return;
+    const chart = ref.current;
+    chart.update();
+  }, [ref, data]);
+
+  // attach events to the graph options
+  const graphOptions: ChartOptions<'line'> = useMemo(
+    () => ({
+      ...options(type),
+      onClick: (
+        event: ChartEvent,
+        elts: ActiveElement[],
+        _chart: Chart<keyof ChartTypeRegistry, number[], unknown>,
+      ) => {
+        if (elts.length === 0) return;
+        const elt = elts[0]; // doesnt work if multiple datasets
+        const pointIndex = elt.index;
+        console.log(pointIndex, event, elts);
+      },
+    }),
+    [],
   );
-};
 
-/*return (
+  const plugins: Plugin<'line'>[] = [
+    {
+      id: 'id',
+    },
+  ];
+
+  return (
     <div className="road-conditions-graph">
-      {/!*<h1>MARCO WAS HERE</h1>*!/}
-      {/!*<h1>Line Chart Example</h1>*!/}
-      <Line data={state.data} options={state.options} />
+      {data && (
+        <Line ref={ref} data={data} options={graphOptions} plugins={plugins} />
+      )}
     </div>
   );
-};*/
+};
 
 export default ConditionsGraph;
diff --git a/frontend/src/Components/RoadConditions/ConditionsMap.tsx b/frontend/src/Components/RoadConditions/ConditionsMap.tsx
@@ -3,7 +3,6 @@ import { ChartData } from 'chart.js';
 import MapWrapper from '../Map/MapWrapper';
 import Ways from './Ways';
 import { FC, useCallback, useRef } from 'react';
-import useSize from '../../hooks/useSize';
 import { getConditions } from '../../queries/conditions';
 import { Condition } from '../../models/path';
 import '../../css/road_conditions.css';

diff --git a/frontend/src/css/line_graph.css b/frontend/src/css/line_graph.css
diff --git a/frontend/src/css/map.css b/frontend/src/css/map.css
@@ -5,7 +5,6 @@
 
 .leaflet-container {
   height: 100%;
-  /*height: 174%;*/
 }
 
 .map-zoom {

diff --git a/frontend/src/css/split.css b/frontend/src/css/split.css
@@ -2,9 +2,6 @@
     height: calc(100vh - var(--navbar-height));
 }
 
-
-
-
 .gutter {
     background-color: #eee;
     background-repeat: no-repeat;

diff --git a/frontend/src/pages/RoadConditions.tsx b/frontend/src/pages/RoadConditions.tsx
@@ -10,7 +10,7 @@ import Split from 'react-split';
 import '../css/split.css';
 import '../css/road_conditions.css';
 import { ConditionType } from '../models/graph';
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 //this is to visualise the Road Conditions (GP) map
 const RoadConditions = () => {
@@ -31,12 +31,13 @@ const RoadConditions = () => {
       <Split
         className="split"
         direction="vertical"
+        sizes={[45, 55]}
         minSize={150}
         snapOffset={10}
+        // dragInterval={50}
       >
         <ConditionsMap type={type} setWayData={setWayData} />
-        {/*<ConditionsGraph type={type} data={wayData} />**/}
-        <ConditionsGraph />
+        <ConditionsGraph type={type} data={wayData} />
       </Split>
     </GraphProvider>
   );