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

ui: fixing horizontal bar tooltip

Browse source
This commit is contained in:
nick-delirium 2025-01-07 17:13:43 +01:00
parent 1c200452b5
commit 52401fc1a7
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
2 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Charts/ColumnChart.tsx
View file

@ -41,10 +41,11 @@ function ColumnChart(props: ColumnChartProps) {
(window as any).__seriesValueMap[chartUuid.current] = {};
(window as any).__seriesColorMap = (window as any).__seriesColorMap ?? {};
(window as any).__seriesColorMap[chartUuid.current] = {};
(window as any).__yAxisData = (window as any).__yAxisData ?? {}
const { yAxisData, series } = buildColumnChart(chartUuid.current, data, compData);
(window as any).__yAxisData[chartUuid.current] = yAxisData
console.log(yAxisData)
chart.setOption({
...defaultOptions,
tooltip: {
@ -85,6 +86,7 @@ function ColumnChart(props: ColumnChartProps) {
obs.disconnect();
delete (window as any).__seriesValueMap[chartUuid.current];
delete (window as any).__seriesColorMap[chartUuid.current];
delete (window as any).__yAxisData[chartUuid.current];
};
}, [data, compData, label]);

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

@ -96,14 +96,17 @@ export function customTooltipFormatter(uuid: string) {
// { seriesName, dataIndex, data, marker, color, encode, ... }
if (!params) return '';
const { seriesName, dataIndex } = params;
const isPrevious = /^Previous\s+/.test(seriesName);
const baseName = seriesName.replace(/^Previous\s+/, '');
const partnerName = isPrevious ? baseName : `Previous ${baseName}`;
if (!Array.isArray(params.data)) {
const isPrevious = /Previous/.test(seriesName);
const categoryName = (window as any).__yAxisData?.[uuid]?.[dataIndex];
const fullname = isPrevious ? `Previous ${categoryName}` : categoryName;
const partnerName = isPrevious ? categoryName : `Previous ${categoryName}`;
const partnerValue = (window as any).__seriesValueMap?.[uuid]?.[
seriesName
partnerName
];
let str = `
<div class="flex flex-col gap-1 bg-white shadow border rounded p-2 z-50">
<div class="flex gap-2 items-center">
@ -113,7 +116,7 @@ export function customTooltipFormatter(uuid: string) {
width: 1rem;
height: 1rem;">
</div>
<div class="font-medium text-black">${seriesName}</div>
<div class="font-medium text-black">${fullname}</div>
</div>
<div style="border-left: 2px solid ${
@ -152,6 +155,8 @@ export function customTooltipFormatter(uuid: string) {
return str;
}
const isPrevious = /^Previous\s+/.test(seriesName);
const partnerName = isPrevious ? baseName : `Previous ${baseName}`;
// 'value' of the hovered point
const yKey = params.encode.y[0]; // "Series 1"
const value = params.data?.[yKey];