Sei nuovi elementi visivi sgcHTML: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode e Barcode

Secondo post del nostro tour tra i 25 componenti appena arrivati in sgcHTML. Questa puntata parla di pixel: sei componenti che renderizzano direttamente in SVG inline sul server, senza Chart.js, senza librerie per QR, senza alcun JavaScript lato client da caricare o versionare. Impostate le proprietà, chiamate HTML, fatto. Tre sono elementi visivi per i dati — Heatmap, Sparkline, CandlestickChart e TreeMap — e due sono codici scansionabili — QRCode e Barcode.

Heatmap — una griglia a scala di colore

TsgcHTMLComponent_Heatmap prende una griglia di numeri organizzata in righe e colonne e la renderizza come SVG a scala di colore, un colore per i valori bassi, un altro per quelli alti, con una legenda opzionale. Popolate RowLabels e ColumnLabels, quindi chiamate SetCell per ogni punto dati.

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');

Traffico per ora, attività per giorno della settimana, tasso di errore per endpoint — ovunque ricorrereste a una tabella a colori, LoadFromDataSet vi porta lì direttamente da una query.

Sparkline — un piccolo trend inline

TsgcHTMLComponent_Sparkline è il piccolo grafico a linee/barre/aree senza etichette che inserite in linea accanto a un numero — l'indicatore di tendenza di una scheda KPI, la mini-cronologia di una cella di tabella. Dispone anche di un helper statico Build per un uso realmente in una sola riga, quando non serve mantenere l'istanza 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 senza libreria di grafici

TsgcHTMLComponent_CandlestickChart renderizza un vero grafico a candele OHLC — stoppini, corpi, colorazione rialzo/ribasso, una fascia volumi opzionale — come SVG inline. AddPoint accetta un'etichetta più i valori di apertura/massimo/minimo/chiusura (ed eventualmente il volume) per ogni 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 — rettangoli proporzionali

TsgcHTMLComponent_TreeMap dispone un insieme di valori con nome come treemap squadrato — il classico elemento visivo "budget per reparto" o "spazio disco per cartella", con l'area di ogni rettangolo proporzionale al suo valore. L'algoritmo di layout viene eseguito interamente lato server.

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 — codici scansionabili, zero dipendenze

Entrambi sono implementazioni pure Pascal — nessuna libreria di codifica esterna, nessuna chiamata a un servizio di immagini. TsgcHTMLComponent_QRCode è un vero encoder ISO/IEC 18004 con livello di correzione d'errore selezionabile; TsgcHTMLComponent_Barcode genera codici Code 128 con una didascalia leggibile opzionale sottostante. Entrambi espongono inoltre un helper statico 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;

Numeri di fattura, etichette patrimoniali, scomparti di magazzino, biglietti per eventi — ovunque la vostra app stampi già un codice di riferimento, questi due componenti lo trasformano in qualcosa che una fotocamera di uno smartphone o uno scanner portatile può leggere, senza una singola richiesta di risorsa esterna.

Provateli

La documentazione completa, i riferimenti alle proprietà principali e gli esempi di codice per Delphi/C++Builder/.NET si trovano nella pagina dedicata a ciascun componente: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode e Barcode. Prossimamente in questa serie: campi modulo più intelligenti.

Domande, feedback o serve aiuto con la migrazione? Contattateci — riceverete una risposta da chi ha scritto il codice.