Baue ein Business-Dashboard ohne Layout-Code. Lege Kacheln auf ein Raster mit 12 Spalten, setze in jede eine KPI-Karte, ein Diagramm, eine Karte oder eine Berichtsvorschau, schalte den ganzen Bildschirm mit einer Eigenschaft auf ein dunkles Theme und lass Benutzer ihr eigenes Layout ziehen, in der Größe ändern und speichern. Ein Kachel-Launcher gibt der Anwendung ihren Startbildschirm aus gruppierten Kacheln.
Achtzehn Funktionen in acht Gruppen, mit den echten Komponenten- und Eigenschaftsnamen und einem Link zu jedem Hilfethema. Als Registered markierte Funktionen sind nicht im kostenlosen .NET-Community-Build enthalten.
Ein Raster, das Kacheln für dich platziert, und Karten, die die Zahlen zeigen.
Layout und Inhalt
Ein Dashboard ist ein Raster aus Kacheln, das bei jeder Fenstergröße und jeder DPI aufgeräumt bleiben muss. Lege ein Dashboard auf das Formular, füge Kacheln hinzu und gib jeder eine Spalte, eine Zeile und eine Spanne. Das Raster berechnet die Spaltenbreiten aus der verfügbaren Breite, skaliert Abstände und Zeilenhöhen mit der Monitor-DPI und scrollt vertikal, wenn die Kacheln mehr Zeilen brauchen, als hineinpassen. Überlappende Kacheln werden Zeile für Zeile nach unten geschoben, nie übereinander. Da das Layout in einer Engine lebt, ergeben dieselben Kachelzellen dieselbe Anordnung in VCL, FireMonkey und den .NET-Ansichten.
TsgcVCLDashboard mit Columns (Standard 12), RowHeight (120), Gap und Padding (12)TsgcVCLDashboardTile mit Col, Row, ColSpan und RowSpanLayout.PlacedCell und Layout.Rect lesbar
Layout und Inhalt
Wenn der Inhalt eines Dashboards vom Benutzer oder von den Daten abhängt, willst du keine Koordinaten berechnen. Lass Spalte und Zeile einer Kachel auf -1, und Auto-Flow setzt sie in den ersten freien Platz, wobei die Zeilen von oben und die Spalten von links durchsucht werden. Lege nur die Spalte fest, und die Kachel fällt in die erste freie Zeile dieser Spalte. Mische feste und fließende Kacheln im selben Dashboard.
AutoFlow ist standardmäßig aktiv; eine neue Kachel beginnt bei Col und Row -1 mit einer Spanne von 3 mal 2TsgcDashboardLayout, treibt VCL, FireMonkey und .NET an
Layout und Inhalt
Eine Kachel ist ein Container mit optionaler Kopfzeile und nimmt alles auf, was dein Bildschirm braucht: ein Diagramm, ein Grid, eine Karte, einen PDF-Viewer, eine Berichtsvorschau oder ein schlichtes Memo. Setze den Parent des Steuerelements auf die Kachel und richte es am Clientbereich aus. Die Suite-Demo hostet sgcCharts, sgcMaps, sgcPDF und sgcReports in einem Dashboard, alle im Dashboard-Theme. Eine Kachel kann ihre Kopfzeile für ein sauberes randloses Diagramm weglassen oder als Titelleiste behalten. Das Dashboard wächst mit jeder Kachel um Zeilen und scrollt vertikal.
Title und ShowHeader an jeder KachelParentTheme lässt eine Kachel dem Dashboard folgen oder ihr eigenes Theme behaltenTsgcFMXDashboardTile in FireMonkey
Layout und Inhalt
Jedes Dashboard beginnt mit einer Zeile wichtiger Zahlen: Umsatz, Bestellungen, Abwanderung, Antwortzeit. Eine KPI-Karte zeigt den Wert groß, ein Symbol, einen Trendpfeil mit Text, eine Fußzeile und eine kleine Sparkline der letzten Werte in einer Komponente. Rufe AddValue auf, sobald neue Zahlen eintreffen, und die Sparkline scrollt; MaxPoints bestimmt, wie viel Verlauf sie behält. Mit AccentColor färbst du eine Karte passend zu dem, was sie misst, und die Karte folgt dem hellen oder dunklen Theme des Dashboards, in dem sie liegt.
TsgcVCLKPICard mit Title, Value, Icon, FooterText und AccentColorTrend: ktUp, ktDown oder ktNeutral, mit dem Text TrendValueAddValue, ClearValues und MaxPoints für die SparklineAddValue ist threadsicher, sodass ein Worker-Thread es füttern kannLayout und Inhalt
Viele Anwendungen starten mit einem Startbildschirm: eine Kachel pro Modul, nach Bereichen gruppiert, mit einer Zahl für das, was darin wartet. Der Kachel-Launcher zeichnet diesen Bildschirm in einem einzigen Steuerelement. Die Kacheln gibt es in vier Größen, klein, mittel, breit und groß, und sie werden in beschriftete Gruppen gepackt, sodass eine Lücke, die eine große Kachel lässt, von den folgenden kleinen Kacheln gefüllt wird. Die Gruppen stehen nebeneinander mit horizontalem Scrollen oder sind gestapelt mit vertikalem Scrollen, und der gesamte Launcher folgt dem hellen oder dunklen Theme.
TsgcVCLDashboardTileLauncher und TsgcFMXDashboardTileLauncher, und in .NET TsgcWinFormsDashboardTileLauncher, TsgcWpfDashboardTileLauncher und TsgcAvaloniaDashboardTileLauncherGroups und Tiles mit Caption, Subtitle, Size (dtsSmall, dtsMedium, dtsWide, dtsLarge), Color, ImageIndex und einem als Pille gezeichneten BadgeOrientation, CellSize, Spacing, GroupColumns und GroupSpacing bestimmen das LayoutOnTileClick bei Klick, Enter oder Leertaste. Die Pfeiltasten wechseln zwischen den Kacheln über die Gruppen hinweg, Pos1 und Ende springen zur ersten und zur letzten KachelSaveToPNG rendert den Launcher ohne FormularDer Kachel-Launcher ist in jeder Edition enthalten, auch in Community.
Hilfethema lesenKacheln, die sich aus einer Datenquelle selbst füllen und sich per Klick gegenseitig filtern.
Integrierte Kacheln
Die meisten Dashboards zeigen dieselben Zeilen auf fünf Arten: den Umsatz je Region in einem Diagramm, die Summe auf einem Gauge, die Datensätze in einem Grid, eine Pivot-Tabelle nach Produkt und die Kunden auf einer Karte. Eine integrierte Kachel enthält das Steuerelement bereits. Setze ihre Datenquelle und ihre Spalten, und sie gruppiert, summiert und listet die Zeilen für dich, ohne Code, der Daten in das Steuerelement verschiebt. Eine integrierte Kachel bleibt eine Kachel, sie hat also eine Kopfzeile, eine Zelle und ein Theme, und Benutzer verschieben, ändern, speichern und laden sie wie jede andere.
TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile und MapTile, mit denselben Namen für FireMonkeyDataSource und die schreibgeschützte View, gruppiert und aggregiert für die KachelChart, Gauge, Grid, Pivot, Map), du gestaltest es also wie gewohntJede Kachel braucht das passende sgcUI-Produkt: sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid oder sgcMaps, mit seinem Brückenpaket. Die Kacheln sind in jeder Edition enthalten, auch in Community. In .NET gibt es die Diagramm-, Gauge-, Grid-, Pivot- und Map-Kacheln für WinForms, WPF und Avalonia.
Hilfethema lesenDatenquellen
Wenn die Zahlen aus einer Abfrage stammen, müssen alle Kacheln dieselben Zeilen zeigen. Eine TsgcDashboardDataSource hält sie einmal, und beliebig viele Kacheln lesen sie, jede über ihre eigene Sicht: Ein Diagramm gruppiert nach einer Spalte, ein Gauge summiert eine, ein Grid listet die Zeilen. Fülle sie mit eigenen Zeilen, kopiere ein Dataset oder binde eine Tabelle von sgcGrid oder sgcPivotGrid und folge ihren Änderungen. Fasse viele Änderungen in einem Update zusammen, und die Kacheln werden nur einmal aktualisiert.
Columns, AppendRow, Clear, BeginUpdate und EndUpdateLoadFromDataSet kopiert ein TDataSet; in .NET nimmt LoadFrom eine DataTableTable bindet jede IsgcUITable, etwa ein Grid oder ein Pivot-GridDatenquellen sind Framework-neutral und Teil jeder Edition.
Hilfethema lesenKreuzfilterung Nur Registered
Ein Vertriebsleiter sieht, dass Europa zurückliegt, und will die Details. Mit der Kreuzfilterung filtert ein Klick auf den Europa-Balken alle anderen Kacheln derselben Datenquelle: Das Gauge summiert die europäischen Zeilen, das Grid listet sie, die Pivot-Tabelle zeigt sie nach Produkt und die Karte behält nur ihre Marker. Das angeklickte Diagramm behält alle seine Balken. Eine Filterleiste über dem Grid zeigt einen Chip je Bedingung und einen Chip Alle löschen, und ein zweiter Klick auf denselben Balken hebt den Filter auf.
ShowFilterBar, ClearFilters und OnFilterChanged am DashboardCrossFilterSource und CrossFilterTarget je Kachel und Filter an der Datenquelle für den CodeDie Filterleiste wird nie gedruckt oder exportiert. Die Kreuzfilterung gehört zur Registered-Edition; die Community-Edition enthält sie nicht.
Hilfethema lesenWeniger Spalten auf einem schmalen Bildschirm, und Dashboards, die deine Benutzer selbst bauen.
Responsives Layout
Ein für einen breiten Monitor entworfenes Dashboard wird in einem schmalen Fenster oder auf einem Smartphone unlesbar. Schalte die Breakpoints ein, und das Dashboard wählt anhand seiner Breite eine Größenklasse: Breit nutzt Columns, mittel und kompakt nutzen weniger Spalten und eigene Zellen. Standardmäßig wird jeder Span für dich skaliert, die meisten Dashboards brauchen also keine zusätzliche Einrichtung, und eine Kachel lässt sich in nur einer Klasse ausblenden, etwa eine große Karte auf dem Smartphone.
Breakpoints.Enabled, CompactWidth (600), MediumWidth (1024), CompactColumns (4) und MediumColumns (8)CompactCell und MediumCell je Kachel, mit Visible je KlasseActiveBreakpoint und OnBreakpointChangedBreakpoints gibt es in jeder Edition, und sie sind standardmäßig aus. Die Community-Edition hat kein SaveLayout, dort funktionieren die Breakpoints, werden aber nicht gespeichert.
Laufzeit-Designer Nur Registered
Jede Abteilung wünscht sich ein etwas anderes Dashboard. Statt eines je Anfrage auszuliefern, lass die Benutzer es bauen. Im Bearbeitungsmodus lässt sich jede Kachel verschieben und in der Größe ändern, ein Klick wählt sie aus, und das Design-Panel fügt integrierte Kacheln aus einer Palette hinzu, bearbeitet die Eigenschaften der gewählten Kachel, entfernt sie und macht die letzten Schritte rückgängig oder stellt sie wieder her. Speichere das Ergebnis mit SaveLayout, und die zur Laufzeit hinzugefügten Kacheln kommen mit ihren Einstellungen und ihrer Datenquelle zurück.
EditMode, SelectedTile, AddTile und RemoveTile am DashboardUndo, Redo, CanUndo und CanRedo, 50 Schritte; Strg+Z, Strg+Y und Entf im BearbeitungsmodusTsgcVCLDashboardDesignPanel und TsgcFMXDashboardDesignPanel, mit Gegenstücken für WinForms, WPF und AvaloniaOnTileAdded, OnTileRemoving und OnSelectionChangedDer Laufzeit-Designer gehört zur Registered-Edition; die Community-Edition enthält ihn nicht.
Hilfethema lesenEine KI-Abfrageleiste für alle Kacheln, wobei die Werte in deiner Anwendung bleiben.
Das Dashboard fragen
Benutzer wollen nicht nach der Kachel suchen, die die Antwort enthält. Verknüpfe eine KI-Abfrageleiste mit dem Dashboard-Router, und ein Feld bedient den ganzen Bildschirm. Der Router wählt die Kachel, um die es in der Frage geht, holt sie in den Blick und in den Fokus und leitet die Frage an ihre Grid- oder Pivot-Engine weiter. Auch Diagramm-, Gauge- und Map-Kacheln machen mit: Ein Gauge und eine KPI-Karte antworten lokal mit ihrem Titel und Wert, und eine Diagramm- oder Map-Kachel wird gezeigt und fokussiert. In der Registered-Edition setzt eine Frage wie „zeige die Umsätze der Region West“ außerdem den Kreuzfilter Region = West.
TsgcVCLDashboardAI und TsgcFMXDashboardAI; TsgcWinFormsDashboardAI, TsgcWpfDashboardAI und TsgcAvaloniaDashboardAI in .NETLastFilter und ApplyFilters für Filterantworten; Undo entfernt den FilterDatenschutz: Der Provider sieht die Frage, die Titel und Arten der Kacheln und die Spaltennamen. KPI-Werte, Gauge-Werte und die Werte der Spalten verlassen die Anwendung nie, und ein vorgeschlagener Filterwert wird lokal gegen die Daten geprüft. Der Router gehört zu jeder Edition; Filterantworten gehören zur Registered-Edition.
Hilfethema lesenBenutzer ihre eigene Startseite anordnen und behalten lassen und sie aus dem Netz speisen.
Benutzerlayouts und Live-Daten Nur Registered
Auf einer gemeinsamen Startseite will jeder Benutzer andere Zahlen vorn sehen. Schalte das Ziehen ein, und der Benutzer verschiebt eine Kachel an ihrer Kopfzeile; schalte die Größenänderung ein, und ein Griff in der Ecke ändert ihre Spanne. Während sich die Maus bewegt, wird die Zielzelle unter den Kacheln gezeichnet, und die Kachel rastet im Raster ein. Mit Escape brichst du ab. Kacheln, die du als gesperrt markierst, bewegen sich nie. Kombiniere es mit den gespeicherten Layouts unten, und jeder Benutzer behält die Startseite, die er angeordnet hat, während du weiter bestimmst, welche Kacheln es gibt.
AllowDrag und AllowResize am DashboardLocked an einer Kachel hält sie an ihrem PlatzOnLayoutChanged wird nach jedem Ziehen oder jeder Größenänderung ausgelöstCommunity baut ein festes Layout aus dem Code; Ziehen und Größe ändern zur Laufzeit sind Registered.
Hilfethema lesenBenutzerlayouts und Live-Daten Nur Registered
Ein vom Benutzer angeordnetes Layout muss nach einem Neustart zurückkommen. Ein Aufruf schreibt die Rastermaße und für jede benannte Kachel ihre Zelle und Sichtbarkeit als kompaktes JSON; ein anderer wendet es an. Kacheln werden über den Namen zugeordnet, unbekannte Namen werden ignoriert, und Kacheln, die im Text fehlen, behalten ihre Zellen, sodass ein älteres gespeichertes Layout auch nach dem Hinzufügen einer Kachel in einer neuen Version noch lädt. Das JSON ist klein und lesbar, sodass du ein Standardlayout mit der Anwendung ausliefern und eine Zurücksetzen-Schaltfläche anbieten kannst, die es erneut lädt.
SaveLayout und LoadLayout liefern und wenden einen JSON-String anSaveLayoutToFile, LoadLayoutFromFile, SaveLayoutToStream, LoadLayoutFromStreamBenutzerlayouts und Live-Daten Nur Registered
Betriebsbildschirme zeigen Werte, die sich jede Sekunde ändern. Die Brücke sgcDashboardWS liest aus jeder JSON-Nachricht eines sgcWebSockets-Clients eine Zahl und schiebt sie in eine Karte, Sparkline inklusive. Der Trendpfeil folgt dem vorherigen Wert von selbst. Ab Delphi 2010 laufen die Textaktualisierungen im Hauptthread, sodass der Client jeden Threading-Modus nutzen kann. Nachrichten, die kein gültiges JSON sind oder deren Pfad keine Zahl ist, werden ignoriert, sodass ein verrauschter Feed den Bildschirm nie stört.
TsgcDashboardSource_WebSocket, TsgcDashboardSource_MQTT (mit Topic) und TsgcDashboardSource_SSEValuePath wie data.items[0].value, ValueFormat standardmäßig %.2fTitlePath und TrendValuePath kopieren weitere Felder in die KarteOnValue nach jeder AktualisierungDie Brücke braucht sgcWebSockets. In Community speist du Karten aus dem Code mit Value und AddValue.
Hilfethema lesenEin Look über den ganzen Bildschirm, dieselben Karten als Bilder, dasselbe Design auf jedem Ziel.
Themes, Bilder und Plattformen
Ein dunkler Leitstand und ein helles Büro brauchen denselben Bildschirm in zwei Looks. Setze das Dashboard-Theme, und es erreicht jede Kachel, jede KPI-Karte und die sgcUI-Steuerelemente darin, sodass Diagramme, Gauges und Grids gemeinsam umschalten. Der Theme-Typ ist derselbe, den jedes sgcUI-Produkt verwendet, sodass eine ganze Anwendung einer Einstellung folgen kann. Kacheln, die auffallen sollen, können ein eigenes Theme behalten, während der Rest des Dashboards dem globalen folgt.
Theme := utDark oder utLight am DashboardParentTheme oder behalten ihr eigenes ThemeThemes, Bilder und Plattformen
Die Zahlen des Dashboards werden oft anderswo gebraucht: in der Berichts-E-Mail am Morgen, auf einer Intranetseite oder in einem PDF. TsgcDashboardKPI rendert dieselbe Karte ohne Fenster und ohne VCL oder FireMonkey, sodass ein Konsolenprogramm, ein Windows-Dienst oder ein Linux64-Server sie erzeugen kann. Breite und Höhe sind logische Pixel, und ein Skalierungsfaktor liefert scharfe Bilder mit hoher DPI. Nutze es für geplante Berichte: Baue die Karten aus denselben Abfragen, die dein Dashboard verwendet, und hänge die Bilder an die Nachricht.
SaveToPNG in eine Datei oder einen Stream, zum Beispiel 320 mal 160 bei Skalierung 2 für ein Bild mit 640 mal 320SaveToSVG für gestochen scharfe VektorausgabeCard.KPI.SaveToPNG speichert, was eine Karte auf dem Bildschirm zeigtThemes, Bilder und Plattformen
Schreibe das Dashboard einmal und nutze das Design wieder. Das FireMonkey-Dashboard, die Kacheln und KPI-Karten laufen unter Windows, macOS, iOS und Android, und der .NET-Port bietet dieselben Klassen für WinForms, WPF und Avalonia. Da eine Layout-Engine die Zellen überall berechnet, bedeutet ein gespeichertes Layout auf jedem Ziel dasselbe. Die Demos werden für jedes Ziel im gleichen Satz geliefert: Basic, LiveKPI, SaveLayout und Suite für Delphi und C++ Builder, dazu WinForms-, WPF- und Avalonia-Versionen in .NET.
TsgcFMXDashboard, TsgcFMXDashboardTile, TsgcFMXKPICard, TsgcFMXDashboardTileLauncherTsgcWinFormsDashboard, TsgcWinFormsKPICard und ihre WPF- und Avalonia-GegenstückeDie Vorschau zeigt genau das, was Drucker und PDF erhalten.
Drucken, Vorschau und PDF
Das Dashboard wird auf einer Seite als Bild des ganzen Boards gedruckt: jede nicht ausgeblendete Kachel, auch die aus dem sichtbaren Bereich gescrollten, angeordnet wie auf dem Bildschirm. Jedes sgcUI-Steuerelement in einer Kachel wird von seinem eigenen Renderer gezeichnet, sodass KPI-Karten, Diagramme, Instrumente, Grids, Pivot-Grids, Planner-Ansichten und Diagramm-Editoren alle gedruckt werden. Andere Steuerelemente in einer Kachel, etwa ein Memo oder ein Label, bleiben leer.
Print zeigt den Druckdialog oder druckt direkt auf dem Standarddrucker, und ShowPrintPreview öffnet eine Vorschau mit Seitennavigation, Zoom, Seiteneinrichtung, Drucken und PDF-ExportPrintSettings enthält Papier, Ausrichtung, Ränder, Skalierung sowie Kopf- und Fußzeilentext, und Drucker, Vorschau und PDF verwenden alle dieselben EinstellungenExportToPDF schreibt die Seite als ein getaggtes Bild, standardmäßig mit 192 dpi, mit einem Alternativtext, der die Titel der Kacheln in Lesereihenfolge auflistetPDFALevel von TsgcUIPDFOptions ergänzt PDF/A-2a oder PDF/A-3a für die Archivierung, allein oder zusammen mit PDF/UADrucken und die Vorschau sind in jeder Edition enthalten, auch in der kostenlosen Community-Edition, unter VCL, FireMonkey, WinForms, WPF und Avalonia. In FireMonkey funktioniert das Drucken unter Windows und macOS, die Vorschau und der PDF-Export auf jeder Plattform. Der PDF-Export erfordert die sgcUIPDF-Brücke und ein lizenziertes sgcPDF (unter .NET das NuGet-Paket esegece.sgcUICore.sgcPDF) und ist daher nicht in der Community-Edition enthalten.
UI Automation für Screenreader, Tastatur und hohen Kontrast, ohne Einrichtung.
Barrierefreiheit
sgcDashboard stellt das Dashboard und seine Kacheln mit ihren Titeln und ihrer Position, das in jeder Kachel gehostete Steuerelement und die KPI-Karten mit Titel, Wert, Einheit und Trend über Microsoft UI Automation bereit.
Barrierefreiheit ist in jeder Edition standardmäßig aktiv, auch in der kostenlosen Community-Edition, unter VCL in jeder Delphi- und C++Builder-Version von Delphi 7 bis Delphi 13, in FireMonkey unter Windows sowie unter WinForms, WPF und Avalonia. In Delphi und C++Builder legen AccessibleName und AccessibleDescription den Namen und die Beschreibung fest, die über UI Automation bereitgestellt werden, und unter .NET leisten der Standardname und der Standard-Hilfetext des jeweiligen Frameworks dasselbe. Siehe die Konformitätsberichte zur Barrierefreiheit.
sgcDashboard in den sgcUI-Suite-Demos: vollständige Anwendungen, die offline mit integrierten Simulationsdaten laufen.
KPI-Karten mit Sparklines, Alarmkacheln, eine Treemap und ein VaR-Instrument als Dashboard-Kacheln.
Altamira Markets →
OEE-Karten mit Sparklines, ein Flaschenzähler und Alarmkacheln rund um das Prozessdiagramm.
Altamira Plant →
Das ERP-Dashboard: KPI-Karten mit Sparklines, ein Umsatzdiagramm, Instrumente und eine Kundenkarte.
Altamira ERP →
Portfolio-KPI-Karten mit Sparklines, Gesundheitsinstrumenten und Diagrammen auf einer Seite.
Altamira PMO →
Die Startseite eines ERP zeigt Umsatz, offene Bestellungen, überfällige Rechnungen und Abwanderung als KPI-Karten mit Trendpfeilen, darunter in Kacheln ein Umsatzdiagramm und ein Grid mit den wichtigsten Kunden. Jede Nacht rendert ein Dienst dieselben Karten als PNG für die Management-E-Mail, mit denselben Zahlen und Farben wie auf dem Bildschirm.
Ein Wandbildschirm in einem Werk zeigt Liniendurchsatz, Temperaturen und Alarmzahlen. MQTT-Quellen schieben jeden Messwert beim Eintreffen in seine Karte, die Sparklines zeigen die letzten Minuten, und ein dunkles Theme hält den Raum nachts ruhig. Gauges und Diagramme in benachbarten Kacheln folgen demselben Theme.
In einem Desktop-Client, den viele Rollen nutzen, zieht jeder Benutzer die wichtigen Kacheln nach oben, ändert die Größe des Diagramms, das er am meisten beobachtet, und blendet den Rest aus. Das Layout wird pro Benutzer als JSON gespeichert und bei der nächsten Anmeldung wiederhergestellt, und mit einem Update hinzugefügte Kacheln fließen einfach in freien Platz.
Dieselbe API in Delphi, C++ Builder und C#: Kacheln im Raster, in jeder eine KPI-Karte mit Sparkline, ein dunkles Theme und ein gespeichertes Layout. Ziehen und Layoutdateien brauchen die registrierte Edition.
Kacheln im Raster mit 12 Spalten mit je einer KPI-Karte, ein dunkles Theme und das in einer Datei gespeicherte Layout. Ziehen und Layoutdateien brauchen die registrierte 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;Dasselbe Dashboard in C++ Builder mit den generierten Headern.
#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");
}Die WinForms-Version in C#, mit denselben Klassennamen wie in 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.WinFormsSechs Demos für Delphi und C++ Builder und zehn für .NET, alle im Download der kompilierten Demos.
Sechs Kacheln und vier KPI-Karten im Raster mit 12 Spalten, mit einem Protokoll und einer Liste in den anderen Kacheln. Der schnellste Weg, die Layout-Engine und den Theme-Wechsel zu sehen.
KPI-Karten, von der Brücke sgcDashboardWS gespeist, mit tickenden Werten und wachsenden Sparklines, während Nachrichten eintreffen. Braucht sgcWebSockets.
Kacheln an der Kopfzeile ziehen, am Griff in der Größe ändern, das Layout als JSON speichern, die Demo neu starten und die Wiederherstellung sehen.
Ein Diagramm, eine Karte, ein PDF-Viewer, eine Berichtsvorschau und KPI-Karten aus anderen sgcUI-Produkten in einem Dashboard mit einheitlichem Theme.
Eine Datenquelle mit 204 Umsatzzeilen versorgt Diagramm-, Gauge-, Grid-, Pivot- und Map-Kacheln. Klicke auf einen Regionsbalken, eine Grid-Zelle, eine Pivot-Zeile oder einen Kartenmarker, und die anderen Kacheln folgen dem Filter (Registered); mache das Fenster schmal, und die Kacheln ordnen sich neu an. Delphi VCL und C++ Builder, dazu SalesExplorer (WinForms) und SalesExplorerWpf in .NET. Benötigt sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid und sgcMaps.
Der Laufzeit-Designer: Füge integrierte Kacheln aus der Palette des Design-Panels hinzu, verschiebe sie und ändere ihre Größe im Bearbeitungsmodus, bearbeite ihre Eigenschaften, entferne sie, mache Schritte rückgängig und stelle sie wieder her, und speichere das Dashboard als JSON. Delphi VCL und C++ Builder, dazu DashboardDesigner (WinForms) und DashboardDesignerWpf in .NET.
Ein Startbildschirm mit drei Gruppen und Kacheln in jeder Größe, Untertiteln, Badges und einer deaktivierten Kachel. Die Statuszeile zeigt die per Maus, Enter oder Leertaste angeklickte Kachel, und zwei Comboboxen schalten Ausrichtung und Theme um. TileLauncherFMX macht dasselbe in FireMonkey.
Basic, BasicWpf, BasicAvalonia, LiveKPI, SaveLayout, Suite, SalesExplorer, SalesExplorerWpf, DashboardDesigner, DashboardDesignerWpf, TileLauncher, TileLauncherWpf und TileLauncherAvalonia für WinForms, WPF und Avalonia.
Sofort lauffähige Programme jedes sgcUI-Produkts, nichts zu installieren.
sgcUI_bin.zip herunterladen →Fünf QuickStart-Demos für Delphi (VCL) liegen in Demos\Dashboard\Delphi\00.QuickStart. Der PDF-Leitfaden (auf Englisch) führt Schritt für Schritt durch sie: ein erstes Dashboard mit KPI-Karten, das Kachelraster mit 12 Spalten, Live-Daten, Themes und ein Verkaufs-Dashboard mit einer Diagramm-Kachel.
sgcDashboard ist in sgcUI Professional und Enterprise enthalten und wird auch einzeln verkauft. sgcDashboard ist außerdem im All-Access-Paket enthalten.
€199 / Entwickler, voller Quellcode, 1 Jahr Updates.
sgcDashboard kaufen → Preise ansehen →Standard plus sgcDashboard, sgcCharts und sgcGauges, ab €529.
Professional ansehen →Die kostenlose Community-Edition (esegece.sgcDashboard.Community auf NuGet) enthält das Raster, die Kacheln, KPI-Karten mit Sparklines, PNG und SVG ohne Fenster, die Themes, die Datenquellen, die integrierten Kacheln, die responsiven Breakpoints und das KI-Routing zu allen Kacheln. Sie enthält kein Ziehen und Größenändern zur Laufzeit, kein SaveLayout und LoadLayout (Layouts werden also nicht gespeichert), keine Kreuzfilterung, keinen Laufzeit-Designer, keine Filterantworten von Das Dashboard fragen und keine Brücke sgcDashboardWS. Jede integrierte Kachel braucht in jeder Edition das passende sgcUI-Produkt und sein Brückenpaket.
| Funktion | Community (kostenlos) | Registered |
|---|---|---|
| Kachelraster mit Spannen und Auto-Flow | ✓ | ✓ |
| KPI-Karten mit Trend und Sparkline | ✓ | ✓ |
| Helle und dunkle Themes | ✓ | ✓ |
| Headless-KPI-Karten als PNG und SVG | ✓ | ✓ |
| Kachel-Launcher mit gruppierten Kacheln, Badges und Tastaturnavigation | ✓ | ✓ |
| Integrierte Diagramm-, Gauge-, Grid-, Pivot- und Map-Kacheln (jede braucht ihr sgcUI-Produkt) | ✓ | ✓ |
| Datenquellen, die mehrere Kacheln gemeinsam nutzen | ✓ | ✓ |
| Responsive Breakpoints | ✓ (nicht gespeichert) | ✓ |
| Routing von Das Dashboard fragen zu allen Kacheln | ✓ | ✓ |
| Kreuzfilterung mit der Filterleiste | − | ✓ |
| Laufzeit-Designer mit Design-Panel und Rückgängig | − | ✓ |
| Filterantworten von Das Dashboard fragen | − | ✓ |
| Ziehen und Größe ändern der Kacheln zur Laufzeit | − | ✓ |
| SaveLayout und LoadLayout | − | ✓ |
| Live-Quellen von sgcDashboardWS (WebSocket, MQTT, SSE) | − | ✓ |
| Komponente | Was es ist |
|---|---|
| TsgcVCLDashboard, TsgcFMXDashboard | Der Rastercontainer für VCL und FireMonkey. |
| TsgcVCLDashboardTile, TsgcFMXDashboardTile | Eine Kachel mit Titel, die jedes Steuerelement aufnimmt. |
| TsgcVCLKPICard, TsgcFMXKPICard | Eine KPI-Karte mit Trend, Fußzeile und Sparkline. |
| TsgcDashboardKPI | Die frameworkneutrale Headless-KPI-Karte mit PNG- und SVG-Export. |
| TsgcVCLDashboardTileLauncher, TsgcFMXDashboardTileLauncher | Ein Startbildschirm mit Kacheln in vier Größen in beschrifteten Gruppen, mit Badges, Scrollen und Tastaturnavigation. |
| TsgcDashboardTileLauncher | Das frameworkneutrale Modell und der Renderer des Kachel-Launchers, mit PNG-Export ohne Oberfläche. |
| TsgcDashboardDataSource | Die Framework-neutrale Datenquelle, die die integrierten Kacheln versorgt. |
| TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile, MapTile | Integrierte Kacheln mit einem Steuerelement von sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid oder sgcMaps, in einem Brückenpaket je Produkt, FireMonkey-Versionen eingeschlossen. |
| TsgcVCLDashboardDesignPanel, TsgcFMXDashboardDesignPanel | Das Panel des Laufzeit-Designers (nur Registered). |
| TsgcDashboardLayout | Die Layout-Engine, auch unter Linux64 verfügbar. |
| TsgcDashboardSource_WebSocket, _MQTT, _SSE | Live-KPI-Quellen der Brücke sgcDashboardWS (nur Registered). |
| Ziel | Komponente | Plattformen |
|---|---|---|
| Delphi 7 bis 13, VCL | TsgcVCLDashboard | Win32 und Win64 |
| Delphi XE6 bis 13, FireMonkey | TsgcFMXDashboard | Windows, macOS, iOS und Android |
| C++ Builder 2007 bis 13 | TsgcVCLDashboard, TsgcFMXDashboard | Generierte .hpp-Header und statische Bibliotheken |
| Delphi 10.2 bis 13, frameworkneutral | TsgcDashboardLayout, TsgcDashboardKPI | Linux64, Layout-Engine und Headless-KPI-Karten |
| .NET Framework 4.7.2, .NET 8, 9 und 10 | TsgcWinFormsDashboard, WPF- und Avalonia-Gegenstücke | WinForms, WPF und Avalonia |
Ja, in der registrierten Edition. AllowDrag und AllowResize lassen Benutzer Kacheln an der Kopfzeile verschieben und an einem Griff in der Größe ändern, und SaveLayoutToFile oder SaveLayout speichern das Ergebnis als JSON. LoadLayout stellt es über den Kachelnamen wieder her, sodass Layouts neue Versionen deiner Anwendung überstehen.
Jedes. Eine Kachel ist ein Container: Setze den Parent des Steuerelements auf die Kachel und richte es am Clientbereich aus. Die Suite-Demo hostet ein Diagramm, eine Karte, einen PDF-Viewer und eine Berichtsvorschau, und sgcUI-Steuerelemente in einer Kachel folgen dem Dashboard-Theme.
Ja. Jede integrierte Kachel braucht ihr Produkt und ihr Brückenpaket: Die Diagramm-Kachel braucht sgcCharts, die Gauge-Kachel sgcGauges, die Grid-Kachel sgcGrid, die Pivot-Kachel sgcPivotGrid und die Map-Kachel sgcMaps. Der Dashboard-Kern nutzt nie eine Produkt-Unit, weil sgcDashboard auch einzeln verkauft wird. sgcUI Enterprise enthält alle. In .NET ist jede Kachel, auch die Map-Kachel, für WinForms, WPF und Avalonia verfügbar. Siehe Integrierte Tiles.
Ja, in der Registered-Edition. Setze EditMode und docke ein Design-Panel neben das Dashboard: Benutzer fügen integrierte Kacheln aus einer Palette hinzu, verschieben, ändern und entfernen sie, bearbeiten ihre Eigenschaften und machen jeden Schritt rückgängig oder stellen ihn wieder her. SaveLayout speichert das Ergebnis, einschließlich der zur Laufzeit hinzugefügten Kacheln, und LoadLayout erzeugt sie neu. Die Demo Designer zeigt den ganzen Ablauf. Siehe Laufzeit-Designer.
Setze im Code Value und rufe AddValue auf, das threadsicher ist. Mit der registrierten Edition und sgcWebSockets lesen die Quellen von sgcDashboardWS per ValuePath eine Zahl aus jeder WebSocket-, MQTT- oder SSE-Nachricht und aktualisieren die Karte und ihren Trend für dich.
Die Dashboards und Kacheln, das Rasterlayout mit Auto-Flow, KPI-Karten mit Sparklines, PNG und SVG ohne Fenster, die Themes, die Datenquellen, die integrierten Kacheln, die responsiven Breakpoints und das KI-Routing. Nicht enthalten sind Ziehen und Größenändern zur Laufzeit, SaveLayout und LoadLayout, die Kreuzfilterung, der Laufzeit-Designer, die Filterantworten des KI-Routers und die Brücke sgcDashboardWS. Siehe Editionen.
Ja. TsgcFMXDashboard, seine Kacheln und die KPI-Karten laufen ab Delphi XE6 unter FireMonkey auf Windows, macOS, iOS und Android, mit derselben Layout-Engine wie das VCL-Dashboard. Größen sind geräteunabhängig und folgen der Formularskalierung.
Ja. TsgcDashboardKPI zeichnet eine Karte ohne Fenster und ohne VCL oder FireMonkey und schreibt PNG oder SVG in eine Datei oder einen Stream. Es baut auf jeder Plattform, Linux64 eingeschlossen, sodass ein Dienst oder Webserver die Bilder erzeugen kann.
Ja. Alle Größen sind geräteunabhängige Pixel. Das VCL-Dashboard skaliert sie mit der Monitor-PPI geteilt durch 96 und das FireMonkey-Dashboard mit der Formularskalierung, sodass Kacheln, Abstände und Zeilenhöhen auf jedem Monitor ihre Proportionen behalten.
Einführung, Schnellstart VCL, Plattformen, Editionen, Dashboard, KPI-Karte, Layout, Persistenz, Live-Daten, Integrierte Kacheln, Datenquellen, Kreuzfilterung, Responsives Layout, Laufzeit-Designer.
Einführung, Schnellstart C++ Builder, Plattformen, Layout, Live-Daten, Integrierte Kacheln, Datenquellen, Kreuzfilterung, Responsives Layout, Laufzeit-Designer.
Einführung, Plattformen, Editionen, Layout, Live-Daten, Integrierte Kacheln, Datenquellen, Kreuzfilterung, Responsives Layout, Laufzeit-Designer.
Delphi, C++ Builder und .NET, mit allen sgcUI-Produkten.
Setze Trenddiagramme in Dashboard-Kacheln neben die KPI-Karten; beide folgen demselben Theme.
sgcCharts entdecken →
Gauges ergeben übersichtliche Kacheln für aktuelle Werte; die Demo DashboardGauges zeigt sechs davon.
sgcGauges entdecken →
Ein Live-Grid in einer Kachel listet die Datensätze hinter den Zahlen auf den Karten.
sgcGrid entdecken →Speise KPI-Karten mit der Brücke sgcDashboardWS aus WebSocket, MQTT oder SSE.
sgcWebSockets entdecken →