analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
75 lines • 2.27 kB
TypeScript
import { HTMLAttributes } from 'react';
/**
* Data structure for questions statistics.
* Compatible with useQuestionsData hook output (hook data can be passed directly).
*/
export interface QuestionsDataItem {
/** Total number of questions answered */
total: number;
/** Number of correct answers */
corretas: number;
/** Number of incorrect answers */
incorretas: number;
/** Number of blank (unanswered) questions */
emBranco?: number;
}
/**
* Props for the QuestionsData component
*/
export interface QuestionsDataProps extends HTMLAttributes<HTMLDivElement> {
/** Card title */
title?: string;
/** Question statistics data */
data: QuestionsDataItem;
/** Whether to show blank questions bar */
showEmBranco?: boolean;
/** Maximum value for the chart scale (defaults to total) */
maxValue?: number;
/** Height of the chart area in pixels */
chartHeight?: number;
}
/**
* QuestionsData component - displays a vertical bar chart showing
* question statistics (total, correct, incorrect, and optionally blank).
*
* @example
* ```tsx
* // Basic usage with static data
* <QuestionsData
* title="Dados de questões"
* data={{
* total: 120,
* corretas: 80,
* incorretas: 30,
* emBranco: 10,
* }}
* showEmBranco
* />
* ```
*
* @example
* ```tsx
* // Usage with useQuestionsData hook (direct usage - no transformation needed)
* const fetchQuestionsData = async (filters) => {
* const response = await api.get('/performance/questions-data', { params: filters });
* return response.data;
* };
*
* const useQuestionsData = createUseQuestionsData(fetchQuestionsData);
*
* function MyComponent() {
* const { data, loading, fetchQuestionsData } = useQuestionsData();
*
* useEffect(() => {
* fetchQuestionsData({ period: '1_MONTH' });
* }, [fetchQuestionsData]);
*
* if (loading || !data) return <Skeleton />;
*
* return <QuestionsData data={data} showEmBranco />;
* }
* ```
*/
export declare const QuestionsData: ({ title, data, showEmBranco, maxValue, chartHeight, className, ...props }: QuestionsDataProps) => import("react/jsx-runtime").JSX.Element;
export default QuestionsData;
//# sourceMappingURL=QuestionsData.d.ts.map