From 4e6c0bfcb5471d4eef2ff3f4ea12e1c08dba846e Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sat, 24 Oct 2026 13:26:03 +0200
Subject: [PATCH] feat(ui): let users choose local or UTC chart tooltip times

---
 .../views/components/theme-controls.blade.php | 38 +++++++++++++++++++
 resources/views/layouts/base.blade.php        | 24 ++++++++++++
 .../dashboard/server-metrics-chart.blade.php  | 12 +-----
 .../views/livewire/fleet/metrics.blade.php    |  6 +--
 .../views/livewire/server/charts.blade.php    | 12 +-----
 .../traffic/_requests-chart.blade.php         | 12 +-----
 .../livewire/traffic/_sparkline.blade.php     | 12 +-----
 7 files changed, 67 insertions(+), 49 deletions(-)

diff --git a/resources/views/components/theme-controls.blade.php b/resources/views/components/theme-controls.blade.php
index 3bd2b1218c..d38ce756d7 100644
--- a/resources/views/components/theme-controls.blade.php
+++ b/resources/views/components/theme-controls.blade.php
@@ -208,6 +208,44 @@
         </div>
     </section>
 
+    <section class="application-settings-section">
+        <div class="application-settings-section-header">
+            <div>
+                <h2>Chart times</h2>
+                <p>Choose which times chart tooltips show.</p>
+            </div>
+        </div>
+        <div class="application-settings-section-body grid gap-3 sm:grid-cols-2">
+            @foreach ([
+                ['value' => 'local', 'label' => 'Your time', 'description' => 'Show the time in the time zone of this browser.', 'lines' => ['Oct 24, 12:30:33']],
+                ['value' => 'utc', 'label' => 'Your time and UTC', 'description' => 'Also show the UTC time. Use it to compare with server logs.', 'lines' => ['Your time: Oct 24, 12:30:33 GMT+2', 'UTC: Oct 24, 10:30:33 UTC']],
+            ] as $option)
+                <button type="button" @click="setChartTimes('{{ $option['value'] }}')"
+                    class="group overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-left transition-[border-color,box-shadow] hover:border-neutral-300 hover:shadow-sm dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:border-white/[0.12]"
+                    :class="chartTimes === '{{ $option['value'] }}'
+                        ? 'border-coollabs! bg-coollabs/[0.06]! ring-2 ring-coollabs/25 dark:border-brand-light! dark:bg-brand-light/[0.08]! dark:ring-brand-light/25'
+                        : ''">
+                    <div class="flex h-20 items-center justify-center border-b border-neutral-200 bg-neutral-50 px-4 dark:border-white/[0.07] dark:bg-black/15">
+                        <div class="rounded-md border border-neutral-300 bg-white px-2.5 py-1.5 text-[11px] leading-4 dark:border-white/15 dark:bg-[#181818]">
+                            <div class="text-black dark:text-fg">CPU: <span class="font-semibold">4.3%</span></div>
+                            @foreach ($option['lines'] as $line)
+                                <div class="text-neutral-500 dark:text-fg-dim">{{ $line }}</div>
+                            @endforeach
+                        </div>
+                    </div>
+                    <div class="p-3">
+                        <div class="flex items-center justify-between gap-2">
+                            <span class="text-sm font-semibold text-black dark:text-fg">{{ $option['label'] }}</span>
+                            <x-reicon name="check-circle" class="size-4 text-coollabs dark:text-brand-light"
+                                x-show="chartTimes === '{{ $option['value'] }}'" x-cloak />
+                        </div>
+                        <p class="mt-1 text-xs leading-5 text-neutral-500 dark:text-fg-dim">{{ $option['description'] }}</p>
+                    </div>
+                </button>
+            @endforeach
+        </div>
+    </section>
+
     {{-- Custom theme dialog: presets, a preview, four colors, and a share code. Save applies the draft. --}}
     <template x-teleport="body">
         <div x-show="dialogOpen" x-cloak @keydown.escape.window="dialogOpen = false"
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 1f74a406b9..0fc63e69a0 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -138,6 +138,25 @@
             root.style.setProperty('--theme-accent-foreground', window.themeAccentForeground(localStorage.themeColor));
             document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
         };
+        // Time lines for chart tooltips. By default only the browser time zone is shown;
+        // the "Chart times" option on the Appearance page adds the UTC time.
+        window.chartTooltipTime = (timestamp, { seconds = true } = {}) => {
+            const format = (timeZone) => new Date(timestamp).toLocaleString(undefined, {
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                ...(seconds ? { second: '2-digit' } : {}),
+                hourCycle: 'h23',
+                ...(timeZone ? { timeZone, timeZoneName: 'short' } : {}),
+            });
+            if (localStorage.getItem('chartTimes') !== 'utc') {
+                return `<div class="apexcharts-tooltip-custom-title">${format()}</div>`;
+            }
+            const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            return `<div class="apexcharts-tooltip-custom-title">Your time: ${format(localTimeZone)}</div>
+                <div class="apexcharts-tooltip-custom-title">UTC: ${format('UTC')}</div>`;
+        };
         // Shows the tooltip at the same time on every chart of a group while one of them is hovered.
         // ApexCharts' own chart.group needs equal widths and equal x ranges, so it does not
         // fit side-by-side cards. Instead, replay the hover as a mouse event at the matching x.
