Recharts

Warning

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

ReCharts は ReactJS 用のグラフィックライブラリです。アプリケーションに ReCharts を簡単に追加して設定することができます。

Recharts の設定

JSON で ReCharts を設定する場合、2 種類の属性を使用できます:

ネイティブ: すべての既存の ReCharts オプション
プラットフォーム: プラットフォーム機能とのさらにカスタマイズと統合を提供

Recharts の data フィールドは、チャート定義に提供された Analytics Manager の request の結果から自動的に埋められます。

プラットフォームの追加機能

fpFormat

fpFormat を使用して、軸に表示する内容をカスタマイズします。例えば:

"options": {
  "yAxis": [
    {
      "fpFormat": {
        "round": 2,
        "unit": "%"
      }
    }
  ]
}

これは measure のフォーマッターと同じ定義を使用します。また、既に定義されたフォーマッターを再利用することもできます。名前を指定するだけです。

"options": {
  "yAxis": [
    {
      "fpFormat": "pct"
    }
  ]
}

colors

colors を使用して、チャートで使用する色の配列を提供します。

"options": {
  "colors": ["#FF6F90", "#FACD30", "#9EDF10"]
}

i18n

i18n を使用して、そのチャートに専用の翻訳を提供します。これらの翻訳は、Analytics Manager の request に基づいて構築された ラベル、凡例および ツールチップ を作成するために使用されます:

field は data.fields および scale.fields で使用される名前
compute mode は data.fields など、select、sum、count、avg... で使用されます

以下のコードは、英語のチャートツールチップ内で sum を Sum of に、rides を Rides に置き換えます。

"options": {
  "i18n": {
    "en": {
      "sum": "Sum of",
      "rides": "Rides"
    }
  }
}

series

series を使用して、request からのデータシリーズに適用するオプションを定義します。これは Array of Object または Object (キーはフィールド定義、値はオプション) のいずれかです。 series の主要なオプションは次のとおりです:

名前	タイプ	説明
`_type`	文字列	使用する表示 (例: bar、line、area など)
`order`	数値	凡例およびツールチップで使用する順序

次の例では、yAxis は Recharts yAxis で説明されているように、Array で 2 つの Objects を定義する必要があります。それぞれが以下で使用される yAxisId を定義します。

"options": {
  "series": {
    "cumm_progress_actual_select_0": {
      "stroke": "rgb(97, 125, 233)",
      "color": "rgb(97, 125, 233))",
      "name": "Actual (Cum.)",
      "yAxisId": "right",
      "order": 1,
      "label": true
    },
    "cumm_progress_planned_select_0": {
      "color": "rgba(62,69,80,0.15)",
      "stroke": "rgba(62,69,80,0.15)",
      "name": "Plan (Cum.)",
      "yAxisId": "right",
      "order": 0,
      "label": true
    },
    "incr_progress_actual_select_0": {
      "fill": "rgb(97, 125, 233)",
      "color": "rgb(97, 125, 233)",
      "_type": "bar",
      "name": "Actual (Inc.)",
      "yAxisId": "left",
      "maxBarSize": 6,
      "radius": [5, 5, 5, 5],
      "order": 3
    },
    "incr_progress_planned_select_0": {
      "fill": "rgba(62,69,80,0.15)",
      "color": "rgba(62,69,80,0.15)",
      "_type": "bar",
      "name": "Plan (Inc.)",
      "yAxisId": "left",
      "maxBarSize": 6,
      "radius": [5, 5, 5, 5],
      "order": 2
    }
  }
}

tickStyle

xAxis または yAxis 内の tickStyle を使用して、tick (例: 軸レベルのラベル) に適用されるスタイルを定義します。

tickStyle の主要なオプションは次のとおりです:

名前	タイプ	説明
`x`	数値	水平オフセット
`y`	数値	垂直オフセット
`textAnchor`	文字列	表示される位置 (`start`、`middle`、`end`)
`fontSize`	数値	フォントサイズ
`fill`	文字列	テキストカラー

"yAxis": [
  {
    "yAxisId": "left",
    "tickStyle": {
      "x": -50,
      "y": -10,
      "textAnchor": "start",
      "fontSize": 11
    }
  }
]

