@moda-chart/core 0.1.2

package/dist/conformance.js

@@ -0,0 +1,1608 @@
+import { describe, expect, it } from "vitest";
+/** 스펙 기본 픽스처 — 4카테고리 × 2시리즈 라인 */
+export function specOptions(extra = {}) {
+    return {
+        type: "line",
+        categories: ["1월", "2월", "3월", "4월"],
+        series: [
+            { name: "매출", values: [10, 25, 15, 30] },
+            { name: "비용", values: [6, 12, 9, 18] },
+        ],
+        width: 400,
+        height: 240,
+        legend: true,
+        tooltip: "shared",
+        zoom: true,
+        brush: true,
+        animation: false,
+        ...extra,
+    };
+}
+/** 마운트 헬퍼 — 매 테스트마다 새 인스턴스 */
+async function mountSpecChart(mount, extra = {}) {
+    const m = await mount(specOptions(extra));
+    const flush = async () => {
+        await m.flush?.();
+    };
+    return { ...m, flush };
+}
+export function runChartConformance(label, mount) {
+    describe(`${label} 렌더 계약`, () => {
+        it("뼈대 요소를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount);
+            const root = el.querySelector(".mc-root");
+            expect(root.getAttribute("role")).toBe("figure");
+            expect(root.getAttribute("tabindex")).toBe("0");
+            expect(root.getAttribute("aria-label")).toBeTruthy();
+            expect(el.querySelector(".mc-svg")).toBeTruthy();
+            expect(el.querySelector(".mc-toolbar .mc-export-svg")).toBeTruthy();
+            expect(el.querySelector(".mc-toolbar .mc-export-png")).toBeTruthy();
+            expect(el.querySelector(".mc-toolbar .mc-zoom-reset")).toBeTruthy();
+            expect(el.querySelector(".mc-overlay")).toBeTruthy();
+            expect(el.querySelector(".mc-tooltip")).toBeTruthy();
+            expect(el.querySelector(".mc-a11y")?.getAttribute("aria-live")).toBe("polite");
+            destroy();
+        });
+        it("축·그리드·시리즈·범례를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount);
+            const xTicks = el.querySelectorAll(".mc-axis-x .mc-tick-label");
+            expect(xTicks.length).toBe(4);
+            expect(xTicks[0]?.textContent).toBe("1월");
+            expect(el.querySelectorAll(".mc-axis-y .mc-tick").length).toBeGreaterThan(2);
+            expect(el.querySelectorAll(".mc-grid-line").length).toBeGreaterThan(0);
+            expect(el.querySelectorAll(".mc-series").length).toBe(2);
+            expect(el.querySelectorAll(".mc-point").length).toBe(8);
+            expect(el.querySelectorAll(".mc-line").length).toBe(2);
+            const items = el.querySelectorAll(".mc-legend-item");
+            expect(items.length).toBe(2);
+            expect(items[0]?.textContent).toContain("매출");
+            destroy();
+        });
+        it("범례 클릭으로 시리즈를 숨긴다", async () => {
+            const { el, flush, destroy } = await mountSpecChart(mount);
+            const item = el.querySelector('.mc-legend-item[data-id="매출"]');
+            item.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            await flush();
+            expect(el.querySelectorAll(".mc-series").length).toBe(1);
+            expect(el.querySelectorAll(".mc-point").length).toBe(4);
+            // 범례는 재렌더되므로 다시 조회한다
+            const after = el.querySelector('.mc-legend-item[data-id="매출"]');
+            expect(after.classList.contains("mc-hidden")).toBe(true);
+            expect(after.getAttribute("aria-pressed")).toBe("false");
+            destroy();
+        });
+        it("bar 타입은 막대를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, { type: "bar" });
+            expect(el.querySelectorAll(".mc-bar").length).toBe(8);
+            expect(el.querySelector(".mc-horizontal")).toBeNull();
+            destroy();
+        });
+        it("direction=horizontal은 수평 막대를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "bar",
+                direction: "horizontal",
+            });
+            expect(el.querySelector(".mc-horizontal")).toBeTruthy();
+            expect(el.querySelectorAll(".mc-bar").length).toBe(8);
+            destroy();
+        });
+        it("pie는 조각과 카테고리 범례를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "pie",
+                series: [{ name: "비중", values: [10, 25, 15, 30] }],
+            });
+            expect(el.querySelectorAll(".mc-slice").length).toBe(4);
+            const items = el.querySelectorAll(".mc-legend-item");
+            expect(items.length).toBe(4);
+            expect(items[1]?.textContent).toContain("2월");
+            destroy();
+        });
+        it("호버하면 공유 툴팁과 크로스헤어가 뜬다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            const plot = chart.getSnapshot().plot;
+            chart.hoverAt(plot.w / 2, plot.h / 2);
+            await flush();
+            const tip = el.querySelector(".mc-tooltip");
+            expect(tip.hidden).toBe(false);
+            expect(tip.querySelector(".mc-tooltip-title")?.textContent).toBe("3월");
+            expect(tip.querySelectorAll(".mc-tooltip-row").length).toBe(2);
+            expect(el.querySelector(".mc-crosshair")).toBeTruthy();
+            chart.clearHover();
+            await flush();
+            expect(tip.hidden).toBe(true);
+            destroy();
+        });
+        it("줌하면 리셋 버튼이 활성화되고 zoomChange가 발행된다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            let evt = null;
+            chart.on("zoomChange", (e) => {
+                evt = e;
+            });
+            chart.zoomAt(chart.getSnapshot().plot.w / 2, 2);
+            await flush();
+            expect(evt).toBeTruthy();
+            const reset = el.querySelector(".mc-zoom-reset");
+            expect(reset.disabled).toBe(false);
+            // 줌 후 카테고리 틱이 줄어든다
+            expect(el.querySelectorAll(".mc-axis-x .mc-tick-label").length).toBeLessThan(4);
+            chart.resetZoom();
+            await flush();
+            expect(reset.disabled).toBe(true);
+            destroy();
+        });
+        it("브러시 선택 영역을 렌더하고 selectionChange를 발행한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            let indices = [];
+            chart.on("selectionChange", (e) => {
+                indices = e.indices;
+            });
+            chart.setSelection({ min: 1, max: 3 });
+            await flush();
+            expect(el.querySelector(".mc-selection")).toBeTruthy();
+            expect(indices).toEqual([1, 2]);
+            chart.clearSelection();
+            await flush();
+            expect(el.querySelector(".mc-selection")).toBeNull();
+            destroy();
+        });
+        it("화살표 키로 포인트 포커스를 이동한다", async () => {
+            const { el, flush, destroy } = await mountSpecChart(mount);
+            const root = el.querySelector(".mc-root");
+            root.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+            await flush();
+            root.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+            await flush();
+            const focused = el.querySelector(".mc-point.mc-focused");
+            expect(focused).toBeTruthy();
+            expect(focused?.getAttribute("data-index")).toBe("1");
+            expect(el.querySelector(".mc-a11y")?.textContent).toContain("매출");
+            destroy();
+        });
+        it("animation:false면 mc-animated를 붙이지 않는다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                animation: false,
+            });
+            expect(el.querySelector(".mc-root").className).not.toContain("mc-animated");
+            destroy();
+        });
+        it("animation 켜짐이면 mc-animated 클래스를 붙인다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                animation: { duration: 500 },
+            });
+            const root = el.querySelector(".mc-root");
+            expect(root.className).toContain("mc-animated");
+            expect(root.style.getPropertyValue("--chart-animation-duration")).toBe("500ms");
+            destroy();
+        });
+        it("theme=dark는 data-theme을 설정한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, { theme: "dark" });
+            expect(el.querySelector(".mc-root")?.getAttribute("data-theme")).toBe("dark");
+            destroy();
+        });
+        it("데이터가 없으면 .mc-empty를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, { series: [] });
+            expect(el.querySelector(".mc-empty")).toBeTruthy();
+            destroy();
+        });
+        it("title/subtitle 옵션이 .mc-title/.mc-subtitle에 렌더된다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                title: "월별 추이",
+                subtitle: "2024 상반기",
+            });
+            expect(el.querySelector(".mc-title")?.textContent).toBe("월별 추이");
+            expect(el.querySelector(".mc-subtitle")?.textContent).toBe("2024 상반기");
+            expect(el.querySelector(".mc-title").hidden).toBe(false);
+            destroy();
+        });
+        it("dataLabels 옵션으로 값 라벨을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "bar",
+                dataLabels: true,
+            });
+            const labels = el.querySelectorAll(".mc-data-label");
+            expect(labels.length).toBe(8);
+            expect(labels[0]?.textContent).toBe("10");
+            destroy();
+        });
+        it("markLines로 값 축 기준선을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                markLines: [{ value: 15, label: "목표" }],
+            });
+            expect(el.querySelector(".mc-mark-line")).toBeTruthy();
+            expect(el.querySelector(".mc-mark-label")?.textContent).toBe("목표");
+            // 도메인 밖 값은 생략된다
+            const { el: el2, destroy: d2 } = await mountSpecChart(mount, {
+                markLines: [{ value: 9999, label: "x" }],
+            });
+            expect(el2.querySelector(".mc-mark-line")).toBeNull();
+            destroy();
+            d2();
+        });
+        it("loading 옵션은 .mc-loading 오버레이와 aria-busy를 설정한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                loading: true,
+            });
+            const overlay = el.querySelector(".mc-loading");
+            expect(overlay.hidden).toBe(false);
+            expect(el.querySelector(".mc-root")?.getAttribute("aria-busy")).toBe("true");
+            chart.setLoading(false);
+            await flush();
+            expect(overlay.hidden).toBe(true);
+            destroy();
+        });
+        it("emptyText 옵션으로 빈 상태 문구를 바꾼다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                series: [],
+                emptyText: "데이터가 없습니다",
+            });
+            expect(el.querySelector(".mc-empty")?.textContent).toBe("데이터가 없습니다");
+            destroy();
+        });
+        it("범례 hover는 다른 시리즈를 dim하고 legendHover를 발행한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            let evt = null;
+            chart.on("legendHover", (e) => {
+                evt = e;
+            });
+            const item = el.querySelector('.mc-legend-item[data-id="매출"]');
+            item.dispatchEvent(new MouseEvent("pointerover", { bubbles: true }));
+            await flush();
+            expect(evt).toEqual({ id: "매출" });
+            // 비용 시리즈 포인트만 dim
+            const dimmed = el.querySelectorAll(".mc-point.mc-dimmed");
+            expect(dimmed.length).toBe(4);
+            expect(dimmed[0]?.getAttribute("data-series-id")).toBe("비용");
+            // 범례는 매 렌더 재생성되므로 다시 조회한다
+            el.querySelector('.mc-legend-item[data-id="매출"]').dispatchEvent(new MouseEvent("pointerout", { bubbles: true }));
+            await flush();
+            expect(el.querySelectorAll(".mc-point.mc-dimmed").length).toBe(0);
+            destroy();
+        });
+        it("포커스/클릭 이벤트 — focusChange·pointDblClick·chartClick", async () => {
+            const { chart, destroy } = await mountSpecChart(mount);
+            const events = [];
+            chart.on("focusChange", (e) => events.push(`focus:${e.point?.index}`));
+            chart.on("pointDblClick", (e) => events.push(`dbl:${e.index}`));
+            chart.on("chartClick", (e) => events.push(`click:${e.point?.index}`));
+            chart.moveFocus("right");
+            const plot = chart.getSnapshot().plot;
+            chart.dblClickAt(plot.w / 2, plot.h / 2);
+            chart.clickAt(plot.w / 2, plot.h / 2);
+            expect(events).toContain("focus:0");
+            expect(events.some((e) => e.startsWith("dbl:"))).toBe(true);
+            expect(events.some((e) => e.startsWith("click:"))).toBe(true);
+            destroy();
+        });
+        // ── IBChart 대비 신규 계약 ──────────────────────────────
+        it("step 타입은 계단형 라인을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, { type: "step" });
+            expect(el.querySelector(".mc-root")?.getAttribute("data-chart-type")).toBe("step");
+            const path = el.querySelector(".mc-line.mc-step");
+            expect(path).toBeTruthy();
+            // 계단 패스는 수직 세그먼트(같은 x)를 포함한다
+            const d = path.getAttribute("d");
+            const xs = d
+                .match(/L([\d.]+) ([\d.]+)/g)
+                .map((s) => s.slice(1).trim().split(" ").map(Number));
+            expect(xs.some((p, i) => i > 0 && p[0] === xs[i - 1][0])).toBe(true);
+            destroy();
+        });
+        it("spline 타입은 곡선 라인을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "spline",
+            });
+            const path = el.querySelector(".mc-line.mc-spline");
+            expect(path).toBeTruthy();
+            expect(path.getAttribute("d")).toContain("C");
+            destroy();
+        });
+        it("percent-stacked-bar는 점유율 스택을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "percent-stacked-bar",
+                dataLabels: true,
+            });
+            expect(el.querySelector(".mc-root")?.getAttribute("data-chart-type")).toBe("percent-stacked-bar");
+            expect(el.querySelectorAll(".mc-bar").length).toBe(8);
+            // 라벨은 % 표기
+            expect(el.querySelector(".mc-data-label")?.textContent).toContain("%");
+            destroy();
+        });
+        it("waterfall은 증감 톤 막대와 연결선을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "waterfall",
+                series: [{ name: "손익", values: [10, -4, 6, -2] }],
+            });
+            expect(el.querySelectorAll(".mc-bar.mc-bar-up").length).toBe(2);
+            expect(el.querySelectorAll(".mc-bar.mc-bar-down").length).toBe(2);
+            expect(el.querySelector(".mc-waterfall-line")).toBeTruthy();
+            destroy();
+        });
+        it("bubble은 크기가 다른 버블 원을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "bubble",
+                categories: [],
+                series: [
+                    {
+                        name: "s",
+                        points: [
+                            { x: 1, y: 2, z: 4 },
+                            { x: 2, y: 8, z: 100 },
+                            { x: 3, y: 5, z: 20 },
+                        ],
+                    },
+                ],
+            });
+            const bubbles = el.querySelectorAll(".mc-bubble");
+            expect(bubbles.length).toBe(3);
+            const radii = [...bubbles].map((b) => Number(b.getAttribute("r")));
+            expect(Math.max(...radii)).toBeGreaterThan(Math.min(...radii));
+            destroy();
+        });
+        it("heatmap은 시리즈×카테고리 셀 그리드를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "heatmap",
+            });
+            expect(el.querySelectorAll(".mc-heat-cell").length).toBe(8);
+            // 행 라벨(y축)에 시리즈명이 나온다
+            const yTicks = el.querySelectorAll(".mc-axis-y .mc-tick-label");
+            expect(yTicks[0]?.textContent).toBe("매출");
+            expect(yTicks[1]?.textContent).toBe("비용");
+            // 셀 색상은 color-mix 그래디언트
+            const cell = el.querySelector(".mc-heat-cell");
+            expect(cell.getAttribute("style")).toContain("color-mix");
+            destroy();
+        });
+        it("funnel/pyramid는 슬라이스와 카테고리 범례를 렌더한다", async () => {
+            for (const type of ["funnel", "pyramid"]) {
+                const { el, destroy } = await mountSpecChart(mount, { type });
+                expect(el.querySelector(".mc-root")?.getAttribute("data-chart-type")).toBe(type);
+                expect(el.querySelectorAll(".mc-slice").length).toBe(4);
+                const items = el.querySelectorAll(".mc-legend-item");
+                expect(items.length).toBe(4);
+                expect(items[1]?.textContent).toContain("2월");
+                destroy();
+            }
+        });
+        it("markBands는 값 축 기준 영역을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                markBands: [{ from: 10, to: 20, label: "주의 구간" }],
+            });
+            expect(el.querySelector(".mc-mark-band")).toBeTruthy();
+            expect(el.querySelector(".mc-mark-label")?.textContent).toBe("주의 구간");
+            // 완전히 도메인 밖이면 생략
+            const { el: el2, destroy: d2 } = await mountSpecChart(mount, {
+                markBands: [{ from: 9000, to: 9999 }],
+            });
+            expect(el2.querySelector(".mc-mark-band")).toBeNull();
+            destroy();
+            d2();
+        });
+        it("drilldown — 드릴하면 .mc-drillup이 보이고 drillUp으로 복귀한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                drilldown: {
+                    "1월": {
+                        series: [{ name: "1월 주별", values: [3, 4, 3] }],
+                        categories: ["1주", "2주", "3주"],
+                    },
+                },
+            });
+            const btn = el.querySelector(".mc-drillup");
+            expect(btn.hidden).toBe(true);
+            expect(chart.drillDown("1월")).toBe(true);
+            await flush();
+            expect(btn.hidden).toBe(false);
+            // 범례가 하위 시리즈로 바뀐다
+            expect(el.querySelector(".mc-legend-item")?.textContent).toContain("1월 주별");
+            chart.drillUp();
+            await flush();
+            expect(btn.hidden).toBe(true);
+            expect(el.querySelector(".mc-legend-item")?.textContent).toContain("매출");
+            destroy();
+        });
+        it("patterns는 defs에 무늬를 만들고 채움에 url을 쓴다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "bar",
+                patterns: true,
+            });
+            expect(el.querySelectorAll("pattern.mc-pattern").length).toBeGreaterThan(0);
+            const bar = el.querySelector(".mc-bar");
+            expect(bar.getAttribute("fill")).toMatch(/^url\(#/);
+            destroy();
+        });
+        it("실시간 API — addPoint/addSeries/removePoint가 DOM에 반영된다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            chart.addPoint("매출", 33);
+            await flush();
+            expect(el.querySelectorAll(".mc-point").length).toBe(9);
+            chart.addSeries({ name: "이익", values: [1, 2, 3, 4, 5] });
+            await flush();
+            expect(el.querySelectorAll(".mc-legend-item").length).toBe(3);
+            expect(el.querySelectorAll(".mc-point").length).toBe(14);
+            chart.removePoint("매출", 0);
+            await flush();
+            expect(el.querySelectorAll(".mc-point").length).toBe(13);
+            chart.removeSeries("이익");
+            await flush();
+            expect(el.querySelectorAll(".mc-legend-item").length).toBe(2);
+            destroy();
+        });
+        it("wordcloud는 단어 텍스트와 카테고리 범례를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "wordcloud",
+            });
+            expect(el.querySelector(".mc-root")?.getAttribute("data-chart-type")).toBe("wordcloud");
+            const words = el.querySelectorAll(".mc-word");
+            expect(words.length).toBe(4);
+            // 값이 큰 카테고리가 더 큰 font-size를 갖는다
+            const sizes = [...words].map((w) => Number(w.getAttribute("font-size")));
+            expect(Math.max(...sizes)).toBeGreaterThan(Math.min(...sizes));
+            // 축 없이 카테고리 범례
+            expect(el.querySelectorAll(".mc-axis").length).toBe(0);
+            expect(el.querySelectorAll(".mc-legend-item").length).toBe(4);
+            destroy();
+        });
+        it("annotations는 데이터 좌표에 주석을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                annotations: [{ x: "2월", y: 25, label: "최고" }],
+            });
+            expect(el.querySelector(".mc-annotation")).toBeTruthy();
+            expect(el.querySelector(".mc-annotation-label")?.textContent).toBe("최고");
+            destroy();
+        });
+        it("allowPointSelect — 클릭으로 .mc-selected를 토글하고 이벤트를 발행한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                type: "bar",
+                allowPointSelect: true,
+            });
+            let sel = null;
+            let unsel = 0;
+            chart.on("pointSelect", (e) => {
+                sel = e;
+            });
+            chart.on("pointUnselect", () => unsel++);
+            const bar = el.querySelector(".mc-bar");
+            const x = Number(bar.getAttribute("x")) + Number(bar.getAttribute("width")) / 2;
+            const y = Number(bar.getAttribute("y"));
+            const plot = chart.getSnapshot().plot;
+            chart.clickAt(x - plot.x, y - plot.y);
+            await flush();
+            expect(sel).toEqual({ seriesId: "매출", index: 0, value: 10 });
+            expect(el.querySelector(".mc-bar.mc-selected")).toBeTruthy();
+            // 같은 막대 재클릭 → 해제
+            chart.clickAt(x - plot.x, y - plot.y);
+            await flush();
+            expect(unsel).toBe(1);
+            expect(el.querySelector(".mc-selected")).toBeNull();
+            destroy();
+        });
+        it("locale ko는 툴바 버튼과 빈 상태를 한국어로 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                locale: "ko",
+            });
+            expect(el.querySelector(".mc-zoom-reset")?.textContent).toBe("리셋");
+            destroy();
+            const { el: el2, destroy: d2 } = await mountSpecChart(mount, {
+                locale: "ko",
+                series: [],
+            });
+            expect(el2.querySelector(".mc-empty")?.textContent).toBe("데이터 없음");
+            d2();
+        });
+        it("window beforeprint/afterprint를 beforePrint/afterPrint 이벤트로 전달한다", async () => {
+            const { chart, destroy } = await mountSpecChart(mount);
+            const phases = [];
+            chart.on("beforePrint", () => phases.push("before"));
+            chart.on("afterPrint", () => phases.push("after"));
+            window.dispatchEvent(new Event("beforeprint"));
+            window.dispatchEvent(new Event("afterprint"));
+            expect(phases).toEqual(["before", "after"]);
+            destroy();
+        });
+        it("axes:xy 줌 — 값 축 틱이 좁혀지고 리셋 버튼이 활성화된다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                zoom: { axes: "xy" },
+            });
+            const yTicks = () => [...el.querySelectorAll(".mc-axis-y .mc-tick-label")].map((t) => t.textContent);
+            const before = yTicks();
+            chart.setZoomWindow({ y: { min: 0, max: 15 } });
+            await flush();
+            expect(yTicks()).not.toEqual(before);
+            expect(el.querySelector(".mc-zoom-reset").disabled).toBe(false);
+            chart.resetZoom();
+            await flush();
+            expect(yTicks()).toEqual(before);
+            destroy();
+        });
+        it("zoom.select 드래그는 y 범위를 가진 사각형 미리보기를 만든다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                zoom: { axes: "xy", select: true, pan: false },
+                brush: false,
+            });
+            chart.startDrag(50, false, 20);
+            chart.dragTo(200, 120);
+            await flush();
+            const rect = el.querySelector(".mc-selection");
+            expect(rect).toBeTruthy();
+            const plot = chart.getSnapshot().plot;
+            // y 범위가 있으면 플롯 전체 높이가 아닌 사각형이 된다
+            expect(Number(rect.getAttribute("height"))).toBeLessThan(plot.h);
+            chart.endDrag();
+            await flush();
+            expect(el.querySelector(".mc-selection")).toBeNull();
+            expect(el.querySelector(".mc-zoom-reset").disabled).toBe(false);
+            destroy();
+        });
+        // ── AG Charts 대비 신규 계약 ─────────────────────────────
+        it("radar는 극좌표 그리드 + 폐합 폴리곤을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "radar",
+            });
+            expect(el.querySelector(".mc-root")?.getAttribute("data-chart-type")).toBe("radar");
+            // 직교 축 대신 동심원 링 + 스포크
+            expect(el.querySelectorAll(".mc-axis").length).toBe(0);
+            expect(el.querySelectorAll(".mc-radar-ring").length).toBeGreaterThan(0);
+            expect(el.querySelectorAll(".mc-radar-spoke").length).toBe(4);
+            expect(el.querySelectorAll(".mc-spoke-label").length).toBe(4);
+            const path = el.querySelector(".mc-radar");
+            expect(path.getAttribute("d")).toMatch(/ Z$/);
+            // 범례는 시리즈 단위
+            expect(el.querySelectorAll(".mc-legend-item").length).toBe(2);
+            destroy();
+        });
+        it("radar-area는 채움 클래스가 붙은 폴리곤을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "radar-area",
+            });
+            const path = el.querySelector(".mc-radar.mc-radar-area");
+            expect(path).toBeTruthy();
+            expect(path.getAttribute("d")).toMatch(/ Z$/);
+            destroy();
+        });
+        it("range-bar는 [low,high] 구간 막대를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "range-bar",
+                dataLabels: true,
+                series: [
+                    {
+                        name: "기온",
+                        ranges: [
+                            [5, 15],
+                            [3, 18],
+                            [7, 21],
+                            [2, 12],
+                        ],
+                    },
+                ],
+            });
+            expect(el.querySelectorAll(".mc-range-bar").length).toBe(4);
+            expect(el.querySelector(".mc-data-label")?.textContent).toContain("–");
+            destroy();
+        });
+        it("range-area는 닫힌 밴드 경로를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "range-area",
+                series: [
+                    {
+                        name: "기온",
+                        ranges: [
+                            [5, 15],
+                            [3, 18],
+                            [7, 21],
+                            [2, 12],
+                        ],
+                    },
+                ],
+            });
+            const band = el.querySelector(".mc-range-area");
+            expect(band).toBeTruthy();
+            expect(band.getAttribute("d")).toMatch(/ Z$/);
+            destroy();
+        });
+        it("candlestick은 up/down 캔들 + 심지를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "candlestick",
+                series: [
+                    {
+                        name: "주가",
+                        ohlc: [
+                            [10, 14, 8, 13],
+                            [13, 14, 9, 10],
+                            [10, 16, 9, 15],
+                            [15, 17, 11, 12],
+                        ],
+                    },
+                ],
+            });
+            expect(el.querySelectorAll(".mc-candle").length).toBe(4);
+            expect(el.querySelectorAll(".mc-candle-up").length).toBe(2);
+            expect(el.querySelectorAll(".mc-candle-down").length).toBe(2);
+            expect(el.querySelectorAll(".mc-candle-wick").length).toBe(4);
+            destroy();
+        });
+        it("series.errors는 에러바 오버레이를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                series: [
+                    {
+                        name: "측정",
+                        values: [10, 25, 15, 30],
+                        errors: [
+                            [2, 3],
+                            [1, 1],
+                            [4, 2],
+                            [2, 2],
+                        ],
+                    },
+                ],
+            });
+            const bars = el.querySelectorAll(".mc-error");
+            expect(bars.length).toBe(4);
+            expect(bars[0]?.getAttribute("d")).toContain("M");
+            destroy();
+        });
+        it("series.trend는 추세선 path를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                series: [
+                    {
+                        name: "추세",
+                        values: [5, 12, 15, 28],
+                        trend: { type: "linear" },
+                    },
+                ],
+            });
+            const tl = el.querySelector(".mc-trendline");
+            expect(tl).toBeTruthy();
+            expect(tl.getAttribute("d")).toMatch(/^M/);
+            destroy();
+        });
+        it("navigator는 미니맵 + 창 + 핸들을 렌더하고 드래그로 줌 창을 바꾼다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                navigator: true,
+            });
+            expect(el.querySelector(".mc-navigator")).toBeTruthy();
+            expect(el.querySelectorAll(".mc-nav-track").length).toBe(2);
+            const win = el.querySelector(".mc-nav-window");
+            expect(win).toBeTruthy();
+            expect(el.querySelector(".mc-nav-handle-l")).toBeTruthy();
+            expect(el.querySelector(".mc-nav-handle-r")).toBeTruthy();
+            // 창을 좁히면 .mc-nav-window의 x/width가 갱신된다
+            const n = chart.getSnapshot().navigator;
+            chart.navDragStart(n.window.x + n.window.w, "r");
+            chart.navDragTo(n.window.x + n.window.w * 0.5);
+            chart.navDragEnd();
+            await flush();
+            const after = el.querySelector(".mc-nav-window");
+            expect(Number(after.getAttribute("width"))).toBeLessThan(Number(win.getAttribute("width")));
+            expect(el.querySelector(".mc-zoom-reset").disabled).toBe(false);
+            destroy();
+        });
+        it("IBChart식 메서드 — updatePoint/updateSeries/setCategories가 DOM에 반영된다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            let pu = 0;
+            let rd = 0;
+            chart.on("pointUpdate", () => pu++);
+            chart.on("redraw", () => rd++);
+            chart.updatePoint("매출", 0, 99);
+            await flush();
+            expect(pu).toBe(1);
+            chart.updateSeries("비용", { name: "비용2" });
+            await flush();
+            expect(el.querySelector(".mc-legend-item")?.textContent).not.toContain("비용2"); // 첫 항목은 매출
+            expect([...el.querySelectorAll(".mc-legend-item")].some((x) => x.textContent?.includes("비용2"))).toBe(true);
+            chart.setCategories(["A", "B", "C", "D"]);
+            await flush();
+            expect(el.querySelector(".mc-axis-x .mc-tick-label")?.textContent).toBe("A");
+            chart.redraw();
+            expect(rd).toBe(1);
+            destroy();
+        });
+        it("map 타입은 지역 폴리곤 + 값 범례를 렌더하고 지역을 선택한다", async () => {
+            // 작은 GeoJSON 픽스처 — KR/JP는 데이터 조인, CN은 no-data
+            const topo = {
+                type: "FeatureCollection",
+                features: [
+                    {
+                        type: "Feature",
+                        id: "410",
+                        properties: { name: "Korea" },
+                        geometry: {
+                            type: "Polygon",
+                            coordinates: [
+                                [
+                                    [126, 43],
+                                    [130, 43],
+                                    [130, 33],
+                                    [126, 33],
+                                    [126, 43],
+                                ],
+                            ],
+                        },
+                    },
+                    {
+                        type: "Feature",
+                        id: "392",
+                        properties: { name: "Japan" },
+                        geometry: {
+                            type: "Polygon",
+                            coordinates: [
+                                [
+                                    [132, 43],
+                                    [140, 43],
+                                    [140, 33],
+                                    [132, 33],
+                                    [132, 43],
+                                ],
+                            ],
+                        },
+                    },
+                    {
+                        type: "Feature",
+                        id: "156",
+                        properties: { name: "China" },
+                        geometry: {
+                            type: "Polygon",
+                            coordinates: [
+                                [
+                                    [80, 45],
+                                    [110, 45],
+                                    [110, 30],
+                                    [80, 30],
+                                    [80, 45],
+                                ],
+                            ],
+                        },
+                    },
+                ],
+            };
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                type: "map",
+                allowPointSelect: true,
+                series: [
+                    {
+                        name: "지표",
+                        mapData: [
+                            { code: "410", value: 50 },
+                            { code: "Japan", value: 80 },
+                        ],
+                    },
+                ],
+                map: { topology: topo },
+            });
+            // 지역 폴리곤 — 2개 데이터 + 1개 no-data
+            expect(el.querySelectorAll(".mc-map-region").length).toBe(3);
+            expect(el.querySelector('.mc-map-region[data-map-code="410"]')).toBeTruthy();
+            expect(el.querySelectorAll(".mc-map-no-data").length).toBe(1);
+            // 값 범례 — 그라데이션 바 + min/max 라벨
+            expect(el.querySelector(".mc-map-scale")).toBeTruthy();
+            expect(el.querySelector(".mc-map-scale-bar")).toBeTruthy();
+            // 지도는 직교 축을 렌더하지 않는다
+            expect(el.querySelector(".mc-axis")).toBeNull();
+            // 지역 선택 — selectPoint가 .mc-selected를 만든다
+            chart.selectPoint("지표", 0);
+            await flush();
+            expect(el.querySelector('.mc-map-region.mc-selected[data-map-code="410"]')).toBeTruthy();
+            destroy();
+        });
+        it("sunburst/treemap은 계층 노드를 렌더하고 노드를 선택한다", async () => {
+            const tree = [
+                {
+                    name: "A",
+                    children: [
+                        { name: "A1", value: 30 },
+                        { name: "A2", value: 10 },
+                    ],
+                },
+                { name: "B", value: 20 },
+            ];
+            for (const type of ["sunburst", "treemap"]) {
+                const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                    type,
+                    allowPointSelect: true,
+                    series: [{ name: "계층", tree }],
+                });
+                const sel = type === "sunburst" ? ".mc-sunburst-node" : ".mc-treemap-node";
+                // sunburst는 내부 노드 포함(4), treemap은 리프만(3)
+                expect(el.querySelectorAll(sel).length).toBe(type === "sunburst" ? 4 : 3);
+                // 범례는 최상위 노드 단위
+                expect([...el.querySelectorAll(".mc-legend-item")].map((x) => x.textContent?.trim())).toEqual(["A", "B"]);
+                expect(el.querySelector(".mc-axis")).toBeNull();
+                // treemap은 리프만 렌더 — index 0(내부 노드 A) 대신 리프 B(3)를 선택
+                chart.selectPoint("계층", type === "sunburst" ? 0 : 3);
+                await flush();
+                expect(el.querySelector(`${sel}.mc-selected`)).toBeTruthy();
+                destroy();
+            }
+        });
+        it("sankey는 노드 열과 유량 리본을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "sankey",
+                series: [
+                    {
+                        name: "유입",
+                        links: [
+                            { source: "A", target: "B", value: 10 },
+                            { source: "B", target: "C", value: 5 },
+                        ],
+                    },
+                ],
+            });
+            expect(el.querySelectorAll(".mc-sankey-node").length).toBe(3);
+            expect(el.querySelectorAll(".mc-sankey-link").length).toBe(2);
+            expect([...el.querySelectorAll(".mc-legend-item")].map((x) => x.textContent?.trim())).toEqual(["A", "B", "C"]);
+            destroy();
+        });
+        it("chord는 그룹 아크와 리본을 렌더한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                type: "chord",
+                allowPointSelect: true,
+                series: [], // 시리즈 없이 options.chord만으로 렌더 — seriesId는 "chord"
+                chord: {
+                    matrix: [
+                        [0, 10, 0],
+                        [4, 0, 8],
+                        [0, 2, 0],
+                    ],
+                    labels: ["X", "Y", "Z"],
+                },
+            });
+            expect(el.querySelectorAll(".mc-chord-group").length).toBe(3);
+            expect(el.querySelectorAll(".mc-chord-ribbon").length).toBe(2);
+            expect([...el.querySelectorAll(".mc-legend-item")].map((x) => x.textContent?.trim())).toEqual(["X", "Y", "Z"]);
+            expect(el.querySelector(".mc-axis")).toBeNull();
+            chart.selectPoint("chord", 0);
+            await flush();
+            expect(el.querySelector(".mc-chord-group.mc-selected")).toBeTruthy();
+            destroy();
+        });
+        it("nightingale/radial-bar/radial-column은 극좌표 섹터를 렌더하고 선택한다", async () => {
+            for (const type of [
+                "nightingale",
+                "radial-bar",
+                "radial-column",
+            ]) {
+                const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                    type,
+                    allowPointSelect: true,
+                });
+                const sel = type === "nightingale"
+                    ? ".mc-nightingale-node"
+                    : type === "radial-column"
+                        ? ".mc-radial-column"
+                        : ".mc-radial-bar";
+                // 4카테고리 × 2시리즈 = 8섹터, 직교 축 없음
+                expect(el.querySelectorAll(sel).length).toBe(8);
+                expect(el.querySelector(".mc-axis")).toBeNull();
+                chart.selectPoint("매출", 0);
+                await flush();
+                expect(el.querySelector(`${sel}.mc-selected`)).toBeTruthy();
+                destroy();
+            }
+        });
+        it("nightingale은 레이더 그리드(링+스포크 라벨)와 카테고리 범례를 그린다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "nightingale",
+            });
+            expect(el.querySelector(".mc-radar-grid")).toBeTruthy();
+            expect(el.querySelectorAll(".mc-radar-spoke").length).toBe(4);
+            // 범례는 카테고리(1월~4월) 단위
+            expect([...el.querySelectorAll(".mc-legend-item")].map((x) => x.textContent?.trim())).toEqual(["1월", "2월", "3월", "4월"]);
+            destroy();
+        });
+        it("radial-column은 눈금 그리드와 시리즈 범례를 그린다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "radial-column",
+            });
+            expect(el.querySelector(".mc-radar-grid")).toBeTruthy();
+            expect(el.querySelectorAll(".mc-radar-spoke").length).toBe(4);
+            // 범례는 시리즈 단위
+            expect([...el.querySelectorAll(".mc-legend-item")].map((x) => x.textContent?.trim())).toEqual(["매출", "비용"]);
+            destroy();
+        });
+        it("gauge는 트랙+값 아크+바늘+중앙 라벨을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "gauge",
+                series: [{ name: "CPU", values: [72] }],
+                gauge: { min: 0, max: 100, target: 80 },
+            });
+            expect(el.querySelector(".mc-gauge-track")).toBeTruthy();
+            expect(el.querySelector(".mc-gauge-value")).toBeTruthy();
+            expect(el.querySelector(".mc-gauge-needle")).toBeTruthy();
+            expect(el.querySelector(".mc-gauge-target")).toBeTruthy();
+            expect(el.querySelector(".mc-gauge-label")?.textContent).toBe("72");
+            // min/max 눈금 라벨
+            expect([...el.querySelectorAll(".mc-gauge-tick")].map((x) => x.textContent)).toEqual(["0", "100"]);
+            // 범례·축 없음
+            expect(el.querySelector(".mc-legend-item")).toBeNull();
+            expect(el.querySelector(".mc-axis")).toBeNull();
+            destroy();
+        });
+        // ── benchmark.md 갭 개발 신규 계약 ─────────────────────
+        it("boxplot은 상자·수염·캡·중앙값을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "boxplot",
+                series: [
+                    {
+                        name: "분포",
+                        box: [
+                            [2, 6, 9, 14, 20],
+                            [4, 8, 11, 15, 22],
+                            [1, 5, 8, 12, 18],
+                            [6, 10, 13, 17, 25],
+                        ],
+                    },
+                ],
+            });
+            expect(el.querySelectorAll(".mc-box").length).toBe(4);
+            expect(el.querySelectorAll(".mc-box-body").length).toBe(4);
+            expect(el.querySelectorAll(".mc-box-whisker").length).toBe(4);
+            expect(el.querySelectorAll(".mc-box-median").length).toBe(4);
+            expect(el.querySelectorAll(".mc-box-cap").length).toBe(8);
+            destroy();
+        });
+        it("histogram은 원시 값을 구간으로 나눠 막대를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "histogram",
+                categories: [],
+                series: [
+                    {
+                        name: "빈도",
+                        values: [1, 2, 2, 3, 3, 3, 4, 4, 5, 8, 9, 10],
+                    },
+                ],
+                histogram: { bins: 5 },
+            });
+            const bars = el.querySelectorAll(".mc-bar");
+            expect(bars.length).toBe(5);
+            destroy();
+        });
+        it("ohlc는 시가/종가 틱과 고저 심지를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "ohlc",
+                series: [
+                    {
+                        name: "주가",
+                        ohlc: [
+                            [10, 14, 8, 13],
+                            [13, 14, 9, 10],
+                            [10, 16, 9, 15],
+                            [15, 17, 11, 12],
+                        ],
+                    },
+                ],
+            });
+            expect(el.querySelectorAll(".mc-ohlc").length).toBe(4);
+            expect(el.querySelectorAll(".mc-ohlc-up").length).toBe(2);
+            expect(el.querySelectorAll(".mc-ohlc-down").length).toBe(2);
+            expect(el.querySelectorAll(".mc-ohlc-stem").length).toBe(4);
+            expect(el.querySelectorAll(".mc-ohlc-open").length).toBe(4);
+            expect(el.querySelectorAll(".mc-ohlc-close").length).toBe(4);
+            destroy();
+        });
+        it("cone-funnel은 값 비례 폭의 슬라이스를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "cone-funnel",
+            });
+            expect(el.querySelector(".mc-root")?.getAttribute("data-chart-type")).toBe("cone-funnel");
+            expect(el.querySelectorAll(".mc-slice").length).toBe(4);
+            expect(el.querySelectorAll(".mc-legend-item").length).toBe(4);
+            destroy();
+        });
+        it("linear-gauge는 수평 트랙·값 채움·눈금을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "linear-gauge",
+                series: [{ name: "CPU", values: [72] }],
+                gauge: { min: 0, max: 100, target: 80 },
+            });
+            expect(el.querySelector(".mc-lg-track")).toBeTruthy();
+            expect(el.querySelector(".mc-lg-value")).toBeTruthy();
+            expect(el.querySelector(".mc-lg-target")).toBeTruthy();
+            expect([...el.querySelectorAll(".mc-lg-tick")].map((x) => x.textContent)).toEqual(["0", "100"]);
+            destroy();
+        });
+        it("organization은 노드 박스와 부모-자식 링크를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "organization",
+                series: [
+                    {
+                        name: "조직",
+                        tree: [
+                            {
+                                name: "CEO",
+                                children: [
+                                    { name: "CTO", children: [{ name: "Dev" }] },
+                                    { name: "CFO" },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            });
+            expect(el.querySelectorAll(".mc-org-node").length).toBe(4);
+            expect(el.querySelectorAll(".mc-org-link").length).toBe(3);
+            expect(el.querySelector(".mc-axis")).toBeNull();
+            destroy();
+        });
+        it("pictogram은 카테고리 행마다 값 비례 아이콘과 빈 아이콘을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "pictogram",
+                categories: ["A", "B", "C"],
+                series: [{ name: "인구", values: [30, 20, 10] }],
+                pictogram: { unit: 10 },
+            });
+            // unit=10 → 채움 3+2+1=6, 빈 아이콘은 최대 행(3) 기준 0+1+2=3
+            expect(el.querySelectorAll(".mc-picto-fill").length).toBe(6);
+            expect(el.querySelectorAll(".mc-picto-empty").length).toBe(3);
+            expect(el.querySelectorAll(".mc-picto-label").length).toBe(3);
+            // 값 축이 없다 — 행 라벨이 카테고리 역할
+            expect(el.querySelector(".mc-axis")).toBeNull();
+            destroy();
+        });
+        it("population-pyramid은 첫 시리즈를 좌측으로 미러링한 대칭 막대를 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "population-pyramid",
+                categories: ["0-9", "10-19", "20-29"],
+                series: [
+                    { name: "남", values: [30, 40, 35] },
+                    { name: "여", values: [32, 42, 38] },
+                ],
+            });
+            const bars = [...el.querySelectorAll(".mc-bar")];
+            expect(bars.length).toBe(6);
+            const plotX = el.querySelector(".mc-svg").getAttribute("width");
+            expect(plotX).toBeTruthy();
+            // 중앙값 추정 — 좌측 막대의 오른쪽 끝과 우측 막대의 왼쪽 끝이 같은 x
+            const firstSeries = bars.filter((b) => b.getAttribute("data-series-id") === "남");
+            const secondSeries = bars.filter((b) => b.getAttribute("data-series-id") === "여");
+            expect(firstSeries.length).toBe(3);
+            expect(secondSeries.length).toBe(3);
+            // 좌측 막대의 오른쪽 끝 ≈ 우측 막대의 왼쪽 끝 (중앙축)
+            const leftRight = parseFloat(firstSeries[0].getAttribute("x")) +
+                parseFloat(firstSeries[0].getAttribute("width"));
+            const rightLeft = parseFloat(secondSeries[0].getAttribute("x"));
+            expect(Math.abs(leftRight - rightLeft)).toBeLessThan(2);
+            // 좌측 막대는 중앙에서 왼쪽으로 뻗는다
+            expect(parseFloat(firstSeries[0].getAttribute("x"))).toBeLessThan(leftRight - 10);
+            // 값 축 틱은 절대값 — 음수 라벨이 없다
+            const labels = [...el.querySelectorAll(".mc-axis .mc-tick-label")].map((t) => t.textContent);
+            expect(labels.some((t) => t?.startsWith("-"))).toBe(false);
+            destroy();
+        });
+        it("mapPoints/mapLines는 지도 위에 마커·선 레이어를 렌더한다", async () => {
+            const topo = {
+                type: "FeatureCollection",
+                features: [
+                    {
+                        type: "Feature",
+                        id: "410",
+                        properties: { name: "Korea" },
+                        geometry: {
+                            type: "Polygon",
+                            coordinates: [
+                                [
+                                    [126, 43],
+                                    [130, 43],
+                                    [130, 33],
+                                    [126, 33],
+                                    [126, 43],
+                                ],
+                            ],
+                        },
+                    },
+                ],
+            };
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "map",
+                series: [
+                    {
+                        name: "지표",
+                        mapData: [{ code: "410", value: 50 }],
+                        mapPoints: [{ lon: 128, lat: 38, label: "서울" }],
+                        mapLines: [
+                            {
+                                from: [126, 43],
+                                to: [130, 33],
+                            },
+                        ],
+                    },
+                ],
+                map: { topology: topo },
+            });
+            expect(el.querySelectorAll(".mc-map-region").length).toBe(1);
+            expect(el.querySelectorAll(".mc-map-marker").length).toBe(1);
+            expect(el.querySelectorAll(".mc-map-line").length).toBe(1);
+            destroy();
+        });
+        it("map 사용자 지도 — 아바타 핀·펄스·클러스터·panZoom", async () => {
+            const topo = {
+                type: "FeatureCollection",
+                features: [
+                    {
+                        type: "Feature",
+                        id: "410",
+                        properties: { name: "Korea" },
+                        geometry: {
+                            type: "Polygon",
+                            coordinates: [
+                                [
+                                    [126, 43],
+                                    [130, 43],
+                                    [130, 33],
+                                    [126, 33],
+                                    [126, 43],
+                                ],
+                            ],
+                        },
+                    },
+                ],
+            };
+            const img = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E";
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                type: "map",
+                series: [
+                    {
+                        name: "지표",
+                        mapPoints: [
+                            { lon: 127.0, lat: 37.0, label: "A", image: img },
+                            { lon: 127.01, lat: 37.01, label: "B", image: img },
+                            { lon: 129.5, lat: 42.5, label: "C", pulse: true },
+                            { lon: 126.5, lat: 33.5, label: "D" },
+                        ],
+                    },
+                ],
+                map: { topology: topo, cluster: true, panZoom: true },
+            });
+            // 가까운 A,B는 클러스터 버블로, 먼 C,D는 개별 마커로 렌더된다
+            expect(el.querySelectorAll(".mc-map-cluster").length).toBe(1);
+            expect(el.querySelector(".mc-map-cluster-count")?.textContent).toBe("2");
+            expect(el.querySelectorAll(".mc-map-marker").length).toBe(2);
+            // C의 펄스 링
+            expect(el.querySelector(".mc-map-pulse")).toBeTruthy();
+            // 줌 — .mc-map-geo에 transform이 생기고 resetZoom으로 해제된다
+            expect(el.querySelector(".mc-map-geo")?.getAttribute("transform")).toBeNull();
+            chart.mapZoomAt(100, 2, 50);
+            await flush();
+            expect(el.querySelector(".mc-map-geo")?.getAttribute("transform")).toMatch(/^translate/);
+            chart.resetZoom();
+            await flush();
+            expect(el.querySelector(".mc-map-geo")?.getAttribute("transform")).toBeNull();
+            destroy();
+        });
+        it("map 아바타 핀 — image 마커는 원형 클립 이미지로 렌더한다", async () => {
+            const topo = {
+                type: "FeatureCollection",
+                features: [
+                    {
+                        type: "Feature",
+                        id: "410",
+                        properties: { name: "Korea" },
+                        geometry: {
+                            type: "Polygon",
+                            coordinates: [
+                                [
+                                    [126, 43],
+                                    [130, 43],
+                                    [130, 33],
+                                    [126, 33],
+                                    [126, 43],
+                                ],
+                            ],
+                        },
+                    },
+                ],
+            };
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "map",
+                series: [
+                    {
+                        name: "지표",
+                        mapPoints: [
+                            {
+                                lon: 128,
+                                lat: 38,
+                                label: "서울",
+                                image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E",
+                            },
+                        ],
+                    },
+                ],
+                map: { topology: topo },
+            });
+            const avatar = el.querySelector(".mc-map-avatar");
+            expect(avatar).toBeTruthy();
+            expect(avatar.querySelector("image")).toBeTruthy();
+            expect(avatar.querySelector(".mc-map-avatar-ring")).toBeTruthy();
+            expect(avatar.querySelector("clipPath circle")).toBeTruthy();
+            destroy();
+        });
+        it("points[].color와 itemStyle이 포인트별 색을 오버라이드한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                type: "bar",
+                series: [
+                    {
+                        name: "매출",
+                        points: [
+                            { x: 0, y: 10, color: "#ff0000" },
+                            { x: 1, y: 25 },
+                            { x: 2, y: 15 },
+                            { x: 3, y: 30 },
+                        ],
+                        itemStyle: (it) => (it.index === 2 ? { color: "#00ff00" } : null),
+                    },
+                ],
+            });
+            const bars = [...el.querySelectorAll(".mc-bar")];
+            expect(bars[0]?.getAttribute("style")).toContain("fill:#ff0000");
+            expect(bars[2]?.getAttribute("style")).toContain("fill:#00ff00");
+            destroy();
+        });
+        it("legend.checkboxes는 체크박스를 렌더하고 legendCheck를 발행한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                legend: { checkboxes: true },
+            });
+            const checks = el.querySelectorAll(".mc-legend-check");
+            expect(checks.length).toBe(2);
+            expect(checks[0]?.checked).toBe(true);
+            let evt = null;
+            chart.on("legendCheck", (e) => {
+                evt = e;
+            });
+            checks[0].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            await flush();
+            expect(evt).toEqual({ id: "매출", checked: false });
+            expect(el.querySelectorAll(".mc-series").length).toBe(1);
+            destroy();
+        });
+        it("contextMenu는 우클릭에 .mc-menu를 열고 menuAction을 발행한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                contextMenu: { items: [{ id: "custom-act", label: "내 액션" }] },
+            });
+            let act = null;
+            chart.on("menuAction", (e) => {
+                act = e;
+            });
+            // jsdom은 getBoundingClientRect가 0이라 posOf가 null — 코어 API로 연다
+            chart.openMenu(50, 50);
+            await flush();
+            const menu = el.querySelector(".mc-menu");
+            expect(menu.hidden).toBe(false);
+            const items = el.querySelectorAll(".mc-menu-item");
+            expect(items.length).toBe(4); // reset + svg + png + custom
+            const custom = el.querySelector('.mc-menu-item[data-id="custom-act"]');
+            custom.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            await flush();
+            expect(act).toBeTruthy();
+            expect(act.id).toBe("custom-act");
+            expect(menu.hidden).toBe(true);
+            destroy();
+        });
+        it("tooltip.render는 HTML 콜백 결과를 툴팁에 렌더한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                tooltip: {
+                    render: (ctx) => `<b class="my-tip">${ctx.title}</b>`,
+                },
+            });
+            const plot = chart.getSnapshot().plot;
+            chart.hoverAt(plot.w / 2, plot.h / 2);
+            await flush();
+            const tip = el.querySelector(".mc-tooltip");
+            expect(tip.hidden).toBe(false);
+            expect(tip.querySelector(".my-tip")?.textContent).toBeTruthy();
+            destroy();
+        });
+        it("scrollbar는 네비게이터 없이 얇은 줌 스트립을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                scrollbar: true,
+                navigator: false,
+            });
+            expect(el.querySelector(".mc-scrollbar")).toBeTruthy();
+            expect(el.querySelector(".mc-sb-window")).toBeTruthy();
+            expect(el.querySelector(".mc-sb-handle-l")).toBeTruthy();
+            expect(el.querySelector(".mc-sb-handle-r")).toBeTruthy();
+            destroy();
+        });
+        it("그룹 카테고리는 두 번째 축 틱 행을 렌더한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount, {
+                categories: [
+                    ["Q1", "1월"],
+                    ["Q1", "2월"],
+                    ["Q2", "3월"],
+                    ["Q2", "4월"],
+                ],
+            });
+            const groups = el.querySelectorAll(".mc-tick-group-label");
+            expect(groups.length).toBe(2);
+            expect(groups[0]?.textContent).toBe("Q1");
+            expect(groups[1]?.textContent).toBe("Q2");
+            destroy();
+        });
+        it("drillUpAll은 한 번에 최상위로 복귀한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                // drilldown 맵은 라벨 키로 조회 — 하위 레벨 키도 같은 맵에 둔다
+                drilldown: {
+                    "1월": {
+                        series: [{ name: "1월 주별", values: [3, 4, 3] }],
+                        categories: ["1주", "2주", "3주"],
+                    },
+                    "1주": {
+                        series: [{ name: "1주 일별", values: [1, 2] }],
+                        categories: ["월", "화"],
+                    },
+                },
+            });
+            chart.drillDown("1월");
+            chart.drillDown("1주");
+            await flush();
+            expect(chart.getSnapshot().drillDepth).toBe(2);
+            chart.drillUpAll();
+            await flush();
+            expect(chart.getSnapshot().drillDepth).toBe(0);
+            expect(el.querySelector(".mc-legend-item")?.textContent).toContain("매출");
+            destroy();
+        });
+        it("getState/setState는 줌·숨김 상태를 왕복한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            chart.toggleLegend("매출");
+            chart.zoomAt(chart.getSnapshot().plot.w / 2, 2);
+            await flush();
+            const state = chart.getState();
+            // 초기화
+            chart.setState({
+                type: chart.getSnapshot().type,
+                theme: "light",
+                hidden: [],
+                window: null,
+            });
+            await flush();
+            expect(el.querySelectorAll(".mc-series").length).toBe(2);
+            // 복원
+            chart.setState(state);
+            await flush();
+            expect(el.querySelectorAll(".mc-series").length).toBe(1);
+            destroy();
+        });
+        it("sync 그룹은 줌을 형제 차트에 전파한다", async () => {
+            const a = await mountSpecChart(mount, { sync: "grp1" });
+            const b = await mountSpecChart(mount, { sync: "grp1" });
+            a.chart.zoomAt(a.chart.getSnapshot().plot.w / 2, 3);
+            await a.flush();
+            await b.flush();
+            // b도 같은 줌 창을 갖는다 — 축 틱 수가 같아진다
+            const ticksOf = (el) => el.querySelectorAll(".mc-axis-x .mc-tick-label").length;
+            expect(ticksOf(b.el)).toBe(ticksOf(a.el));
+            expect(ticksOf(b.el)).toBeLessThan(4);
+            a.destroy();
+            b.destroy();
+        });
+        it("batch는 여러 변경을 한 번의 notify로 묶는다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            let notified = 0;
+            chart.subscribe(() => notified++);
+            chart.batch(() => {
+                chart.addPoint("매출", 33);
+                chart.addPoint("비용", 20);
+                chart.setCategories(["1월", "2월", "3월", "4월", "5월"]);
+            });
+            await flush();
+            expect(notified).toBe(1);
+            expect(el.querySelectorAll(".mc-point").length).toBe(10);
+            destroy();
+        });
+        it("주석 그리기 — 드로잉 드래그로 .mc-draw-line을 만들고 제거한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                drawing: true,
+            });
+            let drew = null;
+            chart.on("drawEnd", (e) => (drew = e.drawing));
+            chart.setDrawMode("line");
+            // 제스처 경로 — px를 코어가 데이터 좌표로 변환한다
+            chart.drawStartAt(20, 20);
+            chart.drawMoveTo(160, 90);
+            await flush();
+            expect(el.querySelector(".mc-draw-draft")).not.toBeNull();
+            chart.drawEndAt();
+            await flush();
+            expect(drew).not.toBeNull();
+            expect(el.querySelector(".mc-draw-line")).not.toBeNull();
+            expect(el.querySelector(".mc-drawings")).not.toBeNull();
+            // rect 도구 + API 추가
+            chart.addDrawing({ tool: "rect", x1: 0.5, y1: 10, x2: 2.5, y2: 25 });
+            await flush();
+            expect(el.querySelector(".mc-draw-rect")).not.toBeNull();
+            chart.clearDrawings();
+            await flush();
+            expect(el.querySelector(".mc-drawings")).toBeNull();
+            destroy();
+        });
+        it("getState/setState는 그린 주석을 왕복한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                drawing: true,
+            });
+            chart.addDrawing({ tool: "hline", x1: 0, y1: 20 });
+            await flush();
+            const state = chart.getState();
+            chart.clearDrawings();
+            await flush();
+            expect(el.querySelector(".mc-draw-hline")).toBeNull();
+            chart.setState(state);
+            await flush();
+            expect(el.querySelector(".mc-draw-hline")).not.toBeNull();
+            destroy();
+        });
+        it("legend.pagination은 항목을 나누고 네비 버튼으로 넘긴다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                type: "pie",
+                series: [
+                    {
+                        name: "점유율",
+                        values: [10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
+                    },
+                ],
+                categories: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"],
+                legend: { position: "bottom", pagination: 4 },
+            });
+            // 10개 항목 × 페이지 4 — 3페이지, 첫 페이지는 4개만.
+            // nav 버튼은 innerHTML로 교체되므로 클릭 후 재조회한다
+            const nav = () => ({
+                next: el.querySelector(".mc-legend-next"),
+                prev: el.querySelector(".mc-legend-prev"),
+            });
+            expect(el.querySelectorAll(".mc-legend-item").length).toBe(4);
+            expect(nav().next).not.toBeNull();
+            expect(nav().prev.disabled).toBe(true);
+            nav().next.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            await flush();
+            expect(el.querySelectorAll(".mc-legend-item").length).toBe(4);
+            expect(nav().prev.disabled).toBe(false);
+            nav().next.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            await flush();
+            // 마지막 페이지 — 나머지 2개
+            expect(el.querySelectorAll(".mc-legend-item").length).toBe(2);
+            expect(nav().next.disabled).toBe(true);
+            nav().prev.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            await flush();
+            expect(el.querySelectorAll(".mc-legend-item").length).toBe(4);
+            destroy();
+        });
+        it("search.load는 외부 데이터를 가져와 setData에 주입한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                search: {
+                    url: "/data.json",
+                    fetcher: async () => ({
+                        series: [{ name: "원격", values: [3, 6, 9] }],
+                        categories: ["A", "B", "C"],
+                    }),
+                },
+            });
+            let ended = 0;
+            chart.on("searchEnd", (e) => (ended = e.seriesCount));
+            const ok = await chart.search.load();
+            await flush();
+            expect(ok).toBe(true);
+            expect(ended).toBe(1);
+            expect(el.querySelectorAll(".mc-point").length).toBe(3);
+            // 실패 경로 — searchError 발행 후 false 반환
+            let failed = "";
+            chart.on("searchError", (e) => (failed = e.message));
+            const bad = await chart.search.load({
+                url: "/err",
+                transform: () => {
+                    throw new Error("bad payload");
+                },
+            });
+            expect(bad).toBe(false);
+            expect(failed).toBe("bad payload");
+            destroy();
+        });
+        it("고급 그리기 도구 — channel/fibonacci/measure를 렌더한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                drawing: true,
+            });
+            // 채널 — 추세선 + 평행선 + 음영 밴드
+            chart.addDrawing({ tool: "channel", x1: 0, y1: 5, x2: 4, y2: 20 });
+            // 피보나치 — 되돌림 레벨 7개
+            chart.addDrawing({ tool: "fibonacci", x1: 0, y1: 0, x2: 4, y2: 30 });
+            // 측정 — Δx/Δy 자동 라벨
+            chart.addDrawing({ tool: "measure", x1: 1, y1: 5, x2: 3, y2: 15 });
+            await flush();
+            const channel = el.querySelector(".mc-draw-channel");
+            expect(channel).not.toBeNull();
+            expect(channel.querySelector(".mc-draw-band")).not.toBeNull();
+            expect(channel.querySelectorAll(".mc-draw-seg").length).toBe(2);
+            const fib = el.querySelector(".mc-draw-fibonacci");
+            expect(fib).not.toBeNull();
+            expect(fib.querySelectorAll(".mc-draw-fib-level").length).toBe(7);
+            const measure = el.querySelector(".mc-draw-measure");
+            expect(measure).not.toBeNull();
+            expect(measure.querySelector(".mc-draw-label")?.textContent).toContain("Δx");
+            destroy();
+        });
+        it("updateDelta는 부분 옵션/데이터를 한 번에 병합한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            let notified = 0;
+            chart.subscribe(() => notified++);
+            chart.updateDelta({
+                series: [
+                    { name: "델타", values: [9, 8, 7, 6] },
+                    { name: "비용", values: [4, 3, 2, 1] },
+                ],
+                legend: { position: "top" },
+            });
+            await flush();
+            expect(notified).toBe(1);
+            const labels = [...el.querySelectorAll(".mc-legend-label")].map((x) => x.textContent);
+            expect(labels).toContain("델타");
+            destroy();
+        });
+        it("데이터 갱신 후 첫 스냅샷에 .mc-updating이 붙는다", async () => {
+            // 스펙 기본값 animation:false — 갱신 전환 계약은 켜서 검증한다
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                animation: true,
+            });
+            expect(el.querySelector(".mc-root.mc-updating")).toBeNull();
+            chart.addPoint("매출", 30);
+            await flush();
+            expect(el.querySelector(".mc-root.mc-updating")).not.toBeNull();
+            // 갱신이 아닌 무효화(호버) 후엔 해제된다
+            chart.hoverAt(30, 30);
+            await flush();
+            expect(el.querySelector(".mc-root.mc-updating")).toBeNull();
+            destroy();
+        });
+        it("etcData가 툴팁 렌더 컨텍스트와 pointSelect에 전달된다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                series: [
+                    { name: "매출", values: [10, 20, 30, 40], etcData: { unit: "KRW" } },
+                ],
+                categories: ["a", "b", "c", "d"],
+                allowPointSelect: true,
+                tooltip: { render: (c) => `<b>${JSON.stringify(c.rows[0].etcData)}</b>` },
+            });
+            expect(chart.getEtcData("매출")).toEqual({ unit: "KRW" });
+            // 호버 툴팁 — render 콜백의 row.etcData
+            chart.hoverAt(30, 30);
+            await flush();
+            expect(el.querySelector(".mc-tooltip")?.textContent).toContain("KRW");
+            // 선택 이벤트 — etcData 필드
+            let got = undefined;
+            chart.on("pointSelect", (e) => (got = e.etcData));
+            chart.selectPoint("매출", 0);
+            expect(got).toEqual({ unit: "KRW" });
+            destroy();
+        });
+        it("loadXml은 XML 데이터를 해석해 차트를 갱신한다", async () => {
+            const { el, chart, flush, destroy } = await mountSpecChart(mount);
+            const ok = chart.loadXml(`
+        <chartData>
+          <categories><category>X</category><category>Y</category></categories>
+          <series name="xml"><value>7</value><value>9</value></series>
+        </chartData>
+      `);
+            await flush();
+            expect(ok).toBe(true);
+            expect(el.querySelectorAll(".mc-point").length).toBe(2);
+            const labels = [...el.querySelectorAll(".mc-legend-label")].map((x) => x.textContent);
+            expect(labels).toContain("xml");
+            expect(chart.loadXml("<nope/>")).toBe(false);
+            destroy();
+        });
+        it("데이터 갱신 시 같은 키의 지오메트리에 .mc-morph가 붙는다", async () => {
+            // morph는 animation.updates 경로 — 스펙 기본값 animation:false를 덮는다
+            const { el, chart, flush, destroy } = await mountSpecChart(mount, {
+                type: "bar",
+                animation: true,
+            });
+            chart.updatePoint("매출", 0, 35);
+            await flush();
+            // 값이 바뀐 막대에 morph 마커가 붙는다
+            const morphed = el.querySelectorAll(".mc-bar.mc-morph");
+            expect(morphed.length).toBeGreaterThan(0);
+            expect(morphed[0].getAttribute("data-index")).toBe("0");
+            destroy();
+        });
+        it("destroy 후 루트를 제거한다", async () => {
+            const { el, destroy } = await mountSpecChart(mount);
+            destroy();
+            expect(el.querySelector(".mc-root")).toBeNull();
+        });
+    });
+}
+//# sourceMappingURL=conformance.js.map