analytica-frontend-lib/dist/RangeGauge/index.d.ts

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

import { HTMLAttributes } from 'react';
/**
 * A band of the gauge (e.g. "below expected", "above expected").
 */
export interface RangeGaugeZone {
    /**
     * Exclusive upper bound of the band, in the same unit as `value`.
     * Omit on the last zone: it is open-ended and bounded by `max`.
     */
    to?: number;
    /** Tailwind background class painting the band (e.g. `bg-indicator-positive`). */
    colorClass: string;
    /** Human-readable name of the band, exposed to assistive tech. */
    label?: string;
}
export interface RangeGaugeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
    /** Current measurement (e.g. words per minute). */
    value: number;
    /** Bands, in ascending order. Every zone but the last needs a `to`. */
    zones: RangeGaugeZone[];
    /** Start of the scale. Default `0`. */
    min?: number;
    /** End of the scale. Defaults to the last bounded zone's `to`. */
    max?: number;
    /** Hides the pointer (e.g. while the measurement is unavailable). */
    showPointer?: boolean;
    /** Extra classes for the bar track. */
    barClassName?: string;
}
/**
 * Pointer offset, as a 0-100 percentage of the track.
 *
 * Zones are drawn with EQUAL widths (as designed), but their thresholds are
 * not evenly spaced — so a naive `value / max` would drift into the wrong
 * band (a value above the "expected" threshold could still render over the
 * orange zone). Instead the value is placed inside its own band and then
 * mapped onto that band's equal-width slot, which keeps the pointer and the
 * colour underneath it always in agreement.
 */
export declare const pointerPercent: (value: number, zones: RangeGaugeZone[], min: number, max: number) => number;
/**
 * Horizontal banded gauge: a track split into coloured zones with a pointer
 * marking where a measurement sits. Used by the reading-fluency results to
 * show reading speed against the expected range.
 *
 * The thresholds live in the consumer (they are pedagogical rules, not a
 * design concern) — this component only renders what it is given.
 *
 * @example
 * ```tsx
 * <RangeGauge
 *   value={38}
 *   max={120}
 *   zones={[
 *     { to: 40, colorClass: 'bg-indicator-positive', label: 'Ainda decodificando' },
 *     { to: 65, colorClass: 'bg-warning-400', label: 'Abaixo do esperado' },
 *     { colorClass: 'bg-success-400', label: 'Acima do esperado' },
 *   ]}
 * />
 * ```
 */
export declare const RangeGauge: ({ value, zones, min, max, showPointer, className, barClassName, ...props }: RangeGaugeProps) => import("react/jsx-runtime").JSX.Element;
export default RangeGauge;
//# sourceMappingURL=RangeGauge.d.ts.map