1c:I[88678,["8500","static/chunks/8500-01a63dafd809e317.js","3725","static/chunks/3725-1271f26d54bf6b57.js","7645","static/chunks/7645-1ca8d29f22f0cbd8.js","9695","static/chunks/9695-49a7c029c38ce6ae.js","2555","static/chunks/2555-08f52e68208a57e8.js","2395","static/chunks/2395-5e305d89191e3da6.js","294","static/chunks/app/library/%5Bslug%5D/page-2dadb29d2213cdf3.js"],"LibraryDetail"] 1f:I[86869,[],"IconMark"] 1d:T42b9,"use client"; import { useEffect, useMemo, useRef, useState, type HTMLAttributes, type KeyboardEvent, type PointerEvent } from "react"; import { ArrowDownRight, ArrowUpRight } from "lucide-react"; const DAY = 86_400_000; const W = 600; // SVG 좌표계 크기(viewBox). 실제 크기는 CSS가 정하고 SVG가 늘어납니다. const H = 200; const SAMPLES = 120; // 어떤 기간이든 같은 점 개수로 다시 뽑아야 경로가 자연스럽게 모핑됩니다. const WEEKDAYS = ["일", "월", "화", "수", "목", "금", "토"]; // 시드가 같으면 항상 같은 수열을 내는 의사 난수(mulberry32) — 서버와 브라우저의 첫 화면이 같아집니다. function seeded(seed: number) { return () => { seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } /** 성장 추세 + 주말 감소 + 신규 강의 오픈 효과를 섞은 일별 샘플 데이터 */ export function makeSampleData(days = 180, endDate = "2026-10-15") { const random = seeded(7); const end = Date.parse(endDate); return Array.from({ length: days }, (_, i) => { const weekday = new Date(end - (days - 1 - i) * DAY).getUTCDay(); const trend = 360 + i * 1.6 + Math.sin(i / 9) * 38; const launch = i > 140 ? 170 * Math.exp(-(i - 140) / 9) : 0; const weekend = weekday === 0 || weekday === 6 ? 0.74 : 1; return Math.round((trend + launch) * weekend * (0.92 + random() * 0.16)); }); } // Catmull-Rom 보간: 이웃한 네 점으로 두 점 사이를 부드러운 곡선으로 채워 count개 점으로 다시 뽑습니다. function resample(values: number[], count: number) { const last = values.length - 1; return Array.from({ length: count }, (_, k) => { const u = (k / (count - 1)) * last; const i = Math.min(Math.floor(u), last - 1); const t = u - i; const p0 = values[Math.max(i - 1, 0)], p1 = values[i], p2 = values[i + 1], p3 = values[Math.min(i + 2, last)]; return 0.5 * (2 * p1 + (p2 - p0) * t + (2 * p0 - 5 * p1 + 4 * p2 - p3) * t * t + (3 * p1 - p0 - 3 * p2 + p3) * t * t * t); }); } // 눈금이 보기 좋은 수(1·1.5·2·2.5·3·4·5…)로 떨어지도록 3칸짜리 축의 최댓값을 정합니다. function niceTop(max: number) { const rough = max / 3; const power = 10 ** Math.floor(Math.log10(rough)); const step = [1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].find(n => n * power >= rough)! * power; return step * 3; } /** 숫자 배열을 목표값까지 부드럽게 따라가게 만드는 훅 (count-up과 경로 모핑에 함께 씁니다) */ function useTweened(target: number[], duration: number, initial: number[]) { const [value, setValue] = useState(initial); const current = useRef(initial); // 배열은 렌더링마다 새로 만들어질 수 있으니, 값이 실제로 바뀔 때만 다시 움직이도록 문자열 키를 씁니다. const key = target.map(v => v.toFixed(2)).join(" "); useEffect(() => { const from = current.current; const to = key.split(" ").map(Number); const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const start = performance.now(); let raf = 0; const tick = (now: number) => { const t = reduce ? 1 : Math.min((now - start) / duration, 1); const eased = 1 - (1 - t) ** 3; current.current = to.map((end, i) => (from[i] ?? end) + (end - (from[i] ?? end)) * eased); setValue(current.current); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [key, duration]); return value; } const fmt = (value: number) => Math.round(value).toLocaleString("ko-KR"); const short = (value: number) => (value >= 1000 ? `${+(value / 1000).toFixed(1)}k` : `${Math.round(value)}`); export interface LiveAreaChartProps extends HTMLAttributes { title?: string; unit?: string; /** 일별 값(오래된 날 → 최근). 이전 기간과 비교하려면 가장 긴 기간의 2배 길이를 넣어 주세요. */ data?: number[]; /** data 마지막 값의 날짜 (YYYY-MM-DD) */ endDate?: string; /** 기간 탭(일 단위) */ ranges?: number[]; /** 오늘 값이 조금씩 늘어나는 실시간 연출 */ live?: boolean; /** 조작이 없으면 기간 탭을 자동으로 넘깁니다(소개용). */ autoPlay?: boolean; } export function LiveAreaChart({ title = "일일 활성 학습자", unit = "명", data, endDate = "2026-10-15", ranges = [7, 30, 90], live = true, autoPlay = false, className = "", ...props }: LiveAreaChartProps) { const [rangeIndex, setRangeIndex] = useState(1); const [hover, setHover] = useState(null); const [liveBump, setLiveBump] = useState(0); const touched = useRef(false); const tabRefs = useRef<(HTMLButtonElement | null)[]>([]); const days = ranges[rangeIndex]; const longest = Math.max(...ranges); const base = useMemo(() => data ?? makeSampleData(longest * 2, endDate), [data, endDate, longest]); const series = useMemo(() => [...base.slice(0, -1), base[base.length - 1] + liveBump], [base, liveBump]); const values = useMemo(() => series.slice(-days), [series, days]); const stats = useMemo(() => { const total = values.reduce((sum, v) => sum + v, 0); const previous = series.slice(-days * 2, -days).reduce((sum, v) => sum + v, 0); return { total, average: total / values.length, peak: Math.max(...values), delta: previous ? ((total - previous) / previous) * 100 : 0, top: niceTop(Math.max(...values) * 1.06) }; }, [values, series, days]); // 값 → 픽셀 y로 바꾼 뒤 같은 개수로 다시 뽑으면, 7일과 90일 사이도 점 대 점으로 이어 붙일 수 있습니다. const target = useMemo(() => resample(values.map(v => H - (v / stats.top) * H), SAMPLES), [values, stats.top]); const shape = useTweened(target, 800, Array(SAMPLES).fill(H)); const kpiTarget = useMemo(() => [stats.total, stats.average, stats.peak, stats.delta], [stats]); const [total, average, peak, delta] = useTweened(kpiTarget, 1100, [0, 0, 0, 0]); useEffect(() => { if (!live) return; const id = setInterval(() => setLiveBump(b => (b < 90 ? b + 1 + Math.floor(Math.random() * 3) : b)), 2600); return () => clearInterval(id); }, [live]); useEffect(() => { if (!autoPlay || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const id = setInterval(() => { if (!touched.current) setRangeIndex(i => (i + 1) % ranges.length); }, 4200); return () => clearInterval(id); }, [autoPlay, ranges.length]); function selectRange(index: number, focus = false) { touched.current = true; setHover(null); setRangeIndex(index); if (focus) tabRefs.current[index]?.focus(); } function handleTabKey(event: KeyboardEvent) { const move = { ArrowRight: 1, ArrowLeft: -1 }[event.key]; if (!move) return; event.preventDefault(); selectRange((rangeIndex + move + ranges.length) % ranges.length, true); } // 포인터의 x 비율로 가장 가까운 날짜를 찾습니다. 선 위를 정확히 겨냥하지 않아도 됩니다. function pick(event: PointerEvent) { touched.current = true; const box = event.currentTarget.getBoundingClientRect(); const ratio = Math.min(Math.max((event.clientX - box.left) / box.width, 0), 1); setHover(Math.round(ratio * (values.length - 1))); } function handleChartKey(event: KeyboardEvent) { const last = values.length - 1; const current = hover ?? last; const next = { ArrowLeft: current - 1, ArrowRight: current + 1, Home: 0, End: last }[event.key]; if (event.key === "Escape") setHover(null); if (next === undefined) return; event.preventDefault(); touched.current = true; setHover(Math.min(Math.max(next, 0), last)); } const linePath = shape.map((y, k) => `${k ? "L" : "M"}${((k / (SAMPLES - 1)) * W).toFixed(1)} ${y.toFixed(1)}`).join(""); const dateOf = (index: number) => new Date(Date.parse(endDate) - (values.length - 1 - index) * DAY); const label = (date: Date) => `${date.getUTCMonth() + 1}.${String(date.getUTCDate()).padStart(2, "0")}`; const xTicks = values.length <= 7 ? values.map((_, i) => i) : [0, 1, 2, 3, 4].map(j => Math.round((j * (values.length - 1)) / 4)); const lastY = (shape[SAMPLES - 1] / H) * 100; const up = stats.delta >= 0; const point = hover === null ? null : { x: (hover / (values.length - 1)) * 100, y: (1 - values[hover] / stats.top) * 100, date: dateOf(hover), value: values[hover] }; return (

