ダッシュボードのテーマ#

テーマはチャートの背景、文字色、装飾、カテゴリと数値のパレット、ステータス色、書体、補助要素、テーブル、マークのスタイルを制御します。表示だけを変更し、クエリのデータは変更しません。

テーマの優先順位#

より近い場所で明示的に指定した設定を優先します。

1. チャートの theme="slug" 属性。

2. ダッシュボードのフロントマターの theme:。

3. 組織のデフォルト。

4. 組織のデフォルトがない場合は supernova。

組み込みテーマ#

テーマを開くと、同じサンプルダッシュボードで各組み込みテーマをプレビューし、組織のデフォルトを設定できます。

特定のモード専用のテーマは、対応するモードで作成時のパレットを使います。アプリを反対のモードに切り替えると、元に戻すまでダッシュボードは Supernova のライトまたはダークテーマを使います。両モード対応のテーマは、どちらでも独自のパレットを維持します。

ステータス色#

系列のパレットとは別に、各テーマは良好、不良、警告、中立の 4 つの意味を表す色を持ちます。これらは値が何を意味するかを示します。大きな数値の変化もこの色で良し悪しを示しますが、符号も必ず表示するため、色だけに意味を頼りません。

ステータス色を系列の色として使うことはありません。どのコンポーネントのプロパティでも、系列にステータス色を割り当てることはできません。「良好」の色を付けた系列が、数値の意味と矛盾するのを防ぐためです。

ステータス色を設定していないテーマでは、独自のパレットから 4 色を導出します。良好、不良、警告には、緑、赤、琥珀色に最も近い系列色の色相を使い、文字として読める明度に調整します。中立にはテーマの補助文字色を使います。そのため組織独自の緑を維持でき、ステータス色の導入前に作成したテーマファイルも変更せずに使えます。

明示的に指定した色も導出した色も、保存時に同じ 2 つの規則で検証します。

系列の色を固定する#

デフォルトでは、各チャートは自身の結果に系列が現れる順にパレットの色を割り当てます。そのため、同じ項目を異なる順序で表示する 2 つのチャートでは色が変わります。フィルターで系列がなくなると、残った系列の色の割り当ても移動します。

重要な項目の色を固定すると、どちらも起こらなくなります。

{
  "seriesSlots": { "Northern region": 1, "Southern region": 4 }
}

固定した系列は、その名前を使うすべてのチャートで指定の色を使います。線、棒、ドーナツの区分、凡例の色見本、ツールチップ、compare の過去の表示に適用されます。名前の照合では大文字と小文字、および前後の空白を無視します。固定していない系列は、固定済みの色を飛ばし、各チャートの順序に従います。ただし、固定した系列でもチャートで 9 位以下なら、ほかの系列と同様に「その他」にまとめられます。この区分には独自の色があり、表示名は「その他」です。色を指定するには、seriesSlots で設定キーの Other を固定してください。

フィルターで系列がなくなっても維持されるのは、明示的に固定した割り当てだけです。ページ全体で自動的に割り当てる方式では、両方の条件を同時に満たせません。表示中の系列に依存しない割り当ては名前だけで決める必要があり、8 色しかなければ同じチャートの 2 つの名前が同じ色になる場合があります。重複を避けるには表示中の名前を把握する必要があるため、集合が変わると順序も動きます。重要な項目を名前で指定すれば、両方の性質を満たせます。

組織のテーマを作成する#

テーマを編集を選び、組み込みテーマを基にブランドカラーと表示の設定を入力します。ステータス色と系列の色の固定もここで設定できます。保存すると、データリポジトリにテーマファイルを書き込みます。組み込みテーマのスラッグは予約されており、上書きできません。

保存のたびに、コントラスト、色覚の違いによる識別性、数値のグラデーション、必須モード、ステータスの読みやすさと良好・不良の区別、固定した色の重複、定義済みのテーマスキーマを検証します。無効なテーマは描画時に崩れるのではなく、違反した規則を示して保存を拒否します。

1 つのチャートだけ上書きする#

<Chart data={revenue-daily} type="bar" x="day" y="revenue" theme="mercury" />

データに応じてページのほかの部分と異なる表示が必要なら、チャート単位で上書きします。パレットの色は、テーマに固定の割り当てがあればそれに従い、なければチャート内の系列の順序に従います。