Delphi, C++ Builder & .NET Fait partie de sgcUI

sgcDashboard, tableaux de bord et cartes KPI pour Delphi, C++ Builder & .NET

Crée un tableau de bord métier sans code de mise en page. Dépose des tuiles sur une grille de 12 colonnes, place dans chacune une carte KPI, un graphique, une carte ou un aperçu de rapport, bascule tout l'écran en thème sombre avec une seule propriété, et laisse les utilisateurs déplacer, redimensionner et enregistrer leur propre disposition. Un lanceur de tuiles donne à l'application son écran d'accueil de tuiles groupées.

VCL, FireMonkey, WinForms, WPF, AvaloniaGrille de tuiles en 12 colonnes avec placement automatiqueCartes KPI en PNG ou SVG, Linux64 comprisInclus dans sgcUI Professional
Télécharger l'essai Voir en action
Démo Basic : tuiles de tableau de bord et cartes KPI dans une grille adaptable
FONCTIONNALITÉS CLÉS

Tout ce qu'il faut à un tableau de bord

Dix-huit fonctions en huit groupes, avec les vrais noms de composants et de propriétés et un lien vers chaque rubrique d'aide. Les fonctions marquées Enregistrée ne sont pas dans la build .NET Community gratuite.

Disposition et contenu

Une grille qui place les tuiles pour toi, et des cartes qui affichent les chiffres.

Démo Basic de sgcDashboard avec six tuiles et quatre cartes KPI sur la grille de 12 colonnes

Disposition et contenu

Une grille de tuiles adaptable sans code de mise en page

Un tableau de bord est une grille de tuiles qui doit rester ordonnée à toute taille de fenêtre et à tout DPI. Dépose un tableau de bord sur la fiche, ajoute des tuiles et donne à chacune une colonne, une ligne et une étendue. La grille calcule la largeur des colonnes à partir de la largeur disponible, adapte les espacements et les hauteurs de ligne au DPI du moniteur, et défile verticalement quand les tuiles demandent plus de lignes que l'espace disponible. Les tuiles qui se chevauchent sont repoussées d'une ligne à la fois, jamais l'une sur l'autre. Comme la disposition vit dans un seul moteur, les mêmes cellules de tuiles donnent le même agencement sur VCL, FireMonkey et les vues .NET.

  • TsgcVCLDashboard avec Columns (12 par défaut), RowHeight (120), Gap et Padding (12)
  • TsgcVCLDashboardTile avec Col, Row, ColSpan et RowSpan
  • Une tuile masquée (Visible False) n'occupe aucune cellule
  • Les cellules et rectangles placés sont lisibles via Layout.PlacedCell et Layout.Rect
Lire la rubrique d'aide
Tableau de bord avec quatre tuiles KPI à sparklines, un journal d'événements et une liste de serveurs

Disposition et contenu

Ajoute des tuiles et laisse le placement automatique les positionner

Quand le contenu d'un tableau de bord dépend de l'utilisateur ou des données, tu ne veux pas calculer de coordonnées. Laisse la colonne et la ligne d'une tuile à -1 et le placement automatique la met dans le premier emplacement libre, en parcourant les lignes depuis le haut et les colonnes depuis la gauche. Fixe seulement la colonne et la tuile tombe sur la première ligne libre de cette colonne. Mélange tuiles fixes et tuiles flottantes sur le même tableau de bord.

  • AutoFlow est activé par défaut ; une nouvelle tuile démarre avec Col et Row à -1 et une étendue de 3 par 2
  • Les cellules explicites sont placées en premier, les tuiles flottantes remplissent l'espace restant
  • Les étendues sont limitées pour qu'une tuile ne dépasse jamais la dernière colonne
  • Le même moteur de disposition, TsgcDashboardLayout, pilote VCL, FireMonkey et .NET
  • De droite à gauche pour l'arabe et l'hébreu : les tuiles s'écoulent depuis la droite et les en-têtes de tuiles et les cartes KPI sont en miroir, tandis que les flèches de tendance et les sparklines gardent leur direction
Lire la rubrique d'aide
Tuiles de tableau de bord hébergeant une carte, une visionneuse PDF et un aperçu de rapport

Disposition et contenu

Place n'importe quel contrôle dans une tuile

Une tuile est un conteneur avec un en-tête facultatif, elle accueille donc ce que ton écran demande : graphique, grille, carte, visionneuse PDF, aperçu de rapport ou simple mémo. Définis le parent du contrôle sur la tuile et aligne-le sur la zone client. La démo Suite héberge sgcCharts, sgcMaps, sgcPDF et sgcReports dans un seul tableau de bord, tous suivant son thème. Une tuile peut supprimer son en-tête pour un graphique pleine surface, ou le garder comme barre de titre. Le tableau de bord s'agrandit par lignes et défile verticalement à mesure que tu ajoutes des tuiles.

  • Title et ShowHeader sur chaque tuile
  • ParentTheme permet à une tuile de suivre le tableau de bord ou de garder son propre Theme
  • Les contrôles sgcUI dans une tuile adoptent le thème clair ou sombre
  • Fonctionne de même avec TsgcFMXDashboardTile sur FireMonkey
