PDF

グラフィカルダッシュボード

graphical-dashboards

グラフィカルダッシュボードを使用すると、ライブデータウィジェットと動的なビジュアルで構成された、完全にカスタマイズ可能なパネルを構築できます。これらのダッシュボードはテーマに適応し、データの変更に応答し、リアルタイム監視とユーザーフレンドリーな操作を実現するインタラクティブな機能を提供します。

グラフィカルダッシュボードは、基本的なレイアウトを超えた、インタラクティブでレスポンシブな機能を幅広く提供します。このセクションでは、ダッシュボードでできること、特に目に見えない機能について詳しく説明します。

重複がないテーマ設定

各ダッシュボードは自動テーマ設定をサポートしており、ユーザーのインターフェーステーマ（ライトまたはダーク）に合わせて調整されます。同じダッシュボードを2バージョン作成する必要はありません。NetCrunchが色、背景、ウィジェットのスタイルを自動的にレンダリングします。

Theme Support

デフォルトでは、ダッシュボードは 自動モードになっており、閲覧者のアプリケーション設定に合わせて調整されます。ライトまたはダークモードを永続的に設定することもできます。

パネルのアダプティブズーム

ダッシュボードは、あらゆるサイズの画面できれいに表示されるように設計されています。アスペクト比に合わせて拡大縮小するだけでなく、自動ズーム オプションを使用すると、表示領域が動的に調整されます。:

  • 有効にすると、配置したウィジェットのみに焦点が当てられ、適切なパディングで中央に配置されます。
  • モバイルや画面の一部のみを表示する場合など、未使用領域を隠すのに適したダッシュボードになります。
Auto Zoomt

ウィジェットベースの可視化

ダッシュボードにはラベル、アイコン、図形などを追加できますが、真の力を発揮するのはデータにバインドされたウィジェットです。ウィジェットには以下の機能が含まれます:

  • 値パネル – 単一の指標を表示し、オプションでキャプションとアイコンを表示します
  • 値バー – 線形比較や閾値を表示します
  • ゲージ – 複数の表示モードを備えた視覚的なダイヤル（円形または線形）を表示します
  • ミニチャート – ウィジェット内に埋め込まれたトレンドチャートを表示します

ほとんどのウィジェットは、デフォルトで「テーマ」スタイルで挿入されます:

  • 背景とキャプションが含まれます
  • ダッシュボードの現在のテーマに自動的に合わせられます
  • 読みやすさを考慮して最適化された間隔とパディングを使用します

ウィジェットオプションの隠れたパワー

各ウィジェットには、機能ごとにグループ化された多くの強力なオプションが含まれています。これらのオプションは、ウィジェットをエディターで選択して展開しないと表示されない場合があります:

  • 状態ロジックの表示 – 色、矢印、塗りつぶしで状態を表示します
  • しきい値範囲 – 値の範囲に色帯を定義します
  • 変更インジケーター – 上昇/下降の傾向を視覚化します
  • アイコンのオーバーレイ – 背景を置き換えたり、アラートのようなビジュアルを追加したりできます
  • スケーリングと単位変換 – 生の値をリアルタイムで変換できます

これらのオプションを適切に設定することで、ウィジェットはよりインテリジェントになり、説明が不要になります。

クリック可能なライブエレメント

すべてのダッシュボードウィジェットはインタラクティブです:

  • 値ウィジェット または バー をクリックすると、ライブプレビュー 付きのツールチップが表示されます（例：トレンドやノードの状態）
  • ツールチップから、トレンドビューアー や ノードステータス を開いたり、アクションを実行したりできます
  • ビジュアルは、点滅、色の変化、アイコンの切り替えなど、リアルタイムの変化に反応します
Tooltip Chart

ダッシュボードは静的なものではなく、データに反応するライブコントロールパネルです。

スナップ、グリッド、レイヤー

