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

<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  active_page="devices"
>
  <div class="mb-6">
    <!-- Header with back button -->
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-4">
        <.link
          navigate={~p"/devices/#{@device_id}"}
          class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
        >
          <.icon name="hero-arrow-left" class="h-5 w-5" />
        </.link>
        <div>
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{@chart_title}</h1>
          <p class="text-sm text-gray-600 dark:text-gray-400">{@device.name}</p>
        </div>
      </div>
    </div>
    <!-- Date Range Selector -->
    <div class="flex items-center gap-2 mb-6">
      <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Time Range:</span>
      <div class="flex gap-1">
        <%= for {label, value} <- [{"Live", "live"}, {"1 Hour", "1h"}, {"6 Hours", "6h"}, {"12 Hours", "12h"}, {"24 Hours", "24h"}, {"7 Days", "7d"}, {"30 Days", "30d"}] do %>
          <button
            phx-click="change_range"
            phx-value-range={value}
            class={[
              "px-3 py-1.5 text-sm font-medium rounded border transition-all duration-200",
              if value == "live" do
                if @range == "live" do
                  "bg-green-500 text-white border-green-500 shadow-lg shadow-green-500/50"
                else
                  "bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 text-green-700 dark:text-green-400 border-green-300 dark:border-green-700 hover:from-green-100 hover:to-emerald-100 dark:hover:from-green-900/30 dark:hover:to-emerald-900/30 hover:border-green-400 dark:hover:border-green-600 hover:shadow-md hover:shadow-green-500/20 font-semibold"
                end
              else
                if @range == value do
                  "bg-blue-500 text-white border-blue-500"
                else
                  "bg-white dark:bg-gray-800/50 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-gray-800"
                end
              end
            ]}
          >
            {label}
          </button>
        <% end %>
      </div>
    </div>
    <!-- Live Mode Indicator -->
    <%= if @is_live_mode do %>
      <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
        <span class="relative flex h-3 w-3">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
          </span>
          <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
        </span>
        <span>Live polling (1 second interval, 5 minute window)</span>
      </div>
    <% end %>
    <!-- Large Chart -->
    <%= if @chart_data do %>
      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
        <div class="p-6">
          <div
            id="detail-chart"
            phx-hook="SensorChart"
            data-chart={@chart_data}
            data-unit={@unit}
            data-auto-scale={to_string(@auto_scale)}
            data-show-zero-line={to_string(@show_zero_line)}
            data-dual-axis={to_string(@dual_axis)}
            data-range={@range}
            style="height: 600px;"
          >
            <canvas></canvas>
          </div>
          <%= if @max_value && @min_value do %>
            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-white/10 flex justify-center gap-8 text-sm">
              <div class="flex items-center gap-2">
                <span class="font-medium text-gray-700 dark:text-gray-300">Max:</span>
                <span class="text-gray-900 dark:text-white font-semibold">
                  {format_value(@max_value, @unit)}
                </span>
              </div>
              <div class="flex items-center gap-2">
                <span class="font-medium text-gray-700 dark:text-gray-300">Min:</span>
                <span class="text-gray-900 dark:text-white font-semibold">
                  {format_value(@min_value, @unit)}
                </span>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    <% else %>
      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12">
        <div class="text-center">
          <.icon name="hero-chart-bar" class="mx-auto h-12 w-12 text-gray-400" />
          <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
            {t("No sensor data available")}
          </h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {t("This device doesn't have any sensors of this type.")}
          </p>
        </div>
      </div>
    <% end %>
  </div>
</Layouts.authenticated>