Lire la rubrique d'aide
Quatre cartes KPI avec valeurs, flèches de tendance et sparklines

Disposition et contenu

Cartes KPI avec tendance et sparkline

Chaque tableau de bord s'ouvre sur une ligne de chiffres qui comptent : chiffre d'affaires, commandes, attrition, temps de réponse. Une carte KPI affiche la valeur en grand, une icône, une flèche de tendance avec son texte, une ligne de pied et une petite sparkline des valeurs récentes, dans un seul composant. Appelle AddValue à l'arrivée de chaque nouveau chiffre et la sparkline défile ; MaxPoints décide de l'historique conservé. AccentColor te permet de colorer une carte selon ce qu'elle mesure, et la carte suit le thème clair ou sombre du tableau de bord où elle se trouve.

  • TsgcVCLKPICard avec Title, Value, Icon, FooterText et AccentColor
  • Trend : ktUp, ktDown ou ktNeutral, avec le texte TrendValue
  • AddValue, ClearValues et MaxPoints pour la sparkline
  • AddValue est compatible multithread, un thread de travail peut donc l'alimenter
Lire la rubrique d'aide

Disposition et contenu

Un lanceur de tuiles pour l'écran d'accueil

De nombreuses applications s'ouvrent sur un écran d'accueil : une tuile par module, regroupées par domaine, avec le nombre de ce qui attend à l'intérieur. Le lanceur de tuiles dessine cet écran dans un seul contrôle. Les tuiles existent en quatre tailles, petite, moyenne, large et grande, et sont placées dans des groupes légendés, si bien qu'un trou laissé par une grande tuile est comblé par les petites tuiles qui suivent. Les groupes sont côte à côte avec un défilement horizontal ou empilés avec un défilement vertical, et tout le lanceur suit le thème clair ou sombre.

  • TsgcVCLDashboardTileLauncher et TsgcFMXDashboardTileLauncher, et en .NET TsgcWinFormsDashboardTileLauncher, TsgcWpfDashboardTileLauncher et TsgcAvaloniaDashboardTileLauncher
  • Groups et Tiles, avec Caption, Subtitle, Size (dtsSmall, dtsMedium, dtsWide, dtsLarge), Color, ImageIndex et un Badge dessiné sous forme de pastille
  • Orientation, CellSize, Spacing, GroupColumns et GroupSpacing définissent la disposition
  • OnTileClick sur un clic, Entrée ou Espace. Les touches fléchées se déplacent entre les tuiles à travers les groupes, Début et Fin vont à la première et à la dernière tuile
  • Les lecteurs d'écran voient une liste de tuiles invocables, et SaveToPNG rend le lanceur sans formulaire

Le lanceur de tuiles est dans toutes les éditions, Community comprise.

Lire la rubrique d'aide

Tuiles intégrées, sources de données et filtrage croisé

Des tuiles qui se remplissent seules depuis une source de données et se filtrent entre elles d'un clic.

Démo SalesExplorer : tuiles graphique, jauge, grille, carte et tableau croisé dynamique filtrées par la région Europe, avec la barre de filtres au-dessus de la grille

Tuiles intégrées

Des tuiles graphique, jauge, grille, tableau croisé dynamique et carte qui se remplissent seules

La plupart des tableaux de bord montrent les mêmes lignes de cinq façons : le chiffre d'affaires par région dans un graphique, le total sur une jauge, les enregistrements dans une grille, un tableau croisé dynamique par produit et les clients sur une carte. Une tuile intégrée contient déjà le contrôle. Définis sa source de données et ses colonnes, et elle groupe, additionne et liste les lignes pour toi, sans code qui déplace les données vers le contrôle. Une tuile intégrée reste une tuile : elle a un en-tête, une cellule et un thème, et les utilisateurs la déplacent, la redimensionnent, l'enregistrent et la chargent comme n'importe quelle autre.

  • TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile et MapTile, avec les mêmes noms pour FireMonkey
  • DataSource et la View en lecture seule, groupée et agrégée pour la tuile
  • Le contrôle du produit est public (Chart, Gauge, Grid, Pivot, Map), tu le styles donc comme d'habitude
  • Les lignes ajoutées depuis un thread de travail sont déplacées par la tuile vers le thread principal

Chaque tuile a besoin du produit sgcUI correspondant : sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid ou sgcMaps, avec son paquet pont. Les tuiles sont dans toutes les éditions, Community comprise. En .NET, les tuiles graphique, jauge, grille, tableau croisé dynamique et carte existent pour WinForms, WPF et Avalonia.

Lire la rubrique d'aide

Sources de données

Une seule source de données alimente toutes les tuiles

Quand les chiffres viennent d'une seule requête, toutes les tuiles doivent montrer les mêmes lignes. Un TsgcDashboardDataSource les garde une seule fois et un nombre quelconque de tuiles le lisent, chacune par sa propre vue : un graphique groupe sur une colonne, une jauge en additionne une, une grille liste les lignes. Remplis-le avec tes propres lignes, copie un jeu de données, ou lie une table de sgcGrid ou de sgcPivotGrid et suis ses changements. Regroupe de nombreuses modifications dans une seule mise à jour et les tuiles se rafraîchissent une fois.

  • Columns, AppendRow, Clear, BeginUpdate et EndUpdate
  • LoadFromDataSet copie un TDataSet ; en .NET, LoadFrom prend un DataTable
  • Table lie n'importe quel IsgcUITable, comme une grille ou un tableau croisé dynamique
  • Les vues agrègent par somme, nombre, moyenne, minimum, maximum ou rien, et sont sûres entre threads

