starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-11-06 13:10:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(metrics): custom chart tooltip so it has a background (default is stripped)

Browse Source
This commit is contained in:
Aditya Tripathi
2026-09-16 09:30:56 +00:00
parent 90e6efadad
commit 701c81b28f
1 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/fleet/metrics.blade.php
+20 -1
View File
@@ -251,6 +251,25 @@ $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 }) => {
const timestamp = w.globals.seriesX[0]?.[dataPointIndex];
let rows = '';
series.forEach((s, i) => {
const value = s[dataPointIndex];
if (value === null || value === undefined) { return; }
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>
</div>`;
};
const baseOptions = (series, colors, formatter) => ({
chart: { height: 240, type: 'area', toolbar: { show: false }, zoom: { enabled: false }, background: 'transparent', animations: { enabled: true } },
series,
@@ -263,7 +282,7 @@ $serverListboxOptions = array_merge(
xaxis: { type: 'datetime', labels: { datetimeUTC: true, style: { colors: axisColor } } },
yaxis: { min: 0, max: max => max > 0 ? max * 1.2 : 1, forceNiceScale: true, tickAmount: 4, labels: { style: { colors: axisColor }, formatter } },
noData: { text: 'No data for this range', style: { color: axisColor } },
tooltip: { x: { format: 'yyyy-MM-dd HH:mm' } },
tooltip: { shared: true, intersect: false, marker: { show: false }, custom: customTooltip(formatter) },
});
const initial = @js($chartData);