90 plot survey

backend/src/app.module.ts

@@ -12,6 +12,8 @@ import { RCService } from './conditions/rc.service';
 import { DB_GROUPD_CONFIG, DB_LIRAMAP_CONFIG } from './database';
 import { RoadController } from './roads/road.controller';
 import { RoadService } from './roads/road.service';
+import { SurveyService } from './surveys/survey.service';
+import { SurveyController } from './surveys/survey.controller';
 
 const database = (config: any, name: string) => {
   return KnexModule.forRootAsync(
@@ -35,7 +37,7 @@ const database = (config: any, name: string) => {
       serveRoot: '/images/',
     }),
   ],
-  controllers: [AppController, RCController, RoadController],
-  providers: [AppService, ConfigService, RCService, RoadService],
+  controllers: [AppController, RCController, RoadController, SurveyController],
+  providers: [AppService, ConfigService, RCService, RoadService, SurveyService],
 })
 export class AppModule {}

backend/src/models.ts

@@ -16,6 +16,15 @@ export interface Condition {
   value: number;
 }
 
+/**
+ * Type of answer from backend for the conditions of a survey.
+ */
+export interface SurveyConditions {
+  type: number;
+  value: number;
+  distance_survey: number;
+}
+
 /**
  * The OSM id of a way.
  */
