test-graph-view | improved graph with 2 axis, refeactored code (remov…

…ed way and way)
DTU-SE-Group-D · Oct 8, 2023 · 3992b69 · 3992b69
1 parent 09721a0
commit 3992b69
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 196 deletions.
diff --git a/backend/src/conditions/rc.controller.ts b/backend/src/conditions/rc.controller.ts
@@ -16,17 +16,9 @@ export class RCController {
   }
 
   @Get('way')
-  getWayConditions(
-    @Query() query: { wayId: string; type: string },
-  ): Promise<Condition[]> {
-    const { wayId, type } = query;
-    return this.service.getWayRoadConditions(wayId, type);
-  }
-
-  @Get('way2')
-  getWay2Conditions(@Query() query: { dbId: string }): Promise<Condition[]> {
+  getWayConditions(@Query() query: { dbId: string }): Promise<Condition[]> {
     const { dbId } = query;
-    return this.service.getWay2RoadConditions(dbId);
+    return this.service.getWayRoadConditions(dbId);
   }
 
   @Get('')

diff --git a/backend/src/conditions/rc.service.ts b/backend/src/conditions/rc.service.ts
@@ -3,13 +3,7 @@ import { Injectable } from '@nestjs/common';
 import { InjectConnection, Knex } from 'nestjs-knex';
 import { Condition, LatLngDist, WayId, WaysConditions } from 'src/models';
 import groupBy from '../util';
-import {
-  RoadConditions,
-  Ways,
-  ZoomConditions,
-  Conditions2,
-  Conditions,
-} from '../tables';
+import { Ways, ZoomConditions, Conditions2, Conditions } from '../tables';
 
 import knexPostgis = require('knex-postgis');
 
@@ -50,34 +44,27 @@ export class RCService {
     ];
   }
 
