analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
77 lines • 2.69 kB
TypeScript
/**
* Statistics data item
*/
interface StatItem {
/** Statistic label */
label: string;
/** Statistic value */
value: string | number;
/** Color variant */
variant: 'high' | 'medium' | 'low' | 'total';
}
/**
* Props for StatisticsCard component
*/
interface StatisticsCardProps {
/** Title displayed at the top of the card */
title: string;
/** Statistics data to display */
data?: StatItem[];
/** Show placeholder "-" in values when true (for created items without data yet) */
showPlaceholder?: boolean;
/** Message shown in empty state */
emptyStateMessage?: string;
/** Text for the empty state button */
emptyStateButtonText?: string;
/** Callback when empty state button is clicked */
onEmptyStateButtonClick?: () => void;
/** Optional dropdown options for filtering */
dropdownOptions?: Array<{
label: string;
value: string;
}>;
/** Currently selected dropdown value */
selectedDropdownValue?: string;
/** Callback when dropdown value changes */
onDropdownChange?: (value: string) => void;
/** Placeholder text for the dropdown select */
selectPlaceholder?: string;
/** Accessible label for the dropdown select */
dropdownAriaLabel?: string;
/** Additional CSS classes */
className?: string;
}
/**
* StatisticsCard component - displays statistics with empty state support
*
* @example
* ```tsx
* // With data
* <StatisticsCard
* title="Estatística das atividades"
* data={[
* { label: 'Acertos', value: '85%', variant: 'high' },
* { label: 'Em andamento', value: 12, variant: 'medium' },
* { label: 'Erros', value: '15%', variant: 'low' },
* { label: 'Concluídas', value: 24, variant: 'total' }
* ]}
* dropdownOptions={[
* { label: '1 ano', value: '1year' },
* { label: '6 meses', value: '6months' }
* ]}
* selectedDropdownValue="1year"
* onDropdownChange={(value) => console.log(value)}
* />
*
* // Empty state
* <StatisticsCard
* title="Estatística das atividades"
* emptyStateMessage="Sem dados por enquanto. Crie uma atividade para que os resultados apareçam aqui."
* emptyStateButtonText="Criar atividade"
* onEmptyStateButtonClick={() => console.log('Create activity')}
* />
* ```
*/
export declare const StatisticsCard: ({ title, data, showPlaceholder, emptyStateMessage, emptyStateButtonText, onEmptyStateButtonClick, dropdownOptions, selectedDropdownValue, onDropdownChange, selectPlaceholder, dropdownAriaLabel, className, }: StatisticsCardProps) => import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=StatisticsCard.d.ts.map