@plenustech/design-system 0.2.2 → 0.2.4

package/dist/types/components/charts/ChartGauge/gaugeLayout.d.ts

@@ -0,0 +1,64 @@
+import { type LabelFont } from '../core/index.js';
+import type { ChartGaugeScaleLabels, ChartGaugeTicks } from './ChartGauge.js';
+import type { CenterLine, GaugeCenter } from './gaugeReading.js';
+export type TextAnchor = 'start' | 'middle' | 'end';
+export interface AngledLabel {
+    angle: number;
+    text: string;
+}
+export interface OutsideLabel extends AngledLabel {
+    kind: 'segment' | 'target';
+}
+export interface PlacedLabel<T extends AngledLabel = AngledLabel> {
+    anchor: TextAnchor;
+    label: T;
+    x: number;
+    y: number;
+}
+export interface GaugeLayoutInput {
+    center: GaugeCenter;
+    compact: boolean;
+    /** Radianos a partir do topo, no sentido horário. */
+    endAngle: number;
+    font: LabelFont;
+    height: number;
+    /** Rótulos de ponta, mínimo e máximo, quando `scaleLabels` é `minMax`. */
+    minMaxLabels: readonly [AngledLabel, AngledLabel];
+    needle: boolean;
+    /** Régua e marca da meta, além do raio externo do arco. */
+    outerBand: number;
+    outsideLabels: readonly OutsideLabel[];
+    scaleLabels: ChartGaugeScaleLabels;
+    startAngle: number;
+    thickness: number;
+    /** Rótulos das marcas principais, na ordem em que disputam espaço. */
+    tickLabels: readonly AngledLabel[];
+    ticks: ChartGaugeTicks;
+    width: number;
+}
+export interface GaugeCenterLayout {
+    height: number;
+    lineHeight: number;
+    lines: readonly CenterLine[];
+    top: number;
+    value?: {
+        family: string;
+        size: number;
+        text: string;
+    };
+    width: number;
+}
+export interface GaugeLayout {
+    center: GaugeCenterLayout;
+    cx: number;
+    cy: number;
+    innerRadius: number;
+    outsideLabels: readonly PlacedLabel<OutsideLabel>[];
+    pinRadius: number;
+    radius: number;
+    scaleLabels: readonly PlacedLabel[];
+    thickness: number;
+}
+export declare function pointAt(angle: number, radius: number): [number, number];
+/** Maior raio em que arco, rótulos e centro cabem na área, e a posição de cada rótulo nele. */
+export declare function layoutGauge(input: GaugeLayoutInput): GaugeLayout;

package/dist/types/components/charts/ChartGauge/gaugeReading.d.ts

