sgcUI sgcDashboard를 지금 바로 사용할 수 있어요

sgcDashboard. 타일 속의 KPI. 레이아웃 코드 없이.

12열 그리드에 타일을 놓고, 타일마다 KPI 카드, 차트, 지도, 보고서 미리보기를 넣고, 속성 하나로 화면 전체를 다크 테마로 바꾸고, 사용자가 직접 끌어서 크기를 조절하고 자기 레이아웃을 저장하게 해 보세요. Delphi, C++ Builder, .NET용이며 소스 코드가 포함돼요.

체험판 다운로드 sgcDashboard 살펴보기

VCL
FireMonkey
WinForms
WPF
Avalonia
Delphi 7~13

sgcDashboard Basic 데모: 12열 타일 그리드 위의 스파크라인이 있는 KPI 카드 4개, 이벤트 로그, 서버 목록

12타일 그리드의 열 수, 스팬과 자동 배치 지원
3실시간 KPI 소스: WebSocket, MQTT, SSE
10데모: Delphi와 C++ Builder용 네 개, .NET용 여섯 개
5UI 프레임워크: VCL, FireMonkey, WinForms, WPF, Avalonia

대시보드에 필요한 모든 것.

타일을 알아서 배치하는 그리드, 숫자를 보여주는 카드, 네트워크에서 바로 들어오는 값, 화면 전체에 통일된 모양. sgcDashboard는 이 모두를 모든 프레임워크에서 다뤄요.

타일 그리드
열 12개, 스팬, 자동 배치가 레이아웃 코드 한 줄 없이 모든 타일을 배치해요.
KPI 카드
값, 추세 화살표, 추세 문구, 스파크라인을 한 컴포넌트에 담았고, PNG나 SVG로도 낼 수 있어요.
실시간 값
코드에서 카드에 값을 넣거나, sgcDashboardWS 브리지로 WebSocket, MQTT, SSE에서 받아 넣어요.
하나의 테마
타일, 카드, 그 안의 sgcUI 컨트롤을 속성 하나로 라이트 또는 다크로 바꿔요.

동작하는 모습을 보세요.

체험판에 들어 있는 sgcDashboard 데모에서 녹화했어요.

라이트 테마에서 이벤트 로그 타일과 서버 목록 타일 위에 놓인 스파크라인이 있는 KPI 카드 4개

레이아웃

레이아웃 코드 없는 반응형 타일 그리드.

TsgcVCLDashboard는 사용할 수 있는 너비에서 열 너비를 계산하고, 간격과 행 높이는 모니터 DPI에 맞춰 조정해요.
타일에 Col, Row, ColSpan, RowSpan을 지정하거나, Col과 Row를 -1로 두면 자동 배치가 첫 번째 빈 자리에 넣어 줘요.
아랍어와 히브리어를 위한 오른쪽에서 왼쪽 방향: 타일은 오른쪽부터 흐르고, 추세 화살표와 스파크라인은 방향을 그대로 유지해요.

라이트 테마의 Suite 데모: 타일에 들어간 KPI 카드, sgcCharts 실시간 선, sgcMaps 지도, sgcPDF 뷰어, sgcReports 미리보기

타일 안의 모든 컨트롤

어느 타일에든 차트, 지도, 보고서 미리보기를 넣을 수 있어요.

타일은 헤더를 선택할 수 있는 컨테이너예요. 컨트롤의 부모를 타일로 지정하고 클라이언트 영역에 맞춰 정렬하세요.
Suite 데모는 sgcCharts, sgcMaps, sgcPDF, sgcReports를 한 대시보드에 담고, 모두 대시보드 테마를 따라요.
TsgcVCLKPICard는 값, 아이콘, 추세 화살표, 하단 문구 한 줄, 그리고 AddValue를 호출할 때마다 스크롤되는 스파크라인을 보여줘요.

실시간 데이터

네트워크에서 바로 들어오는 실시간 KPI.

TsgcDashboardSource_WebSocket, TsgcDashboardSource_MQTT, TsgcDashboardSource_SSE는 JSON 메시지마다 ValuePath로 숫자를 읽어요.
카드와 스파크라인, 추세 화살표는 저절로 갱신되고, 코드에서 카드에 값을 넣을 때도 AddValue는 스레드에 안전해요.
유효한 JSON이 아니거나 경로가 숫자가 아닌 메시지는 무시하므로, 잡음이 많은 피드도 화면을 망가뜨리지 않아요.

라이트 및 다크 테마 데모: 대시보드 Theme 속성을 따르는 타일과 KPI 카드

테마와 저장되는 레이아웃

속성 하나로 테마를 바꾸고, 사용자는 직접 배치하고 저장해요.

Theme := utDark 또는 utLight는 모든 타일과 KPI 카드, 그 안의 sgcUI 컨트롤에 적용돼요.
AllowDrag와 AllowResize를 켜면 사용자가 헤더로 타일을 옮기고 손잡이로 크기를 바꿀 수 있고, 타일은 그리드에 맞춰져요.
SaveLayout과 LoadLayout은 레이아웃을 간결한 JSON으로 저장하고 타일 이름으로 복원해요.

sgcDashboard 더 보기.

다크 테마, 타일 속의 차트, 지도, 보고서 미리보기, 그리고 Basic 데모를 데모에서 그대로 가져왔어요.

다크 테마의 Suite 데모: 처리량과 지연 시간 KPI 카드, sgcCharts 실시간 선, sgcMaps 지도, sgcPDF 뷰어, sgcReports 미리보기 — 다크 테마의 Suite 데모: `Theme` 속성 하나가 차트, 지도, PDF와 보고서 미리보기에 적용돼요.

Basic 데모: 12열 그리드의 타일 6개와 KPI 카드 4개이고, 나머지 타일에는 로그와 목록이 있어요.

스파크라인이 있는 처리량과 지연 시간 KPI 카드, 그 옆의 sgcCharts 실시간 선 — 스파크라인이 있는 처리량 카드와 지연 시간 카드가 sgcCharts 실시간 선 옆에 각각 자기 타일로 놓여 있어요.

대시보드 타일에 들어간 지도, PDF 뷰어, 보고서 미리보기 — sgcMaps, sgcPDF, sgcReports의 지도, PDF 뷰어, 보고서 미리보기가 타일 안에 들어 있어요.

몇 줄로 만드는 KPI 대시보드.

그리드 위의 타일, 타일마다 스파크라인이 있는 KPI 카드, 다크 테마, 저장된 레이아웃. Delphi, C++ Builder, C#에서 같은 API예요. 끌어서 이동과 레이아웃 파일은 Registered 에디션이 필요해요.

dotnet add package esegece.sgcDashboard.WinForms

C++ Builder와 C# 버전

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;