Saltar al contenido

Buscar documentación

Filtra por título, descripción o sección.

@carlos-burelo/klin · v1 · ESM + tipos

Gráficas de producción para React en el servidor.

80 componentes con props tipadas y layout determinista. d3 calcula, el servidor entrega SVG puro: accesible, tematizado y sin JavaScript cliente en el núcleo.

Explorar el catálogoCódigo fuente
Gestor de paquetes
pnpm add @carlos-burelo/klinGuía SSR-first →
  • 80 componentes tipados
  • Núcleo sin JavaScript
  • ESM + tipos

80

componentes con tipos

429

pruebas automatizadas

0 JS

en el núcleo para render

SVG puro · sin hidratación
line-chart · renderizado en servidor
Ver doc
Evolución semestral de visitas y pedidos de la tienda05001,0001,5002,0002,500EneFebMarAbrMayJunEne · Visitas: 1,240 (79% del grupo)Feb · Visitas: 1,480 (79% del grupo)Mar · Visitas: 1,390 (80% del grupo)Abr · Visitas: 1,720 (79% del grupo)May · Visitas: 1,980 (79% del grupo)Jun · Visitas: 2,140 (78% del grupo)Ene · Pedidos: 320 (21% del grupo)Feb · Pedidos: 385 (21% del grupo)Mar · Pedidos: 350 (20% del grupo)Abr · Pedidos: 460 (21% del grupo)May · Pedidos: 540 (21% del grupo)Jun · Pedidos: 610 (22% del grupo)
VisitasPedidos

En vivo

Componentes reales, no capturas

Cada tarjeta monta el componente publicado, renderizado en el servidor con datos representativos.

Ver las 80
bar-chart · series agrupadas
Gráfico de barras de ventas por trimestre en línea y tienda0200400600800T1T1T2T2T3T3T4T4T1 · En línea: 420 (53% del grupo)T1 · Tienda: 380 (48% del grupo)T2 · En línea: 510 (56% del grupo)T2 · Tienda: 400 (44% del grupo)T3 · En línea: 480 (52% del grupo)T3 · Tienda: 450 (48% del grupo)T4 · En línea: 620 (54% del grupo)T4 · Tienda: 530 (46% del grupo)
En líneaTienda
donut-chart · total al centro
Gráfico de dona de matrícula por estadoJalisco: 320 (31% del total)Nuevo León: 280 (27% del total)Puebla: 190 (18% del total)Oaxaca: 140 (13% del total)Yucatán: 110 (11% del total)1,040Alumnos
Jalisco · 320Nuevo León · 280Puebla · 190Oaxaca · 140Yucatán · 110
radial-progress · anillo 0–100
Meta anual: 72%72%Meta anualMeta anual
sparkline · KPI sin ejes
Minigráfica de ventas diarias de las últimas dos semanas: 79 (min 42, max 79)

Comparativa

klin frente al charting cliente

Diferencias estructurales con recharts, nivo o victory: nada personal, todo arquitectura.

klinCliente clásico
Render sin JSSVG completo en el HTMLCanvas o hidratación
ResponsivoviewBox, sin listenersResizeObserver + estado
TooltipNativo + portal opcionalSolo cliente
TemaTokens CSS, dark incluidoColores por componente
Vacío / errorEstado homogéneoManual por proyecto

Cómo funciona

De props a SVG en tres pasos

Sin ResponsiveContainer, sin medición del DOM, sin estado cliente.

Instala
Un paquete npm con provenance. Sin plugins, sin CLI, sin configurar el bundler.
Renderiza
Importa el componente y pasa props tipadas. d3 calcula, el servidor entrega SVG.
Despliega
HTML estático o RSC en cualquier hosting. Sin servidor Node dedicado.
page.tsx — Server Component
import { BarChart } from "@carlos-burelo/klin";

// La salida es <svg> en el HTML: nada que hidratar
<BarChart ariaLabel="Ventas por trimestre" data={data} xKey="t" series={series} />

Principios

Cuatro decisiones, cero magia

Restricciones deliberadas que mantienen el sistema predecible a medida que crece el catálogo.

