Delphi, C++ Builder & .NET sgcUI에 포함

sgcDashboard, Delphi, C++ Builder & .NET용 대시보드와 KPI 카드

레이아웃 코드 없이 비즈니스 대시보드를 만드세요. 12열 그리드에 타일을 놓고 각 타일에 KPI 카드, 차트, 지도, 보고서 미리보기를 넣으며, 속성 하나로 화면 전체를 다크 테마로 바꾸고, 사용자가 직접 드래그하고 크기를 조절하고 레이아웃을 저장하게 하세요. 타일 런처는 애플리케이션에 그룹으로 나뉜 타일의 시작 화면을 제공합니다.

VCL, FireMonkey, WinForms, WPF, Avalonia자동 배치되는 12열 타일 그리드PNG 또는 SVG로 출력하는 KPI 카드, Linux64도 지원sgcUI Professional에 포함
체험판 다운로드 실행 영상 보기
Basic 데모: 반응형 그리드의 대시보드 타일과 KPI 카드
주요 기능

대시보드에 필요한 모든 것

여덟 개 그룹의 열여덟 가지 기능이며, 실제 컴포넌트와 속성 이름, 각 도움말 항목 링크를 담았습니다. Registered로 표시된 기능은 무료 .NET Community 빌드에 포함되지 않습니다.

레이아웃과 콘텐츠

타일을 대신 배치하는 그리드와 숫자를 보여 주는 카드.

12열 그리드에 타일 6개와 KPI 카드 4개가 있는 sgcDashboard Basic 데모

레이아웃과 콘텐츠

레이아웃 코드가 필요 없는 반응형 타일 그리드

대시보드는 어떤 창 크기와 DPI에서도 깔끔하게 유지되어야 하는 타일 그리드입니다. 폼에 대시보드를 올려 놓고 타일을 추가한 다음 각 타일에 열, 행, 스팬을 지정하세요. 그리드는 사용 가능한 너비에서 열 너비를 계산하고, 모니터 DPI에 맞춰 간격과 행 높이를 조정하며, 타일에 필요한 행이 더 많으면 세로로 스크롤합니다. 겹치는 타일은 한 행씩 아래로 밀려나므로 서로 위에 겹쳐지지 않습니다. 레이아웃이 하나의 엔진에 있으므로 같은 타일 셀은 VCL, FireMonkey, .NET 뷰에서 동일한 배치를 만듭니다.

  • Columns(기본값 12), RowHeight(120), Gap, Padding(12)을 갖춘 TsgcVCLDashboard
  • Col, Row, ColSpan, RowSpan을 갖춘 TsgcVCLDashboardTile
  • 숨겨진 타일(Visible False)은 셀을 차지하지 않습니다
  • 배치된 셀과 사각형은 Layout.PlacedCell과 Layout.Rect에서 읽을 수 있습니다
도움말 항목 읽기
스파크라인이 있는 KPI 타일 4개, 이벤트 로그, 서버 목록이 있는 대시보드

레이아웃과 콘텐츠

타일을 추가하면 자동 배치가 알아서 배치합니다

대시보드의 내용이 사용자나 데이터에 따라 달라진다면 좌표를 계산하고 싶지 않을 것입니다. 타일의 열과 행을 -1로 두면 자동 배치가 위에서부터 행을, 왼쪽에서부터 열을 훑어 처음 비어 있는 자리에 놓습니다. 열만 고정하면 타일은 그 열에서 처음 비어 있는 행에 놓입니다. 같은 대시보드에서 고정 타일과 자동 배치 타일을 섞어 사용할 수 있습니다.

  • AutoFlow는 기본적으로 켜져 있으며, 새 타일은 Col과 Row -1, 스팬 3 x 2로 시작합니다
  • 명시한 셀이 먼저 배치되고, 자동 배치 타일이 남은 공간을 채웁니다
  • 스팬은 타일이 마지막 열을 넘지 않도록 제한됩니다
  • 같은 레이아웃 엔진 TsgcDashboardLayout이 VCL, FireMonkey, .NET을 구동합니다
  • 아랍어와 히브리어를 위한 오른쪽에서 왼쪽 지원: 타일이 오른쪽에서부터 배치되고 타일 머리글과 KPI 카드가 미러링되며, 추세 화살표와 스파크라인은 방향을 유지합니다
도움말 항목 읽기
지도, PDF 뷰어, 보고서 미리보기를 담은 대시보드 타일

레이아웃과 콘텐츠

타일에 모든 컨트롤 넣기

타일은 선택적 헤더가 있는 컨테이너이므로 차트, 그리드, 지도, PDF 뷰어, 보고서 미리보기, 일반 메모 등 화면에 필요한 무엇이든 담을 수 있습니다. 컨트롤의 부모를 타일로 지정하고 클라이언트 영역에 맞춰 정렬하세요. Suite 데모는 sgcCharts, sgcMaps, sgcPDF, sgcReports를 하나의 대시보드에 담으며 모두 대시보드 테마를 따릅니다. 타일은 헤더를 없애 여백 없는 깔끔한 차트로 쓰거나 제목 표시줄로 유지할 수 있습니다. 타일을 추가하면 대시보드는 행이 늘어나고 세로로 스크롤됩니다.

  • 모든 타일의 Title과 ShowHeader
  • ParentTheme으로 타일이 대시보드를 따르게 하거나 자체 Theme을 유지하게 합니다
  • 타일 안의 sgcUI 컨트롤은 라이트 또는 다크 테마를 따릅니다
  • FireMonkey의 TsgcFMXDashboardTile에서도 동일하게 동작합니다
도움말 항목 읽기
값, 추세 화살표, 스파크라인이 있는 KPI 카드 4개