Les sources de données sont indépendantes du framework et font partie de toutes les éditions.

Lire la rubrique d'aide

Filtrage croisé Enregistrée uniquement

Clique sur une barre et toutes les autres tuiles suivent

Un directeur commercial voit que l'Europe est en retard et veut les détails. Avec le filtrage croisé, un clic sur la barre Europe filtre toutes les autres tuiles de la même source de données : la jauge additionne les lignes européennes, la grille les liste, le tableau croisé dynamique les montre par produit et la carte ne garde que leurs marqueurs. Le graphique cliqué garde toutes ses barres. Une barre de filtres au-dessus de la grille montre un chip par condition et un chip Tout effacer, et un second clic sur la même barre supprime le filtre.

  • Les points du graphique, les cellules de la grille, les lignes du tableau croisé dynamique et les marqueurs de la carte émettent une condition ; une jauge la suit
  • Les conditions sur des champs différents se combinent avec AND
  • ShowFilterBar, ClearFilters et OnFilterChanged sur le tableau de bord
  • CrossFilterSource et CrossFilterTarget par tuile, et Filter sur la source de données pour le code

La barre de filtres n'est jamais imprimée ni exportée. Le filtrage croisé est dans l'édition Enregistrée ; l'édition Community ne l'inclut pas.

Lire la rubrique d'aide

Disposition adaptative et concepteur à l'exécution

Moins de colonnes sur un écran étroit, et des tableaux de bord que les utilisateurs construisent eux-mêmes.

Disposition adaptative

Douze colonnes sur un bureau, quatre sur un téléphone

Un tableau de bord conçu pour un grand écran devient illisible dans une fenêtre étroite ou sur un téléphone. Active les points de rupture et le tableau de bord choisit une classe de taille selon sa largeur : large utilise Columns, moyenne et compacte utilisent moins de colonnes et leurs propres cellules. Par défaut, chaque étendue est mise à l'échelle pour toi, si bien que la plupart des tableaux de bord n'ont besoin d'aucune configuration supplémentaire, et une tuile peut être masquée dans une seule classe, comme une grande carte sur un téléphone.

  • Breakpoints.Enabled, CompactWidth (600), MediumWidth (1024), CompactColumns (4) et MediumColumns (8)
  • CompactCell et MediumCell par tuile, avec Visible par classe
  • ActiveBreakpoint et OnBreakpointChanged
  • L'impression et le PDF disposent les tuiles pour la largeur de la page

Les points de rupture sont dans toutes les éditions et désactivés par défaut. L'édition Community n'a pas SaveLayout : les points de rupture y fonctionnent, mais ne sont pas enregistrés.

Lire la rubrique d'aide

Concepteur à l'exécution Enregistrée uniquement

Les utilisateurs construisent leurs propres tableaux de bord, avec annulation

Chaque service demande un tableau de bord un peu différent. Au lieu d'en livrer un par demande, laisse les utilisateurs le construire. En mode édition, chaque tuile se déplace et se redimensionne, un clic la sélectionne, et le panneau de conception ajoute des tuiles intégrées depuis une palette, modifie les propriétés de la tuile sélectionnée, la supprime et annule ou rétablit les dernières étapes. Enregistre le résultat avec SaveLayout et les tuiles ajoutées à l'exécution reviennent avec leurs réglages et leur source de données.

  • EditMode, SelectedTile, AddTile et RemoveTile sur le tableau de bord
  • Undo, Redo, CanUndo et CanRedo, 50 étapes ; Ctrl+Z, Ctrl+Y et Suppr en mode édition
  • TsgcVCLDashboardDesignPanel et TsgcFMXDashboardDesignPanel, avec des équivalents WinForms, WPF et Avalonia
  • OnTileAdded, OnTileRemoving et OnSelectionChanged

Le concepteur à l'exécution est dans l'édition Enregistrée ; l'édition Community ne l'inclut pas.

Lire la rubrique d'aide

Interroger le tableau de bord

Une barre de requête IA pour toutes les tuiles, avec les valeurs gardées dans ton application.

Interroger le tableau de bord

Tape une question et la bonne tuile répond

Les utilisateurs ne veulent pas chercher la tuile qui contient la réponse. Lie une barre de requête IA au routeur du tableau de bord et une seule zone sert tout l'écran. Le routeur choisit la tuile dont parle la question, l'amène à l'écran et lui donne le focus, puis transmet la question à son moteur de grille ou de tableau croisé dynamique. Les tuiles graphique, jauge et carte participent aussi : une jauge et une carte KPI répondent en local avec leur titre et leur valeur, et une tuile graphique ou carte est affichée et reçoit le focus. Dans l'édition Enregistrée, une question comme « montre les ventes de la région Ouest » définit aussi le filtre croisé Region = West.

  • TsgcVCLDashboardAI et TsgcFMXDashboardAI ; TsgcWinFormsDashboardAI, TsgcWpfDashboardAI et TsgcAvaloniaDashboardAI en .NET
  • Types de tuile : grille, tableau croisé dynamique, KPI, graphique, jauge, carte et données
  • LastFilter et ApplyFilters pour les réponses avec filtre ; Undo supprime le filtre
  • Sans fournisseur, un routeur local à règles choisit la tuile

