Seis Novos Visuais sgcHTML: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode e Barcode

Segundo post do nosso tour pelos 25 componentes que o sgcHTML acabou de ganhar. Este lote é sobre pixels: seis componentes que renderizam diretamente para SVG inline no servidor, sem Chart.js, sem biblioteca de QR, sem nenhum JavaScript no lado do cliente para carregar ou versionar. Defina as propriedades, chame HTML, pronto. Três são visuais de dados — Heatmap, Sparkline, CandlestickChart e TreeMap — e dois são códigos escaneáveis — QRCode e Barcode.

Heatmap — uma grade com escala de cores

TsgcHTMLComponent_Heatmap recebe uma grade de linhas/colunas de números e a renderiza como um SVG com escala de cores, valores baixos em uma cor, valores altos em outra, com uma legenda opcional. Preencha RowLabels e ColumnLabels, depois chame SetCell para cada ponto de dado.

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áfego por hora, atividade por dia da semana, taxa de erro por endpoint — em qualquer lugar onde você recorreria a uma tabela com código de cores, LoadFromDataSet leva você lá diretamente a partir de uma query.

Sparkline — uma pequena tendência inline

TsgcHTMLComponent_Sparkline é o pequeno gráfico de linha/barra/área sem rótulos que você insere inline ao lado de um número — o indicador de tendência de um KPI tile, o mini-histórico de uma célula de tabela. Também tem um helper estático Build para uso genuinamente de uma linha, quando você não precisa manter a instância do componente por perto.

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 sem biblioteca de gráficos

TsgcHTMLComponent_CandlestickChart renderiza um genuíno gráfico de velas OHLC — pavios, corpos, colorização de alta/baixa, uma faixa de volume opcional — como SVG inline. AddPoint recebe um rótulo mais abertura/máxima/mínima/fechamento (e opcionalmente volume) 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 — retângulos proporcionais

TsgcHTMLComponent_TreeMap organiza um conjunto de valores nomeados como um treemap esquadrinhado (squarified) — o clássico visual de "orçamento por departamento" ou "uso de disco por pasta", com a área de cada retângulo proporcional ao seu valor. O algoritmo de layout roda inteiramente no 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 e Barcode — códigos escaneáveis, zero dependências

Ambos são implementações puramente Pascal — sem biblioteca externa de codificação, sem chamada a serviço de imagem. TsgcHTMLComponent_QRCode é um codificador ISO/IEC 18004 de verdade, com nível de correção de erro selecionável; TsgcHTMLComponent_Barcode gera Code 128 com uma legenda legível opcional embaixo. Ambos também expõem um 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 fatura, etiquetas de ativos, posições de armazém, ingressos de eventos — em qualquer lugar em que seu aplicativo já imprima um código de referência, esses dois transformam-no em algo que a câmera de um celular ou um leitor portátil consegue ler, sem uma única requisição a recurso externo.

Experimente

Documentação completa, referências das principais propriedades e exemplos de código em Delphi/C++Builder/.NET estão disponíveis na página de cada componente: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode e Barcode. A seguir nesta série: campos de formulário mais inteligentes.

Perguntas, feedback ou ajuda com migração? Entre em contato — você receberá uma resposta de quem escreveu o código.