ダッシュボード

ビジュアルワークスペースとしてのダッシュボード

ダッシュボードは、プロジェクトに関連する複数のビジュアライゼーションを整理および管理できる多用途のビジュアル ワークスペースとして機能します。これらは、データを効果的に探索、分析、表示するための動的で対話型の環境を提供します。

ダッシュボードのデータ構造

システム内のダッシュボードを表すには、次の 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;

主要な属性

• name: ダッシュボードの一意の識別子。
• projectName: コンテキスト リンクに関連付けられたプロジェクトの名前。
• 説明: ダッシュボードに関する追加のコンテキストまたは詳細を提供するオプションのフィールド。
• createdAt: ダッシュボードがいつ作成されたかを示すタイムスタンプ。
• updatedAt: ダッシュボードの最終変更を示すタイムスタンプ。
• ビジュアライゼーション: キーと値のペアまたはビジュアライゼーション タイプの配列として、ダッシュボードに含まれるビジュアライゼーションのコレクション。
• レイアウト: ダッシュボード内のビジュアライゼーションの位置とサイズを決定するレイアウト構成のリスト。各レイアウトには次のものが含まれます。
  • i: ビジュアライゼーションの一意の識別子。
  • x, y: グリッド上のビジュアライゼーションの位置を表す座標。
  • w, h: ビジュアライゼーションの幅と高さ。
  • minW、minH: 最小の幅と高さの制約。

ダッシュボードの機能

ダッシュボードを使用すると、ユーザーは次のことが可能になります。

• ビジュアライゼーションをドラッグ アンド ドロップして、ワークスペース内で再配置します。
• 特定のデータのニーズに合わせてビジュアライゼーションのサイズを変更します。
• さまざまなユースケースや対象者に対応するために、複数のレイアウトを維持します。

このような柔軟性を提供することで、ダッシュボードはユーザーがプロジェクトの要件に応じてビジュアル ワークスペースをカスタマイズできるようになります。

実践例