KPIチャート

KPIチャート（template_type: 'KPI_CHART'）は、時系列の最新の指標を大きく表示します。 同じ時系列をスパークラインで表示し、前期間または前年の指標と比較できます。

事前にチャート設定についても確認してください。

設定例

日ごとの売上と前期間比を表示する場合、次のように設定します。

template_type: KPI_CHART
component_settings:
  primary_values:
    - field: sales
      aggregator: SUM
  trend_dimensions:
    - field: sales_date
  comparison_type: PRIOR_PERIOD
  comparison_direction: HIGH_IS_GOOD
display_settings:
  primary:
    prefix: 'Sales: '
    suffix: ' USD'
  trend:
    render_type: AREA
  comparison:
    format: PERCENT

primary_values は、trend_dimensions の時間ごとに集計されます。 KPIチャートは最新の時間に対応する集計値を主要な指標として表示します。

比較

comparison_type では、最新の指標と比較する対象を指定します。

値	比較対象
PRIOR_PERIOD	時系列内で最新の指標の直前にある指標
PRIOR_YEAR	最新の時間から1年前に最も近い時間に対応する指標

比較対象に近い指標が時系列内にない場合、比較は表示されません。

comparison_direction では、指標が良化する方向を指定します。

値	良化する方向
HIGH_IS_GOOD	指標が高くなる方向
LOW_IS_GOOD	指標が低くなる方向

表示設定

指標

display_settings.primary では、指標のフォントサイズ、前後の文字、数値の書式、条件付き書式を指定できます。

トレンド

display_settings.trend.render_type では、スパークラインの描画方法を指定します。 既定値は AREA です。

値	描画方法
AREA	面
LINE	折れ線
BAR	棒

display_settings.trend.color では、スパークラインの色を指定できます。

比較値

display_settings.comparison.format では、比較値の表示形式を指定します。 既定値は PERCENT です。

値	表示形式
PERCENT	変化率
ABSOLUTE	差分
BOTH	差分と変化率

型定義

trend_dimensions には、日付または日時を返すディメンションを1つ指定します。 primary_values には、数値を返すメトリクスを1つ指定します。

type ChartSettings = {
  template_type: 'KPI_CHART';
  component_settings: ComponentSettingsCommon & {
    primary_values: [MetricsField];
    trend_dimensions: [DimensionField];
    comparison_type: 'PRIOR_PERIOD' | 'PRIOR_YEAR';
    comparison_direction: 'HIGH_IS_GOOD' | 'LOW_IS_GOOD';
  };
  display_settings?: {
    primary?: {
      font_size?: number;
      prefix?: string;
      suffix?: string;
      formatter?: FormatterSettings;
      conditional_styles?: ConditionalStyles;
    };
    trend?: {
      render_type?: 'AREA' | 'LINE' | 'BAR';
      color?: PaletteColorName;
    };
    comparison?: {
      format?: 'PERCENT' | 'ABSOLUTE' | 'BOTH';
    };
  };
};