대시보드

시각적 작업 공간으로서의 대시보드

대시보드는 프로젝트와 관련된 여러 시각화를 구성하고 관리할 수 있는 다목적 시각적 작업 공간 역할을 합니다. 데이터를 효과적으로 탐색, 분석 및 표시하기 위한 동적 및 대화형 환경을 제공합니다.

대시보드 데이터 구조

시스템에서 대시보드를 나타내려면 다음 DashboardData 인터페이스를 사용할 수 있습니다.

type Layout = {
    i: string;
    x: number;
    y: number;
    w: number;
    h: number;
    minW: number;
    minH: number;
};

type DashboardData = {
    userId?: string;
    name: string;
    projectName: string;
    description?: string;
    createdAt?: Date;
    updatedAt?: Date;
    visualizations?: {
        [name: string]: string;
    } | VisualizationTypes.VisualizationType[];
    layouts?: Layout[];
};

type DashboardType =
    DashboardData &
    with_id &
    with_optional_version;

주요 속성

• 이름: 대시보드의 고유 식별자입니다.
• projectName: 상황별 연결을 위해 연결된 프로젝트의 이름입니다.
• 설명: 대시보드에 대한 추가 컨텍스트나 세부정보를 제공하는 선택 필드입니다.
• createdAt: 대시보드가 ​​생성된 시간을 나타내는 타임스탬프입니다.
• updatedAt: 대시보드의 마지막 수정을 보여주는 타임스탬프입니다.
• 시각화: 키-값 쌍 또는 시각화 유형 배열로 대시보드에 포함된 시각화 모음입니다.
• 레이아웃: 대시보드 내 시각화의 위치와 크기를 결정하는 레이아웃 구성 목록입니다. 각 레이아웃에는 다음이 포함됩니다.
  • i: 시각화의 고유 식별자입니다.
  • x, y: 그리드에서 시각화의 위치를 ​​나타내는 좌표입니다.
  • w, h: 시각화의 너비와 높이입니다.
  • minW, minH: 최소 너비 및 높이 제약 조건입니다.

대시보드 기능

대시보드를 통해 사용자는 다음을 수행할 수 있습니다.

• 시각화를 드래그 앤 드롭하여 작업 공간에서 재정렬합니다.
• 특정 데이터 요구 사항에 맞게 시각화 크기를 조정합니다.
• 다양한 사용 사례나 대상에 맞춰 여러 레이아웃을 유지하세요.

이러한 유연성을 제공함으로써 대시보드는 사용자가 프로젝트 요구 사항에 따라 시각적 작업 공간을 사용자 정의할 수 있도록 해줍니다.

실제 사례