테마 · Sixtyfold Components

@sixtyfold/themes는 라인 및 스톡 차트를 위한 불변의 차트 전용 외형 프리셋을 제공합니다. 프리셋은 차트 배경, 그리드, 축, 툴팁, 선택, 범위 선택기 및 시리즈 또는 캔들 색상을 스타일링합니다. 애플리케이션은 데이터, 레이블, 단위, 형식, 지역화 및 동작에 대한 소유권을 계속 유지합니다.

테마 적용

차트별 진입점을 사용하면 Line 애플리케이션이 Stock에 의존하지 않고 그 반대도 마찬가지입니다:

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

applyLineTheme(lineChart, "mainframe");

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

applyStockTheme(stockChart, "default");

테마 식별자는 런타임에서 안정적인 값입니다. default 식별자는 Midnight를 선택합니다. 프리셋 및 카탈로그 값은 불변이며 읽기 전용으로 취급하세요.

이 웹사이트의 테마

이 웹사이트는 다크 테마 7종과 라이트 테마 7종을 제공합니다:

다크	라이트
`default` — 미드나이트	`porcelain` — 포슬린
`mainframe` — 메인프레임	`azulejo` — 아술레주
`blueprint` — 블루프린트	`riviera` — 리비에라
`arizona` — 애리조나	`bauhaus` — 바우하우스
`neon` — 네온	`washi` — 와시
`shibuya` — 시부야	`botanica` — 보타니카
`arcology` — 아콜로지	`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로 밝음 및 어두움 선택을 그룹화하세요.

차트 의미 유지

라인 테마는 인덱스별로 반복되는 시리즈 팔레트를 적용합니다. 시리즈 유형, 스태킹, 레이블, 단위, 포매터는 애플리케이션 설정에 유지하세요. 구조적 설정이 width: 0처럼 범위 중앙이나 경계를 숨기는 외형 값을 사용할 경우 테마를 변경한 뒤 해당 설정을 다시 적용하세요.

테마는 차트 텍스트를 번역하지 않으며 document.lang 또는 document.dir을 변경하지 않고 캔버스 외부의 컨트롤 스타일을 변경하지 않습니다.

전체 API는 생성된 Theme functions, types, 및 constants를 참조하세요.