Chart kit

개요

같은 색 농도지금 하나만 잉크(--cb-data-1), 나머지는 같은 색 가족을 옅게. 두 번째 색은 없습니다.
둥근 끝막대·범위·호의 끝은 반원(반지름 = 두께의 절반), 선은 둥근 끝.
끝점 라벨만끝값·오늘, 축은 처음과 끝만. 12px 이상, 한 그림에 S 0–2 · M 4 · L 6개까지.

키트 그림은 위젯 안에서 주인공 숫자나 문장을 받쳐 줍니다. 그림이 먼저 말하지 않고, 범례는 L에만 둡니다.

구조와 쓰임

표준형	컴포넌트	크기	쓰는 곳
1. 영역	`KitArea`	140×44 · 320×60 · 320×120	쌓여 온 양(가져온 기록, 연결 뒤 누적). 끝점에만 라벨.
2. 둥근 막대	`KitBars`	140×44 · 320×60 · 320×120	주·날 단위 비교. 이번 주 막대만 잉크, 값은 그 하나.
3. 스파크라인	`KitSpark`	140×44 · 320 · 2행 · 320 · 4행	목록 행 안의 추세. 빈 주는 끊고 이어 그리지 않음.
4. 링	`KitRing`	64 · 124 · 150	카운트다운만. 남은 시간 = 호, 지금 = 점, 시계 숫자 없음.
5. 점 행렬	`KitDots`	S 6 · M 6×8 · L 6×8	출처 × 주 있음/없음. 찬 점 = 있음, 빈 테 = 없음, 점선 = 못 읽음.
6. 타임라인	`KitTimeline`	140×44 · 320 · 3행 · 320 · 4행	일 묶음의 기간. 오늘까지 이어진 것만 잉크 + 끝 점, 추정은 점선, 하루짜리는 점.
7. 달력 칩	`KitCalendar`	S 18 · M 28 · L 28 · 2주	날짜 고르기·마감. 오늘 채움, 고른 날 테, 일정은 아래 점.
8. 흐름	`KitFlow`	140×44 · 320×96 · 320×120	출처 → 기록 하나. 최근 구간만 잉크, 추정은 점선.

예시

표준형 여덟

영역 KitArea

S

M

L

둥근 막대 KitBars

S

M

L

스파크라인 KitSpark

S

M

L

링 KitRing

S

M

L

점 행렬 KitDots

S

M

L

타임라인 KitTimeline

S

M

L

달력 칩 KitCalendar

S

M

L

흐름 KitFlow

S

M

L

적용 예

키트를 쓰는 위젯입니다. 무대는 위젯 페이지에 있습니다.

이렇게 · 이렇게 하지 않기

이렇게 지금·고른 것 하나만 잉크로 칠하고 나머지는 같은 색을 옅게 둡니다.
이렇게 라벨은 끝값·오늘과 축의 처음·끝에만 답니다.
이렇게 빈 주와 못 읽은 구간은 비우거나 점선으로 둡니다.
이렇게 하지 않기 막대마다 숫자를 달지 않습니다.
이렇게 하지 않기 두 번째 색이나 S·M 범례를 더하지 않습니다.
이렇게 하지 않기 그림을 viewBox로 줄여 라벨을 12px 아래로 만들지 않습니다.

토큰과 속성

속성

이름	타입	설명
`size`	`'s' \| 'm' \| 'l'`	S 140×44 · M 320×60 · L 320×120. 라벨 상한 S 2 · M 4 · L 6.
`label`	`string`	figure의 aria-label: 그림이 말하는 사실 한 문장.
`KitArea · values, end?, axis?`	`number[] · string · [string, string]`	값(마지막 = 지금), 끝값 라벨, 축 처음·끝.
`KitBars · values, now?, value?, axis?`	`number[] · number · string · [string, string]`	지금 막대(기본 마지막)와 그 값 하나.
`KitSpark · rows`	`{ name, service?, values: (number \| null)[] }[]`	null = 기록 없음, 선이 끊깁니다.
`KitRing · left, center`	`number (0–1) · string`	남은 비율과 가운데 숫자 하나.
`KitDots · rows`	`{ service, name, weeks: ('f' \| 'e' \| 'n')[] }[]`	f 있음 · e 없음 · n 못 읽음. 최대 6행 × 8주.
`KitTimeline · rows, domain, today?, todayLabel?, ticks?`	`{ name, from, to, open?, estimate? }[] · [number, number]`	open = 오늘까지(잉크), estimate = 점선, from = to면 점.
`KitCalendar · days`	`{ weekday, date, today?, selected?, mark?: 'on' \| 'maybe', unread? }[]`	S·M 7일, L 14일.
`KitFlow · sources, target?`	`{ service, tone?: 'now' \| 'plain' \| 'estimate' }[] · string`	출처 S 2 · M 3 · L 4개, 기록 이름 하나.

쓰는 토큰

--cb-data-1
--cb-data-2
--cb-fill-presence
--cb-line-mark
--cb-line
--_ink
--_muted
--_bg
color-mix(in srgb, var(--cb-data-2) 18%, transparent)
--cb-widget-label-size
--cb-dur-base
--cb-ease

코드

import { KitBars } from '@/design/widgets/general/chart-kit';

<KitBars size="m" label="이번 주 15건, 8주 중 가장 많아요"
  values={[9, 11, 8, 12, 10, 13, 9, 15]} value="15" axis={['9/1', '이번 주']} />

키보드: 없음. 그림은 초점을 받지 않습니다. 위젯(S는 카드 전체 링크, M·L은 행 링크)이 초점을 맡습니다.

그림은 figure role="img" + aria-label 한 문장으로 사실을 말하고, 안의 SVG·HTML은 aria-hidden입니다.
지금은 색만으로 말하지 않습니다: 위치(끝)와 끝점 라벨(600)이 함께 표시합니다.
그림은 원래 크기로 그려 라벨이 렌더 크기 12px 아래로 줄지 않습니다.
강제 색 모드에서는 시스템 색(CanvasText · Highlight)으로, 동작 줄이기에서는 등장 동작 없이 그립니다.

개요