Referencia

Avanzado

Extiende KatuCharts con series personalizadas y módulos, transmite datos en vivo, maneja conjuntos de datos muy grandes y accede a los bloques de construcción internos.

Sistema de plugins

Tipos de series personalizadas

Subclasifica BaseSeries, dibuja dentro de render(), y registra la clase con SeriesRegistry.

import KatuCharts, { BaseSeries, SeriesRegistry } from 'katucharts.js';

class MyCustomSeries extends BaseSeries {
  render() {
    const { plotArea, xAxis, yAxis } = this.context;
    this.context.chartGroup
      .selectAll('circle.custom-point')
      .data(this.processData())
      .join('circle')
      .attr('cx', d => xAxis.getPixelForValue(d.x) + plotArea.x)
      .attr('cy', d => yAxis.getPixelForValue(d.y) + plotArea.y)
      .attr('r', 6)
      .attr('fill', this.context.colors[this.context.colorIndex]);
  }
}

SeriesRegistry.registerType('mycustom', MyCustomSeries);
KatuCharts.chart(container, { series: [{ type: 'mycustom', data: [{ x: 1, y: 10 }] }] });

Registro de módulos

Agrupa múltiples extensiones en un módulo con un método init(KC) y actívalo con KatuCharts.use().

const myModule = {
  init(KC) {
    KC.SeriesRegistry.registerType('mycustom', MyCustomSeries);
    KC.SeriesRegistry.registerType('mycustom2', MyOtherSeries);
  }
};
KatuCharts.use(myModule);

Puntos de extensión de BaseSeries

Método	Descripción
`render()`	Método de dibujo principal — debe sobrescribirse.
`init(context)`	Se llama una vez al crear; recibe SeriesContext.
`processData()`	Normaliza datos de opciones sin procesar al formato de renderizado.
`animateUpdate(duration)`	Transición personalizada cuando los datos cambian.
`getDataExtents()`	Retorna { xMin, xMax, yMin, yMax } para auto-escala de eje.
`getCategories()`	Retorna string[] cuando la serie impulsa un eje de categoría.
`setVisible(visible, animated?)`	Muestra/oculta la serie.
`destroy()`	Limpia DOM y listeners al eliminar.

SeriesContext

Propiedad	Tipo	Descripción
`plotArea`	{ x, y, width, height }	Región dibujable dentro de los márgenes.
`xAxis / yAxis`	AxisInstance	Ejes resueltos; getPixelForValue(v) mapea datos → píxeles.
`colorIndex / colors`	number / string[]	Índice de paleta para esta serie / la paleta completa.
`events`	EventBus	Bus de eventos compartido para componentes.
`chartGroup`	Selection	Selección SVG de <g> de esta serie.
`totalSeriesOfType / indexInType`	number	Conteo / posición entre series del mismo tipo.
`animate`	boolean	Si las animaciones están habilitadas.

Transmisión en tiempo real

Empuja puntos en vivo en una serie desde tres fuentes. Pasa {{ shift: true }} para mantener una ventana rodante fija; la suscripción retornada tiene unsubscribe().

import { StreamAdapter, UpdateScheduler } from 'katucharts.js';

const sub = StreamAdapter.fromWebSocket(ws, series, parseMessage, { shift: true });
// StreamAdapter.fromEventSource(es, series, 'tick', parseMessage, { shift })
// StreamAdapter.fromPolling(fetchFn, series, 1000, { shift })
sub.unsubscribe();

// Batch many updates into one redraw
UpdateScheduler.batch(() => {
  series.addPoint(p1, false);
  series.addPoint(p2, false);
});

Conjuntos de datos grandes — decimación

Reduce decenas de miles de puntos mientras preservas la forma visual.

import { lttbDecimate, minMaxDecimate } from 'katucharts.js';

// LTTB — keeps the most visually significant point per bucket
const reduced = lttbDecimate(bigDataset, 500);   // 50 000 → 500

// Min/Max — keeps the extremes per bucket (preserves outliers)
const bounds  = minMaxDecimate(bigDataset, 500); // 50 000 → 1 000 (2/bucket)

El gráfico de Manhattan cambia automáticamente a lienzo por encima de ~20k puntos con una superposición SVG interactiva; deshabilita la animación (chart.animation = false) para series muy grandes.

Internos exportados

Clases principales

Exportación	Descripción
`Chart`	Controlador principal — ciclo de vida, renderizado, actualizaciones.
`EventBus`	Sistema de eventos pub/sub compartido entre componentes.
`SVGRenderer`	Capa de renderizado SVG de bajo nivel.
`OptionsParser`	Fusiona opciones del usuario con valores por defecto y valida.
`SeriesRegistry / ModuleRegistry`	Registro de tipo / rastreador de módulos instalados.
`BaseSeries`	Base abstracta que todas las series extienden.

Componentes y características

Exportación	Descripción
`Tooltip / Legend / DataLabels / Crosshair / ExportButton`	Componentes de interfaz de usuario.
`ExportModule`	Exportación programática PNG/SVG/PDF (PDF necesita jspdf).
`ResponsiveEngine / A11yModule`	Redimensionamiento de re-render / ARIA + navegación por teclado.
`Drilldown / Zoom`	Transiciones de perforación / zoom de rueda + caja.
`Navigator / RangeSelector / DataGrouping`	Características de gráfico bursátil.

Funciones de registro

Función	Registra
`registerCoreSeriesTypes()`	línea, área, columnas, dispersión, circular, barras, spline, areaspline, histograma, mapa de calor, cascada, embudo, pirámide, burbujas, boxplot, barra de error, indicador, indicador sólido, polar, veleta
`registerFinancialSeriesTypes()`	velas, ohlc
`registerFlowSeriesTypes()`	sankey, gráfico de red, rueda de dependencias
`registerBioSeriesTypes()`	volcán, manhattan, circos, diagrama de puntos, gráfico de piruleta

Exportaciones de TypeScript

import type {
  KatuChartsOptions, ChartOptions, SeriesOptions, AxisOptions,
  TooltipOptions, LegendOptions, PlotOptions, PointOptions,
  MarkerOptions, DataLabelOptions, SeriesType, PlotArea,
  InternalConfig, ExportingOptions
} from 'katucharts.js';

Utilidades

Exportación	Descripción
`dateFormat(format, timestamp)`	Formateo de fecha estilo strftime.
`numberFormat(value, decimals, decPoint?, thousandsSep?)`	Formateo de número estilo local.
`templateFormat — '{path:spec}'`	Reemplazo de token con una especificación de formato numérico opcional, por ejemplo {point.y:,.0f}.
`parseColor(c)`	→ { r, g, b, a }.
`brighten(c, amount) / setOpacity(c, a)`	Aclara/oscurece / establece alfa.
`getPalette(name) / setGlobalOptions / getGlobalOptions`	Búsqueda de paleta / valores por defecto globales.

import { parseColor, brighten, setOpacity, getPalette } from 'katucharts.js';

parseColor('#1f77b4');           // { r: 31, g: 119, b: 180, a: 1 }
brighten('#1f77b4', 0.3);        // '#5da5d5'
setOpacity('#1f77b4', 0.4);      // 'rgba(31,119,180,0.4)'

// Template tokens (tooltip / dataLabels / axis formatters)
'{point.name}: {point.y:,.0f}'   // 'Revenue: 8,900'
'{series.name} — {point.percentage:.1f}%'