{ touched.current = true; props.onPointerDown?.(event); }} className={`lac-root relative w-full overflow-hidden rounded-3xl border border-white/10 bg-[#0b0e1d]/90 p-4 text-white shadow-[0_30px_80px_-30px_rgba(76,61,200,.55),inset_0_1px_0_rgba(255,255,255,.08)] backdrop-blur sm:p-6 ${className}`} >

{title}

{/* 선택 표시는 하나만 두고 translateX로 미끄러지게 옮깁니다. */} {ranges.map((range, i) => ( ))}

{fmt(total)} {unit}

{up ? : } {Math.abs(delta).toFixed(1)}%{up ? " 증가" : " 감소"}, 이전 {days}일 대비

일 평균: {fmt(average)}
최고: {fmt(peak)}

event.pointerType === "mouse" && setHover(null)} onKeyDown={handleChartKey} onBlur={() => setHover(null)} className="relative ml-9 mt-4 h-[136px] cursor-crosshair touch-pan-y rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-violet-300/70 focus-visible:ring-offset-4 focus-visible:ring-offset-[#0b0e1d] sm:h-[200px]" > {[0, 1, 2, 3].map(i => (

{short(stats.top * (1 - i / 3))}

))} {/* 면은 CSS 마스크로 아래로 갈수록 투명하게, 선은 drop-shadow로 빛나게 — SVG id가 필요 없어 여러 개를 써도 충돌하지 않습니다. */} {point ? ( <>

82 ? "-88%" : "-50%"}, ${point.y < 38 ? "16px" : "calc(-100% - 16px)"})` }} >

{fmt(point.value)} {unit}

{hover === values.length - 1 ? "오늘" : `${point.date.getUTCMonth() + 1}월 ${point.date.getUTCDate()}일`} ({WEEKDAYS[point.date.getUTCDay()]})

) : ( )}

{xTicks.map((index, j) => ( {label(dateOf(index))} ))}

); } export default LiveAreaChart;1e:Tcbf8,

13:["$","main",null,{"id":"main-content","tabIndex":-1,"className":"library_page__IxXwj","children":[["$","div",null,{"className":"library_headerSpace__cyKqF","children":"$L1b"}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"LearningResource\",\"name\":\"라이브 영역 차트 카드\",\"description\":\"기간 탭을 바꾸면 영역 차트가 모핑되고 KPI가 올라가는 분석 카드\",\"url\":\"https://aicoder.kr/library/live-area-chart\",\"inLanguage\":\"ko-KR\",\"learningResourceType\":\"코드 예제 및 실습\",\"educationalLevel\":\"응용\"},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"홈\",\"item\":\"https://aicoder.kr/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"라이브러리\",\"item\":\"https://aicoder.kr/library\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"라이브 영역 차트 카드\",\"item\":\"https://aicoder.kr/library/live-area-chart\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"live-area-chart","tags":["React","Tailwind","SVG","차트","count-up","requestAnimationFrame"],"files":[{"name":"live-area-chart.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"import { LiveAreaChart } from \"@/components/ui/live-area-chart\";\n\nexport default function Demo() {\n return (\n

\n \n

\n );\n}","language":"tsx"}],"level":"응용","title":"라이브 영역 차트 카드","author":"AI Coder 예제","license":"MIT","category":"data-chart","exercise":"ranges를 [7, 14, 30, 90]으로 바꿔 탭이 자동으로 늘어나는지 확인해 보세요. 선과 면의 색을 브랜드 색으로 바꾸고, data에 직접 만든 숫자 배열을 넣어 감소 추세일 때 배지가 빨간색으로 바뀌는지 확인해 보세요.","sourceUrl":"","objectives":["차트 라이브러리 없이 viewBox와 path 문자열만으로 영역 차트와 빛나는 선 그리기","길이가 다른 데이터를 같은 개수의 점으로 다시 뽑아(Catmull-Rom 보간) 경로를 자연스럽게 모핑하기","하나의 트윈 훅으로 숫자 count-up과 경로 애니메이션을 함께 처리하고 동작 줄이기 설정 존중하기","포인터·터치·키보드로 가장 가까운 날짜를 찾아 십자선과 툴팁 보여 주기"],"description":"기간 탭을 바꾸면 영역 차트가 모핑되고 KPI가 올라가는 분석 카드","previewHtml":"$1e","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"live-area-chart.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { useEffect, useMemo, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" KeyboardEvent, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" PointerEvent } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { ArrowDownRight, ArrowUpRight } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DAY","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"86_400_000","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"W","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"600","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"// SVG 좌표계 크기(viewBox). 실제 크기는 CSS가 정하고 SVG가 늘어납니다.","color":"#8B949E"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"H","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"200","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SAMPLES","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"120","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"// 어떤 기간이든 같은 점 개수로 다시 뽑아야 경로가 자연스럽게 모핑됩니다.","color":"#8B949E"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"WEEKDAYS","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"\"일\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"월\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"화\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"수\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"목\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"금\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"토\"","color":"#A5D6FF"},{"content":"];","color":"#E6EDF3"}],[],[{"content":"// 시드가 같으면 항상 같은 수열을 내는 의사 난수(mulberry32) — 서버와 브라우저의 첫 화면이 같아집니다.","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"seeded","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"seed","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" seed ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (seed ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0x6d2b79f5","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" t ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"imul","color":"#D2A8FF"},{"content":"(seed ","color":"#E6EDF3"},{"content":"^","color":"#FF7B72"},{"content":" (seed ","color":"#E6EDF3"},{"content":">>>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"15","color":"#79C0FF"},{"content":"), ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" seed);","color":"#E6EDF3"}],[{"content":" t ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (t ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"imul","color":"#D2A8FF"},{"content":"(t ","color":"#E6EDF3"},{"content":"^","color":"#FF7B72"},{"content":" (t ","color":"#E6EDF3"},{"content":">>>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"7","color":"#79C0FF"},{"content":"), ","color":"#E6EDF3"},{"content":"61","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" t)) ","color":"#E6EDF3"},{"content":"^","color":"#FF7B72"},{"content":" t;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" ((t ","color":"#E6EDF3"},{"content":"^","color":"#FF7B72"},{"content":" (t ","color":"#E6EDF3"},{"content":">>>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"14","color":"#79C0FF"},{"content":")) ","color":"#E6EDF3"},{"content":">>>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"4294967296","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" };","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"/** 성장 추세 + 주말 감소 + 신규 강의 오픈 효과를 섞은 일별 샘플 데이터 */","color":"#8B949E"}],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"makeSampleData","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"days","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"180","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"endDate","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"2026-10-15\"","color":"#A5D6FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"random","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"seeded","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"7","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"end","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Date.","color":"#E6EDF3"},{"content":"parse","color":"#D2A8FF"},{"content":"(endDate);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" Array.","color":"#E6EDF3"},{"content":"from","color":"#D2A8FF"},{"content":"({ length: days }, (","color":"#E6EDF3"},{"content":"_","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"weekday","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"new","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Date","color":"#D2A8FF"},{"content":"(end ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" (days ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" i) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DAY","color":"#79C0FF"},{"content":").","color":"#E6EDF3"},{"content":"getUTCDay","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"trend","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"360","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" i ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1.6","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"sin","color":"#D2A8FF"},{"content":"(i ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"9","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"38","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"launch","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" i ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"140","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"170","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"exp","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"(i ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"140","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"9","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"weekend","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" weekday ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" weekday ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"6","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.74","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"round","color":"#D2A8FF"},{"content":"((trend ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" launch) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" weekend ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"0.92","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.16","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" });","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// Catmull-Rom 보간: 이웃한 네 점으로 두 점 사이를 부드러운 곡선으로 채워 count개 점으로 다시 뽑습니다.","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"resample","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"values","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"[], ","color":"#E6EDF3"},{"content":"count","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"last","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" values.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" Array.","color":"#E6EDF3"},{"content":"from","color":"#D2A8FF"},{"content":"({ length: count }, (","color":"#E6EDF3"},{"content":"_","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"k","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"u","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (k ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" (count ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":")) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" last;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"i","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"min","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"floor","color":"#D2A8FF"},{"content":"(u), last ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"t","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" u ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" i;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"p0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" values[Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"(i ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":")], ","color":"#E6EDF3"},{"content":"p1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" values[i], ","color":"#E6EDF3"},{"content":"p2","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" values[i ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":"], ","color":"#E6EDF3"},{"content":"p3","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" values[Math.","color":"#E6EDF3"},{"content":"min","color":"#D2A8FF"},{"content":"(i ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", last)];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.5","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" p1 ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" (p2 ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" p0) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" t ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" p0 ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"5","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" p1 ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"4","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" p2 ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" p3) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" t ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" t ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" p1 ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" p0 ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" p2 ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" p3) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" t ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" t ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" t);","color":"#E6EDF3"}],[{"content":" });","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// 눈금이 보기 좋은 수(1·1.5·2·2.5·3·4·5…)로 떨어지도록 3칸짜리 축의 최댓값을 정합니다.","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"niceTop","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"max","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"rough","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" max ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"power","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"10","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"**","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"floor","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"log10","color":"#D2A8FF"},{"content":"(rough));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"step","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"1.5","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"2.5","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"4","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"5","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"6","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"8","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"10","color":"#79C0FF"},{"content":"].","color":"#E6EDF3"},{"content":"find","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"n","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" n ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" power ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" rough)","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" power;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" step ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"/** 숫자 배열을 목표값까지 부드럽게 따라가게 만드는 훅 (count-up과 경로 모핑에 함께 씁니다) */","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useTweened","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"target","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"[], ","color":"#E6EDF3"},{"content":"duration","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"initial","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"[]) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"value","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setValue","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(initial);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"current","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"(initial);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 배열은 렌더링마다 새로 만들어질 수 있으니, 값이 실제로 바뀔 때만 다시 움직이도록 문자열 키를 씁니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" target.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"v","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" v.","color":"#E6EDF3"},{"content":"toFixed","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":")).","color":"#E6EDF3"},{"content":"join","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"from","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" current.current;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"to","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" key.","color":"#E6EDF3"},{"content":"split","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":").","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(Number);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"reduce","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" window.","color":"#E6EDF3"},{"content":"matchMedia","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"(prefers-reduced-motion: reduce)\"","color":"#A5D6FF"},{"content":").matches;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"start","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" performance.","color":"#E6EDF3"},{"content":"now","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" raf ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tick","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"now","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"t","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" reduce ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"min","color":"#D2A8FF"},{"content":"((now ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" start) ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" duration, ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"eased","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" t) ","color":"#E6EDF3"},{"content":"**","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" current.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" to.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"end","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (from[i] ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" end) ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" (end ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" (from[i] ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" end)) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" eased);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setValue","color":"#D2A8FF"},{"content":"(current.current);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (t ","color":"#E6EDF3"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":") raf ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"requestAnimationFrame","color":"#D2A8FF"},{"content":"(tick);","color":"#E6EDF3"}],[{"content":" };","color":"#E6EDF3"}],[{"content":" raf ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"requestAnimationFrame","color":"#D2A8FF"},{"content":"(tick);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"cancelAnimationFrame","color":"#D2A8FF"},{"content":"(raf);","color":"#E6EDF3"}],[{"content":" }, [key, duration]);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" value;","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"fmt","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"value","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"round","color":"#D2A8FF"},{"content":"(value).","color":"#E6EDF3"},{"content":"toLocaleString","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"ko-KR\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"short","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"value","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (value ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1000","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"+","color":"#FF7B72"},{"content":"(","color":"#A5D6FF"},{"content":"value","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1000","color":"#79C0FF"},{"content":").","color":"#A5D6FF"},{"content":"toFixed","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":")","color":"#A5D6FF"},{"content":"}k`","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"Math","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"round","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"value","color":"#E6EDF3"},{"content":")","color":"#A5D6FF"},{"content":"}`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"LiveAreaChartProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"title","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"unit","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 일별 값(오래된 날 → 최근). 이전 기간과 비교하려면 가장 긴 기간의 2배 길이를 넣어 주세요. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"data","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"[];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** data 마지막 값의 날짜 (YYYY-MM-DD) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"endDate","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 기간 탭(일 단위) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"ranges","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"[];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 오늘 값이 조금씩 늘어나는 실시간 연출 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"live","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 조작이 없으면 기간 탭을 자동으로 넘깁니다(소개용). */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"autoPlay","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"LiveAreaChart","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"title","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"일일 활성 학습자\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"unit","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"명\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"data","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"endDate","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"2026-10-15\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"ranges","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"7","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"30","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"90","color":"#79C0FF"},{"content":"], ","color":"#E6EDF3"},{"content":"live","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"autoPlay","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"className","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"LiveAreaChartProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"rangeIndex","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setRangeIndex","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"hover","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setHover","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"liveBump","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setLiveBump","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"touched","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tabRefs","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<(","color":"#E6EDF3"},{"content":"HTMLButtonElement","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":")[]>([]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"days","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ranges[rangeIndex];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"longest","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"ranges);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"base","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useMemo","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" data ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"makeSampleData","color":"#D2A8FF"},{"content":"(longest ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", endDate), [data, endDate, longest]);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"series","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useMemo","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"base.","color":"#E6EDF3"},{"content":"slice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":"), base[base.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" liveBump], [base, liveBump]);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"values","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useMemo","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" series.","color":"#E6EDF3"},{"content":"slice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"days), [series, days]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"stats","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useMemo","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"total","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" values.","color":"#E6EDF3"},{"content":"reduce","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"sum","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"v","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" sum ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" v, ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"previous","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" series.","color":"#E6EDF3"},{"content":"slice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"days ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"days).","color":"#E6EDF3"},{"content":"reduce","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"sum","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"v","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" sum ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" v, ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" { total, average: total ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" values.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":", peak: Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"values), delta: previous ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ((total ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" previous) ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" previous) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"100","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", top: ","color":"#E6EDF3"},{"content":"niceTop","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"values) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1.06","color":"#79C0FF"},{"content":") };","color":"#E6EDF3"}],[{"content":" }, [values, series, days]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 값 → 픽셀 y로 바꾼 뒤 같은 개수로 다시 뽑으면, 7일과 90일 사이도 점 대 점으로 이어 붙일 수 있습니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"target","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useMemo","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"resample","color":"#D2A8FF"},{"content":"(values.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"v","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"H","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" (v ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" stats.top) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"H","color":"#79C0FF"},{"content":"), ","color":"#E6EDF3"},{"content":"SAMPLES","color":"#79C0FF"},{"content":"), [values, stats.top]);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"shape","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useTweened","color":"#D2A8FF"},{"content":"(target, ","color":"#E6EDF3"},{"content":"800","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"Array","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"SAMPLES","color":"#79C0FF"},{"content":").","color":"#E6EDF3"},{"content":"fill","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"H","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"kpiTarget","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useMemo","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" [stats.total, stats.average, stats.peak, stats.delta], [stats]);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"total","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"average","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"peak","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"delta","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useTweened","color":"#D2A8FF"},{"content":"(kpiTarget, ","color":"#E6EDF3"},{"content":"1100","color":"#79C0FF"},{"content":", [","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"live) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setInterval","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setLiveBump","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"b","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (b ","color":"#E6EDF3"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"90","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" b ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"floor","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" b)), ","color":"#E6EDF3"},{"content":"2600","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"clearInterval","color":"#D2A8FF"},{"content":"(id);","color":"#E6EDF3"}],[{"content":" }, [live]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"autoPlay ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" window.","color":"#E6EDF3"},{"content":"matchMedia","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"(prefers-reduced-motion: reduce)\"","color":"#A5D6FF"},{"content":").matches) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setInterval","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"touched.current) ","color":"#E6EDF3"},{"content":"setRangeIndex","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (i ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" ranges.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }, ","color":"#E6EDF3"},{"content":"4200","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"clearInterval","color":"#D2A8FF"},{"content":"(id);","color":"#E6EDF3"}],[{"content":" }, [autoPlay, ranges.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":"]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"selectRange","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"focus","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" touched.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setHover","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setRangeIndex","color":"#D2A8FF"},{"content":"(index);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (focus) tabRefs.current[index]?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleTabKey","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"KeyboardEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLButtonElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"move","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ArrowRight: ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ArrowLeft: ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":" }[event.key];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"move) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"selectRange","color":"#D2A8FF"},{"content":"((rangeIndex ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" move ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ranges.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" ranges.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 포인터의 x 비율로 가장 가까운 날짜를 찾습니다. 선 위를 정확히 겨냥하지 않아도 됩니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"pick","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"PointerEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" touched.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"box","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" event.currentTarget.","color":"#E6EDF3"},{"content":"getBoundingClientRect","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ratio","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"min","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"((event.clientX ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" box.left) ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" box.width, ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"), ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setHover","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"round","color":"#D2A8FF"},{"content":"(ratio ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" (values.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":")));","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleChartKey","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"KeyboardEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"last","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" values.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"current","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" hover ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" last;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"next","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ArrowLeft: current ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ArrowRight: current ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", Home: ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", End: last }[event.key];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (event.key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Escape\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"setHover","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (next ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" touched.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setHover","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"min","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"(next, ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"), last));","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"linePath","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" shape.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"y","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"k","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"k","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"L\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"M\"}${","color":"#A5D6FF"},{"content":"((","color":"#A5D6FF"},{"content":"k","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"/","color":"#FF7B72"},{"content":" (","color":"#A5D6FF"},{"content":"SAMPLES","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":")) ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"W","color":"#79C0FF"},{"content":").","color":"#A5D6FF"},{"content":"toFixed","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":")","color":"#A5D6FF"},{"content":"} ${","color":"#A5D6FF"},{"content":"y","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"toFixed","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":")","color":"#A5D6FF"},{"content":"}`","color":"#A5D6FF"},{"content":").","color":"#E6EDF3"},{"content":"join","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"dateOf","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"new","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Date","color":"#D2A8FF"},{"content":"(Date.","color":"#E6EDF3"},{"content":"parse","color":"#D2A8FF"},{"content":"(endDate) ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" (values.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" index) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DAY","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"label","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"date","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Date","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"date","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"getUTCMonth","color":"#D2A8FF"},{"content":"() ","color":"#A5D6FF"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":"}.${","color":"#A5D6FF"},{"content":"String","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"date","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"getUTCDate","color":"#D2A8FF"},{"content":"()).","color":"#A5D6FF"},{"content":"padStart","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"2","color":"#79C0FF"},{"content":", ","color":"#A5D6FF"},{"content":"\"0\"","color":"#A5D6FF"},{"content":")","color":"#A5D6FF"},{"content":"}`","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"xTicks","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" values.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"<=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"7","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" values.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"_","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" i) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"4","color":"#79C0FF"},{"content":"].","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"j","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"round","color":"#D2A8FF"},{"content":"((j ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" (values.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":")) ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"4","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"lastY","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (shape[","color":"#E6EDF3"},{"content":"SAMPLES","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"H","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"100","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"up","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" stats.delta ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"point","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" hover ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" { x: (hover ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" (values.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":")) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"100","color":"#79C0FF"},{"content":", y: (","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" values[hover] ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" stats.top) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"100","color":"#79C0FF"},{"content":", date: ","color":"#E6EDF3"},{"content":"dateOf","color":"#D2A8FF"},{"content":"(hover), value: values[hover] };","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" touched.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" props.","color":"#E6EDF3"},{"content":"onPointerDown","color":"#D2A8FF"},{"content":"?.(event);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`lac-root relative w-full overflow-hidden rounded-3xl border border-white/10 bg-[#0b0e1d]/90 p-4 text-white shadow-[0_30px_80px_-30px_rgba(76,61,200,.55),inset_0_1px_0_rgba(255,255,255,.08)] backdrop-blur sm:p-6 ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pointer-events-none absolute -top-24 right-0 size-64 rounded-full bg-[#7c6cff]/20 blur-3xl\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative flex items-center justify-between gap-3\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-2 text-[13px] font-medium text-white/70\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative flex size-2\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"lac-ping absolute inset-0 rounded-full bg-emerald-400\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative size-2 rounded-full bg-emerald-400\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"tablist\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"조회 기간\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative grid rounded-full border border-white/10 bg-white/[.04] p-1\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ gridTemplateColumns: ","color":"#E6EDF3"},{"content":"`repeat(${","color":"#A5D6FF"},{"content":"ranges","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"length","color":"#79C0FF"},{"content":"}, minmax(0, 1fr))`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 선택 표시는 하나만 두고 translateX로 미끄러지게 옮깁니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-y-1 left-1 rounded-full bg-white/[.12] shadow-[inset_0_1px_0_rgba(255,255,255,.15)] transition-transform duration-300 ease-out\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ width: ","color":"#E6EDF3"},{"content":"`calc((100% - 8px) / ${","color":"#A5D6FF"},{"content":"ranges","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"length","color":"#79C0FF"},{"content":"})`","color":"#A5D6FF"},{"content":", transform: ","color":"#E6EDF3"},{"content":"`translateX(${","color":"#A5D6FF"},{"content":"rangeIndex","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"100","color":"#79C0FF"},{"content":"}%)`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"ranges.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"range","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"range","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"el","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" tabRefs.current[i] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" el;","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"tab\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-selected","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"i ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" rangeIndex","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"tabIndex","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"i ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" rangeIndex ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"selectRange","color":"#D2A8FF"},{"content":"(i)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onKeyDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleTabKey","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`relative rounded-full px-3 py-1 text-xs font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-violet-300 sm:px-3.5 ${","color":"#A5D6FF"},{"content":"i","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"rangeIndex","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-white\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-white/55 hover:text-white/85\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"range","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"일","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative mt-3 flex flex-wrap items-end justify-between gap-x-6 gap-y-2\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-3\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[34px] font-bold leading-none tracking-tight tabular-nums sm:text-[40px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"fmt","color":"#D2A8FF"},{"content":"(total)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ml-1 text-base font-semibold text-white/60\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"unit","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`inline-flex items-center gap-0.5 rounded-full px-2 py-1 text-xs font-bold tabular-nums ${","color":"#A5D6FF"},{"content":"up","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-emerald-400/15 text-emerald-300\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-rose-400/15 text-rose-300\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"up ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"ArrowUpRight","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"ArrowDownRight","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"Math.","color":"#E6EDF3"},{"content":"abs","color":"#D2A8FF"},{"content":"(delta).","color":"#E6EDF3"},{"content":"toFixed","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"%<","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"sr-only\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"up ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\" 증가\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\" 감소\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":", 이전 ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"days","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"일 대비","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"dl","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex gap-5 text-right\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"dt","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[11px] text-white/50\"","color":"#A5D6FF"},{"content":">일 평균","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"dd","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-sm font-semibold tabular-nums\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"fmt","color":"#D2A8FF"},{"content":"(average)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"dt","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[11px] text-white/50\"","color":"#A5D6FF"},{"content":">최고","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"dd","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-sm font-semibold tabular-nums\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"fmt","color":"#D2A8FF"},{"content":"(peak)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"tabIndex","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"0","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"group\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"title","color":"#E6EDF3"},{"content":"} ${","color":"#A5D6FF"},{"content":"days","color":"#E6EDF3"},{"content":"}일 추이. 좌우 화살표로 날짜별 값을 확인하세요.`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerMove","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"pick","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"pick","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerLeave","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" event.pointerType ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"mouse\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setHover","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onKeyDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleChartKey","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onBlur","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setHover","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative ml-9 mt-4 h-[136px] cursor-crosshair touch-pan-y rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-violet-300/70 focus-visible:ring-offset-4 focus-visible:ring-offset-[#0b0e1d] sm:h-[200px]\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"[","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":"].","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"i","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-x-0 border-t border-dashed border-white/[.07]\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ top: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"(","color":"#A5D6FF"},{"content":"i","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"3","color":"#79C0FF"},{"content":") ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"100","color":"#79C0FF"},{"content":"}%`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"stats.top","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"lac-fade absolute right-[calc(100%+8px)] top-0 -translate-y-1/2 text-[11px] tabular-nums text-white/45\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"short","color":"#D2A8FF"},{"content":"(stats.top ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" i ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":"))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 면은 CSS 마스크로 아래로 갈수록 투명하게, 선은 drop-shadow로 빛나게 — SVG id가 필요 없어 여러 개를 써도 충돌하지 않습니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"svg","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"viewBox","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`0 0 ${","color":"#A5D6FF"},{"content":"W","color":"#79C0FF"},{"content":"} ${","color":"#A5D6FF"},{"content":"H","color":"#79C0FF"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"preserveAspectRatio","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"lac-area absolute inset-0 size-full overflow-visible\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"path","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"d","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"linePath","color":"#E6EDF3"},{"content":"}L${","color":"#A5D6FF"},{"content":"W","color":"#79C0FF"},{"content":"} ${","color":"#A5D6FF"},{"content":"H","color":"#79C0FF"},{"content":"}L0 ${","color":"#A5D6FF"},{"content":"H","color":"#79C0FF"},{"content":"}Z`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#7c6cff\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fillOpacity","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"0.55","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"svg","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"viewBox","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`0 0 ${","color":"#A5D6FF"},{"content":"W","color":"#79C0FF"},{"content":"} ${","color":"#A5D6FF"},{"content":"H","color":"#79C0FF"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"preserveAspectRatio","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"lac-line absolute inset-0 size-full overflow-visible\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"path","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"d","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"linePath","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stroke","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#a99dff\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"2.5","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"strokeLinejoin","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"round\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeLinecap","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"round\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"vectorEffect","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"non-scaling-stroke\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"point ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <>","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-y-0 w-px bg-gradient-to-b from-white/5 via-white/40 to-white/5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ left: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"x","color":"#E6EDF3"},{"content":"}%`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-[#0b0e1d] bg-white shadow-[0_0_0_4px_rgba(169,157,255,.35),0_0_16px_rgba(169,157,255,.9)]\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ left: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"x","color":"#E6EDF3"},{"content":"}%`","color":"#A5D6FF"},{"content":", top: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"y","color":"#E6EDF3"},{"content":"}%`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"status\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pointer-events-none absolute z-10 whitespace-nowrap rounded-xl border border-white/15 bg-[#151a33]/95 px-3 py-2 shadow-xl backdrop-blur\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ left: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"x","color":"#E6EDF3"},{"content":"}%`","color":"#A5D6FF"},{"content":", top: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"y","color":"#E6EDF3"},{"content":"}%`","color":"#A5D6FF"},{"content":", transform: ","color":"#E6EDF3"},{"content":"`translate(${","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"x","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"18","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"-12%\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"x","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"82","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"-88%\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"-50%\"}, ${","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"y","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"38","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"16px\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"calc(-100% - 16px)\"})`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-base font-bold leading-tight tabular-nums\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"fmt","color":"#D2A8FF"},{"content":"(point.value)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ml-0.5 text-xs font-semibold text-white/60\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"unit","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-0.5 text-[11px] text-white/60\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"hover ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" values.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"오늘\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"date","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"getUTCMonth","color":"#D2A8FF"},{"content":"() ","color":"#A5D6FF"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":"}월 ${","color":"#A5D6FF"},{"content":"point","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"date","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"getUTCDate","color":"#D2A8FF"},{"content":"()","color":"#A5D6FF"},{"content":"}일`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"WEEKDAYS","color":"#79C0FF"},{"content":"[point.date.","color":"#E6EDF3"},{"content":"getUTCDay","color":"#D2A8FF"},{"content":"()]","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":")","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute flex size-2.5 -translate-x-1/2 -translate-y-1/2\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ left: ","color":"#E6EDF3"},{"content":"\"100%\"","color":"#A5D6FF"},{"content":", top: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"lastY","color":"#E6EDF3"},{"content":"}%`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"lac-ping absolute inset-0 rounded-full bg-[#a99dff]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative size-2.5 rounded-full border-2 border-[#0b0e1d] bg-white\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative ml-9 mt-2 h-4 text-[11px] tabular-nums text-white/45\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"xTicks.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"j","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"days","color":"#E6EDF3"},{"content":"}-${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"lac-fade absolute top-0\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ left: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"(","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"/","color":"#FF7B72"},{"content":" (","color":"#A5D6FF"},{"content":"values","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":")) ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"100","color":"#79C0FF"},{"content":"}%`","color":"#A5D6FF"},{"content":", transform: ","color":"#E6EDF3"},{"content":"`translateX(${","color":"#A5D6FF"},{"content":"j","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"0\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"j","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"xTicks","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"-100%\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"-50%\"})`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"label","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"dateOf","color":"#D2A8FF"},{"content":"(index))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" .lac-area { -webkit-mask-image: linear-gradient(#000 15%, rgba(0,0,0,.45) 65%, transparent 100%); mask-image: linear-gradient(#000 15%, rgba(0,0,0,.45) 65%, transparent 100%); }","color":"#A5D6FF"}],[{"content":" .lac-line { filter: drop-shadow(0 0 6px rgba(124,108,255,.9)) drop-shadow(0 0 1px rgba(214,208,255,.8)); }","color":"#A5D6FF"}],[{"content":" .lac-ping { animation: lac-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }","color":"#A5D6FF"}],[{"content":" .lac-fade { animation: lac-fade .5s ease-out both; }","color":"#A5D6FF"}],[{"content":" @keyframes lac-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @keyframes lac-fade { from { opacity: 0; transform: translateY(3px); } }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) { .lac-ping, .lac-fade { animation: none; } }","color":"#A5D6FF"}],[{"content":" `","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"LiveAreaChart;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { LiveAreaChart } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/live-area-chart\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"Demo","color":"#D2A8FF"},{"content":"() ","color":"#FFA657"},{"content":"{","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid min-h-screen place-items-center bg-[radial-gradient(ellipse_at_50%_0%,#1d1b4b,#06070f_65%)] p-4 sm:p-8\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"LiveAreaChart","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"autoPlay","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"max-w-[640px]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}] 16:null 1a:[["$","title","0",{"children":"라이브 영역 차트 카드 · AI Coder"}],["$","meta","1",{"name":"description","content":"기간 탭을 바꾸면 영역 차트가 모핑되고 KPI가 올라가는 분석 카드"}],["$","meta","2",{"name":"application-name","content":"AI Coder"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"referrer","content":"strict-origin-when-cross-origin"}],["$","meta","5",{"name":"robots","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"name":"category","content":"education"}],["$","link","7",{"rel":"canonical","href":"https://aicoder.kr/library/live-area-chart"}],["$","meta","8",{"name":"naver-site-verification","content":"3347449a2b36f2b5cea3e0cd9fb49ae3959ff348"}],["$","meta","9",{"property":"og:title","content":"라이브 영역 차트 카드 · AI Coder"}],["$","meta","10",{"property":"og:description","content":"기간 탭을 바꾸면 영역 차트가 모핑되고 KPI가 올라가는 분석 카드"}],["$","meta","11",{"property":"og:url","content":"https://aicoder.kr/library/live-area-chart"}],["$","meta","12",{"property":"og:site_name","content":"AI Coder"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://aicoder.kr/social-card.png"}],["$","meta","15",{"property":"og:image:width","content":"1200"}],["$","meta","16",{"property":"og:image:height","content":"630"}],["$","meta","17",{"property":"og:image:alt","content":"AI Coder · AI 코딩 교육과 실전 프로젝트"}],["$","meta","18",{"property":"og:type","content":"website"}],["$","meta","19",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","20",{"name":"twitter:title","content":"라이브 영역 차트 카드 · AI Coder"}],["$","meta","21",{"name":"twitter:description","content":"기간 탭을 바꾸면 영역 차트가 모핑되고 KPI가 올라가는 분석 카드"}],["$","meta","22",{"name":"twitter:image","content":"https://aicoder.kr/social-card.png"}],["$","link","23",{"rel":"icon","href":"/favicon.ico?766d9da6178db116","type":"image/x-icon","sizes":"16x16"}],["$","link","24",{"rel":"icon","href":"/icon.png?96c6ddf66156e856","type":"image/png","sizes":"64x64"}],["$","link","25",{"rel":"apple-touch-icon","href":"/apple-icon.png?87c64c22e9bd6762","type":"image/png","sizes":"180x180"}],["$","$L1f","26",{}]]

예제에 포함된 파일