レイアウトと編集モード

Cockpit はレスポンシブな 12 列グリッドシステムを使用します。ウィジェットはグリッド位置にスナップし、ピクセルレベルの調整なしできれいに整列されたダッシュボードを簡単に構築できます。

編集モードの開始と終了

ツールバーの Edit ボタンをクリックして編集モードに入ります。グリッドが表示され、各ウィジェットにドラッグハンドルとリサイズハンドルが表示されます。

編集モードが有効。ドラッグハンドルが各ウィジェットの上部に、リサイズハンドルが右下隅に表示されます。

Edit を再びクリックして編集モードを終了し、ウィジェットの位置をロックします。 編集モードを終了してもダッシュボードは保存されません。更新 または 名前を付けて保存... をクリックするまで、ダッシュボード名の横に 未保存の変更 チップが表示されたままになり、ページを離れる前にOpSeeが確認します。未保存の変更を参照してください。

ドラッグアンドドロップで再配置

ウィジェットをドラッグハンドル(上部エリア)でつかみ、グリッド上の新しい位置に移動します。他のウィジェットは自動的に移動してスペースを作ります。ウィジェットを離して所定の位置に配置します。

ウィジェットを新しいグリッド位置にドラッグします。プレースホルダーは、リリース時にウィジェットがどこに着地するかを示します。

ウィジェットのリサイズ

ウィジェットの右下隅のハンドルをドラッグしてサイズを変更します。ウィジェットはタイプの制約に基づいて有効な列幅と行高さにスナップします。

ウィジェットの右下隅のリサイズハンドル。許可された制約内で幅と高さを調整するためにドラッグします。

サイズ制約

各ウィジェットタイプには 12 列グリッド上で事前定義された許可される幅があります。高さは最小および最大の境界内で調整できます。

ウィジェットタイプ	許可される幅(列)	デフォルトサイズ	最小高さ
KPI Cards	3、4、または 6	3 x 2	2 行
Doughnut Charts	3、4、6、または 12	4 x 3	3 行
Bar Charts	3、4、6、または 12	6 x 4	3 行
Line Charts	4、6、または 12	6 x 4	3 行
DataGrid Tables	6 または 12	12 x 6	4 行
Timeline	6 または 12	12 x 4	3 行

3 列の KPI カードは 1 行に 4 つ収まります。ダッシュボードの上部のサマリー行に最適です。6 列のチャートは 2 つ並んで収まります。DataGrid テーブルはデフォルトで最大の読みやすさのためにフル幅です。

垂直コンパクション

グリッドは垂直コンパクションを使用します。ウィジェットを移動または削除すると、その下のすべてのウィジェットが上方向にシフトしてギャップを埋めます。これにより、ウィジェット間に空の行のないコンパクトなダッシュボードが維持されます。

ヒント

最初にすべてのウィジェットを追加し、その後編集モードに入って 1 セッションで再配置します。これは追加するたびに位置を変更するよりも高速です。

一度に複数のウィジェットを追加

Add Widget ダイアログを開くと、ウィジェットを 1 つずつまたは一括で追加できます。ウィジェットを追加した後、ダイアログは開いたままで、より多くの参照と追加ができます。各新規ウィジェットは自動的にグリッドの次の利用可能な位置に配置されます。

ヒント

これを使用して新しいダッシュボードをすばやく作成します。Add Widget ダイアログを開き、必要なすべての KPI カードを追加してから、チャートとテーブルを追加します。ダイアログを閉じて編集モードに入り、すべてを一度に配置します。

グリッドブレークポイント

Cockpit は異なる画面サイズに適応します。大画面では完全な 12 列グリッドが利用可能です。小画面では列数が自動的に削減されます:

画面サイズ	列
大(デスクトップ)	12
中(タブレットランドスケープ)	12
小(タブレットポートレート)	6
極小(電話ランドスケープ)	4
最小(電話ポートレート)	2

ウィジェットは利用可能な列に合わせてリフローします。6 列画面の 6 列チャートは自動的にフル幅になります。

次のステップ

• フィルターを構成する -- 時間範囲、機器、リフレッシュ間隔を設定
• レイアウトを保存する -- 配置を名前付き構成として永続化

前提条件

• Cockpit Overview
• Introduction — OpSee の全体像を把握する

関連

• OEE Fundamentals
• Production — 補完的なモジュール