Chart HTML

Warning

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

Chart HTMLを使用すると、クエリ結果をHTMLフラグメントにフォーマットできます。これは、KPIなどの単一の値を表示するために一般的に使用されます。

Chart HTMLの設定例

この例では：

htmlコンポーネントを宣言します
requestは、datepicker動的パラメータで定義された期間のridesのsumを取得し、前年の値を取得します
optionsは、コンポーネントがレンダリングされる方法を説明します

{
  "component": "html",
  "request": {
      "data": {
          "fields": {
              "rides": ["sum"]
          }
      },
      "evol": {
          "scale": "year"
      }
  },
  "dynamic-parameter": [
      "datepicker"
  ],
  "options": {
      "template-name": "block",  // 'block', 'evol' or 'own'
      "template": "<h2>{scope.value} rides</h2>", // a custom template
      "class": "",  // a class name to be used by template
      "icon": "",   // may be used by templates
      "text": ""    // may be used by templates
  }
}

デフォルトテンプレート

次のテンプレートはすでに定義されており、template-nameとして設定できます。

block

<div class='block {scope.options.class}'>
    <i class="{scope.options.icon}"></i>
    <span class="value">{scope.value||0}</span>
    <span class="text">{scope.options.text}</span>
</div>

evol

<div class='block-evol {scope.options.class}'>
    <i class="{scope.options.icon}"></i>
    <span class="value">{scope.value||0}</span>
    <span class="{scope.evolClass}">{scope.evol}%</span>
    <span class="text">{scope.options.text}</span>
</div>

カスタムテンプレート

options.templateを使用して、カスタムHTMLフラグメントを定義できます。そのフラグメント内では、{}の間のすべての内容がscope変数が定義されたJavascriptとして解釈されます。

スコープ変数

scope変数は、次のフィールドを持つオブジェクトです：

value：定義されたルールでフォーマットされた結果の最初のフィールド
evol：リクエストにevolが定義されている場合、パーセンテージでの進化
evolClass：リクエストにevolが定義されている場合、スタイリング用のヘルパー、evol positiveまたはevol negativeのいずれか
options：テンプレートで使用する完全なchart.options
query_params：拡張されたダイナミックパラメータを使用したAnalytics Managerによって実行された完全なクエリ
response：Analytics Managerからのすべての結果を含む完全なレスポンス

Chart HTML#

#Chart HTMLの設定例

#デフォルトテンプレート

#block

#evol

#カスタムテンプレート