テーマ · Sixtyfold Components

@sixtyfold/themesはLineおよびStockチャート向けのイミュータブルでチャート専用の外観プリセットを提供します。プリセットはチャート背景、グリッド、軸、ツールチップ、選択、範囲セレクター、シリーズやローソク足の色をスタイリングします。アプリケーションはデータ、ラベル、単位、フォーマット、ローカライゼーション、動作の所有を保持します。

テーマを適用する

LineアプリケーションがStockに依存せず、その逆もないようにチャート専用のエントリーポイントを使用します:

import { applyLineTheme } from "@sixtyfold/themes/line";

applyLineTheme(lineChart, "mainframe");

import { applyStockTheme } from "@sixtyfold/themes/stock";

applyStockTheme(stockChart, "default");

テーマ識別子はランタイムで安定した値です。default識別子はMidnightを選択します。プリセットとカタログ値は凍結されており、読み取り専用として扱ってください。

このウェブサイト上のテーマ

このウェブサイトでは7つのダークテーマと7つのライトテーマを提供しています:

Dark	Light
`default` — Midnight	`porcelain` — Porcelain
`mainframe` — Mainframe	`azulejo` — Azulejo
`blueprint` — Blueprint	`riviera` — Riviera
`arizona` — Arizona	`bauhaus` — Bauhaus
`neon` — Neon	`washi` — Washi
`shibuya` — Shibuya	`botanica` — Botanica
`arcology` — Arcology	`newsprint` — Newsprint

選択が保存されていない場合、ウェブサイトはライトのブラウザ設定ではAzulejoを、そうでなければMidnightを使用します。パッケージはこの同じ14テーマのカタログをエクスポートしており、アプリケーションはインターフェースに合う任意のサブセットを公開できます。

セレクターを作成する

識別子とラベルはカタログから読み、重複して保持しないでください:

import {
  PUBLIC_THEME_IDS,
  getLineThemePreset,
} from "@sixtyfold/themes/line";

const choices = PUBLIC_THEME_IDS.map((id) => {
  const preset = getLineThemePreset(id);
  return {
    id: preset.id,
    label: preset.label,
    colorScheme: preset.colorScheme,
  };
});

idを永続化し、labelを表示し、colorSchemeでライトとダークの選択をグループ化します。

チャートの意味を保持する

Lineテーマはインデックスごとに繰り返すビジュアルなシリーズパレットを適用します。シリーズの種類、スタッキング、ラベル、単位、フォーマッターはアプリケーション設定に保持してください。構造的な設定がwidth: 0のような外観値を使用して範囲の中心や境界を非表示にする場合は、テーマ変更後にその設定を再適用してください。

テーマはチャートのテキストを翻訳せず、document.langやdocument.dirを変更せず、キャンバス外のコントロールをスタイルしません。

生成されたTheme functions、types、およびconstantsを参照して完全なAPIを確認してください。