반폭 · 지표 3개와 스파크라인

지표 3개의 현재 값과 최근 흐름을 한 칸에 놓을 때. 지표 이름 7자 이내, 값 5자 이내, 값 아래 설명 15자 이내. 강조 지표 1개. 값 바꾸는 법: .r 하나가 한 지표. .k 의 b=이름, span=기간. polyline points 는 x 0~120(점 개수로 등분), y = 36 - (값 - 최솟값) ÷ (최댓값 - 최솟값) × 32(위가 0, 아래가 40). 끝점 i 의 top(px)은 마지막 y 와 같게. .v 의 b=현재 값(small 단위), span=증감 설명. 강조 지표 하나에 class="hot". 2~3개.

직접 제작. Edward Tufte 의 스파크라인과 대시보드 KPI 행 방식 참고. 축과 눈금 없이 선과 끝점만 그림.

<div class="dk dkh dkh-t-spark"><div class="dk-card"><p class="dk-lb">주요 지표 최근 8주 흐름</p><div class="ls">
<div class="r hot"><div class="k"><b>전환 건수</b><span>최근 8주</span></div><div class="sp"><svg width="100%" viewBox="0 0 120 40" preserveAspectRatio="none"><polyline points="0,30 17,27 34,29 51,22 69,24 86,15 103,12 120,6"/></svg><i style="top:6px"></i></div><div class="v"><b>312<small>건</small></b><span>8주 전 대비 +18%</span></div></div>
<div class="r"><div class="k"><b>전환당 비용</b><span>최근 8주</span></div><div class="sp"><svg width="100%" viewBox="0 0 120 40" preserveAspectRatio="none"><polyline points="0,10 17,13 34,11 51,18 69,20 86,26 103,25 120,32"/></svg><i style="top:32px"></i></div><div class="v"><b>86<small></small></b><span>8주 전을 100으로 둔 지수</span></div></div>
<div class="r"><div class="k"><b>클릭률</b><span>최근 8주</span></div><div class="sp"><svg width="100%" viewBox="0 0 120 40" preserveAspectRatio="none"><polyline points="0,28 17,25 34,27 51,21 69,23 86,17 103,18 120,13"/></svg><i style="top:13px"></i></div><div class="v"><b>2.9<small>%</small></b><span>8주 전 대비 +0.4%p</span></div></div>
</div></div></div>

.dkh-t-spark .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-spark .dk-lb{margin:0 0 10px}
.dkh-t-spark .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-spark .r{flex:1;display:grid;grid-template-columns:84px 1fr 136px;column-gap:16px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.dkh-t-spark .r:first-child{border-top-color:var(--line2)}
.dkh-t-spark .k b{display:block;font-size:var(--f-sm);font-weight:600;line-height:1.45;white-space:nowrap}
.dkh-t-spark .k span{display:block;font-size:var(--f-cap);color:var(--mu)}
.dkh-t-spark .sp{position:relative;height:40px;margin-right:4px}
.dkh-t-spark .sp svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.dkh-t-spark .sp polyline{fill:none;stroke:var(--g3);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.dkh-t-spark .sp i{position:absolute;right:-4px;width:7px;height:7px;margin-top:-3.5px;border-radius:4px;background:var(--g3)}
.dkh-t-spark .r.hot .sp polyline{stroke:var(--ac)}
.dkh-t-spark .r.hot .sp i{background:var(--ac)}
.dkh-t-spark .v b{display:block;font-size:var(--f-xl);font-weight:700;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dkh-t-spark .v b small{font-size:var(--f-sm);font-weight:600;margin-left:2px;letter-spacing:0}
.dkh-t-spark .v span{display:block;font-size:var(--f-cap);color:var(--mu);white-space:nowrap}