레이아웃과 콘텐츠

추세와 스파크라인이 있는 KPI 카드

모든 대시보드는 중요한 숫자의 행으로 시작합니다. 매출, 주문, 이탈률, 응답 시간 같은 것들입니다. KPI 카드는 큰 값, 아이콘, 텍스트가 있는 추세 화살표, 바닥글 줄, 최근 값의 작은 스파크라인을 하나의 컴포넌트로 보여 줍니다. 새 수치가 도착할 때마다 AddValue를 호출하면 스파크라인이 스크롤되며, MaxPoints가 보관할 이력의 양을 정합니다. AccentColor로 측정 대상에 맞게 카드 색을 정할 수 있고, 카드는 자신이 놓인 대시보드의 라이트 또는 다크 테마를 따릅니다.

  • Title, Value, Icon, FooterText, AccentColor를 갖춘 TsgcVCLKPICard
  • Trend: ktUp, ktDown, ktNeutral, 텍스트는 TrendValue
  • 스파크라인용 AddValue, ClearValues, MaxPoints
  • AddValue는 스레드에 안전하므로 작업자 스레드가 데이터를 공급할 수 있습니다
도움말 항목 읽기

레이아웃과 콘텐츠

시작 화면을 위한 타일 런처

많은 애플리케이션은 시작 화면에서 열립니다. 모듈마다 타일 하나가 있고, 영역별로 그룹화되며, 안에서 기다리는 항목의 개수가 표시됩니다. 타일 런처는 그 화면을 컨트롤 하나로 그립니다. 타일은 작은 크기, 중간, 와이드, 큰 크기의 네 가지 크기가 있고 캡션이 있는 그룹에 채워지므로, 큰 타일이 남긴 빈틈은 뒤따르는 작은 타일이 채웁니다. 그룹은 나란히 놓여 가로로 스크롤되거나 쌓여 세로로 스크롤되며, 런처 전체가 라이트 또는 다크 테마를 따릅니다.

  • TsgcVCLDashboardTileLauncher와 TsgcFMXDashboardTileLauncher, .NET에서는 TsgcWinFormsDashboardTileLauncher, TsgcWpfDashboardTileLauncher, TsgcAvaloniaDashboardTileLauncher
  • Groups와 Tiles에는 Caption, Subtitle, Size(dtsSmall, dtsMedium, dtsWide, dtsLarge), Color, ImageIndex, 알약 모양으로 그려지는 Badge가 있습니다
  • Orientation, CellSize, Spacing, GroupColumns, GroupSpacing이 레이아웃을 결정합니다
  • 클릭, Enter, Space에서 OnTileClick이 발생합니다. 방향 키는 그룹을 넘어 타일 사이를 이동하고, Home과 End는 첫 번째와 마지막 타일로 이동합니다
  • 화면 읽기 프로그램은 호출할 수 있는 타일 목록을 인식하며, SaveToPNG는 폼 없이 런처를 렌더링합니다

타일 런처는 Community를 포함한 모든 에디션에 들어 있습니다.

도움말 항목 읽기

내장 타일, 데이터 소스, 교차 필터링

하나의 데이터 소스로 스스로 채워지고 클릭 한 번으로 서로를 필터링하는 타일.

SalesExplorer 데모: 유럽 지역으로 필터링된 차트, 게이지, 그리드, 지도, 피벗 타일과 그리드 위의 필터 바

내장 타일

스스로 채워지는 차트, 게이지, 그리드, 피벗, 지도 타일

대부분의 대시보드는 같은 행을 다섯 가지 방식으로 보여 줍니다. 지역별 매출은 차트로, 합계는 게이지로, 레코드는 그리드로, 제품별 피벗으로, 고객은 지도로 표시합니다. 내장 타일에는 이미 컨트롤이 들어 있습니다. 데이터 소스와 열을 지정하면 행의 그룹화, 합산, 목록 표시를 타일이 대신 처리하므로 데이터를 컨트롤로 옮기는 코드가 필요 없습니다. 내장 타일도 타일이므로 헤더, 셀, 테마를 갖고, 사용자는 다른 타일과 똑같이 이동, 크기 조절, 저장, 불러오기를 할 수 있습니다.

  • TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile, MapTile, FireMonkey에서도 같은 이름
  • DataSource와 타일용으로 그룹화하고 집계한 읽기 전용 View
  • 제품 컨트롤은 공개되어 있으므로(Chart, Gauge, Grid, Pivot, Map) 평소처럼 스타일을 지정합니다
  • 작업자 스레드가 추가한 행은 타일이 메인 스레드로 옮깁니다

각 타일에는 해당 sgcUI 제품과 그 브리지 패키지가 필요합니다. sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid, sgcMaps 중 하나입니다. 타일은 Community를 포함한 모든 에디션에 있습니다. .NET에서 차트, 게이지, 그리드, 피벗, 지도 타일은 WinForms, WPF, Avalonia에서 쓸 수 있습니다.

도움말 항목 읽기

데이터 소스

하나의 데이터 소스로 모든 타일에 데이터 공급

숫자가 하나의 쿼리에서 나올 때는 모든 타일이 같은 행을 보여 주어야 합니다. TsgcDashboardDataSource는 행을 한 번만 보관하고, 원하는 수만큼의 타일이 각자의 뷰로 읽습니다. 차트는 한 열로 그룹화하고, 게이지는 다른 열을 합산하고, 그리드는 행을 나열합니다. 직접 만든 행으로 채우거나, 데이터셋을 복사하거나, sgcGrid 또는 sgcPivotGrid 테이블을 연결해 변경 사항을 따라가게 할 수 있습니다. 많은 변경을 하나의 업데이트로 묶으면 타일도 한 번만 갱신됩니다.

  • Columns, AppendRow, Clear, BeginUpdate, EndUpdate
  • LoadFromDataSet은 TDataSet을 복사하고, .NET에서는 LoadFrom이 DataTable을 받습니다
  • Table은 그리드나 피벗 그리드 같은 모든 IsgcUITable을 연결합니다
  • 뷰는 합계, 개수, 평균, 최솟값, 최댓값 또는 집계 없음으로 동작하며 스레드에 안전합니다

