ChartTooltip

import { ChartTooltip } from "@nexera-ui/react";

export function SeriesMarkers() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      {(["dot", "square", "line", "dashed"] as const).map((shape) => (
        <ChartTooltip
          key={shape}
          title={`shape="${shape}"`}
          rows={Array.from({ length: 8 }, (_, seriesIndex) => ({
            seriesIndex,
            shape,
            label: `Series ${String(seriesIndex + 1)}`,
            value: String((seriesIndex + 1) * 12),
          }))}
        />
      ))}
    </div>
  );
}

import { ChartTooltip } from "@nexera-ui/react";

const figmaRows: readonly ChartTooltipRow[] = [
  { seriesIndex: 0, label: "Headcount", value: "121" },
  { seriesIndex: 7, label: "Hires", value: "6" },
];

export function TitleRowsAndNote() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      <ChartTooltip title="Only a caption" />
      <ChartTooltip rows={[{ label: "Total", value: "1,204" }]} />
      <ChartTooltip title="Q3 2026" rows={figmaRows}>
        Includes 4 contractors.
      </ChartTooltip>
    </div>
  );
}

import { ChartTooltip } from "@nexera-ui/react";

<ChartTooltip
  title="Week 32, the week of the annual company offsite in Lisbon"
  rows={[
    {
      seriesIndex: 0,
      label: "Average time to hire across all departments and locations",
      value: "34 days",
    },
    { seriesIndex: 1, shape: "square", label: "Offers accepted", value: "81 %" },
  ]}
/>;

import { ChartTooltip } from "@nexera-ui/react";

<ChartTooltip
  title="أغسطس 2026"
  rows={[
    { seriesIndex: 0, label: "عدد الموظفين", value: "١٢١" },
    { seriesIndex: 1, label: "التعيينات", value: "٦" },
  ]}
/>;

import { useRef, useState, type KeyboardEvent } from "react";
import { ChartTooltip, placeChartTooltip, useChartTooltip } from "@nexera-ui/react";

const DATA = [96, 104, 99, 112, 121, 128] as const;

const MONTHS = ["Mar", "Apr", "May", "Jun", "Jul", "Aug"] as const;

const WIDTH = 480;

const HEIGHT = 160;

const PAD = 24;

export function OnDataPoints() {
  const tooltip = useChartTooltip();
  const [stop, setStop] = useState(0);
  const points = useRef<(SVGCircleElement | null)[]>([]);
  const [tooltipRef, tooltipSize] = useContainerSize({ width: 0, height: 0 });
  const x = (index: number) => PAD + (index * (WIDTH - 2 * PAD)) / (DATA.length - 1);
  const y = scaleLinear([90, 130], [HEIGHT - PAD, PAD]);
  const active = tooltip.activeKey;
  const placement =
    active === null
      ? null
      : placeChartTooltip({
          anchor: { x: x(active), y: y(DATA[active] ?? 0) },
          tooltip: tooltipSize,
          bounds: { width: WIDTH, height: HEIGHT },
        });
  const move = (event: KeyboardEvent, index: number) => {
    const next =
      event.key === "ArrowRight"
        ? Math.min(index + 1, DATA.length - 1)
        : event.key === "ArrowLeft"
          ? Math.max(index - 1, 0)
          : index;
    if (next === index) return;
    event.preventDefault();
    setStop(next);
    points.current[next]?.focus();
  };
  const style = seriesStyle(0);
  return (
    <div className="relative" style={{ width: WIDTH, height: HEIGHT }}>
      <svg
        role="group"
        aria-label="Headcount, last six months"
        width={WIDTH}
        height={HEIGHT}
        direction="ltr"
      >
        <path
          d={linePath(DATA.map((value, index) => ({ x: x(index), y: y(value) })))}
          fill="none"
          strokeWidth={2.5}
          className={style.stroke}
        />
        {DATA.map((value, index) => (
          <circle
            key={MONTHS[index]}
            ref={(node) => {
              points.current[index] = node;
            }}
            role="img"
            aria-label={`${MONTHS[index] ?? ""} 2026, Headcount ${String(value)}`}
            tabIndex={index === stop ? 0 : -1}
            cx={x(index)}
            cy={y(value)}
            r={active === index ? 6 : 4}
            className={`${style.fill} outline-hidden focus-visible:stroke-primary focus-visible:stroke-2`}
            onKeyDown={(event) => {
              move(event, index);
            }}
            {...tooltip.getTriggerProps(index)}
          />
        ))}
      </svg>
      {active !== null && placement !== null ? (
        <ChartTooltip
          {...tooltip.tooltipProps}
          ref={tooltipRef}
          title={`${MONTHS[active] ?? ""} 2026`}
          rows={[{ seriesIndex: 0, label: "Headcount", value: String(DATA[active] ?? 0) }]}
          style={{ position: "absolute", left: placement.left, top: placement.top }}
        />
      ) : null}
    </div>
  );
}