@plenustech/design-system 0.2.2 → 0.2.4

package/dist/types/components/charts/ChartRadial/ChartRadial.d.ts

@@ -14,6 +14,8 @@ export interface ChartRadialProps {
     emptyMessage?: string;
     /** Angulo final da volta, em graus a partir do topo. Meia-lua usa 180. */
     endAngle?: number;
+    /** Formato dos valores no balao. Sem ele, vale o `formatValue`. */
+    formatTooltipValue?: (value: number) => string;
     formatValue?: (value: number) => string;
     height?: ChartHeight;
     hiddenTracks?: readonly string[];
@@ -22,6 +24,8 @@ export interface ChartRadialProps {
     onHiddenTracksChange?: (hidden: readonly string[]) => void;
     /** Valor no centro. Ele reserva o proprio espaco, ate metade do raio: com muitos aneis, quem cede e a espessura deles. */
     showCenter?: boolean;
+    /** Balao com o detalhe do que esta sob o ponteiro. Desligue para nao mostrar nada alem do `<title>` nativo. */
+    showTooltip?: boolean;
     startAngle?: number;
     /** Raio das pontas do arco. Sem valor, o token de raio pequeno. */
     trackRadius?: number;
@@ -30,4 +34,4 @@ export interface ChartRadialProps {
     title: string;
     tracks: readonly ChartRadialTrack[];
 }
-export declare function ChartRadial({ accent, centerLabel, defaultHiddenTracks, emptyMessage, endAngle, formatValue, height, hiddenTracks, legend, legendAlign, onHiddenTracksChange, showCenter, startAngle, thickness, trackRadius, title, tracks, }: ChartRadialProps): import("react").JSX.Element;
+export declare function ChartRadial({ accent, centerLabel, defaultHiddenTracks, emptyMessage, endAngle, formatTooltipValue, formatValue, height, hiddenTracks, legend, legendAlign, onHiddenTracksChange, showCenter, showTooltip, startAngle, thickness, trackRadius, title, tracks, }: ChartRadialProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartSankey/ChartSankey.d.ts

@@ -26,6 +26,8 @@ export interface ChartSankeyProps {
     flowColor?: ChartSankeyFlowColor;
     flowValuePosition?: ChartSankeyFlowValuePosition;
     flows: readonly ChartSankeyFlow[];
+    /** Formato dos valores no balao. Sem ele, vale o `formatValue`. */
+    formatTooltipValue?: (value: number) => string;
     formatValue?: (value: number) => string;
     height?: ChartHeight;
     nodeAlign?: ChartSankeyAlign;
@@ -36,6 +38,8 @@ export interface ChartSankeyProps {
     nodeWidth?: number;
     showFlowValues?: boolean;
     showLabels?: boolean;
+    /** Balao com o detalhe do que esta sob o ponteiro. Desligue para nao mostrar nada alem do `<title>` nativo. */
+    showTooltip?: boolean;
     title: string;
 }
-export declare function ChartSankey({ accent, cyclicMessage, emptyMessage, flowColor, flowValuePosition, flows, formatValue, height, nodeAlign, nodes, nodePadding, nodeWidth, showFlowValues, showLabels, title, }: ChartSankeyProps): import("react").JSX.Element;
+export declare function ChartSankey({ accent, cyclicMessage, emptyMessage, flowColor, flowValuePosition, flows, formatTooltipValue, formatValue, height, nodeAlign, nodes, nodePadding, nodeWidth, showFlowValues, showLabels, showTooltip, title, }: ChartSankeyProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartScatter/ChartScatter.d.ts

@@ -29,9 +29,15 @@ export interface ChartScatterProps {
     legendAlign?: ChartLegendAlign;
     onHiddenSeriesChange?: (hidden: readonly string[]) => void;
     series: readonly ChartScatterSeries[];
+    /** Balao com o detalhe do que esta sob o ponteiro. Desligue para nao mostrar nada alem do `<title>` nativo. */
+    showTooltip?: boolean;
     title: string;
+    /** Nome de cada medida no balao. */
+    xLabel?: string;
+    yLabel?: string;
+    zLabel?: string;
     xAxis?: AxisVisibility;
     yAxis?: AxisVisibility;
     yAxisRight?: AxisVisibility;
 }
-export declare function ChartScatter({ accent, defaultHiddenSeries, emptyMessage, formatX, formatY, formatZ, height, includeZero, hiddenSeries, legend, legendAlign, onHiddenSeriesChange, series, title, xAxis, yAxis, yAxisRight, }: ChartScatterProps): import("react").JSX.Element;
+export declare function ChartScatter({ accent, defaultHiddenSeries, emptyMessage, formatX, formatY, formatZ, height, includeZero, hiddenSeries, legend, legendAlign, onHiddenSeriesChange, series, showTooltip, title, xLabel, yLabel, zLabel, xAxis, yAxis, yAxisRight, }: ChartScatterProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartSunburst/ChartSunburst.d.ts

@@ -1,4 +1,4 @@
-import { type ChartHeight, type ChartLegendAlign, type ChartLegendPosition } from '../core/index.js';
+import { type ChartHeight, type ChartHoveredNode, type ChartLegendAlign, type ChartLegendPosition } from '../core/index.js';
 import { type SeriesAppearance } from '../palette/index.js';
 export interface ChartSunburstNode extends SeriesAppearance {
     children?: readonly ChartSunburstNode[];
@@ -10,6 +10,8 @@ export interface ChartSunburstProps {
     defaultHiddenGroups?: readonly string[];
     emptyMessage?: string;
     formatPercent?: (ratio: number) => string;
+    /** Formato dos valores no balao. Sem ele, vale o `formatValue`: o eixo pode sair compacto e o balao, exato. */
+    formatTooltipValue?: (value: number) => string;
     formatValue?: (value: number) => string;
     height?: ChartHeight;
     hiddenGroups?: readonly string[];
@@ -17,11 +19,18 @@ export interface ChartSunburstProps {
     legendAlign?: ChartLegendAlign;
     nodes: readonly ChartSunburstNode[];
     onHiddenGroupsChange?: (hidden: readonly string[]) => void;
+    /** Caminho ate o no sob o ponteiro, do grupo ao no, cada nivel com o valor somado, ou `null` ao sair. */
+    onHoverNode?: (path: readonly ChartHoveredNode[] | null) => void;
     /** Folga entre dois aneis vizinhos. */
     ringGap?: number;
     /** Raio das pontas de cada arco. Sem valor, o token de raio pequeno. */
     sliceRadius?: number;
     showLabels?: boolean;
+    /**
+     * Balao com o caminho ate o no sob o ponteiro. Desligue para montar o proprio `ChartTooltip`
+     * pela costura; sem balao nem costura, o no volta a ter o `<title>`.
+     */
+    showTooltip?: boolean;
     title: string;
 }
-export declare function ChartSunburst({ accent, defaultHiddenGroups, emptyMessage, formatPercent, formatValue, height, hiddenGroups, legend, legendAlign, nodes, onHiddenGroupsChange, ringGap, showLabels, sliceRadius, title, }: ChartSunburstProps): import("react").JSX.Element;
+export declare function ChartSunburst({ accent, defaultHiddenGroups, emptyMessage, formatPercent, formatTooltipValue, formatValue, height, hiddenGroups, legend, legendAlign, nodes, onHiddenGroupsChange, onHoverNode, ringGap, showLabels, showTooltip, sliceRadius, title, }: ChartSunburstProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartTimeline/ChartTimeline.d.ts

@@ -0,0 +1,137 @@
+import { type AxisVisibility, type ChartLegendAlign } from '../core/index.js';
+import { type SeriesAppearance, type SeriesIntent } from '../palette/index.js';
+/** Em `calendar`, `Date` ou milissegundos desde a epoca; em `dayHours`, `Date` pela hora do dia ou a hora decimal. */
+export type ChartTimelineTime = Date | number;
+export type ChartTimelineScale = 'calendar' | 'dayHours';
+export type ChartTimelineOverlap = 'stack' | 'overlay';
+export type ChartTimelineDensity = 'sm' | 'md';
+export type ChartTimelineSegmentLabels = 'auto' | 'visible' | 'hidden';
+export type ChartTimelineSegmentLabelContent = 'duration' | 'label';
+export type ChartTimelineLabelAlign = 'start' | 'center' | 'end';
+export type ChartTimelineMarkerShape = 'line' | 'dot' | 'diamond';
+export interface ChartTimelineRow {
+    description?: string;
+    /** Chave do grupo a que a linha pertence. */
+    group?: string;
+    /** Identifica a linha; o `label` pode repetir. */
+    key: string;
+    label: string;
+}
+export interface ChartTimelineGroup {
+    key: string;
+    label: string;
+}
+export interface ChartTimelineSeries extends SeriesAppearance {
+    label: string;
+}
+export interface ChartTimelineSegment {
+    end: ChartTimelineTime;
+    /** Nome do intervalo, como a reuniao ou o responsavel. */
+    label?: string;
+    /** De 0 a 1. */
+    progress?: number;
+    /** `key` da linha. */
+    row: string;
+    /** `label` da serie. */
+    series: string;
+    start: ChartTimelineTime;
+}
+export interface ChartTimelineState {
+    row: string;
+    /** `label` da serie. */
+    state: string;
+    time: ChartTimelineTime;
+}
+export interface ChartTimelineRowBand {
+    end: ChartTimelineTime;
+    row: string;
+    series: string;
+    start: ChartTimelineTime;
+}
+export interface ChartTimelineBand {
+    end: ChartTimelineTime;
+    label?: string;
+    series: string;
+    start: ChartTimelineTime;
+}
+export interface ChartTimelineMarker {
+    label?: string;
+    row: string;
+    series: string;
+    shape?: ChartTimelineMarkerShape;
+    time: ChartTimelineTime;
+}
+export interface ChartTimelineReferenceLine {
+    intent?: SeriesIntent;
+    label: string;
+    time: ChartTimelineTime;
+}
+export interface ChartTimelineSummary {
+    subtitle?: string;
+    title: string;
+}
+export interface ChartTimelineProps {
+    /** Cor de tema que abre a paleta das séries sem cor nem intenção, como nos demais gráficos. */
+    accent?: string;
+    axisPosition?: 'top' | 'bottom';
+    /** Faixas globais, hachuradas em todas as linhas, como o adicional noturno ou o fim de semana. */
+    bands?: readonly ChartTimelineBand[];
+    collapsedGroups?: readonly string[];
+    collapsibleGroups?: boolean;
+    /** Em largura estreita, o resumo vai para baixo do rotulo ou sai. */
+    compactSummary?: 'below' | 'hidden';
+    defaultCollapsedGroups?: readonly string[];
+    defaultHiddenSeries?: readonly string[];
+    density?: ChartTimelineDensity;
+    /** Faixa fixa do eixo. Sem ela, do primeiro ao ultimo instante, arredondada a hora ou ao dia. */
+    domain?: readonly [ChartTimelineTime, ChartTimelineTime];
+    emptyMessage?: string;
+    emptyRowLabel?: string;
+    formatTick?: (time: Date) => string;
+    formatTime?: (time: Date) => string;
+    formatTooltipValue?: (durationMs: number) => string;
+    /** Formato das duracoes no rotulo da barra, na descricao e na tabela. */
+    formatValue?: (durationMs: number) => string;
+    groups?: readonly ChartTimelineGroup[];
+    hiddenSeries?: readonly string[];
+    highlightOnHover?: boolean;
+    legend?: 'top' | 'bottom' | 'none';
+    legendAlign?: ChartLegendAlign;
+    markers?: readonly ChartTimelineMarker[];
+    mergeConsecutive?: boolean;
+    /** Abaixo dessa largura, o desenho rola de lado dentro do conteiner, com rotulos e resumo fixos. */
+    minPlotWidth?: number;
+    onCollapsedGroupsChange?: (collapsed: readonly string[]) => void;
+    onHiddenSeriesChange?: (hidden: readonly string[]) => void;
+    /** Com ele, os intervalos viram botoes e entram no teclado. */
+    onSegmentClick?: (segment: ChartTimelineSegment, row: ChartTimelineRow) => void;
+    overlap?: ChartTimelineOverlap;
+    referenceLines?: readonly ChartTimelineReferenceLine[];
+    rowBands?: readonly ChartTimelineRowBand[];
+    rowGap?: number;
+    rowLabelWidth?: number | 'auto';
+    /** Coluna de resumo, calculada sobre os intervalos visiveis da linha: a legenda filtra a leitura inteira. */
+    rowSummary?: (row: ChartTimelineRow, segments: readonly ChartTimelineSegment[]) => ChartTimelineSummary | undefined;
+    rows: readonly ChartTimelineRow[];
+    segmentLabel?: ChartTimelineSegmentLabelContent;
+    segmentLabelAlign?: ChartTimelineLabelAlign;
+    segments?: readonly ChartTimelineSegment[];
+    series: readonly ChartTimelineSeries[];
+    showGrid?: boolean;
+    showProgress?: boolean;
+    showSegmentLabels?: ChartTimelineSegmentLabels;
+    showTooltip?: boolean;
+    /** Alternativa a `segments`: cada mudanca de estado vale ate a seguinte. */
+    states?: readonly ChartTimelineState[];
+    /** Fim do ultimo estado de cada linha, como o instante atual. Sem ele, o fim do eixo. */
+    statesEnd?: ChartTimelineTime;
+    timeScale?: ChartTimelineScale;
+    title: string;
+    xAxis?: AxisVisibility;
+}
+/**
+ * Barras de intervalo em linhas sobre um eixo de tempo continuo: quem fez o que, de quando ate quando. O desenho e
+ * imagem nomeada pelo titulo; com `onSegmentClick`, um grupo cujos intervalos sao botoes de tabulacao movel. A leitura
+ * medida a medida esta na visao em tabela.
+ */
+export declare function ChartTimeline({ accent, axisPosition, bands, collapsedGroups, collapsibleGroups, compactSummary, defaultCollapsedGroups, defaultHiddenSeries, density, domain, emptyMessage, emptyRowLabel, formatTick, formatTime, formatTooltipValue, formatValue, groups, hiddenSeries, highlightOnHover, legend, legendAlign, markers, mergeConsecutive, minPlotWidth, onCollapsedGroupsChange, onHiddenSeriesChange, onSegmentClick, overlap, referenceLines, rowBands, rowGap, rowLabelWidth, rowSummary, rows, segmentLabel, segmentLabelAlign, segments, series, showGrid, showProgress, showSegmentLabels, showTooltip, states, statesEnd, timeScale, title, xAxis, }: ChartTimelineProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartTimeline/ChartTimelineTable.d.ts

@@ -0,0 +1,25 @@
+import type { ChartTimelineSummary } from './ChartTimeline.js';
+export interface TimelineTableEntry {
+    color: string;
+    duration: string;
+    end: string;
+    name: string;
+    progress?: string;
+    start: string;
+}
+export interface TimelineTableRow {
+    description?: string;
+    entries: readonly TimelineTableEntry[];
+    key: string;
+    label: string;
+    summary?: ChartTimelineSummary;
+}
+interface ChartTimelineTableProps {
+    emptyRowLabel: string;
+    rows: readonly TimelineTableRow[];
+    showProgress: boolean;
+    title: string;
+}
+/** Leitura medida a medida do grafico: uma secao por linha, com o rotulo, a descricao e o resumo no cabecalho dela. */
+export declare function ChartTimelineTable({ emptyRowLabel, rows, showProgress, title }: ChartTimelineTableProps): import("react").JSX.Element;
+export {};

package/dist/types/components/charts/ChartTimeline/index.d.ts

@@ -0,0 +1,2 @@
+export { ChartTimeline } from './ChartTimeline.js';
+export type { ChartTimelineBand, ChartTimelineDensity, ChartTimelineGroup, ChartTimelineLabelAlign, ChartTimelineMarker, ChartTimelineMarkerShape, ChartTimelineOverlap, ChartTimelineProps, ChartTimelineReferenceLine, ChartTimelineRow, ChartTimelineRowBand, ChartTimelineScale, ChartTimelineSegment, ChartTimelineSegmentLabelContent, ChartTimelineSegmentLabels, ChartTimelineSeries, ChartTimelineState, ChartTimelineSummary, ChartTimelineTime, } from './ChartTimeline.js';

package/dist/types/components/charts/ChartTimeline/timelineLayout.d.ts

@@ -0,0 +1,70 @@
+import type { ChartTimelineGroup, ChartTimelineOverlap, ChartTimelineRow, ChartTimelineScale, ChartTimelineSegment, ChartTimelineState, ChartTimelineTime } from './ChartTimeline.js';
+export interface TimelineRange {
+    end: number;
+    start: number;
+}
+/** Intervalo com as pontas em posicao do eixo. `source` e o que o consumidor recebe de volta. */
+export interface TimelineSegment extends TimelineRange {
+    id: number;
+    label?: string;
+    progress?: number;
+    row: string;
+    series: string;
+    source: ChartTimelineSegment;
+}
+export interface PlacedSegment extends TimelineSegment {
+    lane: number;
+}
+export type TimelineItem = {
+    child: boolean;
+    height: number;
+    kind: 'row';
+    laneCount: number;
+    row: ChartTimelineRow;
+    segments: readonly PlacedSegment[];
+    y: number;
+} | {
+    collapsed: boolean;
+    group: ChartTimelineGroup;
+    height: number;
+    kind: 'group';
+    rows: readonly ChartTimelineRow[];
+    segments: readonly TimelineSegment[];
+    y: number;
+};
+/**
+ * Pontas em posicao do eixo. Em `dayHours`, o fim antes do inicio e o intervalo que cruza a meia-noite: ele termina
+ * no dia seguinte, e o desenho o corta no fim do eixo. Instante invalido, ou fim antes do inicio em datas, nao vira
+ * geometria.
+ */
+export declare function toRange(start: ChartTimelineTime, end: ChartTimelineTime, scale: ChartTimelineScale): {
+    end: number;
+    start: number;
+} | undefined;
+export declare function toTimelineSegments(segments: readonly ChartTimelineSegment[], scale: ChartTimelineScale): TimelineSegment[];
+/** Cada estado vale ate o seguinte da linha, e o ultimo ate `end`. Com `merge`, iguais seguidos viram uma regiao. */
+export declare function statesToSegments(states: readonly ChartTimelineState[], end: ChartTimelineTime, merge: boolean, scale: ChartTimelineScale): ChartTimelineSegment[];
+/** Sub-faixas: cada intervalo entra na primeira cujo ultimo intervalo ja terminou. Em `overlay`, todos na mesma. */
+export declare function placeInLanes(segments: readonly TimelineSegment[], overlap: ChartTimelineOverlap): {
+    laneCount: number;
+    segments: PlacedSegment[];
+};
+/** As linhas sem grupo, ou de grupo desconhecido, vem primeiro; depois as de cada grupo, na ordem dos grupos. */
+export declare function rowsInDisplayOrder(rows: readonly ChartTimelineRow[], groups: readonly ChartTimelineGroup[]): ChartTimelineRow[];
+export interface TimelineLayoutOptions {
+    groupHeight: number;
+    groups: readonly ChartTimelineGroup[];
+    isCollapsed: (groupKey: string) => boolean;
+    laneStep: number;
+    overlap: ChartTimelineOverlap;
+    rowGap: number;
+    rowHeight: number;
+    rows: readonly ChartTimelineRow[];
+    /** So os visiveis: a serie desligada nao ocupa sub-faixa. */
+    segments: readonly TimelineSegment[];
+}
+/** Ordem e altura de cada linha e cabecalho de grupo. A linha cresce uma sub-faixa por intervalo sobreposto. */
+export declare function layoutTimeline({ groupHeight, groups, isCollapsed, laneStep, overlap, rowGap, rowHeight, rows, segments, }: TimelineLayoutOptions): {
+    height: number;
+    items: TimelineItem[];
+};

package/dist/types/components/charts/ChartTimeline/timelineTime.d.ts

@@ -0,0 +1,16 @@
+import type { ChartTimelineScale, ChartTimelineTime } from './ChartTimeline.js';
+export declare const HOUR_MS = 3600000;
+export interface TimeTick {
+    label: string;
+    position: number;
+}
+/** Posicao no eixo: em `calendar`, milissegundos desde a epoca; em `dayHours`, a hora decimal do dia. */
+export declare function toPosition(time: ChartTimelineTime, scale: ChartTimelineScale): number;
+/** A posicao como `Date`, para os formatadores do consumidor. Em `dayHours` a data e indiferente: vale a hora. */
+export declare function toDate(position: number, scale: ChartTimelineScale): Date;
+export declare function durationMs(start: number, end: number, scale: ChartTimelineScale): number;
+/** Faixa automatica: do primeiro ao ultimo instante, arredondada a hora ou ao dia, com uma unidade no minimo. */
+export declare function autoDomain(positions: readonly number[], scale: ChartTimelineScale): [number, number];
+/** Instante no balao e na tabela: `07:12` em horas do dia; `05/10 14:00`, ou so `05/10` a meia-noite, em datas. */
+export declare function formatPosition(position: number, scale: ChartTimelineScale): string;
+export declare function timeTicks(domain: readonly [number, number], scale: ChartTimelineScale, width: number, formatTick?: (time: Date) => string): TimeTick[];

package/dist/types/components/charts/ChartTimeline/timelineTooltip.d.ts

@@ -0,0 +1,45 @@
+import type { ChartTooltipProps } from '../ChartTooltip/index.js';
+import type { ChartTimelineGroup, ChartTimelineMarker, ChartTimelineRow } from './ChartTimeline.js';
+import type { TimelineRange, TimelineSegment } from './timelineLayout.js';
+export interface TimelineMarker extends ChartTimelineMarker {
+    position: number;
+}
+export interface TimelineRowBand extends TimelineRange {
+    row: string;
+    series: string;
+}
+/** O que esta sob o ponteiro. Cada caso carrega o que o balao dele precisa. */
+export type TimelineTarget = {
+    clip: string | undefined;
+    kind: 'segment';
+    row: ChartTimelineRow;
+    segment: TimelineSegment;
+} | {
+    kind: 'marker';
+    marker: TimelineMarker;
+    row: ChartTimelineRow;
+} | {
+    collapsed: boolean;
+    group: ChartTimelineGroup;
+    kind: 'group';
+    rowCount: number;
+    segments: readonly TimelineSegment[];
+} | {
+    /** A linha nao tem intervalo algum, de nenhuma serie. */
+    empty: boolean;
+    kind: 'row';
+    row: ChartTimelineRow;
+    rowBands: readonly TimelineRowBand[];
+    segments: readonly TimelineSegment[];
+};
+export interface TimelineTooltipOptions {
+    colorOf: (series: string) => string | undefined;
+    duration: (range: TimelineRange) => number;
+    emptyRowLabel: string;
+    formatDuration: (durationMs: number) => string;
+    formatInstant: (position: number) => string;
+    seriesOrder: readonly string[];
+    showProgress: boolean;
+}
+export type TimelineTooltip = Omit<ChartTooltipProps, 'children'>;
+export declare function timelineTooltip(target: TimelineTarget | null, options: TimelineTooltipOptions): TimelineTooltip;

package/dist/types/components/charts/ChartTooltip/ChartTooltip.d.ts

@@ -3,6 +3,8 @@ export interface ChartTooltipRow {
     color?: string;
     /** Realca a linha, como a serie sob o ponteiro entre as demais. */
     emphasis?: boolean;
+    /** Formato dos valores desta linha, quando difere do da coluna, como a serie do eixo da direita. */
+    format?: (value: number) => string;
     label: string;
     values: readonly number[];
 }

package/dist/types/components/charts/ChartTreemap/ChartTreemap.d.ts

@@ -1,4 +1,4 @@
-import { type ChartHeight, type ChartLegendAlign, type ChartLegendPosition } from '../core/index.js';
+import { type ChartHeight, type ChartHoveredNode, type ChartLegendAlign, type ChartLegendPosition } from '../core/index.js';
 import { type SeriesAppearance, type SeriesIntent } from '../palette/index.js';
 export interface ChartTreemapNode extends SeriesAppearance {
     children?: readonly ChartTreemapNode[];
@@ -9,6 +9,8 @@ export interface ChartTreemapProps {
     accent?: string;
     defaultHiddenGroups?: readonly string[];
     emptyMessage?: string;
+    /** Formato dos valores no balao. Sem ele, vale o `formatValue`: o eixo pode sair compacto e o balao, exato. */
+    formatTooltipValue?: (value: number) => string;
     formatValue?: (value: number) => string;
     /** Folga entre dois retangulos vizinhos. */
     gap?: number;
@@ -24,7 +26,14 @@ export interface ChartTreemapProps {
     legendAlign?: ChartLegendAlign;
     nodes: readonly ChartTreemapNode[];
     onHiddenGroupsChange?: (hidden: readonly string[]) => void;
+    /** Caminho ate o no sob o ponteiro, do grupo ao no, cada nivel com o valor somado, ou `null` ao sair. */
+    onHoverNode?: (path: readonly ChartHoveredNode[] | null) => void;
     showDataLabels?: boolean;
+    /**
+     * Balao com o caminho ate o no sob o ponteiro. Desligue para montar o proprio `ChartTooltip`
+     * pela costura; sem balao nem costura, o no volta a ter o `<title>`.
+     */
+    showTooltip?: boolean;
     title: string;
 }
-export declare function ChartTreemap({ accent, defaultHiddenGroups, emptyMessage, formatValue, gap, height, hiddenGroups, intentLabels, legend, legendAlign, nodes, onHiddenGroupsChange, showDataLabels, title, }: ChartTreemapProps): import("react").JSX.Element;
+export declare function ChartTreemap({ accent, defaultHiddenGroups, emptyMessage, formatTooltipValue, formatValue, gap, height, hiddenGroups, intentLabels, legend, legendAlign, nodes, onHiddenGroupsChange, onHoverNode, showDataLabels, showTooltip, title, }: ChartTreemapProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartWaterfall/ChartWaterfall.d.ts

@@ -1,4 +1,4 @@
-import { type AxisLabelAngle, type AxisVisibility, type ChartHeight } from '../core/index.js';
+import { type AxisLabelAngle, type AxisVisibility, type MarkVisibility, type ChartHeight } from '../core/index.js';
 import { type SeriesIntent } from '../palette/index.js';
 export interface ChartWaterfallStep {
     color?: string;
@@ -9,16 +9,21 @@ export interface ChartWaterfallStep {
 }
 export interface ChartWaterfallProps {
     emptyMessage?: string;
+    /** Formato dos valores no balao. Sem ele, vale o `formatValue`: o eixo pode sair compacto e o balao, exato. */
+    formatTooltipValue?: (value: number) => string;
     formatValue?: (value: number) => string;
     height?: ChartHeight;
     labelAngle?: AxisLabelAngle;
     /** Indice do passo sob o ponteiro, ou `null` ao sair dele. */
     onHoverStep?: (index: number | null) => void;
-    showDataLabels?: boolean;
+    /** Variacao acima de cada passo. Em `onHover`, so a do passo sob o ponteiro. */
+    showDataLabels?: MarkVisibility;
+    /** Balao com a variacao do passo sob o ponteiro e o acumulado ate ele. Desligue para montar o proprio `ChartTooltip`. */
+    showTooltip?: boolean;
     steps: readonly ChartWaterfallStep[];
     title: string;
     xAxis?: AxisVisibility;
     yAxis?: AxisVisibility;
     yAxisRight?: AxisVisibility;
 }
-export declare function ChartWaterfall({ emptyMessage, formatValue, height, labelAngle, onHoverStep, showDataLabels, steps, title, xAxis, yAxis, yAxisRight, }: ChartWaterfallProps): import("react").JSX.Element;
+export declare function ChartWaterfall({ emptyMessage, formatTooltipValue, formatValue, height, labelAngle, onHoverStep, showDataLabels, showTooltip, steps, title, xAxis, yAxis, yAxisRight, }: ChartWaterfallProps): import("react").JSX.Element;

package/dist/types/components/charts/core/CartesianFrame.d.ts

@@ -1,8 +1,10 @@
 import type { ReactNode } from 'react';
 import { type AxisTick } from './Axis.js';
 import type { ChartLegendAlign, ChartLegendEntry, ChartLegendPosition } from './ChartLegend.js';
+import type { ChartFrameProps } from './ChartFrame.js';
 import { type GridOrientation } from './Grid.js';
 import type { AxisLabelRotation, AxisVisibility, ChartMargins, ChartPlot } from './cartesianLayout.js';
+import type { AxisReveal } from './useCartesianLayout.js';
 export interface CartesianAxis {
     hideLine?: boolean;
     labelRotation?: AxisLabelRotation;
@@ -15,6 +17,8 @@ export interface CartesianGrid {
     orientation: GridOrientation;
 }
 export interface CartesianFrameProps {
+    /** Estado e gatilhos dos eixos `onHover`, vindos de `useCartesianLayout`. */
+    axisReveal?: AxisReveal;
     children: ReactNode;
     containerRef: (node: HTMLElement | null) => void;
     empty: boolean;
@@ -29,6 +33,7 @@ export interface CartesianFrameProps {
     onToggleSeries?: (label: string) => void;
     plot: ChartPlot;
     title: string;
+    tooltip?: ChartFrameProps['tooltip'];
     width: number;
     xAxis: CartesianAxis;
     yAxis: CartesianAxis;
@@ -38,4 +43,4 @@ export interface CartesianFrameProps {
  * Camada cartesiana sobre a moldura comum: grade, os dois eixos e as marcas,
  * todos dentro das margens ja calculadas a partir dos rotulos.
  */
-export declare function CartesianFrame({ children, containerRef, empty, emptyMessage, fillHeight, grid, height, legend, legendAlign, legendPosition, margins, onToggleSeries, plot, title, width, xAxis, yAxis, yAxisRight, }: CartesianFrameProps): import("react").JSX.Element;
+export declare function CartesianFrame({ axisReveal, children, containerRef, empty, emptyMessage, fillHeight, grid, height, legend, legendAlign, legendPosition, margins, onToggleSeries, plot, title, tooltip, width, xAxis, yAxis, yAxisRight, }: CartesianFrameProps): import("react").JSX.Element;

package/dist/types/components/charts/core/ChartFrame.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ChartLegendAlign, type ChartLegendEntry, type ChartLegendPosition, type ChartLegendSwatch } from './ChartLegend.js';
+import { type ChartTooltipProps } from '../ChartTooltip/ChartTooltip.js';
 export interface ChartFrameProps {
     /** Marcas do grafico, em coordenadas da area de desenho. */
     children: ReactNode;
@@ -18,9 +19,14 @@ export interface ChartFrameProps {
     legendPosition: ChartLegendPosition;
     /** A partir de quantas entradas a legenda aparece. */
     minLegendEntries?: number;
+    /** Ponteiro entrando e saindo da area de desenho, para quem revela os eixos `onHover`. */
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
     onToggleSeries?: (label: string) => void;
     swatch?: ChartLegendSwatch;
     title: string;
+    /** O balao do que esta sob o ponteiro, montado pelo grafico. Sem linhas, nao aparece. */
+    tooltip?: Omit<ChartTooltipProps, 'children'>;
     width: number;
 }
 /**
@@ -28,4 +34,4 @@ export interface ChartFrameProps {
  * O que muda entre as familias e o que se desenha dentro dela — eixos, aneis ou
  * a area inteira —, e nao o cerco, que era o mesmo repetido tres vezes.
  */
-export declare function ChartFrame({ children, centerOrigin, containerRef, empty, emptyMessage, fillHeight, height, legend, legendAlign, legendPosition, minLegendEntries, onToggleSeries, swatch, title, width, }: ChartFrameProps): import("react").JSX.Element;
+export declare function ChartFrame({ children, centerOrigin, containerRef, empty, emptyMessage, fillHeight, height, legend, legendAlign, legendPosition, minLegendEntries, onPointerEnter, onPointerLeave, onToggleSeries, swatch, title, tooltip, width, }: ChartFrameProps): import("react").JSX.Element;

package/dist/types/components/charts/core/ChartLegend.d.ts

@@ -12,6 +12,8 @@ export type ChartLegendAlign = 'left' | 'center' | 'right';
 interface ChartLegendProps {
     align?: ChartLegendAlign;
     entries: readonly ChartLegendEntry[];
+    /** Entrada sob o ponteiro ou o foco, para o grafico destacar o que ela representa; `null` ao sair. */
+    onHighlight?: (label: string | null) => void;
     onToggle?: (label: string) => void;
     position: ChartLegendPosition;
     swatch?: ChartLegendSwatch;
@@ -20,5 +22,5 @@ interface ChartLegendProps {
  * Legenda do grafico. Quando existe um alvo para o clique, cada entrada vira um
  * botao que liga e desliga a serie, com o estado exposto por `aria-pressed`.
  */
-export declare function ChartLegend({ align, entries, onToggle, position, swatch, }: ChartLegendProps): import("react").JSX.Element;
+export declare function ChartLegend({ align, entries, onHighlight, onToggle, position, swatch, }: ChartLegendProps): import("react").JSX.Element;
 export {};

package/dist/types/components/charts/core/PointBands.d.ts

@@ -0,0 +1,22 @@
+import type { ChartPlot } from './cartesianLayout.js';
+import type { ChartPoint } from './shapes.js';
+export interface PointBandsProps {
+    onHover: (index: number | null) => void;
+    /** Altura do ponteiro na area de desenho, para quem escolhe a serie mais proxima dele. */
+    onPointerY?: (y: number | null) => void;
+    plot: ChartPlot;
+    /** Posicao de cada categoria no eixo, na ordem das categorias. */
+    positions: readonly number[];
+}
+/**
+ * Faixas invisiveis sobre a area de desenho, uma por categoria, que vao do ponto
+ * ate o meio do caminho para cada vizinho: o ponteiro sempre cai no ponto mais proximo.
+ */
+export declare function PointBands({ onHover, onPointerY, plot, positions }: PointBandsProps): import("react").JSX.Element;
+/** Guia vertical no ponto sob o ponteiro, atras das marcas. */
+export declare function PointCursor({ plot, position }: {
+    plot: ChartPlot;
+    position: number;
+}): import("react").JSX.Element;
+/** A serie visivel com ponto na categoria cujo ponto fica mais perto da altura do ponteiro. */
+export declare function nearestSeriesAt(pointsBySeries: readonly (readonly (ChartPoint | null)[])[], category: number | null, y: number | null, isHidden: (seriesIndex: number) => boolean): null;

package/dist/types/components/charts/core/cartesianLayout.d.ts

@@ -3,11 +3,15 @@ import { type NumericRange } from '../scales/index.js';
 export type AxisLabelRotation = 0 | 45 | 90;
 export type AxisLabelAngle = AxisLabelRotation | 'auto';
 /**
- * Como o eixo se mostra. `onHover` reserva a calha e desliza o eixo para dentro
- * dela, de modo que o desenho nao se mexa sob o ponteiro; `hidden` dispensa a
- * calha, e e o unico modo em que a area de desenho realmente cresce.
+ * Como o eixo se mostra. `onHover` nao reserva a calha: o desenho ocupa o espaco
+ * todo e, depois de um instante com o ponteiro sobre o grafico, encolhe para o
+ * eixo entrar; `hidden` dispensa o eixo de vez.
  */
 export type AxisVisibility = 'visible' | 'hidden' | 'onHover';
+/** Como pontos e rotulos de valor se mostram. `onHover` mostra os da serie sob o ponteiro, e so eles. */
+export type MarkVisibility = 'visible' | 'hidden' | 'onHover';
+/** Se a marca da serie aparece: sempre, nunca, ou so com a serie sob o ponteiro. */
+export declare function markShown(visibility: MarkVisibility, seriesFocused: boolean): boolean;
 /** Altura do desenho: um numero fixa, `fill` entrega a decisao ao contêiner. */
 export type ChartHeight = number | 'fill';
 export interface ResolvedHeight {
@@ -36,6 +40,8 @@ export interface CartesianLayoutOptions {
     height: number;
     labelAngle: AxisLabelAngle;
     leftLabels: readonly string[];
+    /** Os eixos `onHover` estao a vista e ocupam a calha. */
+    revealed?: boolean;
     rightLabels: readonly string[];
     topRoom: number;
     width: number;
@@ -60,7 +66,7 @@ export declare function bottomLabelRotation(labels: readonly string[], font: Lab
  * util define o passo entre categorias, o passo define o angulo dos rotulos e o
  * angulo define a altura que eles ocupam embaixo.
  */
-export declare function cartesianLayout({ bottomLabels, font, height, labelAngle, leftLabels, rightLabels, topRoom, width, xAxis, yAxis, yAxisRight, }: CartesianLayoutOptions): CartesianLayout;
+export declare function cartesianLayout({ bottomLabels, font, height, labelAngle, leftLabels, revealed, rightLabels, topRoom, width, xAxis, yAxis, yAxisRight, }: CartesianLayoutOptions): CartesianLayout;
 /**
  * Rotulos de valor usados apenas para medir a calha do eixo, antes de a area de
  * desenho existir. Eles saem da altura total em vez da altura util, o que pode

package/dist/types/components/charts/core/hoverPath.d.ts

@@ -0,0 +1,10 @@
+import type { HierarchyNode } from 'd3-hierarchy';
+/** Um nivel do caminho ate o no sob o ponteiro, com o valor somado daquele nivel. */
+export interface ChartHoveredNode {
+    label: string;
+    value: number;
+}
+/** Caminho do grupo de topo ate o no, sem a raiz que o layout cria por fora. */
+export declare function hoverPath(node: HierarchyNode<{
+    label: string;
+}>): ChartHoveredNode[];