Six nouveaux visuels sgcHTML : Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode et Barcode

18 juillet 2026 · Composants

Second article de notre tour d'horizon des 25 composants que sgcHTML vient de gagner. Ce lot est une affaire de pixels : six composants qui se rendent directement en SVG inline sur le serveur, sans Chart.js, sans bibliothèque QR, sans le moindre JavaScript côté client à charger ou à versionner. Définissez les propriétés, appelez HTML, et c'est fait. Trois sont des visuels de données — Heatmap, Sparkline, CandlestickChart et TreeMap — et deux sont des codes scannables — QRCode et Barcode.

Heatmap — une grille à échelle de couleurs

TsgcHTMLComponent_Heatmap prend une grille de nombres organisée en lignes et colonnes et la restitue en SVG à échelle de couleurs, une couleur pour les valeurs basses, une autre pour les valeurs hautes, avec une légende optionnelle. Renseignez RowLabels et ColumnLabels, puis appelez SetCell pour chaque point de données.

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

Trafic par heure, activité par jour de la semaine, taux d'erreur par endpoint — partout où vous auriez recours à un tableau à code couleur, LoadFromDataSet vous y mène directement depuis une requête.

Sparkline — une mini-tendance inline

TsgcHTMLComponent_Sparkline est le petit graphique en ligne/barres/aires, sans étiquette, que vous insérez en ligne à côté d'un nombre — l'indicateur de tendance d'une tuile KPI, le mini-historique d'une cellule de tableau. Il dispose aussi d'un helper statique Build pour un usage vraiment en une ligne, quand vous n'avez pas besoin de conserver l'instance du composant.

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 — de l'OHLC sans bibliothèque de graphiques

TsgcHTMLComponent_CandlestickChart restitue un véritable graphique en chandeliers OHLC — mèches, corps, coloration hausse/baisse, une bande de volume optionnelle — en SVG inline. AddPoint prend une étiquette plus open/high/low/close (et optionnellement le volume) pour chaque barre.

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 — des rectangles proportionnels

TsgcHTMLComponent_TreeMap dispose un ensemble de valeurs nommées sous la forme d'un treemap squarifié — le visuel classique "budget par département" ou "usage disque par dossier", la surface de chaque rectangle étant proportionnelle à sa valeur. L'algorithme de disposition s'exécute entièrement côté serveur.

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 et Barcode — des codes scannables, zéro dépendance

Les deux sont des implémentations en Pascal pur — aucune bibliothèque d'encodage externe, aucun appel à un service d'images. TsgcHTMLComponent_QRCode est un véritable encodeur ISO/IEC 18004 avec un niveau de correction d'erreur sélectionnable ; TsgcHTMLComponent_Barcode génère du Code 128 avec une légende lisible optionnelle en dessous. Les deux exposent également un helper statique 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;

Numéros de facture, étiquettes d'actifs, bacs d'entrepôt, billets d'événement — partout où votre application imprime déjà un code de référence, ces deux composants le transforment en quelque chose qu'un appareil photo de téléphone ou un scanner portable peut lire, sans la moindre requête vers une ressource externe.

Essayez-les

La documentation complète, les références des propriétés clés et des exemples de code Delphi/C++Builder/.NET se trouvent sur la page propre à chaque composant : Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode et Barcode. Prochain épisode de cette série : des champs de formulaire plus intelligents.

Des questions, un retour ou besoin d'aide pour une migration ? Contactez-nous — vous recevrez une réponse des personnes qui ont écrit le code.