@@ -187,6 +206,7 @@
             pageWidth: localStorage.getItem('pageWidth') || 'centered',
             navStyle: localStorage.getItem('navStyle') === 'floating' ? 'floating' : 'default',
             navItems: localStorage.getItem('navItems') === 'flat' ? 'flat' : '3d',
+            chartTimes: localStorage.getItem('chartTimes') === 'utc' ? 'utc' : 'local',
             presets: window.customThemePresets,
             // The custom theme dialog edits a draft; Save applies it. A null draft is the built-in Dark theme.
             dialogOpen: false,
@@ -272,6 +292,10 @@
                 localStorage.setItem('navItems', style);
                 document.documentElement.dataset.navItems = style;
             },
+            setChartTimes(value) {
+                this.chartTimes = value;
+                localStorage.setItem('chartTimes', value);
+            },
         });
 
         document.addEventListener('livewire:navigated', window.applyStoredTheme);
diff --git a/resources/views/livewire/dashboard/server-metrics-chart.blade.php b/resources/views/livewire/dashboard/server-metrics-chart.blade.php
index afb1820e07..7b745267cf 100644
--- a/resources/views/livewire/dashboard/server-metrics-chart.blade.php
+++ b/resources/views/livewire/dashboard/server-metrics-chart.blade.php
@@ -92,23 +92,13 @@
                                 const memory = series[1][dataPointIndex];
                                 const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
                                 const formatPercent = value => Number.isFinite(value) ? `${Number(value.toFixed(1))}%` : '—';
-                                const formatLocalTimestamp = timestamp => new Date(timestamp).toLocaleString(undefined, {
-                                    hour12: false,
-                                    timeZoneName: 'short',
-                                });
-                                const formatUtcTimestamp = timestamp => new Date(timestamp).toLocaleString(undefined, {
-                                    hour12: false,
-                                    timeZone: 'UTC',
-                                    timeZoneName: 'short',
-                                });
 
                                 const dot = color => `<span style="display:inline-block;width:8px;height:8px;border-radius:9999px;margin-right:6px;flex:none;background:${color}"></span>`;
 
                                 return `<div class="apexcharts-tooltip-custom">
                                     <div class="apexcharts-tooltip-custom-value" style="display:flex;align-items:center">${dot('rgb(30, 144, 255)')}CPU: <span class="apexcharts-tooltip-value-bold" style="margin-left:4px">${formatPercent(cpu)}</span></div>
                                     <div class="apexcharts-tooltip-custom-value" style="display:flex;align-items:center">${dot('rgb(168, 85, 247)')}Memory: <span class="apexcharts-tooltip-value-bold" style="margin-left:4px">${formatPercent(memory)}</span></div>
-                                    <div class="apexcharts-tooltip-custom-title">Your time: ${formatLocalTimestamp(timestamp)}</div>
-                                    <div class="apexcharts-tooltip-custom-title">UTC: ${formatUtcTimestamp(timestamp)}</div>
+                                    ${window.chartTooltipTime(timestamp)}
                                 </div>`;
                             },
                         },
diff --git a/resources/views/livewire/fleet/metrics.blade.php b/resources/views/livewire/fleet/metrics.blade.php
index 9a9b8eb95d..cd1723fff7 100644
--- a/resources/views/livewire/fleet/metrics.blade.php
+++ b/resources/views/livewire/fleet/metrics.blade.php
@@ -380,9 +380,6 @@ $serverListboxOptions = array_merge(
                 };
                 const fmtRate = v => `${fmtBytes(v)}/s`;
 
-                const fmtLocalTime = ts => new Date(ts).toLocaleString(undefined, { hour12: false, timeZoneName: 'short' });
-                const fmtUtcTime = ts => new Date(ts).toLocaleString(undefined, { hour12: false, timeZone: 'UTC', timeZoneName: 'short' });
-
                 // The app strips the default ApexCharts tooltip background (utilities.css), so
                 // every chart must render its own `apexcharts-tooltip-custom` markup.
                 const customTooltip = formatter => ({ series, dataPointIndex, w }) => {
@@ -394,8 +391,7 @@ $serverListboxOptions = array_merge(
                         rows += `<div class="apexcharts-tooltip-custom-value">${w.globals.seriesNames[i]}: <span class="apexcharts-tooltip-value-bold">${formatter(value)}</span></div>`;
                     });
                     return `<div class="apexcharts-tooltip-custom">${rows}
-                        <div class="apexcharts-tooltip-custom-title">Your time: ${fmtLocalTime(timestamp)}</div>
-                        <div class="apexcharts-tooltip-custom-title">UTC: ${fmtUtcTime(timestamp)}</div>
+                        ${window.chartTooltipTime(timestamp)}
                     </div>`;
                 };
 
