analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
183 lines • 5.63 kB
TypeScript
import { type HTMLAttributes } from 'react';
export { bgClassToCssVar } from '../utils/chartUtils';
import { PROFILE_ROLES } from '../types/chat';
import type { StudentsHighlightPeriod } from '../hooks/useStudentsHighlight';
/**
* Keys for TimeChart categories, matching the API field names.
*/
export declare enum TIME_CHART_CATEGORY_KEY {
ACTIVITIES = "activities",
CONTENT = "content",
SIMULATIONS = "simulations",
QUESTIONNAIRES = "questionnaires",
RECOMMENDED_LESSONS = "recommendedLessons"
}
/**
* A single category of time data (e.g., "Atividades", "Conteúdo")
*/
export interface TimeChartCategory {
/** Unique key matching the API field name */
key: TIME_CHART_CATEGORY_KEY;
/** Display label for legends */
label: string;
/** Tailwind bg- color class (e.g., "bg-success-700") */
colorClass: string;
}
/**
* A single period entry from the API hoursByPeriod array.
* Can be passed directly from the API response.
* The `label` field is the period label, other fields are hours by category key.
*/
export interface TimeChartDayData {
label: string;
[key: string]: string | number;
}
/**
* Complete data for the TimeChart component
*/
export interface TimeChartData {
/** Category definitions (determines colors and legend) */
categories: TimeChartCategory[];
/** Per-period breakdown for the stacked bar chart (API hoursByPeriod) */
hoursByPeriod: TimeChartDayData[];
/** Percentages for pie chart by category key (API hoursByItem, 0-100).
* When provided, pie chart uses these. Otherwise computes from hoursByPeriod totals. */
hoursByItem?: Record<string, number>;
}
/**
* Props for the TimeChart component
*/
export interface TimeChartProps extends HTMLAttributes<HTMLDivElement> {
/** Chart data including categories and period breakdown */
data: TimeChartData;
/** Title for the bar chart card */
barChartTitle?: string;
/** Title for the pie chart card */
pieChartTitle?: string;
/** Height of the bar chart area in pixels */
chartHeight?: number;
/** SVG pie chart diameter in pixels */
pieSize?: number;
/**
* Suffix appended to the bar chart values (Y-axis and tooltips).
* Defaults to 'h' (hours). Pass '' for plain counts.
*/
unitSuffix?: string;
}
/**
* Predefined category configs for student profile
*/
export declare const STUDENT_CATEGORIES: TimeChartCategory[];
/**
* Predefined category configs for other profiles (teacher, manager)
*/
export declare const DEFAULT_CATEGORIES: TimeChartCategory[];
/**
* Request body for POST /access-report/access/chart
*/
export interface TimeChartRequest {
period: StudentsHighlightPeriod;
targetProfile: PROFILE_ROLES;
schoolGroupIds?: string[];
schoolIds?: string[];
allSchoolGroupsSelected?: boolean;
allSchoolsSelected?: boolean;
}
/**
* A single period entry for student profile response
*/
export interface TimeChartStudentPeriodItem {
label: string;
activities: number;
content: number;
simulations: number;
questionnaires: number;
recommendedLessons: number;
}
/**
* Hours by item breakdown for student profile (percentages 0-100)
*/
export interface TimeChartStudentItemBreakdown {
activities: number;
content: number;
simulations: number;
questionnaires: number;
recommendedLessons: number;
}
/**
* API response data for student profile
*/
export interface TimeChartStudentData {
labels: string[];
hoursByPeriod: TimeChartStudentPeriodItem[];
hoursByItem: TimeChartStudentItemBreakdown;
}
/**
* A single period entry for non-student profile response
*/
export interface TimeChartDefaultPeriodItem {
label: string;
activities: number;
recommendedLessons: number;
}
/**
* Hours by item breakdown for non-student profiles (percentages 0-100)
*/
export interface TimeChartDefaultItemBreakdown {
activities: number;
recommendedLessons: number;
}
/**
* API response data for non-student profiles
*/
export interface TimeChartDefaultData {
labels: string[];
hoursByPeriod: TimeChartDefaultPeriodItem[];
hoursByItem: TimeChartDefaultItemBreakdown;
}
/**
* Full API response wrapper
*/
export interface TimeChartResponse<T extends TimeChartStudentData | TimeChartDefaultData> {
message: string;
data: T;
}
/**
* Calculate Y-axis tick values formatted for hours display.
* Rounds up to the nearest multiple of 4 so that dividing into 4 equal
* intervals always produces integer ticks with uniform spacing.
*/
export declare const calculateHourTicks: (maxHours: number) => number[];
/**
* TimeChart component - displays time data as a stacked bar chart (hours per period)
* and a pie chart (hours by category) side by side.
*
* Data can be passed directly from the API response without transformation:
*
* @example
* ```tsx
* // Student profile - pass API data directly
* <TimeChart
* data={{
* categories: STUDENT_CATEGORIES,
* hoursByPeriod: apiResponse.data.hoursByPeriod,
* hoursByItem: apiResponse.data.hoursByItem,
* }}
* />
* ```
*
* @example
* ```tsx
* // Teacher/Manager profile
* <TimeChart
* data={{
* categories: DEFAULT_CATEGORIES,
* hoursByPeriod: apiResponse.data.hoursByPeriod,
* hoursByItem: apiResponse.data.hoursByItem,
* }}
* />
* ```
*/
export declare const TimeChart: ({ data, barChartTitle, pieChartTitle, chartHeight, pieSize, unitSuffix, className, ...props }: TimeChartProps) => import("react/jsx-runtime").JSX.Element;
export default TimeChart;
//# sourceMappingURL=TimeChart.d.ts.map