sgcUI sgcDashboard 现已发布

sgcDashboard. KPI 放进图块。无需布局代码。

把图块放到 12 列网格上，在每个图块中放入 KPI 卡片、图表、地图或报表预览，用一个属性把整个界面切换为深色主题，并让用户拖动、调整大小和保存自己的布局。适用于 Delphi、C++ Builder 和 .NET，包含源代码。

下载试用版了解 sgcDashboard

VCL
FireMonkey
WinForms
WPF
Avalonia
Delphi 7 至 13

sgcDashboard Basic 演示：12 列图块网格上的四张带迷你趋势线的 KPI 卡片、一个事件日志和一个服务器列表

12列图块网格，支持跨列跨行和自动排布
3种实时 KPI 数据源：WebSocket、MQTT 和 SSE
10个演示：Delphi 和 C++ Builder 四个，.NET 六个
5个界面框架：VCL、FireMonkey、WinForms、WPF、Avalonia

仪表板所需的一切。

自动安放图块的网格、显示数字的卡片、直接来自数据线路的数值，以及整个界面统一的外观。sgcDashboard 全部搞定，适用于所有框架。

图块网格
十二列、跨列和自动流式排布，无需一行布局代码即可放置每个磁贴。
KPI 卡片
数值、趋势箭头、趋势文字和迷你趋势线集于一个组件，也可输出为 PNG 或 SVG。
实时数值
可通过代码为卡片提供数据，也可借助 sgcDashboardWS 桥接从 WebSocket、MQTT 和 SSE 获取。
统一主题
用一个属性即可让图块、卡片及其中的 sgcUI 控件使用浅色或深色主题。

看它运行。

录制自试用版附带的 sgcDashboard 演示。

布局

无需布局代码的响应式图块网格。

TsgcVCLDashboard 根据可用宽度计算列宽，并按显示器 DPI 缩放间距和行高。
为图块设置 Col、 Row、 ColSpan 和 RowSpan，或者让 Col 和 Row 保持为 -1，由自动排布把它放进第一个空闲位置。
支持阿拉伯语和希伯来语的从右到左排版：图块从右侧开始排布，而趋势箭头和迷你趋势线保持原来的方向。

浅色主题的 Suite 演示：图块中包含 KPI 卡片、sgcCharts 实时折线、sgcMaps 地图、sgcPDF 查看器和 sgcReports 预览

图块中可放任何控件

在任意图块中放入图表、地图或报表预览。

图块是带可选标题栏的容器：把控件的父级设为图块，并将其对齐到客户区即可。
Suite 演示在一个仪表板中承载 sgcCharts、sgcMaps、sgcPDF 和 sgcReports，全部遵循仪表板主题。
TsgcVCLKPICard 显示数值、图标、趋势箭头、页脚行以及迷你趋势线，每次调用 AddValue 时向左滚动。

实时数据

直接来自数据线路的实时 KPI。

TsgcDashboardSource_WebSocket、 TsgcDashboardSource_MQTT 和 TsgcDashboardSource_SSE 通过 ValuePath 读取每条 JSON 消息中的数字。
卡片、迷你趋势线和趋势箭头会自动更新，当您通过代码为卡片提供数据时， AddValue 是线程安全的。
不是有效 JSON 的消息，或路径指向的不是数字的消息，都会被忽略，因此嘈杂的数据流不会破坏界面。

主题与已保存的布局

一个属性即可设置主题。用户可以自行排布并保存。

Theme := utDark 或 utLight 会作用于每个图块、每张 KPI 卡片以及其中的 sgcUI 控件。
AllowDrag 和 AllowResize 让用户通过标题栏移动图块，通过拖拽手柄调整大小，并自动吸附到网格。
SaveLayout 和 LoadLayout 把布局保存为紧凑的 JSON，并按图块名称恢复。

sgcDashboard 的更多功能。

深色主题、图块中的图表、地图和报表预览，以及 Basic 演示，直接来自演示程序。

深色主题的 Suite 演示：吞吐量和延迟 KPI 卡片、sgcCharts 实时折线、sgcMaps 地图、sgcPDF 查看器和 sgcReports 预览 — 深色主题的 Suite 演示：一个 `主题` 属性即可作用于图表、地图以及 PDF 和报表预览。

Basic 演示：12 列网格上的六个图块和四张 KPI 卡片，其余图块中是日志和列表。

吞吐量和延迟 KPI 卡片（带迷你趋势线）位于 sgcCharts 实时折线旁 — 带迷你趋势线的吞吐量和延迟卡片与 sgcCharts 实时折线并排，各自位于独立的图块中。

仪表板图块中承载的地图、PDF 查看器和报表预览 — 来自 sgcMaps、sgcPDF 和 sgcReports 的地图、PDF 查看器和报表预览，承载在图块中。

几行代码做出 KPI 仪表板。

网格上的图块，每个图块中一张带迷你趋势线的 KPI 卡片，深色主题和已保存的布局。Delphi、C++ Builder 和 C# 中的 API 相同。拖动和布局文件需要注册版。

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;