feat: graph modes

JonFreer · Oct 21, 2023 · eef8b7b · eef8b7b
1 parent be3a2b5
commit eef8b7b
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 8 deletions.
diff --git a/api/API/routers/counts.py b/api/API/routers/counts.py
@@ -51,7 +51,7 @@ def read_counts(
     modes: List[str] = Query(
         None,
         description="""Mode of transport. Leave blank to return values for all modes. 
-                            List of available modes: cyclist, car, pedestrian, truck, motorbike, escooter, bus, van, rigid, taxi. """,
+                            List of available modes: cyclist, car, pedestrian, truck, motorbike, escooter, bus, van, rigid, taxi, minibus, emergency_car, emergency_van, fire_engine, cargo_bicycle, rental_bicycle. """,
     ),
     db: Session = Depends(get_db),
 ):
@@ -123,6 +123,13 @@ def check_modes(modes: List[str]):
             "van",
             "rigid",
             "taxi",
+            "minibus",
+            "emergency_car",
+            "emergency_van",
+            "fire_engine",
+            "cargo_bicycle",
+            "rental_bicycle"
+
         ]
     )
     modes_diff = set(modes) - MODES

diff --git a/web/src/components/graph.tsx b/web/src/components/graph.tsx
@@ -22,29 +22,110 @@ function Graph({
   console.log("RERENDER");
 
   const min = useRef<number>(2 ^ 53);
+  const hidden_state = useRef<any>({
+    Cyclists: false,
+    "E-Scooter": true,
+    Pedestrians: true,
+    Cars: true,
+    Bus: true,
+  });
   // const [min, setMin] = useState<number>(2^53);
 
   // By defualt the min and max should be set to the props
 
-  const series: ApexAxisChartSeries = [];
+  const series: ApexAxisChartSeries = [
+    { name: "Cyclists", data: [[]] },
+    { name: "E-Scooter", data: [[]] },
+    { name: "Pedestrians", data: [[]] },
+    { name: "Cars", data: [[]] },
+    { name: "Bus", data: [[]] },
+  ];
 
   function updateCounts(counts: Count[]) {
+    // if (hidden_state.current.Cyclists){
+    //   return
+    // }
     const series: ApexAxisChartSeries = [
+      // {
+      //   name: "Cyclists",
+      //   data: counts.map((x) => [new Date(x.timestamp).getTime(), x.count_in]),
+      // },
       {
-        name: "Users In",
-        data: counts.map((x) => [new Date(x.timestamp).getTime(), x.count_in]),
+        name: "Cyclists",
+        data: counts
+          .filter((x) => x.mode === "cyclist")
+          .map((x) => [
+            new Date(x.timestamp).getTime(),
+            x.count_out + x.count_in,
+          ]),
       },
+      // {
+      //   name: "Cargo Bike",
+      //   data: counts.filter((x) => x.mode === "cargo_bicycle").map((x) => [new Date(x.timestamp).getTime(), x.count_out + x.count_in]),
+      // },
       {
-        name: "Users Out",
-        data: counts.map((x) => [new Date(x.timestamp).getTime(), x.count_out]),
+        name: "E-Scooter",
+        data: counts
+          .filter((x) => x.mode === "escooter")
+          .map((x) => [
+            new Date(x.timestamp).getTime(),
+            x.count_out + x.count_in,
+          ]),
+      },
+      // {
+      //   name: "Rental_bikes",
+      //   data: counts.filter((x) => x.mode === "rental_bicycle").map((x) => [new Date(x.timestamp).getTime(), x.count_out + x.count_in]),
+      // },
+
+      {
+        name: "Pedestrians",
+        data: counts
+          .filter((x) => x.mode === "pedestrian")
+          .map((x) => [
+            new Date(x.timestamp).getTime(),
+            x.count_out + x.count_in,
+          ]),
+      },
+
+      {
+        name: "Cars",
+        data: counts
+          .filter((x) => x.mode === "car")
+          .map((x) => [
+            new Date(x.timestamp).getTime(),
+            x.count_out + x.count_in,
+          ]),
+      },
+
+      {
+        name: "Bus",
+        data: counts
+          .filter((x) => x.mode === "bus")
+          .map((x) => [
+            new Date(x.timestamp).getTime(),
+            x.count_out + x.count_in,
+          ]),
       },
     ];
 
+    for (let i = 0; i < series.length; i++) {
+      if (series[i].data.length === 0) {
+        series[i].data = [[]];
+      }
+    }
+
     apexchart.exec(type, "updateSeries", series, false);
+
+    for (const [key, hidden] of Object.entries(hidden_state.current)) {
+      if (hidden) {
+        apexchart.exec(type, "hideSeries", key);
+      }
+    }
   }
 
   function getCounts(_min: number = 0, _max: number = 0) {
     console.log(time_interval);
+
     const requestOptions = {
       method: "GET",
     };
@@ -62,9 +143,11 @@ function Graph({
       if (response.status === 200) {
         response.json().then((data: Count[]) => {
           console.log(data);
+
           let filtered = data.filter(
-            (x) => x.counter === identity && x.mode === "cyclist"
+            (x) => x.counter === identity //&& x.mode === "cyclist"
           );
+
           updateCounts(filtered);
         });
       } else {
@@ -77,7 +160,6 @@ function Graph({
     if (default_start_date !== null) {
       getCounts(default_start_date.getTime() - 604800000);
       min.current = default_start_date.getTime() - 604800000;
-      // setMin();
     } else {
       getCounts();
     }
@@ -99,6 +181,12 @@ function Graph({
         autoSelected: "zoom",
       },
       events: {
+        legendClick: function (chartContext, seriesIndex, config) {
+          if (seriesIndex !== undefined) {
+            let key = Object.keys(hidden_state.current)[seriesIndex];
+            hidden_state.current[key] = !hidden_state.current[key];
+          }
+        },
         zoomed: function (chartContext, { xaxis, yaxis }) {
           if (xaxis.min < min.current) {
             min.current = xaxis.min - 100000000;
@@ -152,6 +240,9 @@ function Graph({
     tooltip: {
       y: {
         formatter: function (val: any) {
+          if (val === undefined) {
+            return 0;
+          }
           return val.toFixed(0);
         },
       },