404
8 |죄송합니다. 찾으시는 페이지를 찾을 수 없습니다.
9 | 홈으로 돌아가기 10 |
47 | {
48 | Object.entries(groupedTutorials).map(([group, tutorials]) => (
49 |
72 |
73 |
123 |
--------------------------------------------------------------------------------
/packages/headless-chart/src/shared/cartesian/getScale.ts:
--------------------------------------------------------------------------------
1 | import type { CartesianData, CartesianScale } from "./types";
2 |
3 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
4 | export function getScale({
5 | datasets,
6 | }: Omit
50 |
69 | ))
70 | }
71 | 51 | {group} 52 |
53 |-
54 | {tutorials.map((tutorial) => (
55 |
- 56 | 63 | {tutorial.data.title} 64 | 65 | 66 | ))} 67 |
63 | {
72 | editorRef.current = editor;
73 | // 초기 레이아웃 설정
74 | editor.layout();
75 | }}
76 | options={{
77 | minimap: { enabled: false },
78 | scrollBeyondLastLine: false,
79 | padding: { top: 8, bottom: 8 },
80 | automaticLayout: true, // 자동 레이아웃 조정 활성화
81 | wordWrap: "on" // 긴 줄 자동 줄바꿈
82 | }}
83 | />
84 |
85 |
16 |
17 | 
18 | Headless Chart
19 |
20 |
21 |
35 |
36 |
44 |
45 |
18 | Headless Chart
19 |
20 |
21 |
35 |
36 |
44 | 
39 | 
42 |
12 |
36 |
37 |
95 |
96 |
--------------------------------------------------------------------------------
/packages/docs/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Header from "../components/ui/Header.astro";
3 | interface Props {
4 | title?: string;
5 | description?: string;
6 | image?: string;
7 | }
8 |
9 | const {
10 | image = "/og.png",
11 | title = "Headless Charts - 😫 Tired of Chart Limitations? 🎯",
12 | description = "✨ Copy, Paste, Done! 🎨 Ultimate Freedom in Chart Customization 🚀 Zero Restrictions",
13 | } = Astro.props;
14 |
15 | const BASE_ORIGIN = Astro.url.origin;
16 | const fullCanonicalUrl = `${BASE_ORIGIN}${Astro.url.pathname}`;
17 |
18 | ---
19 |
20 |
21 |
22 |
23 |
24 |
25 | On this page
13 | 35 |
181 |
191 | );
192 | }
193 |
194 | export default BarChart;
195 |
--------------------------------------------------------------------------------
/packages/docs/src/content/docs/ko/02.core-concepts/01.flitter-basics.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | nav_group: "핵심 개념"
3 | nav_order: 1
4 | title: "Flitter 기초"
5 | description: "Headless Chart의 기반이 되는 Flitter 프레임워크 이해하기"
6 | ---
7 |
8 | # Flitter 기초
9 |
10 | Headless Chart는 Flitter 프레임워크 위에 구축되었습니다. Flitter를 이해하면 차트를 자유자재로 커스터마이징할 수 있습니다.
11 |
12 | ## Flitter란?
13 |
14 | Flitter는 Flutter의 위젯 시스템을 웹에서 구현한 JavaScript 렌더링 엔진입니다. Flutter의 강력한 UI 구성 방식을 웹에서도 사용할 수 있게 해줍니다.
15 |
16 | ### 주요 특징
17 |
18 | - **선언적 UI**: "어떻게"가 아닌 "무엇을" 그릴지 선언
19 | - **위젯 트리**: 작은 위젯들을 조합해 복잡한 UI 구성
20 | - **크로스 렌더러**: SVG와 Canvas 모두 지원
21 | - **자동 레이아웃**: Flutter의 레이아웃 알고리즘 그대로 구현
22 |
23 | ## 핵심 개념
24 |
25 | ### 1. 위젯(Widget)
26 |
27 | 모든 UI 요소는 위젯입니다. 위젯은 UI의 일부를 선언적으로 설명합니다.
28 |
29 | ```javascript
30 | // 간단한 컨테이너 위젯
31 | Container({
32 | width: 200,
33 | height: 100,
34 | color: '#3b82f6'
35 | })
36 |
37 | // 텍스트 위젯
38 | Text('안녕하세요', {
39 | style: new TextStyle({
40 | fontSize: 16,
41 | color: '#1f2937'
42 | })
43 | })
44 | ```
45 |
46 | ### 2. 위젯 트리
47 |
48 | 위젯들은 트리 구조로 조합됩니다. 부모 위젯은 자식 위젯을 포함합니다.
49 |
50 | ```javascript
51 | Container({
52 | child: Column({
53 | children: [
54 | Text('제목'),
55 | Text('내용'),
56 | Container({ height: 50, color: '#f3f4f6' })
57 | ]
58 | })
59 | })
60 | ```
61 |
62 | ### 3. 레이아웃 시스템
63 |
64 | Flitter는 Flutter와 동일한 레이아웃 제약 시스템을 사용합니다.
65 |
66 | - **제약은 아래로 전달됩니다** (Constraints go down)
67 | - **크기는 위로 전달됩니다** (Sizes go up)
68 | - **부모가 위치를 결정합니다** (Parent sets position)
69 |
70 | ## 중요한 문법 규칙
71 |
72 | ### 1. Import 규칙
73 |
74 | ```javascript
75 | // ✅ 올바른 방법
76 | import Widget from '@meursyphus/flitter-react'; // 기본 내보내기
77 | import { Container, Text, Row } from '@meursyphus/flitter'; // 명명된 내보내기
78 |
79 | // ❌ 잘못된 방법
80 | import { Widget } from '@meursyphus/flitter-react'; // 에러!
81 | ```
82 |
83 | ### 2. 위젯 vs 타입 클래스
84 |
85 | ```javascript
86 | // 위젯: new 키워드 없이 사용
87 | Container({ width: 100 })
88 | Text('Hello')
89 | Row({ children: [] })
90 |
91 | // 타입 클래스: new 키워드 필수
92 | new TextStyle({ fontSize: 16 })
93 | new BoxDecoration({ color: '#FF0000' })
94 | new EdgeInsets.all(10)
95 | ```
96 |
97 | ### 3. 색상 표현
98 |
99 | ```javascript
100 | // ✅ 올바른 색상 표현
101 | color: '#FF0000' // HEX 문자열
102 | color: 'rgba(255, 0, 0, 0.5)' // RGBA 문자열
103 | color: 'red' // 색상 이름
104 |
105 | // ❌ 잘못된 색상 표현
106 | color: 0xFFFF0000 // Flutter 스타일 숫자는 사용 불가
107 | ```
108 |
109 | ## 기본 위젯 소개
110 |
111 | ### Container
112 |
113 | 가장 기본적인 레이아웃 위젯입니다.
114 |
115 | ```javascript
116 | Container({
117 | width: 200,
118 | height: 100,
119 | padding: EdgeInsets.all(16),
120 | margin: EdgeInsets.symmetric({ horizontal: 8 }),
121 | decoration: new BoxDecoration({
122 | color: '#ffffff',
123 | borderRadius: BorderRadius.circular(8),
124 | border: Border.all({ color: '#e5e7eb', width: 1 })
125 | }),
126 | child: Text('컨테이너 안의 텍스트')
127 | })
128 | ```
129 |
130 | ### Row & Column
131 |
132 | 수평/수직으로 자식들을 배치합니다.
133 |
134 | ```javascript
135 | // 수평 배치
136 | Row({
137 | mainAxisAlignment: MainAxisAlignment.spaceBetween,
138 | crossAxisAlignment: CrossAxisAlignment.center,
139 | children: [
140 | Text('왼쪽'),
141 | Text('중간'),
142 | Text('오른쪽')
143 | ]
144 | })
145 |
146 | // 수직 배치
147 | Column({
148 | mainAxisAlignment: MainAxisAlignment.start,
149 | crossAxisAlignment: CrossAxisAlignment.stretch,
150 | children: [
151 | Text('상단'),
152 | SizedBox({ height: 20 }), // 간격
153 | Text('하단')
154 | ]
155 | })
156 | ```
157 |
158 | ### Stack & Positioned
159 |
160 | 위젯들을 겹쳐서 배치합니다.
161 |
162 | ```javascript
163 | Stack({
164 | children: [
165 | Container({ width: 200, height: 200, color: '#3b82f6' }),
166 | Positioned({
167 | top: 10,
168 | right: 10,
169 | child: Text('우측 상단')
170 | }),
171 | Positioned({
172 | bottom: 10,
173 | left: 10,
174 | child: Text('좌측 하단')
175 | })
176 | ]
177 | })
178 | ```
179 |
180 | ## 실제 차트 예제
181 |
182 | Flitter 개념을 차트에 적용해보겠습니다.
183 |
184 | ```javascript
185 | // 간단한 막대 차트 레이아웃
186 | Container({
187 | padding: EdgeInsets.all(20),
188 | child: Row({
189 | crossAxisAlignment: CrossAxisAlignment.end,
190 | children: [
191 | // 첫 번째 막대
192 | Container({
193 | width: 50,
194 | height: 100,
195 | color: '#3b82f6',
196 | margin: EdgeInsets.symmetric({ horizontal: 5 })
197 | }),
198 | // 두 번째 막대
199 | Container({
200 | width: 50,
201 | height: 150,
202 | color: '#10b981',
203 | margin: EdgeInsets.symmetric({ horizontal: 5 })
204 | }),
205 | // 세 번째 막대
206 | Container({
207 | width: 50,
208 | height: 80,
209 | color: '#f59e0b',
210 | margin: EdgeInsets.symmetric({ horizontal: 5 })
211 | })
212 | ]
213 | })
214 | })
215 | ```
216 |
217 | ## 스타일링
218 |
219 | ### TextStyle
220 |
221 | 텍스트의 모양을 정의합니다.
222 |
223 | ```javascript
224 | Text('스타일이 적용된 텍스트', {
225 | style: new TextStyle({
226 | fontSize: 18,
227 | fontWeight: 'bold',
228 | color: '#1f2937',
229 | fontFamily: 'Pretendard',
230 | letterSpacing: -0.5
231 | })
232 | })
233 | ```
234 |
235 | ### BoxDecoration
236 |
237 | 컨테이너의 장식을 정의합니다.
238 |
239 | ```javascript
240 | Container({
241 | decoration: new BoxDecoration({
242 | color: '#ffffff',
243 | borderRadius: BorderRadius.circular(12),
244 | boxShadow: [{
245 | color: 'rgba(0, 0, 0, 0.1)',
246 | blurRadius: 10,
247 | offset: { x: 0, y: 4 }
248 | }],
249 | gradient: {
250 | type: 'linear',
251 | colors: ['#3b82f6', '#8b5cf6'],
252 | begin: { x: 0, y: 0 },
253 | end: { x: 1, y: 1 }
254 | }
255 | })
256 | })
257 | ```
258 |
259 | ## 다음 단계
260 |
261 | 이제 Flitter의 기본을 이해했으니, [위젯 시스템](./02.widget-system.mdx)에서 더 깊이 있는 내용을 학습해보세요.
262 |
263 | 차트를 만들 때 이런 Flitter 지식이 어떻게 활용되는지 [차트 가이드](../03.chart-guide/01.bar-chart.mdx)에서 확인할 수 있습니다.
--------------------------------------------------------------------------------
/packages/docs/src/content/charts/01.bar/01.chartjs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | nav_group: "Bar"
3 | nav_order: 1
4 | title: "Chartjs"
5 | description: "A quick example of a headless-chart inspired by chart.js"
6 | image: /bar-chart/chartjs.png
7 | files:
8 | App.js: |
9 | import Widget from "@meursyphus/flitter-react";
10 | import { BarChart } from "@meursyphus/headless-chart";
11 | import {
12 | Text,
13 | Border,
14 | BorderSide,
15 | BoxDecoration,
16 | Column,
17 | Container,
18 | EdgeInsets,
19 | Row,
20 | SizedBox,
21 | TextStyle,
22 | Padding,
23 | MainAxisSize,
24 | MainAxisAlignment,
25 | Stack,
26 | Positioned
27 | } from "@meursyphus/flitter";
28 |
29 | const data = {
30 | labels: ["January", "February", "March", "April", "May", "June", "July"],
31 | datasets: [
32 | {
33 | legend: "My First Dataset",
34 | values: [65, 59, 80, 81, 56, 55, 40],
35 | },
36 | ],
37 | };
38 |
39 | const backgroundColors = [
40 | "rgba(255, 99, 132, 0.2)",
41 | "rgba(255, 159, 64, 0.2)",
42 | "rgba(255, 205, 86, 0.2)",
43 | "rgba(75, 192, 192, 0.2)",
44 | "rgba(54, 162, 235, 0.2)",
45 | "rgba(153, 102, 255, 0.2)",
46 | "rgba(201, 203, 207, 0.2)",
47 | ];
48 | const borderColors = [
49 | "rgb(255, 99, 132)",
50 | "rgb(255, 159, 64)",
51 | "rgb(255, 205, 86)",
52 | "rgb(75, 192, 192)",
53 | "rgb(54, 162, 235)",
54 | "rgb(153, 102, 255)",
55 | "rgb(201, 203, 207)",
56 | ];
57 |
58 | const chart = BarChart({
59 | data,
60 | custom: {
61 | layout: (...[{ legends, plot }]) =>
62 | Container({
63 | padding: EdgeInsets.only({ left: 30, bottom: 70 }),
64 | child: Stack({
65 | children: [
66 | Positioned({
67 | top: 0,
68 | right: 0,
69 | child: Text("Inspired by Chart.js", {
70 | style: new TextStyle({
71 | fontSize: 14,
72 | color: "#999999",
73 | fontFamily: "Noto Sans JP",
74 | }),
75 | }),
76 | }),
77 | Column({
78 | children: [
79 | Row({
80 | mainAxisAlignment: MainAxisAlignment.center,
81 | children: [...legends, SizedBox({ width: 30 })],
82 | }),
83 | SizedBox({ height: 5 }),
84 | plot,
85 | ],
86 | }),
87 | ],
88 | }),
89 | }),
90 | bar: (...[{ label }]) => {
91 | const index = data.labels.indexOf(label);
92 | const backgroundColor = backgroundColors[index];
93 | const borderSide = new BorderSide({
94 | color: borderColors[index],
95 | width: 1,
96 | });
97 | return Container({
98 | width: Infinity,
99 | margin: EdgeInsets.symmetric({ horizontal: 8 }),
100 | height: Infinity,
101 | decoration: new BoxDecoration({
102 | color: backgroundColor,
103 | border: new Border({
104 | left: borderSide,
105 | right: borderSide,
106 | top: borderSide,
107 | }),
108 | }),
109 | });
110 | },
111 | xAxisLabel: (...[{ name }]) => Padding({
112 | padding: EdgeInsets.only({ top: 1 }),
113 | child: Text(name, {
114 | style: new TextStyle({
115 | fontFamily: "Noto Sans JP",
116 | fontSize: 12,
117 | color: "#666666",
118 | }),
119 | }),
120 | }),
121 | yAxisLabel: (...[{ name }]) => Padding({
122 | padding: EdgeInsets.only({ right: 1 }),
123 | child: Text(name, {
124 | style: new TextStyle({
125 | fontFamily: "Noto Sans JP",
126 | fontSize: 12,
127 | color: "#666666",
128 | }),
129 | }),
130 | }),
131 | xAxisTick: () => Container({
132 | height: 6,
133 | width: 1,
134 | color: "#DDDDDD",
135 | }),
136 | yAxisTick: () => Container({
137 | height: 1,
138 | width: 6,
139 | color: "#DDDDDD",
140 | }),
141 | yAxisLine: () => Container({
142 | color: "#BBBBBB",
143 | width: 1,
144 | height: Infinity,
145 | }),
146 | xAxisLine: () => Container({
147 | color: "#BBBBBB",
148 | height: 1,
149 | width: Infinity,
150 | }),
151 | legend: (...[{ name }]) => Row({
152 | mainAxisAlignment: MainAxisAlignment.center,
153 | mainAxisSize: MainAxisSize.min,
154 | children: [
155 | Container({
156 | width: 36,
157 | height: 12,
158 | decoration: new BoxDecoration({
159 | color: "rgba(255, 99, 132, 0.2)",
160 | border: Border.all({ color: "rgb(255, 99, 132)" }),
161 | }),
162 | }),
163 | SizedBox({ width: 5 }),
164 | Text(name, {
165 | style: new TextStyle({
166 | fontFamily: "Noto Sans JP",
167 | fontSize: 14,
168 | color: "#666666",
169 | }),
170 | }),
171 | ],
172 | }),
173 | gridXLine: () => Container({ height: 1, color: "#EEEEEE" }),
174 | gridYLine: () => Container({ width: 1, color: "#EEEEEE" }),
175 | },
176 | });
177 |
178 | export default function App() {
179 | return (
180 |