tooltip を使用して、ツールチップスタイルをカスタマイズします。この設定は ./config/templates.json で一度に定義できます。

tooltip の主要なオプションは次のとおりです:

名前	タイプ	説明
`style`	オブジェクト	ツールチップボックス
`style-label`	オブジェクト	ツールチップタイトル
`style-content`	オブジェクト	ラベルとデータを囲むコンテナ
`style-name`	オブジェクト	フィールド名
`style-value`	オブジェクト	値

"tooltip": {
  "style": {
    "padding": "10px 20px",
    "minWidth": "200px",
    "backgroundColor": "white",
    "borderRadius": 10,
    "boxShadow": "0 10px 30px 0 rgba(151,167,183,0.3)",
    "textTransform": "capitalize"
  },
  "style-label": {
    "fontSize": 13
  },
  "style-content": {
    "display": "flex",
    "justifyContent": "space-between"
  },
  "style-name": {
    "fontSize": 13
  },
  "style-value": {
    "fontSize": 13,
    "fontWeight": 600
  }
}

サンプル

サンプル 1 (バーチャート)

これは、1 週間の曜日ごとの乗車回数の合計を表示するシンプルなバーチャートで、カスタムバーの色とスタイル付きの x 軸のティックです:

{
  "type": "chart",
  "chart": {
    "component": "recharts.bar",
    "request": {
      "data": {
        "fields": {
          "rides": ["sum"]
        }
      },
      "order": {
        "week_day": "asc"
      },
      "scale": {
        "fields": ["week_day"]
      },
      "dictionaries": ["week_day"]
    },
    "dynamic-parameters": ["filter_date"],
    "options": {
      "barSize": 12,
      "xAxis": {
        "tickLine": false,
        "tickStyle": {
          "fontSize": 11
        }
      },
      "legend": {
        "verticalAlign": "top",
        "align": "right"
      },
      "series": {
        "rides_sum": {
          "name": "Rides",
          "fill": "rgb(97, 125, 233)",
          "color": "rgb(97, 125, 233)",
          "radius": [5, 5, 0, 0]
        }
      }
    }
  }
}

このリクエストは、rides メジャーを week_day でスケーリングして合計し、series ブロックは結果のバーをスタイル付けします。Recharts Bar API の他のオプションを series オブジェクトに同じように追加できます。

サンプル 2 (バー/ラインチャート)

"options": {
  "barGap": 3,
  "barSize": 6,
  "i18n": {
    "en": {
      "select": ""
    }
  },
  "margin": {
    "left": 50,
    "right": 60,
    "top": 40
  },
  "yAxis": [
    {
      "yAxisId": "left",
      "domain": ["auto", "dataMax => (dataMax * 3)"],
      "fpFormat": {
        "round": 2,
        "unit": "%"
      },
      "tickLine": false,
      "axisLine": false,
      "mirror": true,
      "width": 200,
      "tickStyle": {
        "x": -50,
        "y": -10,
        "textAnchor": "start",
        "fontSize": 11
      }
    },
    {
      "yAxisId": "right",
      "orientation": "right",
      "fpFormat": {
        "round": 2,
        "unit": "%"
      },
      "tickLine": false,
      "axisLine": false,
      "mirror": true,
      "tickStyle": {
        "x": 30,
        "y": -10,
        "textAnchor": "start",
        "fontSize": 11
      }
    }
  ],
  "legend": {
    "verticalAlign": "top",
    "align": "right",
    "height": 60,
    "iconSize": 9
  },
  "series": {
    "cumm_progress_actual_select_0": {
      "stroke": "rgb(97, 125, 233)",
      "color": "rgb(97, 125, 233)",
      "name": "Actual (Cum.)",
      "yAxisId": "right",
      "order": 1,
      "label": true
    },
    "cumm_progress_planned_select_0": {
      "yAxisId": "right",
      "order": 0,
      "name": "Plan (Cum.)",
      "label": true,
      "color": "rgba(62,69,80,0.15)",
      "stroke": "rgba(62,69,80,0.15)"
    },
    "incr_progress_actual_select_0": {
      "_type": "bar",
      "yAxisId": "left",
      "order": 3,
      "name": "Actual (Inc.)",
      "fill": "rgb(97, 125, 233)",
      "color": "rgb(97, 125, 233)",
      "maxBarSize": 6,
      "radius": [5, 5, 5, 5]
    },
    "incr_progress_planned_select_0": {
      "_type": "bar",
      "yAxisId": "left",
      "order": 2,
      "name": "Plan (Inc.)",
      "fill": "rgba(62,69,80,0.15)",
      "color": "rgba(62,69,80,0.15)",
      "maxBarSize": 6,
      "radius": [5, 5, 5, 5]
    }
  }
}