エディターは、プロフェッショナルなデザインツールをバックグラウンドでサポートしています:

  • グリッドスナップ (切り替え可能)
  • 配置と間隔調整ツール
  • 最前面へ移動/最背面へ移動 によるレイヤー化
  • グループ選択と複数移動
  • 配置、複製、ロックのためのキーボードショートカット

これらの機能はFigmaやIllustratorなどのツールに似ていますが、デザイナーではなく管理者のワークフローに合わせてカスタマイズされています。

ビジュアルロジックと状態ベースのカスタマイズ

グラフィカルダッシュボードは、主に2種類のウィジェットをサポートしています:

データウィジェット

カウンタまたはステータスからのライブデータを表示します:

  • 値バー
  • ゲージ (直線または円形)
  • 折れ線グラフ
  • ノードアイコン
  • カメラスナップショット

データソース セクションがあり、ユーザーはここで以下の項目をバインドできます:

  • ノードまたはオブジェクト (例: センサー、インターフェース)
  • カウンタまたはメトリック (例: メモリ使用率、 トラフィック)
  • スケーリング、単位変換、四捨五入

ほとんどのウィジェットは、ライブデータのプレビューとトレンドビューアまたはノードアクションへのアクセスを含むツールチップをサポートしています。

参照ベースのウィジェット（ビジュアルエレメント）

これらはデフォルトでは静的ですが、ステータスを参照 にバインドされると動的になります:

  • 図形（長方形、三角形、ブロブなど）
  • アイコン (フォントベース)
  • シンボル (ベクタースタイルの画像)
  • 画像
  • 接続線
  • テキストとラベル

ユーザーは以下の11種類のオブジェクトタイプから選択できます:

  • ノード
  • インターフェース
  • センサー
  • その他のウィジェット
  • 監視パック
  • …その他

参照ウィジェットの設定

これらのエレメントを状態対応にするには、以下の手順に従います:

  1. 状態参照の割り当て
    • オブジェクトの種類を選択
    • ノードと関連オブジェクトを選択 (例: センサー)
  2. オブジェクトのステータスを選択
    • カスタマイズするステータスを選択 (OK, 警告, 危機, etc.)
  3. ビジュアルのカスタマイズ
    • 不透明度を変更（エレメント全体を非表示にすることもできます）
    • 塗りつぶし、線、ストローク、境界線を変更
    • 動的な色、アイコン、エフェクトを使用
    • 状態ごとにカスタマイズするか、一部のプロパティを共通にするかを設定

デフォルトのスタイルは提供されますが、ユーザーはすべてのビジュアルエレメントをオーバーライドできます。

Editing Reference Widget State

実際の状況に正確に反応する、形状またはアイコン主導のダッシュボードを構築できます。

アニメーションと効果

状態変化 をトリガーとしたアニメーションを追加できます:

  • アニメイト (例: 点滅、回転、脈動、鼓動、揺れなど)
  • 変換 (例: 反転、回転、拡大縮小)
  • トリガーモード (常時または状態変化時)

これらの繊細な効果は、障害が発生したリンクや過熱したノードなどの重要なエレメントへの注意を喚起するのに役立ちます。

Effects

実例

図形やアイコンは、次のような効果をもたらします:

  • センサーやスイッチを表示
  • 障害が検出されると赤色で点滅する
  • 無効になっている場合は非表示にする
  • アイコンまたはラベルのテキストを動的に変更する
  • クリックするとトレンドチャートやアラートの詳細を表示する

NetCrunch を使用すると、SCADA のような動作をはるかに少ない労力で構築できます。

ビジュアルリソース

ダッシュボードは、レイアウトと明瞭性を向上させる豊富なビジュアルライブラリをサポートしています。

画像 (写真)

画像は、背景図、ブランディング、またはビジュアルオーバーレイに使用できます。

画像は以下の場所に保存できます:

  • ドキュメント (ローカルでのみ表示)
  • 共有 (複数のビューで使用可能)
  • 公開 (組織内でグローバルに使用可能)

