Google Chart JavaScript: 구글 차트로 반응형 대시보드 라인 차트 만들기 (튜토리얼)

// Material Line 패키지 로드
google.charts.load("current", { packages: ["line"], language: "ko" });
google.charts.setOnLoadCallback(init);

async function init() {
    const [visit, reg] = await Promise.all([
        fetch("/admin/weekUserVisit").then((r) => r.json()),
        fetch("/admin/weekUserReg").then((r) => r.json()),
    ]);

    // 최근 7일(오늘 포함) 날짜 배열: 과거 → 오늘 순
    const days = buildLast7Days();

    // DataTable 구성
    const data = new google.visualization.DataTable();
    data.addColumn("date", "날짜");
    data.addColumn("number", "방문자 수");
    data.addColumn("number", "회원가입 수");

    const rows = days.map((d, i) => [
        d,
        Number(visit?.[i] ?? 0),
        Number(reg?.[i] ?? 0),
    ]);
    data.addRows(rows);

    // 축 범위 계산 (여유값 포함)
    const maxVisit = Math.max(...rows.map((r) => r[1]));
    const maxReg = Math.max(...rows.map((r) => r[2]));

    const options = {
        chart: {
            title: "사용자 통계",
            subtitle: "최근 7일 방문자 및 회원가입 수",
        },

        legend: { position: "bottom" },

        // 듀얼 축: 방문(0)과 가입(1)을 각각 다른 Y축에 매핑
        series: {
            0: { targetAxisIndex: 0 },
            1: { targetAxisIndex: 1 },
        },
        vAxes: {
            0: { viewWindow: { min: 0, max: niceMax(maxVisit) } },
            1: { viewWindow: { min: 0, max: niceMax(maxReg) } },
        },

        // x축 날짜 포맷 (데이터 타입은 date 유지)
        hAxis: {
            format: "M/d",
            gridlines: { count: 7 },
        },

        // 여백(대시보드에서 답답함 방지)
        chartArea: { left: 56, right: 56, top: 60, bottom: 72 },

        // 디자인 시스템이 있으면 색상 통일 (선택)
        // colors: ["#620017", "#0066ff"],
    };

    const chartEl = document.getElementById("user-stats-chart");
    const chart = new google.charts.Line(chartEl);

    const draw = () => chart.draw(data, google.charts.Line.convertOptions(options));
    draw();

    // 반응형 리사이즈
    window.addEventListener("resize", debounce(draw, 150));
}

function buildLast7Days() {
    const result = [];
    const now = new Date();

    // 날짜 경계 이슈를 줄이기 위해 "정오"로 고정하는 패턴을 자주 씁니다.
    for (let i = 6; i >= 0; i--) {
        const d = new Date(now);
        d.setDate(now.getDate() - i);
        d.setHours(12, 0, 0, 0);
        result.push(d);
    }
    return result;
}

function niceMax(v) {
    // 작은 값에서 소수점/시각적 답답함 방지
    if (!Number.isFinite(v) || v <= 0) return 4;
    if (v < 4) return 4;
    return Math.ceil(v * 1.1);
}

function debounce(fn, delay) {
    let t = null;
    return (...args) => {
        clearTimeout(t);
        t = setTimeout(() => fn(...args), delay);
    };
}