데이터 소스는 프레임워크에 독립적이며 모든 에디션에 포함됩니다.

도움말 항목 읽기

교차 필터링 Registered 에디션 전용

막대 하나를 클릭하면 다른 모든 타일이 따라옵니다

영업 관리자는 유럽이 뒤처지는 것을 보고 세부 내용을 알고 싶어 합니다. 교차 필터링에서는 유럽 막대를 클릭하면 같은 데이터 소스의 다른 모든 타일이 필터링됩니다. 게이지는 유럽 행을 합산하고, 그리드는 그 행을 나열하고, 피벗은 제품별로 보여 주고, 지도는 해당 마커만 남깁니다. 클릭한 차트는 모든 막대를 그대로 유지합니다. 그리드 위의 필터 바에는 조건마다 칩 하나와 모두 지우기 칩이 표시되고, 같은 막대를 한 번 더 클릭하면 필터가 해제됩니다.

  • 차트 포인트, 그리드 셀, 피벗 행, 지도 마커가 조건을 만들고 게이지는 이를 따릅니다
  • 서로 다른 필드의 조건은 AND로 결합됩니다
  • 대시보드의 ShowFilterBar, ClearFilters, OnFilterChanged
  • 타일별 CrossFilterSource와 CrossFilterTarget, 코드용 데이터 소스의 Filter

필터 바는 인쇄하거나 내보내지 않습니다. 교차 필터링은 Registered 에디션에 포함되며 Community 에디션에는 없습니다.

도움말 항목 읽기

반응형 레이아웃과 런타임 디자이너

좁은 화면에서는 더 적은 열을 쓰고, 사용자가 직접 대시보드를 만듭니다.

반응형 레이아웃

데스크톱에서는 12열, 휴대폰에서는 4열

넓은 모니터에 맞춰 설계한 대시보드는 좁은 창이나 휴대폰에서 읽기 어려워집니다. 브레이크포인트를 켜면 대시보드가 자신의 너비에 따라 크기 클래스를 고릅니다. 넓은 클래스는 Columns를 쓰고, 중간 클래스와 컴팩트 클래스는 더 적은 열과 자체 셀을 씁니다. 기본적으로 각 스팬이 자동으로 조정되므로 대부분의 대시보드는 추가 설정이 필요 없고, 휴대폰에서 큰 지도를 숨기는 것처럼 특정 클래스에서만 타일을 숨길 수 있습니다.

  • Breakpoints.Enabled, CompactWidth(600), MediumWidth(1024), CompactColumns(4), MediumColumns(8)
  • 타일별 CompactCell과 MediumCell, 클래스별 Visible
  • ActiveBreakpoint와 OnBreakpointChanged
  • 인쇄와 PDF는 페이지 너비에 맞춰 타일을 배치합니다

브레이크포인트는 모든 에디션에 있으며 기본적으로 꺼져 있습니다. Community 에디션에는 SaveLayout이 없으므로 브레이크포인트는 동작하지만 저장되지 않습니다.

도움말 항목 읽기

런타임 디자이너 Registered 에디션 전용

사용자가 직접 대시보드를 만들고, 실행 취소도 지원

부서마다 조금씩 다른 대시보드를 요구합니다. 요청마다 하나씩 만들어 주는 대신, 사용자가 직접 만들게 하세요. 편집 모드에서는 모든 타일을 이동하고 크기를 조절할 수 있고, 클릭하면 선택됩니다. 디자인 패널은 팔레트에서 내장 타일을 추가하고, 선택한 타일의 속성을 편집하고, 삭제하고, 최근 단계를 실행 취소하거나 다시 실행합니다. 결과를 SaveLayout으로 저장하면 런타임에 추가한 타일이 설정과 데이터 소스와 함께 돌아옵니다.

  • 대시보드의 EditMode, SelectedTile, AddTile, RemoveTile
  • Undo, Redo, CanUndo, CanRedo, 50단계, 편집 모드에서 Ctrl+Z, Ctrl+Y, Delete
  • TsgcVCLDashboardDesignPanel과 TsgcFMXDashboardDesignPanel, WinForms, WPF, Avalonia용 대응 컴포넌트
  • OnTileAdded, OnTileRemoving, OnSelectionChanged

런타임 디자이너는 Registered 에디션에 포함되며 Community 에디션에는 없습니다.

도움말 항목 읽기

대시보드에 질문하기

모든 타일에 하나의 AI 쿼리 바를 쓰고, 값은 애플리케이션 안에 그대로 남습니다.

대시보드에 질문하기

질문을 입력하면 알맞은 타일이 답합니다

