Graphiques & visualisation
Chart (Chart.js ligne, barres, camembert, anneau, radar, polaire, bulles, nuage de points), Gauge, Diagram en SVG inline et Map sur Leaflet.
Voir la famille →
EN VEDETTE · sgcHTML
Ton backend parle déjà HTML
Construis toute l’application web en Pascal. Les composants HTML côté serveur génèrent du balisage Bootstrap 5, htmx rend chaque clic interactif, et les WebSockets poussent les mises à jour en direct dans la page ouverte. Pas de npm, pas d’étape de build JavaScript.
- Bootstrap 5 + htmx
- Temps réel via WebSockets
- Aucun JavaScript requis
- Delphi · C++ Builder · .NET
uses
sgcHTML_Component_StatCard, sgcHTML_Component_Chart,
sgcHTML_Component_Grid, sgcHTMX_Engine_Server;
// 1. KPI row, three stat cards
FBody :=
TsgcHTMLComponent_StatCard.Build('Monthly Revenue', '$48,200',
scSuccess, stUp, '12.5%', 'kpiRevenue', sgBlueViolet) +
TsgcHTMLComponent_StatCard.Build('Orders Today', '1,284',
scSuccess, stUp, '4.1%', 'kpiOrders', sgBlueViolet) +
TsgcHTMLComponent_StatCard.Build('Live Users', '312',
scSuccess, stNeutral, 'live', 'kpiUsers', sgBlueViolet);
// 2. Chart
oChart.ChartType := ctBar;
oChart.AddLabel('Mon'); oChart.AddLabel('Tue'); oChart.AddLabel('Wed');
oChart.AddLabel('Thu'); oChart.AddLabel('Fri');
oChart.AddDataset('Orders', [42, 58, 51, 73, 66],
'#7C3AED', 'rgba(124,58,237,.25)', True);
FBody := FBody + oChart.HTML;
// 3. Grid, straight from a dataset
oGrid.ShowSort := True;
oGrid.ShowFilter := True;
oGrid.LoadFromDataSet(qryOrders);
FBody := FBody + oGrid.HTML;
oPage.BodyContent := FBody;
Response := oPage.GetHTML; // full Bootstrap page
// 4. Later, from any thread, push a live KPI
oHTMX.BroadcastFragment(
'<div id="kpiRevenue" hx-swap-oob="true">' +
CurrToStr(FRevenue) + '</div>');À gauche : de l’Object Pascal. À droite : la page qu’il sert, en direct dans le navigateur. Les mêmes composants en C++ Builder et en C#.