@@ -55,6 +64,7 @@ export enum ImageType {
  * The measurement types.
  */
 export enum MeasurementType {
+  Crack = 0,
   Rutting = 1,
   MacroTexture = 2,
   LaneMarking = 3,

backend/src/surveys/survey.controller.ts

@@ -0,0 +1,17 @@
+import { Controller, Get, Query } from '@nestjs/common';
+
+import { SurveyConditions } from 'src/models';
+import { SurveyService } from './survey.service';
+
+@Controller('conditions')
+export class SurveyController {
+  constructor(private readonly service: SurveyService) {}
+
+  @Get('surveys')
+  getWayConditions(
+    @Query() query: { surveyId: string },
+  ): Promise<SurveyConditions[]> {
+    const { surveyId } = query;
+    return this.service.getSurveyConditions(surveyId);
+  }
+}

backend/src/surveys/survey.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@nestjs/common';
+import { InjectConnection, Knex } from 'nestjs-knex';
+import { Measurement } from '../tables';
+import { MeasurementType, SurveyConditions } from '../models';
+
+@Injectable()
+export class SurveyService {
+  constructor(
+    @InjectConnection('group-d') private readonly knex_group_d: Knex,
+  ) {}
+
+  /**
+   * Query the data for a survey given his ID
+   */
+  async getSurveyConditions(surveyId: string): Promise<SurveyConditions[]> {
+    return (
+      await Measurement(this.knex_group_d)
+        .select('type_index', 'value', 'distance_survey')
+        .where('fk_survey_id', surveyId)
+        .orderBy('distance_survey', 'asc')
+    ).map(
+      (value: {
+        type_index: string;
+        value: number;
+        distance_survey: number;
+      }) => {
+        return {
+          type: MeasurementType[value.type_index],
+          value: value.value,
+          distance_survey: value.distance_survey,
+        };
+      },
+    );
+  }
+}

backend/src/tables.ts

@@ -59,17 +59,17 @@ export interface IMeasurement {
   timestamp: Date;
 }
 
-export const Measurement = (k: Knex) => k.from<IImage>('measurement');
+export const Measurement = (k: Knex) => k.from<IMeasurement>('measurement');
 
 export interface ISurvey {
   id?: number;
   section_geom: Geometry;
   timestamp: Date;
-  /** The Dynatest id of the survey or null */
+  /** The Dynatest id of the surveys or null */
   survey_id: number;
 }
 
-export const Survey = (k: Knex) => k.from<IImage>('survey');
+export const Survey = (k: Knex) => k.from<ISurvey>('surveys');
 
 export interface IWay {
   id?: number;

frontend/src/App.tsx

@@ -21,7 +21,9 @@ const App: FC = () => {
         <Routes>
           <Route index element={<Navigate to="/map" replace />} />
           <Route path="/map" element={<Main />} />
-          <Route path="/road-details" element={<Inspect />} />
+          <Route path="/inspect" element={<Inspect />} />
+          <Route path="/inspect/:type" element={<Inspect />} />
+          <Route path="/inspect/:type/:id" element={<Inspect />} />
         </Routes>
       </Router>
     </div>

frontend/src/Components/Map/Roads.tsx

@@ -26,7 +26,7 @@ const Roads: React.FC<Props> = ({ roads, onSelectedRoad }) => {
           onClick={(position) => {
             console.log(road, position);
             // TODO: remove when possible to select a road
-            navigate('/road-details');
+            navigate('/inspect');
 
             if (onSelectedRoad) {
               onSelectedRoad(road, position);

frontend/src/Components/RoadDetails/ConditionsGraph.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useRef } from 'react';
+import { FC, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ActiveElement,
   CategoryScale,
@@ -11,12 +11,15 @@ import {
   LinearScale,
   LineElement,
   PointElement,
+  ScaleChartOptions,
   Title,
   Tooltip,
 } from 'chart.js';
 import 'chart.js/auto';
 import { Scatter } from 'react-chartjs-2';
 import zoomPlugin from 'chartjs-plugin-zoom';
+import { ConditionsGraphData } from '../../models/conditions';
+import { DeepPartial } from 'chart.js/dist/types/utils';
 
 Chart.register(
   CategoryScale,
@@ -29,7 +32,13 @@ Chart.register(
   zoomPlugin,
 );
 
-const options = (minAndMax: number[]): ChartOptions<'scatter'> => ({
+/**
+ * this function sets the viewing option for the chart graph
+ **/
+const options = (
+  data?: ConditionsGraphData[],
+  scales?: DeepPartial<ScaleChartOptions<'scatter'>>,
+): ChartOptions<'scatter'> => ({
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
@@ -45,8 +54,11 @@ const options = (minAndMax: number[]): ChartOptions<'scatter'> => ({
         // modifierKey: 'ctrl',
       },
       limits: {
-        x: { min: 0, max: 100, minRange: 20 },
-        y: { min: 0, max: 10 },
+        x: {
+          min: data ? Math.min(...data.map((item) => item.minX)) : 0,
+          max: data ? Math.max(...data.map((item) => item.maxX)) : 100,
+          minRange: 20,
+        },
       },
       zoom: {
         // vv drag to zoom option could be a solution vv
@@ -64,66 +76,84 @@ const options = (minAndMax: number[]): ChartOptions<'scatter'> => ({
       },
     },
   },
-  scales: {
-    x: {
-      title: {
-        display: true,
-        text: 'distance (m)',
-      },
-      ticks: {
-        stepSize: 10,
-        callback: (tick: string | number) =>
-          Math.round(parseFloat(tick.toString())),
-      },
-    },
-    //TODO will be a variable passed from parent
-    KPI: {
-      type: 'linear',
-      position: 'left',
-      display: 'auto',
-      min: Math.floor(minAndMax[0]),
-      max: Math.ceil(minAndMax[1]),
-      title: {
-        display: true,
-        text: 'KPI',
-      },
-    },
-    DI: {
-      type: 'linear',
-      position: 'right',
-      display: 'auto',
-      min: Math.floor(minAndMax[2]),
-      max: Math.ceil(minAndMax[3]),
-      title: {
-        display: true,
-        text: 'DI',
-      },
-    },
-  },
+  scales: scales,
 });
 
 interface Props {
-  data: ChartData<'scatter', number[], number> | undefined;
-  minAndMax: number[];
+  data?: ConditionsGraphData[];
 }
 
 /**
  * The Graph displaying the road parameter data in the Inspect Page
- * @author Muro
+ * @author Muro, Kerbourc'h
  */
-const ConditionsGraph: FC<Props> = ({ data, minAndMax }) => {
-  const ref = useRef<Chart<'scatter', number[], number>>(null);
+const ConditionsGraph: FC<Props> = ({ data }) => {
+  const ref = useRef<Chart<'scatter', { x: number; y: number }[]>>(null);
+  const [graphLines, setGraphLines] =
+    useState<ChartData<'scatter', { x: number; y: number }[]>>();
 
   useEffect(() => {
     if (ref.current === null) return;
     const chart = ref.current;
     chart.update();
   }, [ref, data]);
 
+  useEffect(() => {
+    if (data === undefined) {
+      setGraphLines(undefined);
+      return;
+    }
+    setGraphLines({
+      //type: 'scatter',
+      datasets: data.map((item) => {
+        return {
+          showLine: true,
+          label: item.type,
+          borderColor: 'rgb(255, 99, 132)',
+          borderWidth: 2,
+          fill: false,
+          data: item.dataValues,
+          yAxisID: item.type,
+        };
+      }),
+    });
+  }, [data]);
+
   // attach events to the graph options
-  const graphOptions: ChartOptions<'scatter'> = useMemo(
-    () => ({
-      ...options(minAndMax),
+  const graphOptions: ChartOptions<'scatter'> = useMemo(() => {
+    const scales: DeepPartial<ScaleChartOptions<'scatter'>> = {
+      scales: {
+        x: {
+          title: {
+            display: true,
+            text: 'distance (m)',
+          },
+          ticks: {
+            stepSize: 10,
+            callback: (tick: string | number) =>
+              Math.round(parseFloat(tick.toString())),
+          },
+        },
+      },
+    };
+
+    data?.forEach((item) => {
+      if (scales.scales === undefined) return;
+      scales.scales[item.type] = {
+        type: 'linear',
+        position: 'left',
+        display: 'auto',
+        min: item.minY - 1,
+        max: item.maxY + 1,
+        title: {
+          display: true,
+          text: item.type,
+        },
+      };
+    });
+
+    return {
+      ...options(data, scales.scales),
       onClick: (
         event: ChartEvent,
         elts: ActiveElement[],
@@ -134,13 +164,14 @@ const ConditionsGraph: FC<Props> = ({ data, minAndMax }) => {
         const pointIndex = elt.index;
         console.log(pointIndex, event, elts);
       },
-    }),
-    [minAndMax],
-  );
+    };
+  }, [data]);
 
   return (
     <div className="road-conditions-graph">
-      {data && <Scatter ref={ref} data={data} options={graphOptions} />}
+      {data && graphLines && (
+        <Scatter ref={ref} data={graphLines} options={graphOptions} />
+      )}
     </div>
   );
 };