@@ -0,0 +1,97 @@
+import type { ChartTooltipRow } from '../ChartTooltip/index.js';
+import type { SeriesIntent } from '../palette/index.js';
+import type { ChartGaugeDelta, ChartGaugeTarget } from './ChartGauge.js';
+import { type GaugeDomain, type GaugeSegment } from './gaugeScale.js';
+/** Como o medidor lê o valor: no formato do consumidor ou contra a meta. */
+export interface GaugeReading {
+    /** Leitura contra a meta: a outra leitura no centro, a linha Atingido no balão e as duas no `aria-valuetext`. */
+    againstTarget: boolean;
+    /** Meta positiva, base do atingimento. */
+    base: number | null;
+    formatExact: (value: number) => string;
+    formatValue: (value: number) => string;
+    /** Centro, escala e intervalos em percentual da meta. */
+    showsPercent: boolean;
+}
+export type CenterLine = {
+    kind: 'text';
+    text: string;
+} | {
+    glyph: string;
+    kind: 'warn';
+    short: string;
+    text: string;
+} | {
+    glyph: string;
+    intent: SeriesIntent;
+    kind: 'delta';
+    label?: string;
+    text: string;
+};
+export interface GaugeCenter {
+    lines: readonly CenterLine[];
+    value?: string;
+}
+export type GaugeStatus = 'loading' | 'empty' | 'value';
+export interface GaugeTooltip {
+    rows: ChartTooltipRow[];
+    subtitle?: string;
+    title?: string;
+}
+/** Quem pede `percentOfTarget`, na exibição ou nas faixas, liga a leitura contra a meta; sem meta, vale o valor. */
+export declare function gaugeReading(options: {
+    base: number | null;
+    formatTooltipValue?: (value: number) => string;
+    formatValue: (value: number) => string;
+    segmentUnit: string;
+    valueDisplay: string;
+}): GaugeReading;
+export declare function formatAttainment(reading: GaugeReading, value: number): string;
+/** O número como a exibição escolhida o mostra. */
+export declare function formatShown(reading: GaugeReading, value: number): string;
+/** A leitura que a exibição não escolheu, como "92% de R$ 2 mi" ou "R$ 1,84 mi de R$ 2 mi". */
+export declare function otherReading(reading: GaugeReading, value: number, format: (value: number) => string): string;
+export declare function rangeText(reading: GaugeReading, segment: GaugeSegment): string;
+export declare function segmentName(segment: GaugeSegment): string;
+/** O sinal é do componente; o `format` recebe o módulo da variação. */
+export declare function deltaText(delta: ChartGaugeDelta): string;
+export declare function hasDelta(delta: ChartGaugeDelta | undefined): delta is ChartGaugeDelta;
+export declare function gaugeCenter(options: {
+    centerLabel?: string;
+    compact: boolean;
+    delta?: ChartGaugeDelta;
+    domain: GaugeDomain;
+    emptyMessage: string;
+    reading: GaugeReading;
+    showCenter: boolean;
+    status: GaugeStatus;
+    value: number;
+}): GaugeCenter;
+/** A frase do `aria-valuetext`: o valor, o que excede a escala, a faixa, a meta e a variação. */
+export declare function gaugeValueText(options: {
+    delta?: ChartGaugeDelta;
+    domain: GaugeDomain;
+    reading: GaugeReading;
+    segment?: GaugeSegment;
+    target?: ChartGaugeTarget;
+    value: number;
+}): string;
+/** Balão do centro ou do arco sem faixas: a faixa do valor, o valor, a meta, o atingido e a variação. */
+export declare function valueTooltip(options: {
+    color: string;
+    delta?: ChartGaugeDelta;
+    domain: GaugeDomain;
+    reading: GaugeReading;
+    segment?: GaugeSegment;
+    target?: ChartGaugeTarget;
+    title: string;
+    value: number;
+}): GaugeTooltip;
+/** Balão de uma faixa: o intervalo dela, o valor atual e se ele está ali. */
+export declare function segmentTooltip(options: {
+    current?: GaugeSegment;
+    reading: GaugeReading;
+    segment: GaugeSegment;
+    target?: ChartGaugeTarget;
+    value: number;
+}): GaugeTooltip;

package/dist/types/components/charts/ChartGauge/gaugeScale.d.ts

@@ -0,0 +1,38 @@
+import type { ChartGaugeSegment, ChartGaugeTarget } from './ChartGauge.js';
+export interface GaugeDomain {
+    max: number;
+    min: number;
+}
+export interface GaugeSegment {
+    color: string;
+    from: number;
+    label?: string;
+    to: number;
+}
+export declare function isNumber(value: unknown): value is number;
+export declare function clampToDomain(value: number, { max, min }: GaugeDomain): number;
+/** Meta que serve de base ao atingimento: só uma meta positiva divide. */
+export declare function targetBase(target: ChartGaugeTarget | undefined): number | null;
+/** Sem `max` e com meta, a escala vai a 120% dela. Intervalo vazio ganha uma unidade, como nos eixos. */
+export declare function gaugeDomain(min: number | undefined, max: number | undefined, target: ChartGaugeTarget | undefined): {
+    max: number;
+    min: number;
+};
+/**
+ * Faixas em ordem crescente, cada uma do fim da anterior até o seu `to`, multiplicado por `unit` quando declarado em
+ * fração da meta. Faixa com limite inválido, ou que não avança sobre a anterior, é ignorada.
+ */
+export declare function gaugeSegments(segments: readonly ChartGaugeSegment[], domain: GaugeDomain, { accent, unit }: {
+    accent?: string;
+    unit: number;
+}): GaugeSegment[];
+export declare function segmentAt(segments: readonly GaugeSegment[], value: number): GaugeSegment | undefined;
+/** De onde o arco preenchido parte: o zero quando a escala o cruza; senão, o mínimo. */
+export declare function gaugeOrigin(origin: number | undefined, domain: GaugeDomain): number;
+/**
+ * Marcas principais. Em percentual da meta, a cada 50% dela (25% numa escala curta), com as pontas sempre incluídas;
+ * senão, `tickCount` divisões iguais.
+ */
+export declare function majorTicks(domain: GaugeDomain, tickCount: number, percentBase: number | null): number[];
+/** Ordem em que os rótulos da escala disputam espaço: as pontas, a meta e o resto. */
+export declare function tickLabelPriority(ticks: readonly number[], target: number | null): number[];

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

