sgcUI sgcDashboard を今すぐ利用できます

sgcDashboard. KPI をタイルに。レイアウトコードは不要。

12 列グリッドにタイルを配置し、それぞれに KPI カード、チャート、マップ、レポートプレビューを置けます。1 つのプロパティで画面全体をダークテーマに切り替え、ユーザーは自分でドラッグ、サイズ変更、レイアウトの保存ができます。Delphi、C++ Builder、.NET 向けで、ソースコード付きです。

体験版をダウンロード sgcDashboard を詳しく見る

VCL
FireMonkey
WinForms
WPF
Avalonia
Delphi 7～13

sgcDashboard の Basic デモ。12 列のタイルグリッド上に、スパークライン付きの KPI カード 4 枚、イベントログ、サーバー一覧

12タイルグリッドの列数。スパンと自動フローに対応
3ライブ KPI のソース: WebSocket、MQTT、SSE
10デモ: Delphi と C++ Builder 向けが 4 つ、.NET 向けが 6 つ
5UI フレームワーク: VCL、FireMonkey、WinForms、WPF、Avalonia

ダッシュボードに必要なものをすべて。

タイルを自動で配置するグリッド、数値を見せるカード、回線から直接届く値、画面全体で統一された見た目。sgcDashboard はそのすべてを、どのフレームワークでもカバーします。

タイルグリッド
12 列、スパン、自動フローで、レイアウトコードを 1 行も書かずにすべてのタイルを配置します。
KPI カード
値、トレンド矢印、トレンドテキスト、スパークラインを 1 つのコンポーネントにまとめ、PNG や SVG としても出力できます。
ライブ値
カードにはコードから、または sgcDashboardWS ブリッジ経由で WebSocket、MQTT、SSE から値を流し込めます。
1 つのテーマ
タイル、カード、その中の sgcUI コントロールを、1 つのプロパティでライトまたはダークにできます。

動かして確かめる。

体験版に付属する sgcDashboard のデモから録画しました。

ライトテーマで、スパークライン付きの KPI カード 4 枚の下に、イベントログのタイルとサーバー一覧のタイルを配置した画面

レイアウト

レイアウトコード不要のレスポンシブなタイルグリッド。

TsgcVCLDashboard は利用可能な幅から列幅を計算し、間隔と行の高さをモニターの DPI に合わせて拡大縮小します。
タイルに Col、Row、ColSpan、RowSpan を指定するか、Col と Row を -1 のままにすると、自動フローが最初の空きスロットに配置します。
アラビア語とヘブライ語向けの右から左の表示に対応し、タイルは右から並びますが、トレンド矢印とスパークラインの向きは変わりません。

ライトテーマの Suite デモ。タイルに KPI カード、sgcCharts のライブ折れ線、sgcMaps のマップ、sgcPDF のビューアー、sgcReports のプレビューを配置

タイルにはどんなコントロールも

どのタイルにも、チャート、マップ、レポートプレビューを置けます。

タイルは任意のヘッダーを持つコンテナーです。コントロールの親をタイルに設定し、クライアント領域に合わせて配置します。
Suite デモは、sgcCharts、sgcMaps、sgcPDF、sgcReports を 1 つのダッシュボードに収め、すべてがダッシュボードのテーマに従います。
TsgcVCLKPICard は、値、アイコン、トレンド矢印、フッター行、そして AddValue のたびにスクロールするスパークラインを表示します。

ライブデータ

回線から直接届くライブ KPI。

TsgcDashboardSource_WebSocket、TsgcDashboardSource_MQTT、TsgcDashboardSource_SSE は、すべての JSON メッセージから ValuePath で指定した数値を読み取ります。
カード、スパークライン、トレンド矢印は自動で更新され、コードからカードに値を流し込む場合も AddValue はスレッドセーフです。
有効な JSON ではないメッセージや、パスが数値ではないメッセージは無視されるため、ノイズの多いフィードでも画面が壊れることはありません。

ライトテーマとダークテーマのデモ。ダッシュボードの Theme プロパティに従うタイルと KPI カード