Confidentialité : le fournisseur voit la question, les titres et types des tuiles et les noms des colonnes. Les valeurs des cartes KPI, les valeurs des jauges et les valeurs des colonnes ne quittent jamais l'application, et une valeur de filtre proposée est vérifiée localement sur les données. Le routeur est dans toutes les éditions ; les réponses avec filtre sont dans l'édition Enregistrée.

Lire la rubrique d'aide

Dispositions utilisateur et données en direct

Laisse les utilisateurs organiser leur propre page d'accueil et la conserver, et alimente-la depuis le réseau.

Dispositions utilisateur et données en direct Enregistrée uniquement

Les utilisateurs déplacent et redimensionnent les tuiles

Sur une page d'accueil partagée, chaque utilisateur veut voir des chiffres différents en premier. Active le glisser et l'utilisateur déplace une tuile par son en-tête ; active le redimensionnement et une poignée dans le coin change son étendue. Pendant le mouvement de la souris, la cellule cible est dessinée sous les tuiles et la tuile s'aimante à la grille. Échap annule. Les tuiles que tu marques comme verrouillées ne bougent jamais. Combine cela avec les dispositions enregistrées ci-dessous et chaque utilisateur garde la page d'accueil qu'il a organisée, tandis que tu décides quelles tuiles existent.

  • AllowDrag et AllowResize sur le tableau de bord
  • Locked sur une tuile la garde en place
  • OnLayoutChanged se déclenche après chaque déplacement ou redimensionnement
  • Même comportement sur le tableau de bord FireMonkey

Community construit une disposition fixe depuis le code ; le déplacement et le redimensionnement à l'exécution sont Enregistrée.

Lire la rubrique d'aide

Dispositions utilisateur et données en direct Enregistrée uniquement

Enregistre la disposition de chaque utilisateur et restaure-la

Une disposition organisée par l'utilisateur doit revenir après un redémarrage. Un appel écrit les métriques de la grille et, pour chaque tuile nommée, sa cellule et sa visibilité sous forme de JSON compact ; un autre l'applique. Les tuiles sont associées par nom, les noms inconnus sont ignorés et les tuiles absentes du texte gardent leurs cellules, une ancienne disposition enregistrée se charge donc encore après l'ajout d'une tuile dans une nouvelle version. Le JSON est petit et lisible, tu peux donc livrer une disposition par défaut avec l'application et proposer un bouton de réinitialisation qui la recharge.

  • SaveLayout et LoadLayout renvoient et appliquent une chaîne JSON
  • SaveLayoutToFile, LoadLayoutFromFile, SaveLayoutToStream, LoadLayoutFromStream
  • UTF-8 sans BOM à l'enregistrement, un BOM est ignoré au chargement
  • Stocke la chaîne par utilisateur dans un fichier, le registre ou ta base de données
Lire la rubrique d'aide

Dispositions utilisateur et données en direct Enregistrée uniquement

Des KPI en direct, tout droit du réseau

Les écrans d'exploitation montrent des valeurs qui changent chaque seconde. Le pont sgcDashboardWS lit un nombre dans chaque message JSON d'un client sgcWebSockets et l'envoie dans une carte, sparkline comprise. La flèche de tendance suit toute seule la valeur précédente. Avec Delphi 2010 et ultérieur, les mises à jour de texte s'exécutent dans le thread principal, le client peut donc utiliser n'importe quel mode de threading. Les messages qui ne sont pas du JSON valide, ou dont le chemin n'est pas un nombre, sont ignorés, un flux bruité ne casse donc jamais l'écran.

  • TsgcDashboardSource_WebSocket, TsgcDashboardSource_MQTT (avec Topic) et TsgcDashboardSource_SSE
  • ValuePath comme data.items[0].value, ValueFormat par défaut %.2f
  • TitlePath et TrendValuePath copient d'autres champs dans la carte
  • Événement OnValue après chaque mise à jour

Le pont nécessite sgcWebSockets. En Community, alimente les cartes depuis le code avec Value et AddValue.

Lire la rubrique d'aide

Thèmes, images et plateformes

Un même style sur tout l'écran, les mêmes cartes en images, le même design sur chaque cible.

Tuiles sgcDashboard avec sparklines KPI, un graphique en direct, une carte, une visionneuse PDF et un aperçu de rapport en thème sombre

Thèmes, images et plateformes

Une seule propriété applique le thème à tout le tableau de bord

Une salle de contrôle sombre et un bureau lumineux ont besoin du même écran sous deux aspects. Définis le thème du tableau de bord et il atteint chaque tuile, chaque carte KPI et les contrôles sgcUI qu'elles contiennent, graphiques, jauges et grilles basculent donc ensemble. Le type de thème est le même pour tous les produits sgcUI, toute une application peut donc suivre un seul réglage. Les tuiles qui doivent se démarquer peuvent garder leur propre thème pendant que le reste du tableau de bord suit le thème global.

  • Theme := utDark ou utLight sur le tableau de bord
  • Les tuiles suivent avec ParentTheme, ou gardent leur propre Theme
  • Les cartes KPI et les images KPI sans interface utilisent la même palette
  • Change-le à l'exécution, par exemple avec un interrupteur jour et nuit
