프레임워크 어댑터

Sixtyfold의 프레임워크 패키지는 동일한 LineChart 및 StockChart 엔진을 감싸는 얇은 라이프사이클 어댑터입니다. 이들은 렌더링 로직을 복제하거나 데이터를 재구성하거나 런타임 텔레메트리를 추가하거나 모든 차트를 애플리케이션으로 끌어오지 않습니다.

사용 중인 엔진과 함께 어댑터 하나를 설치하세요. /line 또는 /stock 진입점만 가져오면 됩니다:

pnpm add @sixtyfold/react@1 @sixtyfold/line@1

import { SixtyfoldLineChart } from "@sixtyfold/react/line";

react을(를) vue, angular, svelte 또는 solid로 교체하십시오. 스톡 차트의 경우 @sixtyfold/stock를 설치하고 /stock를 임포트하세요. 차트 엔진은 어댑터의 선택적 피어 종속성이므로 라인 차트를 설치해도 스톡은 설치되지 않습니다.

공유된 어댑터 계약

모든 어댑터는 컴포넌트가 마운트된 후 차트를 생성하고 initialize()를 기다리며 반응형 입력을 적용하고 언마운트 시 destroy()를 호출합니다. 이 작업은 차트 Worker를 종료하고 옵저버, 리스너, 대용량 버퍼 참조를 해제하기도 합니다. SSR 중에는 컴포넌트가 캔버스 호스트만 내보내므로 서버에서 차트 픽셀을 그려야 할 경우 @sixtyfold/ssr를 사용하세요.

프롭/입력	라인 타입	스톡 타입	동작
`options`	`LineChartOptions`	`StockChartOptions`	구성 시점 스냅샷입니다. 어댑터를 교체하려면 다시 마운트하고, 실시간 시각 변경은 `appearance`를 사용하세요.
`data`	`TimeSeriesData \| MultiSeriesData`	`OHLCVData`	일회용 전송 가능한 대용량 데이터로, 객체 동일성에 따라 반응합니다. 항상 새로운 객체로 새 버퍼를 할당하세요.
`dataUpdateOptions`	`LineDataUpdateOptions`	—	애니메이션된 선 데이터 교체를 제어하며, `preservePreviousFrame`를 포함합니다.
`appearance`	`DeepPartial<LineAppearanceOptions>`	`DeepPartial<StockAppearanceOptions>`	차트나 데이터를 재생성하거나 교체하지 않고 깊은 시각 패치를 적용합니다.
`viewport`	`Partial<Viewport>`	`Partial<Viewport>`	반응형 X 범위입니다. 차트의 X 단위에 `xMin`, `xMax` 또는 둘 다를 제공하세요.
`viewportAnimated`	`boolean`	`boolean`	해당 뷰포트 업데이트에 대한 애니메이션을 재정의합니다. 차트 옵션을 상속하려면 정의하지 않은 상태로 두세요.
`statsIntervalMs`	`number`	`number`	밀리초 단위의 최소 텔레메트리 콜백 간격; 리스너가 없으면 텔레메트리는 비활성 상태로 유지됩니다.
readiness 콜백/이벤트	`LineChart`	`StockChart`	`initialize()`가 해결된 후 한 번 발생하며 명령형 차트를 노출합니다.
error callback/event	`unknown`	`unknown`	구성 오류, 렌더러 초기화/런타임 실패 및 오버레이 해결 또는 전달 실패를 보고합니다.
stats callback/event	`LineChartStats`	`StockChartStats`	렌더러 및 데이터 텔레메트리를 `statsIntervalMs`에 보고합니다.
series-visibility callback/event	`SeriesVisibilityChangeEvent`	—	초기화, API 호출 및 인터랙티브 범례에서 발생한 가시성 변경을 보고합니다.

모든 어댑터는 준비 완료, 구성, 렌더러 및 오버레이 오류와 렌더 통계를 보고합니다. 선형 어댑터는 또한 SeriesVisibilityChangeEvent를 보고합니다. 각 프레임워크는 관례적인 ref 또는 컴포넌트 API를 통해 기본 LineChart 또는 StockChart 인스턴스를 노출하므로 드문 명령형 작업도 계속 사용할 수 있습니다.