テーマと保存されるレイアウト

テーマは 1 つのプロパティで。配置はユーザーが行い、そのまま保存できます。

Theme := utDark または utLight は、すべてのタイル、すべての KPI カード、その中の sgcUI コントロールに反映されます。
AllowDrag と AllowResize により、ユーザーはヘッダーでタイルを移動し、グリップでサイズを変更できます。位置はグリッドに吸着します。
SaveLayout と LoadLayout は、レイアウトをコンパクトな JSON として保存し、タイル名で復元します。

sgcDashboard のその他の機能。

ダークテーマ、タイル内のチャート、マップ、レポートプレビュー、そして Basic デモを、デモからそのままご紹介します。

ダークテーマの Suite デモ。スループットとレイテンシーの KPI カード、sgcCharts のライブ折れ線、sgcMaps のマップ、sgcPDF のビューアー、sgcReports のプレビュー — ダークテーマの Suite デモ。`Theme` プロパティ 1 つが、チャート、マップ、PDF とレポートのプレビューに行き渡ります。

Basic デモ。12 列グリッド上の 6 つのタイルと 4 枚の KPI カード — Basic デモ。12 列グリッド上に 6 つのタイルと 4 枚の KPI カードがあり、残りのタイルにログと一覧を配置しています。

スパークライン付きのスループットとレイテンシーの KPI カードと、その隣の sgcCharts のライブ折れ線 — スパークライン付きのスループットカードとレイテンシーカードを、sgcCharts のライブ折れ線の隣に、それぞれ専用のタイルで表示します。

ダッシュボードのタイルに収めたマップ、PDF ビューアー、レポートプレビュー — sgcMaps のマップ、sgcPDF のビューアー、sgcReports のレポートプレビューを、タイルに収めています。

数行で KPI ダッシュボードを。

グリッド上のタイル、それぞれにスパークライン付きの KPI カード、ダークテーマ、保存されたレイアウト。Delphi、C++ Builder、C# で同じ API です。ドラッグとレイアウトファイルには Registered エディションが必要です。

dotnet add package esegece.sgcDashboard.WinForms

C++ Builder 版と C# 版

uses
  SysUtils, Controls, sgcUICore_Theme, sgcDashboard_KPI,
  sgcDashboard_VCL, sgcDashboard_KPI_VCL;

procedure AddKPI(aDash: TsgcVCLDashboard; const aName, aTitle, aValue,
  aChange: string; aCol: Integer; aTrend: TsgcDashboardKPITrend);
var
  oTile: TsgcVCLDashboardTile;
  oCard: TsgcVCLKPICard;
begin
  oTile := TsgcVCLDashboardTile.Create(aDash.Owner);
  oTile.Name := aName;
  oTile.Parent := aDash;
  oTile.Col := aCol;
  oTile.ColSpan := 4;
  oTile.Title := aTitle;
  oCard := TsgcVCLKPICard.Create(aDash.Owner);
  oCard.Parent := oTile;
  oCard.Align := alClient;
  oCard.Value := aValue;
  oCard.Trend := aTrend;
  oCard.TrendValue := aChange;
  oCard.AddValue(47);
  oCard.AddValue(52);
end;

procedure BuildDashboard(aOwner: TWinControl);
var
  oDash: TsgcVCLDashboard;
begin
  oDash := TsgcVCLDashboard.Create(aOwner);
  oDash.Parent := aOwner;
  oDash.Align := alClient;
  // drag, resize and layout files need the Registered edition
  oDash.AllowDrag := True;
  AddKPI(oDash, 'tileRevenue', 'Revenue', '12,480 USD', '+4.2 %', 0, ktUp);
  AddKPI(oDash, 'tileOrders', 'Orders', '1,284', '+8.1 %', 4, ktUp);
  oDash.Theme := utDark;
  if FileExists('layout.json') then
    oDash.LoadLayoutFromFile('layout.json');
  oDash.SaveLayoutToFile('layout.json');
end;