条件付き書式

概要

• ビッグナンバーやテーブル内のセルの値、ゲージチャートのゲージ色に対して、条件付きで書式を設定することができます

型定義

• ConditionalStyles は配列で、先頭から順番に評価され、最初にマッチしたものが適用されます
• 各条件は ConditionalStyleItem で以下のように定義されます
  • 指定可能な style_type はチャートにより異なります
    • BG_* は背景色、 FONT_* は文字色、 GAUGE_* はゲージ色を変更します
  • value1 や value2 は文字列として指定しますが、比較対象の値が数値の場合は、数値に変換してから比較します

type ConditionalStyleItem =
  | {
      // 値ごとに背景色を変更（空文字や null の場合は背景色を変更しません）
      style_type: 'BG_BY_VALUE';
      operator?: never;
      value1?: never;
      value2?: never;
    }
  | {
      style_type:
        | 'FONT_SUCCSS' // FIXME: typo しているが互換性の問題でこの通り指定する必要がある (FONT_SUCCESS ではない)
        | 'FONT_WARNING'
        | 'FONT_DANGER'
        | 'BG_SUCCESS'
        | 'BG_WARNING'
        | 'BG_DANGER'
        | 'GAUGE_SUCCESS'
        | 'GAUGE_WARNING'
        | 'GAUGE_DANGER';
    } & (
      | {
          operator: 'EQ' | 'GT' | 'LT' | 'GTE' | 'LTE' | 'CONTAINS';
          value1: string;
          value2?: never;
        }
      | { operator: 'BETWEEN'; value1: string; value2: string }
      | { operator: 'ALL'; value1?: never; value2?: never }
    );

export type ConditionalStyles<T extends StyleType> = Extract<ConditionalStyleItem, { style_type: T }>[];

設定例

// 値が 100 の場合は、文字を成功色にする
[
  {
    style_type: 'FONT_SUCCSS',
    operator: 'EQ',
    value1: '100',
  },
];

// 値が 1.0 以上の場合は背景を成功色に、それ以外は警告色にする
[
  {
    style_type: 'BG_SUCCESS',
    operator: 'GTE',
    value1: '1.0',
  },
  {
    style_type: 'BG_WARNING',
    operator: 'ALL',
  },
];

// 値ごとに背景色を変更する
[
  {
    style_type: 'BG_BY_VALUE',
  },
];