fix: update time format to include seconds and enhance chart configurations

Author: decoded-cipher

internal/store/store.go

@@ -130,7 +130,7 @@ func (s *Store) GetHistory(limit int) ([]Measurement, error) {
 			return nil, err
 		}
 		t, _ := time.Parse(time.RFC3339, ts)
-		m.Time = t.Format("15:04")
+		m.Time = t.Format("15:04:05")
 		results = append(results, m)
 	}
 

web/index.html

@@ -476,18 +476,25 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
         const isMd = window.innerWidth < 1024;
         const h = isSmall ? 180 : isMd ? 200 : 220;
 
+        const tooltipTheme = document.body.classList.contains("dark-mode") ? "dark" : "light";
+        const labelStyle = { colors: "var(--muted)", fontSize: isSmall ? "9px" : "10px" };
+        const tickCount = Math.min(times.length, isSmall ? 4 : 6);
+
         const base = {
-          chart: { background: "transparent", fontFamily: "'Inter',sans-serif", toolbar: { show: false }, height: h, animations: { speed: 600 } },
-          stroke: { curve: "smooth", width: 2.5 },
+          chart: { type: "area", background: "transparent", fontFamily: "'Inter',sans-serif", toolbar: { show: false }, height: h, animations: { speed: 400 }, zoom: { enabled: false } },
+          stroke: { curve: "smooth", width: 2 },
+          markers: { size: times.length <= 5 ? 4 : 0, hover: { size: 5 } },
           grid: { borderColor: "var(--border)", xaxis: { lines: { show: false } }, yaxis: { lines: { show: true } }, padding: { top: -8, right: 8, bottom: 0, left: 8 } },
           xaxis: {
             categories: times,
-            labels: { style: { colors: "var(--muted)", fontSize: isSmall ? "9px" : "10px" }, rotate: 0, hideOverlappingLabels: true, maxHeight: 30 },
+            tickAmount: tickCount,
+            labels: { style: labelStyle, rotate: 0, hideOverlappingLabels: true, maxHeight: 30 },
             axisBorder: { show: false }, axisTicks: { show: false },
           },
-          yaxis: { labels: { style: { colors: "var(--muted)", fontSize: isSmall ? "9px" : "10px" } } },
+          yaxis: { labels: { style: labelStyle }, forceNiceScale: true },
           legend: { position: "top", fontSize: "10px", labels: { colors: "var(--subtle)" }, markers: { width: 6, height: 6, radius: 2 }, itemMargin: { horizontal: 8 } },
-          tooltip: { theme: document.body.classList.contains("dark-mode") ? "dark" : "light", style: { fontSize: "11px" } },
+          tooltip: { theme: tooltipTheme, style: { fontSize: "11px" }, x: { show: true } },
+          dataLabels: { enabled: false },
         };
 
         const fillArea = (opacity = 0.12) => ({ type: "gradient", gradient: { shadeIntensity: 0, opacityFrom: opacity, opacityTo: 0.01, stops: [0, 95] } });
@@ -498,6 +505,7 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
           series: [{ name: "Latency (ms)", data: history.map(h => h.latency) }],
           colors: ["#3b82f6"],
           fill: fillArea(),
+          yaxis: { ...base.yaxis, min: 0 },
         });
         chartInstances.latency.render();
 
@@ -523,8 +531,8 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
           colors: ["#ef4444", "#f59e0b"],
           fill: fillArea(0.1),
           yaxis: [
-            { title: { text: "Loss %", style: { fontSize: "10px", color: "var(--muted)" } }, labels: { style: { colors: "var(--muted)", fontSize: "10px" } }, min: 0 },
-            { opposite: true, title: { text: "Jitter ms", style: { fontSize: "10px", color: "var(--muted)" } }, labels: { style: { colors: "var(--muted)", fontSize: "10px" } }, min: 0 },
+            { forceNiceScale: true, min: 0, title: { text: "Loss %", style: { fontSize: "10px", color: "var(--muted)" } }, labels: { style: { colors: "var(--muted)", fontSize: "10px" } } },
+            { opposite: true, forceNiceScale: true, min: 0, title: { text: "Jitter ms", style: { fontSize: "10px", color: "var(--muted)" } }, labels: { style: { colors: "var(--muted)", fontSize: "10px" } } },
           ],
         });
         chartInstances.loss.render();
@@ -535,6 +543,7 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
           series: [{ name: "DNS (ms)", data: history.map(h => h.dns) }],
           colors: ["#8b5cf6"],
           fill: fillArea(),
+          yaxis: { ...base.yaxis, min: 0 },
         });
         chartInstances.dns.render();
       }