#目的

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

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

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

• 静的テキスト

• タブ付きブロックで、同じデータについて、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つずつあるのが理想的です。 私の例では、売上高を減らしたいです。

#情報

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

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

#高度なモード

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

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

:::

次の記事：スタイル

#さらに詳しく

当社のソリューションを実装するためのトレーニングまたは技術サポートが必要な場合は、営業担当者にお問い合わせください、またはこのリンクをクリックして見積もりを依頼し、当社のプロフェッショナルサービスの専門家にプロジェクトのカスタム分析を依頼してください。

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

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

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