사용자는 답이 들어 있는 타일을 직접 찾고 싶어 하지 않습니다. AI 쿼리 바를 대시보드 라우터에 연결하면 입력 상자 하나로 화면 전체를 다룰 수 있습니다. 라우터는 질문이 가리키는 타일을 골라 화면에 보이게 하고 맨 앞으로 가져온 뒤, 질문을 그 타일의 그리드 또는 피벗 엔진에 전달합니다. 차트, 게이지, 지도 타일도 참여합니다. 게이지와 KPI 카드는 제목과 값으로 로컬에서 답하고, 차트나 지도 타일은 표시되며 포커스를 받습니다. Registered 에디션에서는 "West 지역 매출 보여 줘" 같은 질문이 교차 필터 Region = West도 설정합니다.

  • TsgcVCLDashboardAI와 TsgcFMXDashboardAI, .NET에서는 TsgcWinFormsDashboardAI, TsgcWpfDashboardAI, TsgcAvaloniaDashboardAI
  • 타일 종류: 그리드, 피벗, KPI, 차트, 게이지, 지도, 데이터
  • 필터가 포함된 답변을 위한 LastFilter와 ApplyFilters, Undo는 필터를 제거합니다
  • 공급자가 없으면 규칙 기반 로컬 라우터가 타일을 고릅니다

개인정보: 공급자가 보는 것은 질문, 타일 제목과 종류, 열 이름입니다. KPI 카드 값, 게이지 값, 열 값은 애플리케이션 밖으로 나가지 않으며, 제안된 필터 값은 데이터에 대해 로컬에서 검증됩니다. 라우터는 모든 에디션에 있고, 필터가 포함된 답변은 Registered 에디션에 있습니다.

도움말 항목 읽기

사용자 레이아웃과 실시간 데이터

사용자가 자신의 시작 페이지를 배치하고 보관하게 하고, 네트워크에서 데이터를 공급합니다.

사용자 레이아웃과 실시간 데이터 Registered 에디션 전용

사용자가 타일을 드래그하고 크기를 조절합니다

공유 시작 페이지에서는 사용자마다 앞에 두고 싶은 숫자가 다릅니다. 드래그를 켜면 사용자가 헤더로 타일을 옮기고, 크기 조절을 켜면 모서리의 그립이 스팬을 바꿉니다. 마우스를 움직이는 동안 타일 아래에 대상 셀이 표시되고 타일이 그리드에 맞춰집니다. Esc 키로 취소합니다. 잠금으로 표시한 타일은 움직이지 않습니다. 아래의 저장된 레이아웃과 함께 사용하면 어떤 타일이 존재할지는 개발자가 정하면서도 사용자는 자신이 배치한 시작 페이지를 유지합니다.

  • 대시보드의 AllowDrag와 AllowResize
  • 타일의 Locked는 타일을 제자리에 고정합니다
  • OnLayoutChanged는 드래그나 크기 조절이 끝날 때마다 발생합니다
  • FireMonkey 대시보드에서도 동일하게 동작합니다

Community는 코드에서 고정 레이아웃을 만들며, 런타임 드래그와 크기 조절은 Registered 에디션 기능입니다.

도움말 항목 읽기

사용자 레이아웃과 실시간 데이터 Registered 에디션 전용

사용자별 레이아웃을 저장하고 복원

사용자가 배치한 레이아웃은 재시작 후에도 돌아와야 합니다. 호출 한 번으로 그리드 측정값과 이름이 있는 모든 타일의 셀과 표시 여부를 간결한 JSON으로 쓰고, 다른 호출로 적용합니다. 타일은 이름으로 대응되고 알 수 없는 이름은 무시되며 텍스트에 없는 타일은 자신의 셀을 유지하므로, 새 버전에서 타일을 추가해도 이전에 저장한 레이아웃을 그대로 불러올 수 있습니다. JSON은 작고 읽기 쉬우므로 기본 레이아웃을 애플리케이션과 함께 배포하고 이를 다시 불러오는 초기화 버튼을 제공할 수 있습니다.

  • SaveLayout과 LoadLayout은 JSON 문자열을 반환하고 적용합니다
  • SaveLayoutToFile, LoadLayoutFromFile, SaveLayoutToStream, LoadLayoutFromStream
  • 저장할 때는 BOM 없는 UTF-8, 불러올 때는 BOM을 건너뜁니다
  • 문자열을 사용자별로 파일, 레지스트리, 데이터베이스에 저장하세요
도움말 항목 읽기

사용자 레이아웃과 실시간 데이터 Registered 에디션 전용

네트워크에서 바로 받는 실시간 KPI

운영 화면은 매초 바뀌는 값을 보여 줍니다. sgcDashboardWS 브리지는 sgcWebSockets 클라이언트의 모든 JSON 메시지에서 숫자를 읽어 스파크라인과 함께 카드에 넣습니다. 추세 화살표는 이전 값을 따라 저절로 바뀝니다. Delphi 2010 이상에서는 텍스트 업데이트가 메인 스레드에서 실행되므로 클라이언트는 어떤 스레딩 모드든 사용할 수 있습니다. 유효한 JSON이 아니거나 경로가 숫자가 아닌 메시지는 무시되므로 잡음이 많은 피드가 화면을 망가뜨리지 않습니다.

  • TsgcDashboardSource_WebSocket, TsgcDashboardSource_MQTT(Topic 포함), TsgcDashboardSource_SSE
  • data.items[0].value 같은 ValuePath, 기본값이 %.2f인 ValueFormat
  • TitlePath와 TrendValuePath는 더 많은 필드를 카드에 복사합니다
  • 업데이트마다 발생하는 OnValue 이벤트

브리지에는 sgcWebSockets가 필요합니다. Community에서는 Value와 AddValue로 코드에서 카드에 데이터를 공급하세요.

도움말 항목 읽기

테마, 이미지, 플랫폼

화면 전체에 하나의 룩, 이미지로 쓰는 같은 카드, 모든 대상에서 같은 디자인.

다크 테마에서 KPI 스파크라인, 실시간 차트, 지도, PDF 뷰어, 보고서 미리보기가 있는 sgcDashboard 타일

테마, 이미지, 플랫폼

