차트 & 그래프 (Charts & Graphs)
경영 대시보드의 그래프 표준
경영 대시보드(apps/management-dashboard)에서 쓰는 그래프를 종류별로 정리한 페이지입니다. 모든 차트는 외부 라이브러리(Chart.js·D3) 없이 직접 그린 SVG / CSS 막대이고, 색은 전부 디자인 시스템 토큰(--color-*)을 씁니다.
Hereby 그래프는 크게 세 종류예요.
| 종류 | 쓰임새 | 예시 |
|---|---|---|
| 꺾은선 그래프 (line) | 시간에 따른 추세·증감 흐름 | 연간 흐름(청구·인건비·차액) |
| 막대 그래프 (bar / column) | 기간·항목 간 크기 비교 | 연간 추이, 일별 인센티브 금액 |
| 비율 바 그래프 (proportion bar) | 전체 대비 구성 비중 | 처리 상태, 카테고리별 |
라이브 미리보기
경영 대시보드의 그래프를 종류별로 docs 데모로 포팅했어요. 범례 칩으로 시리즈를 켜고/끄고, 차트 위에 마우스를 올려 툴팁을 확인하세요. 각 종류의 자세한 스펙은 아래 종류별 섹션에서 이어집니다.
꺾은선 그래프 · 연간 흐름
그룹 세로 막대 · 연간 추이
단일 세로 막대 · 일별 인센티브 금액
일별 인센티브 금액
비율 바 · 처리 상태 / 카테고리별
처리 상태
카테고리별
ℹ️ 위 데모는
app.ts의 차트 지오메트리(flowChartSvg·trendChartSvg·incentiveDailyChart)와main.css의.ds-bar-*규칙을 docs 데모 컴포넌트로 포팅·복제한 것입니다. 색은design-system.css토큰을 그대로 써서 프로덕션과 동일하지만, 데이터는 정적 샘플이에요. 실제 인터랙션(연도/기간 셀렉터, 월 선택 연동)은 앱에서 확인하세요.
단일 출처
| 파트 | 파일 |
|---|---|
| 차트 로직 | apps/management-dashboard/src/app.ts (flowChartSvg · trendChartSvg · incentiveDailyChart · incentiveChartSlices) |
| 화면 | apps/management-dashboard/src/views/dashboard.html |
| 비율 바 스타일 | apps/management-dashboard/src/styles/main.css (.ds-bar-track / .ds-bar-seg / .ds-bar-tip) |
공통 규칙
- 색: 시리즈 색은
청구 = blue-500·인건비 = red-500·차액 = orange-500으로 고정. 그 외 항목은 브랜드 hue 팔레트(orange→blue→green→purple→aquablue…) 순서로 배정. - 축·그리드: y축 가로선은
line-normal, 라벨은neutral-400. 꺾은선의 세로 점선 그리드는neutral-100. - 호버 툴팁 두 종류:
- 꺾은선·세로 막대 → 흰 카드(
bg white+line-normal보더 +--ds-shadow-md), 상단 굵은 타이틀 + 좌측 라벨·우측 값. - 비율 바 → 검은 말풍선(
neutral-900+ 아래 꼭짓점),.ds-bar-tip.
- 꺾은선·세로 막대 → 흰 카드(
- 숫자: 전부
tabular-nums. 단위는 차트 하단/툴팁에 명시(백만원·억원·원·건). - 토글 범례: 다중 시리즈 차트는 칩 클릭으로 시리즈를 켜고 끄되 축·막대 위치는 고정(꺼진 시리즈만 숨김).
1. 꺾은선 그래프 (Line)
시간 축(월·연)에 따른 추세와 증감을 볼 때. 청구·인건비 두 라인 사이 간격이 곧 차액이고, 청구 ≥ 인건비면 초록(흑자)·아니면 빨강(적자) 밴드로 칠해요. 미리보기는 맨 위 라이브 미리보기에서 확인하세요.
핵심 스펙
- 캔버스:
viewBox 0 0 1080 260, 여백L48 R16 T16 B28.width:100%로 반응형. - 라인: 청구·인건비는 실선
stroke-width 2.5+ 각 점에 흰 채움 원(r3, 보더 2). 차액은 점선(5 4)stroke-width 2. - 흑/적자 밴드: 청구·인건비 두 라인 사이 다각형, 흑자
green-500·적자red-500,opacity 0.1. (한 시리즈라도 끄면 밴드 숨김) - 호버: 가장 가까운 월로 스냅 → 세로 가이드선(
neutral-500, opacity 0.45) + 강조 점 + 흰 카드 툴팁.
2. 막대 그래프 (Bar / Column)
기간·항목 간 크기를 직접 비교할 때. 연도별 그룹 막대(여러 시리즈)와 일자별 단일 막대(하나의 값) 두 형태가 있어요.
2-1. 그룹 세로 막대 — 연간 추이 multi-series
연도마다 청구·인건비·차액 3개 막대가 한 묶음. 범례 토글 시 슬롯은 유지하고 꺼진 막대만 사라져요. 막대 위에 마우스를 올리면 연도 밴드가 강조됩니다. 미리보기는 맨 위 라이브 미리보기에서 확인하세요.
스펙 — 꺾은선과 동일한 프레임(1080×260·같은 여백)을 써서 두 탭을 오가도 축이 안 흔들려요. 밴드 스케일(연도를 밴드 중앙 배치), 막대 폭 28 · 간격 6, 막대 위 값 라벨(bold, neutral-500), 모서리 rx 3.
2-2. 단일 세로 막대 (y축 눈금형) — 일별 인센티브 금액 single-series
한 달(일자) 동안의 일별 금액. y축은 보기 좋은 단위(만원 단위 step)로 자동으로 끊고, 값이 없는 날은 막대를 그리지 않아요. 막대에 마우스를 올리면 금액·건수 툴팁이 떠요. 미리보기는 맨 위 라이브 미리보기에서 확인하세요.
스펙 — y축 step 후보 [1만, 2만, 5만, 10만, 20만, 50만, 100만, 200만] 중 눈금 7개 이내가 되는 값을 골라 axisMax 계산. 막대 색 orange-500(hover orange-600), 모서리 위쪽만 2px. x축은 1일·5일 배수만 라벨.
3. 비율 바 그래프 (Proportion Bar)
전체(100%) 대비 각 항목의 구성 비중을 한 줄로 볼 때. 처리 상태(대기/승인/지급)나 카테고리별 분포처럼 "합이 100%"인 데이터에 써요. 세그먼트에 마우스를 올리면 검은 말풍선으로 건수·금액·비율을 보여줘요. 미리보기는 맨 위 라이브 미리보기에서 확인하세요.
핵심 스펙
- 트랙:
.ds-bar-track— 높이 10px, 세그먼트 사이2px흰 간격(gap), 양 끝 세그먼트만 완전 라운드(반원)라 가운데 흰 선이 또렷. - 세그먼트 폭:
count / total × 100%(또는 금액 비율). 값이 0인 항목은 렌더하지 않아요. - 툴팁:
.ds-bar-tip—neutral-900배경 + 아래 45° 꼭짓점, 라벨(600) + 값(neutral-300). - 범례: 바 아래 색 점 + 라벨 + 값/비율 행. 처리 상태는 건수, 카테고리별은 금액 +
%. - 색: 처리 상태
대기=yellow-500·승인=blue-500·지급=green-500. 카테고리는 브랜드 hue 팔레트 순서.
변경 이력
| 날짜 | 내용 |
|---|---|
| 2026-06-19 | 라이브 미리보기를 페이지 최상단으로 통합·이동 — 종류별로 흩어져 있던 4개 데모(<DemoFlowChart>·<DemoTrendChart>·<DemoDailyBar>·<DemoProportionBar>)를 상단 한 섹션에 모음. 종류별 섹션은 스펙만 유지 (사용자 요청) |
| 2026-06-19 | 차트 & 그래프 패턴 페이지 신규 작성 — 꺾은선(연간 흐름)·막대(연간 추이·일별 인센티브)·비율 바(처리 상태·카테고리별) 라이브 데모 + 종류별 스펙 |