サンプル 3 (パイチャート)

これは、シンプルなパイチャートの定義です:

 {
          "type": "chart",
          "chart": {
            "component": "recharts.pie",
            "request": {
              "data": {
                "fields": {
                  "rides": ["sum"]
                }
              },
              "order": {
                "week_day": "asc"
              },
              "scale": {
                "fields": ["week_day"]
              }
            },
            "dynamic-parameters": ["filter_date"]
          }
        }

これは表示します: シンプルなパイチャート

いくつかの追加を行うことで、このレイアウトを改善できます:

chart.request.dictionaries を追加して、Lakehouse Manager で定義されたラベルを使用して week_day を翻訳する
chart.options.series* を使用して、Recharts Pie configuration のいくつかを定義する
追加のプラットフォームオプションを使用する:
- radiusRatio を serue オブジェクトに追加: ラベルが描画される距離を制御する (デフォルトは 2.5)
- chart.options.labels を false に設定すると、ラベルが非表示になります
- chart.options.labels.minPercent が設定されている場合、その値より大きいもののみが表示されます

        {
          "type": "chart",
          "chart": {
            "component": "recharts.pie",
            "request": {
              "data": {
                "fields": {
                  "rides": ["sum"]
                }
              },
              "order": {
                "week_day": "asc"
              },
              "scale": {
                "fields": ["week_day"]
              },
              "dictionaries": ["week_day"]
            },
            "dynamic-parameters": ["filter_date"],
            "options": {
              "series": {
                "interval": 0,
                "label": true,
                "labelLine": true,
                "innerRadius": 10,
                "outerRadius": 60,
                "radiusRatio": 1.5,
                "endAngle": 360,
                "paddingAngle": 0,
                "cx": "50%",
                "cy": "50%"
              }
            }
          }
        }

カスタマイズされたパイチャート

Info

以前の Query Builder 機能で、自動的に時期比較 (例: 年間比較のダブルパイ) を生成する機能は、Analytics Manager では利用できません。2 つの期間を比較するには、それぞれ独自のリクエストを持つ 2 つのチャートコンポーネントを使用してください。

テンプレートを使用してストリームライン化

テンプレートを使用して チャートスタイル を定義することを強くお勧めします。同じ定義を繰り返しコピーするのではなく、これを行うには、例えば次のように ./config/templates.json に recharts オブジェクトを追加します:

{
  "recharts": {
    "cartesianGrid": {
      "stroke": "#f5f5f5",
      "vertical": false
    },
    "tooltip": {
      "style": {
        "padding": "10px 20px",
        "minWidth": "200px",
        "backgroundColor": "white",
        "borderRadius": 10,
        "boxShadow": "0 10px 30px 0 rgba(151,167,183,0.3)",
        "textTransform": "capitalize"
      },
      "style-label": {
        "fontSize": 13
      },
      "style-content": {
        "display": "flex",
        "justifyContent": "space-between"
      },
      "style-name": {
        "fontSize": 13
      },
      "style-value": {
        "fontSize": 13,
        "fontWeight": 600
      }
    },
    "xAxis": {
      "axisLine": false,
      "tickLine": false
    },
    "yAxis": {
      "tickLine": false,
      "axisLine": false,
      "mirror": true,
      "tickStyle": {
        "x": -8,
        "y": -10,
        "textAnchor": "start"
      }
    }
  }
}

Recharts#

#Recharts の設定

#プラットフォームの追加機能

#fpFormat

#colors

#i18n

#series

#tickStyle

#tooltip

#サンプル

#サンプル 1 (バーチャート)

#サンプル 2 (バー/ラインチャート)

#サンプル 3 (パイチャート)

#テンプレートを使用してストリームライン化