sgcHTMLに6つの新しいビジュアル: Heatmap、Sparkline、CandlestickChart、TreeMap、QRCode、Barcode | eSeGeCe ブログ

sgcHTMLの新しい6つのビジュアル: Heatmap、Sparkline、CandlestickChart、TreeMap、QRCode、Barcode

· コンポーネント

sgcHTMLに新たに追加された25個のコンポーネントを紹介するシリーズの第2弾です。今回はピクセルの話です。サーバー上でインラインSVGへ直接レンダリングする6つのコンポーネントで、Chart.jsもQRライブラリも、読み込みやバージョン管理が必要なクライアント側JavaScriptも一切不要です。プロパティを設定し、HTMLを呼び出せば完了です。データビジュアルが3つ — Heatmap、Sparkline、CandlestickChart、TreeMap — そしてスキャン可能なコードが2つ — QRCodeとBarcodeです。

Heatmap — 色調グラデーションのグリッド

TsgcHTMLComponent_Heatmapは行と列からなる数値グリッドを受け取り、低い値を一方の色、高い値をもう一方の色として色分けしたSVGにレンダリングします。凡例をオプションで表示できます。RowLabelsとColumnLabelsを設定してから、各データポイントごとにSetCellを呼び出します。

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

時間帯別トラフィック、曜日別アクティビティ、エンドポイント別エラー率 — 色分けされた表が欲しくなる場面ならどこでも、LoadFromDataSetを使えばクエリから直接そこに到達できます。

Sparkline — 小さなインライントレンド

TsgcHTMLComponent_Sparklineは、数値の隣にインラインで配置する、ラベルなしの小さな折れ線・棒・エリアチャートです。KPIタイルのトレンド表示や、テーブルセルのミニ履歴などに使えます。コンポーネントのインスタンスを保持する必要がない場合のために、文字通り一行で使える静的なBuildヘルパーも用意されています。

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

TsgcHTMLComponent_CandlestickChartは、本物のOHLCローソク足チャート — ヒゲ、実体、陽線／陰線の色分け、オプションの出来高バー — をインラインSVGとしてレンダリングします。AddPointは、各バーごとにラベルと始値／高値／安値／終値(オプションで出来高も)を受け取ります。

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 — 比例した長方形

TsgcHTMLComponent_TreeMapは、名前付きの値の集合をスクエア化されたツリーマップとしてレイアウトします — 「部門別予算」や「フォルダ別ディスク使用量」といった定番のビジュアルで、各長方形の面積はその値に比例します。レイアウトアルゴリズムはすべてサーバー側で実行されます。

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とBarcode — 依存関係ゼロのスキャン可能なコード

どちらも純粋なPascal実装です — 外部のエンコードライブラリも画像サービスの呼び出しも必要ありません。TsgcHTMLComponent_QRCodeは、誤り訂正レベルを選択できる本物のISO/IEC 18004エンコーダーです。TsgcHTMLComponent_BarcodeはCode 128を生成し、下部にオプションで読み取り可能なキャプションを表示できます。どちらも静的な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;

請求書番号、資産タグ、倉庫のビン番号、イベントチケット — アプリがすでに参照コードを印刷している場面ならどこでも、この2つのコンポーネントは外部アセットへのリクエストを一切発生させることなく、スマートフォンのカメラやハンディスキャナーで読み取れるものに変えてくれます。

試してみる

詳細なドキュメント、主要プロパティのリファレンス、Delphi/C++Builder/.NETのコードサンプルは、各コンポーネントのページに用意されています。Heatmap、Sparkline、CandlestickChart、TreeMap、QRCode、Barcodeです。このシリーズの次回は、よりスマートなフォーム入力についてです。

ご質問、フィードバック、移行のお手伝いが必要ですか? お問い合わせください — コードを書いた本人から返信が届きます。