feat: dynamically load data for graphs

api/API/crud.py

@@ -198,7 +198,7 @@ def read_counts(
     limit_offset: Tuple[int, int],
     time_interval: str,
     identity: int,
-    start_time: int,
+    start_time: int | None = None,
     end_time:int | None = None,
     table: str = "counts_hourly",
 ) -> List[models.Counts]:
@@ -220,6 +220,8 @@ def read_counts(
 
     if end_time == None:
         end_time = datetime.datetime.now().timestamp()
+    if start_time == None:
+        start_time = 0
 
     sql = sql.bindparams(
         bindparam("timeInterval", value=time_interval),

api/API/routers/admin.py

@@ -139,7 +139,7 @@ def load_vivacity(
     counters = crud.read_counters(db, [None, 0])
 
     results, counters_vivacity = vivacity.Vivacity.get_counts(
-        config.VivacityKey, delta_t
+        config.VivacityKey, delta_t,identity
     )
 
     # Add any new counters to the counters table

api/API/vivacity.py

@@ -5,12 +5,20 @@
 
 class Vivacity:
     # Call and return the json from the Vivacity API
-    def get_results(api_key, start_time, end_time):
-        response = requests.get(
-            "https://tfwm.onl/vivacity.json?ApiKey={}&earliest={}&NullDataPoints=false".format(
-                api_key, start_time
+    def get_results(api_key, start_time, end_time,identity):
+
+        if(identity==None):
+            response = requests.get(
+                "https://tfwm.onl/vivacity.json?ApiKey={}&earliest={}&NullDataPoints=false".format(
+                    api_key, start_time
+                )
+            )
+        else:
+            response = requests.get(
+                "https://tfwm.onl/vivacity.json?ApiKey={}&earliest={}&NullDataPoints=false&identity={}".format(
+                    api_key, start_time,identity
+                )
             )
-        )
         response.raise_for_status()
         return response.json()
 
@@ -59,8 +67,8 @@ def filter_results(results: dict):
 
         return out, counters
 
-    def get_counts(api_key, delta_t):
+    def get_counts(api_key, delta_t,identity=None):
         time = int(datetime.datetime.now().timestamp()) - delta_t
-        results = Vivacity.get_results(api_key, time, "now")
+        results = Vivacity.get_results(api_key, time, "now",identity)
         filtered_results, counters = Vivacity.filter_results(results)
         return filtered_results, counters

docker-compose.dev.yaml

@@ -37,7 +37,7 @@ services:
   web:
     build:
       context: ./web
-      # target: dev
+      target: dev
     environment:
       REACT_APP_HOST: ${DOMAIN:-cyclecounter.localhost}
     # labels:

web/src/components/counter.tsx

@@ -219,8 +219,8 @@ function GraphHolder({
       </div>
       <div className={styles.cardBody} style={{ paddingTop: "0px" }}>
         <Graph
-          start_date={start_date}
-          end_date={end_date}
+          default_start_date={start_date}
+          default_end_date={end_date}
           style={chart_style}
           time_interval={time_interval}
           identity={identity}

web/src/components/graph.tsx

@@ -1,76 +1,88 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Count } from "../types/types";
 import ReactApexChart from "react-apexcharts";
 import { ApexOptions } from "apexcharts";
+import apexchart from "apexcharts";
+import { count } from "console";
 
 function Graph({
   identity,
   time_interval,
   style,
-  start_date,
-  end_date,
+  default_start_date,
+  default_end_date,
   type,
 }: {
   identity: number;
   time_interval: string;
   style: "bar" | "area";
-  start_date: Date | null;
-  end_date: Date | null;
+  default_start_date: Date | null;
+  default_end_date: Date | null;
   type: "day" | "week" | "month";
 }) {
-  const [counts, setCounts] = useState<Count[]>([]);
 
-  function getCounts() {
-    console.log(style);
+  const [min, setMin] = useState<number>(10000000000000000);
 
+  // By defualt the min and max should be set to the props
+
+  const series: ApexAxisChartSeries = [];
+
+  function updateCounts(counts: Count[]) {
+    const series: ApexAxisChartSeries = [
+      {
+        name: "Users In",
+        data: counts.map((x) => [new Date(x.timestamp).getTime(), x.count_in]),
+      },
+      {
+        name: "Users Out",
+        data: counts.map((x) => [new Date(x.timestamp).getTime(), x.count_out]),
+      },
+    ];
+
+    apexchart.exec(type, "updateSeries", series, false);
+  }
+
+  function getCounts(_min: number = 0, _max: number = 0) {
+    console.log(time_interval)
     const requestOptions = {
       method: "GET",
     };
-    console.log(time_interval);
-    fetch(
+
+    let query =
       "/api/counts/?time_interval=" +
-        encodeURIComponent(time_interval) +
-        "&identity=" +
-        identity,
-      requestOptions
-    ).then((response) => {
+      encodeURIComponent(time_interval) +
+      "&identity=" +
+      identity;
+
+    query = query + "&start_time=" + Math.floor(_min / 1000);
+
+    fetch(query, requestOptions).then((response) => {
       console.log(response);
       if (response.status == 200) {
         response.json().then((data: Count[]) => {
           console.log(data);
           let filtered = data.filter(
             (x) => x.counter == identity && x.mode == "cyclist"
           );
-          setCounts(filtered);
+          updateCounts(filtered);
         });
       } else {
         console.log("/api/counters", response.text);
       }
     });
   }
 
-  // useEffect(()=>{
-  //   this.forceUpdate();
-  // },[style]
-  // )
-
   useEffect(() => {
-    getCounts();
-  }, [style, time_interval, identity]);
-
-  const series: ApexAxisChartSeries = [
-    {
-      name: "Users In",
-      data: counts.map((x) => [new Date(x.timestamp).getTime(), x.count_in]),
-    },
-    {
-      name: "Users Out",
-      data: counts.map((x) => [new Date(x.timestamp).getTime(), x.count_out]),
-    },
-  ];
+    if (default_start_date != undefined) {
+      getCounts(default_start_date.getTime());
+    } else {
+      getCounts();
+    }
+  }, [style, time_interval, identity, default_start_date, default_end_date]);
 
   const options: ApexOptions = {
     chart: {
+      id: type,
       type: "area",
       stacked: false,
       // height: "100%",
@@ -83,6 +95,25 @@ function Graph({
       toolbar: {
         autoSelected: "zoom",
       },
+      events: {
+        zoomed: function (chartContext, { xaxis, yaxis }) {
+
+
+
+          if(xaxis.min < min){
+            getCounts(xaxis.min, xaxis.max);
+            setMin(xaxis.min)
+            // setMax(xaxis.max)
+          }
+
+          chartContext.updateOptions({
+            xaxis: {
+              min: xaxis.min,
+              max: xaxis.max,
+            },
+          });
+        },
+      },
     },
     dataLabels: {
       enabled: false,
@@ -112,11 +143,8 @@ function Graph({
     },
     xaxis: {
       type: "datetime",
-      // min: start_date.getTime(),
-      // max: end_date.getTime(),
       labels: {
         datetimeUTC: false,
-        // format: 'hh dd/MM',
       },
       tooltip: {
         enabled: false,
@@ -134,12 +162,17 @@ function Graph({
     },
   };
 
-  if (start_date != null && options.xaxis != undefined) {
-    options.xaxis.min = start_date.getTime();
-  }
-
-  if (end_date != null && options.xaxis != undefined) {
-    options.xaxis.max = end_date.getTime();
+  if (options.xaxis) {
+    // options.xaxis.min = min;
+    if (default_start_date != null) {
+      options.xaxis.min = default_start_date.getTime();
+      // setMax(default_end_date.getTime());
+    }
+    // options.xaxis.max = max;
+    if (default_end_date != null) {
+      options.xaxis.max = default_end_date.getTime();
+      // setMax(default_end_date.getTime());
+    }
   }
 
   if (