Seis nuevos elementos visuales de sgcHTML: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode y Barcode

Segunda entrega de nuestro recorrido por los 25 componentes que sgcHTML acaba de incorporar. Este lote trata de píxeles: seis componentes que se renderizan directamente como SVG en línea en el servidor, sin Chart.js, sin librería de QR, sin JavaScript del lado del cliente que cargar ni versionar. Se establecen las propiedades, se llama a HTML y listo. Tres son elementos visuales de datos — Heatmap, Sparkline, CandlestickChart y TreeMap — y dos son códigos escaneables — QRCode y Barcode.

Heatmap — una cuadrícula con escala de color

TsgcHTMLComponent_Heatmap toma una cuadrícula de filas/columnas con números y la renderiza como un SVG con escala de color: los valores bajos en un color, los altos en otro, con una leyenda opcional. Se rellenan RowLabels y ColumnLabels, y luego se llama a SetCell para cada punto de datos.

uses
  sgcHTML_Component_Heatmap;

var
  oHeatmap: TsgcHTMLComponent_Heatmap;
begin
  oHeatmap := TsgcHTMLComponent_Heatmap.Create(nil);
  try
    oHeatmap.RowLabels.CommaText := 'Mon,Tue,Wed,Thu,Fri';
    oHeatmap.ColumnLabels.CommaText := '9h,12h,15h,18h';
    oHeatmap.ShowLegend := True;
    oHeatmap.ShowValues := True;

    oHeatmap.SetCell(0, 0, 12);
    oHeatmap.SetCell(0, 1, 48);
    oHeatmap.SetCell(1, 2, 76);
    oHeatmap.SetCell(4, 3, 92);

    WebModule.Response := oHeatmap.HTML;   // SVG grid, min->max colour scale
  finally
    oHeatmap.Free;
  end;
end;

// Or bind it straight to a dataset:
oHeatmap.LoadFromDataSet(qryTraffic, 'DayName', 'HourSlot', 'Visits');

Tráfico por hora, actividad por día de la semana, tasa de errores por endpoint — en cualquier lugar donde recurrirías a una tabla con código de colores, LoadFromDataSet te lleva ahí directamente desde una consulta.

Sparkline — una pequeña tendencia en línea

TsgcHTMLComponent_Sparkline es el pequeño gráfico de líneas/barras/área sin etiquetas que se coloca en línea junto a un número — el indicador de tendencia de una tarjeta KPI, el mini-historial de una celda de tabla. También cuenta con un helper estático Build para un uso realmente de una sola línea cuando no necesitas mantener viva la instancia del componente.

uses
  sgcHTML_Component_Sparkline;

var
  oSpark: TsgcHTMLComponent_Sparkline;
  sHTML: string;
begin
  oSpark := TsgcHTMLComponent_Sparkline.Create(nil);
  try
    oSpark.ChartType := slArea;
    oSpark.Width := 160;
    oSpark.Height := 32;
    oSpark.ShowLastPoint := True;
    oSpark.SetData([14, 18, 12, 22, 30, 26, 34]);

    WebModule.Response := oSpark.HTML;   // inline SVG, no chart library
  finally
    oSpark.Free;
  end;
end;

// Or bind it straight to a dataset:
oSpark.LoadFromDataSet(qryRevenue, 'Amount');

// One-liner for inline use inside a bigger page:
sHTML := TsgcHTMLComponent_Sparkline.Build([5, 9, 4, 12, 7], slBar);

CandlestickChart — OHLC sin librería de gráficos

TsgcHTMLComponent_CandlestickChart renderiza un auténtico gráfico de velas OHLC — mechas, cuerpos, coloreado alcista/bajista, una franja de volumen opcional — como SVG en línea. AddPoint recibe una etiqueta más apertura/máximo/mínimo/cierre (y opcionalmente volumen) por barra.

uses
  sgcHTML_Component_CandlestickChart;

var
  oChart: TsgcHTMLComponent_CandlestickChart;
begin
  oChart := TsgcHTMLComponent_CandlestickChart.Create(nil);
  try
    oChart.Width := 800;
    oChart.Height := 400;
    oChart.ShowVolume := True;

    oChart.AddPoint('Mon', 101.2, 104.8, 100.1, 103.5, 125000);
    oChart.AddPoint('Tue', 103.5, 106.0, 102.8, 105.1, 98000);
    oChart.AddPoint('Wed', 105.1, 105.4, 101.0, 101.9, 154000);

    WebModule.Response := oChart.HTML;   // SVG candles + wicks + volume strip
  finally
    oChart.Free;
  end;