속성 하나로 대시보드 전체에 테마 적용

어두운 관제실과 밝은 사무실은 같은 화면을 두 가지 룩으로 필요로 합니다. 대시보드 테마를 설정하면 모든 타일, 모든 KPI 카드, 그 안의 sgcUI 컨트롤에 적용되어 차트, 게이지, 그리드가 함께 바뀝니다. 테마 유형은 모든 sgcUI 제품이 사용하는 것과 같으므로 애플리케이션 전체가 하나의 설정을 따를 수 있습니다. 눈에 띄어야 하는 타일은 자체 테마를 유지하고 나머지 대시보드는 전역 테마를 따르게 할 수 있습니다.

  • 대시보드의 Theme := utDark 또는 utLight
  • 타일은 ParentTheme으로 따라가거나 자체 Theme을 유지합니다
  • KPI 카드와 헤드리스 KPI 이미지는 같은 팔레트를 사용합니다
  • 런타임에 바꿀 수 있으며, 예를 들어 낮과 밤 전환 스위치에서 바꿉니다
도움말 항목 읽기

테마, 이미지, 플랫폼

이메일과 웹용 이미지로 만든 KPI 카드

대시보드의 숫자는 아침 보고서 이메일, 인트라넷 페이지, PDF 등 다른 곳에서도 필요한 경우가 많습니다. TsgcDashboardKPI는 창, VCL, FireMonkey 없이 같은 카드를 렌더링하므로 콘솔 프로그램, Windows 서비스, Linux64 서버에서도 만들 수 있습니다. 너비와 높이는 논리 픽셀이며 배율 계수로 선명한 고해상도 이미지를 얻습니다. 예약 보고서에 활용하여 대시보드와 같은 쿼리로 카드를 만들고 이미지를 메시지에 첨부하세요.

  • 파일이나 스트림으로 SaveToPNG, 예를 들어 배율 2에서 320 x 160으로 640 x 320 이미지
  • 선명한 벡터 출력을 위한 SaveToSVG
  • Card.KPI.SaveToPNG는 화면의 카드가 보여 주는 내용을 저장합니다
  • Linux64를 포함한 모든 플랫폼에서 빌드됩니다
도움말 항목 읽기

테마, 이미지, 플랫폼

데스크톱, 모바일, .NET에서 같은 대시보드

대시보드를 한 번 작성하고 디자인을 재사용하세요. FireMonkey 대시보드, 타일, KPI 카드는 Windows, macOS, iOS, Android에서 실행되며, .NET 포트는 WinForms, WPF, Avalonia용으로 같은 클래스를 제공합니다. 하나의 레이아웃 엔진이 모든 곳에서 셀을 계산하므로 저장된 레이아웃은 모든 대상에서 같은 의미를 갖습니다. 데모는 모든 대상에 같은 구성으로 제공됩니다. Delphi와 C++ Builder는 Basic, LiveKPI, SaveLayout, Suite이며 .NET에는 WinForms, WPF, Avalonia 버전이 있습니다.

  • TsgcFMXDashboard, TsgcFMXDashboardTile, TsgcFMXKPICard, TsgcFMXDashboardTileLauncher
  • TsgcWinFormsDashboard, TsgcWinFormsKPICard과 이들의 WPF 및 Avalonia 대응 컴포넌트
  • Delphi 7부터 13 VCL, XE6부터 FireMonkey, C++ Builder 2007부터 13
  • .NET Framework 4.7.2, .NET 8, .NET 9, .NET 10
도움말 항목 읽기

접근성

UI Automation을 통한 화면 읽기 프로그램, 키보드, 고대비 지원, 별도 설정이 필요 없습니다.

접근성

마우스 없이 타일 사이를 이동하고 재배치

sgcDashboard는 대시보드와 타일을 제목과 위치와 함께, 각 타일에 호스팅된 컨트롤과, 제목, 값, 단위, 추세가 있는 KPI 카드를 Microsoft UI Automation에 노출합니다.

  • 화살표는 타일 사이를 이동하고, Home과 End는 첫 번째 또는 마지막 타일로 이동하며, Enter는 포커스를 포커스된 타일 안으로 옮깁니다
  • 대시보드가 잠겨 있지 않으면 Ctrl+Shift+화살표는 타일을 이동하고(AllowDrag), Alt+Shift+화살표는 크기를 조절합니다(AllowResize)
  • 대시보드는 탭 정지 지점이며 눈에 보이는 포커스 링을 표시합니다
  • Windows 고대비 테마에서는 타일 외곽이 시스템 색을 사용하고, KPI 카드의 강조 색과 추세 색은 시스템 색으로 대체됩니다

접근성은 무료 Community 에디션을 포함한 모든 에디션에서 기본으로 켜져 있으며, Delphi 7부터 Delphi 13까지 모든 Delphi 및 C++Builder 버전의 VCL, Windows의 FireMonkey, 그리고 WinForms, WPF, Avalonia에서 지원됩니다. Delphi와 C++Builder에서는 AccessibleName과 AccessibleDescription이 UI Automation에 노출되는 이름과 설명을 설정하고, .NET에서는 각 프레임워크의 표준 접근성 이름과 도움말 텍스트가 같은 역할을 합니다. 접근성 적합성 보고서를 참조하세요.

도움말 항목 읽기
실제 동작

sgcDashboard 동작 보기

sgcUI 제품군 데모 속의 sgcDashboard: 내장 시뮬레이션 데이터로 오프라인에서 실행되는 완전한 애플리케이션입니다.

스파크라인이 있는 KPI 카드, 알람 타일, 트리맵, VaR 게이지를 대시보드 타일로 배치.

