소개

Flitter는 차트 라이브러리를 쉽게 만들고 커스터마이징할 수 있는 혁신적인 프레임워크입니다. 자동 레이아웃 계산과 SVG 및 Canvas를 모두 지원하여 복잡한 데이터 시각화를 손쉽게 구현할 수 있습니다. 상호작용과 애니메이션이 내장되어 있어 기본 메커니즘에 대한 걱정 없이 매력적인 콘텐츠 제작에 집중할 수 있습니다.

주요 기능

손쉬운 차트와 다이어그램 생성: 최소한의 코드로 다양한 차트와 다이어그램을 구축할 수 있습니다.
자동 레이아웃 계산: Flitter가 레이아웃 계산을 자동으로 처리하여 디자인 프로세스를 단순화합니다.
듀얼 렌더러 지원: SVG와 Canvas를 동시에 지원하여 프로젝트 요구사항에 맞게 선택할 수 있습니다.
내장된 상호작용과 애니메이션: 인터랙티브한 요소와 부드러운 애니메이션으로 차트를 향상시킬 수 있습니다.
쉬운 커스터마이징: Flitter 위젯을 사용하여 차트의 모든 요소를 직접 커스터마이징할 수 있습니다.

예시

기본 막대 차트

다음은 Flitter를 사용하여 기본 막대 차트를 만드는 방법입니다:

import ReactWidget from "@meursyphus/flitter-react";
import { BarChart } from "@meursyphus/flitter-chart";

export default function App() {
  const chart = BarChart({
    data: {
      title: "제목",
      labels: ["라벨1", "라벨2", "라벨3", "라벨4", "라벨5"],
      datasets: [
        {
          legend: "A",
          data: [30, 40.5, 50.12, 30.5, 40],
        },
        {
          legend: "B",
          data: [60, 20.5, 20.2, 22.5, 10],
        },
        {
          legend: "C",
          data: [6, 10.5, 20.2, 12.5, 1],
        },
      ],
    },
  });

  return (
    <div>
      <h1>기본 Flitter 막대 차트</h1>
      <ReactWidget width="600" height="400" widget={chart} />
    </div>
  );
}

이 간단한 예시는 커스터마이징 없이도 막대 차트를 얼마나 쉽게 만들 수 있는지 보여줍니다.

Flitter 위젯을 사용한 커스터마이즈된 막대 차트

이제 Flitter의 강력한 위젯 시스템을 사용하여 차트를 커스터마이징하는 방법을 살펴보겠습니다:

import ReactWidget from "@meursyphus/flitter-react";
import { BarChart } from "@meursyphus/flitter-chart";
import { Container, BoxDecoration, BoxShadow } from "@meursyphus/flitter";

export default function App() {
  const customizedChart = BarChart({
    data: {
      title: "제목",
      labels: ["라벨1", "라벨2", "라벨3", "라벨4", "라벨5"],
      datasets: [
        {
          legend: "A",
          data: [30, 40.5, 50.12, 30.5, 40],
        },
        {
          legend: "B",
          data: [60, 20.5, 20.2, 22.5, 10],
        },
        {
          legend: "C",
          data: [6, 10.5, 20.2, 12.5, 1],
        },
      ],
    },
    custom: {
      bar: {
        type: "custom",
        Custom(child, { legend, backgroundColor }) {
          return Container({
            decoration: new BoxDecoration({
              color: backgroundColor,
              boxShadow:
                legend === "B"
                  ? [new BoxShadow({ color: "black", blurRadius: 5 })]
                  : [],
            }),
            width: legend === "B" ? 30 : 15,
          });
        },
      },
    },
  });

  return (
    <div>
      <h1>커스터마이즈된 Flitter 막대 차트</h1>
      <ReactWidget width="600" height="400" widget={customizedChart} />
    </div>
  );
}

커스터마이징의 주요 내용:

커스터마이즈된 막대 모양: 막대의 너비를 변경하고 “B”라는 범례를 가진 막대에 그림자 효과를 추가했습니다.
쉬운 커스터마이징: Flitter의 위젯을 직접 사용하여 차트의 구성 요소를 커스터마이징했습니다.
자동 레이아웃 처리: Flitter가 레이아웃을 자동으로 계산하므로 위치에 대한 걱정 없이 디자인에 집중할 수 있습니다.

Flitter의 장점

단순화된 개발: 차트와 다이어그램을 쉽게 만들고 커스터마이징할 수 있어 시간과 노력을 절약할 수 있습니다.
유연한 커스터마이징: 차트의 모든 요소를 쉽게 커스터마이징하여 특정 요구사항에 맞출 수 있습니다.
자동 레이아웃 계산: 디자인과 기능에 집중할 수 있도록 Flitter가 레이아웃을 자동으로 처리합니다.
풍부한 상호작용과 애니메이션: 내장된 인터랙티브 요소와 부드러운 애니메이션으로 사용자와의 상호작용을 강화할 수 있습니다.
높은 성능: 모든 기기에서 부드러운 렌더링과 성능을 제공합니다.