차트 실패 처리

어댑터 오류 훅은 unknown를 허용합니다. 이는 JavaScript 생성 오류가 특정 클래스를 사용해야 한다고 요구하지 않기 때문입니다. Sixtyfold 렌더러에서 발생한 실패는 ChartRendererError 인스턴스입니다. 오버레이 해상도 또는 렌더러 전달 실패는 ChartOverlayError 인스턴스입니다. 구조화된 필드를 읽기 전에 값의 범위를 좁히십시오:

import {
  ChartOverlayError,
  ChartRendererError,
} from "@sixtyfold/line";

export function reportChartError(error: unknown) {
  if (error instanceof ChartRendererError) {
    console.error(error.phase, error.message);
    return;
  }
  if (error instanceof ChartOverlayError) {
    console.error("Overlay sources failed:", error.sources);
    return;
  }
  console.error(error);
}

스톡 전용 애플리케이션에서는 @sixtyfold/stock에서 동일한 가져오기를 사용하십시오. error.phase는 "initialization" 또는 "runtime"입니다. 렌더러 실패는 해당 차트 인스턴스를 파괴합니다; 애플리케이션이 복구를 선택하면 어댑터를 다시 마운트하십시오. 오버레이 실패는 치명적이지 않습니다: 성공한 항목은 설치된 상태로 유지되며, 요청된 모든 항목이 실패한 경우 이전에 렌더링된 오버레이가 남아 있습니다.

대량 타입화 배열은 Worker로 전송됩니다. 각 데이터 객체를 일회성으로 취급하십시오: 제자리에서 변형하지 말고, 각 업데이트마다 새 버퍼를 가진 새 객체를 할당하십시오. 이렇게 하면 수백만 포인트 데이터셋에 대해 제로 카피 경로가 보존됩니다.

React

import { useMemo, useRef } from "react";
import {
  SixtyfoldLineChart,
  type LineChartHandle,
} from "@sixtyfold/react/line";

export function Signals() {
  const chartRef = useRef<LineChartHandle>(null);
  const data = useMemo(() => ({
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  }), []);

  return (
    <SixtyfoldLineChart
      ref={chartRef}
      data={data}
      aria-label="Signal history"
      onError={console.error}
    />
  );
}

해당 컴포넌트는 일반 canvas 속성을 허용합니다. ref는 ref.current?.chart를 노출합니다. 초기 생성은 마이크로태스크로 지연되어 React Strict Mode의 개발 수명주기 검사로 인해 초기 데이터를 두 번 전달받지 않습니다.

React 전용 표면	타입	설명
`ref`	`Ref<LineChartHandle \| StockChartHandle>`	전달된 핸들의 `chart` 필드에는 마운트된 명령형 인스턴스 또는 `null`가 포함됩니다.
네이티브 캔버스 속성	`CanvasHTMLAttributes<HTMLCanvasElement>`	`children`를 제외하고 캔버스로 전달됩니다. 클래식 명명, 인라인 스타일, 테스트 및 포인터 메타데이터와 같은 용도로 `aria-label`에 사용하세요.
`onReady`	`(chart) => void`	초기화가 성공적으로 완료된 후 한 번 호출됩니다.
`onError`	`(error: unknown) => void`	생성, 렌더러 초기화/런타임 또는 오버레이 해상/전달 실패에 대해 호출됩니다.
`onStats`	`(stats) => void`	렌더러 텔레메트리를 활성화하고 수신합니다.
`onSeriesVisibilityChange`	`(event) => void`	선만 있는 시리즈 가시성 콜백입니다.

Vue

<script setup lang="ts">
import { shallowRef } from "vue";
import { SixtyfoldLineChart } from "@sixtyfold/vue/line";

const data = shallowRef({
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
});
</script>

<template>
  <SixtyfoldLineChart
    :data="data"
    aria-label="Signal history"
    @error="console.error"
  />
</template>

