Add graph showing motion and object activity to history timeline desktop view (#9184)

* Add timeline graph component

* Add more custom colors and improve graph

* Add api and data

* Fix data sorting

* Add graph to timeline

* Only show timeline for selected hour

* Make data full range

web/src/components/camera/DynamicCameraImage.tsx

@@ -83,19 +83,19 @@ export default function DynamicCameraImage({
       <div className="flex absolute right-0 bottom-0 bg-black bg-opacity-20 rounded p-1">
         <MdLeakAdd
           className={`${
-            detectingMotion == "ON" ? "text-red-500" : "text-gray-600"
+            detectingMotion == "ON" ? "text-motion" : "text-gray-600"
           }`}
         />
         <TbUserScan
           className={`${
-            activeObjects.length > 0 ? "text-cyan-500" : "text-gray-600"
+            activeObjects.length > 0 ? "text-object" : "text-gray-600"
           }`}
         />
         {camera.audio.enabled && (
           <LuEar
             className={`${
               parseInt(audioRms) >= camera.audio.min_volume
-                ? "text-orange-500"
+                ? "text-audio"
                 : "text-gray-600"
             }`}
           />

web/src/components/card/HistoryCard.tsx

@@ -59,7 +59,7 @@ export default function HistoryCard({
           </div>
           <Button className="px-2 py-2" variant="ghost" size="xs">
             <LuTrash
-              className="w-5 h-5 stroke-red-500"
+              className="w-5 h-5 stroke-danger"
               onClick={(e: Event) => {
                 e.stopPropagation();
 

web/src/components/graph/TimelineGraph.tsx

@@ -0,0 +1,65 @@
+import { GraphData } from "@/types/graph";
+import Chart from "react-apexcharts";
+
+type TimelineGraphProps = {
+  id: string;
+  data: GraphData[];
+};
+
+/**
+ * A graph meant to be overlaid on top of a timeline
+ */
+export default function TimelineGraph({ id, data }: TimelineGraphProps) {
+  return (
+    <Chart
+      type="bar"
+      options={{
+        colors: ["#991b1b", "#06b6d4", "#ea580c"],
+        chart: {
+          id: id,
+          selection: {
+            enabled: false,
+          },
+          toolbar: {
+            show: false,
+          },
+          zoom: {
+            enabled: false,
+          },
+        },
+        dataLabels: { enabled: false },
+        grid: {
+          show: false,
+        },
+        legend: {
+          show: false,
+          position: "top",
+        },
+        tooltip: {
+          enabled: false,
+        },
+        xaxis: {
+          type: "datetime",
+          axisBorder: {
+            show: false,
+          },
+          axisTicks: {
+            show: false,
+          },
+          labels: {
+            show: false,
+          },
+        },
+        yaxis: {
+          labels: {
+            show: false,
+          },
+          logarithmic: true,
+          logBase: 10,
+        },
+      }}
+      series={data}
+      height="100%"
+    />
+  );
+}