syncfusion-javascript-dashboard-layout

Syncfusion TypeScript Dashboard Layout の実装

DashboardLayout は、ドラッグやサイズ変更が可能なパネルを備えたインタラクティブなダッシュボードインターフェイスを作成できる、強力なグリッドベースのレイアウトコンポーネントです。動的なパネル管理、フローティングレイアウト、状態の永続化、メディアクエリによるレスポンシブ動作に対応しています。ユーザーはパネルの配置を変更したり、複数の方向にサイズを変更したり、レイアウト構成を保存・復元したりできます。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの依存関係
• HTML 属性またはスクリプトを使用したセットアップ
• 基本的なパネル構成（行、列、セル間隔）
• 最初のダッシュボードアプリケーションの実行

パネルの構成

📄 参照： references/panel-configuration.md

• パネルプロパティ（sizeX、sizeY、row、col）の定義
• パネルヘッダーとコンテンツテンプレート
• CSS クラスとスタイル設定
• プログラムによるパネルのサイズ指定と位置指定

パネルのドラッグと移動

📄 参照： references/dragging-and-moving.md

• ドラッグ機能の有効化／無効化
• ドラッグハンドル（draggableHandle）のカスタマイズ
• パネルの衝突検出と並べ替え
• ドラッグイベント（dragStart、drag、dragStop）

プログラムによるパネルの移動

📄 参照： references/moving-panels.md

• movePanel() メソッドを使用したプログラムによる位置指定
• パネルの入れ替えとレイアウトの再構成
• 優先度ベースおよび列ベースの配置
• 保存済みレイアウト構成の復元

パネルのサイズ変更

📄 参照： references/resizing-panels.md

• サイズ変更機能の有効化／無効化
• 設定可能なサイズ変更ハンドル（e-south-east、e-east、e-west、e-north、e-south）
• サイズ変更イベントとイベント引数
• resizePanel() メソッドによるプログラムでのサイズ変更

パネルの操作

📄 参照： references/panel-manipulation.md

• addPanel() によるパネルの動的な追加
• removePanel() によるパネルの削除
• removeAll() によるすべてのパネルの削除
• serialize() によるパネルレイアウトのシリアライズ

フローティングレイアウトとレスポンシブレイアウト

📄 参照： references/floating-and-responsive.md

• 空きスペースを自動的に埋めるフローティングの有効化
• レスポンシブな積み重ね動作のためのメディアクエリ
• セルのアスペクト比の設定
• さまざまな画面サイズに対応するアダプティブレイアウト

永続化と状態管理

📄 参照： references/persistence-and-state.md

• serialize() によるレイアウト構成の保存
• 保存された状態からのレイアウトの復元
• enablePersistence による状態の永続化
• ブラウザーセッション向けの localStorage 統合

イベント処理

📄 参照： references/events-handling.md

• ライフサイクルイベント（created、destroyed）
• DragStartArgs、DraggedEventArgs、DragStopArgs を使ったドラッグイベント
• ResizeArgs を使ったサイズ変更イベント
• パネル位置の更新を通知する Change イベント

API リファレンス全体

📄 参照： references/api-reference.md

• すべての DashboardLayout プロパティとその使い方
• すべての Panel プロパティと構成オプション
• 引数を含むすべてのイベントシグネチャ
• パラメーターと例を含むすべてのメソッド
• 型定義と列挙型

クイックスタート

import { DashboardLayout } from '@syncfusion/ej2-layouts';

// Initialize Dashboard Layout with 5 columns
let dashboard: DashboardLayout = new DashboardLayout({
    cellSpacing: [10, 10],
    columns: 5,
    panels: [
        { 
            'id': 'Panel1',
            'sizeX': 2, 
            'sizeY': 2, 
            'row': 0, 
            'col': 0, 
            content: '<div class="content">Panel 1</div>' 
        },
        { 
            'id': 'Panel2',
            'sizeX': 3, 
            'sizeY': 2, 
            'row': 0, 
            'col': 2, 
            content: '<div class="content">Panel 2</div>' 
        }
    ]
});

// Render to container
dashboard.appendTo('#dashboard_layout');

よく使われるパターン

パターン 1：完全なインタラクティブ機能を有効にする

const dashboard = new DashboardLayout({
    allowDragging: true,      // Enable drag and reorder
    allowResizing: true,       // Enable resize
    allowFloating: true,       // Auto-fill empty spaces
    cellSpacing: [10, 10],
    columns: 6,
    panels: [
        { 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 0, content: '<div>Widget 1</div>' },
        { 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 2, content: '<div>Widget 2</div>' }
    ]
});
dashboard.appendTo('#dashboard');

パターン 2：ドラッグイベントを処理する

const dashboard = new DashboardLayout({
    columns: 5,
    dragStart: (args) => console.log('Drag started on panel:', args.element),
    drag: (args) => console.log('Dragging panel...'),
    dragStop: (args) => {
        console.log('Drag completed. Modified panels:', args.panels);
    },
    panels: [...] // panel configuration
});
dashboard.appendTo('#dashboard');

パターン 3：レイアウトを保存・復元する

const dashboard = new DashboardLayout({
    columns: 5,
    panels: [...]
});
dashboard.appendTo('#dashboard');

// Save current layout
const savedLayout = dashboard.serialize();

// Later: Restore layout
dashboard.panels = savedLayout;

パターン 4：レスポンシブダッシュボード

const dashboard = new DashboardLayout({
    columns: 6,
    mediaQuery: '(max-width: 600px)',  // Stack panels below 600px
    enablePersistence: true,            // Remember user layout
    panels: [...]
});
dashboard.appendTo('#dashboard');

主要な概念

グリッドシステム

• パネルは row、col、sizeX、sizeY を使用してグリッド上に配置されます
• columns は使用可能なグリッド列の総数を定義します
• cellSpacing はパネル間の水平方向および垂直方向の間隔を制御します

パネルのサイズ設定

• sizeX：グリッドセル単位での幅（例：sizeX: 2 は幅が 2 列であることを意味します）
• sizeY：グリッドセル単位での高さ
• minSizeX/maxSizeX と minSizeY/maxSizeY：サイズ変更の範囲を制限します

操作

• ドラッグ：allowDragging = true の場合、パネルを並べ替えます
• サイズ変更：ハンドル（e-south-east、e-east など）を使ってパネルのサイズを変更します
• フローティング：allowFloating = true の場合、パネルが移動して空のセルを埋めます

イベント

• dragStart/drag/dragStop：ドラッグ操作を監視および制御します
• resizeStart/resize/resizeStop：サイズ変更操作を監視および制御します
• change：パネルの位置が更新されたときに発生します
• created/destroyed：ライフサイクルイベントです

DashboardLayout を使用する場面

✅ 最適な用途：

• 分析およびレポート用ダッシュボード
• カスタマイズ可能なウィジェットレイアウト
• データ監視インターフェース
• ユーザーが設定できる UI レイアウト
• リアルタイムデータ可視化ハブ

❌ あまり適していない用途：

• 静的で固定されたレイアウト
• シンプルなページレイアウト（CSS Grid または Flexbox を使用してください）
• 単一列のレイアウト

---

次のステップ：

1. ナビゲーションガイドからユースケースを選択します
2. 該当するリファレンスファイルを読みます
3. プロパティとメソッドの全ドキュメントを API リファレンスで確認します
4. 該当するシナリオのコード例を確認します

API ドキュメントの全体については、references/api-reference.md を参照してください。