@inglorious/charts 1.0.1

package/src/cartesian/line.test.js

@@ -0,0 +1,177 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render } from "@inglorious/web/test"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { line } from "./line.js"
+
+describe("line", () => {
+  let entity
+  let api
+
+  beforeEach(() => {
+    entity = {
+      id: "test-line",
+      type: "line",
+      data: [
+        { name: "Jan", value: 100 },
+        { name: "Feb", value: 200 },
+        { name: "Mar", value: 150 },
+      ],
+      width: 800,
+      height: 400,
+      padding: { top: 20, right: 50, bottom: 30, left: 50 },
+      colors: ["#3b82f6", "#ef4444", "#10b981"],
+    }
+
+    api = {
+      getEntity: vi.fn((id) => (id === "test-line" ? entity : null)),
+      getType: vi.fn((type) => {
+        if (type === "line") return line
+        return null
+      }),
+      notify: vi.fn(),
+    }
+  })
+
+  describe("render", () => {
+    it("should render line chart with data", () => {
+      const result = line.render(entity, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const svg = container.querySelector("svg")
+      expect(svg).toBeTruthy()
+    })
+
+    it("should handle empty data gracefully", () => {
+      entity.data = []
+
+      const result = line.render(entity, api)
+      expect(result).toBeDefined()
+      // render may return empty template or handle empty state internally
+    })
+  })
+
+  describe("renderLineChart (composition mode)", () => {
+    it("should render line chart with children", () => {
+      const children = [() => null, () => null, () => null, () => null]
+
+      const result = line.renderLineChart(entity, { children, config: {} }, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const chart = container.querySelector(".iw-chart")
+      expect(chart).toBeTruthy()
+    })
+
+    it("should use config.data to override entity.data", () => {
+      const configData = [
+        { name: "Apr", value: 300 },
+        { name: "May", value: 400 },
+      ]
+
+      const children = []
+      const result = line.renderLineChart(
+        entity,
+        { children, config: { data: configData } },
+        api,
+      )
+
+      // The context should use configData, not entity.data
+      expect(result).toBeDefined()
+    })
+
+    it("should use config dimensions if provided", () => {
+      const children = []
+      const result = line.renderLineChart(
+        entity,
+        {
+          children,
+          config: {
+            width: 1000,
+            height: 500,
+          },
+        },
+        api,
+      )
+
+      expect(result).toBeDefined()
+    })
+  })
+
+  describe("renderLine", () => {
+    it("should render line with dataKey when context is provided", () => {
+      const context = {
+        xScale: (x) => x * 100,
+        yScale: (y) => 400 - y * 2,
+        dimensions: {
+          width: 800,
+          height: 400,
+          padding: { top: 20, right: 50, bottom: 30, left: 50 },
+        },
+        entity,
+        api,
+      }
+
+      const lineFn = line.renderLine(
+        entity,
+        { config: { dataKey: "value" } },
+        api,
+      )
+      const result = lineFn(context)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const path = container.querySelector("path")
+      expect(path).toBeTruthy()
+    })
+
+    it("should render dots when showDots is true", () => {
+      const context = {
+        xScale: (x) => x * 100,
+        yScale: (y) => 400 - y * 2,
+        dimensions: {
+          width: 800,
+          height: 400,
+          padding: { top: 20, right: 50, bottom: 30, left: 50 },
+        },
+        entity,
+        api,
+      }
+
+      const lineFn = line.renderLine(
+        entity,
+        { config: { dataKey: "value", showDots: true } },
+        api,
+      )
+      const result = lineFn(context)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const dots = container.querySelectorAll("circle")
+      expect(dots.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe("renderXAxis", () => {
+    it("should return template result", () => {
+      const result = line.renderXAxis(
+        entity,
+        { config: { dataKey: "value" } },
+        api,
+      )
+      expect(result).toBeDefined()
+      // renderXAxis returns svg template, which may be empty if context is missing
+    })
+  })
+
+  describe("renderYAxis", () => {
+    it("should return template result", () => {
+      const result = line.renderYAxis(entity, { config: {} }, api)
+      expect(result).toBeDefined()
+      // renderYAxis returns svg template, which may be empty if context is missing
+    })
+  })
+})

package/src/chart.test.js

@@ -0,0 +1,444 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it, vi } from "vitest"
+
+import { chart } from "./index.js"
+import {
+  areaChart,
+  barChart,
+  donutChart,
+  lineChart,
+  pieChart,
+} from "./utils/chart-utils.js"
+
+const sampleBarData = [
+  { label: "Jan", value: 100 },
+  { label: "Feb", value: 150 },
+  { label: "Mar", value: 120 },
+]
+
+const sampleLineData = [
+  { x: 0, y: 50 },
+  { x: 1, y: 150 },
+  { x: 2, y: 120 },
+]
+
+const samplePieData = [
+  { label: "Category A", value: 20 },
+  { label: "Category B", value: 35 },
+  { label: "Category C", value: 15 },
+]
+
+describe("chart", () => {
+  describe("logic", () => {
+    describe("create()", () => {
+      it("should initialize with default state", () => {
+        const entity = {
+          id: "test-chart",
+          type: "bar",
+        }
+
+        chart.create(entity)
+
+        expect(entity.width).toBe(800)
+        expect(entity.height).toBe(400)
+        expect(entity.padding).toBeDefined()
+        expect(entity.data).toEqual([])
+        expect(entity.colors).toEqual([
+          "#3b82f6",
+          "#ef4444",
+          "#10b981",
+          "#f59e0b",
+          "#8b5cf6",
+        ])
+        expect(entity.showLegend).toBe(true)
+        expect(entity.showGrid).toBe(true)
+        expect(entity.showTooltip).toBe(true)
+        expect(entity.tooltip).toBe(null)
+        expect(entity.tooltipX).toBe(0)
+        expect(entity.tooltipY).toBe(0)
+        expect(entity.labelPosition).toBe("outside")
+      })
+
+      it("should preserve existing values", () => {
+        const entity = {
+          id: "test-chart",
+          type: "bar",
+          width: 1000,
+          height: 500,
+          data: sampleBarData,
+        }
+
+        chart.create(entity)
+
+        expect(entity.width).toBe(1000)
+        expect(entity.height).toBe(500)
+        expect(entity.data).toEqual(sampleBarData)
+      })
+
+      it("should detect time axis type from dates", () => {
+        const entity = {
+          id: "test-chart",
+          type: "line",
+          data: [{ date: "2024-01-01", value: 100 }],
+        }
+
+        chart.create(entity)
+
+        expect(entity.xAxisType).toBe("time")
+      })
+
+      it("should default to linear axis type without dates", () => {
+        const entity = {
+          id: "test-chart",
+          type: "line",
+          data: sampleLineData,
+        }
+
+        chart.create(entity)
+
+        expect(entity.xAxisType).toBe("linear")
+      })
+    })
+
+    describe("dataUpdate()", () => {
+      it("should update chart data", () => {
+        const entity = {
+          id: "test-chart",
+          type: "bar",
+          data: sampleBarData,
+        }
+
+        chart.create(entity)
+        const newData = [{ label: "Apr", value: 200 }]
+        chart.dataUpdate(entity, newData)
+
+        expect(entity.data).toEqual(newData)
+      })
+    })
+
+    describe("sizeUpdate()", () => {
+      it("should update width and height", () => {
+        const entity = {
+          id: "test-chart",
+          type: "bar",
+        }
+
+        chart.create(entity)
+        chart.sizeUpdate(entity, 1200, 600)
+
+        expect(entity.width).toBe(1200)
+        expect(entity.height).toBe(600)
+        expect(entity.padding).toBeDefined()
+      })
+    })
+
+    describe("tooltipShow()", () => {
+      it("should set tooltip data and position", () => {
+        const entity = {
+          id: "test-chart",
+          type: "bar",
+        }
+
+        chart.create(entity)
+        chart.tooltipShow(entity, {
+          label: "Jan",
+          value: 100,
+          color: "#3b82f6",
+          x: 100,
+          y: 200,
+        })
+
+        expect(entity.tooltip).toEqual({
+          label: "Jan",
+          value: 100,
+          color: "#3b82f6",
+        })
+        expect(entity.tooltipX).toBe(100)
+        expect(entity.tooltipY).toBe(200)
+      })
+
+      it("should set tooltip with percentage", () => {
+        const entity = {
+          id: "test-chart",
+          type: "pie",
+        }
+
+        chart.create(entity)
+        chart.tooltipShow(entity, {
+          label: "Category A",
+          value: 20,
+          percentage: 25,
+          color: "#3b82f6",
+          x: 150,
+          y: 250,
+        })
+
+        expect(entity.tooltip).toEqual({
+          label: "Category A",
+          value: 20,
+          percentage: 25,
+          color: "#3b82f6",
+        })
+      })
+    })
+
+    describe("tooltipHide()", () => {
+      it("should clear tooltip", () => {
+        const entity = {
+          id: "test-chart",
+          type: "bar",
+        }
+
+        chart.create(entity)
+        chart.tooltipShow(entity, {
+          label: "Jan",
+          value: 100,
+          color: "#3b82f6",
+          x: 100,
+          y: 200,
+        })
+        chart.tooltipHide(entity)
+
+        expect(entity.tooltip).toBe(null)
+      })
+    })
+
+    describe("tooltipMove()", () => {
+      it("should update tooltip position", () => {
+        const entity = {
+          id: "test-chart",
+          type: "bar",
+        }
+
+        chart.create(entity)
+        chart.tooltipShow(entity, {
+          label: "Jan",
+          value: 100,
+          color: "#3b82f6",
+          x: 100,
+          y: 200,
+        })
+        chart.tooltipMove(entity, { x: 150, y: 250 })
+
+        expect(entity.tooltipX).toBe(150)
+        expect(entity.tooltipY).toBe(250)
+      })
+
+      it("should not update position if tooltip is not shown", () => {
+        const entity = {
+          id: "test-chart",
+          type: "bar",
+        }
+
+        chart.create(entity)
+        chart.tooltipMove(entity, { x: 150, y: 250 })
+
+        expect(entity.tooltipX).toBe(0)
+        expect(entity.tooltipY).toBe(0)
+      })
+    })
+  })
+
+  describe("rendering", () => {
+    describe("render()", () => {
+      it("should render chart using api.getType", () => {
+        const entity = {
+          id: "test-chart",
+          type: "bar",
+          data: sampleBarData,
+          width: 800,
+          height: 400,
+        }
+
+        chart.create(entity)
+
+        const mockApi = {
+          getType: vi.fn(() => barChart),
+        }
+
+        const result = chart.render(entity, mockApi)
+
+        expect(mockApi.getType).toHaveBeenCalledWith("bar")
+        expect(result).toBeDefined()
+      })
+
+      it("should return error message for unknown chart type", () => {
+        const entity = {
+          id: "test-chart",
+          type: "unknown",
+        }
+
+        chart.create(entity)
+
+        const mockApi = {
+          getType: vi.fn(() => null),
+        }
+
+        const result = chart.render(entity, mockApi)
+
+        expect(mockApi.getType).toHaveBeenCalledWith("unknown")
+        expect(result).toBeDefined()
+      })
+    })
+  })
+
+  describe("chart types", () => {
+    describe("barChart", () => {
+      it("should have create, render, and render methods", () => {
+        expect(barChart.create).toBeDefined()
+        expect(barChart.render).toBeDefined()
+        expect(barChart.render).toBeDefined()
+      })
+
+      it("should render chart with data", () => {
+        const entity = {
+          id: "test-bar",
+          type: "bar",
+          data: sampleBarData,
+          width: 800,
+          height: 400,
+        }
+
+        barChart.create(entity)
+        const mockApi = {
+          getType: vi.fn((type) => {
+            if (type === "bar") return barChart
+            return null
+          }),
+          notify: vi.fn(),
+        }
+        const result = barChart.render(entity, mockApi)
+
+        expect(result).toBeDefined()
+      })
+
+      it("should render empty state when no data", () => {
+        const entity = {
+          id: "test-bar",
+          type: "bar",
+          data: [],
+          width: 800,
+          height: 400,
+        }
+
+        barChart.create(entity)
+        const mockApi = {
+          getType: vi.fn((type) => {
+            if (type === "bar") return barChart
+            return null
+          }),
+          notify: vi.fn(),
+        }
+        const result = barChart.render(entity, mockApi)
+
+        expect(result).toBeDefined()
+      })
+    })
+
+    describe("lineChart", () => {
+      it("should have create, render, and render methods", () => {
+        expect(lineChart.create).toBeDefined()
+        expect(lineChart.render).toBeDefined()
+        expect(lineChart.render).toBeDefined()
+      })
+
+      it("should render chart with data", () => {
+        const entity = {
+          id: "test-line",
+          type: "line",
+          data: sampleLineData,
+          width: 800,
+          height: 400,
+        }
+
+        lineChart.create(entity)
+        const mockApi = {
+          getType: vi.fn((type) => {
+            if (type === "line") return lineChart
+            return null
+          }),
+          notify: vi.fn(),
+        }
+        const result = lineChart.render(entity, mockApi)
+
+        expect(result).toBeDefined()
+      })
+    })
+
+    describe("areaChart", () => {
+      it("should have render method", () => {
+        expect(areaChart.render).toBeDefined()
+      })
+
+      it("should render chart with data", () => {
+        const entity = {
+          id: "test-area",
+          type: "area",
+          data: sampleLineData,
+          width: 800,
+          height: 400,
+        }
+
+        chart.create(entity)
+        const mockApi = {
+          getType: vi.fn((type) => {
+            if (type === "area") return areaChart
+            return null
+          }),
+          notify: vi.fn(),
+        }
+        const result = areaChart.render(entity, mockApi)
+
+        expect(result).toBeDefined()
+      })
+    })
+
+    describe("pieChart", () => {
+      it("should have create, render, and render methods", () => {
+        expect(pieChart.create).toBeDefined()
+        expect(pieChart.render).toBeDefined()
+        expect(pieChart.render).toBeDefined()
+      })
+
+      it("should render chart with data", () => {
+        const entity = {
+          id: "test-pie",
+          type: "pie",
+          data: samplePieData,
+          width: 800,
+          height: 400,
+        }
+
+        pieChart.create(entity)
+        const result = pieChart.render(entity, {})
+
+        expect(result).toBeDefined()
+      })
+    })
+
+    describe("donutChart", () => {
+      it("should have create, render, and render methods", () => {
+        expect(donutChart.create).toBeDefined()
+        expect(donutChart.render).toBeDefined()
+        expect(donutChart.render).toBeDefined()
+      })
+
+      it("should render chart with data", () => {
+        const entity = {
+          id: "test-donut",
+          type: "donut",
+          data: samplePieData,
+          width: 400,
+          height: 400,
+        }
+
+        donutChart.create(entity)
+        const result = donutChart.render(entity, {})
+
+        expect(result).toBeDefined()
+      })
+    })
+  })
+})