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/types/graph.ts

@@ -0,0 +1,9 @@
+export type GraphDataPoint = {
+  x: Date;
+  y: number;
+};
+
+export type GraphData = {
+  name?: string;
+  data: GraphDataPoint[];
+};

web/src/types/history.ts

@@ -56,6 +56,12 @@ interface HistoryFilter extends FilterType {
   detailLevel: "normal" | "extra" | "full";
 }
 
+type HistoryTimeline = {
+  start: number;
+  end: number;
+  playbackItems: TimelinePlayback[];
+};
+
 type TimelinePlayback = {
   camera: string;
   range: { start: number; end: number };

web/src/types/record.ts

@@ -1,11 +1,30 @@
 type Recording = {
-    id: string,
-    camera: string,
-    start_time: number,
-    end_time: number,
-    path: string,
-    segment_size: number,
-    motion: number,
-    objects: number,
-    dBFS: number,
-}
+  id: string;
+  camera: string;
+  start_time: number;
+  end_time: number;
+  path: string;
+  segment_size: number;
+  motion: number;
+  objects: number;
+  dBFS: number;
+};
+
+type RecordingSegment = {
+  id: string;
+  start_time: number;
+  end_time: number;
+  motion: number;
+  objects: number;
+  segment_size: number;
+};
+
+type RecordingActivity = {
+  [hour: number]: RecordingSegmentActivity[];
+};
+
+type RecordingSegmentActivity = {
+  date: number;
+  count: number;
+  type: "motion" | "objects";
+};