analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
71 lines • 2.52 kB
TypeScript
import { type HTMLAttributes } from 'react';
/**
* Single item in the performance ranking
*/
export interface PerformanceRankingItem {
position: number;
name: string;
count: number;
percentage: number;
trend: 'up' | 'down' | null;
/** Only present when groupedBy = 'class' */
shift?: string;
/** Only present when groupedBy = 'class' */
grade?: string;
}
/**
* How the ranking data is grouped
*/
export type GroupedBy = 'state' | 'municipality' | 'class';
/**
* Full ranking data from the API
*/
export interface PerformanceRankingData {
/** Informational only — the component does not branch on this value.
* Class-specific rendering (shift/grade) is derived from field presence. */
groupedBy: GroupedBy;
highlighted: (PerformanceRankingItem | null)[];
needsAttention: (PerformanceRankingItem | null)[];
}
/**
* Props for the PerformanceRanking component
*/
export interface PerformanceRankingProps extends HTMLAttributes<HTMLDivElement> {
/** Ranking data from the API */
data: PerformanceRankingData;
/** Title for the highlight card */
highlightTitle?: string;
/** Title for the attention card */
attentionTitle?: string;
/** Label displayed next to the count value (e.g. "estudantes") */
countLabel?: string;
}
/**
* PerformanceRanking component — displays two cards side by side showing
* highlighted regions/municipalities/classes and those needing attention.
*
* Supports nullable items, per-item trend indicators, count badges,
* and optional shift/grade info for class grouping.
*
* @example
* ```tsx
* <PerformanceRanking
* data={{
* groupedBy: 'state',
* highlighted: [
* { position: 1, name: 'SP', count: 150, percentage: 85, trend: 'up' },
* { position: 2, name: 'RJ', count: 120, percentage: 78, trend: 'down' },
* { position: 3, name: 'MG', count: 100, percentage: 72, trend: null },
* ],
* needsAttention: [
* { position: 1, name: 'BA', count: 30, percentage: 25, trend: 'down' },
* { position: 2, name: 'PE', count: 35, percentage: 28, trend: null },
* { position: 3, name: 'CE', count: 40, percentage: 32, trend: 'up' },
* ],
* }}
* />
* ```
*/
export declare const PerformanceRanking: ({ data, highlightTitle, attentionTitle, countLabel, className, ...props }: PerformanceRankingProps) => import("react/jsx-runtime").JSX.Element;
export default PerformanceRanking;
//# sourceMappingURL=PerformanceRanking.d.ts.map