Lire la rubrique d'aide

Thèmes, images et plateformes

Des cartes KPI en images pour l'e-mail et le web

Les chiffres du tableau de bord sont souvent demandés ailleurs : dans l'e-mail du rapport matinal, sur une page d'intranet ou dans un PDF. TsgcDashboardKPI rend la même carte sans fenêtre et sans VCL ni FireMonkey, un programme console, un service Windows ou un serveur Linux64 peut donc la produire. La largeur et la hauteur sont en pixels logiques et un facteur d'échelle donne des images haute résolution nettes. Utilise-le pour les rapports planifiés : construis les cartes à partir des mêmes requêtes que ton tableau de bord et joins les images au message.

  • SaveToPNG vers un fichier ou un flux, par exemple 320 par 160 à l'échelle 2 pour une image de 640 par 320
  • SaveToSVG pour une sortie vectorielle nette
  • Card.KPI.SaveToPNG enregistre ce qu'affiche une carte à l'écran
  • Compile sur toutes les plateformes, Linux64 compris
Lire la rubrique d'aide

Thèmes, images et plateformes

Le même tableau de bord sur poste de travail, mobile et .NET

Écris le tableau de bord une fois et réutilise le design. Le tableau de bord FireMonkey, les tuiles et les cartes KPI fonctionnent sous Windows, macOS, iOS et Android, et le portage .NET propose les mêmes classes pour WinForms, WPF et Avalonia. Comme un seul moteur de disposition calcule les cellules partout, une disposition enregistrée a le même sens sur chaque cible. Les démos sont livrées dans le même ensemble pour chaque cible : Basic, LiveKPI, SaveLayout et Suite pour Delphi et C++ Builder, plus des versions WinForms, WPF et Avalonia en .NET.

  • TsgcFMXDashboard, TsgcFMXDashboardTile, TsgcFMXKPICard, TsgcFMXDashboardTileLauncher
  • TsgcWinFormsDashboard, TsgcWinFormsKPICard et leurs équivalents WPF et Avalonia
  • Delphi 7 à 13 VCL, FireMonkey à partir de XE6, C++ Builder 2007 à 13
  • .NET Framework 4.7.2, .NET 8, .NET 9 et .NET 10
Lire la rubrique d'aide

Accessibilité

UI Automation pour les lecteurs d'écran, le clavier et le contraste élevé, sans configuration.

Accessibilité

Se déplacer entre les tuiles et les réorganiser sans souris

sgcDashboard expose le tableau de bord et ses tuiles à Microsoft UI Automation avec leurs titres et leur position, le contrôle hébergé dans chaque tuile, et les cartes KPI avec titre, valeur, unité et tendance.

  • Les flèches passent d'une tuile à l'autre, Début et Fin vont à la première ou à la dernière tuile et Entrée place le focus dans la tuile qui a le focus
  • Ctrl+Shift+Flèches déplacent la tuile (AllowDrag) et Alt+Shift+Flèches la redimensionnent (AllowResize), sauf si le tableau de bord est verrouillé
  • Le tableau de bord est un arrêt de tabulation et affiche un anneau de focus visible
  • Sous un thème à contraste élevé de Windows, le cadre des tuiles utilise les couleurs du système, et les couleurs d'accent et de tendance des cartes KPI sont remplacées par des couleurs du système

L'accessibilité est activée par défaut dans toutes les éditions, l'édition Community gratuite comprise, sur VCL dans toutes les versions de Delphi et C++Builder de Delphi 7 à Delphi 13, sur FireMonkey sous Windows, et sur WinForms, WPF et Avalonia. Dans Delphi et C++Builder, AccessibleName et AccessibleDescription définissent le nom et la description exposés à UI Automation, et en .NET le nom accessible et le texte d'aide standard de chaque framework font de même. Voir les rapports de conformité d'accessibilité.

Lire la rubrique d'aide
EN ACTION

Découvre sgcDashboard en action

sgcDashboard dans les démos de la suite sgcUI : des applications complètes qui fonctionnent hors ligne avec des données simulées intégrées.

Cartes KPI avec sparklines, tuiles d'alarme, un treemap et une jauge de VaR comme tuiles de tableau de bord.

Cartes KPI avec sparklines, tuiles d'alarme, un treemap et une jauge de VaR comme tuiles de tableau de bord.

Altamira Markets →
Cartes OEE avec sparklines, un compteur de bouteilles et des tuiles d'alarme autour du schéma de procédé.

Cartes OEE avec sparklines, un compteur de bouteilles et des tuiles d'alarme autour du schéma de procédé.

Altamira Plant →
Le tableau de bord de l'ERP : cartes KPI avec sparklines, un graphique des revenus, des jauges et une carte des clients.

Le tableau de bord de l'ERP : cartes KPI avec sparklines, un graphique des revenus, des jauges et une carte des clients.

