Application SDK のチャート

Warning

再作業が予定されていますが、納期は未定です。 Front App SDK（ReactJS）と Front API SDK（NodeJS）の両方が置き換えられます。このページは現在のリリースを文書化し、正確であり、置き換えが出荷されるまで維持されます。これに対して書かれたコードは引き続き動作します。

Application SDK の文脈におけるチャートは、アプリケーションの文脈でデータをレンダリングする主な側面をまとめています：

Observe：変数が変更されたときに更新します。ForePaaS では、これを 動的パラメータ と呼びます。
Request：リクエストを構築し、結果を取得します。
Render：結果をレンダリングします。

Observe

チャートは dynamic-parameters にリンクされている可能性があります。

以下の例では、chart は datepicker で選択した異なる日付範囲または selectbox で選択した異なる city の場合に更新されます。 not-nullable-dynamic-parameter は、このパラメータに値を指定してレンダリングする必要があることを示しています。

{
  "chart": {
    "dynamic-parameters": [
      "datepicker",
      "city"
    ],
    "not-nullable-dynamic-parameters": [
      ""datepicker"
    ],
    "component": "echarts"
  }
}

Warning

dynamic-parameters は、以前に作成した dynamic-parameter の id をリストします。

その他に設定することはありません。このチャートは、動的パラメータ で行われたすべての変更を observe し、必要に応じて自動的に新しいリクエストを実行し、レンダリングします。

Request

request は、Analytics Manager と同じ形式を使用します。

{
    "chart": {
        "component": "echarts",
        "request": {
            "data": {
                "fields": {
                    "quantite": [
                        "sum"
                    ]
                }
            },
            "scale": {
                "fields": [
                    "year",
                    "month",
                    "city"
                ],
                "axis": {
                    "x": [
                        "year",
                        "month"
                    ],
                    "y": [
                        "city"
                    ]
                }
            },
            "evol": {
                "scale": "year"
            }
        }
    }
}

Render

ここでは、component と options が関心のあるパラメータです。

"chart": {
    "component": "echarts",
    "options": {
        "title": {
            "text": "Nombre de visites mensuelles"
        }
    },
    "request": {},
    "dynamic-parameters": [],
    "not-nullable-dynamic-parameters": []
}

component：チャートモジュールは、登録されたコンポーネントを検索します。この場合は echarts で、自分自身をレンダリングするために必要なすべての情報を渡します。また、独自の Custom Chart Component を作成することもできます。
options：各コンポーネントに固有の追加パラメータで、このコンポーネントに渡されて動作とレンダリングをカスタマイズします。

Putting it together

{
    "component": "echarts",
    "dynamic-parameters": [
        "datepicker"
    ],
    "options": {
        "title": {
            "text": "Monthly visitors"
        }
    },
    "request": {
        "data": {
            "fields": {
                "vists": [
                    "sum"
                ]
            }
        },
        "scale": {
            "fields": [
                "year",
                "month",
                "category"
            ],
            "axis": {
                "x": [
                    "year",
                    "month"
                ],
                "y": [
                    "category"
                ]
            }
        }
    }
}

Application SDK のチャート#

#Observe

#Request

#Render

#Putting it together

Application SDK のチャート

Observe

Request

Render

Putting it together