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/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%"
+    />
+  );
+}