Altamira ERP →
Cartes KPI du portefeuille avec sparklines, jauges de santé et graphiques sur une seule page.

Cartes KPI du portefeuille avec sparklines, jauges de santé et graphiques sur une seule page.

Altamira PMO →
Voir toutes les démos de la suite
CAS D'USAGE

Qui construit avec sgcDashboard

Tableaux de bord de direction et des ventes dans un ERP

La page d'accueil d'un ERP affiche chiffre d'affaires, commandes ouvertes, factures en retard et attrition sous forme de cartes KPI avec flèches de tendance, un graphique des ventes et une grille des meilleurs clients dans les tuiles du dessous. Chaque nuit, un service rend les mêmes cartes en PNG pour l'e-mail de direction, avec les mêmes chiffres et couleurs qu'à l'écran.

  • Cartes KPI
  • N'importe quel contrôle dans une tuile
  • Images KPI sans interface
  • Thèmes
Lance la démo Suite

Salles de contrôle d'exploitation et IoT

Un écran mural dans une usine affiche le débit des lignes, les températures et le nombre d'alarmes. Des sources MQTT envoient chaque mesure dans sa carte à son arrivée, les sparklines montrent les dernières minutes, et un thème sombre garde la salle reposante la nuit. Les jauges et graphiques des tuiles voisines suivent le même thème.

  • Source MQTT
  • Sparklines
  • Thème sombre
  • Jauges dans des tuiles
Lance la démo LiveKPI

Pages d'accueil personnelles dans les clients SaaS de bureau

Dans un client de bureau utilisé par de nombreux rôles, chaque utilisateur fait glisser en haut les tuiles qui comptent, redimensionne le graphique qu'il surveille le plus et masque le reste. La disposition est enregistrée en JSON par utilisateur et restaurée à la connexion suivante, et les nouvelles tuiles ajoutées lors d'une mise à jour s'insèrent simplement dans l'espace libre.

  • Glisser et redimensionner
  • SaveLayout et LoadLayout
  • Placement automatique
Lance la démo SaveLayout
DÉMARRAGE RAPIDE

Un tableau de bord KPI en quelques lignes

La même API en Delphi, C++ Builder et C# : des tuiles sur la grille, une carte KPI avec sparkline dans chacune, un thème sombre et une disposition enregistrée. Le glisser et les fichiers de disposition nécessitent l'édition Enregistrée.

Des tuiles sur la grille de 12 colonnes avec une carte KPI dans chacune, un thème sombre et la disposition enregistrée dans un fichier. Le glisser et les fichiers de disposition nécessitent l'édition Enregistrée.

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;

Lire la rubrique d'aide →

Le même tableau de bord en C++ Builder avec les en-têtes générés.

#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");
}

Lire la rubrique d'aide →

La version WinForms en C#, avec les mêmes noms de classes qu'en 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.WinForms

Lire la rubrique d'aide →

Télécharger l'essai
DÉMOS

Lance les démos de sgcDashboard

Six démos pour Delphi et C++ Builder et dix pour .NET, toutes dans le téléchargement des démos compilées.

Basic

Basic

Six tuiles et quatre cartes KPI sur la grille de 12 colonnes, avec un journal et une liste dans les autres tuiles. Le moyen le plus rapide de voir le moteur de disposition et le changement de thème.

Enregistrée uniquement LiveKPI

Cartes KPI alimentées par le pont sgcDashboardWS, avec des valeurs qui défilent et des sparklines qui s'allongent à l'arrivée des messages. Nécessite sgcWebSockets.

Enregistrée uniquement SaveLayout

Fais glisser les tuiles par leur en-tête, redimensionne-les avec la poignée, enregistre la disposition en JSON, redémarre la démo et vois-la restaurée.

Suite

Un graphique, une carte, une visionneuse PDF, un aperçu de rapport et des cartes KPI d'autres produits sgcUI dans un seul tableau de bord thématisé.

SalesExplorer

SalesExplorer

Une source de données de 204 lignes de ventes alimente des tuiles graphique, jauge, grille, tableau croisé dynamique et carte. Clique sur une barre de région, une cellule de la grille, une ligne du tableau croisé dynamique ou un marqueur de la carte et les autres tuiles suivent le filtre (Enregistrée) ; rétrécis la fenêtre et les tuiles se réorganisent. Delphi VCL et C++ Builder, plus SalesExplorer (WinForms) et SalesExplorerWpf en .NET. Nécessite sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid et sgcMaps.

Enregistrée uniquement Designer

Le concepteur à l'exécution : ajoute des tuiles intégrées depuis la palette du panneau de conception, déplace-les et redimensionne-les en mode édition, modifie leurs propriétés, supprime-les, annule et rétablis, et enregistre le tableau de bord en JSON. Delphi VCL et C++ Builder, plus DashboardDesigner (WinForms) et DashboardDesignerWpf en .NET.

TileLauncher

Un écran d'accueil avec trois groupes et des tuiles de toutes les tailles, des sous-titres, des badges et une tuile désactivée. La ligne d'état affiche la tuile cliquée avec la souris, Entrée ou Espace, et deux listes déroulantes changent l'orientation et le thème. TileLauncherFMX fait de même dans FireMonkey.

Démos .NET