@@ -0,0 +1,2 @@
+export { ChartGauge } from './ChartGauge.js';
+export type { ChartGaugeDelta, ChartGaugeIndicator, ChartGaugeProps, ChartGaugeScaleLabels, ChartGaugeSegment, ChartGaugeSegmentStyle, ChartGaugeSegmentUnit, ChartGaugeSize, ChartGaugeTarget, ChartGaugeTicks, ChartGaugeValueDisplay, } from './ChartGauge.js';

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

@@ -1,4 +1,4 @@
-import { type AxisLabelAngle, type AxisVisibility, type ChartCurve, type ChartHeight, type ChartLegendAlign, type ChartLegendPosition } from '../core/index.js';
+import { type AxisLabelAngle, type AxisVisibility, type ChartCurve, type ChartHeight, type ChartLegendAlign, type ChartLegendPosition, type MarkVisibility } from '../core/index.js';
 import { type SeriesAppearance } from '../palette/index.js';
 export interface ChartLineSeries extends SeriesAppearance {
     label: string;
@@ -10,6 +10,8 @@ export interface ChartLineProps {
     curve?: ChartCurve;
     defaultHiddenSeries?: 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;
     /**
      * Inclui o zero no dominio do eixo de valor. Ligado por padrao, porque marca
@@ -23,12 +25,21 @@ export interface ChartLineProps {
     legend?: ChartLegendPosition;
     legendAlign?: ChartLegendAlign;
     onHiddenSeriesChange?: (hidden: readonly string[]) => void;
+    /** Indice da categoria mais proxima do ponteiro, ou `null` ao sair. */
+    onHoverCategory?: (index: number | null) => void;
     series: readonly ChartLineSeries[];
-    showDataLabels?: boolean;
-    showDots?: boolean;
+    /** Valor acima de cada ponto: sempre, nunca, ou so os da serie mais proxima do ponteiro. */
+    showDataLabels?: MarkVisibility;
+    /** Pontos de cada valor: sempre, nunca, ou so os da serie mais proxima do ponteiro. */
+    showDots?: MarkVisibility;
+    /**
+     * Balao com as series da categoria mais proxima do ponteiro. Desligue para montar o proprio
+     * `ChartTooltip` pela costura; sem balao nem costura, o ponto volta a ter o `<title>`.
+     */
+    showTooltip?: boolean;
     title: string;
     xAxis?: AxisVisibility;
     yAxis?: AxisVisibility;
     yAxisRight?: AxisVisibility;
 }
-export declare function ChartLine({ accent, categories, curve, defaultHiddenSeries, emptyMessage, formatValue, height, includeZero, hiddenSeries, labelAngle, legend, legendAlign, onHiddenSeriesChange, series, showDataLabels, showDots, title, xAxis, yAxis, yAxisRight, }: ChartLineProps): import("react").JSX.Element;
+export declare function ChartLine({ accent, categories, curve, defaultHiddenSeries, emptyMessage, formatTooltipValue, formatValue, height, includeZero, hiddenSeries, labelAngle, legend, legendAlign, onHiddenSeriesChange, onHoverCategory, series, showDataLabels, showDots, showTooltip, title, xAxis, yAxis, yAxisRight, }: ChartLineProps): import("react").JSX.Element;

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

@@ -0,0 +1,104 @@
+import { type ChartHeight, type ChartLegendAlign, type MarkVisibility } from '../core/index.js';
+import { type SeriesAppearance } from '../palette/index.js';
+import { type ChartMapFeature, type ChartMapFeatureCollection } from './mapGeometry.js';
+import { type ChartMapColorScale } from './mapScales.js';
+export interface ChartMapRegionDatum {
+    /** `id` da categoria, na escala categorica. */
+    category?: string;
+    /** Casa com o identificador da feicao, lido por `featureIdKey`. */
+    id: string;
+    value?: number | null;
+}
+export interface ChartMapMarker {
+    id: string;
+    label: string;
+    latitude: number;
+    longitude: number;
+    value: number;
+}
+export interface ChartMapMarkerSeries extends SeriesAppearance {
+    id: string;
+    label: string;
+    points: readonly ChartMapMarker[];
+}
+/** Argumento de `onRegionClick`. */
+export interface ChartMapRegion {
+    category: string | null;
+    feature: ChartMapFeature;
+    id: string;
+    name: string;
+    value: number | null;
+}
+/** Argumento de `onMarkerClick`. */
+export interface ChartMapMarkerEvent {
+    id: string;
+    /** `id` da serie. */
+    series: string;
+    value: number;
+}
+export type ChartMapLegendPosition = 'top' | 'bottom' | 'right' | 'none';
+export interface ChartMapProps {
+    /** Cor de tema que abre a paleta das categorias e dos marcadores, como nos demais gráficos. */
+    accent?: string;
+    colorScale?: ChartMapColorScale;
+    data?: readonly ChartMapRegionDatum[];
+    /** Series ocultas de inicio, no modo nao controlado: categorias e series de marcadores, pelo `id`. */
+    defaultHiddenSeries?: readonly string[];
+    emptyMessage?: string;
+    /** Caminho do identificador na feicao, como `properties.sigla`. E por ele que o dado casa. */
+    featureIdKey?: string;
+    /** Caminho do texto curto do rotulo no desenho. Sem ele, o identificador, como a sigla da UF. */
+    featureLabelKey?: string;
+    /** Caminho do nome exibido no balao, na tabela e na descricao. */
+    featureNameKey?: string;
+    /** Ids que o enquadramento abraca. As demais regioes ficam em cinza, como contexto, sem interacao. */
+    focus?: readonly string[];
+    formatPercent?: (ratio: number) => string;
+    formatTooltipValue?: (value: number) => string;
+    formatValue?: (value: number) => string;
+    /** Fronteiras em GeoJSON, fornecidas pelo produto, que responde pela licenca delas. */
+    geometry: ChartMapFeatureCollection;
+    /** Altura maxima em px, ou `fill`. Na largura estreita, a altura encolhe ate a proporcao da geometria. */
+    height?: ChartHeight;
+    /** Faixas ocultas pelo indice, na escala por classes (controlado). */
+    hiddenClasses?: readonly number[];
+    /** Categorias e series de marcadores desligadas, pelo `id` (controlado). */
+    hiddenSeries?: readonly string[];
+    /** Abaixo de 640 px de largura, `right` cai para `bottom`. */
+    legend?: ChartMapLegendPosition;
+    legendAlign?: ChartLegendAlign;
+    /** Raio maximo do marcador, em px. O raio cresce pela raiz do valor, entao a area e proporcional. */
+    markerMaxSize?: number;
+    markerMinSize?: number;
+    markers?: readonly ChartMapMarkerSeries[];
+    markerValueLabel?: string;
+    noDataLabel?: string;
+    noDataStyle?: 'hatch' | 'neutral';
+    onHiddenClassesChange?: (hidden: readonly number[]) => void;
+    onHiddenSeriesChange?: (hidden: readonly string[]) => void;
+    /** Regiao sob o ponteiro ou o foco, para paineis vizinhos. */
+    onHoverRegion?: (id: string | null) => void;
+    /** Com ele, os marcadores viram botoes e entram no teclado. */
+    onMarkerClick?: (marker: ChartMapMarkerEvent) => void;
+    /** Com ele, as regioes viram botoes e entram no teclado. */
+    onRegionClick?: (region: ChartMapRegion) => void;
+    regionLabels?: MarkVisibility;
+    selectedRegion?: string | null;
+    showDataLabels?: MarkVisibility;
+    /** Parte do total no balao e na tabela. So faz sentido em grandeza somavel. */
+    showShare?: boolean;
+    showTableToggle?: boolean;
+    showTooltip?: boolean;
+    /** O rotulo que nao cabe na regiao vai para uma coluna junto ao desenho, com linha guia, ou some. */
+    smallRegionLabels?: 'callout' | 'hidden';
+    /** Linha sob o titulo, como o total do nivel. */
+    subtitle?: string;
+    title: string;
+    valueLabel?: string;
+}
+/**
+ * Regioes pintadas pelo valor e marcadores por coordenada, sobre a geometria GeoJSON que o produto fornece. O desenho
+ * e imagem nomeada pelo titulo; com `onRegionClick` ou `onMarkerClick`, um grupo cujas marcas sao botoes de tabulacao
+ * movel. A leitura completa, com busca, esta na visao em tabela.
+ */
+export declare function ChartMap({ accent, colorScale, data, defaultHiddenSeries, emptyMessage, featureIdKey, featureLabelKey, featureNameKey, focus, formatPercent, formatTooltipValue, formatValue, geometry, height, hiddenClasses, hiddenSeries, legend, legendAlign, markerMaxSize, markerMinSize, markers, markerValueLabel, noDataLabel, noDataStyle, onHiddenClassesChange, onHiddenSeriesChange, onHoverRegion, onMarkerClick, onRegionClick, regionLabels, selectedRegion, showDataLabels, showShare, showTableToggle, showTooltip, smallRegionLabels, subtitle, title, valueLabel, }: ChartMapProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartMap/ChartMapLegend.d.ts

@@ -0,0 +1,44 @@
+import type { CSSProperties } from 'react';
+import { type ChartLegendAlign } from '../core/index.js';
+import type { MapGradient, MapScaleEntry } from './mapScales.js';
+export interface MapLegendEntry extends MapScaleEntry {
+    count: number;
+    hidden: boolean;
+}
+export interface MapLegendSeries {
+    color: string;
+    hidden: boolean;
+    key: string;
+    label: string;
+}
+interface ChartMapLegendProps {
+    align: ChartLegendAlign;
+    entries: readonly MapLegendEntry[];
+    formatValue: (value: number) => string;
+    gradient?: MapGradient;
+    /** Posicao, na barra, do valor da regiao sob o ponteiro. */
+    indicator?: number;
+    markerSeries: readonly MapLegendSeries[];
+    markerSizes?: {
+        maximum: number;
+        radiusOf: (value: number) => number;
+    };
+    markerValueLabel: string;
+    noData?: {
+        color: string;
+        count: number;
+        label: string;
+    };
+    onHighlight: (key: string | null) => void;
+    onToggle: (key: string) => void;
+    onToggleMarkerSeries: (key: string) => void;
+    position: 'top' | 'bottom' | 'right';
+    style?: CSSProperties;
+    valueLabel: string;
+}
+/**
+ * Legenda do mapa: a barra da escala continua, com o valor sob o ponteiro marcado nela, ou as faixas e categorias, que
+ * destacam e desligam as regioes; a entrada de sem dado; e as series de marcadores com a chave de tamanho.
+ */
+export declare function ChartMapLegend({ align, entries, formatValue, gradient, indicator, markerSeries, markerSizes, markerValueLabel, noData, onHighlight, onToggle, onToggleMarkerSeries, position, style, valueLabel, }: ChartMapLegendProps): import("react").JSX.Element | null;
+export {};

package/dist/types/components/charts/ChartMap/ChartMapTable.d.ts

@@ -0,0 +1,38 @@
+export interface MapTableRegionRow {
+    classLabel?: string;
+    id: string;
+    name: string;
+    rank?: number;
+    selected: boolean;
+    /** Parte do total, de 0 a 1. */
+    share?: number;
+    value: number | null;
+    /** Valor formatado, ou a categoria; sem ele, a celula diz que nao ha dado. */
+    valueText?: string;
+}
+export interface MapTableMarkerRow {
+    key: string;
+    name: string;
+    series: string;
+    value: string;
+}
+interface ChartMapTableProps {
+    formatPercent: (ratio: number) => string;
+    markerRows: readonly MapTableMarkerRow[];
+    markerValueLabel: string;
+    maxHeight?: number;
+    noDataLabel: string;
+    regionRows: readonly MapTableRegionRow[];
+    showClasses: boolean;
+    showRank: boolean;
+    showShare: boolean;
+    showValue: boolean;
+    title: string;
+    valueLabel: string;
+}
+/**
+ * Leitura completa do mapa: uma linha por regiao, com busca pelo nome e cabecalhos que ordenam. E o caminho ate as
+ * regioes de poucos pixels, que o ponteiro e o dedo nao alcancam.
+ */
+export declare function ChartMapTable({ formatPercent, markerRows, markerValueLabel, maxHeight, noDataLabel, regionRows, showClasses, showRank, showShare, showValue, title, valueLabel, }: ChartMapTableProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+export { ChartMap } from './ChartMap.js';
+export type { ChartMapLegendPosition, ChartMapMarker, ChartMapMarkerEvent, ChartMapMarkerSeries, ChartMapProps, ChartMapRegion, ChartMapRegionDatum, } from './ChartMap.js';
+export type { ChartMapFeature, ChartMapFeatureCollection } from './mapGeometry.js';
+export type { ChartMapCategory, ChartMapColorScale } from './mapScales.js';

package/dist/types/components/charts/ChartMap/mapGeometry.d.ts

@@ -0,0 +1,56 @@
+import { type GeoProjection } from 'd3-geo';
+import type { Point, Ring } from './polylabel.js';
+/** Feicao GeoJSON. So `Polygon` e `MultiPolygon` se desenham; os demais tipos ficam de fora. */
+export interface ChartMapFeature {
+    geometry: {
+        coordinates?: unknown;
+        type: string;
+    } | null;
+    id?: string | number;
+    properties?: Record<string, unknown> | null;
+}
+export interface ChartMapFeatureCollection {
+    features: readonly ChartMapFeature[];
+}
+/** A feicao como o d3-geo a desenha: sempre multipoligono, com os aneis validos e no sentido dele. */
+export interface MapShape {
+    geometry: {
+        coordinates: number[][][][];
+        type: 'MultiPolygon';
+    };
+    properties: null;
+    type: 'Feature';
+}
+export interface MapRegion {
+    /** Caixa em longitude e latitude: oeste-sul e leste-norte. */
+    bounds: readonly [Point, Point];
+    feature: ChartMapFeature;
+    id: string;
+    /** Texto curto do rotulo no desenho, como a sigla. */
+    label: string;
+    name: string;
+    shape: MapShape;
+}
+export interface MapKeys {
+    idKey: string;
+    labelKey?: string;
+    nameKey: string;
+}
+export declare const MAP_PADDING = 12;
+/** Teto do enquadramento do recorte, em vezes o do mapa inteiro: sozinho, o DF ocupava o palco. */
+export declare const MAX_FOCUS_ZOOM = 12;
+/** Le um caminho como `properties.sigla` na feicao. */
+export declare function valueAt(source: unknown, path: string): unknown;
+/** Regioes desenhaveis da colecao, cada uma com o identificador, o nome e o rotulo lidos pelos caminhos. */
+export declare function regionsOf(collection: ChartMapFeatureCollection, { idKey, labelKey, nameKey }: MapKeys): MapRegion[];
+/** Caixa projetada da regiao: oeste-norte em cima a esquerda, leste-sul embaixo a direita. */
+export declare function projectedBounds(region: MapRegion, projection: GeoProjection): readonly [Point, Point];
+/** Altura que o desenho pede quando ocupa a largura toda: com ela, nao sobra faixa vazia acima e abaixo. */
+export declare function naturalHeight(target: readonly MapRegion[], width: number): number;
+/** Projecao que enquadra o recorte na area, com teto de aproximacao relativo ao mapa inteiro. */
+export declare function fitProjection(target: readonly MapRegion[], all: readonly MapRegion[], width: number, height: number): GeoProjection;
+/**
+ * Partes da regiao na tela, sem os vertices a menos de um pixel do anterior: a busca do rotulo percorre centenas de
+ * pontos, e nao os milhares da malha.
+ */
+export declare function projectedParts(region: MapRegion, projection: GeoProjection): Ring[][];

package/dist/types/components/charts/ChartMap/mapLabels.d.ts

@@ -0,0 +1,51 @@
+import { type Point, type Ring } from './polylabel.js';
+export interface LabelCandidate {
+    /** Caixa da regiao na tela; as maiores rotulam primeiro. */
+    bounds: readonly [Point, Point];
+    id: string;
+    /** Partes da regiao na tela, cada uma com o anel externo e os furos. So e lida quando a caixa comporta o rotulo. */
+    parts: readonly (readonly Ring[])[];
+    title: string;
+    value?: string;
+}
+export interface LabelPlanOptions {
+    /** Leva para a coluna junto ao desenho o rotulo que nao cabe na regiao. */
+    callouts: boolean;
+    /** Distancia entre dois rotulos seguidos na coluna. */
+    calloutStep: number;
+    /** Altura do desenho, que limita quantos rotulos a coluna comporta. */
+    height: number;
+    /** Altura de uma linha de texto do rotulo dentro da regiao. */
+    lineHeight: number;
+    measure: (text: string) => number;
+    /** Borda direita da area de desenho; a coluna nunca passa dela. */
+    right: number;
+}
+export interface InsideLabel {
+    id: string;
+    title: string;
+    value?: string;
+    x: number;
+    y: number;
+}
+export interface CalloutLabel extends InsideLabel {
+    anchor: Point;
+}
+export interface LabelPlan {
+    callouts: CalloutLabel[];
+    inside: InsideLabel[];
+}
+export declare const CALLOUT_GAP = 16;
+/** Espaco entre a sigla e o valor na coluna. */
+export declare const CALLOUT_VALUE_GAP = 5;
+/** A maior parte da regiao, pela area do anel externo: ilhas, como Fernando de Noronha, nao deslocam o rotulo. */
+export declare function largestPart(parts: readonly (readonly Ring[])[]): readonly Ring[];
+/** Largura do rotulo na coluna: a sigla e, ao lado, o valor. */
+export declare function calloutWidth(label: Pick<InsideLabel, 'title' | 'value'>, measure: (text: string) => number): number;
+/**
+ * Onde vai cada rotulo. Da maior regiao para a menor, entra quem cabe inteiro dentro da propria regiao, pelos quatro
+ * cantos, sem tocar outro rotulo; sem espaco para o valor, fica so a sigla; sem espaco nem para ela, o rotulo vai para
+ * uma coluna junto ao desenho, com linha guia, se a regiao esta na metade junto a ela. Quando a coluna nao comporta
+ * todos, como nos municipios, nenhum vai.
+ */
+export declare function planLabels(candidates: readonly LabelCandidate[], options: LabelPlanOptions): LabelPlan;

package/dist/types/components/charts/ChartMap/mapScales.d.ts

@@ -0,0 +1,76 @@
+import { type SeriesAppearance } from '../palette/index.js';
+export interface ChartMapCategory extends SeriesAppearance {
+    id: string;
+    label: string;
+}
+/** `color` troca o azul da rampa por outra cor, de que saem os sete tons: mais escuro é maior, nos dois temas. */
+export type ChartMapColorScale = {
+    color?: string;
+    domain?: readonly [number, number];
+    log?: boolean;
+    type: 'sequential';
+} | {
+    center?: number;
+    domain?: readonly [number, number];
+    type: 'diverging';
+} | {
+    color?: string;
+    count?: number;
+    method: 'quantile' | 'equalInterval';
+    type: 'classes';
+} | {
+    color?: string;
+    labels?: readonly string[];
+    thresholds: readonly number[];
+    type: 'classes';
+} | {
+    categories: readonly ChartMapCategory[];
+    type: 'categorical';
+} | {
+    type: 'none';
+};
+export interface MapDatum {
+    category: string | null;
+    value: number | null;
+}
+/** Uma faixa ou categoria da legenda, que liga e desliga as regioes dela pela chave. */
+export interface MapScaleEntry {
+    color: string;
+    key: string;
+    label: string;
+}
+export interface MapGradient {
+    log: boolean;
+    /** Posicao do valor na barra, de 0 a 1. */
+    position: (value: number) => number;
+    stops: readonly string[];
+    ticks: readonly {
+        position: number;
+        value: number;
+    }[];
+}
+export interface MapScale {
+    entries: readonly MapScaleEntry[];
+    /** Cor da regiao; `undefined` quando ela fica sem dado. */
+    fillOf: (datum: MapDatum) => string | undefined;
+    gradient?: MapGradient;
+    /** Chave da faixa ou da categoria da regiao, quando a legenda as controla. */
+    keyOf: (datum: MapDatum) => string | undefined;
+    /** Nome da faixa ou da categoria, para o balao e a tabela. */
+    labelOf: (datum: MapDatum) => string | undefined;
+    /** A cor mede um valor; na categorica e na nenhuma, ela so nomeia ou nao diz nada. */
+    numeric: boolean;
+}
+export declare const SEQUENTIAL_TOKENS: string[];
+export declare const DIVERGING_TOKENS: string[];
+/** Os sete tons a partir de uma cor: clareada até ela, depois escurecida. A mistura acompanha a cor, token ou não. */
+export declare function rampFrom(color: string): string[];
+/** Cor na posicao da rampa de tokens; entre dois passos, a mistura deles, que segue o tema sozinha. */
+export declare function rampColor(stops: readonly string[], position: number): string;
+/** Limites das faixas calculadas. Com menos valores distintos que faixas, elas diminuem, em vez de sobrar vazias. */
+export declare function classThresholds(method: 'quantile' | 'equalInterval', values: readonly number[], requested?: number): number[];
+/**
+ * Escala de cor das regioes, sobre os valores validos das regioes em jogo. As cores sao tokens, ou a mistura de dois
+ * deles: a troca de tema repinta o mapa sem calculo algum.
+ */
+export declare function buildMapScale(config: ChartMapColorScale, values: readonly number[], format: (value: number) => string, accent?: string): MapScale;

package/dist/types/components/charts/ChartMap/polylabel.d.ts

@@ -0,0 +1,9 @@
+export type Point = readonly [number, number];
+export type Ring = readonly Point[];
+/** Distancia ate a borda mais proxima, com o sinal de dentro ou fora; furos contam como borda. */
+export declare function signedDistance(x: number, y: number, rings: readonly Ring[]): number;
+/**
+ * Centro visual do poligono: o ponto interno mais distante das bordas, achado por subdivisao, como o polylabel do
+ * Mapbox. Num "L" ou num litoral recortado, o centroide cai fora ou colado na borda; este ponto, nao.
+ */
+export declare function polylabel(rings: readonly Ring[], precision?: number): Point;

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

@@ -5,6 +5,8 @@ export interface ChartPieProps {
     defaultHiddenSlices?: 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;
     hiddenSlices?: readonly string[];
@@ -17,6 +19,8 @@ export interface ChartPieProps {
     otherLabel?: string;
     showDataLabels?: boolean;
     showLegendValues?: boolean;
+    /** Balao com a fatia sob o ponteiro, o valor e a parte do total. Desligue para montar o proprio `ChartTooltip`. */
+    showTooltip?: boolean;
     /** Raio dos cantos de cada fatia. Sem valor, o token de raio pequeno. */
     sliceRadius?: number;
     slices: readonly ChartSlice[];
@@ -24,4 +28,4 @@ export interface ChartPieProps {
     smallSliceThreshold?: number;
     title: string;
 }
-export declare function ChartPie({ accent, defaultHiddenSlices, emptyMessage, formatPercent, formatValue, height, hiddenSlices, legend, legendAlign, onHiddenSlicesChange, onHoverSlice, otherLabel, showDataLabels, showLegendValues, sliceRadius, slices, smallSliceThreshold, title, }: ChartPieProps): import("react").JSX.Element;
+export declare function ChartPie({ accent, defaultHiddenSlices, emptyMessage, formatPercent, formatTooltipValue, formatValue, height, hiddenSlices, legend, legendAlign, onHiddenSlicesChange, onHoverSlice, otherLabel, showDataLabels, showLegendValues, showTooltip, sliceRadius, slices, smallSliceThreshold, title, }: ChartPieProps): import("react").JSX.Element;