Sechs neue sgcHTML-Visuals: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode und Barcode

Zweiter Beitrag unserer Tour durch die 25 Komponenten, die sgcHTML gerade dazubekommen hat. In dieser Runde geht es um Pixel: sechs Komponenten, die direkt auf dem Server als Inline-SVG gerendert werden, ganz ohne Chart.js, ohne QR-Bibliothek, ohne jegliches clientseitiges JavaScript zum Laden oder Versionieren. Eigenschaften setzen, HTML aufrufen, fertig. Drei sind Daten-Visuals — Heatmap, Sparkline, CandlestickChart und TreeMap — und zwei sind scannbare Codes — QRCode und Barcode.

Heatmap — ein farblich skaliertes Raster

TsgcHTMLComponent_Heatmap nimmt ein Zeilen-/Spalten-Raster aus Zahlen entgegen und rendert es als farblich skaliertes SVG, niedrige Werte in einer Farbe, hohe Werte in einer anderen, mit optionaler Legende. Befüllen Sie RowLabels und ColumnLabels, und rufen Sie dann für jeden Datenpunkt SetCell auf.

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

Traffic nach Stunde, Aktivität nach Wochentag, Fehlerquote nach Endpunkt — überall dort, wo Sie sonst zu einer farbcodierten Tabelle greifen würden, bringt Sie LoadFromDataSet direkt von einer Query dorthin.

Sparkline — ein winziger Inline-Trend

TsgcHTMLComponent_Sparkline ist das kleine, beschriftungsfreie Linien-/Balken-/Flächendiagramm, das Sie inline neben eine Zahl setzen — der Trendindikator einer KPI-Kachel, die Mini-Historie einer Tabellenzelle. Außerdem gibt es einen statischen Build-Helfer für den wirklich einzeiligen Einsatz, wenn Sie die Komponenteninstanz nicht behalten müssen.

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 ohne Chart-Bibliothek

TsgcHTMLComponent_CandlestickChart rendert ein echtes OHLC-Candlestick-Chart — Dochte, Körper, Auf-/Ab-Färbung, ein optionaler Volumenstreifen — als Inline-SVG. AddPoint nimmt pro Kerze eine Beschriftung sowie Open/High/Low/Close (und optional Volumen) entgegen.

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 — proportionale Rechtecke

TsgcHTMLComponent_TreeMap ordnet eine Reihe benannter Werte als squarified Treemap an — der klassische Visual-Typ "Budget nach Abteilung" oder "Speicherplatz nach Ordner", wobei die Fläche jedes Rechtecks proportional zu seinem Wert ist. Der Layout-Algorithmus läuft vollständig serverseitig.

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 und Barcode — scannbare Codes, keine Abhängigkeiten

Beide sind reine Pascal-Implementierungen — keine externe Encoding-Bibliothek, kein Aufruf eines Bilddienstes. TsgcHTMLComponent_QRCode ist ein echter ISO/IEC-18004-Encoder mit wählbarer Fehlerkorrekturstufe; TsgcHTMLComponent_Barcode erzeugt Code 128 mit einer optionalen, für Menschen lesbaren Beschriftung darunter. Beide bieten außerdem einen statischen Build-Helfer.

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;

Rechnungsnummern, Asset-Tags, Lagerplätze, Eventtickets — überall dort, wo Ihre Anwendung bereits einen Referenzcode ausdruckt, machen diese beiden daraus etwas, das eine Handykamera oder ein Handscanner lesen kann, ganz ohne eine einzige externe Asset-Anfrage.

Jetzt ausprobieren

Vollständige Dokumentation, Referenzen der wichtigsten Eigenschaften und Delphi-/C++Builder-/.NET-Codebeispiele finden Sie auf der jeweiligen Komponentenseite: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode und Barcode. Als Nächstes in dieser Serie: intelligentere Formulareingaben.

Fragen, Feedback oder Hilfe bei der Migration? Kontaktieren Sie uns — Sie bekommen eine Antwort von den Leuten, die den Code geschrieben haben.