Basic, BasicWpf, BasicAvalonia, LiveKPI, SaveLayout, Suite, SalesExplorer, SalesExplorerWpf, DashboardDesigner, DashboardDesignerWpf, TileLauncher, TileLauncherWpf et TileLauncherAvalonia pour WinForms, WPF et Avalonia.

Démos compilées

Des exécutables prêts à lancer pour chaque produit sgcUI, rien à installer.

Télécharger sgcUI_bin.zip →

Guide Getting Started

Cinq démos QuickStart pour Delphi (VCL) sont livrées dans Demos\Dashboard\Delphi\00.QuickStart. Le guide PDF les parcourt pas à pas : un premier tableau de bord avec des cartes KPI, la grille de tuiles à 12 colonnes, les données en direct, les thèmes, et un tableau de bord des ventes avec une tuile graphique.

Télécharger le guide (PDF, en anglais) →
ÉDITIONS

Où sgcDashboard est inclus

sgcDashboard est inclus dans sgcUI Professional et Enterprise, et il est aussi vendu séparément. sgcDashboard est aussi inclus dans le pack All-Access.

sgcDashboard, package seul

€199 / développeur, code source complet, 1 an de mises à jour.

Acheter sgcDashboard → Voir les tarifs →

sgcUI Professional

Standard plus sgcDashboard, sgcCharts et sgcGauges, à partir de €529.

Voir Professional →

sgcUI Enterprise

Les 17 produits sgcUI, à partir de €699.

Voir Enterprise →

L'édition Community gratuite (esegece.sgcDashboard.Community sur NuGet) inclut la grille, les tuiles, les cartes KPI avec sparklines, PNG et SVG sans fenêtre, les thèmes, les sources de données, les tuiles intégrées, les points de rupture adaptatifs et le routage IA vers toutes les tuiles. Elle n'inclut pas le glisser et le redimensionnement à l'exécution, SaveLayout et LoadLayout (les dispositions ne sont donc pas enregistrées), le filtrage croisé, le concepteur à l'exécution, les réponses avec filtre de Interroger le tableau de bord ni le pont sgcDashboardWS. Chaque tuile intégrée a besoin du produit sgcUI correspondant et de son paquet pont dans toutes les éditions.

FonctionnalitéCommunity (gratuite)Enregistrée
Grille de tuiles avec étendues et placement automatique✓✓
Cartes KPI avec tendance et sparkline✓✓
Thèmes clair et sombre✓✓
Cartes KPI sans interface en PNG et SVG✓✓
Lanceur de tuiles avec tuiles groupées, badges et navigation au clavier✓✓
Tuiles intégrées graphique, jauge, grille, tableau croisé dynamique et carte (chacune a besoin de son produit sgcUI)✓✓
Sources de données partagées par plusieurs tuiles✓✓
Points de rupture adaptatifs✓ (non enregistré)✓
Routage de Interroger le tableau de bord vers toutes les tuiles✓✓
Filtrage croisé avec la barre de filtres−✓
Concepteur à l'exécution avec panneau de conception et annulation−✓
Réponses avec filtre de Interroger le tableau de bord−✓
Glisser et redimensionner les tuiles à l'exécution−✓
SaveLayout et LoadLayout−✓
Sources en direct sgcDashboardWS (WebSocket, MQTT, SSE)−✓
PLATEFORMES

Frameworks et plateformes pris en charge

Composants de sgcDashboard

ComposantRôle
TsgcVCLDashboard, TsgcFMXDashboardLe conteneur de grille pour VCL et FireMonkey.
TsgcVCLDashboardTile, TsgcFMXDashboardTileUne tuile avec un titre qui accueille n'importe quel contrôle.
TsgcVCLKPICard, TsgcFMXKPICardUne carte KPI avec tendance, pied de carte et sparkline.
TsgcDashboardKPILa carte KPI sans interface, indépendante du framework, avec export PNG et SVG.
TsgcVCLDashboardTileLauncher, TsgcFMXDashboardTileLauncherUn écran d'accueil de tuiles de quatre tailles dans des groupes légendés, avec badges, défilement et navigation au clavier.
TsgcDashboardTileLauncherLe modèle et le moteur de rendu du lanceur de tuiles, indépendants du framework, avec export PNG sans interface.
TsgcDashboardDataSourceLa source de données indépendante du framework qui alimente les tuiles intégrées.
TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile, MapTileTuiles intégrées avec un contrôle sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid ou sgcMaps, dans un paquet pont par produit, versions FireMonkey comprises.
TsgcVCLDashboardDesignPanel, TsgcFMXDashboardDesignPanelLe panneau du concepteur à l'exécution (Enregistrée uniquement).
TsgcDashboardLayoutLe moteur de disposition, aussi disponible sous Linux64.
TsgcDashboardSource_WebSocket, _MQTT, _SSESources KPI en direct du pont sgcDashboardWS (Enregistrée uniquement).
CibleComposantPlateformes
Delphi 7 à 13, VCLTsgcVCLDashboardWin32 et Win64
Delphi XE6 à 13, FireMonkeyTsgcFMXDashboardWindows, macOS, iOS et Android
C++ Builder 2007 à 13TsgcVCLDashboard, TsgcFMXDashboardEn-têtes .hpp générés et bibliothèques statiques
Delphi 10.2 à 13, indépendant du frameworkTsgcDashboardLayout, TsgcDashboardKPILinux64, moteur de disposition et cartes KPI sans interface
.NET Framework 4.7.2, .NET 8, 9 et 10TsgcWinFormsDashboard, équivalents WPF et AvaloniaWinForms, WPF et Avalonia
FAQ

