// nivo import { BarTooltipProps } from "@nivo/bar"; import { DATE_KEYS } from "constants/analytics"; import { renderMonthAndYear } from "helpers/analytics.helper"; // types import { IAnalyticsParams, IAnalyticsResponse } from "types"; type Props = { datum: BarTooltipProps<any>; analytics: IAnalyticsResponse; params: IAnalyticsParams; }; export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) => { let tooltipValue: string | number = ""; const renderAssigneeName = (assigneeId: string): string => { const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId); if (!assignee) return "No assignee"; return assignee.assignees__display_name || "No assignee"; }; if (params.segment) { if (DATE_KEYS.includes(params.segment)) tooltipValue = renderMonthAndYear(datum.id); else tooltipValue = datum.id; } else { if (DATE_KEYS.includes(params.x_axis)) tooltipValue = datum.indexValue; else tooltipValue = datum.id === "count" ? "Issue count" : "Estimate"; } return ( <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs"> <span className="h-3 w-3 rounded" style={{ backgroundColor: datum.color, }} /> <span className={`font-medium text-custom-text-200 ${ params.segment ? params.segment === "priority" || params.segment === "state__group" ? "capitalize" : "" : params.x_axis === "priority" || params.x_axis === "state__group" ? "capitalize" : "" }`} > {params.segment === "assignees__id" ? renderAssigneeName(tooltipValue.toString()) : tooltipValue} : </span> <span>{datum.value}</span> </div> ); };