Skip to content
Domphy

chartTooltipIndicatorNone

A Charts block/component from shadcn/ui — clean-room reimplemented for Domphy (see methodology). Call chartTooltipIndicatorNone() with no arguments for a working demo, or edit the code below live.

Props

PropTypeDescription
dataActivityDayPoint[]
seriesActivitySeriesEntry[]
showCursorboolean
defaultOpenIndexnumber | null
titlestring
descriptionstring
Implementation notes

Full port. Default date header kept; indicator set to 'none' so rows render as bare series-name + value pairs, using the same shared indicator switch as the other indicator-style recipes.

Status: ported · Reference: shadcn/ui original

// shadcn/ui "charts/tooltip" (indicator-none recipe) — clean-room
// reimplementation.
//
// Header shows the raw x-axis category value (the ISO date) — upstream's
// ChartTooltipContent gets no labelFormatter — and the leading color swatch
// is dropped entirely, so rows read as just the series name followed by its
// monospace/tabular value.
//
// Implemented purely from the block's public functional/visual spec — no
// upstream shadcn/ui source was viewed or copied.

import type { DomphyElement } from "@domphy/core";
import {
  ACTIVITY_SERIES_CONFIG,
  ACTIVITY_TOOLTIP_DATA,
  type ActivityDayPoint,
  type ActivitySeriesEntry,
  activityBarOption,
  activityTooltipCard,
  activityTooltipFormatter,
  activityTooltipPlot,
  formatWeekdayShort,
} from "./chart-tooltip-shared.js";

export interface ChartTooltipIndicatorNoneProps {
  data?: ActivityDayPoint[];
  series?: ActivitySeriesEntry[];
  showCursor?: boolean;
  defaultOpenIndex?: number | null;
  title?: string;
  description?: string;
}

/**
 * shadcn/ui "charts/tooltip" indicator-none recipe — no leading swatch, just
 * series name + value. Call with no arguments for a working demo.
 */
function chartTooltipIndicatorNone(
  props: ChartTooltipIndicatorNoneProps = {},
): DomphyElement<"div"> {
  const {
    data = ACTIVITY_TOOLTIP_DATA,
    series = ACTIVITY_SERIES_CONFIG,
    showCursor = false,
    defaultOpenIndex = 1,
    title = "Bar Chart - Tooltip Indicator None",
    description = "No color swatch, just series name and value",
  } = props;

  const categories = data.map((point) => formatWeekdayShort(point.date));
  const formatter = activityTooltipFormatter(data, series, {
    indicator: "none",
    // Upstream ChartTooltipContent receives no labelFormatter, so the header
    // shows the raw category value (the ISO date, e.g. "2024-07-16"), not a
    // reformatted one — an identity formatter reproduces that verbatim.
    labelMode: "custom",
    labelFormatter: (isoDate) => isoDate,
    // Value cell (mono/medium/tabular + toLocaleString) comes from the shared
    // default plainValueRenderer, which matches upstream ChartTooltipContent.
  });
  const option = activityBarOption({
    data,
    categories,
    series,
    showCursor,
    formatter,
  });

  return activityTooltipCard({
    title,
    description,
    plot: activityTooltipPlot({ option, categories, defaultOpenIndex }),
  });
}

export { chartTooltipIndicatorNone };

← Back to shadcn/ui catalog