このシステムにより、重複が削減され、アセットの再利用が容易になります。

シンボル

シンボルは、IT 資産とサービスを表すベクター形式の画像です:

  • カテゴリ: Azure、Cisco、Google、VMware、AWSなど
  • 完全に検索可能でグループ化されています
  • アイコンというより画像のように扱われます (フォントベースではありません)
  • 必要に応じて色付けされますが、マルチカラーの外観は維持されます
Symbols

アイコン (フォントベース)

NetCrunchはFont Awesome経由で3,000個以上のアイコンをサポートしています。

  • スタイル：ライト、レギュラー、ソリッド
  • 背景の形状：円、六角形、正方形など
  • アイコンのサイズと位置を制御可能
  • バインド時に状態を反映可能
Icons

これらのアイコンは、コンパクトな状態インジケーターに最適です。

ベクターシェイプ

ベクターシェイプのフルセットが含まれています:

  • 幾何学的シェイプ：長方形、円、三角形
  • フローチャートエレメント：プロセス、判断、入力
  • 有機的なシェイプ：ブロブ、雲、コネクタ
Shapes

シェイプは自由に編集およびアニメーション化できます。また、システムの状態を反映することもできます。

インタラクティブ性

すべてのビジュアルエレメントは、以下のことが可能です:

  • 状態にバインド
  • ステータスごとにスタイル設定
  • クリックしてドリルダウン
  • 複合ウィジェットの一部として使用可能

シンプルなアイコンやシェイプは、アラートソースや動的なインジケーターとして使用できます。

編集の基本

グラフィカルダッシュボードには、選択、リンク、ウィジェット作成を効率化するツールを備えたビジュアルエディターが搭載されています。左側のツールバーには、状況に応じた3つのセレクターがあります:

  • 選択ツール – 既存のウィジェットを選択、移動、サイズ変更、編集します。
  • 接続ツール – 任意のウィジェット間の接続を作成します。
  • ウィジェット追加ツール (+) – ウィジェットギャラリーを開き、新しいビジュアルエレメントまたはデータエレメントを挿入します。

新しいウィジェットをキャンバスにドロップすると、エディターは自動的にフォーカスされた設定パネルを開きます。これにより、最初に何百もの設定を参照する必要がなくなります。

Adding Icon

例:

  • データウィジェット をドロップすると、ノードとカウンタを選択するためのダイアログが開きます。
  • アイコン をドロップすると、カテゴリフィルタリングと検索機能を備えたアイコンピッカーが起動します。

このアプローチにより、ビジュアルエディターに慣れていないユーザーでも直感的な操作が可能になります。

複数チャートの挿入

エディターはインテリジェントなチャート作成機能をサポートしています。グラフウィジェット を追加する際、以下の2つの柔軟な設定方法があります:

  • 単一ノードに複数のシリーズ – 1つのデバイス上の異なるカウンター（例：CPU、メモリ、ディスクI/O）を比較するのに便利です。
  • 複数ノードに単一のシリーズ – 複数のノード間で同じメトリック（例：帯域幅使用量）を比較します。

また、「別々のグラフに配置」オプションをオンにすると、それぞれに1つのシリーズが設定された複数のグラフウィジェットを一度に自動的に挿入できます。

これにより、視覚的な比較を迅速に作成でき、手作業による重複作業を回避できます。

コンテキストメニュー、ロック、パワーショートカット

NetCrunch のエディターには、Adobe XD や Illustrator などのデザインアプリケーションをモデルにした、高度なオブジェクト操作と選択ツールを表示する右クリックポップアップメニューがあります。

コンテキストメニューのアクション