스파크라인이 있는 KPI 카드, 알람 타일, 트리맵, VaR 게이지를 대시보드 타일로 배치.

Altamira Markets →
공정 다이어그램 주위에 스파크라인이 있는 OEE 카드, 병 카운터, 알람 타일.

공정 다이어그램 주위에 스파크라인이 있는 OEE 카드, 병 카운터, 알람 타일.

Altamira Plant →
ERP 대시보드: 스파크라인이 있는 KPI 카드, 매출 차트, 게이지, 고객 지도.

ERP 대시보드: 스파크라인이 있는 KPI 카드, 매출 차트, 게이지, 고객 지도.

Altamira ERP →
한 페이지에 스파크라인이 있는 포트폴리오 KPI 카드, 상태 게이지, 차트.

한 페이지에 스파크라인이 있는 포트폴리오 KPI 카드, 상태 게이지, 차트.

Altamira PMO →
제품군 데모 전체 보기
활용 사례

sgcDashboard로 개발하는 사람들

ERP의 경영진 및 영업 대시보드

ERP의 시작 페이지는 매출, 미결 주문, 연체 청구서, 이탈률을 추세 화살표가 있는 KPI 카드로 보여 주고, 아래 타일에는 영업 차트와 상위 고객 그리드를 둡니다. 매일 밤 서비스가 같은 카드를 경영진 이메일용 PNG로 렌더링하며, 화면과 같은 숫자와 색상을 사용합니다.

  • KPI 카드
  • 타일 안의 모든 컨트롤
  • 헤드리스 KPI 이미지
  • 테마
Suite 데모 실행

운영 및 IoT 관제실

공장의 벽면 화면은 라인 처리량, 온도, 경보 수를 보여 줍니다. MQTT 소스가 측정값이 도착하는 대로 해당 카드에 넣고, 스파크라인은 최근 몇 분을 보여 주며, 다크 테마는 밤에도 관제실을 차분하게 유지합니다. 인접한 타일의 게이지와 차트도 같은 테마를 따릅니다.

  • MQTT 소스
  • 스파크라인
  • 다크 테마
  • 타일 안의 게이지
LiveKPI 데모 실행

데스크톱 SaaS 클라이언트의 개인 시작 페이지

여러 역할이 사용하는 데스크톱 클라이언트에서 각 사용자는 중요한 타일을 위로 끌어 올리고, 가장 많이 보는 차트의 크기를 조절하고, 나머지는 숨깁니다. 레이아웃은 사용자별 JSON으로 저장되어 다음 로그인 때 복원되며, 업데이트로 추가된 새 타일은 빈 공간에 자연스럽게 배치됩니다.

  • 드래그와 크기 조절
  • SaveLayout과 LoadLayout
  • 자동 배치
SaveLayout 데모 실행
빠른 시작

A KPI Dashboard in a Few Lines

The same API in Delphi, C++ Builder and C#: tiles on the grid, a KPI card with a sparkline in each, a dark theme and a saved layout. Dragging and layout files need the Registered edition.

Tiles on the 12 column grid with a KPI card in each, a dark theme, and the layout saved to a file. Dragging and layout files need the Registered 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;

도움말 항목 읽기 →

The same dashboard in C++ Builder with the generated headers.

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

도움말 항목 읽기 →

The WinForms version in C#, with the same class names as 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

도움말 항목 읽기 →

체험판 다운로드
데모

sgcDashboard 데모 실행하기

Delphi와 C++ Builder용 데모 6개와 .NET용 데모 10개가 모두 컴파일된 데모 다운로드에 들어 있습니다.

Basic

Basic

12열 그리드에 타일 6개와 KPI 카드 4개가 있고, 나머지 타일에는 로그와 목록이 있습니다. 레이아웃 엔진과 테마 전환을 가장 빠르게 확인할 수 있습니다.

Registered 에디션 전용 LiveKPI

sgcDashboardWS 브리지로 KPI 카드에 데이터를 공급하며, 메시지가 도착할 때마다 값이 바뀌고 스파크라인이 늘어납니다. sgcWebSockets가 필요합니다.

Registered 에디션 전용 SaveLayout

헤더로 타일을 드래그하고 그립으로 크기를 조절하며, 레이아웃을 JSON으로 저장하고, 데모를 다시 시작하여 복원되는 것을 확인합니다.

Suite

다른 sgcUI 제품의 차트, 지도, PDF 뷰어, 보고서 미리보기, KPI 카드를 하나의 테마가 적용된 대시보드에 담았습니다.

SalesExplorer

SalesExplorer

204개의 판매 행이 있는 하나의 데이터 소스가 차트, 게이지, 그리드, 피벗, 지도 타일에 데이터를 공급합니다. 지역 막대, 그리드 셀, 피벗 행, 지도 마커 중 하나를 클릭하면 다른 타일이 필터를 따라갑니다(Registered). 창을 좁히면 타일이 다시 배치됩니다. Delphi VCL과 C++ Builder, .NET에서는 SalesExplorer(WinForms)와 SalesExplorerWpf. sgcCharts, sgcGauges, sgcGrid, sgcPivotGrid, sgcMaps가 필요합니다.

Registered 에디션 전용 Designer

런타임 디자이너입니다. 디자인 패널의 팔레트에서 내장 타일을 추가하고, 편집 모드에서 이동하고 크기를 조절하고, 속성을 편집하고, 삭제하고, 실행 취소와 다시 실행을 하고, 대시보드를 JSON으로 저장합니다. Delphi VCL과 C++ Builder, .NET에서는 DashboardDesigner(WinForms)와 DashboardDesignerWpf.

TileLauncher

