Move traffic graph below device info and add zero axis line

assets/js/app.js

@@ -52,6 +52,7 @@ const SensorChart = {
     const ctx = canvas.getContext('2d')
     const unit = this.el.dataset.unit || '%'
     const autoScale = this.el.dataset.autoScale === 'true'
+    const showZeroLine = this.el.dataset.showZeroLine === 'true'
 
     // Generate colors for each dataset
     const colors = [
@@ -77,13 +78,27 @@ const SensorChart = {
 
     // Y-axis configuration
     const yAxisConfig = autoScale ? {
+      beginAtZero: showZeroLine,
       ticks: {
         callback: function(value) {
           return value + unit
         }
       },
       grid: {
-        color: 'rgba(0, 0, 0, 0.05)'
+        color: function(context) {
+          // Make the zero line more prominent
+          if (showZeroLine && context.tick.value === 0) {
+            return 'rgba(0, 0, 0, 0.3)'
+          }
+          return 'rgba(0, 0, 0, 0.05)'
+        },
+        lineWidth: function(context) {
+          // Make the zero line thicker
+          if (showZeroLine && context.tick.value === 0) {
+            return 2
+          }
+          return 1
+        }
       }
     } : {
       min: 0,

lib/towerops_web/live/equipment_live/show.html.heex

@@ -70,39 +70,6 @@
   <div class="mt-6">
     <%= case @active_tab do %>
       <% "overview" -> %>
-        <!-- Overall Traffic Chart -->
-        <%= if @traffic_chart_data do %>
-          <div class="mb-6 bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
-            <.link
-              navigate={
-                ~p"/orgs/#{@current_organization.slug}/equipment/#{@equipment.id}/graph/traffic"
-              }
-              class="block px-4 py-3 border-b border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-750 transition-colors"
-            >
-              <div class="flex items-center justify-between">
-                <div>
-                  <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
-                    Overall Traffic (24 Hours)
-                  </h3>
-                  <p class="text-xs text-zinc-600 dark:text-zinc-400 mt-1">
-                    Combined traffic across all interfaces
-                  </p>
-                </div>
-                <.icon name="hero-arrow-right" class="h-4 w-4 text-zinc-400" />
-              </div>
-            </.link>
-            <div class="p-4">
-              <div
-                id="traffic-chart"
-                phx-hook="SensorChart"
-                data-chart={@traffic_chart_data}
-                style="height: 300px;"
-              >
-                <canvas></canvas>
-              </div>
-            </div>
-          </div>
-        <% end %>
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
           <!-- Device Information -->
           <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
@@ -209,6 +176,35 @@
               </dl>
             </div>
           </div>
+          <!-- Overall Traffic Chart -->
+          <%= if @traffic_chart_data do %>
+            <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
+              <.link
+                navigate={
+                  ~p"/orgs/#{@current_organization.slug}/equipment/#{@equipment.id}/graph/traffic"
+                }
+                class="block px-4 py-3 border-b border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-750 transition-colors"
+              >
+                <div class="flex items-center justify-between">
+                  <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+                    Overall Traffic (24 Hours)
+                  </h3>
+                  <.icon name="hero-arrow-right" class="h-4 w-4 text-zinc-400" />
+                </div>
+              </.link>
+              <div class="p-4">
+                <div
+                  id="traffic-chart"
+                  phx-hook="SensorChart"
+                  data-chart={@traffic_chart_data}
+                  data-show-zero-line="true"
+                  style="height: 300px;"
+                >
+                  <canvas></canvas>
+                </div>
+              </div>
+            </div>
+          <% end %>
           <!-- Graphs and Metrics -->
           <div class="space-y-6">
             <!-- CPU Usage Chart -->

lib/towerops_web/live/graph_live/show.ex

@@ -55,6 +55,7 @@ defmodule ToweropsWeb.GraphLive.Show do
       end
 
     {title, unit, auto_scale} = get_chart_config(sensor_type)
+    show_zero_line = sensor_type == "traffic"
 
     socket
     |> assign(:equipment, equipment)
@@ -63,6 +64,7 @@ defmodule ToweropsWeb.GraphLive.Show do
     |> assign(:chart_data, chart_data)
     |> assign(:unit, unit)
     |> assign(:auto_scale, auto_scale)
+    |> assign(:show_zero_line, show_zero_line)
   end
 
   defp get_sensor_types_for_chart("processors"), do: ["cpu_load"]

lib/towerops_web/live/graph_live/show.html.heex

@@ -51,6 +51,7 @@
             data-chart={@chart_data}
             data-unit={@unit}
             data-auto-scale={@auto_scale}
+            data-show-zero-line={@show_zero_line}
             style="height: 600px;"
           >
             <canvas></canvas>