ウィジェットを右クリックすると、以下の操作が表示されます:

  • 選択... – 特定の種類のウィジェットをすべて選択します（例：すべての図形、すべての長方形）。
  • 配置 – 端に揃える、中央に揃える、均等に配置ができます（以下の配置のショートカットを参照）。
  • サイズ変更 – サイズを最小または最大にします。
  • コピー/複製/削除
  • ロック – ウィジェットを固定し、誤って移動または編集されないようにします。
  • 最前面へ移動/最背面へ移動 – エレメントの視覚的な重なり具合を制御します。

ロックは、階層化されたダッシュボードや、画像や図形などの背景アセットに不可欠です。

配置のショートカット

NetCrunch は、配置操作に Adobe スタイルのショートカット を使用します:

  • Ctrl + Shift + 左 – 左揃え
  • Ctrl + Shift + 右 – 右揃え
  • Ctrl + Shift + 上 – 上揃え
  • Ctrl + Shift + 下 – 下揃え
  • Ctrl + Shift + C – 水平方向中央揃え
  • Ctrl + Shift + M – 垂直方向中央揃え
  • Ctrl + Shift + V – 垂直方向に均等配置
  • Ctrl + Shift + H – 水平方向に均等配置

これらのショートカットは、複数のウィジェットを選択した場合にも使用でき、レイアウトを素早く調整できます。

タイプベースの選択

コンテキストメニューから、特定のタイプのすべてのウィジェットを選択することもできます。

例:

  • すべての長方形
  • すべての図形
  • すべてのアイコンまたはグラフ

これにより、手動で選択することなく、複数のエレメントにスタイルやレイアウトの変更を簡単に適用できます。

ロックと配置を組み合わせることで、ユーザーは主要なビジュアルコンポーネントを間違えることなく、複雑なダッシュボード全体を素早く操作できます。

複数選択、ズーム、キャンバスコントロール

ダッシュボードエディターは、柔軟な複数選択、レイアウトの複製、ビューポートコントロールをサポートしており、複雑なデザインタスクを迅速に実行できます。

複数のエレメントの選択

複数のウィジェットを選択するには、いくつかの直感的な方法があります:

  • 選択長方形 – クリックしてドラッグし、青い長方形内のすべてを選択します。
  • Shift + クリック – 選択範囲に特定の項目を追加または削除します。
  • コンテキストメニュー → 種類で選択 – すべての長方形、すべての図形などを選択します。
  • Ctrl + A – ダッシュボード上のすべてを選択します。

これらのツールを使用すると、複数の項目を同時に移動、整列、スタイル設定するなど、効率的な一括操作が可能です。

キャンバスナビゲーション

キャンバスは、大きなビューのパンニングとズームをサポートしています:

  • Ctrl キーを押しながら背景をドラッグ – 表示されているキャンバス領域をパンニングします。
  • マウスホイール – スムーズにズームイン/ズームアウトします。
  • ズームスライダー（右上） – ズームレベルを手動で設定します。

これにより、大きなビューやバウンドレスビューを素早く自然にナビゲートできます。

コピー、貼り付け、複製

  • Ctrl + C / Ctrl + V – ビュー間の標準的なコピー＆ペースト
  • Ctrl + D – 選択したエレメントをその場で複製
  • Alt + ドラッグ – 元のエレメントを移動しながら複製を作成

エレメントに接続がある場合、複製されたバージョンでもそれらの接続が保持されます。これは、ステータスリンクされたレイアウトや構造化された図を手動で線を再接続することなく複製する場合に特に便利です。

ウィジェットは、複製または貼り付け時に構成と参照も保持されるため、共通の視覚エレメントやレイアウトを迅速に再利用できます。

これらの高度な選択機能とナビゲーション機能により、ダッシュボードのデザインは流動的で強力になり、正確な制御で豊富なビューを迅速に構築するのに最適です。

animated widgetsauto zoomdashboard themingdata widgetsdynamic iconsgraphical dashboardslive visualizationnetcrunch editornode tooltipreal-time monitoringshape stylingstate referencethemed widgetstrend popupvisual logic