대량 데이터에는 Vue의 깊은 프록시 대신 shallowRef 또는 markRaw을 사용하세요. 컴포넌트는 ready, error, stats를 발행하며; 선형 차트는 또한 seriesVisibilityChange를 발행합니다. 템플릿 ref는 얕은 chart ref를 노출합니다.

Vue 표면	유형	설명
공유 props	프레임워크 prop 인덱스 참조	Vue props는 공유 계약과 동일한 이름과 타입을 사용합니다.
`ready` 이벤트	`LineChart \| StockChart`	초기화된 명령형 차트를 방출합니다.
`error` 이벤트	`unknown`	생성, 렌더러 초기화/런타임 또는 오버레이 해결/전달 실패를 방출합니다.
`stats` 이벤트	`LineChartStats \| StockChartStats`	텔레메트리를 활성화하고 방출합니다.
`seriesVisibilityChange` 이벤트	`SeriesVisibilityChangeEvent`	라인 전용 가시성 이벤트.
상속된 속성	네이티브 Canvas 속성	`aria-label`, class, style 같은 인식되지 않는 속성은 캔버스로 전달됩니다.
템플릿 ref `chart`	`ShallowRef<LineChart \| StockChart \| null>`	마운트된 명령형 차트를 깊은 프록시 없이 노출합니다.

Angular

Angular 20–22 패키지는 독립 실행형 컴포넌트와 Angular Package Format 보조 진입점을 사용합니다.

import { Component } from "@angular/core";
import { SixtyfoldLineChartComponent } from "@sixtyfold/angular/line";

@Component({
  standalone: true,
  imports: [SixtyfoldLineChartComponent],
  template: `
    <sixtyfold-line-chart
      [data]="data"
      ariaLabel="Signal history"
      (chartError)="reportError($event)"
    />
  `,
})
export class Signals {
  data = {
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  };

  reportError(error: unknown) {
    console.error(error);
  }
}

입력은 공유 표와 집중된 접근성 필드 및 canvasAttributes를 따릅니다. 출력은 chartReady, chartError, stats이며; 라인 컴포넌트는 또한 seriesVisibilityChange를 방출합니다. 컴포넌트 참조는 공개 chart를 노출합니다.

Angular의 애플리케이션 빌더는 패키지 소유 Vite Worker URL을 변환하지 않습니다. 애플리케이션에서 사용하는 엔진을 angular.json의 빌드 대상에 있는 assets 배열에 추가하세요:

[
  { "glob": "**/*", "input": "node_modules/@sixtyfold/line/dist/assets", "output": "assets" },
  { "glob": "**/*", "input": "node_modules/@sixtyfold/stock/dist/assets", "output": "assets" }
]

차트 생성은 isPlatformBrowser로 보호되므로 Angular SSR이 브라우저 전역 객체를 건드리지 않습니다.

Angular 입력	타입	설명
`options`	`LineChartOptions \| StockChartOptions`	생성 시점 스냅샷.
`data`	`LineData \| OHLCVData`	일회성 전송 가능한 반응형 데이터셋.
`dataUpdateOptions`	`LineDataUpdateOptions`	선 전용 교체 애니메이션 옵션.
`appearance`	`DeepPartial<LineAppearanceOptions \| StockAppearanceOptions>`	반응형 시각 패치.
`viewport`	`Partial<Viewport>`	반응형 X-도메인 패치.
`viewportAnimated`	`boolean \| undefined`	뷰포트 입력에 대한 애니메이션 재정의.
`statsIntervalMs`	`number \| undefined`	`stats`에 구독자가 있을 때의 최소 원격 측정 간격.
`canvasClass`	`string`	내부 캔버스에 적용되는 클래스입니다.
`ariaLabel`	`string`	접근성용 캔버스 이름입니다.
`ariaDescribedBy`	`string`	차트를 설명하는 인접한 텍스트 또는 표 대체물의 ID들입니다.
`canvasRole`	`string`	명시적 캔버스 역할; 보통 차트가 `application` 또는 `img` 를 선택하도록 둡니다.
`canvasTabIndex`	`number`	명시적 탭 순서; 보기 전용 차트는 기본적으로 생략됩니다.
`canvasAttributes`	`Record<string, string \| number \| boolean \| null \| undefined>`	테스트 훅과 메타데이터 같은 추가 Canvas 속성. 클래스, 스타일, 크기, 역할, 탭 순서 및 포커스된 접근성 입력은 별도로 관리됩니다.

