openreplay/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx

import React from 'react';
import { formatTimeOrDate } from 'App/date';
import cn from 'classnames';
import { ArrowUp, ArrowDown } from 'lucide-react';

interface PayloadItem {
  hide?: boolean;
  name: string;
  value: number;
  prevValue?: number;
  color?: string;
  payload?: any;
}

interface Props {
  active: boolean;
  payload: PayloadItem[];
  label: string;
  hoveredSeries: string | null;
}

function CustomTooltip(props: Props) {
  const { active, payload, label, hoveredSeries } = props;
  if (!active || !payload?.length || !hoveredSeries) return null;

  // Find the current and comparison payloads
  const currentPayload = payload.find(p => p.name === hoveredSeries);
  const comparisonPayload = payload.find(p =>
    p.name === `${hoveredSeries.replace(' (Comparison)', '')} (Comparison)` ||
    p.name === `${hoveredSeries} (Comparison)`
  );

  if (!currentPayload) return null;

  // Create transformed array with comparison data
  const transformedArray = [{
    ...currentPayload,
    prevValue: comparisonPayload ? comparisonPayload.value : null
  }];

  const isHigher = (item: { value: number; prevValue: number }) =>
    item.prevValue !== null && item.prevValue < item.value;

  const getPercentDelta = (val: number, prevVal: number) =>
    (((val - prevVal) / prevVal) * 100).toFixed(2);

  return (
    <div className={'flex flex-col gap-1 bg-white shadow border rounded p-2 z-50'}>
      {transformedArray.map((p, index) => (
        <React.Fragment key={p.name + index}>
          <div className={'flex gap-2 items-center'}>
            <div
              style={{ borderRadius: 99, background: p.color }}
              className={'h-5 w-5 flex items-center justify-center'}
            >
              <div className={'invert text-sm'}>{index + 1}</div>
            </div>
            <div className={'font-medium'}>{p.name}</div>
          </div>
          <div
            style={{ borderLeft: `2px solid ${p.color}` }}
            className={'flex flex-col px-2 ml-2 '}
          >
            <div className={'text-neutral-600 text-sm'}>
              {label}, {formatTimeOrDate(p.payload.timestamp)}
            </div>
            <div className={'flex items-center gap-1'}>
              <div className={'font-medium'}>{p.value}</div>
              {p.prevValue !== null && (
                <CompareTag
                  isHigher={isHigher(p)}
                  absDelta={Math.abs(p.value - p.prevValue)}
                  delta={getPercentDelta(p.value, p.prevValue)}
                />
              )}
            </div>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

export function CompareTag({
  isHigher,
  absDelta,
  delta,
}: {
  isHigher: boolean;
  absDelta?: number | string;
  delta?: string;
}) {
  return (
    <div
      className={cn(
        'px-2 py-1 w-fit rounded flex items-center gap-1',
        isHigher ? 'bg-green2/10 text-xs' : 'bg-red2/10 text-xs'
      )}
    >
      {!isHigher ? <ArrowDown size={12} /> : <ArrowUp size={12} />}
      <div>{absDelta}</div>
      <div>({delta}%)</div>
    </div>
  );
}

export default CustomTooltip;