Zes nieuwe sgcHTML-visuals: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode en Barcode

Tweede post in onze rondgang langs de 25 componenten die sgcHTML zojuist heeft gekregen. Deze lichting draait om pixels: zes componenten die op de server rechtstreeks naar inline SVG renderen, zonder Chart.js, zonder QR-bibliotheek, zonder ook maar enige client-side JavaScript om te laden of te versiebeheren. Properties instellen, HTML aanroepen, klaar. Drie zijn datavisuals — Heatmap, Sparkline, CandlestickChart en TreeMap — en twee zijn scanbare codes — QRCode en Barcode.

Heatmap — een kleurgeschaald raster

TsgcHTMLComponent_Heatmap neemt een rij/kolomraster van getallen en rendert dit als een kleurgeschaalde SVG, lage waarden een kleur, hoge waarden een andere, met een optionele legenda. Vul RowLabels en ColumnLabels in en roep vervolgens SetCell aan voor elk datapunt.

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-raster, min->max kleurschaal
  finally
    oHeatmap.Free;
  end;
end;

// Of koppel het rechtstreeks aan een dataset:
oHeatmap.LoadFromDataSet(qryTraffic, 'DayName', 'HourSlot', 'Visits');

Verkeer per uur, activiteit per weekdag, foutpercentage per endpoint — overal waar u naar een kleurgecodeerde tabel zou grijpen, brengt LoadFromDataSet u er rechtstreeks vanuit een query.

Sparkline — een kleine inline trend

TsgcHTMLComponent_Sparkline is de kleine, label-vrije lijn-/staaf-/vlakgrafiek die u inline naast een getal plaatst — de trendindicator van een KPI-tegel, de mini-historie van een tabelcel. Het heeft ook een statische Build-helper voor echt eenregelig gebruik wanneer u de component-instantie niet hoeft te bewaren.

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, geen grafiekbibliotheek
  finally
    oSpark.Free;
  end;
end;

// Of koppel het rechtstreeks aan een dataset:
oSpark.LoadFromDataSet(qryRevenue, 'Amount');

// Eenregelige oplossing voor inline gebruik binnen een grotere pagina:
sHTML := TsgcHTMLComponent_Sparkline.Build([5, 9, 4, 12, 7], slBar);

CandlestickChart — OHLC zonder grafiekbibliotheek

TsgcHTMLComponent_CandlestickChart rendert een volwaardige OHLC-candlestickgrafiek — lonten, lichamen, op/neer-kleuring, een optionele volumestrook — als inline SVG. AddPoint neemt een label plus open/hoog/laag/slot (en optioneel volume) per balk.

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 + lonten + volumestrook
  finally
    oChart.Free;
  end;
end;

// Of koppel het rechtstreeks aan een dataset:
oChart.LoadFromDataSet(qryOHLC, 'TradeDate', 'OpenPrice', 'HighPrice',
  'LowPrice', 'ClosePrice', 'Volume');

TreeMap — proportionele rechthoeken

TsgcHTMLComponent_TreeMap zet een set benoemde waarden uit als een squarified treemap — de klassieke visual voor "budget per afdeling" of "schijfgebruik per map", waarbij de oppervlakte van elke rechthoek evenredig is met de waarde. Het lay-outalgoritme draait volledig server-side.

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');   // expliciete kleur overschrijft het schema

    WebModule.Response := oTreeMap.HTML;   // <svg> squarified rechthoeken, geen client-side bibliotheek
  finally
    oTreeMap.Free;
  end;
end;

// Of koppel het rechtstreeks aan een dataset:
oTreeMap.LoadFromDataSet(qryBudget, 'Department', 'Amount');

// Eenmalige helper, geen instantie om te beheren:
Response := TsgcHTMLComponent_TreeMap.Build(['Engineering', 'Sales'], [420000, 260000]);

QRCode en Barcode — scanbare codes, zonder afhankelijkheden

Beide zijn pure-Pascal-implementaties — geen externe encoderingsbibliotheek, geen aanroep naar een image-service. TsgcHTMLComponent_QRCode is een echte ISO/IEC 18004-encoder met een selecteerbaar foutcorrectieniveau; TsgcHTMLComponent_Barcode genereert Code 128 met een optioneel leesbaar bijschrift eronder. Beide bieden ook een statische Build-helper.

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 + optioneel bijschrift
  finally
    oQR.Free;
  end;
end;

// Eenregelige oplossing voor inline gebruik binnen een grotere pagina:
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-balken + leesbare tekst
  finally
    oBarcode.Free;
  end;
end;

Factuurnummers, activalabels, magazijnbakken, evenemententickets — overal waar uw app al een referentiecode afdrukt, maken deze twee er iets van dat een telefooncamera of handscanner kan lezen, zonder ook maar één externe asset-aanvraag.

Probeer ze

Volledige documentatie, referenties van de belangrijkste properties en Delphi/C++Builder/.NET-codevoorbeelden staan op de eigen pagina van elk component: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode en Barcode. Volgende keer in deze reeks: slimmere forminvoervelden.

Vragen, feedback of hulp bij migratie? Neem contact op — u krijgt antwoord van de mensen die de code hebben geschreven.