分析可視化のカスタマイズ: ダッシュボードとウィジェット。 DeepSee Web パート 2

コミュニティの皆さん、こんにちは！

DeepSee Web についてのパート 2 では、DSW のカスタマイズオプションについて説明します。  

カスタマイズには、ウィジェットのカスタマイズとダッシュボードパネルのカスタマイズの 2 種類があります。

_開発者コミュニティ分析におけるダッシュボードのカスタマイズ例。_

ウィジェットのカスタマイズ

 

DSW の各グラフウィジェットは、凡例、凡例要素、値、上位/全部の切り替えの要素によって調整することができます。

調整パネルは、グラフウィジェットの右上にあります。

ではその仕組みを見てみましょう。

 

凡例

小文字の「i」は凡例の切り替えを表します。 クリックすると凡例が表示/非表示になります。  また、凡例の特定の要素を表示/非表示にすることもできます。

 

上位行フィルタ

星ボタンは、上位/全部の切り替えボタンで、ピボットの最初の測定の上位 20 件フィルターを素早くオン/オフにできます。

ウィジェットに行数コントロールを導入すると、上位切り替えは上位/全部の値を自動的に使用するようになります。 当然、一般的な行カウント/列カウントコントロールを追加して、特殊な上位フィルタの動作を導入することも可能です。

値の切り替え

「V」は <s>vendetta</s> 値です。 クリックすると、行の値が表示/非表示になります。

ウィジェットのレイアウト

DSW は最初に DeepSee ダッシュボードリソースからウィジェットレイアウトを取得して、DSW 設定の列カウント（デフォルトは 12）とウィジェットの最小高さ（100）に合わせて拡大縮小されます。

ウィジェットのレイアウトは好みに合わせて移動して設定できます。 フィルタコントロールを配置する必要がある場合などには特に便利です（フィルタコントロールは、ウィジェットの代わりにダッシュボードにフィルタが配置される場合に自動的に表示されます）。

ダッシュボードパネルのカスタマイズ

DSW では、ダッシュボードパネルとタイル/カバーの外観をカスタマイズできます。

以下は、DeepSee ダッシュボードのクラシックパネルビューです。

 

DSW では、ダッシュボードパネルビューを 3 つの方法でカスタマイズできます（カスタマイズは設定で変更できます）。

 

Show images（画像を表示）をオンにすると、DeepSee の画像がダッシュボードカバーに表示されます。

すると、ダッシュボードパネルに画像が表示されます。

Show folders（フォルダを表示）を選択すると、同じダッシュボードパネルがフォルダで編成されます。

また、ダッシュボードカバーの色やサイズを調整し、対話型にすることができます。

ダッシュボードパネルの右下からタイルエディターを開きます。

ダッシュボード上の色、タイトル、画像を変更したり、ダッシュボードカバーの上にダッシュボードのウィジェットを配置したりできます。また、設定で、タイルの色テーマを確認できます。以下に例を示します。 これは、コミュニティ分析のコントラストテーマです。これは、同じダッシュボードパネルのメトロテーマです。

カスタマイズのデプロイ

デプロイについてはどうでしょうか。 設定やカスタマイズを開発からプロダクションソリューションに配布するには？

これを行うには、Settings（設定）メニューで現在のカスタマイズをエクスポートできます。

すべての設定が settings.json ファイルにエクスポートされるため、ターゲットプロダクションサーバーにデプロイすることができます。 DSW は、設定が含まれるファイルを /csp/dsw/configs/namespace.json ファイルで探します。

例: これは samples.json ファイルです。これを DSW インストールの /csp/dsw/config/samples.json に配置すれば、DSW がこのネームスペースのダッシュボードの設定を自動的に読み込むようになります。

尽きることのないカスタマイズ

デザイン、設定、調整などを行えるすべてのケースにおいて、カスタマイズが完成することは決してありません。 そのため、この分野において他の機能をご希望の場合は、課題をお送りいただくか、この機能を実装してプルリクエストをお送りください。

DSW の機能についてはさらに記事が追加されます。 パート 1 を読んで、今後の更新にご期待ください！