チャートを作成して編集する

このチュートリアルでは、最初のチャートを作成して編集し、ダッシュボードに追加する方法を学びます

目的

このチュートリアルでは、最初のチャートを作成して編集し、ダッシュボードに追加する方法を学びます。

チャートコンポーネントを作成して編集する

コンポーネントを追加する

Rides Analytics ダッシュボードに新しいコンポーネントを簡単に追加できます。そのためには、rides-analytics.json の配列 items にこの JSON オブジェクトを追加します。

{
  "type": "panel",
  "id": "rides-holidays-container",
  "sizeX": 37,
  "sizeY": 64,
  "row": 191,
  "col": 38,
  "items": [
    {
      "type": "chart",
      "chart": {
        "id": "chart-6930201",
        "component": "recharts.bar",
        "request": {
          "data": {
            "fields": {
              "avg_rides_per_day_per_station": ["select"]
            }
          },
          "scale": {
            "fields": ["cat_holiday"]
          }
        },
        "options": {}
      },
      "sizeX": 100,
      "sizeY": 54,
      "row": 6,
      "col": 0
    },
    {
      "type": "html",
      "content": "Rides variability on Holidays",
      "customclass": "chart-title",
      "sizeX": 100,
      "sizeY": 5,
      "row": 0,
      "col": 0
    }
  ]
}

この JSON は、チャート自体とそのタイトルを含む 2 つの項目を含むパネルを定義します。

チャート は、動作するためにリクエストが必要な特殊な項目です。チャートコンポーネントが読み込まれると、リクエストが実行され、チャートの種類に応じて結果が異なる方法で表示されます。このリクエストの形式は、Analytics Manager のクエリと同じです。Analytics Manager でリクエストを作成し、リクエスト ID をリクエスト自体の代わりに使用することもできます。この場合、上記の JSON の request を requestId に置き換える必要があります。

チャートの種類は、component キーで定義されます。Data Platform には、多くの種類のチャートがネイティブで利用可能ですが、独自のコンポーネントを作成することもできます。このガイドの次の部分で、その方法を説明します。この例では、recharts ライブラリを使用して新しい棒グラフを定義しました。このリクエストは、各祝日についての 1 日あたりの平均乗車回数を計算します。

最初は、チャートは次のように表示されます。

チャートをカスタマイズする

このチャートは recharts ライブラリで作成されているため、多くのプロパティを変更できます。

Info

完全なリストは、Recharts Bar ドキュメントページで利用可能です。

チャート設定 JSON からこれらのプロパティを渡すには、このチャートに関連する options キーを編集するだけです。例えば、棒のサイズを変更するには、以下のように options に barSize プロパティを追加します。

"options": {
  "barSize": 20
}

また、xAxis または yAxis プロパティを追加して軸をカスタマイズすることもできます。その後、Recharts Axis ドキュメントページで利用可能なプロパティを渡すことができます。例えば、YAxis のドメインとスケールを変更します。

"options": {
  "barSize": 20,
  "yAxis": {
    "domain": [
      2000,
      3800
    ],
    "scale": "linear"
  }
}

これらの変更の後、チャートは現在次のように表示されます。

チャート設定ファイルに戻り、タイトル設定 を説明するために 1 分間さかのぼります。このコンポーネントは、Data Platform でネイティブで利用可能です。content プロパティで HTML コードを記述できます。これは div でラップされます。customclass プロパティを使用して、この div にカスタムクラスを関連付けることができます。

上記で定義された JSON に関連付けられた HTML コードは次のとおりです。

<div class="html chart-title">Rides variability on Holidays</div>

Info

Technical Guide でカスタムチャートについてさらに学びます！

ダイナミックパラメータを作成して編集する

ダイナミックパラメータを使用すると、ユーザーはリクエストを飛行中に変更することで、1 つ以上のチャートと相互作用できます。

新しいダイナミックパラメータを作成するには、config/menus/sidebar.json を開き、containers オブジェクトの footer 項目の直上に次の JSON オブジェクトを追加します。

  {
    "id": "dyn-weekday",
    "items": [
      {
        "type": "html",
        "content": "Weekday",
        "customclass": "dyn-title"
      },
      {
        "type": "dynamic-parameter",
        "dynamic-parameter": {
          "type": "filter",
          "id": "dynamic-weekday",
          "dictionary": "week_day_label",
          "component": "selectbox",
          "placeholder": "Select Weekday",
          "multi": true
        },
        "style": {
          "paddingBottom": "10px"
        }
      }
    ]
  }

この JSON は、1 つ以上の曜日でチャートリクエストをフィルタリングできるダイナミックパラメータを定義します。

チャートと同じロジックに従います。

ここで、この設定を少し詳しく説明します。

type: このダイナミックパラメータがどのように使用されるかを示します。この場合はフィルタとしてです。これは、このダイナミックパラメータに関連付けられたチャートのいずれも、選択された曜日と一致する結果のみを表示するようにフィルタリングされます。
dictionary: このダイナミックパラメータに関連付けられたフィールドを設定します。
component: このダイナミックパラメータが関連付けられたコンポーネントを設定します。ここでは、selectbox コンポーネントです。
id: このオブジェクトをプラットフォーム内で参照するために使用され、このダイナミックパラメータをチャートにリンクするために一般的に使用されます。
placeholder: selectbox コンポーネントに固有のもので、selectbox 内にデフォルトで表示されるテキストを指定します。
multi: selectbox コンポーネントに固有のもので、true に設定すると複数のオプションを選択できます。

上記の JSON オブジェクトをコピーして貼り付けてこのダイナミックパラメータを定義すると、新しいコンポーネントがサイドバーに表示されます。

この新しく作成したダイナミックパラメータを実際に使用するには、チャートにリンクする必要があります。これは、チャートの設定を編集することで行えます。

config/dashboards/rides-analytics.json を開きます。
rides history chart を定義する JSON オブジェクトで、"dynamic-weekday" を dynamic-parameters 配列に追加します。
ページをリロードします。ダイナミックパラメータは現在、rides history chart にリンクされています。
曜日でチャートをフィルタリングするには、日を選択し、新しいデータで更新されるのを確認します。

Info

Technical Guide でダイナミックパラメータについてさらに学びます！

既存のコンポーネントの使用方法を学びました。これで、独自のカスタムコンポーネントを作成して、それを使用してユニークなダイナミックパラメータとチャートを作成する準備が整いました！

さらに学ぶ

当社のソリューションのトレーニングや技術的な実装についてのアシスタンスが必要な場合は、営業担当者にお問い合わせください、またはProfessional Services ページにアクセスして見積もりをリクエストし、専門家がプロジェクトを分析するようにしてください。

Data Platform を構築するチームと直接質問し、フィードバックを共有し、相互作用するには、専用の Discord チャネルを利用してください。

OVHcloud サービスについてサポートが必要な場合は、Help Centre でリクエストを作成してください。

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

チャートを作成して編集する#

#目的

#チャートコンポーネントを作成して編集する

#コンポーネントを追加する

#チャートをカスタマイズする

#ダイナミックパラメータを作成して編集する

#さらに学ぶ

チャートを作成して編集する

目的

チャートコンポーネントを作成して編集する

コンポーネントを追加する

チャートをカスタマイズする

ダイナミックパラメータを作成して編集する

さらに学ぶ