Sześć nowych wizualizacji sgcHTML: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode i Barcode

Drugi wpis z naszego przeglądu 25 komponentów, które właśnie otrzymał sgcHTML. Ta partia dotyczy pikseli: sześć komponentów renderowanych bezpośrednio do inline SVG po stronie serwera, bez Chart.js, bez biblioteki QR, bez jakiegokolwiek JavaScriptu po stronie klienta do wczytania czy wersjonowania. Ustaw właściwości, wywołaj HTML i gotowe. Trzy z nich to wizualizacje danych — Heatmap, Sparkline, CandlestickChart i TreeMap — a dwa to skanowalne kody — QRCode i Barcode.

Heatmap — siatka w skali kolorów

TsgcHTMLComponent_Heatmap przyjmuje siatkę liczb w układzie wierszy i kolumn i renderuje ją jako SVG w skali kolorów: niskie wartości w jednym kolorze, wysokie w innym, z opcjonalną legendą. Wypełnij RowLabels i ColumnLabels, a następnie wywołaj SetCell dla każdego punktu danych.

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

Ruch według godzin, aktywność według dnia tygodnia, wskaźnik błędów według endpointu — wszędzie tam, gdzie sięgnąłbyś po tabelę w kolorach, LoadFromDataSet zaprowadzi Cię tam bezpośrednio z zapytania.

Sparkline — mały wykres trendu w linii tekstu

TsgcHTMLComponent_Sparkline to mały wykres liniowy/słupkowy/obszarowy bez etykiet, który umieszczasz obok liczby — wskaźnik trendu na kafelku KPI, mini-historia w komórce tabeli. Ma też statyczną metodę pomocniczą Build do naprawdę jednolinijkowego użycia, gdy nie potrzebujesz utrzymywać instancji komponentu.

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 bez biblioteki wykresów

TsgcHTMLComponent_CandlestickChart renderuje prawdziwy wykres świecowy OHLC — knoty, korpusy, kolorowanie wzrost/spadek, opcjonalny pasek wolumenu — jako inline SVG. AddPoint przyjmuje etykietę oraz wartości open/high/low/close (i opcjonalnie wolumen) dla każdej świecy.

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 — proporcjonalne prostokąty

TsgcHTMLComponent_TreeMap układa zestaw nazwanych wartości jako squarified treemap — klasyczna wizualizacja typu "budżet według działu" czy "wykorzystanie dysku według folderu", gdzie powierzchnia każdego prostokąta jest proporcjonalna do jego wartości. Algorytm układu działa w całości po stronie serwera.

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 i Barcode — skanowalne kody, zero zależności

Oba to implementacje w czystym Pascalu — bez zewnętrznej biblioteki kodującej, bez wywołania usługi obrazów. TsgcHTMLComponent_QRCode to prawdziwy koder ISO/IEC 18004 z wybieralnym poziomem korekcji błędów; TsgcHTMLComponent_Barcode generuje kod Code 128 z opcjonalnym czytelnym dla człowieka podpisem poniżej. Oba udostępniają też statyczną metodę pomocniczą 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;

Numery faktur, etykiety zasobów, oznaczenia magazynowe, bilety na wydarzenia — wszędzie tam, gdzie Twoja aplikacja i tak już drukuje kod referencyjny, te dwa komponenty zamieniają go w coś, co odczyta aparat telefonu lub ręczny skaner, bez ani jednego zewnętrznego żądania zasobu.

Wypróbuj je

Pełna dokumentacja, opisy kluczowych właściwości oraz przykłady kodu w Delphi/C++Builder/.NET znajdują się na własnej stronie każdego komponentu: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode i Barcode. Następny w tej serii: inteligentniejsze pola formularzy.

Masz pytania, uwagi albo potrzebujesz pomocy z migracją? Skontaktuj się z nami — odpowie Ci osoba, która faktycznie napisała ten kod.