@pyreon/charts 0.11.5 → 0.11.6

package/src/tests/charts.test.tsx

@@ -1,13 +1,13 @@
-import { signal } from "@pyreon/reactivity"
-import { mount } from "@pyreon/runtime-dom"
-import { Chart } from "../chart-component"
-import { _resetLoader, ensureModules, getCore, getCoreSync, manualUse } from "../loader"
+import { signal } from '@pyreon/reactivity'
+import { mount } from '@pyreon/runtime-dom'
+import { Chart } from '../chart-component'
+import { _resetLoader, ensureModules, getCore, getCoreSync, manualUse } from '../loader'
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 function mountWith<T>(fn: () => T): { result: T; unmount: () => void } {
   let result: T | undefined
-  const el = document.createElement("div")
+  const el = document.createElement('div')
   document.body.appendChild(el)
   const Child = () => {
     result = fn()
@@ -29,120 +29,120 @@ afterEach(() => {
 
 // ─── Loader ───────────────────────────────────────────────────────────────────
 
-describe("loader", () => {
-  it("lazily loads echarts/core on first call", async () => {
+describe('loader', () => {
+  it('lazily loads echarts/core on first call', async () => {
     const core = await getCore()
     expect(core).toBeDefined()
-    expect(typeof core.init).toBe("function")
-    expect(typeof core.use).toBe("function")
+    expect(typeof core.init).toBe('function')
+    expect(typeof core.use).toBe('function')
   })
 
-  it("caches core module on subsequent calls", async () => {
+  it('caches core module on subsequent calls', async () => {
     const core1 = await getCore()
     const core2 = await getCore()
     expect(core1).toBe(core2)
   })
 
-  it("auto-detects BarChart from series type", async () => {
+  it('auto-detects BarChart from series type', async () => {
     const core = await ensureModules({
-      series: [{ type: "bar", data: [1, 2, 3] }],
+      series: [{ type: 'bar', data: [1, 2, 3] }],
     })
     expect(core).toBeDefined()
     // If it didn't throw, the modules were registered successfully
   })
 
-  it("auto-detects PieChart from series type", async () => {
+  it('auto-detects PieChart from series type', async () => {
     const core = await ensureModules({
-      series: [{ type: "pie", data: [{ value: 1 }] }],
+      series: [{ type: 'pie', data: [{ value: 1 }] }],
     })
     expect(core).toBeDefined()
   })
 
-  it("auto-detects LineChart from series type", async () => {
+  it('auto-detects LineChart from series type', async () => {
     const core = await ensureModules({
-      series: [{ type: "line", data: [1, 2, 3] }],
+      series: [{ type: 'line', data: [1, 2, 3] }],
     })
     expect(core).toBeDefined()
   })
 
-  it("auto-detects components from config keys", async () => {
+  it('auto-detects components from config keys', async () => {
     const core = await ensureModules({
-      tooltip: { trigger: "axis" },
+      tooltip: { trigger: 'axis' },
       legend: {},
-      xAxis: { type: "category" },
-      yAxis: { type: "value" },
-      series: [{ type: "bar", data: [1] }],
+      xAxis: { type: 'category' },
+      yAxis: { type: 'value' },
+      series: [{ type: 'bar', data: [1] }],
     })
     expect(core).toBeDefined()
   })
 
-  it("auto-detects series features (markPoint, markLine, markArea)", async () => {
+  it('auto-detects series features (markPoint, markLine, markArea)', async () => {
     const core = await ensureModules({
       series: [
         {
-          type: "line",
+          type: 'line',
           data: [1, 2, 3],
-          markPoint: { data: [{ type: "max" }] },
-          markLine: { data: [{ type: "average" }] },
-          markArea: { data: [[{ xAxis: "A" }, { xAxis: "B" }]] },
+          markPoint: { data: [{ type: 'max' }] },
+          markLine: { data: [{ type: 'average' }] },
+          markArea: { data: [[{ xAxis: 'A' }, { xAxis: 'B' }]] },
         },
       ],
     })
     expect(core).toBeDefined()
   })
 
-  it("loads multiple chart types in one config", async () => {
+  it('loads multiple chart types in one config', async () => {
     const core = await ensureModules({
       series: [
-        { type: "bar", data: [1, 2] },
-        { type: "line", data: [3, 4] },
-        { type: "scatter", data: [[1, 2]] },
+        { type: 'bar', data: [1, 2] },
+        { type: 'line', data: [3, 4] },
+        { type: 'scatter', data: [[1, 2]] },
       ],
     })
     expect(core).toBeDefined()
   })
 
-  it("caches modules across calls", async () => {
+  it('caches modules across calls', async () => {
     // First call loads BarChart
-    await ensureModules({ series: [{ type: "bar", data: [1] }] })
+    await ensureModules({ series: [{ type: 'bar', data: [1] }] })
     // Second call should be instant (cached)
     const start = performance.now()
-    await ensureModules({ series: [{ type: "bar", data: [2] }] })
+    await ensureModules({ series: [{ type: 'bar', data: [2] }] })
     const duration = performance.now() - start
     // Should be near-instant since modules are cached
     expect(duration).toBeLessThan(50)
   })
 
-  it("handles series as single object (not array)", async () => {
+  it('handles series as single object (not array)', async () => {
     const core = await ensureModules({
-      series: { type: "bar", data: [1, 2, 3] },
+      series: { type: 'bar', data: [1, 2, 3] },
     })
     expect(core).toBeDefined()
   })
 
-  it("handles empty series gracefully", async () => {
+  it('handles empty series gracefully', async () => {
     const core = await ensureModules({ series: [] })
     expect(core).toBeDefined()
   })
 
-  it("handles config with no series", async () => {
-    const core = await ensureModules({ title: { text: "Hello" } })
+  it('handles config with no series', async () => {
+    const core = await ensureModules({ title: { text: 'Hello' } })
     expect(core).toBeDefined()
   })
 
-  it("ignores unknown chart types", async () => {
+  it('ignores unknown chart types', async () => {
     const core = await ensureModules({
-      series: [{ type: "nonexistent", data: [1] }],
+      series: [{ type: 'nonexistent', data: [1] }],
     })
     expect(core).toBeDefined()
   })
 
-  it("loads SVG renderer when specified", async () => {
-    const core = await ensureModules({ series: [{ type: "bar", data: [1] }] }, "svg")
+  it('loads SVG renderer when specified', async () => {
+    const core = await ensureModules({ series: [{ type: 'bar', data: [1] }] }, 'svg')
     expect(core).toBeDefined()
   })
 
-  it("resets state with _resetLoader", async () => {
+  it('resets state with _resetLoader', async () => {
     await getCore() // load core
     _resetLoader()
     // After reset, core should be null internally but getCore still works
@@ -150,35 +150,35 @@ describe("loader", () => {
     expect(core).toBeDefined()
   })
 
-  it("getCoreSync returns null before loading", () => {
+  it('getCoreSync returns null before loading', () => {
     _resetLoader()
     expect(getCoreSync()).toBeNull()
   })
 
-  it("getCoreSync returns core after loading", async () => {
+  it('getCoreSync returns core after loading', async () => {
     await getCore()
     expect(getCoreSync()).not.toBeNull()
-    expect(typeof getCoreSync()!.init).toBe("function")
+    expect(typeof getCoreSync()!.init).toBe('function')
   })
 
-  it("manualUse registers modules when core is loaded", async () => {
+  it('manualUse registers modules when core is loaded', async () => {
     await getCore() // ensure core is loaded
     // Should not throw — registers module with core.use()
-    const { CanvasRenderer } = await import("echarts/renderers")
+    const { CanvasRenderer } = await import('echarts/renderers')
     expect(() => manualUse(CanvasRenderer)).not.toThrow()
   })
 
-  it("manualUse queues modules when core is not yet loaded", async () => {
+  it('manualUse queues modules when core is not yet loaded', async () => {
     _resetLoader()
     // Core not loaded yet — should queue, not throw
-    const { CanvasRenderer } = await import("echarts/renderers")
+    const { CanvasRenderer } = await import('echarts/renderers')
     expect(() => manualUse(CanvasRenderer)).not.toThrow()
   })
 
-  it("loads radar component for radar config key", async () => {
+  it('loads radar component for radar config key', async () => {
     const core = await ensureModules({
-      radar: { indicator: [{ name: "A" }] },
-      series: [{ type: "radar", data: [{ value: [1] }] }],
+      radar: { indicator: [{ name: 'A' }] },
+      series: [{ type: 'radar', data: [{ value: [1] }] }],
     })
     expect(core).toBeDefined()
   })
@@ -186,36 +186,36 @@ describe("loader", () => {
 
 // ─── Chart component ─────────────────────────────────────────────────────────
 
-describe("Chart component", () => {
-  it("renders a div element", () => {
-    const container = document.createElement("div")
+describe('Chart component', () => {
+  it('renders a div element', () => {
+    const container = document.createElement('div')
     document.body.appendChild(container)
 
     const unmount = mount(
       <Chart
         options={() => ({
-          series: [{ type: "bar", data: [1, 2, 3] }],
+          series: [{ type: 'bar', data: [1, 2, 3] }],
         })}
         style="height: 300px"
       />,
       container,
     )
 
-    const div = container.querySelector("div")
+    const div = container.querySelector('div')
     expect(div).not.toBeNull()
 
     unmount()
     container.remove()
   })
 
-  it("applies style and class props to container", () => {
-    const container = document.createElement("div")
+  it('applies style and class props to container', () => {
+    const container = document.createElement('div')
     document.body.appendChild(container)
 
     const unmount = mount(
       <Chart
         options={() => ({
-          series: [{ type: "bar", data: [1] }],
+          series: [{ type: 'bar', data: [1] }],
         })}
         style="height: 400px; width: 100%"
         class="revenue-chart"
@@ -223,9 +223,9 @@ describe("Chart component", () => {
       container,
     )
 
-    const div = container.querySelector("div")
-    expect(div?.getAttribute("style")).toContain("height: 400px")
-    expect(div?.getAttribute("class")).toContain("revenue-chart")
+    const div = container.querySelector('div')
+    expect(div?.getAttribute('style')).toContain('height: 400px')
+    expect(div?.getAttribute('class')).toContain('revenue-chart')
 
     unmount()
     container.remove()
@@ -234,31 +234,31 @@ describe("Chart component", () => {
 
 // ─── useChart basic API ──────────────────────────────────────────────────────
 
-describe("useChart API", () => {
+describe('useChart API', () => {
   // Import useChart lazily to avoid module-level echarts import issues
-  it("returns the correct shape", async () => {
-    const { useChart } = await import("../use-chart")
+  it('returns the correct shape', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "bar", data: [1, 2, 3] }],
+        series: [{ type: 'bar', data: [1, 2, 3] }],
       })),
     )
 
-    expect(typeof chart.ref).toBe("function")
+    expect(typeof chart.ref).toBe('function')
     expect(chart.instance()).toBeNull()
     expect(chart.loading()).toBe(true)
-    expect(typeof chart.resize).toBe("function")
+    expect(typeof chart.resize).toBe('function')
 
     unmount()
   })
 
-  it("resize does not throw when no instance", async () => {
-    const { useChart } = await import("../use-chart")
+  it('resize does not throw when no instance', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "bar", data: [1] }],
+        series: [{ type: 'bar', data: [1] }],
       })),
     )
 
@@ -266,12 +266,12 @@ describe("useChart API", () => {
     unmount()
   })
 
-  it("loading starts as true", async () => {
-    const { useChart } = await import("../use-chart")
+  it('loading starts as true', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "pie", data: [{ value: 1 }] }],
+        series: [{ type: 'pie', data: [{ value: 1 }] }],
       })),
     )
 
@@ -282,30 +282,30 @@ describe("useChart API", () => {
 
 // ─── All supported chart types ──────────────────────────────────────────────
 
-describe("supported chart types", () => {
+describe('supported chart types', () => {
   const chartTypes = [
-    "bar",
-    "line",
-    "pie",
-    "scatter",
-    "radar",
-    "heatmap",
-    "treemap",
-    "sunburst",
-    "sankey",
-    "funnel",
-    "gauge",
-    "graph",
-    "tree",
-    "boxplot",
-    "candlestick",
-    "parallel",
-    "themeRiver",
-    "effectScatter",
-    "lines",
-    "pictorialBar",
-    "custom",
-    "map",
+    'bar',
+    'line',
+    'pie',
+    'scatter',
+    'radar',
+    'heatmap',
+    'treemap',
+    'sunburst',
+    'sankey',
+    'funnel',
+    'gauge',
+    'graph',
+    'tree',
+    'boxplot',
+    'candlestick',
+    'parallel',
+    'themeRiver',
+    'effectScatter',
+    'lines',
+    'pictorialBar',
+    'custom',
+    'map',
   ]
 
   for (const type of chartTypes) {
@@ -321,25 +321,25 @@ describe("supported chart types", () => {
 
 // ─── All supported component keys ───────────────────────────────────────────
 
-describe("supported component keys", () => {
+describe('supported component keys', () => {
   const componentKeys = [
-    "tooltip",
-    "legend",
-    "title",
-    "toolbox",
-    "dataZoom",
-    "visualMap",
-    "timeline",
-    "graphic",
-    "brush",
-    "calendar",
-    "dataset",
-    "aria",
-    "grid",
-    "xAxis",
-    "yAxis",
-    "polar",
-    "geo",
+    'tooltip',
+    'legend',
+    'title',
+    'toolbox',
+    'dataZoom',
+    'visualMap',
+    'timeline',
+    'graphic',
+    'brush',
+    'calendar',
+    'dataset',
+    'aria',
+    'grid',
+    'xAxis',
+    'yAxis',
+    'polar',
+    'geo',
   ]
 
   for (const key of componentKeys) {
@@ -347,7 +347,7 @@ describe("supported component keys", () => {
       _resetLoader()
       const core = await ensureModules({
         [key]: {},
-        series: [{ type: "bar", data: [1] }],
+        series: [{ type: 'bar', data: [1] }],
       })
       expect(core).toBeDefined()
     })
@@ -356,28 +356,28 @@ describe("supported component keys", () => {
 
 // ─── Option validation ──────────────────────────────────────────────────────
 
-describe("option validation", () => {
-  it("handles empty options object", async () => {
+describe('option validation', () => {
+  it('handles empty options object', async () => {
     const core = await ensureModules({})
     expect(core).toBeDefined()
   })
 
-  it("throws on null series entries", async () => {
+  it('throws on null series entries', async () => {
     await expect(
       ensureModules({
-        series: [null as any, { type: "bar", data: [1] }],
+        series: [null as any, { type: 'bar', data: [1] }],
       }),
     ).rejects.toThrow()
   })
 
-  it("handles series with no type property", async () => {
+  it('handles series with no type property', async () => {
     const core = await ensureModules({
       series: [{ data: [1, 2, 3] }],
     })
     expect(core).toBeDefined()
   })
 
-  it("handles undefined series value", async () => {
+  it('handles undefined series value', async () => {
     const core = await ensureModules({ series: undefined })
     expect(core).toBeDefined()
   })
@@ -385,19 +385,19 @@ describe("option validation", () => {
 
 // ─── Multiple chart instances ───────────────────────────────────────────────
 
-describe("multiple chart instances", () => {
-  it("creates independent useChart instances", async () => {
-    const { useChart } = await import("../use-chart")
+describe('multiple chart instances', () => {
+  it('creates independent useChart instances', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart1, unmount: unmount1 } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "bar", data: [1, 2, 3] }],
+        series: [{ type: 'bar', data: [1, 2, 3] }],
       })),
     )
 
     const { result: chart2, unmount: unmount2 } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "line", data: [4, 5, 6] }],
+        series: [{ type: 'line', data: [4, 5, 6] }],
       })),
     )
 
@@ -410,18 +410,18 @@ describe("multiple chart instances", () => {
     unmount2()
   })
 
-  it("disposing one chart does not affect another", async () => {
-    const { useChart } = await import("../use-chart")
+  it('disposing one chart does not affect another', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { unmount: unmount1 } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "bar", data: [1] }],
+        series: [{ type: 'bar', data: [1] }],
       })),
     )
 
     const { result: chart2, unmount: unmount2 } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "bar", data: [2] }],
+        series: [{ type: 'bar', data: [2] }],
       })),
     )
 
@@ -438,13 +438,13 @@ describe("multiple chart instances", () => {
 
 // ─── Resize observer cleanup ────────────────────────────────────────────────
 
-describe("resize observer cleanup", () => {
-  it("chart instance is set to null on unmount", async () => {
-    const { useChart } = await import("../use-chart")
+describe('resize observer cleanup', () => {
+  it('chart instance is set to null on unmount', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "bar", data: [1] }],
+        series: [{ type: 'bar', data: [1] }],
       })),
     )
 
@@ -457,19 +457,19 @@ describe("resize observer cleanup", () => {
     expect(chart.instance()).toBeNull()
   })
 
-  it("onUnmount disposes the chart instance when it exists", async () => {
-    const { useChart } = await import("../use-chart")
+  it('onUnmount disposes the chart instance when it exists', async () => {
+    const { useChart } = await import('../use-chart')
 
-    const el = document.createElement("div")
+    const el = document.createElement('div')
     document.body.appendChild(el)
 
-    const mountEl = document.createElement("div")
+    const mountEl = document.createElement('div')
     document.body.appendChild(mountEl)
 
     let chartResult: ReturnType<typeof useChart> | undefined
     const Child = () => {
       chartResult = useChart(() => ({
-        series: [{ type: "bar", data: [1] }],
+        series: [{ type: 'bar', data: [1] }],
       }))
       chartResult.ref(el)
       return null
@@ -493,16 +493,16 @@ describe("resize observer cleanup", () => {
 
 // ─── Theme switching ────────────────────────────────────────────────────────
 
-describe("theme config", () => {
-  it("passes theme to useChart config", async () => {
-    const { useChart } = await import("../use-chart")
+describe('theme config', () => {
+  it('passes theme to useChart config', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(
         () => ({
-          series: [{ type: "bar", data: [1] }],
+          series: [{ type: 'bar', data: [1] }],
         }),
-        { theme: "dark" },
+        { theme: 'dark' },
       ),
     )
 
@@ -513,14 +513,14 @@ describe("theme config", () => {
     unmount()
   })
 
-  it("Chart component accepts theme prop", () => {
-    const container = document.createElement("div")
+  it('Chart component accepts theme prop', () => {
+    const container = document.createElement('div')
     document.body.appendChild(container)
 
     const unmount = mount(
       <Chart
         options={() => ({
-          series: [{ type: "bar", data: [1] }],
+          series: [{ type: 'bar', data: [1] }],
         })}
         theme="dark"
         style="height: 300px"
@@ -528,7 +528,7 @@ describe("theme config", () => {
       container,
     )
 
-    const div = container.querySelector("div")
+    const div = container.querySelector('div')
     expect(div).not.toBeNull()
 
     unmount()
@@ -538,13 +538,13 @@ describe("theme config", () => {
 
 // ─── Error signal ───────────────────────────────────────────────────────────
 
-describe("error signal", () => {
-  it("error is null initially", async () => {
-    const { useChart } = await import("../use-chart")
+describe('error signal', () => {
+  it('error is null initially', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "bar", data: [1] }],
+        series: [{ type: 'bar', data: [1] }],
       })),
     )
 
@@ -552,62 +552,62 @@ describe("error signal", () => {
     unmount()
   })
 
-  it("error is set when optionsFn throws during init", async () => {
-    const { useChart } = await import("../use-chart")
+  it('error is set when optionsFn throws during init', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(() => {
-        throw new Error("Bad options")
+        throw new Error('Bad options')
       }),
     )
 
     // Trigger init by setting a container
-    const el = document.createElement("div")
+    const el = document.createElement('div')
     document.body.appendChild(el)
     chart.ref(el)
 
     await new Promise((r) => setTimeout(r, 100))
 
     expect(chart.error()).not.toBeNull()
-    expect(chart.error()!.message).toBe("Bad options")
+    expect(chart.error()!.message).toBe('Bad options')
     expect(chart.loading()).toBe(false)
 
     unmount()
     el.remove()
   })
 
-  it("error is set when optionsFn throws non-Error value during init", async () => {
-    const { useChart } = await import("../use-chart")
+  it('error is set when optionsFn throws non-Error value during init', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(() => {
-        throw "string failure"
+        throw 'string failure'
       }),
     )
 
-    const el = document.createElement("div")
+    const el = document.createElement('div')
     document.body.appendChild(el)
     chart.ref(el)
 
     await new Promise((r) => setTimeout(r, 100))
 
     expect(chart.error()).not.toBeNull()
-    expect(chart.error()!.message).toBe("string failure")
+    expect(chart.error()!.message).toBe('string failure')
 
     unmount()
     el.remove()
   })
 
-  it("useChart returns error signal in result shape", async () => {
-    const { useChart } = await import("../use-chart")
+  it('useChart returns error signal in result shape', async () => {
+    const { useChart } = await import('../use-chart')
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "bar", data: [1] }],
+        series: [{ type: 'bar', data: [1] }],
       })),
     )
 
-    expect(typeof chart.error).toBe("function")
+    expect(typeof chart.error).toBe('function')
     expect(chart.error()).toBeNull()
 
     unmount()
@@ -616,9 +616,9 @@ describe("error signal", () => {
 
 // ─── Chart component events ─────────────────────────────────────────────────
 
-describe("Chart component events", () => {
-  it("renders with event handler props without throwing", () => {
-    const container = document.createElement("div")
+describe('Chart component events', () => {
+  it('renders with event handler props without throwing', () => {
+    const container = document.createElement('div')
     document.body.appendChild(container)
 
     const onClick = vi.fn()
@@ -627,7 +627,7 @@ describe("Chart component events", () => {
     const unmount = mount(
       <Chart
         options={() => ({
-          series: [{ type: "bar", data: [1] }],
+          series: [{ type: 'bar', data: [1] }],
         })}
         style="height: 300px"
         onClick={onClick}
@@ -636,7 +636,7 @@ describe("Chart component events", () => {
       container,
     )
 
-    expect(container.querySelector("div")).not.toBeNull()
+    expect(container.querySelector('div')).not.toBeNull()
 
     unmount()
     container.remove()
@@ -645,15 +645,15 @@ describe("Chart component events", () => {
 
 // ─── Reactive options with signal ───────────────────────────────────────────
 
-describe("reactive options", () => {
-  it("useChart accepts optionsFn that reads signals", async () => {
-    const { useChart } = await import("../use-chart")
+describe('reactive options', () => {
+  it('useChart accepts optionsFn that reads signals', async () => {
+    const { useChart } = await import('../use-chart')
 
     const data = signal([1, 2, 3])
 
     const { result: chart, unmount } = mountWith(() =>
       useChart(() => ({
-        series: [{ type: "bar", data: data() }],
+        series: [{ type: 'bar', data: data() }],
       })),
     )