Foire aux questions

Oui, dans l'édition Enregistrée. AllowDrag et AllowResize permettent de déplacer les tuiles par l'en-tête et de les redimensionner par une poignée, et SaveLayoutToFile ou SaveLayout stockent le résultat en JSON. LoadLayout le restaure par nom de tuile, les dispositions survivent donc aux nouvelles versions de ton application.

Tous. Une tuile est un conteneur : définis le parent du contrôle sur la tuile et aligne-le sur la zone client. La démo Suite héberge un graphique, une carte, une visionneuse PDF et un aperçu de rapport, et les contrôles sgcUI dans une tuile suivent le thème du tableau de bord.

Oui. Chaque tuile intégrée a besoin de son produit et de son paquet pont : la tuile graphique a besoin de sgcCharts, la tuile jauge de sgcGauges, la tuile grille de sgcGrid, la tuile tableau croisé dynamique de sgcPivotGrid et la tuile carte de sgcMaps. Le noyau du tableau de bord n'utilise jamais une unité de produit, car sgcDashboard est aussi vendu seul. sgcUI Enterprise les inclut tous. En .NET, chaque tuile, la tuile carte comprise, est disponible pour WinForms, WPF et Avalonia. Voir Tiles intégrés.

Oui, dans l'édition Enregistrée. Définis EditMode et ancre un panneau de conception à côté du tableau de bord : les utilisateurs ajoutent des tuiles intégrées depuis une palette, les déplacent, les redimensionnent et les suppriment, modifient leurs propriétés et annulent ou rétablissent chaque étape. SaveLayout stocke le résultat, tuiles ajoutées à l'exécution comprises, et LoadLayout les recrée. La démo Designer montre tout le déroulement. Voir Concepteur à l'exécution.

Depuis le code, définis Value et appelle AddValue, compatible multithread. Avec l'édition Enregistrée et sgcWebSockets, les sources sgcDashboardWS lisent un nombre dans chaque message WebSocket, MQTT ou SSE via ValuePath et mettent à jour la carte et sa tendance à ta place.

Les tableaux de bord et les tuiles, la disposition en grille avec flux automatique, les cartes KPI avec sparklines, PNG et SVG sans fenêtre, les thèmes, les sources de données, les tuiles intégrées, les points de rupture adaptatifs et le routage IA. Elle n'inclut pas le glisser et le redimensionnement à l'exécution, SaveLayout et LoadLayout, le filtrage croisé, le concepteur à l'exécution, les réponses avec filtre du routeur IA ni le pont sgcDashboardWS. Voir Éditions.

Oui. TsgcFMXDashboard, ses tuiles et les cartes KPI fonctionnent sur FireMonkey à partir de Delphi XE6 sous Windows, macOS, iOS et Android, avec le même moteur de disposition que le tableau de bord VCL. Les tailles sont indépendantes de l'appareil et suivent l'échelle de la fiche.

Oui. TsgcDashboardKPI dessine une carte sans fenêtre et sans VCL ni FireMonkey, et écrit du PNG ou du SVG dans un fichier ou un flux. Il compile sur toutes les plateformes, Linux64 compris, un service ou un serveur web peut donc produire les images.

Oui. Toutes les tailles sont en pixels indépendants de l'appareil. Le tableau de bord VCL les adapte avec le PPI du moniteur divisé par 96 et le tableau de bord FireMonkey avec l'échelle de la fiche, les tuiles, espacements et hauteurs de ligne gardent donc leurs proportions sur n'importe quel moniteur.

DOCUMENTATION

Aide de sgcDashboard

Delphi

Introduction, Démarrage rapide VCL, Plateformes, Éditions, Tableau de bord, Carte KPI, Disposition, Persistance, Données en direct, Tuiles intégrées, Sources de données, Filtrage croisé, Disposition adaptative, Concepteur à l'exécution.

C++ Builder

Introduction, Démarrage rapide C++ Builder, Plateformes, Disposition, Données en direct, Tuiles intégrées, Sources de données, Filtrage croisé, Disposition adaptative, Concepteur à l'exécution.

.NET

Introduction, Plateformes, Éditions, Disposition, Données en direct, Tuiles intégrées, Sources de données, Filtrage croisé, Disposition adaptative, Concepteur à l'exécution.

Manuels PDF

Delphi, C++ Builder et .NET, couvrant tous les produits sgcUI.

3,000+Développeurs
20+Ans
761+Composants
30+Intégrations d'API
5Plateformes
Garantie satisfait ou remboursé de 30 joursPas satisfait ? Demandez un remboursement intégral dans les 30 jours suivant l'achat. Voir la politique de remboursement

Essaie sgcDashboard dès aujourd'hui

L'essai sgcUI inclut sgcDashboard et tous les autres produits sgcUI.

Télécharger l'essai Acheter sgcDashboard