Waffle Chart

Vista previa#

100 cuadros de composición. Demo completa con datos realistas, renderizada en el servidor. Más abajo están las configuraciones, una por una.

Ejemplos#

Todas las configuraciones del componente, cada una viva y con datos propios. Cambia entre Preview y Code en cada tarjeta y copia lo que necesites.

Uso#

Ejemplo mínimo con las props requeridas. Copia, pega y cambia los datos:

import { ChartTooltipPortal, WaffleChart } from "@carlos-burelo/klin";
import "@carlos-burelo/klin/styles.css";
 
<ChartTooltipPortal>
<WaffleChart
  parts={/* … */}
  ariaLabel="Waffle Chart"
/>
</ChartTooltipPortal>

Código de esta demo#

import type { WafflePart } from "@carlos-burelo/klin";
import { ChartTooltipPortal, WaffleChart } from "@carlos-burelo/klin";
 
const parts: WafflePart[] = [
  { label: "Nómina", value: 52 },
  { label: "Materiales", value: 18 },
  { label: "Servicios generales", value: 20 },
  { label: "Mantenimiento", value: 10 },
];
 
function format(value: number): string {
  return new Intl.NumberFormat("es-MX").format(Math.round(value));
}
 
export default function WaffleChartDemo() {
  return (
    <ChartTooltipPortal>
      <WaffleChart
        parts={parts}
        ariaLabel="Composición del gasto operativo en cien partes"
        format={format}
      />
    </ChartTooltipPortal>
  );
}

Props#

Tipo completo: WaffleChartProps en waffle-chart.tsx.

Accesibilidad#

• Toda gráfica exige ariaLabel descriptivo; el SVG usa role="img" con \<title\>.
• Cada forma lleva \<title\> nativo (tooltip sin JS) y data-chart-tip para el portal rico.
• Sin datos se renderiza estado vacío homogéneo (ChartEmpty), nunca SVG roto.
• Detalle del contrato en /docs/accesibilidad.

Recursos#

• Fuente del componente: waffle-chart.tsx
• Guías: SSR-first · Tema · Tooltip