Altı Yeni sgcHTML Görseli: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode ve Barcode

sgcHTML'nin yeni kazandığı 25 bileşeni tanıttığımız serinin ikinci yazısı. Bu grup piksellerle ilgili: sunucuda doğrudan satır içi SVG'ye render edilen, Chart.js gerektirmeyen, QR kütüphanesi gerektirmeyen, yüklenecek veya sürümlenecek hiçbir istemci taraflı JavaScript içermeyen altı bileşen. Özellikleri ayarlayın, HTML'i çağırın, işiniz biter. Üçü veri görseli — Heatmap, Sparkline, CandlestickChart ve TreeMap — ikisi ise taranabilir kod — QRCode ve Barcode.

Heatmap — renk skalalı bir ızgara

TsgcHTMLComponent_Heatmap, bir satır/sütun sayı ızgarası alır ve bunu renk skalalı bir SVG olarak render eder; düşük değerler bir renk, yüksek değerler başka bir renk, isteğe bağlı bir açıklama (legend) ile birlikte. RowLabels ve ColumnLabels'ı doldurun, ardından her veri noktası için SetCell'i çağırın.

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

Saatlik trafik, haftanın gününe göre etkinlik, uç noktaya göre hata oranı — renk kodlu bir tabloya başvuracağınız her yerde, LoadFromDataSet sizi doğrudan bir sorgudan oraya götürür.

Sparkline — küçük, satır içi bir eğilim

TsgcHTMLComponent_Sparkline, bir sayının yanına satır içi olarak yerleştirdiğiniz küçük, etiketsiz çizgi/çubuk/alan grafiğidir — bir KPI kutusunun eğilim göstergesi, bir tablo hücresinin mini geçmişi. Bileşen örneğini elde tutmanıza gerek olmadığında, gerçek anlamda tek satırlık kullanım için statik bir Build yardımcı metodu da vardır.

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 — grafik kütüphanesi olmadan OHLC

TsgcHTMLComponent_CandlestickChart, gerçek bir OHLC mum grafiğini — fitiller, gövdeler, yükseliş/düşüş renklendirmesi, isteğe bağlı bir hacim şeridi — satır içi SVG olarak render eder. AddPoint, her çubuk için bir etiket ile birlikte açılış/en yüksek/en düşük/kapanış (ve isteğe bağlı olarak hacim) değerlerini alır.

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 — orantılı dikdörtgenler

TsgcHTMLComponent_TreeMap, adlandırılmış bir değerler kümesini kare biçimli (squarified) bir ağaç haritası olarak düzenler — her dikdörtgenin alanı kendi değeriyle orantılı olan klasik "departmana göre bütçe" veya "klasöre göre disk kullanımı" görseli. Yerleşim algoritması tamamen sunucu tarafında çalışır.

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 ve Barcode — taranabilir kodlar, sıfır bağımlılık

Her ikisi de saf Pascal uygulamalarıdır — harici bir kodlama kütüphanesi yok, bir görüntü servisi çağrısı yok. TsgcHTMLComponent_QRCode, seçilebilir bir hata düzeltme seviyesine sahip gerçek bir ISO/IEC 18004 kodlayıcısıdır; TsgcHTMLComponent_Barcode ise altında isteğe bağlı, insan tarafından okunabilir bir başlıkla Code 128 üretir. Her ikisi de statik bir Build yardımcı metodu sunar.

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;

Fatura numaraları, varlık etiketleri, depo gözleri, etkinlik biletleri — uygulamanızın zaten bir referans kod bastığı her yerde, bu ikisi onu tek bir harici kaynak isteği olmadan bir telefon kamerasının veya el tipi bir tarayıcının okuyabileceği bir şeye dönüştürür.

Deneyin

Tam dokümantasyon, temel özellik referansları ve Delphi/C++Builder/.NET kod örnekleri her bileşenin kendi sayfasında bulunur: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode ve Barcode. Bu serinin bir sonraki yazısı: daha akıllı form girdileri.

Sorularınız, geri bildiriminiz mi var ya da geçiş konusunda yardıma mı ihtiyacınız var? Bizimle iletişime geçin — yanıtı kodu yazan kişilerden alacaksınız.