analytica-frontend-lib/dist/chunk-VLSFQH37.mjs.map

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

{"version":3,"sources":["../src/components/QuestionsData/QuestionsData.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\nimport {\n  calculateYAxisTicks,\n  LegendItem,\n  DataBar,\n  GridLines,\n  YAxis,\n  type BarItemConfig,\n} from '../shared/ChartComponents';\n\n/**\n * Data structure for questions statistics.\n * Compatible with useQuestionsData hook output (hook data can be passed directly).\n */\nexport interface QuestionsDataItem {\n  /** Total number of questions answered */\n  total: number;\n  /** Number of correct answers */\n  corretas: number;\n  /** Number of incorrect answers */\n  incorretas: number;\n  /** Number of blank (unanswered) questions */\n  emBranco?: number;\n}\n\n/**\n * Props for the QuestionsData component\n */\nexport interface QuestionsDataProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string;\n  /** Question statistics data */\n  data: QuestionsDataItem;\n  /** Whether to show blank questions bar */\n  showEmBranco?: boolean;\n  /** Maximum value for the chart scale (defaults to total) */\n  maxValue?: number;\n  /** Height of the chart area in pixels */\n  chartHeight?: number;\n}\n\n/**\n * Color classes for bars and legend dots using design system tokens\n */\nconst BAR_COLORS = {\n  total: 'bg-info-600',\n  corretas: 'bg-success-200',\n  incorretas: 'bg-warning-400',\n  emBranco: 'bg-background-300',\n} as const;\n\n/**\n * QuestionsData component - displays a vertical bar chart showing\n * question statistics (total, correct, incorrect, and optionally blank).\n *\n * @example\n * ```tsx\n * // Basic usage with static data\n * <QuestionsData\n *   title=\"Dados de questões\"\n *   data={{\n *     total: 120,\n *     corretas: 80,\n *     incorretas: 30,\n *     emBranco: 10,\n *   }}\n *   showEmBranco\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Usage with useQuestionsData hook (direct usage - no transformation needed)\n * const fetchQuestionsData = async (filters) => {\n *   const response = await api.get('/performance/questions-data', { params: filters });\n *   return response.data;\n * };\n *\n * const useQuestionsData = createUseQuestionsData(fetchQuestionsData);\n *\n * function MyComponent() {\n *   const { data, loading, fetchQuestionsData } = useQuestionsData();\n *\n *   useEffect(() => {\n *     fetchQuestionsData({ period: '1_MONTH' });\n *   }, [fetchQuestionsData]);\n *\n *   if (loading || !data) return <Skeleton />;\n *\n *   return <QuestionsData data={data} showEmBranco />;\n * }\n * ```\n */\nexport const QuestionsData = ({\n  title = 'Dados de questões',\n  data,\n  showEmBranco = false,\n  maxValue,\n  chartHeight = 180,\n  className,\n  ...props\n}: QuestionsDataProps) => {\n  // Calculate the maximum value for the scale\n  const chartMaxValue = maxValue ?? data.total;\n\n  // Calculate Y-axis ticks\n  const yAxisTicks = calculateYAxisTicks(chartMaxValue);\n  const adjustedMaxValue = yAxisTicks[0]; // Use the nice max for calculations\n\n  // Build accessible chart description\n  const blankSuffix =\n    showEmBranco && data.emBranco !== undefined\n      ? `, ${data.emBranco} em branco`\n      : '';\n  const chartDescription = `Gráfico de barras mostrando ${data.total} questões respondidas, ${data.corretas} corretas, ${data.incorretas} incorretas${blankSuffix}`;\n\n  // Build bar items configuration\n  const barItems: BarItemConfig[] = [\n    {\n      key: 'total',\n      label: 'Total',\n      legendLabel: 'Total de questões respondidas',\n      value: data.total,\n      colorClass: BAR_COLORS.total,\n    },\n    {\n      key: 'corretas',\n      label: 'Corretas',\n      legendLabel: 'Questões corretas',\n      value: data.corretas,\n      colorClass: BAR_COLORS.corretas,\n    },\n    {\n      key: 'incorretas',\n      label: 'Incorretas',\n      legendLabel: 'Questões incorretas',\n      value: data.incorretas,\n      colorClass: BAR_COLORS.incorretas,\n    },\n  ];\n\n  // Add blank questions bar if enabled\n  if (showEmBranco && data.emBranco !== undefined) {\n    barItems.push({\n      key: 'emBranco',\n      label: 'Em branco',\n      legendLabel: 'Questões em branco',\n      value: data.emBranco,\n      colorClass: BAR_COLORS.emBranco,\n    });\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col p-5 gap-4 bg-background border border-border-50 rounded-xl',\n        className\n      )}\n      {...props}\n    >\n      {/* Header */}\n      <Text\n        as=\"h3\"\n        size=\"lg\"\n        weight=\"bold\"\n        className=\"text-text-950 tracking-[0.2px]\"\n      >\n        {title}\n      </Text>\n\n      {/* Legend */}\n      <div className=\"flex flex-row flex-wrap gap-x-6 gap-y-2 mb-4\">\n        {barItems.map((item) => (\n          <LegendItem\n            key={item.key}\n            color={BAR_COLORS[item.key as keyof typeof BAR_COLORS]}\n            label={item.legendLabel}\n          />\n        ))}\n      </div>\n\n      {/* Chart */}\n      <div className=\"flex flex-row\" aria-label={chartDescription}>\n        {/* Y-Axis */}\n        <YAxis ticks={yAxisTicks} chartHeight={chartHeight} />\n\n        {/* Spacer between Y-axis and chart */}\n        <div className=\"w-4\" />\n\n        {/* Chart area with grid and bars */}\n        <div className=\"flex-1 relative\">\n          {/* Grid lines */}\n          <GridLines ticks={yAxisTicks} chartHeight={chartHeight} />\n\n          {/* Bars */}\n          <div className=\"flex flex-row flex-1 gap-4 relative z-10\">\n            {barItems.map((item) => (\n              <DataBar\n                key={item.key}\n                label={item.label}\n                value={item.value}\n                maxValue={adjustedMaxValue}\n                colorClass={item.colorClass}\n                chartHeight={chartHeight}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default QuestionsData;\n"],"mappings":";;;;;;;;;;;;;;;AAmKM,cA6BE,YA7BF;AArHN,IAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AACZ;AA4CO,IAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAA0B;AAExB,QAAM,gBAAgB,YAAY,KAAK;AAGvC,QAAM,aAAa,oBAAoB,aAAa;AACpD,QAAM,mBAAmB,WAAW,CAAC;AAGrC,QAAM,cACJ,gBAAgB,KAAK,aAAa,SAC9B,KAAK,KAAK,QAAQ,eAClB;AACN,QAAM,mBAAmB,kCAA+B,KAAK,KAAK,6BAA0B,KAAK,QAAQ,cAAc,KAAK,UAAU,cAAc,WAAW;AAG/J,QAAM,WAA4B;AAAA,IAChC;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO,KAAK;AAAA,MACZ,YAAY,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO,KAAK;AAAA,MACZ,YAAY,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO,KAAK;AAAA,MACZ,YAAY,WAAW;AAAA,IACzB;AAAA,EACF;AAGA,MAAI,gBAAgB,KAAK,aAAa,QAAW;AAC/C,aAAS,KAAK;AAAA,MACZ,KAAK;AAAA,MACL,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO,KAAK;AAAA,MACZ,YAAY,WAAW;AAAA,IACzB,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAGJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,QAAO;AAAA,YACP,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QAGA,oBAAC,SAAI,WAAU,gDACZ,mBAAS,IAAI,CAAC,SACb;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO,WAAW,KAAK,GAA8B;AAAA,YACrD,OAAO,KAAK;AAAA;AAAA,UAFP,KAAK;AAAA,QAGZ,CACD,GACH;AAAA,QAGA,qBAAC,SAAI,WAAU,iBAAgB,cAAY,kBAEzC;AAAA,8BAAC,SAAM,OAAO,YAAY,aAA0B;AAAA,UAGpD,oBAAC,SAAI,WAAU,OAAM;AAAA,UAGrB,qBAAC,SAAI,WAAU,mBAEb;AAAA,gCAAC,aAAU,OAAO,YAAY,aAA0B;AAAA,YAGxD,oBAAC,SAAI,WAAU,4CACZ,mBAAS,IAAI,CAAC,SACb;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAO,KAAK;AAAA,gBACZ,OAAO,KAAK;AAAA,gBACZ,UAAU;AAAA,gBACV,YAAY,KAAK;AAAA,gBACjB;AAAA;AAAA,cALK,KAAK;AAAA,YAMZ,CACD,GACH;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,wBAAQ;","names":[]}