Monte um dashboard de negócios sem código de layout. Solte tiles em uma grade de 12 colunas, coloque em cada um um cartão de KPI, um gráfico, um mapa ou uma pré-visualização de relatório, mude a tela inteira para um tema escuro com uma propriedade e deixe os usuários arrastar, redimensionar e salvar o próprio layout.
Onze recursos em quatro grupos, com os nomes reais de componentes e propriedades e um link para cada tópico de ajuda. Os recursos marcados como Registrada não estão na edição .NET Community gratuita.
Uma grade que posiciona os tiles para você e cartões que mostram os números.
Layout e conteúdo
Um dashboard é uma grade de tiles que precisa continuar organizada em qualquer tamanho de janela e qualquer DPI. Solte um dashboard no formulário, adicione tiles e dê a cada um uma coluna, uma linha e um span. A grade calcula a largura das colunas a partir da largura disponível, escala espaços e alturas de linha pelo DPI do monitor e rola na vertical quando os tiles precisam de mais linhas do que cabem. Tiles sobrepostos são empurrados uma linha para baixo por vez, nunca um sobre o outro. Como o layout vive em um único mecanismo, as mesmas células de tile dão a mesma disposição no VCL, no FireMonkey e nas views .NET.
TsgcVCLDashboard com Columns (padrão 12), RowHeight (120), Gap e Padding (12)TsgcVCLDashboardTile com Col, Row, ColSpan e RowSpanLayout.PlacedCell e Layout.Rect
Layout e conteúdo
Quando o conteúdo de um dashboard depende do usuário ou dos dados, você não quer calcular coordenadas. Deixe a coluna e a linha de um tile em -1 e o auto-flow o coloca na primeira posição livre, varrendo as linhas de cima para baixo e as colunas da esquerda para a direita. Fixe apenas a coluna e o tile cai na primeira linha livre dessa coluna. Misture tiles fixos e fluidos no mesmo dashboard.
AutoFlow vem ativado por padrão; um novo tile começa com Col e Row em -1 e span de 3 por 2TsgcDashboardLayout, move o VCL, o FireMonkey e o .NET
Layout e conteúdo
Um tile é um contêiner com um cabeçalho opcional, então ele abriga o que a sua tela precisar: um gráfico, uma grade, um mapa, um visualizador de PDF, uma pré-visualização de relatório ou um simples memo. Defina o pai do controle como o tile e alinhe-o à área cliente. O demo Suite abriga sgcCharts, sgcMaps, sgcPDF e sgcReports em um só dashboard, todos seguindo o tema do dashboard. Um tile pode dispensar o cabeçalho para um gráfico limpo de borda a borda ou mantê-lo como barra de título. O dashboard cresce em linhas e rola na vertical conforme você adiciona tiles.
Title e ShowHeader em cada tileParentTheme permite que um tile siga o dashboard ou mantenha seu próprio ThemeTsgcFMXDashboardTile no FireMonkey
Layout e conteúdo
Todo dashboard abre com uma linha de números que importam: receita, pedidos, churn, tempo de resposta. Um cartão de KPI mostra o valor em destaque, um ícone, uma seta de tendência com seu texto, uma linha de rodapé e um pequeno sparkline dos valores recentes, em um só componente. Chame AddValue conforme novos números chegam e o sparkline rola; MaxPoints define quanto histórico ele guarda. AccentColor permite colorir um cartão conforme o que ele mede, e o cartão segue o tema claro ou escuro do dashboard em que está.
TsgcVCLKPICard com Title, Value, Icon, FooterText e AccentColorTrend: ktUp, ktDown ou ktNeutral, com o texto de TrendValueAddValue, ClearValues e MaxPoints para o sparklineAddValue é thread-safe, então uma thread de trabalho pode alimentá-loDeixe os usuários organizarem a própria página inicial e a guardarem, e alimente-a pela rede.
Layouts do usuário e dados em tempo real Somente Registrada
Em uma página inicial compartilhada, cada usuário quer números diferentes à frente. Ative o arrastar e o usuário move um tile pelo cabeçalho; ative o redimensionar e uma alça no canto altera seu span. Enquanto o mouse se move, a célula de destino é desenhada sob os tiles e o tile se ajusta à grade. Esc cancela. Os tiles que você marca como bloqueados nunca se movem. Combine isso com os layouts salvos abaixo e cada usuário mantém a página inicial que organizou, enquanto você decide quais tiles existem.
AllowDrag e AllowResize no dashboardLocked em um tile o mantém no lugarOnLayoutChanged é disparado após cada arrastar ou redimensionarA Community monta um layout fixo por código; arrastar e redimensionar em tempo de execução são recursos da edição Registrada.
Ler o tópico da ajudaLayouts do usuário e dados em tempo real Somente Registrada
Um layout organizado pelo usuário deve voltar após uma reinicialização. Uma chamada grava as métricas da grade e, para cada tile com nome, sua célula e sua visibilidade como JSON compacto; outra o aplica. Os tiles são associados pelo nome, nomes desconhecidos são ignorados e os tiles ausentes no texto mantêm suas células, então um layout salvo antigo ainda carrega depois que você adiciona um tile em uma nova versão. O JSON é pequeno e legível, então você pode distribuir um layout padrão com o aplicativo e oferecer um botão de redefinição que o carrega de novo.
SaveLayout e LoadLayout devolvem e aplicam uma string JSONSaveLayoutToFile, LoadLayoutFromFile, SaveLayoutToStream, LoadLayoutFromStreamLayouts do usuário e dados em tempo real Somente Registrada
Telas de operações mostram valores que mudam a cada segundo. A ponte sgcDashboardWS lê um número de cada mensagem JSON de um cliente sgcWebSockets e o envia a um cartão, sparkline incluído. A seta de tendência acompanha o valor anterior por conta própria. No Delphi 2010 e posteriores, as atualizações de texto rodam na thread principal, então o cliente pode usar qualquer modo de threading. Mensagens que não são JSON válido, ou cujo caminho não é um número, são ignoradas, então um feed ruidoso nunca quebra a tela.
TsgcDashboardSource_WebSocket, TsgcDashboardSource_MQTT (com Topic) e TsgcDashboardSource_SSEValuePath, como data.items[0].value, e ValueFormat, padrão %.2fTitlePath e TrendValuePath copiam mais campos para o cartãoOnValue após cada atualizaçãoA ponte exige o sgcWebSockets. Na edição Community, alimente os cartões por código com Value e AddValue.
Ler o tópico da ajudaUm só visual em toda a tela, os mesmos cartões como imagens, o mesmo design em todos os destinos.
Temas, imagens e plataformas
Uma sala de controle escura e um escritório claro precisam da mesma tela em dois visuais. Defina o tema do dashboard e ele chega a todos os tiles, a todos os cartões de KPI e aos controles sgcUI dentro deles, de modo que gráficos, gauges e grades mudam juntos. O tipo de tema é o mesmo que todo produto sgcUI usa, então um aplicativo inteiro pode seguir uma única configuração. Os tiles que precisam se destacar podem manter um tema próprio enquanto o restante do dashboard segue o global.
Theme := utDark ou utLight no dashboardParentTheme ou mantêm seu próprio ThemeTemas, imagens e plataformas
Os números do dashboard costumam ser necessários em outros lugares: no e-mail do relatório matinal, em uma página de intranet ou em um PDF. O TsgcDashboardKPI renderiza o mesmo cartão sem janela e sem VCL ou FireMonkey, então um programa de console, um serviço do Windows ou um servidor Linux64 pode produzi-lo. Largura e altura são pixels lógicos e um fator de escala gera imagens nítidas em alta DPI. Use para relatórios agendados: monte os cartões com as mesmas consultas do seu dashboard e anexe as imagens à mensagem.
SaveToPNG em um arquivo ou stream, por exemplo 320 por 160 na escala 2 para uma imagem de 640 por 320SaveToSVG para uma saída vetorial nítidaCard.KPI.SaveToPNG salva o que um cartão na tela mostraTemas, imagens e plataformas
Escreva o dashboard uma vez e reutilize o design. O dashboard FireMonkey, os tiles e os cartões de KPI rodam no Windows, macOS, iOS e Android, e a versão .NET oferece as mesmas classes para WinForms, WPF e Avalonia. Como um único mecanismo de layout calcula as células em todo lugar, um layout salvo significa a mesma coisa em todos os destinos. Os demos vêm no mesmo conjunto para todos os destinos: Basic, LiveKPI, SaveLayout e Suite para Delphi e C++ Builder, além das versões WinForms, WPF e Avalonia no .NET.
TsgcFMXDashboard, TsgcFMXDashboardTile, TsgcFMXKPICardTsgcWinFormsDashboard, TsgcWinFormsKPICard e seus equivalentes para WPF e AvaloniaA pré-visualização mostra exatamente o que a impressora e o PDF recebem.
Imprima, pré-visualize e exporte para PDF
O dashboard é impresso em uma página como uma imagem de todo o quadro: todos os tiles que não estão ocultos, inclusive os rolados para fora da vista, dispostos como na tela. Cada controle sgcUI em um tile é desenhado pelo seu próprio renderizador, então cartões de KPI, gráficos, gauges, grades, tabelas dinâmicas, visões do planner e diagramas são todos impressos. Os outros controles de um tile, como um memo ou um rótulo, ficam em branco.
Print mostra a caixa de diálogo de impressão ou imprime direto na impressora padrão, e ShowPrintPreview abre uma pré-visualização com navegação por páginas, zoom, configuração de página, impressão e exportação para PDFPrintSettings guarda o papel, a orientação, as margens, a escala e o texto do cabeçalho e do rodapé, e a impressora, a pré-visualização e o PDF usam todos o mesmo conjuntoExportToPDF grava a página como uma única imagem com tags, a 192 dpi por padrão, com um texto alternativo que lista os títulos dos tiles na ordem de leituraPDFALevel de TsgcUIPDFOptions adiciona PDF/A-2a ou PDF/A-3a para arquivamento, sozinho ou junto com o PDF/UAA impressão e a pré-visualização estão em todas as edições, inclusive na edição Community gratuita, em VCL, FireMonkey, WinForms, WPF e Avalonia. No FireMonkey, a impressão funciona no Windows e no macOS, e a pré-visualização e a exportação para PDF em todas as plataformas. A exportação para PDF exige a ponte sgcUIPDF e um sgcPDF licenciado (o pacote NuGet esegece.sgcUICore.sgcPDF no .NET), por isso não está na edição Community.
UI Automation para leitores de tela, o teclado e o alto contraste, sem nenhuma configuração.
Acessibilidade
O sgcDashboard expõe o dashboard e seus blocos ao Microsoft UI Automation com seus títulos e posição, o controle hospedado em cada bloco e os cartões de KPI com título, valor, unidade e tendência.
A acessibilidade vem ativada por padrão em todas as edições, inclusive a edição Community gratuita, no VCL em todas as versões do Delphi e do C++Builder do Delphi 7 ao Delphi 13, no FireMonkey no Windows e no WinForms, WPF e Avalonia. No Delphi e no C++Builder, AccessibleName e AccessibleDescription definem o nome e a descrição expostos ao UI Automation, e no .NET o nome acessível e o texto de ajuda padrão de cada framework fazem o mesmo. Veja os relatórios de conformidade de acessibilidade.
sgcDashboard dentro das demos da suíte sgcUI: aplicações completas que rodam offline com dados simulados integrados.
Cartões de KPI com sparklines, blocos de alarme, um treemap e um medidor de VaR como blocos de dashboard.
Altamira Markets →
Cartões de OEE com sparklines, um contador de garrafas e blocos de alarme ao redor do diagrama do processo.
Altamira Plant →
O dashboard do ERP: cartões de KPI com sparklines, um gráfico de receita, medidores e um mapa de clientes.
Altamira ERP →
Cartões de KPI do portfólio com sparklines, medidores de saúde e gráficos em uma página.
Altamira PMO →
A página inicial de um ERP mostra receita, pedidos em aberto, faturas vencidas e churn como cartões de KPI com setas de tendência, um gráfico de vendas e uma grade dos principais clientes em tiles abaixo. Toda noite um serviço renderiza os mesmos cartões em PNG para o e-mail da diretoria, com os mesmos números e cores da tela.
Uma tela de parede em uma fábrica mostra a produção da linha, temperaturas e contagem de alarmes. Fontes MQTT enviam cada leitura ao seu cartão assim que chega, os sparklines mostram os últimos minutos e um tema escuro mantém a sala tranquila à noite. Gauges e gráficos nos tiles vizinhos seguem o mesmo tema.
Em um cliente desktop usado por muitos perfis, cada usuário arrasta para o topo os tiles que importam, redimensiona o gráfico que mais acompanha e oculta o resto. O layout é salvo como JSON por usuário e restaurado no próximo login, e os novos tiles adicionados em uma atualização simplesmente fluem para o espaço livre.
The same API in Delphi, C++ Builder and C#: tiles on the grid, a KPI card with a sparkline in each, a dark theme and a saved layout. Dragging and layout files need the Registered edition.
Tiles on the 12 column grid with a KPI card in each, a dark theme, and the layout saved to a file. Dragging and layout files need the Registered edition.
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;The same dashboard in C++ Builder with the generated headers.
#include <vcl.h>
#include "sgcUICore_Theme.hpp"
#include "sgcDashboard_KPI.hpp"
#include "sgcDashboard_VCL.hpp"
#include "sgcDashboard_KPI_VCL.hpp"
void AddKPI(TsgcVCLDashboard *aDash, const String aName, const String aTitle,
const String aValue, const String aChange, int aCol,
TsgcDashboardKPITrend aTrend)
{
TsgcVCLDashboardTile *oTile = new TsgcVCLDashboardTile(aDash->Owner);
oTile->Name = aName;
oTile->Parent = aDash;
oTile->Col = aCol;
oTile->ColSpan = 4;
oTile->Title = aTitle;
TsgcVCLKPICard *oCard = new TsgcVCLKPICard(aDash->Owner);
oCard->Parent = oTile;
oCard->Align = alClient;
oCard->Value = aValue;
oCard->Trend = aTrend;
oCard->TrendValue = aChange;
oCard->AddValue(47);
oCard->AddValue(52);
}
void BuildDashboard(TWinControl *aOwner)
{
TsgcVCLDashboard *oDash = new TsgcVCLDashboard(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"))
oDash->LoadLayoutFromFile("layout.json");
oDash->SaveLayoutToFile("layout.json");
}The WinForms version in C#, with the same class names as Delphi.
using System.Windows.Forms;
using esegece.sgcDashboard;
using esegece.sgcUICore;
public static class KpiDashboard
{
// One KPI tile with a sparkline, placed on the dashboard grid.
static void AddKPI(TsgcWinFormsDashboard aDash, string aName, string aTitle,
string aValue, string aChange, int aCol, TsgcDashboardKPITrend aTrend)
{
var oTile = new TsgcWinFormsDashboardTile();
oTile.Name = aName;
oTile.Title = aTitle;
oTile.Col = aCol;
oTile.ColSpan = 4;
var oCard = new TsgcWinFormsKPICard();
oCard.Dock = DockStyle.Fill;
oCard.Value = aValue;
oCard.Trend = aTrend;
oCard.TrendValue = aChange;
oCard.AddValue(47);
oCard.AddValue(52);
oTile.Controls.Add(oCard);
aDash.Controls.Add(oTile);
}
public static void Build(Form aForm)
{
var oDash = new TsgcWinFormsDashboard();
oDash.Dock = DockStyle.Fill;
oDash.Theme = TsgcUITheme.utDark;
oDash.AllowDrag = true; // drag and layout files: Registered edition
AddKPI(oDash, "tileRevenue", "Revenue", "12,480 USD", "+4.2 %", 0, TsgcDashboardKPITrend.ktUp);
AddKPI(oDash, "tileOrders", "Orders", "1,284", "+8.1 %", 4, TsgcDashboardKPITrend.ktUp);
AddKPI(oDash, "tileChurn", "Churn", "2.4 %", "-0.3 %", 8, TsgcDashboardKPITrend.ktDown);
aForm.Controls.Add(oDash);
if (System.IO.File.Exists("layout.json"))
oDash.LoadLayoutFromFile("layout.json");
oDash.SaveLayoutToFile("layout.json");
}
}dotnet add package esegece.sgcDashboard.WinFormsQuatro demos para Delphi e C++ Builder e seis para .NET, todos no download dos demos compilados.
Seis tiles e quatro cartões de KPI na grade de 12 colunas, com um log e uma lista nos outros tiles. A forma mais rápida de ver o mecanismo de layout e a troca de tema.
Cartões de KPI alimentados pela ponte sgcDashboardWS, com valores mudando e sparklines crescendo conforme as mensagens chegam. Requer o sgcWebSockets.
Arraste os tiles pelo cabeçalho, redimensione-os pela alça, salve o layout em JSON, reinicie o demo e veja-o restaurado.
Um gráfico, um mapa, um visualizador de PDF, uma pré-visualização de relatório e cartões de KPI de outros produtos sgcUI em um único dashboard com tema.
Basic, BasicWpf, BasicAvalonia, LiveKPI, SaveLayout e Suite para WinForms, WPF e Avalonia.
Executáveis prontos para rodar de todos os produtos sgcUI, sem nada para instalar.
Baixar sgcUI_bin.zip →O sgcDashboard está no sgcUI Professional e Enterprise e também é vendido separadamente. O sgcDashboard também está incluído no pacote All-Access.
€199 / desenvolvedor, código-fonte completo, 1 ano de atualizações.
Comprar o sgcDashboard → Ver preços →Standard mais sgcDashboard, sgcCharts e sgcGauges, a partir de €529.
Ver Professional →A edição Community gratuita (esegece.sgcDashboard.Community no NuGet) inclui a grade, os tiles, os cartões de KPI com sparklines, PNG e SVG headless e os temas. Ela não inclui arrastar e redimensionar em tempo de execução, SaveLayout e LoadLayout nem a ponte sgcDashboardWS.
| Recurso | Community (gratuita) | Registrada |
|---|---|---|
| Grade de tiles com spans e auto-flow | ✓ | ✓ |
| Cartões de KPI com tendência e sparkline | ✓ | ✓ |
| Temas claro e escuro | ✓ | ✓ |
| Cartões de KPI headless em PNG e SVG | ✓ | ✓ |
| Arrastar e redimensionar tiles em tempo de execução | − | ✓ |
| SaveLayout e LoadLayout | − | ✓ |
| Fontes em tempo real do sgcDashboardWS (WebSocket, MQTT, SSE) | − | ✓ |
| Componente | O que é |
|---|---|
| TsgcVCLDashboard, TsgcFMXDashboard | O contêiner de grade para VCL e FireMonkey. |
| TsgcVCLDashboardTile, TsgcFMXDashboardTile | Um tile com título que abriga qualquer controle. |
| TsgcVCLKPICard, TsgcFMXKPICard | Um cartão de KPI com tendência, rodapé e sparkline. |
| TsgcDashboardKPI | O cartão de KPI headless, neutro quanto ao framework, com exportação para PNG e SVG. |
| TsgcDashboardLayout | O mecanismo de layout, também disponível no Linux64. |
| TsgcDashboardSource_WebSocket, _MQTT, _SSE | Fontes de KPI em tempo real da ponte sgcDashboardWS (somente Registrada). |
| Destino | Componente | Plataformas |
|---|---|---|
| Delphi 7 a 13, VCL | TsgcVCLDashboard | Win32 e Win64 |
| Delphi XE6 a 13, FireMonkey | TsgcFMXDashboard | Windows, macOS, iOS e Android |
| C++ Builder 2007 a 13 | TsgcVCLDashboard, TsgcFMXDashboard | Cabeçalhos .hpp gerados e bibliotecas estáticas |
| Delphi 10.2 a 13, neutro quanto ao framework | TsgcDashboardLayout, TsgcDashboardKPI | Linux64, mecanismo de layout e cartões de KPI headless |
| .NET Framework 4.7.2, .NET 8, 9 e 10 | TsgcWinFormsDashboard, equivalentes para WPF e Avalonia | WinForms, WPF e Avalonia |
Sim, na edição Registrada. AllowDrag e AllowResize permitem que os usuários movam os tiles pelo cabeçalho e os redimensionem por uma alça, e SaveLayoutToFile ou SaveLayout guardam o resultado como JSON. O LoadLayout o restaura pelo nome do tile, então os layouts sobrevivem a novas versões do seu aplicativo.
Qualquer controle. Um tile é um contêiner: defina o pai do controle como o tile e alinhe-o à área cliente. O demo Suite abriga um gráfico, um mapa, um visualizador de PDF e uma pré-visualização de relatório, e os controles sgcUI em um tile seguem o tema do dashboard.
Por código, defina Value e chame AddValue, que é thread-safe. Com a edição Registrada e o sgcWebSockets, as fontes do sgcDashboardWS leem um número de cada mensagem WebSocket, MQTT ou SSE por ValuePath e atualizam o cartão e sua tendência para você.
Os dashboards e tiles, o layout em grade com auto-flow, os cartões de KPI com sparklines, PNG e SVG headless e os temas. Ela não inclui arrastar e redimensionar em tempo de execução, SaveLayout e LoadLayout nem a ponte sgcDashboardWS. Veja Editions.
Sim. O TsgcFMXDashboard, seus tiles e os cartões de KPI rodam no FireMonkey a partir do Delphi XE6 no Windows, macOS, iOS e Android, com o mesmo mecanismo de layout do dashboard VCL. Os tamanhos são independentes do dispositivo e seguem a escala do formulário.
Sim. O TsgcDashboardKPI desenha um cartão sem janela e sem VCL ou FireMonkey e grava PNG ou SVG em um arquivo ou stream. Ele compila em todas as plataformas, inclusive no Linux64, então um serviço ou servidor web pode produzir as imagens.
Sim. Todos os tamanhos são pixels independentes do dispositivo. O dashboard VCL os escala pelo PPI do monitor dividido por 96 e o dashboard FireMonkey pela escala do formulário, então tiles, espaços e alturas de linha mantêm suas proporções em qualquer monitor.
Introdução, Início rápido VCL, Plataformas, Editions, Dashboard, Cartão de KPI, Layout, Persistência, Dados em tempo real.
Introdução, Início rápido C++ Builder, Plataformas, Layout, Dados em tempo real.
Delphi, C++ Builder e .NET, cobrindo todos os produtos sgcUI.
Coloque gráficos de tendência em tiles de dashboard ao lado dos cartões de KPI; ambos seguem o mesmo tema.
Conhecer o sgcCharts →
Gauges formam bons tiles para valores atuais; o demo DashboardGauges mostra seis deles.
Conhecer o sgcGauges →
Uma grade em tempo real em um tile lista os registros por trás dos números dos cartões.
Conhecer o sgcGrid →Alimente cartões de KPI com WebSocket, MQTT ou SSE usando a ponte sgcDashboardWS.
Conhecer o sgcWebSockets →