end;

// Or bind it straight to a dataset:
oChart.LoadFromDataSet(qryOHLC, 'TradeDate', 'OpenPrice', 'HighPrice',
  'LowPrice', 'ClosePrice', 'Volume');

TreeMap — rectángulos proporcionales

TsgcHTMLComponent_TreeMap organiza un conjunto de valores con nombre como un treemap squarified — el clásico visual de "presupuesto por departamento" o "uso de disco por carpeta", donde el área de cada rectángulo es proporcional a su valor. El algoritmo de disposición se ejecuta completamente en el servidor.

uses
  sgcHTML_Component_TreeMap;

var
  oTreeMap: TsgcHTMLComponent_TreeMap;
begin
  oTreeMap := TsgcHTMLComponent_TreeMap.Create(nil);
  try
    oTreeMap.Width := 640;
    oTreeMap.Height := 360;
    oTreeMap.ColorScheme := tmCool;
    oTreeMap.ShowValues := True;

    oTreeMap.AddItem('Engineering', 420000);
    oTreeMap.AddItem('Sales', 260000);
    oTreeMap.AddItem('Marketing', 140000);
    oTreeMap.AddItem('Support', 90000, '#20c997');   // explicit colour overrides the scheme

    WebModule.Response := oTreeMap.HTML;   // <svg> squarified rectangles, no client-side library
  finally
    oTreeMap.Free;
  end;
end;

// Or bind it straight to a dataset:
oTreeMap.LoadFromDataSet(qryBudget, 'Department', 'Amount');

// One-shot helper, no instance to manage:
Response := TsgcHTMLComponent_TreeMap.Build(['Engineering', 'Sales'], [420000, 260000]);

QRCode y Barcode — códigos escaneables, cero dependencias

Ambos son implementaciones en Pascal puro — sin librería de codificación externa, sin llamadas a servicios de imágenes. TsgcHTMLComponent_QRCode es un codificador ISO/IEC 18004 real con un nivel de corrección de errores seleccionable; TsgcHTMLComponent_Barcode genera Code 128 con un subtítulo legible opcional debajo. Ambos también exponen un helper estático Build.

uses
  sgcHTML_Component_QRCode;

var
  oQR: TsgcHTMLComponent_QRCode;
begin
  oQR := TsgcHTMLComponent_QRCode.Create(nil);
  try
    oQR.Data := 'https://www.esegece.com';
    oQR.ECCLevel := qrHigh;
    oQR.ModuleSize := 6;
    oQR.Caption := 'Scan to open';
    oQR.CaptionVisible := True;

    WebModule.Response := oQR.HTML;   // SVG QR modules + optional caption
  finally
    oQR.Free;
  end;
end;

// One-liner for inline use inside a bigger page:
sHTML := TsgcHTMLComponent_QRCode.Build('https://www.esegece.com', qrHigh, 6);

uses
  sgcHTML_Component_Barcode;

var
  oBarcode: TsgcHTMLComponent_Barcode;
begin
  oBarcode := TsgcHTMLComponent_Barcode.Create(nil);
  try
    oBarcode.Data := 'ACME-00219841';
    oBarcode.Symbology := bsCode128;
    oBarcode.ModuleWidth := 2;
    oBarcode.Height := 60;
    oBarcode.ShowText := True;

    WebModule.Response := oBarcode.HTML;   // SVG bars + human-readable text
  finally
    oBarcode.Free;
  end;
end;

Números de factura, etiquetas de activos, ubicaciones de almacén, entradas de eventos — en cualquier lugar donde tu aplicación ya imprima un código de referencia, estos dos lo convierten en algo que la cámara de un teléfono o un lector de mano pueden leer, sin una sola solicitud de recursos externos.

Pruébalos

La documentación completa, las referencias de propiedades clave y ejemplos de código en Delphi/C++Builder/.NET están disponibles en la página de cada componente: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode y Barcode. Lo próximo en esta serie: entradas de formulario más inteligentes.

¿Preguntas, comentarios o ayuda con la migración? Ponte en contacto — recibirás una respuesta de las personas que escribieron el código.