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. Um lançador de tiles dá ao aplicativo uma tela inicial de tiles agrupados.
Dezoito recursos em oito grupos, com os nomes reais de componentes e propriedades e um link para cada tópico da ajuda. Os recursos marcados como Registrada não estão na compilaçã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á-loLayout e conteúdo
Muitos aplicativos abrem em uma tela inicial: um tile por módulo, agrupados por área, com a contagem do que espera dentro. O lançador de tiles desenha essa tela em um único controle. Os tiles têm quatro tamanhos, pequeno, médio, largo e grande, e são organizados em grupos com legenda, de modo que um espaço deixado por um tile grande é preenchido pelos tiles pequenos que vêm depois. Os grupos ficam lado a lado com rolagem horizontal ou empilhados com rolagem vertical, e todo o lançador segue o tema claro ou escuro.
TsgcVCLDashboardTileLauncher e TsgcFMXDashboardTileLauncher, e no .NET TsgcWinFormsDashboardTileLauncher, TsgcWpfDashboardTileLauncher e TsgcAvaloniaDashboardTileLauncherGroups e Tiles, com Caption, Subtitle, Size (dtsSmall, dtsMedium, dtsWide, dtsLarge), Color, ImageIndex e um Badge desenhado como uma pílulaOrientation, CellSize, Spacing, GroupColumns e GroupSpacing definem o layoutOnTileClick em um clique, Enter ou Espaço. As teclas de seta se movem entre os tiles através dos grupos, Home e End vão para o primeiro e o último tileSaveToPNG renderiza o lançador sem um formulárioO lançador de tiles está em todas as edições, inclusive a Community.
Ler o tópico da ajudaTiles que se preenchem sozinhos a partir de uma única fonte de dados e se filtram entre si com um clique.
Tiles integrados
A maioria dos dashboards mostra as mesmas linhas de cinco maneiras: a receita por região em um gráfico, o total em um medidor, os registros em uma grade, uma tabela dinâmica por produto e os clientes em um mapa. Um tile integrado já contém o controle. Defina a fonte de dados e as colunas e ele agrupa, soma e lista as linhas para você, sem código que mova dados para o controle. Um tile integrado continua sendo um tile, então tem cabeçalho, célula e tema, e os usuários o movem, redimensionam, salvam e carregam como qualquer outro.
TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile e MapTile, com os mesmos nomes para FireMonkeyDataSource e a View somente leitura, agrupada e agregada para o tileChart, Gauge, Grid, Pivot, Map), então você o estiliza como de costumeCada tile precisa do produto sgcUI correspondente: sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid ou sgcMaps, com o seu pacote de ponte. Os tiles estão em todas as edições, inclusive na Community. No .NET os tiles de gráfico, medidor, grade, tabela dinâmica e mapa existem para WinForms, WPF e Avalonia.
Ler o tópico da ajudaFontes de dados
Quando os números vêm de uma só consulta, todos os tiles precisam mostrar as mesmas linhas. Um TsgcDashboardDataSource as guarda uma única vez e qualquer número de tiles o lê, cada um por meio da sua própria visão: um gráfico agrupa por uma coluna, um medidor soma uma e uma grade lista as linhas. Preencha-o com as suas próprias linhas, copie um conjunto de dados, ou vincule uma tabela do sgcGrid ou do sgcPivotGrid e acompanhe as mudanças dela. Envolva muitas mudanças em uma só atualização e os tiles se atualizam uma única vez.
Columns, AppendRow, Clear, BeginUpdate e EndUpdateLoadFromDataSet copia um TDataSet; no .NET LoadFrom recebe um DataTableTable vincula qualquer IsgcUITable, como uma grade ou uma tabela dinâmicaAs fontes de dados são independentes de framework e fazem parte de todas as edições.
Ler o tópico da ajudaFiltragem cruzada Somente Registrada
Um gerente de vendas vê que a Europa está atrás e quer os detalhes. Com a filtragem cruzada, um clique na barra da Europa filtra todos os outros tiles da mesma fonte de dados: o medidor soma as linhas europeias, a grade as lista, a tabela dinâmica as mostra por produto e o mapa mantém apenas os seus marcadores. O gráfico clicado mantém todas as suas barras. Uma barra de filtros acima da grade mostra um chip por condição e um chip Limpar tudo, e um segundo clique na mesma barra remove o filtro.
ShowFilterBar, ClearFilters e OnFilterChanged no dashboardCrossFilterSource e CrossFilterTarget por tile, e Filter na fonte de dados para o códigoA barra de filtros nunca é impressa nem exportada. A filtragem cruzada é da edição Registrada; a edição Community não a inclui.
Ler o tópico da ajudaMenos colunas em uma tela estreita, e dashboards que os próprios usuários montam.
Layout responsivo
Um dashboard desenhado para um monitor largo fica ilegível em uma janela estreita ou em um celular. Ative os pontos de quebra e o dashboard escolhe uma classe de tamanho a partir da sua largura: larga usa Columns, média e compacta usam menos colunas e as suas próprias células. Por padrão cada span é escalado para você, então a maioria dos dashboards não precisa de configuração extra, e um tile pode ser ocultado em apenas uma classe, como um mapa grande em um celular.
Breakpoints.Enabled, CompactWidth (600), MediumWidth (1024), CompactColumns (4) e MediumColumns (8)CompactCell e MediumCell por tile, com Visible por classeActiveBreakpoint e OnBreakpointChangedOs pontos de quebra estão em todas as edições e vêm desativados por padrão. A edição Community não tem SaveLayout, então nela os pontos de quebra funcionam, mas não são salvos.
Designer em tempo de execução Somente Registrada
Cada departamento pede um dashboard um pouco diferente. Em vez de entregar um por pedido, deixe os usuários montá-lo. No modo de edição cada tile se move e se redimensiona, um clique o seleciona, e o painel de design adiciona tiles integrados a partir de uma paleta, edita as propriedades do tile selecionado, o remove e desfaz ou refaz os últimos passos. Salve o resultado com SaveLayout e os tiles adicionados em tempo de execução voltam com as suas configurações e a sua fonte de dados.
EditMode, SelectedTile, AddTile e RemoveTile no dashboardUndo, Redo, CanUndo e CanRedo, 50 passos; Ctrl+Z, Ctrl+Y e Delete no modo de ediçãoTsgcVCLDashboardDesignPanel e TsgcFMXDashboardDesignPanel, com equivalentes para WinForms, WPF e AvaloniaOnTileAdded, OnTileRemoving e OnSelectionChangedO designer em tempo de execução é da edição Registrada; a edição Community não o inclui.
Ler o tópico da ajudaUma barra de consulta de IA para todos os tiles, com os valores mantidos dentro da sua aplicação.
Pergunte ao Dashboard
Os usuários não querem sair procurando o tile que guarda a resposta. Vincule uma barra de consulta de IA ao roteador do dashboard e uma única caixa atende a tela inteira. O roteador escolhe o tile de que a pergunta trata, o traz à vista e ao foco, e encaminha a pergunta ao seu mecanismo de grade ou de tabela dinâmica. Os tiles de gráfico, medidor e mapa também participam: um medidor e um cartão KPI respondem localmente com o seu título e o seu valor, e um tile de gráfico ou de mapa é exibido e recebe o foco. Na edição Registrada, uma pergunta como "mostre as vendas da região Oeste" também define o filtro cruzado Region = West.
TsgcVCLDashboardAI e TsgcFMXDashboardAI; TsgcWinFormsDashboardAI, TsgcWpfDashboardAI e TsgcAvaloniaDashboardAI no .NETLastFilter e ApplyFilters para as respostas com filtro; Undo remove o filtroPrivacidade: o provedor vê a pergunta, os títulos e tipos dos tiles e os nomes das colunas. Os valores dos cartões KPI, os valores dos medidores e os valores das colunas nunca saem da aplicação, e um valor de filtro proposto é conferido localmente com os dados. O roteador está em todas as edições; as respostas com filtro são da edição Registrada.
Ler o tópico da ajudaDeixe 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, TsgcFMXKPICard, TsgcFMXDashboardTileLauncherTsgcWinFormsDashboard, 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.WinFormsSeis demos para Delphi e C++ Builder e dez para .NET, todas no download das demos compiladas.
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.
Uma fonte de dados com 204 linhas de vendas alimenta tiles de gráfico, medidor, grade, tabela dinâmica e mapa. Clique em uma barra de região, uma célula da grade, uma linha da tabela dinâmica ou um marcador do mapa e os outros tiles acompanham o filtro (Registrada); estreite a janela e os tiles se reorganizam. Delphi VCL e C++ Builder, mais SalesExplorer (WinForms) e SalesExplorerWpf no .NET. Precisa de sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid e sgcMaps.
O designer em tempo de execução: adicione tiles integrados a partir da paleta do painel de design, mova-os e redimensione-os no modo de edição, edite as propriedades deles, remova-os, desfaça e refaça, e salve o dashboard como JSON. Delphi VCL e C++ Builder, mais DashboardDesigner (WinForms) e DashboardDesignerWpf no .NET.
Uma tela inicial com três grupos e tiles de todos os tamanhos, subtítulos, selos e um tile desabilitado. A linha de status mostra o tile clicado com o mouse, Enter ou Espaço, e dois combos alternam a orientação e o tema. TileLauncherFMX faz o mesmo no FireMonkey.
Basic, BasicWpf, BasicAvalonia, LiveKPI, SaveLayout, Suite, SalesExplorer, SalesExplorerWpf, DashboardDesigner, DashboardDesignerWpf, TileLauncher, TileLauncherWpf e TileLauncherAvalonia para WinForms, WPF e Avalonia.
Executáveis prontos para rodar de todos os produtos sgcUI, sem nada para instalar.
Baixar sgcUI_bin.zip →Cinco demos QuickStart para Delphi (VCL) acompanham o produto em Demos\Dashboard\Delphi\00.QuickStart. O guia em PDF as explica passo a passo: um primeiro dashboard com cartões de KPI, a grade de blocos de 12 colunas, dados ao vivo, temas, e um dashboard de vendas com um bloco de gráfico.
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 KPI com sparklines, PNG e SVG sem janela, os temas, as fontes de dados, os tiles integrados, os pontos de quebra responsivos e o roteamento de IA para todos os tiles. Ela não inclui arrastar e redimensionar em tempo de execução, SaveLayout e LoadLayout (então os layouts não são salvos), a filtragem cruzada, o designer em tempo de execução, as respostas com filtro do Pergunte ao Dashboard nem a ponte sgcDashboardWS. Cada tile integrado precisa do produto sgcUI correspondente e do seu pacote de ponte em todas as edições.
| 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 | ✓ | ✓ |
| Lançador de tiles com tiles agrupados, selos e navegação pelo teclado | ✓ | ✓ |
| Tiles integrados de gráfico, medidor, grade, tabela dinâmica e mapa (cada um precisa do seu produto sgcUI) | ✓ | ✓ |
| Fontes de dados compartilhadas por vários tiles | ✓ | ✓ |
| Pontos de quebra responsivos | ✓ (não salvo) | ✓ |
| Roteamento do Pergunte ao Dashboard para todos os tiles | ✓ | ✓ |
| Filtragem cruzada com a barra de filtros | − | ✓ |
| Designer em tempo de execução com painel de design e desfazer | − | ✓ |
| Respostas com filtro do Pergunte ao Dashboard | − | ✓ |
| 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. |
| TsgcVCLDashboardTileLauncher, TsgcFMXDashboardTileLauncher | Uma tela inicial de tiles em quatro tamanhos em grupos com legenda, com selos, rolagem e navegação pelo teclado. |
| TsgcDashboardTileLauncher | O modelo e o renderizador do lançador de tiles, independentes de framework, com exportação PNG sem interface. |
| TsgcDashboardDataSource | A fonte de dados independente de framework que alimenta os tiles integrados. |
| TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile, MapTile | Tiles integrados com um controle do sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid ou sgcMaps, em um pacote de ponte por produto, com as versões FireMonkey incluídas. |
| TsgcVCLDashboardDesignPanel, TsgcFMXDashboardDesignPanel | O painel do designer em tempo de execução (somente Registrada). |
| 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.
Sim. Cada tile integrado precisa do seu produto e do seu pacote de ponte: o tile de gráfico precisa do sgcCharts, o de medidor do sgcGauges, o de grade do sgcGrid, o de tabela dinâmica do sgcPivotGrid e o de mapa do sgcMaps. O núcleo do dashboard nunca usa uma unit de produto, porque o sgcDashboard também é vendido separadamente. O sgcUI Enterprise inclui todos. No .NET todos os tiles, inclusive o de mapa, estão disponíveis para WinForms, WPF e Avalonia. Veja Tiles integrados.
Sim, na edição Registrada. Defina EditMode e encaixe um painel de design ao lado do dashboard: os usuários adicionam tiles integrados a partir de uma paleta, movem, redimensionam e removem, editam as propriedades deles e desfazem ou refazem cada passo. SaveLayout guarda o resultado, inclusive os tiles adicionados em tempo de execução, e LoadLayout os cria de novo. A demo Designer mostra o fluxo completo. Veja Designer em tempo de execução.
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 fluxo automático, os cartões KPI com sparklines, PNG e SVG sem janela, os temas, as fontes de dados, os tiles integrados, os pontos de quebra responsivos e o roteamento de IA. Ela não inclui arrastar e redimensionar em tempo de execução, SaveLayout e LoadLayout, a filtragem cruzada, o designer em tempo de execução, as respostas com filtro do roteador de IA 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, Tiles integrados, Fontes de dados, Filtragem cruzada, Layout responsivo, Designer em tempo de execução.
Introdução, Início rápido C++ Builder, Plataformas, Layout, Dados em tempo real, Tiles integrados, Fontes de dados, Filtragem cruzada, Layout responsivo, Designer em tempo de execução.
Introdução, Plataformas, Editions, Layout, Dados em tempo real, Tiles integrados, Fontes de dados, Filtragem cruzada, Layout responsivo, Designer em tempo de execução.
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 →