Add more custom colors and improve graph

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/graph/TimelineGraph.tsx

@@ -16,16 +16,35 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
       options={{
         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,
           },
@@ -37,7 +56,7 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
         },
       }}
       series={data}
-      height={100}
+      height="100%"
     />
   );
 }

web/tailwind.config.js

@@ -22,6 +22,10 @@ module.exports = {
         ring: "hsl(var(--ring))",
         danger: "#ef4444",
         success: "#22c55e",
+        // detection colors
+        motion: "#991b1b",
+        object: "#06b6d4",
+        audio: "#ea580c",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {