openreplay/frontend/app/components/Charts/sankeyUtils.ts
2025-02-03 14:40:15 +01:00

57 lines
No EOL
2 KiB
TypeScript

// sankeyUtils.ts
export function sankeyTooltip(echartNodes: any[], nodeValues: number[]) {
return (params: any) => {
if ('source' in params.data && 'target' in params.data) {
const sourceName = echartNodes[params.data.source].name;
const targetName = echartNodes[params.data.target].name;
const sourceValue = nodeValues[params.data.source];
return `
<div class="flex gap-2 w-fit px-2 bg-white items-center rounded-xl">
<div class="flex flex-col">
<div class="flex flex-col text-sm">
<div class="font-semibold">
<span class="text-base" style="color:#394eff">&#8592;</span> ${sourceName}
</div>
<div class="text-black">
${sourceValue} <span class="text-disabled-text">Sessions</span>
</div>
<div class="font-semibold mt-2">
<span class="text-base" style="color:#394eff">&#8594;</span> ${targetName}
</div>
<div class="flex items-baseline gap-2 text-black">
<span>${params.data.value} ( ${params.data.percentage.toFixed(2)}% )</span>
<span class="text-disabled-text">Sessions</span>
</div>
</div>
</div>
</div>
`;
}
if ('name' in params.data) {
return `
<div class="flex flex-col">
<div class="font-semibold text-sm flex gap-1 items-center"><span class="text-base" style="color:#394eff; font-family: sans-serif;">&#9632;&#xFE0E;</span> ${params.data.name}</div>
<div class="text-black text-sm">${params.value} <span class="text-disabled-text">Sessions</span></div>
</div>
`;
}
};
}
export const getEventPriority = (type: string): number => {
switch (type) {
case 'DROP':
return 3;
case 'OTHER':
return 2;
default:
return 1;
}
};
export const getNodeName = (eventType: string, nodeName: string | null): string => {
if (!nodeName) {
return eventType.charAt(0) + eventType.slice(1).toLowerCase();
}
return nodeName;
};