-  async getWayRoadConditions(
-    way_id: string,
-    type: string,
-  ): Promise<Condition[]> {
-    return RoadConditions(this.knex)
-      .select('way_id', 'way_dist', 'value')
-      .where({ type: type, way_id: way_id })
-      .orderBy('way_dist');
-  }
-
-  async getWay2RoadConditions(dbId: string): Promise<Condition[]> {
-    return Conditions(this.knex_liramap)
-      .select(
-        'cond1.fk_way_id',
-        'cond1.value as KPI',
-        'cond2.value as DI',
-        'cond1.distance01 as way_dist',
-      )
-      .join(
-        'condition_coverages as cond2',
-        'cond1.distance01',
-        '=',
-        'cond2.distance01',
-      )
-      .where('cond1.type', 'KPI')
-      .where('cond2.type', 'DI')
-      .where('cond1.fk_way_id', dbId)
-      .orderBy('cond1.distance01');
+  async getWayRoadConditions(dbId: string): Promise<Condition[]> {
+    return (
+      Conditions(this.knex_liramap)
+        .select(
+          'cond1.value as KPI',
+          'cond2.value as DI',
+          'cond1.distance01 as way_dist',
+        )
+        .join(
+          'condition_coverages as cond2',
+          'cond1.distance01',
+          '=',
+          'cond2.distance01',
+        )
+        .where('cond1.type', 'KPI')
+        .where('cond2.type', 'DI')
+        .where(this.knex_liramap.raw('cond1.fk_way_id = cond2.fk_way_id'))
+        // .where('cond1.distance01', '<>', 0)
+        .where('cond1.fk_way_id', dbId)
+        .orderBy('cond1.distance01')
+    );
   }
 
   async getZoomConditions(

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/Components/RoadConditions/ConditionsGraph.tsx b/frontend/src/Components/RoadConditions/ConditionsGraph.tsx
@@ -17,8 +17,6 @@ import {
 } from 'chart.js';
 import { Scatter } from 'react-chartjs-2';
 
-import { ConditionType } from '../../models/graph';
-
 Chart.register(
   CategoryScale,
   LinearScale,
@@ -30,53 +28,7 @@ Chart.register(
 );
 //const colorCode = '#1478BD';
 
-// 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'> => ({
+const options = (): ChartOptions<'scatter'> => ({
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
@@ -92,29 +44,38 @@ const options = ({
         text: 'distance (m)',
       },
       ticks: {
-        // maxTicksLimit: 11,
         stepSize: 10,
         callback: (tick: string | number) =>
           Math.round(parseFloat(tick.toString())),
       },
     },
-    y: {
+    //TODO will be a variable passed from parent
+    KPI: {
+      type: 'linear',
+      position: 'left',
+      display: 'auto',
+      title: {
+        display: true,
+        text: 'KPI',
+      },
+    },
+    DI: {
+      type: 'linear',
+      position: 'right',
+      display: 'auto',
       title: {
         display: true,
-        text: name,
+        text: 'DI',
       },
-      min: min,
-      max: max,
     },
   },
 });
 
 interface Props {
-  type: ConditionType;
   data: ChartData<'scatter', number[], number> | undefined;
 }
 
-const ConditionsGraph: FC<Props> = ({ type, data }) => {
+const ConditionsGraph: FC<Props> = ({ data }) => {
   const ref = useRef<Chart<'scatter', number[], number>>(null);
 
   useEffect(() => {
@@ -126,7 +87,7 @@ const ConditionsGraph: FC<Props> = ({ type, data }) => {
   // attach events to the graph options
   const graphOptions: ChartOptions<'scatter'> = useMemo(
     () => ({
-      ...options(type),
+      ...options(),
       onClick: (
         event: ChartEvent,
         elts: ActiveElement[],

diff --git a/frontend/src/Components/RoadConditions/ConditionsMap.tsx b/frontend/src/Components/RoadConditions/ConditionsMap.tsx
@@ -1,52 +1,15 @@
-import { ConditionType } from '../../models/graph';
-import { ChartData } from 'chart.js';
 import MapWrapper from '../Map/MapWrapper';
-import Ways from './Ways';
-import { FC, useCallback, useRef } from 'react';
-import { getConditions } from '../../queries/conditions';
-import { Condition } from '../../models/path';
+import { FC } from 'react';
 import '../../css/road_conditions.css';
 
-interface Props {
-  type: ConditionType;
-  setWayData: React.Dispatch<
-    React.SetStateAction<ChartData<'scatter', number[], number> | undefined>
-  >;
-}
+interface Props {}
 
-const ConditionsMap: FC<Props> = ({ type, setWayData }) => {
-  const { name } = type;
-
-  const ref = useRef(null);
-
-  const onClick = useCallback((way_id: string, way_length: number) => {
-    console.log('onclick called');
-
-    getConditions(way_id, name, (wc: Condition[]) => {
-      console.log('getConditions called');
-      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)',
-            borderWidth: 2,
-            fill: false,
-            tension: 0.1,
-            data: wc.map((p) => p.value),
-          },
-        ],
-      });
-    });
-  }, []);
+const ConditionsMap: FC<Props> = () => {
+  //TODO trigger redrwaw the plot
 
   return (
-    <div className="road-conditions-map" ref={ref}>
-      <MapWrapper>
-        <Ways type={name} onClick={onClick} />
-      </MapWrapper>
+    <div className="road-conditions-map">
+      <MapWrapper></MapWrapper>
     </div>
   );
 };

diff --git a/frontend/src/Components/RoadConditions/Ways.tsx b/frontend/src/Components/RoadConditions/Ways.tsx
@@ -1,11 +1,9 @@
-import { FC, useEffect, useMemo, useState } from 'react';
+import { FC, useMemo, useState } from 'react';
 
 import { HotlineOptions } from 'react-leaflet-hotline';
 import { HotlineEventHandlers } from 'react-leaflet-hotline/dist/types/types';
 import { useGraph } from '../../context/GraphContext';
 import { WaysConditions } from '../../models/path';
-import { getWaysConditions } from '../../queries/conditions';
-import useZoom from '../Map/Hooks/useZoom';
 import DistHotline from '../Map/Renderers/DistHotline';
 
 interface IWays {
@@ -14,10 +12,11 @@ interface IWays {
 }
 
 const Ways: FC<IWays> = ({ type, onClick }) => {
-  const zoom = useZoom();
+  console.log(type);
+
   const { minY, maxY } = useGraph();
 
-  const [ways, setWays] = useState<WaysConditions>();
+  const [ways, _] = useState<WaysConditions>();
 
   const options = useMemo<HotlineOptions>(
     () => ({
@@ -36,15 +35,6 @@ const Ways: FC<IWays> = ({ type, onClick }) => {
     [ways],
   );
 
-  useEffect(() => {
-    if (zoom === undefined) return;
-    const z = Math.max(0, zoom - 12);
-    getWaysConditions(type, z, (data: WaysConditions) => {
-      console.log(data);
-      setWays(data);
-    });
-  }, [zoom]);
-
   return (
     <>
       {ways ? (

diff --git a/frontend/src/models/graph.ts b/frontend/src/models/graph.ts
diff --git a/frontend/src/models/path.ts b/frontend/src/models/path.ts
@@ -59,6 +59,12 @@ export interface ValueLatLng extends LatLng {
 }
 
 export interface Condition {
+  type: string;
+  way_dist: number;
+  value: number;
+}
+
+export interface ConditionKPIDI {
   fk_way_id: string;
   KPI: number;
   DI: number;