113 lines
4.9 KiB
Text
113 lines
4.9 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
active_page="devices"
|
|
unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
|
|
>
|
|
<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"
|
|
phx-update="ignore"
|
|
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>
|