Crea una dashboard aziendale senza codice di layout. Posiziona i tile su una griglia a 12 colonne, metti in ciascuno una scheda KPI, un grafico, una mappa o un'anteprima di report, passa l'intera schermata al tema scuro con una sola proprietà e lascia che gli utenti trascinino, ridimensionino e salvino il proprio layout. Un launcher di tile dà all'applicazione la sua schermata iniziale di tile raggruppati.
Diciotto funzioni in otto gruppi, con i nomi reali di componenti e proprietà e un link a ogni argomento della guida. Le funzioni contrassegnate come Registered non sono nella build .NET Community gratuita.
Una griglia che posiziona i tile al posto tuo e schede che mostrano i numeri.
Layout e contenuto
Una dashboard è una griglia di tile che deve restare ordinata a qualsiasi dimensione di finestra e DPI. Metti una dashboard sul form, aggiungi i tile e dai a ciascuno una colonna, una riga e uno span. La griglia calcola la larghezza delle colonne in base allo spazio disponibile, scala spaziature e altezze delle righe in base al DPI del monitor e scorre in verticale quando i tile richiedono più righe di quante ne entrino. I tile sovrapposti vengono spinti giù di una riga alla volta, mai uno sopra l'altro. Poiché il layout vive in un solo motore, le stesse celle dei tile danno la stessa disposizione su VCL, FireMonkey e sulle viste .NET.
TsgcVCLDashboard con Columns (predefinito 12), RowHeight (120), Gap e Padding (12)TsgcVCLDashboardTile con Col, Row, ColSpan e RowSpanLayout.PlacedCell e Layout.Rect
Layout e contenuto
Quando il contenuto di una dashboard dipende dall'utente o dai dati, non vuoi calcolare le coordinate. Lascia colonna e riga di un tile a -1 e l'auto-flow lo mette nel primo spazio libero, scorrendo le righe dall'alto e le colonne da sinistra. Fissa solo la colonna e il tile scende alla prima riga libera di quella colonna. Puoi mescolare tile fissi e tile in flusso nella stessa dashboard.
AutoFlow è attivo per impostazione predefinita; un nuovo tile parte da Col e Row -1 con uno span di 3 per 2TsgcDashboardLayout, governa VCL, FireMonkey e .NET
Layout e contenuto
Un tile è un contenitore con un'intestazione opzionale, quindi ospita ciò che serve alla tua schermata: un grafico, una griglia, una mappa, un visualizzatore PDF, un'anteprima di report o un semplice memo. Imposta il parent del controllo sul tile e allinealo all'area client. La demo Suite ospita sgcCharts, sgcMaps, sgcPDF e sgcReports in un'unica dashboard, tutti conformi al tema della dashboard. Un tile può rinunciare all'intestazione per un grafico a tutto campo, oppure tenerla come barra del titolo. La dashboard cresce per righe e scorre in verticale man mano che aggiungi tile.
Title e ShowHeader su ogni tileParentTheme permette a un tile di seguire la dashboard o di tenere il proprio ThemeTsgcFMXDashboardTile su FireMonkey
Layout e contenuto
Ogni dashboard si apre con una riga di numeri che contano: ricavi, ordini, abbandono, tempo di risposta. Una scheda KPI mostra il valore in grande, un'icona, una freccia di trend con il suo testo, una riga a piè di scheda e una piccola sparkline dei valori recenti, in un solo componente. Chiama AddValue man mano che arrivano nuovi dati e la sparkline scorre; MaxPoints decide quanto storico conserva. AccentColor ti permette di colorare una scheda in base a ciò che misura, e la scheda segue il tema chiaro o scuro della dashboard in cui si trova.
TsgcVCLKPICard con Title, Value, Icon, FooterText e AccentColorTrend: ktUp, ktDown o ktNeutral, con il testo TrendValueAddValue, ClearValues e MaxPoints per la sparklineAddValue è thread-safe, quindi un thread di lavoro può alimentarloLayout e contenuto
Molte applicazioni si aprono su una schermata iniziale: un tile per modulo, raggruppati per area, con il conteggio di ciò che attende all'interno. Il launcher di tile disegna quella schermata in un solo controllo. I tile hanno quattro dimensioni, piccolo, medio, largo e grande, e vengono disposti in gruppi con didascalia, così un vuoto lasciato da un tile grande viene riempito dai tile piccoli che seguono. I gruppi stanno affiancati con scorrimento orizzontale oppure impilati con scorrimento verticale, e l'intero launcher segue il tema chiaro o scuro.
TsgcVCLDashboardTileLauncher e TsgcFMXDashboardTileLauncher, e in .NET TsgcWinFormsDashboardTileLauncher, TsgcWpfDashboardTileLauncher e TsgcAvaloniaDashboardTileLauncherGroups e Tiles, con Caption, Subtitle, Size (dtsSmall, dtsMedium, dtsWide, dtsLarge), Color, ImageIndex e un Badge disegnato come una pillolaOrientation, CellSize, Spacing, GroupColumns e GroupSpacing definiscono il layoutOnTileClick con un clic, Invio o Spazio. I tasti freccia si spostano tra i tile attraverso i gruppi, Home e Fine vanno al primo e all'ultimo tileSaveToPNG rende il launcher senza un formIl launcher di tile è in tutte le edizioni, Community inclusa.
Leggi l'argomento della guidaTile che si riempiono da soli da un'unica origine dati e si filtrano a vicenda con un clic.
Tile integrati
La maggior parte delle dashboard mostra le stesse righe in cinque modi: il fatturato per regione in un grafico, il totale su un gauge, i record in una griglia, una tabella pivot per prodotto e i clienti su una mappa. Un tile integrato contiene già il controllo. Imposta la sua origine dati e le sue colonne e lui raggruppa, somma ed elenca le righe al posto tuo, senza codice che sposti i dati nel controllo. Un tile integrato resta un tile, quindi ha un'intestazione, una cella e un tema, e gli utenti lo spostano, ridimensionano, salvano e caricano come qualsiasi altro.
TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile e MapTile, con gli stessi nomi per FireMonkeyDataSource e la View di sola lettura, raggruppata e aggregata per il tileChart, Gauge, Grid, Pivot, Map), quindi lo stili come al solitoOgni tile richiede il prodotto sgcUI corrispondente: sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid o sgcMaps, con il suo pacchetto ponte. I tile sono in tutte le edizioni, Community inclusa. In .NET i tile grafico, gauge, griglia, pivot e mappa esistono per WinForms, WPF e Avalonia.
Leggi l'argomento della guidaOrigini dati
Quando i numeri arrivano da un'unica query, tutti i tile devono mostrare le stesse righe. Un TsgcDashboardDataSource le conserva una volta sola e un numero qualsiasi di tile lo legge, ciascuno con la propria vista: un grafico raggruppa per una colonna, un gauge ne somma una, una griglia elenca le righe. Riempilo con le tue righe, copia un dataset, oppure collega una tabella di sgcGrid o sgcPivotGrid e segui le sue modifiche. Racchiudi molte modifiche in un solo aggiornamento e i tile si aggiornano una volta sola.
Columns, AppendRow, Clear, BeginUpdate e EndUpdateLoadFromDataSet copia un TDataSet; in .NET LoadFrom accetta un DataTableTable collega qualsiasi IsgcUITable, come una griglia o una griglia pivotLe origini dati sono indipendenti dal framework e fanno parte di tutte le edizioni.
Leggi l'argomento della guidaFiltro incrociato Solo Registered
Un responsabile vendite vede che l'Europa è indietro e vuole i dettagli. Con il filtro incrociato, un clic sulla barra Europa filtra tutti gli altri tile della stessa origine dati: il gauge somma le righe europee, la griglia le elenca, la tabella pivot le mostra per prodotto e la mappa tiene solo i loro marcatori. Il grafico su cui si è fatto clic mantiene tutte le sue barre. Una barra dei filtri sopra la griglia mostra un chip per condizione e un chip Cancella tutto, e un secondo clic sulla stessa barra rimuove il filtro.
ShowFilterBar, ClearFilters e OnFilterChanged sulla dashboardCrossFilterSource e CrossFilterTarget per tile, e Filter sull'origine dati per il codiceLa barra dei filtri non viene mai stampata né esportata. Il filtro incrociato è dell'edizione Registered; l'edizione Community non lo include.
Leggi l'argomento della guidaMeno colonne su uno schermo stretto, e dashboard che gli utenti costruiscono da soli.
Layout responsive
Una dashboard progettata per un monitor largo diventa illeggibile in una finestra stretta o su un telefono. Attiva i breakpoint e la dashboard sceglie una classe di dimensione in base alla sua larghezza: larga usa Columns, media e compatta usano meno colonne e celle proprie. Per impostazione predefinita ogni span viene scalato al posto tuo, quindi la maggior parte delle dashboard non richiede alcuna configurazione extra, e un tile può essere nascosto in una sola classe, come una mappa grande su un telefono.
Breakpoints.Enabled, CompactWidth (600), MediumWidth (1024), CompactColumns (4) e MediumColumns (8)CompactCell e MediumCell per tile, con Visible per classeActiveBreakpoint e OnBreakpointChangedI breakpoint sono in tutte le edizioni e disattivati per impostazione predefinita. L'edizione Community non ha SaveLayout, quindi lì i breakpoint funzionano ma non vengono salvati.
Designer a runtime Solo Registered
Ogni reparto chiede una dashboard leggermente diversa. Invece di consegnarne una per richiesta, lascia che siano gli utenti a costruirla. In modalità di modifica ogni tile si sposta e si ridimensiona, un clic lo seleziona, e il pannello di progettazione aggiunge tile integrati da una tavolozza, modifica le proprietà del tile selezionato, lo rimuove e annulla o ripristina gli ultimi passaggi. Salva il risultato con SaveLayout e i tile aggiunti a runtime tornano con le loro impostazioni e la loro origine dati.
EditMode, SelectedTile, AddTile e RemoveTile sulla dashboardUndo, Redo, CanUndo e CanRedo, 50 passaggi; Ctrl+Z, Ctrl+Y e Canc in modalità di modificaTsgcVCLDashboardDesignPanel e TsgcFMXDashboardDesignPanel, con controparti per WinForms, WPF e AvaloniaOnTileAdded, OnTileRemoving e OnSelectionChangedIl designer a runtime è dell'edizione Registered; l'edizione Community non lo include.
Leggi l'argomento della guidaUna barra di query IA per tutti i tile, con i valori che restano nella tua applicazione.
Interrogare la dashboard
Gli utenti non vogliono cercare il tile che contiene la risposta. Collega una barra di query IA al router della dashboard e una sola casella serve l'intera schermata. Il router sceglie il tile di cui parla la domanda, lo porta in vista e in primo piano, e inoltra la domanda al suo motore di griglia o di tabella pivot. Anche i tile grafico, gauge e mappa partecipano: un gauge e una scheda KPI rispondono in locale con il loro titolo e il loro valore, e un tile grafico o mappa viene mostrato e riceve il focus. Nell'edizione Registered, una domanda come "mostra le vendite della regione Ovest" imposta anche il filtro incrociato Region = West.
TsgcVCLDashboardAI e TsgcFMXDashboardAI; TsgcWinFormsDashboardAI, TsgcWpfDashboardAI e TsgcAvaloniaDashboardAI in .NETLastFilter e ApplyFilters per le risposte con filtro; Undo rimuove il filtroPrivacy: il provider vede la domanda, i titoli e i tipi dei tile e i nomi delle colonne. I valori delle schede KPI, i valori dei gauge e i valori delle colonne non lasciano mai l'applicazione, e un valore di filtro proposto viene verificato in locale sui dati. Il router è in tutte le edizioni; le risposte con filtro sono dell'edizione Registered.
Leggi l'argomento della guidaLascia che gli utenti organizzino la propria pagina iniziale e la conservino, e alimentala dalla rete.
Layout dell'utente e dati live Solo Registered
In una pagina iniziale condivisa ogni utente vuole numeri diversi in primo piano. Attiva il trascinamento e l'utente sposta un tile dalla sua intestazione; attiva il ridimensionamento e una maniglia nell'angolo ne cambia lo span. Mentre il mouse si muove, la cella di destinazione viene disegnata sotto i tile e il tile si aggancia alla griglia. Esc annulla. I tile che contrassegni come bloccati non si muovono mai. Combinalo con i layout salvati qui sotto e ogni utente conserva la pagina iniziale che ha organizzato, mentre tu decidi quali tile esistono.
AllowDrag e AllowResize sulla dashboardLocked su un tile lo mantiene al suo postoOnLayoutChanged scatta dopo ogni trascinamento o ridimensionamentoCommunity costruisce un layout fisso da codice; trascinamento e ridimensionamento a runtime sono Registered.
Leggi l'argomento della guidaLayout dell'utente e dati live Solo Registered
Un layout organizzato dall'utente deve tornare dopo un riavvio. Una chiamata scrive le metriche della griglia e, per ogni tile con nome, la sua cella e la visibilità come JSON compatto; un'altra lo applica. I tile vengono associati per nome, i nomi sconosciuti vengono ignorati e i tile assenti dal testo mantengono le proprie celle, così un vecchio layout salvato si carica ancora dopo che aggiungi un tile in una nuova versione. Il JSON è piccolo e leggibile, quindi puoi distribuire un layout predefinito con l'applicazione e offrire un pulsante di ripristino che lo ricarica.
SaveLayout e LoadLayout restituiscono e applicano una stringa JSONSaveLayoutToFile, LoadLayoutFromFile, SaveLayoutToStream, LoadLayoutFromStreamLayout dell'utente e dati live Solo Registered
Le schermate operative mostrano valori che cambiano ogni secondo. Il ponte sgcDashboardWS legge un numero da ogni messaggio JSON di un client sgcWebSockets e lo porta in una scheda, sparkline compresa. La freccia di trend segue da sola il valore precedente. Da Delphi 2010 in poi gli aggiornamenti del testo girano nel thread principale, quindi il client può usare qualsiasi modalità di threading. I messaggi che non sono JSON valido, o il cui percorso non è un numero, vengono ignorati, così un feed rumoroso non rompe mai la schermata.
TsgcDashboardSource_WebSocket, TsgcDashboardSource_MQTT (con Topic) e TsgcDashboardSource_SSEValuePath come data.items[0].value, ValueFormat predefinito %.2fTitlePath e TrendValuePath copiano altri campi nella schedaOnValue dopo ogni aggiornamentoIl ponte richiede sgcWebSockets. In Community, alimenta le schede da codice con Value e AddValue.
Leggi l'argomento della guidaUn solo aspetto su tutta la schermata, le stesse schede come immagini, lo stesso design su ogni target.
Temi, immagini e piattaforme
Una sala di controllo scura e un ufficio luminoso hanno bisogno della stessa schermata in due aspetti. Imposta il tema della dashboard e raggiunge ogni tile, ogni scheda KPI e i controlli sgcUI al loro interno, così grafici, gauge e griglie cambiano insieme. Il tipo di tema è lo stesso che usa ogni prodotto sgcUI, quindi un'intera applicazione può seguire una sola impostazione. I tile che devono distinguersi possono tenere un tema proprio mentre il resto della dashboard segue quello globale.
Theme := utDark o utLight sulla dashboardParentTheme, oppure tengono il proprio ThemeTemi, immagini e piattaforme
I numeri della dashboard servono spesso altrove: nell'e-mail del report mattutino, in una pagina intranet o in un PDF. TsgcDashboardKPI genera la stessa scheda senza finestra e senza VCL o FireMonkey, così un programma console, un servizio Windows o un server Linux64 può produrla. Larghezza e altezza sono in pixel logici e un fattore di scala dà immagini nitide ad alta densità. Usalo per i report pianificati: costruisci le schede dalle stesse query della tua dashboard e allega le immagini al messaggio.
SaveToPNG su file o stream, per esempio 320 per 160 con scala 2 per un'immagine da 640 per 320SaveToSVG per un output vettoriale nitidoCard.KPI.SaveToPNG salva ciò che mostra una scheda a schermoTemi, immagini e piattaforme
Scrivi la dashboard una volta e riusa il design. La dashboard FireMonkey, i tile e le schede KPI girano su Windows, macOS, iOS e Android, e il porting .NET offre le stesse classi per WinForms, WPF e Avalonia. Poiché un solo motore di layout calcola le celle ovunque, un layout salvato ha lo stesso significato su ogni target. Le demo escono nello stesso insieme per ogni target: Basic, LiveKPI, SaveLayout e Suite per Delphi e C++ Builder, più le versioni WinForms, WPF e Avalonia in .NET.
TsgcFMXDashboard, TsgcFMXDashboardTile, TsgcFMXKPICard, TsgcFMXDashboardTileLauncherTsgcWinFormsDashboard, TsgcWinFormsKPICard e i loro gemelli WPF e AvaloniaL'anteprima mostra esattamente ciò che ricevono la stampante e il PDF.
Stampa, anteprima e PDF
La dashboard viene stampata in una pagina come un'immagine dell'intera board: tutti i tile non nascosti, compresi quelli scorsi fuori dalla vista, disposti come sullo schermo. Ogni controllo sgcUI in un tile viene disegnato dal proprio renderer, quindi schede KPI, grafici, gauge, griglie, tabelle pivot, viste del planner e diagrammi si stampano tutti. Gli altri controlli in un tile, come un memo o un'etichetta, restano vuoti.
Print mostra la finestra di stampa o stampa direttamente sulla stampante predefinita, e ShowPrintPreview apre un'anteprima con navigazione tra le pagine, zoom, impostazione della pagina, stampa ed esportazione PDFPrintSettings contiene la carta, l'orientamento, i margini, la scala e il testo dell'intestazione e del piè di pagina, e la stampante, l'anteprima e il PDF li usano tuttiExportToPDF scrive la pagina come un'unica immagine con tag, a 192 dpi per impostazione predefinita, con un testo alternativo che elenca i titoli dei tile in ordine di letturaPDFALevel di TsgcUIPDFOptions aggiunge PDF/A-2a o PDF/A-3a per l'archiviazione, da solo o insieme a PDF/UALa stampa e l'anteprima sono in tutte le edizioni, compresa l'edizione Community gratuita, su VCL, FireMonkey, WinForms, WPF e Avalonia. In FireMonkey la stampa funziona su Windows e macOS, e l'anteprima e l'esportazione PDF su tutte le piattaforme. L'esportazione PDF richiede il ponte sgcUIPDF e uno sgcPDF con licenza (il pacchetto NuGet esegece.sgcUICore.sgcPDF in .NET), quindi non è nell'edizione Community.
UI Automation per screen reader, tastiera e alto contrasto, senza alcuna configurazione.
Accessibilità
sgcDashboard espone la dashboard e i suoi tile a Microsoft UI Automation con i loro titoli e la loro posizione, il controllo ospitato in ogni tile e le schede KPI con titolo, valore, unità e andamento.
L'accessibilità è attiva per impostazione predefinita in tutte le edizioni, compresa l'edizione Community gratuita, su VCL in ogni versione di Delphi e C++Builder da Delphi 7 a Delphi 13, su FireMonkey su Windows e su WinForms, WPF e Avalonia. In Delphi e C++Builder, AccessibleName e AccessibleDescription impostano il nome e la descrizione esposti a UI Automation, e in .NET il nome accessibile e il testo della guida standard di ciascun framework fanno lo stesso. Vedi i report di conformità sull'accessibilità.
sgcDashboard nelle demo della suite sgcUI: applicazioni complete che funzionano offline con dati simulati integrati.
Schede KPI con sparkline, tessere di allarme, una treemap e un indicatore VaR come tessere della dashboard.
Altamira Markets →
Schede OEE con sparkline, un contatore di bottiglie e tessere di allarme attorno al diagramma di processo.
Altamira Plant →
La dashboard dell'ERP: schede KPI con sparkline, un grafico dei ricavi, indicatori e una mappa dei clienti.
Altamira ERP →
Schede KPI del portafoglio con sparkline, indicatori di salute e grafici in una sola pagina.
Altamira PMO →
La pagina iniziale di un ERP mostra ricavi, ordini aperti, fatture scadute e abbandono come schede KPI con frecce di trend, un grafico delle vendite e una griglia dei migliori clienti nei tile sotto. Ogni notte un servizio genera le stesse schede in PNG per l'e-mail alla direzione, con gli stessi numeri e colori dello schermo.
Uno schermo a parete in uno stabilimento mostra la produttività delle linee, le temperature e il numero di allarmi. Le sorgenti MQTT portano ogni lettura nella sua scheda appena arriva, le sparkline mostrano gli ultimi minuti e un tema scuro mantiene la sala tranquilla di notte. Gauge e grafici nei tile vicini seguono lo stesso tema.
In un client desktop usato da molti ruoli, ogni utente trascina in alto i tile che contano, ridimensiona il grafico che guarda di più e nasconde il resto. Il layout viene salvato come JSON per utente e ripristinato al login successivo, e i nuovi tile aggiunti in un aggiornamento si inseriscono semplicemente nello spazio libero.
La stessa API in Delphi, C++ Builder e C#: tile sulla griglia, una scheda KPI con sparkline in ciascuno, un tema scuro e un layout salvato. Il trascinamento e i file di layout richiedono l'edizione Registered.
Tile sulla griglia a 12 colonne con una scheda KPI in ciascuno, un tema scuro e il layout salvato in un file. Il trascinamento e i file di layout richiedono l'edizione Registered.
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;La stessa dashboard in C++ Builder con gli header generati.
#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");
}La versione WinForms in C#, con gli stessi nomi di classe di 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.WinFormsSei demo per Delphi e C++ Builder e dieci per .NET, tutte nel download delle demo compilate.
Sei tile e quattro schede KPI sulla griglia a 12 colonne, con un registro e un elenco negli altri tile. Il modo più rapido per vedere il motore di layout e il cambio di tema.
Schede KPI alimentate dal ponte sgcDashboardWS, con valori che scorrono e sparkline che crescono all'arrivo dei messaggi. Richiede sgcWebSockets.
Trascina i tile dall'intestazione, ridimensionali con la maniglia, salva il layout in JSON, riavvia la demo e guarda come viene ripristinato.
Un grafico, una mappa, un visualizzatore PDF, un'anteprima di report e schede KPI di altri prodotti sgcUI in un'unica dashboard con tema.
Un'unica origine dati con 204 righe di vendite alimenta tile grafico, gauge, griglia, pivot e mappa. Fai clic su una barra di regione, una cella della griglia, una riga della tabella pivot o un marcatore della mappa e gli altri tile seguono il filtro (Registered); restringi la finestra e i tile si riorganizzano. Delphi VCL e C++ Builder, più SalesExplorer (WinForms) e SalesExplorerWpf in .NET. Richiede sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid e sgcMaps.
Il designer a runtime: aggiungi tile integrati dalla tavolozza del pannello di progettazione, spostali e ridimensionali in modalità di modifica, modifica le loro proprietà, rimuovili, annulla e ripristina, e salva la dashboard come JSON. Delphi VCL e C++ Builder, più DashboardDesigner (WinForms) e DashboardDesignerWpf in .NET.
Una schermata iniziale con tre gruppi e tile di ogni dimensione, sottotitoli, badge e un tile disabilitato. La riga di stato mostra il tile cliccato con il mouse, Invio o Spazio, e due combo cambiano l'orientamento e il tema. TileLauncherFMX fa lo stesso in FireMonkey.
Basic, BasicWpf, BasicAvalonia, LiveKPI, SaveLayout, Suite, SalesExplorer, SalesExplorerWpf, DashboardDesigner, DashboardDesignerWpf, TileLauncher, TileLauncherWpf e TileLauncherAvalonia per WinForms, WPF e Avalonia.
Eseguibili pronti all'uso di ogni prodotto sgcUI, senza nulla da installare.
Scarica sgcUI_bin.zip →Cinque demo QuickStart per Delphi (VCL) si trovano in Demos\Dashboard\Delphi\00.QuickStart. La guida PDF le spiega passo dopo passo: una prima dashboard con schede KPI, la griglia di tile a 12 colonne, dati in tempo reale, i temi e una dashboard vendite con un tile grafico.
sgcDashboard è in sgcUI Professional ed Enterprise e si vende anche da solo. sgcDashboard è incluso anche nel bundle All-Access.
€199 / sviluppatore, codice sorgente completo, 1 anno di aggiornamenti.
Acquista sgcDashboard → Vedi i prezzi →L'edizione Community gratuita (esegece.sgcDashboard.Community su NuGet) include la griglia, i tile, le schede KPI con sparkline, PNG e SVG senza finestra, i temi, le origini dati, i tile integrati, i breakpoint responsive e l'instradamento IA verso tutti i tile. Non include trascinamento e ridimensionamento a runtime, SaveLayout e LoadLayout (quindi i layout non vengono salvati), il filtro incrociato, il designer a runtime, le risposte con filtro di Interrogare la dashboard e il ponte sgcDashboardWS. Ogni tile integrato richiede il prodotto sgcUI corrispondente e il suo pacchetto ponte in tutte le edizioni.
| Funzionalità | Community (gratuita) | Registered |
|---|---|---|
| Griglia di tile con span e auto-flow | ✓ | ✓ |
| Schede KPI con trend e sparkline | ✓ | ✓ |
| Temi chiaro e scuro | ✓ | ✓ |
| Schede KPI headless in PNG e SVG | ✓ | ✓ |
| Launcher di tile con tile raggruppati, badge e navigazione da tastiera | ✓ | ✓ |
| Tile integrati grafico, gauge, griglia, pivot e mappa (ognuno richiede il proprio prodotto sgcUI) | ✓ | ✓ |
| Origini dati condivise da più tile | ✓ | ✓ |
| Breakpoint responsive | ✓ (non salvato) | ✓ |
| Instradamento di Interrogare la dashboard verso tutti i tile | ✓ | ✓ |
| Filtro incrociato con la barra dei filtri | − | ✓ |
| Designer a runtime con pannello di progettazione e annulla | − | ✓ |
| Risposte con filtro di Interrogare la dashboard | − | ✓ |
| Trascinamento e ridimensionamento dei tile a runtime | − | ✓ |
| SaveLayout e LoadLayout | − | ✓ |
| Sorgenti live sgcDashboardWS (WebSocket, MQTT, SSE) | − | ✓ |
| Componente | Cos'è |
|---|---|
| TsgcVCLDashboard, TsgcFMXDashboard | Il contenitore a griglia per VCL e FireMonkey. |
| TsgcVCLDashboardTile, TsgcFMXDashboardTile | Un tile con titolo che ospita qualsiasi controllo. |
| TsgcVCLKPICard, TsgcFMXKPICard | Una scheda KPI con trend, piè di scheda e sparkline. |
| TsgcDashboardKPI | La scheda KPI headless, indipendente dal framework, con esportazione PNG e SVG. |
| TsgcVCLDashboardTileLauncher, TsgcFMXDashboardTileLauncher | Una schermata iniziale di tile di quattro dimensioni in gruppi con didascalia, con badge, scorrimento e navigazione da tastiera. |
| TsgcDashboardTileLauncher | Il modello e il renderer del launcher di tile, indipendenti dal framework, con esportazione PNG headless. |
| TsgcDashboardDataSource | L'origine dati indipendente dal framework che alimenta i tile integrati. |
| TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile, MapTile | Tile integrati con un controllo di sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid o sgcMaps, in un pacchetto ponte per prodotto, versioni FireMonkey incluse. |
| TsgcVCLDashboardDesignPanel, TsgcFMXDashboardDesignPanel | Il pannello del designer a runtime (solo Registered). |
| TsgcDashboardLayout | Il motore di layout, disponibile anche su Linux64. |
| TsgcDashboardSource_WebSocket, _MQTT, _SSE | Sorgenti KPI live del ponte sgcDashboardWS (solo Registered). |
| Target | Componente | Piattaforme |
|---|---|---|
| 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 | Header .hpp generati e librerie statiche |
| Delphi 10.2 a 13, indipendente dal framework | TsgcDashboardLayout, TsgcDashboardKPI | Linux64, motore di layout e schede KPI headless |
| .NET Framework 4.7.2, .NET 8, 9 e 10 | TsgcWinFormsDashboard, con le controparti WPF e Avalonia | WinForms, WPF e Avalonia |
Sì, nell'edizione Registered. AllowDrag e AllowResize permettono agli utenti di spostare i tile dall'intestazione e di ridimensionarli con una maniglia, e SaveLayoutToFile o SaveLayout memorizzano il risultato come JSON. LoadLayout lo ripristina per nome di tile, quindi i layout sopravvivono alle nuove versioni della tua applicazione.
Qualsiasi controllo. Un tile è un contenitore: imposta il parent del controllo sul tile e allinealo all'area client. La demo Suite ospita un grafico, una mappa, un visualizzatore PDF e un'anteprima di report, e i controlli sgcUI in un tile seguono il tema della dashboard.
Sì. Ogni tile integrato richiede il proprio prodotto e il proprio pacchetto ponte: il tile grafico richiede sgcCharts, il tile gauge sgcGauges, il tile griglia sgcGrid, il tile pivot sgcPivotGrid e il tile mappa sgcMaps. Il nucleo della dashboard non usa mai una unit di prodotto, perché sgcDashboard si vende anche da solo. sgcUI Enterprise li include tutti. In .NET ogni tile, compreso il tile mappa, è disponibile per WinForms, WPF e Avalonia. Vedi Tile integrati.
Sì, nell'edizione Registered. Imposta EditMode e ancora un pannello di progettazione accanto alla dashboard: gli utenti aggiungono tile integrati da una tavolozza, li spostano, ridimensionano e rimuovono, modificano le loro proprietà e annullano o ripristinano ogni passaggio. SaveLayout memorizza il risultato, inclusi i tile aggiunti a runtime, e LoadLayout li ricrea. La demo Designer mostra l'intero flusso. Vedi Designer a runtime.
Da codice, imposta Value e chiama AddValue, che è thread-safe. Con l'edizione Registered e sgcWebSockets, le sorgenti sgcDashboardWS leggono un numero da ogni messaggio WebSocket, MQTT o SSE tramite ValuePath e aggiornano la scheda e il suo trend al posto tuo.
Le dashboard e i tile, il layout a griglia con flusso automatico, le schede KPI con sparkline, PNG e SVG senza finestra, i temi, le origini dati, i tile integrati, i breakpoint responsive e l'instradamento IA. Non include trascinamento e ridimensionamento a runtime, SaveLayout e LoadLayout, il filtro incrociato, il designer a runtime, le risposte con filtro del router IA e il ponte sgcDashboardWS. Vedi Editions.
Sì. TsgcFMXDashboard, i suoi tile e le schede KPI girano su FireMonkey da Delphi XE6 su Windows, macOS, iOS e Android, con lo stesso motore di layout della dashboard VCL. Le dimensioni sono indipendenti dal dispositivo e seguono la scala del form.
Sì. TsgcDashboardKPI disegna una scheda senza finestra e senza VCL o FireMonkey, e scrive PNG o SVG su file o stream. Compila su ogni piattaforma, Linux64 compreso, così un servizio o un server web può produrre le immagini.
Sì. Tutte le dimensioni sono in pixel indipendenti dal dispositivo. La dashboard VCL le scala con il PPI del monitor diviso per 96 e quella FireMonkey con la scala del form, così tile, spaziature e altezze delle righe mantengono le proporzioni su qualsiasi monitor.
Introduzione, Quick Start VCL, Piattaforme, Edizioni, Dashboard, Scheda KPI, Layout, Persistenza, Dati live, Tile integrati, Origini dati, Filtro incrociato, Layout responsive, Designer a runtime.
Introduzione, Quick Start C++ Builder, Piattaforme, Layout, Dati live, Tile integrati, Origini dati, Filtro incrociato, Layout responsive, Designer a runtime.
Introduzione, Piattaforme, Edizioni, Layout, Dati live, Tile integrati, Origini dati, Filtro incrociato, Layout responsive, Designer a runtime.
Delphi, C++ Builder e .NET, che coprono ogni prodotto sgcUI.
Metti i grafici di tendenza nei tile della dashboard accanto alle schede KPI; entrambi seguono lo stesso tema.
Scopri sgcCharts →
I gauge sono ottimi tile per i valori correnti; la demo DashboardGauges ne mostra sei.
Scopri sgcGauges →Alimenta le schede KPI da WebSocket, MQTT o SSE con il ponte sgcDashboardWS.
Scopri sgcWebSockets →