그룹 세 개와 모든 크기의 타일, 부제목, 배지, 비활성화된 타일이 있는 시작 화면입니다. 상태 표시줄에는 마우스, Enter 또는 Space로 클릭한 타일이 표시되고, 콤보 상자 두 개로 방향과 테마를 전환합니다. TileLauncherFMX는 FireMonkey에서 같은 일을 합니다.

.NET demos

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

컴파일된 데모

sgcUI 제품 전체의 실행 파일을 제공하며, 설치가 필요 없습니다.

sgcUI_bin.zip 다운로드 →

시작하기 가이드

Delphi(VCL)용 QuickStart 데모 다섯 개가 Demos\Dashboard\Delphi\00.QuickStart에 포함되어 있습니다. PDF 가이드가 단계별로 안내하는 내용은 다음과 같습니다. KPI 카드가 있는 첫 번째 대시보드, 12열 타일 그리드, 실시간 데이터, 테마, 차트 타일이 있는 판매 대시보드.

가이드 다운로드 (PDF, 영어) →
에디션

sgcDashboard가 포함된 곳

sgcDashboard는 sgcUI Professional과 Enterprise에 포함되며 단독으로도 판매됩니다. 또한 All-Access 번들에도 포함되어 있습니다.

sgcDashboard 단일 패키지

€199 / 개발자, 전체 소스 코드, 1년 업데이트.

sgcDashboard 구매 → 가격 보기 →

sgcUI Professional

Standard에 sgcDashboard, sgcCharts 및 sgcGauges 추가, €529부터.

Professional 보기 →

sgcUI Enterprise

sgcUI 제품 17개 전체, €699부터.

Enterprise 보기 →

무료 Community 에디션(NuGet의 esegece.sgcDashboard.Community)에는 그리드, 타일, 스파크라인이 있는 KPI 카드, 헤드리스 PNG 및 SVG, 테마, 데이터 소스, 내장 타일, 반응형 브레이크포인트, 모든 타일로의 AI 라우팅이 포함됩니다. 런타임 드래그 및 크기 조절, SaveLayout과 LoadLayout(그래서 레이아웃은 저장되지 않음), 교차 필터링, 런타임 디자이너, 대시보드에 질문하기의 필터가 포함된 답변, sgcDashboardWS 브리지는 포함되지 않습니다. 내장 타일에는 모든 에디션에서 해당 sgcUI 제품과 그 브리지 패키지가 필요합니다.

기능Community (무료)Registered 에디션
스팬과 자동 배치가 있는 타일 그리드✓✓
추세와 스파크라인이 있는 KPI 카드✓✓
라이트 및 다크 테마✓✓
PNG와 SVG로 출력하는 헤드리스 KPI 카드✓✓
그룹으로 나뉜 타일, 배지, 키보드 탐색을 갖춘 타일 런처✓✓
차트, 게이지, 그리드, 피벗, 지도 내장 타일(각각 해당 sgcUI 제품 필요)✓✓
여러 타일이 공유하는 데이터 소스✓✓
반응형 브레이크포인트✓ (저장되지 않음)✓
대시보드에 질문하기의 모든 타일 라우팅✓✓
필터 바가 있는 교차 필터링−✓
디자인 패널과 실행 취소가 있는 런타임 디자이너−✓
대시보드에 질문하기의 필터가 포함된 답변−✓
타일의 런타임 드래그와 크기 조절−✓
SaveLayout과 LoadLayout−✓
sgcDashboardWS 실시간 소스(WebSocket, MQTT, SSE)−✓
플랫폼

지원 프레임워크 및 플랫폼

sgcDashboard의 컴포넌트

컴포넌트설명
TsgcVCLDashboard, TsgcFMXDashboardVCL과 FireMonkey용 그리드 컨테이너.
TsgcVCLDashboardTile, TsgcFMXDashboardTile제목이 있고 모든 컨트롤을 담을 수 있는 타일.
TsgcVCLKPICard, TsgcFMXKPICard추세, 바닥글, 스파크라인이 있는 KPI 카드.
TsgcDashboardKPIPNG 및 SVG 내보내기를 지원하는 프레임워크 중립 헤드리스 KPI 카드.
TsgcVCLDashboardTileLauncher, TsgcFMXDashboardTileLauncher네 가지 크기의 타일을 캡션이 있는 그룹에 배치한 시작 화면으로, 배지, 스크롤, 키보드 탐색을 지원합니다.
TsgcDashboardTileLauncher타일 런처의 프레임워크 중립 모델 및 렌더러로, 헤드리스 PNG 내보내기를 지원합니다.
TsgcDashboardDataSource내장 타일에 데이터를 공급하는 프레임워크 독립적인 데이터 소스입니다.
TsgcVCLDashboardChartTile, GaugeTile, GridTile, PivotTile, MapTilesgcCharts, sgcGauges, sgcGrid, sgcPivotGrid, sgcMaps 컨트롤을 담은 내장 타일로, 제품마다 브리지 패키지 하나이며 FireMonkey 버전도 포함합니다.
TsgcVCLDashboardDesignPanel, TsgcFMXDashboardDesignPanel런타임 디자이너의 디자인 패널입니다(Registered 전용).
TsgcDashboardLayoutLinux64에서도 사용할 수 있는 레이아웃 엔진.
TsgcDashboardSource_WebSocket, _MQTT, _SSEsgcDashboardWS 브리지의 실시간 KPI 소스(Registered 에디션 전용).
대상컴포넌트플랫폼
Delphi 7부터 13, VCLTsgcVCLDashboardWin32 및 Win64
Delphi XE6부터 13, FireMonkeyTsgcFMXDashboardWindows, macOS, iOS, Android
C++ Builder 2007부터 13TsgcVCLDashboard, TsgcFMXDashboard생성된 .hpp 헤더와 정적 라이브러리
Delphi 10.2부터 13, 프레임워크 중립TsgcDashboardLayout, TsgcDashboardKPILinux64, 레이아웃 엔진과 헤드리스 KPI 카드
.NET Framework 4.7.2, .NET 8, 9, 10TsgcWinFormsDashboard와 WPF 및 Avalonia 대응 컴포넌트WinForms, WPF, Avalonia
FAQ

