diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/.DS_Store differ
diff --git a/components/pages/StatsGraphTab.tsx b/components/pages/StatsGraphTab.tsx
index 8aab59c..ac1ddd8 100644
--- a/components/pages/StatsGraphTab.tsx
+++ b/components/pages/StatsGraphTab.tsx
@@ -30,6 +30,7 @@ import {
   calculateBatteryEnergyAh,
   calculateBatterySOC,
   calculateMotorPowerConsumption,
+  mapTelemetryData,
 } from "@/lib/telemetry-utils";
 import { useEffect, useState } from "react";
 import { Axis3D, ChevronDownIcon, Download } from "lucide-react";
@@ -56,30 +57,33 @@ import {
 } from "@/components/ui/alert-dialog";
 import { fetchTelemetryDataInRange } from "@/lib/db-utils";
 import SimpleCard from "../telemetry/SimpleCard";
-
-// Configuration constant to enable/disable refresh interval
-const ENABLE_REFRESH_INTERVAL = false;
+import { Telemetry } from "next/dist/telemetry/storage";
 
 function integrateData(data: any, dataKey: string) {
   let integral = 0;
-  for (let i = data.length - 1; i > 0; i--) {
-    const v0 = data[i][dataKey];
-    const v1 = data[i - 1][dataKey];
 
-    if (v1 == null || v0 == null) {
+  for (let i = 0; i < data.length - 1; i++) {
+    const val1 = data[i][dataKey];
+    const val2 = data[i + 1][dataKey];
+
+    if (val1 == null || val2 == null) {
       continue;
     }
 
-    let midValue = (v0 + v1) / 2;
-    let date1 = new Date(data[i - 1].timestamp);
+    let date1 = new Date(data[i + 1].timestamp);
     let date2 = new Date(data[i].timestamp);
-    let changeX = date2.getTime() - date1.getTime();
+    let changeX = date1.getTime() - date2.getTime();
 
-    integral += (midValue * changeX) / 1000;
+    let midVal = (val2 + val1) / 2;
+    integral += (midVal * changeX) / 1000;
   }
+  console.log("PENIS");
   return integral;
 }
 
+// Configuration constant to enable/disable refresh interval
+const ENABLE_REFRESH_INTERVAL = false;
+
 // Helper function to convert any date to CDT (UTC-5)
 function toCDT(date: Date | string): Date {
   const d = new Date(date);
@@ -162,7 +166,6 @@ export default function StatsGraphTab() {
   const [selectedDataKeys, setSelectedDataKeys] = useState<string[]>([
     "battery_main_bat_v",
   ]);
-  const [integrals, setIntegrals] = useState<any[]>([]);
   const [chartData, setChartData] = useState<any[]>([]);
   const [startDate, setStartDate] = useState<Date | undefined>(() => {
     return new Date("2025-07-04T01:00:00");
@@ -308,7 +311,7 @@ export default function StatsGraphTab() {
     for (let i = 0; i < selectedDataKeys.length; i++) {
       calcIntegrals.push(integrateData(chartData, selectedDataKeys[i]));
     }
-    setIntegrals(calcIntegrals);
+    setintegrals(calcIntegrals);
   }, [selectedDataKeys, chartData]);
 
   useEffect(() => {
@@ -649,6 +652,24 @@ export default function StatsGraphTab() {
     return validationError;
   }
 
+  const [integrals, setintegrals] = useState<number[]>([]);
+
+  useEffect(() => {
+    let calcIntegrals = [];
+    for (let i = 0; i < selectedDataKeys.length; i++) {
+      calcIntegrals.push(integrateData(chartData, selectedDataKeys[i]));
+      setintegrals(calcIntegrals);
+    }
+  }, [chartData]);
+
+  useEffect(() => {
+    let calcIntegrals = [];
+    for (let i = 0; i < selectedDataKeys.length; i++) {
+      calcIntegrals.push(integrateData(chartData, selectedDataKeys[i]));
+      setintegrals(calcIntegrals);
+    }
+  }, [chartData]);
+
   return (
     <div>
       <div className="grid place-items-center grid-cols-3 gap-4">
@@ -756,11 +777,14 @@ export default function StatsGraphTab() {
               id="time-picker"
               step="1"
               defaultValue="01:00:00"
-              onChange={(time) => {
-                startDate?.setHours(parseInt(time.target.value.split(":")[0]));
-                startDate?.setMinutes(
-                  parseInt(time.target.value.split(":")[1]),
-                );
+              onChange={(e) => {
+                if (startDate) {
+                  const newDate = new Date(startDate);
+                  const [hours, minutes] = e.target.value.split(":");
+                  newDate.setHours(parseInt(hours));
+                  newDate.setMinutes(parseInt(minutes));
+                  setStartDate(newDate);
+                }
               }}
               className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
             />
@@ -801,6 +825,15 @@ export default function StatsGraphTab() {
               id="time-picker"
               step="1"
               defaultValue="01:00:00"
+              onChange={(e) => {
+                if (endDate) {
+                  const newDate = new Date(endDate);
+                  const [hours, minutes] = e.target.value.split(":");
+                  newDate.setHours(parseInt(hours));
+                  newDate.setMinutes(parseInt(minutes));
+                  setEndDate(newDate);
+                }
+              }}
               className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
             />
           </div>
@@ -976,6 +1009,13 @@ export default function StatsGraphTab() {
           );
         })}
       </div>
+      {selectedDataKeys.map((key, index) => {
+        return (
+          <div key={index}>
+            {key} : {integrals[index]}
+          </div>
+        );
+      })}
     </div>
   );
 }
diff --git a/lib/db-utils.ts b/lib/db-utils.ts
index 847e845..27e1fee 100644
--- a/lib/db-utils.ts
+++ b/lib/db-utils.ts
@@ -172,7 +172,10 @@ export async function fetchTelemetryDataInRange(
         }
       }
 
-      return mapTelemetryData<number>(transformedRow);
+      return {
+        ...mapTelemetryData<number>(transformedRow),
+        created_at: transformedRow.created_at,
+      };
     });
   } catch (error) {
     console.error("Error fetching telemetry data in range:", error);
diff --git a/package.json b/package.json
index 5c5b54c..bd1c192 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "postcss": "^8.5",
     "prettier": "^3.6.2",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5"
+    "typescript": "^5.8.3"
   },
   "packageManager": "pnpm@9.1.0+sha512.67f5879916a9293e5cf059c23853d571beaf4f753c707f40cb22bed5fb1578c6aad3b6c4107ccb3ba0b35be003eb621a16471ac836c87beb53f9d54bb4612724"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee7f220..a29d019 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -205,7 +205,7 @@ importers:
         specifier: ^3.4.17
         version: 3.4.17
       typescript:
-        specifier: ^5
+        specifier: ^5.8.3
         version: 5.8.3
 
 packages: