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

ui: add timestamp for comp tooltip row

Browse source
This commit is contained in:
nick-delirium 2025-01-06 17:28:45 +01:00
parent 1f3bb2b33c
commit 9b836ce88e
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
4 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Charts/BarChart.tsx
View file

@ -25,7 +25,7 @@ function ORBarChart(props: BarChartProps) {
const categories = buildCategories(props.data);
const { datasets, series } = buildBarDatasetsAndSeries(props, props.horizontal ?? false);
initWindowStorages(chartUuid.current, categories, props.data.chart);
initWindowStorages(chartUuid.current, categories, props.data.chart, props.compData?.chart ?? []);
series.forEach((s: any) => {
(window as any).__seriesColorMap[chartUuid.current][s.name] = s.itemStyle?.color ?? '#999';
const ds = datasets.find((d) => d.id === s.datasetId);
@ -76,6 +76,7 @@ function ORBarChart(props: BarChartProps) {
delete (window as any).__seriesColorMap[chartUuid.current];
delete (window as any).__categoryMap[chartUuid.current];
delete (window as any).__timestampMap[chartUuid.current];
delete (window as any).__timestampCompMap[chartUuid.current];
};
}, [props.data, props.compData, props.horizontal]);

3
frontend/app/components/Charts/LineChart.tsx
View file

@ -25,7 +25,7 @@ function ORLineChart(props: Props) {
const categories = buildCategories(props.data);
const { datasets, series } = buildDatasetsAndSeries(props);
initWindowStorages(chartUuid.current, categories, props.data.chart);
initWindowStorages(chartUuid.current, categories, props.data.chart, props.compData?.chart ?? []);
series.forEach((s: any) => {
if (props.isArea) {
@ -89,6 +89,7 @@ function ORLineChart(props: Props) {
delete (window as any).__seriesColorMap[chartUuid.current];
delete (window as any).__categoryMap[chartUuid.current];
delete (window as any).__timestampMap[chartUuid.current];
delete (window as any).__timestampCompMap[chartUuid.current];
};
}, [props.data, props.compData]);

6
frontend/app/components/Charts/init.ts
View file

@ -66,10 +66,11 @@ const defaultOptions = {
},
}
export function initWindowStorages(chartUuid: string, categories: string[] = [], chartArr: any[] = []) {
export function initWindowStorages(chartUuid: string, categories: string[] = [], chartArr: any[] = [], compChartArr: any[] = []) {
(window as any).__seriesValueMap = (window as any).__seriesValueMap ?? {};
(window as any).__seriesColorMap = (window as any).__seriesColorMap ?? {};
(window as any).__timestampMap = (window as any).__timestampMap ?? {};
(window as any).__timestampCompMap = (window as any).__timestampCompMap ?? {};
(window as any).__categoryMap = (window as any).__categoryMap ?? {};
if (!(window as any).__seriesColorMap[chartUuid]) {
@ -84,6 +85,9 @@ export function initWindowStorages(chartUuid: string, categories: string[] = [],
if (!(window as any).__timestampMap[chartUuid]) {
(window as any).__timestampMap[chartUuid] = chartArr.map((item) => item.timestamp);
}
if (!(window as any).__timestampCompMap[chartUuid]) {
(window as any).__timestampCompMap[chartUuid] = compChartArr.map((item) => item.timestamp);
}
}
export { echarts, defaultOptions };

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

@ -55,15 +55,19 @@ export function customTooltipFormatter(uuid: string) {
const isPrevious = /^Previous\s+/.test(seriesName);
const baseName = seriesName.replace(/^Previous\s+/, '');
const partnerName = isPrevious ? baseName : `Previous ${baseName}`;
const timestamp = (window as any).__timestampMap?.[uuid]?.[dataIndex];
// Get partner’s value from some global map
const partnerName = isPrevious ? baseName : `Previous ${baseName}`;
const partnerVal = (window as any).__seriesValueMap?.[uuid]?.[partnerName]?.[dataIndex];
const timestamp = (window as any).__timestampMap?.[uuid]?.[dataIndex];
const partnerTimestamp = (window as any).__timestampCompMap?.[uuid]?.[dataIndex];
const categoryLabel = (window as any).__categoryMap[uuid]
? (window as any).__categoryMap[uuid][dataIndex]
: dataIndex;
const firstTs = isPrevious ? partnerTimestamp : timestamp;
const secondTs = isPrevious ? timestamp : partnerTimestamp;
let tooltipContent = `
<div class="flex flex-col gap-1 bg-white shadow border rounded p-2 z-50">
<div class="flex gap-2 items-center">
@ -78,7 +82,7 @@ export function customTooltipFormatter(uuid: string) {
<div style="border-left: 2px solid ${params.color};" class="flex flex-col px-2 ml-2">
<div class="text-neutral-600 text-sm">
${isPrevious ? '' : timestamp ? formatTimeOrDate(timestamp) : categoryLabel}
${firstTs ? formatTimeOrDate(firstTs) : categoryLabel}
</div>
<div class="flex items-center gap-1">
<div class="font-medium text-black">${value ?? '—'}</div>
@ -101,7 +105,7 @@ export function customTooltipFormatter(uuid: string) {
</div>
<div style="border-left: 2px dashed ${partnerColor};" class="flex flex-col px-2 ml-2">
<div class="text-neutral-600 text-sm">
${!isPrevious ? '' : timestamp ? formatTimeOrDate(timestamp) : categoryLabel}
${secondTs ? formatTimeOrDate(secondTs) : categoryLabel}
</div>
<div class="flex items-center gap-1">
<div class="font-medium">${partnerVal ?? '—'}</div>