jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: show dot in timeline if there's only one entry

Browse source
This commit is contained in:
nick-delirium 2025-05-30 16:59:53 +02:00
parent 6ea7ca6aa2
commit 66b3708cce
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
1 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/app/components/Charts/utils.ts
View file

@ -102,18 +102,18 @@ export function customTooltipFormatter(uuid: string) {
<div class="flex flex-col gap-1 bg-white shadow border rounded p-2 z-50"> <div class="flex flex-col gap-1 bg-white shadow border rounded p-2 z-50">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<div style=" <div style="
border-radius: 99px; border-radius: 99px;
background: ${params.color}; background: ${params.color};
width: 1rem; width: 1rem;
height: 1rem;"> height: 1rem;">
</div> </div>
<div class="font-medium text-black">${fullname}</div> <div class="font-medium text-black">${fullname}</div>
</div> </div>
<div style="border-left: 2px solid ${ <div style="border-left: 2px solid ${
params.color params.color
};" class="flex flex-col px-2 ml-2"> };" class="flex flex-col px-2 ml-2">
<div class="text-neutral-600 text-sm"> <div class="text-neutral-600 text-sm">
Total: Total:
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
@ -127,7 +127,7 @@ export function customTooltipFormatter(uuid: string) {
(window as any).__seriesColorMap?.[uuid]?.[partnerName] || '#999'; (window as any).__seriesColorMap?.[uuid]?.[partnerName] || '#999';
str += ` str += `
<div style="border-left: 2px dashed ${partnerColor};" class="flex flex-col px-2 ml-2"> <div style="border-left: 2px dashed ${partnerColor};" class="flex flex-col px-2 ml-2">
<div class="text-neutral-600 text-sm"> <div class="text-neutral-600 text-sm">
${isPrevious ? 'Current' : 'Previous'} Total: ${isPrevious ? 'Current' : 'Previous'} Total:
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
@ -168,9 +168,9 @@ export function customTooltipFormatter(uuid: string) {
<div class="flex flex-col gap-1 bg-white shadow border rounded p-2 z-50"> <div class="flex flex-col gap-1 bg-white shadow border rounded p-2 z-50">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<div style=" <div style="
border-radius: 99px; border-radius: 99px;
background: ${params.color}; background: ${params.color};
width: 1rem; width: 1rem;
height: 1rem;"> height: 1rem;">
</div> </div>
<div class="font-medium text-black">${seriesName}</div> <div class="font-medium text-black">${seriesName}</div>
@ -179,7 +179,7 @@ export function customTooltipFormatter(uuid: string) {
<div style="border-left: 2px solid ${ <div style="border-left: 2px solid ${
params.color params.color
};" class="flex flex-col px-2 ml-2"> };" class="flex flex-col px-2 ml-2">
<div class="text-neutral-600 text-sm"> <div class="text-neutral-600 text-sm">
${firstTs ? formatTimeOrDate(firstTs) : categoryLabel} ${firstTs ? formatTimeOrDate(firstTs) : categoryLabel}
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
@ -194,7 +194,7 @@ export function customTooltipFormatter(uuid: string) {
(window as any).__seriesColorMap?.[uuid]?.[partnerName] || '#999'; (window as any).__seriesColorMap?.[uuid]?.[partnerName] || '#999';
tooltipContent += ` tooltipContent += `
<div style="border-left: 2px dashed ${partnerColor};" class="flex flex-col px-2 ml-2"> <div style="border-left: 2px dashed ${partnerColor};" class="flex flex-col px-2 ml-2">
<div class="text-neutral-600 text-sm"> <div class="text-neutral-600 text-sm">
${secondTs ? formatTimeOrDate(secondTs) : categoryLabel} ${secondTs ? formatTimeOrDate(secondTs) : categoryLabel}
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
@ -229,13 +229,13 @@ function buildCompareTag(val: number, prevVal: number): string {
return ` return `
<div style=" <div style="
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
background: ${tagColor}; background: ${tagColor};
color: ${arrowColor}; color: ${arrowColor};
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-size: 0.75rem;"> font-size: 0.75rem;">
<span>${arrow}</span> <span>${arrow}</span>
<span>${absDelta}</span> <span>${absDelta}</span>
@ -290,7 +290,7 @@ export function createSeries(
datasetId, datasetId,
encode: { x: 'idx', y: fullName }, encode: { x: 'idx', y: fullName },
lineStyle: dashed ? { type: 'dashed' } : undefined, lineStyle: dashed ? { type: 'dashed' } : undefined,
showSymbol: false, showSymbol: data.chart.length === 1,
// custom flag to hide prev data from legend // custom flag to hide prev data from legend
_hideInLegend: hideFromLegend, _hideInLegend: hideFromLegend,
itemStyle: { opacity: 1 }, itemStyle: { opacity: 1 },