Angular 출력	페이로드	설명
`chartReady`	`LineChart \| StockChart`	초기화된 명령형 차트를 방출합니다.
`chartError`	`unknown`	구성, 렌더러 초기화/런타임 또는 오버레이 해상/전달 실패를 발생시킵니다.
`stats`	`LineChartStats \| StockChartStats`	렌더러 텔레메트리를 활성화하고 전송합니다.
`seriesVisibilityChange`	`SeriesVisibilityChangeEvent`	선 전용 가시성 출력입니다.
public `chart`	`LineChart \| StockChart \| null`	컴포넌트 레퍼런스에 노출된 명령형 인스턴스입니다.

Svelte

<script lang="ts">
  import LineChart from "@sixtyfold/svelte/line";

  const data = {
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  };
</script>

<LineChart
  {data}
  ariaLabel="Signal history"
  onError={console.error}
/>

chart는 명령형 접근을 위해 바인딩 가능합니다. 추가 Svelte 속성으로는 선형 차트용 onReady, onError, onStats, onSeriesVisibilityChange와 canvasClass, canvasStyle, ariaLabel가 있습니다.

Svelte 속성/바인딩	타입	설명
공유 속성	프레임워크 속성 색인 참조	공유 `options`, `data`, `appearance`, 뷰포트, 텔레메트리 및 콜백 속성을 사용합니다.
`onReady`	`(chart) => void`	초기화된 명령형 차트를 수신합니다.
`onError`	`(error: unknown) => void`	구성, 렌더러 초기화/런타임 또는 오버레이 해결/전달 실패를 보고합니다.
`onStats`	`(stats) => void`	텔레메트리를 활성화하고 수신합니다.
`onSeriesVisibilityChange`	`(event) => void`	선 전용 가시성 콜백입니다.
`canvasClass`	`string`	캔버스에 적용되는 클래스입니다.
`canvasStyle`	`string`	캔버스에 적용되는 CSS 선언 텍스트입니다.
`ariaLabel`	`string`	접근 가능한 캔버스 이름입니다.
bindable `chart`	`LineChart \| StockChart \| null`	마운트된 명령형 차트; 정리 시 `null`(으)로 리셋됩니다.

SolidJS

import { SixtyfoldLineChart } from "@sixtyfold/solid/line";

const data = {
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
};

export function Signals() {
  return (
    <SixtyfoldLineChart
      data={data}
      canvasProps={{ "aria-label": "Signal history" }}
      chartRef={(chart) => console.log(chart)}
      onError={console.error}
    />
  );
}

chartRef는 마운트된 차트를 받고 정리 시점에 null를 호출합니다. canvasProps는 네이티브 Canvas2D 속성을 전달합니다. 그 외의 모든 props는 공통 계약을 따릅니다.

SolidJS 전용 서피스	타입	설명
`chartRef`	`(chart \| null) => void`	마운트된 명령형 차트를 수신하고 정리 시점에 `null`를 호출합니다.
`canvasProps`	`JSX.CanvasHTMLAttributes<HTMLCanvasElement>`	네이티브 캔버스 속성, 접근성 메타데이터, 클래스, 스타일 및 테스트 후크.
`onReady`	`(chart) => void`	초기화에 성공한 후 호출됩니다.
`onError`	`(error: unknown) => void`	생성, 렌더러 초기화/런타임 또는 오버레이 해결/전달 실패 시 호출됩니다.
`onStats`	`(stats) => void`	텔레메트리를 활성화하고 수신합니다.
`onSeriesVisibilityChange`	`(event) => void`	선 전용 가시성 콜백.

완전한 예제

공개 리포지토리에는 지원되는 각 프레임워크별 최소 반응형 애플리케이션이 포함되어 있습니다. 각 애플리케이션은 패키지, 데이터 형태, 차트 설정 및 라인 차트와 스톡 차트를 재현하는 데 필요한 정리(cleanup)를 보여줍니다.