App Data
분석 차트
Charts Analytics · Insight · 읽기전용 리포트의 시각화 시스템 — 추이(Chart.js) · 델타 비교표 · 전환 퍼널 · 랭킹 막대 · 히트맵 · 행동 흐름(Sankey) · 구성(Sunburst) · 세계 지도 · 분석 링. 정본은 app/insight/UI_GUIDELINE.md + app/analytics.php. 아래는 정적 대표 목업 — 라이브 빌드는 Chart.js·ECharts·jsVectorMap로 같은 색·옵션을 그대로 씁니다(차트 라이브러리 로드 없음).
차트 팔레트
모든 차트가 공유하는 하드코드 색. 막대=어두운 퍼플, 라인=accent/그린, ECharts 다색 팔레트.
추이 · 비교
Chart.js 콤보(막대 #7A2E33 + 라인 #6B3FF6, 공통 _gx 옵션)와 델타 비교표(.dtab — 중앙 기준선 + pos/neg 바).
| 지표 | 현재 | 직전 | 증감 | Δ |
|---|---|---|---|---|
| 조회 | 374 | 0 | ▲ 100% | |
| 스토어 클릭 | 59 | 0 | ▲ 100% | |
| 머치 클릭 | 0 | 0 | ▲ 0% | |
| CTR | 15.8% | 0% | ▲ 100% | |
| 공유 | 7 | 0 | ▲ 100% | |
| 이메일·알림 | 0 | 0 | ▲ 0% |
전환 퍼널
engagement_funnel() — 단계 카운트를 그라데이션(#6B3FF6→#6B3FF6) 영역으로. 칸마다 수·비율·전환/이탈.
랭킹 · 히트맵
순위/분포의 기본 표현 .brk(라벨+트랙+값)와 채널×요일 .hmap(셀 농도 = rgba(107,63,246,n)).
행동 흐름 (Sankey)
ECharts sankey — 유입 출처 → 아티스트 → 플랫폼. nodeWidth 14 · gradient lineStyle · itemStyle #6B3FF6.
구성 · 지도
계층 구성 Sunburst(아티스트→플랫폼, 다색 팔레트)와 choropleth 세계 지도(jsVectorMap, 조회 농도 #3a1a1d→#6B3FF6).
분석 링 · KPI
점수/신뢰도 링(conic-gradient(accent, surface-2))과 리포트 상단 KPI(.stat-num 30/800).
사용 규칙
- · Chart.js는 공통
_gx옵션(투명 배경·x그리드 숨김·y그리드 #E5E5E5)으로 통일 - · 순위는
.brk, 비교는.dtab, 분포는.hmap로 통일 - · ECharts 배경
transparent, 팔레트는 가이드라인 8색 - · 측정 vs 추정 구분 · 모든 수치 tabular-nums
- · 밝은 표면·보라(
--purple)·네온 — 라이트 테마 잔재 - · 차트마다 제각각 색/옵션 (팔레트 일관성 붕괴)
- · 큰 라운드(18px+)·큰 그림자 카드
- · 축·범례 없는 흐름/지도 차트