Improve graph using pandas (#9234)

* Ensure viewport is always full screen

* Protect against hour with no cards and ensure data is consistent

* Reduce grouped up image refreshes

* Include current hour and fix scrubbing bugginess

* Scroll initially selected timeline in to view

* Expand timelne class type

* Use poster image for preview on video player instead of using separate image view

* Fix available streaming modes

* Incrase timing for grouping timline items

* Fix audio activity listener

* Fix player not switching views correctly

* Use player time to convert to timeline time

* Update sub labels for previous timeline items

* Show mini timeline bar for non selected items

* Rewrite desktop timeline to use separate dynamic video player component

* Extend improvements to mobile as well

* Improve time formatting

* Fix scroll

* Fix no preview case

* Mobile fixes

* Audio toggle fixes

* More fixes for mobile

* Improve scaling of graph motion activity

* Add keyboard shortcut hook and support shortcuts for playback page

* Fix sizing of dialog

* Improve height scaling of dialog

* simplify and fix layout system for timeline

* Fix timeilne items not working

* Implement basic Frigate+ submitting from timeline

web/src/components/graph/TimelineGraph.tsx

@@ -4,17 +4,34 @@ import Chart from "react-apexcharts";
 type TimelineGraphProps = {
   id: string;
   data: GraphData[];
+  start: number;
+  end: number;
+  objects: number[];
 };
 
 /**
  * A graph meant to be overlaid on top of a timeline
  */
-export default function TimelineGraph({ id, data }: TimelineGraphProps) {
+export default function TimelineGraph({
+  id,
+  data,
+  start,
+  end,
+  objects,
+}: TimelineGraphProps) {
   return (
     <Chart
       type="bar"
       options={{
-        colors: ["#991b1b", "#06b6d4", "#ea580c"],
+        colors: [
+          ({ dataPointIndex }: { dataPointIndex: number }) => {
+            if (objects.includes(dataPointIndex)) {
+              return "#06b6d4";
+            } else {
+              return "#991b1b";
+            }
+          },
+        ],
         chart: {
           id: id,
           selection: {
@@ -30,11 +47,27 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
         dataLabels: { enabled: false },
         grid: {
           show: false,
+          padding: {
+            bottom: 2,
+            top: -12,
+            left: -20,
+            right: 0,
+          },
         },
         legend: {
           show: false,
           position: "top",
         },
+        plotOptions: {
+          bar: {
+            columnWidth: "100%",
+            barHeight: "100%",
+            hideZeroBarsWhenGrouped: true,
+          },
+        },
+        stroke: {
+          width: 0,
+        },
         tooltip: {
           enabled: false,
         },
@@ -49,13 +82,16 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
           labels: {
             show: false,
           },
+          min: start,
+          max: end,
         },
         yaxis: {
+          axisBorder: {
+            show: false,
+          },
           labels: {
             show: false,
           },
-          logarithmic: true,
-          logBase: 10,
         },
       }}
       series={data}