Servidor primero
Cada gráfica es función pura de props a SVG. El documento llega completo; el cliente es opcional.
d3 solo para cálculo
Scales, shapes y layouts. Sin selection, sin medición del DOM, sin estado.
Un único módulo cliente
Solo el portal de tooltip trae JS. Sin él, cada forma conserva su <title> nativo.
Tema por tokens
Paleta y superficies por variables del tema. Claro y oscuro sin bifurcar código.

Instalación

Sin configuración

Paquete npm con ESM y tipos. El CSS del tema se importa una vez; tu bundler incluye solo lo que usas.

Terminal
pnpm add @carlos-burelo/klin
globals.css
/* Una vez, junto a tu tema */
@import "@carlos-burelo/klin/styles.css";

Catálogo

80 componentes con tipos y docs

Filtra por familia y abre la doc viva: ejemplo mínimo, variantes, props y accesibilidad por componente.

80 de 80

Area ChartBar ChartBox PlotBullet ChartCalendar HeatmapDiverging BarDonut ChartPie ChartFunnel ChartGauge ChartHorizontal Bar ChartMatrix HeatmapHistogramLine ChartLollipop ChartPareto ChartProgress ListPyramid ChartQuadrant ChartRadar ChartRadial ProgressSankey DiagramScatter PlotSparklineStacked BarStreamgraphSunburst ChartTreemap ChartVertical Stacked BarWaterfall ChartWaffle ChartBeeswarm PlotBump ChartCandlestick ChartDumbbell ChartMarimekko ChartNightingale ChartRadial Bar ChartRange ChartRidgeline PlotSlope ChartViolin PlotTernary PlotDot PlotIsotype ChartChord DiagramDensity Contour PlotHexbin PlotTable ChartCombo ChartCohort ChartParallel CoordinatesStrip PlotHorizon ChartECDF ChartArc DiagramArchitecture DiagramClass DiagramER DiagramFlow ChartState DiagramUse Case DiagramSequence DiagramMindmap DiagramOrg ChartKanban BoardTimeline ChartTree ViewNetwork GraphNetwork TopologyVenn DiagramWardley MapGantt ChartCircle Pack ChartDendrogram ChartIcicle ChartFishbone DiagramChart LegendChart EmptyTooltip Portal

Area Chart, Bar Chart, Box Plot, Bullet Chart, Calendar Heatmap, Diverging Bar, Donut Chart, Pie Chart, Funnel Chart, Gauge Chart, Horizontal Bar Chart, Matrix Heatmap, Histogram, Line Chart, Lollipop Chart, Pareto Chart, Progress List, Pyramid Chart, Quadrant Chart, Radar Chart, Radial Progress, Sankey Diagram, Scatter Plot, Sparkline, Stacked Bar, Streamgraph, Sunburst Chart, Treemap Chart, Vertical Stacked Bar, Waterfall Chart, Waffle Chart, Beeswarm Plot, Bump Chart, Candlestick Chart, Dumbbell Chart, Marimekko Chart, Nightingale Chart, Radial Bar Chart, Range Chart, Ridgeline Plot, Slope Chart, Violin Plot, Ternary Plot, Dot Plot, Isotype Chart, Chord Diagram, Density Contour Plot, Hexbin Plot, Table Chart, Combo Chart, Cohort Chart, Parallel Coordinates, Strip Plot, Horizon Chart, ECDF Chart, Arc Diagram, Architecture Diagram, Class Diagram, ER Diagram, Flow Chart, State Diagram, Use Case Diagram, Sequence Diagram, Mindmap Diagram, Org Chart, Kanban Board, Timeline Chart, Tree View, Network Graph, Network Topology, Venn Diagram, Wardley Map, Gantt Chart, Circle Pack Chart, Dendrogram Chart, Icicle Chart, Fishbone Diagram, Chart Legend, Chart Empty, Tooltip Portal

FAQ

Preguntas frecuentes

Empieza ahora

Del catálogo a producción

Cada componente documenta ejemplo mínimo, variantes, props y accesibilidad. Copia, adapta, despliega.

Ir a la documentaciónLeer guía SSR-first