자주 묻는 질문

예, Registered 에디션에서 가능합니다. AllowDrag와 AllowResize로 사용자가 헤더로 타일을 옮기고 그립으로 크기를 조절할 수 있으며, SaveLayoutToFile 또는 SaveLayout이 결과를 JSON으로 저장합니다. LoadLayout은 타일 이름으로 복원하므로 애플리케이션의 새 버전에서도 레이아웃이 유지됩니다.

모든 컨트롤입니다. 타일은 컨테이너이므로 컨트롤의 부모를 타일로 지정하고 클라이언트 영역에 맞춰 정렬하세요. Suite 데모는 차트, 지도, PDF 뷰어, 보고서 미리보기를 담고 있으며, 타일 안의 sgcUI 컨트롤은 대시보드 테마를 따릅니다.

네. 각 내장 타일에는 해당 제품과 브리지 패키지가 필요합니다. 차트 타일은 sgcCharts, 게이지 타일은 sgcGauges, 그리드 타일은 sgcGrid, 피벗 타일은 sgcPivotGrid, 지도 타일은 sgcMaps가 필요합니다. sgcDashboard는 단독으로도 판매되므로 대시보드 코어는 제품 유닛을 사용하지 않습니다. sgcUI Enterprise에는 모두 포함됩니다. .NET에서는 지도 타일을 포함한 모든 타일을 WinForms, WPF, Avalonia에서 쓸 수 있습니다. 내장 타일을 참조하세요.

네, Registered 에디션에서 가능합니다. EditMode를 설정하고 대시보드 옆에 디자인 패널을 도킹하세요. 사용자는 팔레트에서 내장 타일을 추가하고, 이동하고, 크기를 조절하고, 삭제하고, 속성을 편집하며, 각 단계를 실행 취소하거나 다시 실행할 수 있습니다. SaveLayout은 런타임에 추가한 타일을 포함한 결과를 저장하고, LoadLayout이 이를 다시 만듭니다. Designer 데모에서 전체 흐름을 볼 수 있습니다. 런타임 디자이너를 참조하세요.

코드에서 Value를 설정하고 스레드에 안전한 AddValue를 호출합니다. Registered 에디션과 sgcWebSockets가 있으면 sgcDashboardWS 소스가 ValuePath로 각 WebSocket, MQTT, SSE 메시지에서 숫자를 읽어 카드와 추세를 자동으로 업데이트합니다.

대시보드와 타일, 자동 배치가 있는 그리드 레이아웃, 스파크라인이 있는 KPI 카드, 헤드리스 PNG 및 SVG, 테마, 데이터 소스, 내장 타일, 반응형 브레이크포인트, AI 라우팅입니다. 런타임 드래그와 크기 조절, SaveLayout과 LoadLayout, 교차 필터링, 런타임 디자이너, AI 라우터의 필터가 포함된 답변, sgcDashboardWS 브리지는 포함되지 않습니다. 에디션을 참조하세요.

예. TsgcFMXDashboard, 타일, KPI 카드는 Delphi XE6부터 Windows, macOS, iOS, Android의 FireMonkey에서 VCL 대시보드와 같은 레이아웃 엔진으로 실행됩니다. 크기는 장치 독립적이며 폼 배율을 따릅니다.

예. TsgcDashboardKPI는 창, VCL, FireMonkey 없이 카드를 그리고 PNG 또는 SVG를 파일이나 스트림에 씁니다. Linux64를 포함한 모든 플랫폼에서 빌드되므로 서비스나 웹 서버가 이미지를 만들 수 있습니다.

예. 모든 크기는 장치 독립 픽셀입니다. VCL 대시보드는 모니터 PPI를 96으로 나눈 값으로, FireMonkey 대시보드는 폼 배율로 조정하므로 타일, 간격, 행 높이는 어떤 모니터에서도 비율을 유지합니다.

문서

sgcDashboard 도움말

Delphi

소개, VCL 빠른 시작, 플랫폼, 에디션, 대시보드, KPI 카드, 레이아웃, 영속성, 실시간 데이터, 내장 타일, 데이터 소스, 교차 필터링, 반응형 레이아웃, 런타임 디자이너.

C++ Builder

소개, C++ Builder 빠른 시작, 플랫폼, 레이아웃, 실시간 데이터, 내장 타일, 데이터 소스, 교차 필터링, 반응형 레이아웃, 런타임 디자이너.

.NET

소개, 플랫폼, 에디션, 레이아웃, 실시간 데이터, 내장 타일, 데이터 소스, 교차 필터링, 반응형 레이아웃, 런타임 디자이너.

PDF 매뉴얼

Delphi, C++ Builder, .NET용이며 sgcUI 제품 전체를 다룹니다.

3,000+개발자
20+년
761+컴포넌트
30+API 통합
5플랫폼
30일 환불 보장만족하지 않으세요? 구매 후 30일 이내에 전액 환불을 요청하세요. 환불 정책 보기

지금 sgcDashboard를 체험해 보세요

sgcUI 체험판에는 sgcDashboard와 다른 모든 sgcUI 제품이 포함되어 있습니다.

체험판 다운로드 sgcDashboard 구매