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

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

/**
 * Bar item configuration used by chart components
 */
export interface BarItemConfig {
    key: string;
    label: string;
    legendLabel: string;
    value: number;
    colorClass: string;
}
/**
 * Calculate Y-axis tick values based on max value.
 * Rounds up to the nearest multiple of 10 and generates 5 evenly spaced ticks.
 */
export declare const calculateYAxisTicks: (maxValue: number) => number[];
/**
 * Legend dot + label for chart legends
 */
export declare const LegendItem: ({ color, label, }: {
    color: string;
    label: string;
}) => import("react/jsx-runtime").JSX.Element;
/**
 * Individual vertical bar component
 */
export declare const DataBar: ({ label, value, maxValue, colorClass, chartHeight, }: {
    label: string;
    value: number;
    maxValue: number;
    colorClass: string;
    chartHeight: number;
}) => import("react/jsx-runtime").JSX.Element;
/**
 * Horizontal dashed grid lines for chart background
 */
export declare const GridLines: ({ ticks, chartHeight, }: {
    ticks: number[];
    chartHeight: number;
}) => import("react/jsx-runtime").JSX.Element;
/**
 * Y-Axis tick labels
 */
export declare const YAxis: ({ ticks, chartHeight, }: {
    ticks: number[];
    chartHeight: number;
}) => import("react/jsx-runtime").JSX.Element;
/**
 * A single slice of a pie chart.
 * Provide either `colorClass` (Tailwind bg-* class) or `color` (direct CSS value).
 * When `color` is set it takes precedence over `colorClass`.
 */
export interface PieSlice {
    /** Unique key for the slice (uses label if not provided) */
    key?: string;
    label: string;
    /** Drives the slice's angle. Always the number — never a formatted string. */
    value: number;
    colorClass: string;
    /** Direct CSS color value — takes precedence over colorClass when provided */
    color?: string;
    /**
     * What the legend shows, when it differs from `value`.
     *
     * The pie is sized by the percentage, but the legend often needs to read as
     * something else — "1h 20min" rather than "45". Falls back to `value`.
     */
    displayValue?: string | number;
}
/**
 * Props for SimplePieChart component
 */
export interface SimplePieChartProps {
    /** Array of slices to render */
    slices: PieSlice[];
    /** Chart size in pixels (default: 130) */
    size?: number;
    /** Text to show when all values are zero */
    emptyText?: string;
    /** Minimum percentage to display label inside slice (default: 5) */
    minPercentageForLabel?: number;
    /** Label position as ratio of radius (default: 0.62) */
    labelRadiusRatio?: number;
    /** Label text color (default: var(--color-text-950)) */
    labelColor?: string;
    /** Label font weight (default: 500) */
    labelFontWeight?: number;
    /** Label text shadow (default: none) */
    labelTextShadow?: string;
    /** Hover overlay opacity (default: 0.4) */
    hoverOpacity?: number;
    /** External hover state (controlled mode) */
    hoveredSlice?: string | null;
    /** Callback when slice is hovered */
    onSliceHover?: (key: string | null) => void;
}
/**
 * Interactive SVG pie chart built from PieSlice data.
 * Shows percentage labels for slices above minimum threshold.
 * Renders a grey circle when all values are zero.
 */
export declare const SimplePieChart: ({ slices, size, emptyText, minPercentageForLabel, labelRadiusRatio, labelColor, labelFontWeight, labelTextShadow, hoverOpacity, hoveredSlice: externalHovered, onSliceHover, }: SimplePieChartProps) => import("react/jsx-runtime").JSX.Element;
/**
 * A single legend row: colour dot + label + value.
 */
export declare const LegendRow: ({ colorClass, color, label, value, displayValue, }: {
    colorClass: string;
    color?: string;
    label: string;
    value: number;
    displayValue?: string | number;
}) => import("react/jsx-runtime").JSX.Element;
/**
 * Card with a legend list and a pie chart side by side.
 */
export declare const LegendPieCard: ({ slices }: {
    slices: PieSlice[];
}) => import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=ChartComponents.d.ts.map