test-graph-view | updated backhand query + graph showing correct valu…

…es, Split to be reviewed
DTU-SE-Group-D · Oct 5, 2023 · ac9a3a0 · ac9a3a0
1 parent e0867cd
commit ac9a3a0
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 12 deletions.
diff --git a/backend/src/conditions/rc.service.ts b/backend/src/conditions/rc.service.ts
@@ -65,9 +65,9 @@ export class RCService {
     type: string,
   ): Promise<Condition[]> {
     return Conditions(this.knex_liramap)
-      .select('fk_way_id', 'type', 'value', 'compute_time')
+      .select('distance01 as way_dist', 'value')
       .where({ type: type, fk_way_id: dbId })
-      .orderBy('compute_time');
+      .orderBy('distance01');
   }
 
   async getZoomConditions(

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -19,6 +19,7 @@ module.exports = {
   },
   ignorePatterns: ['.eslintrc.js'],
   rules: {
+    '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',

diff --git a/frontend/src/Components/RoadConditions/ConditionsGraph.tsx b/frontend/src/Components/RoadConditions/ConditionsGraph.tsx
@@ -15,7 +15,7 @@ import {
   Title,
   Tooltip,
 } from 'chart.js';
-import { Line } from 'react-chartjs-2';
+import { Scatter } from 'react-chartjs-2';
 
 import { ConditionType } from '../../models/graph';
 
@@ -28,8 +28,55 @@ Chart.register(
   Tooltip,
   Legend,
 );
+//const colorCode = '#1478BD';
 
-const options = ({ name, min, max }: ConditionType): ChartOptions<'line'> => ({
+// const dummyData = {
+//   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: {
+//         display: true,
+//         label: 'data',
+//       },
+//     },
+//     scales: {
+//       x: {
+//         grid: {
+//           display: false,
+//         },
+//         beginAtZero: false,
+//         ticks: {
+//           color: colorCode,
+//         },
+//       },
+//       y: {
+//         grid: {
+//           display: false,
+//         },
+//         beginAtZero: true,
+//         ticks: {
+//           color: colorCode,
+//         },
+//       },
+//     },
+//   },
+// };
+
+const options = ({
+  name,
+  min,
+  max,
+}: ConditionType): ChartOptions<'scatter'> => ({
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
@@ -64,11 +111,11 @@ const options = ({ name, min, max }: ConditionType): ChartOptions<'line'> => ({
 
 interface Props {
   type: ConditionType;
-  data: ChartData<'line', number[], number> | undefined;
+  data: ChartData<'scatter', number[], number> | undefined;
 }
 
 const ConditionsGraph: FC<Props> = ({ type, data }) => {
-  const ref = useRef<Chart<'line', number[], number>>(null);
+  const ref = useRef<Chart<'scatter', number[], number>>(null);
 
   useEffect(() => {
     if (ref.current === null) return;
@@ -77,7 +124,7 @@ const ConditionsGraph: FC<Props> = ({ type, data }) => {
   }, [ref, data]);
 
   // attach events to the graph options
-  const graphOptions: ChartOptions<'line'> = useMemo(
+  const graphOptions: ChartOptions<'scatter'> = useMemo(
     () => ({
       ...options(type),
       onClick: (
@@ -94,7 +141,7 @@ const ConditionsGraph: FC<Props> = ({ type, data }) => {
     [],
   );
 
-  const plugins: Plugin<'line'>[] = [
+  const plugins: Plugin<'scatter'>[] = [
     {
       id: 'id',
     },
@@ -103,7 +150,12 @@ const ConditionsGraph: FC<Props> = ({ type, data }) => {
   return (
     <div className="road-conditions-graph">
       {data && (
-        <Line ref={ref} data={data} options={graphOptions} plugins={plugins} />
+        <Scatter
+          ref={ref}
+          data={data}
+          options={graphOptions}
+          plugins={plugins}
+        />
       )}
     </div>
   );

diff --git a/frontend/src/Components/RoadConditions/ConditionsMap.tsx b/frontend/src/Components/RoadConditions/ConditionsMap.tsx
@@ -10,7 +10,7 @@ import '../../css/road_conditions.css';
 interface Props {
   type: ConditionType;
   setWayData: React.Dispatch<
-    React.SetStateAction<ChartData<'line', number[], number> | undefined>
+    React.SetStateAction<ChartData<'scatter', number[], number> | undefined>
   >;
 }
 
@@ -28,6 +28,7 @@ const ConditionsMap: FC<Props> = ({ type, setWayData }) => {
         labels: wc.map((p) => p.way_dist * way_length),
         datasets: [
           {
+            //@ts-ignore
             type: 'line' as const,
             label: way_id,
             borderColor: 'rgb(255, 99, 132)',

diff --git a/frontend/src/pages/RoadConditions.tsx b/frontend/src/pages/RoadConditions.tsx
@@ -10,14 +10,37 @@ import Split from 'react-split';
 import '../css/split.css';
 import '../css/road_conditions.css';
 import { ConditionType } from '../models/graph';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { getConditionsWay2 } from '../queries/conditions';
 
 //this is to visualise the Road Conditions (GP) map
 const RoadConditions = () => {
-  const [wayData, setWayData] = useState<ChartData<'line', number[], number>>();
+  const [wayData, setWayData] =
+    useState<ChartData<'scatter', number[], number>>();
 
   console.log(wayData);
 
+  useEffect(() => {
+    getConditionsWay2('12e920a5-368c-4484-a0a3-e8a626ec49fe', 'KPI', (wc) => {
+      console.log(wc);
+      setWayData({
+        labels: wc.map((p) => p.way_dist * 100),
+        datasets: [
+          {
+            //@ts-ignore
+            type: 'line' as const,
+            label: 'way_id',
+            borderColor: 'rgb(255, 99, 132)',
+            borderWidth: 2,
+            fill: false,
+            tension: 0.2,
+            data: wc.map((p) => p.value),
+          },
+        ],
+      });
+    });
+  }, []);
+
   const type: ConditionType = {
     name: 'IRI',
     min: 0,

diff --git a/frontend/src/queries/conditions.ts b/frontend/src/queries/conditions.ts
@@ -18,6 +18,14 @@ export const getConditions = (
   post('/conditions/way', { wayId, type }, setConditions);
 };
 
+export const getConditionsWay2 = (
+  dbId: string,
+  type: string,
+  setConditions: (data: Condition[]) => void,
+) => {
+  post('/conditions/way2', { dbId, type }, setConditions);
+};
+
 export const getBoundedWaysConditions = async (
   bounds: MapBounds,
   type: string,