diff --git a/resources/views/livewire/server/charts.blade.php b/resources/views/livewire/server/charts.blade.php
index 822a6aa2c2..d626c883f9 100644
--- a/resources/views/livewire/server/charts.blade.php
+++ b/resources/views/livewire/server/charts.blade.php
@@ -125,15 +125,6 @@
                             };
                             const formatRate = value => `${formatBytes(value)}/s`;
 
-                            const formatLocalTimestamp = timestamp => new Date(timestamp).toLocaleString(undefined, {
-                                hour12: false,
-                                timeZoneName: 'short',
-                            });
-                            const formatUtcTimestamp = timestamp => new Date(timestamp).toLocaleString(undefined, {
-                                hour12: false,
-                                timeZone: 'UTC',
-                                timeZoneName: 'short',
-                            });
 
                             const chartOptions = (name, color, loadingText, formatter = formatPercent) => ({
                                 chart: {
@@ -226,8 +217,7 @@
 
                                         return `<div class="apexcharts-tooltip-custom">
                                             ${values.join('')}
-                                            <div class="apexcharts-tooltip-custom-title">Your time: ${formatLocalTimestamp(timestamp)}</div>
-                                            <div class="apexcharts-tooltip-custom-title">UTC: ${formatUtcTimestamp(timestamp)}</div>
+                                            ${window.chartTooltipTime(timestamp)}
                                         </div>`;
                                     },
                                 },
diff --git a/resources/views/livewire/traffic/_requests-chart.blade.php b/resources/views/livewire/traffic/_requests-chart.blade.php
index c06224bfe0..d1125d15c7 100644
--- a/resources/views/livewire/traffic/_requests-chart.blade.php
+++ b/resources/views/livewire/traffic/_requests-chart.blade.php
@@ -47,15 +47,6 @@
 
         // `24h` buckets are hourly, `7d`/`30d` daily — pick a matching axis/tooltip format.
         const timeFormat = range => (range === '24h' ? 'HH:mm' : 'dd MMM');
-        const formatLocalTimestamp = timestamp => new Date(timestamp).toLocaleString(undefined, {
-            hour12: false,
-            timeZoneName: 'short',
-        });
-        const formatUtcTimestamp = timestamp => new Date(timestamp).toLocaleString(undefined, {
-            hour12: false,
-            timeZone: 'UTC',
-            timeZoneName: 'short',
-        });
 
         const chart = new ApexCharts(el, {
             chart: {
@@ -108,8 +99,7 @@
 
                     return `<div class="apexcharts-tooltip-custom">
                         <div class="apexcharts-tooltip-custom-value">Requests: <span class="apexcharts-tooltip-value-bold">${requests.toLocaleString()}</span></div>
-                        <div class="apexcharts-tooltip-custom-title">Your time: ${formatLocalTimestamp(timestamp)}</div>
-                        <div class="apexcharts-tooltip-custom-title">UTC: ${formatUtcTimestamp(timestamp)}</div>
+                        ${window.chartTooltipTime(timestamp, { seconds: false })}
                     </div>`;
                 },
             },
diff --git a/resources/views/livewire/traffic/_sparkline.blade.php b/resources/views/livewire/traffic/_sparkline.blade.php
index 5999cc1b82..161dd2abb4 100644
--- a/resources/views/livewire/traffic/_sparkline.blade.php
+++ b/resources/views/livewire/traffic/_sparkline.blade.php
@@ -65,15 +65,6 @@
         init() {
             if (typeof ApexCharts === 'undefined') { return; }
             const o = this.opts(@js($initial), @js($initialCategories));
-            const formatLocalTimestamp = timestamp => new Date(timestamp).toLocaleString(undefined, {
-                hour12: false,
-                timeZoneName: 'short',
-            });
-            const formatUtcTimestamp = timestamp => new Date(timestamp).toLocaleString(undefined, {
-                hour12: false,
-                timeZone: 'UTC',
-                timeZoneName: 'short',
-            });
             const formatValue = value => {
                 if (value === null || value === undefined) { return '—'; }
                 const fmt = @js($format);
@@ -110,8 +101,7 @@
                         const timestamp = w.globals.seriesX[0][dataPointIndex];
                         return `<div class='apexcharts-tooltip-custom'>
                             <div class='apexcharts-tooltip-custom-value'>${@js($label)}: <span class='apexcharts-tooltip-value-bold'>${formatValue(value)}</span></div>
-                            <div class='apexcharts-tooltip-custom-title'>Your time: ${formatLocalTimestamp(timestamp)}</div>
-                            <div class='apexcharts-tooltip-custom-title'>UTC: ${formatUtcTimestamp(timestamp)}</div>
+                            ${window.chartTooltipTime(timestamp, { seconds: false })}
                         </div>`;
                     },
                 },