#目的

プラットフォームでは、利用可能なグラフィカルコンポーネントのセットを使用して、カスタム分析アプリケーションを作成できます。レストアの管理と組織化は、アプリケーションのダッシュボードタブで中央集権的に行われます。 このタブでは、さまざまな種類のコンテンツを含むダッシュボードをリスト、追加、編集できます。

• アプリケーションにインストールされたさまざまな拡張機能からのグラフィカル表現

• グラフィックにリンクできる動的パラメータで、表示されるデータをインタラクティブにすることができます

• 静的テキスト

• タブ付きブロックで、同じデータについて、1つのグラフィカル表現から別のグラフィカル表現に移動することができます

• 表示条件がある場合やない場合でも、さまざまな種類のコンテンツを含むことができるブロック

• ユーザーがクリックするとアクティブになるポップイン

• 現在のプロジェクトに特化したコードの統合

#初めてのダッシュボードを作成する（ポイント＆クリック）

始める前に、まずアプリケーションが既にデプロイされている必要があります。 そのためには、ReactJS - Dashlabアプリケーションから始めることができます。例えば、自動ビルドとデプロイを使用できます。 この例では、同じアプリケーションテーマからスクリーンショットが撮影されています。

#メインサcreenとダッシュボードの作成

始めるには、アプリケーションの概要画面に移動します。

この画面から、「ダッシュボード」を選択します。

この画面から、新しいダッシュボードを作成したり、削除したり、編集したりできます。 現在は、新しいダッシュボードの作成に焦点を当てます。

1. 画面で「新しいダッシュボード」を選択します。
2. 名前を付けます。例えば、「私の最初のダッシュボード」です。

このダッシュボードのURL（アプリケーションが本番環境にある場合にURLに表示される）は、自動的に入力されます。 編集することができますが、ユニークである必要があることを覚えておいてください。2つのダッシュボードは同じURLを持つことはできません。 説明欄は任意ですが、アプリケーションをよりよくドキュメント化するのに役立ちます。

「高度なモード」は（意図的に）通過しません。これは、ダッシュボードのデフォルト動作を変更するオプションです。このデフォルトモードは、初めての場合には完璧ですので、変更する必要はありません。

#新しいダッシュボードを編集する

#ダッシュボードにリンクを追加する

ダッシュボードが作成されると、新しいブロックにマウスをかざして「編集」をクリックすることで、編集モードに入ることができます。

ページの右上に「フルスクリーン」モードが利用可能です。このモードから、このチュートリアルの次の手順のスクリーンショットが撮影されます。

ダッシュボードは空です！そして何よりも、そのダッシュボードにアクセスするリンクがなければ、そのページにいない場合があります。

まず、ダッシュボードにアクセスするためのメニューにリンクを作成する必要があります。

そのためには、左列の「+」ボタンを使用します。 「基本UI」を選択し、「リンク」を選択します。 リンクエディタに移動します。

画面に表示されるテキストを入力できます。 例: 「私の最初のダッシュボード」。 URLフィールドでは、前の手順で変更していない場合は、「my-first-dashboard」を選択します。 また、「ナビゲーション」をアクティブに切り替えるために選択します。 これにより、リンクの色が変わり、アクティブページであることを示します。 その他のフィールドは任意ですが、リンクをさらにカスタマイズできます。 この例では、「アイコン」に「fa fa-dashboard」を追加するだけです。 これは、ライブラリ Font Awesome 4 のアイコンに対応しています。

確認すると、リンクが左のメニューに表示されます！

#ダッシュボードにチャートを追加する

ページはまだ空です：最初の考えは、グラフィックを追加することかもしれませんが、それは正しいです... しかし、すべてを「よりきれいに」するために、まず「パネル」を追加することにします。 これにより、アプリケーションの「グレー」の背景ではなく、白い背景でチャートを表示できます。 そのためには、画面の上部の「+」をクリックします。

「コンテナ」を選択し、「パネル」を選択します。 次に、マウスをパネルの上に置いたときに利用可能な矢印を使用して「パネル」を展開します。

このパネルの「+」を選択し、「チャート」を選択して、この「パネル」内に最初のグラフを追加します。

#チャートの設定

Chart editor tabs

#タイプ

次に、チャートエディタに移動します。 まず、チャートの種類を選択する必要があります。

この例では、「Morris - Donut」を選択します。

:::info Morrisはオープンソースライブラリで、提供されるドーナツはかなり良いですが、そのカスタマイズ性は低いです。

#オプション

新しいタブが表示されました！ これは「オプション」タブです。 このタブは常に存在するわけではなく、一部のライブラリは（まだ）クリックカスタマイズを提供していません。

このタブでは、ドーナツの色をカスタマイズできます。 デフォルトテンプレートは十分にカラフルですので、色を変更する場合は変更してくださいが、必要はありません。

#クエリ

このタブでは、Analytics Managerで実行されたクエリにグラフをリンクできます。 この操作を試したことがある場合は、「クエリを選択」をクリックします。

そうでない場合は、「カスタムクエリ」を選択し、インターフェースを直接使用してクエリを作成します。

「きれいなドーナツ」を表示するには、「データ」が1つ、「スケール」が1つであることが理想的です。 私の例では、売上高を減らしたいです。

#情報

このセクションでは、チャートに名前と説明を付けることができます（任意）。 例として、フィールド名に「私の最初のチャート」と入力します。

「リンクされた動的パラメータ」も見つかります。 この設定により、グラフを日付選択または選択ボックスに接続し、グラフによって表示されるデータを動的にフィルタリングできるようになります。

#高度なモード

この高度なモードでは、チャートの設定JSONファイルを直接編集できます。 以前に使用したすべての画面はこのJSONに関連しており、このJSONを使用してすべての可能な設定を実行するインターフェースはまだありません。

確認すると、グラフが表示されます！

:::

次の記事: スタイル

#さらに詳しく

トレーニングや技術的なアシスタンスを実装するために、営業担当者に連絡するか、プロフェッショナルサービスページにアクセスして、見積もりを依頼し、専門家によってプロジェクトを分析してもらいます。

質問をする、フィードバックを提供し、Data Platformを構築するチームと直接やり取りするには、専用のDiscordチャネルにアクセスしてください。

OVHcloudサービスについてサポートが必要な場合は、ヘルプセンターでリクエストを作成してください。

ユーザーコミュニティに参加してください。