@inglorious/charts 1.0.1

package/src/component/legend.test.js

@@ -0,0 +1,103 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { svg } from "@inglorious/web"
+import { render } from "@inglorious/web/test"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { renderLegend } from "./legend.js"
+
+describe("renderLegend", () => {
+  let entity
+  let props
+  let api
+
+  beforeEach(() => {
+    entity = {
+      id: "test-chart",
+      type: "line",
+      data: [],
+      width: 800,
+      height: 400,
+      padding: { top: 20, right: 50, bottom: 30, left: 50 },
+    }
+
+    props = {
+      series: [
+        { name: "Product A", color: "#3b82f6" },
+        { name: "Product B", color: "#ef4444" },
+        { name: "Product C", color: "#10b981" },
+      ],
+      colors: ["#3b82f6", "#ef4444", "#10b981"],
+      width: 800,
+      padding: { top: 20, right: 50, bottom: 30, left: 50 },
+    }
+
+    api = {
+      notify: vi.fn(),
+    }
+  })
+
+  describe("basic rendering", () => {
+    it("should render legend with series", () => {
+      const result = renderLegend(entity, props, api)
+      const container = document.createElement("div")
+      // Wrap in SVG since renderLegend returns SVG fragment
+      render(svg`<svg>${result}</svg>`, container)
+
+      const legend = container.querySelector("g.iw-chart-legend-wrapper")
+      expect(legend).toBeTruthy()
+
+      const items = container.querySelectorAll("g.iw-chart-legend-item")
+      expect(items.length).toBe(3)
+    })
+
+    it("should render legend items with colors and labels", () => {
+      const result = renderLegend(entity, props, api)
+      const container = document.createElement("div")
+      render(svg`<svg>${result}</svg>`, container)
+
+      const items = container.querySelectorAll("g.iw-chart-legend-item")
+      items.forEach((item, index) => {
+        const rect = item.querySelector("rect")
+        const text = item.querySelector("text")
+
+        expect(rect).toBeTruthy()
+        expect(text).toBeTruthy()
+        expect(rect.getAttribute("fill")).toBe(props.series[index].color)
+        expect(text.textContent).toContain(props.series[index].name)
+      })
+    })
+  })
+
+  describe("with empty series", () => {
+    it("should return empty template for empty series", () => {
+      props.series = []
+
+      const result = renderLegend(entity, props, api)
+      const container = document.createElement("div")
+      render(svg`<svg>${result}</svg>`, container)
+
+      // Should return empty template
+      const legend = container.querySelector("g.iw-chart-legend-wrapper")
+      expect(legend).toBeFalsy()
+    })
+  })
+
+  describe("with default colors", () => {
+    it("should use default colors when series color is not provided", () => {
+      props.series = [{ name: "Series A" }, { name: "Series B" }]
+      props.colors = ["#3b82f6", "#ef4444"]
+
+      const result = renderLegend(entity, props, api)
+      const container = document.createElement("div")
+      render(svg`<svg>${result}</svg>`, container)
+
+      const items = container.querySelectorAll("g.iw-chart-legend-item")
+      expect(items.length).toBe(2)
+
+      const firstRect = items[0].querySelector("rect")
+      expect(firstRect.getAttribute("fill")).toBe("#3b82f6")
+    })
+  })
+})

package/src/component/tooltip.js

@@ -0,0 +1,65 @@
+import { html } from "@inglorious/web"
+
+import { formatNumber } from "../utils/data-utils.js"
+
+/**
+ * Renders the chart tooltip overlay.
+ * Reused by cartesian charts (line, area, bar).
+ *
+ * @param {import('../types/charts').ChartEntity} entity
+ * @param {Object} props
+ * @param {any} api
+ * @returns {import('lit-html').TemplateResult}
+ */
+// eslint-disable-next-line no-unused-vars
+export function renderTooltip(entity, props, api) {
+  if (!entity?.tooltip) {
+    return html``
+  }
+
+  return html`
+    <div
+      class="iw-chart-modal"
+      style="left:${entity.tooltipX}px; top:${entity.tooltipY}px"
+    >
+      <div class="iw-chart-modal-header">
+        <span
+          class="iw-chart-modal-color"
+          style="background-color: ${entity.tooltip.color};"
+        ></span>
+        <span class="iw-chart-modal-label">${entity.tooltip.label}</span>
+      </div>
+      <div class="iw-chart-modal-body">
+        <div class="iw-chart-modal-value">
+          ${formatNumber(entity.tooltip.value)}
+        </div>
+      </div>
+    </div>
+  `
+}
+
+/**
+ * Creates a tooltip component for composition mode (Recharts-style)
+ * This factory function returns a component function that can be used in chart composition
+ *
+ * @returns {Function} Component function that accepts (entity, props, api) and returns a composition function
+ *
+ * @example
+ * // In line.js, area.js, bar.js:
+ * import { createTooltipComponent } from "../component/tooltip.js"
+ *
+ * export const line = {
+ *   renderTooltip: createTooltipComponent(),
+ * }
+ */
+export function createTooltipComponent() {
+  return (entity, props, api) => {
+    const tooltipFn = (ctx) => {
+      const entityFromContext = ctx.entity || entity
+      return renderTooltip(entityFromContext, {}, api)
+    }
+    // Mark as tooltip component for stable identification during processing
+    tooltipFn.isTooltip = true
+    return tooltipFn
+  }
+}

package/src/component/tooltip.test.js

@@ -0,0 +1,96 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render } from "@inglorious/web/test"
+import { describe, expect, it } from "vitest"
+
+import { renderTooltip } from "./tooltip.js"
+
+describe("renderTooltip", () => {
+  const mockApi = {}
+
+  it("should render tooltip when entity.tooltip is provided", () => {
+    const entity = {
+      id: "test",
+      data: [{ name: "Jan", value: 100 }],
+      tooltip: {
+        label: "Jan",
+        value: 100,
+        color: "#3b82f6",
+      },
+      tooltipX: 100,
+      tooltipY: 200,
+    }
+
+    const template = renderTooltip(entity, {}, mockApi)
+    const container = document.createElement("div")
+    render(template, container)
+
+    const tooltip = container.querySelector(".iw-chart-modal")
+    expect(tooltip).toBeTruthy()
+    expect(tooltip.textContent).toContain("Jan")
+    expect(tooltip.textContent).toContain("100")
+  })
+
+  it("should not render tooltip when entity.tooltip is null", () => {
+    const entity = {
+      id: "test",
+      data: [{ name: "Jan", value: 100 }],
+      tooltip: null,
+      tooltipX: 100,
+      tooltipY: 200,
+    }
+
+    const template = renderTooltip(entity, {}, mockApi)
+    const container = document.createElement("div")
+    render(template, container)
+
+    const tooltip = container.querySelector(".iw-chart-modal")
+    expect(tooltip).toBeNull()
+  })
+
+  it("should position tooltip at entity.tooltipX and entity.tooltipY", () => {
+    const entity = {
+      id: "test",
+      data: [{ name: "Jan", value: 100 }],
+      tooltip: {
+        label: "Jan",
+        value: 100,
+      },
+      tooltipX: 150,
+      tooltipY: 250,
+    }
+
+    const template = renderTooltip(entity, {}, mockApi)
+    const container = document.createElement("div")
+    render(template, container)
+
+    const tooltip = container.querySelector(".iw-chart-modal")
+    expect(tooltip).toBeTruthy()
+    expect(tooltip.style.left).toBe("150px")
+    expect(tooltip.style.top).toBe("250px")
+  })
+
+  it("should render tooltip with formatted number", () => {
+    const entity = {
+      id: "test",
+      data: [{ name: "Jan", value: 100 }],
+      tooltip: {
+        label: "Jan",
+        value: 1234.56,
+        color: "#3b82f6",
+      },
+      tooltipX: 100,
+      tooltipY: 200,
+    }
+
+    const template = renderTooltip(entity, {}, mockApi)
+    const container = document.createElement("div")
+    render(template, container)
+
+    const tooltip = container.querySelector(".iw-chart-modal")
+    expect(tooltip).toBeTruthy()
+    // formatNumber uses ",.2f" by default, so 1234.56 becomes "1,234.56"
+    expect(tooltip.textContent).toContain("1,234.56")
+  })
+})

package/src/component/x-axis.js

@@ -0,0 +1,212 @@
+/* eslint-disable no-magic-numbers */
+
+import { repeat, svg } from "@inglorious/web"
+
+import {
+  ensureValidNumber,
+  formatDate,
+  formatNumber,
+  isValidNumber,
+} from "../utils/data-utils.js"
+import { calculateXTicks } from "../utils/scales.js"
+
+/**
+ * @param {any} entity
+ * @param {Object} props
+ * @param {import('d3-scale').ScaleBand|import('d3-scale').ScaleLinear|import('d3-scale').ScaleTime} props.xScale
+ * @param {import('d3-scale').ScaleLinear} props.yScale
+ * @param {number} props.width
+ * @param {number} props.height
+ * @param {Object} props.padding
+ * @param {any} api
+ * @returns {import('lit-html').TemplateResult}
+ */
+
+// eslint-disable-next-line no-unused-vars
+export function renderXAxis(entity, props, api) {
+  const { xScale, yScale, width, height, padding } = props
+
+  if (xScale.bandwidth) {
+    // Following Recharts logic: for scaleBand, use the domain directly
+    // and calculate the center as scale(category) + bandwidth() / 2
+    const allCategories = xScale.domain()
+    if (allCategories.length === 0) {
+      return svg`<g class="iw-chart-xAxis"></g>`
+    }
+
+    // Limit number of ticks to avoid overlapping labels
+    // Similar to Recharts behavior: show fewer ticks when there are many categories
+    let categories = allCategories
+    if (allCategories.length > 20) {
+      // Calculate optimal number of ticks based on available width
+      // Estimate ~60px per label to avoid overlap
+      const availableWidth =
+        (width || 800) - (padding?.left || 0) - (padding?.right || 0)
+      const maxTicks = Math.max(5, Math.floor(availableWidth / 60))
+      const step = Math.ceil(allCategories.length / maxTicks)
+      categories = allCategories.filter((_, i) => i % step === 0)
+    }
+
+    let xAxisY = height - padding.bottom
+    if (yScale) {
+      const domain = yScale.domain()
+      if (domain[0] < 0) {
+        const zeroY = yScale(0)
+        if (isValidNumber(zeroY)) {
+          xAxisY = zeroY
+        }
+      }
+    }
+    // Ensure xAxisY is a valid number
+    if (!isValidNumber(xAxisY)) {
+      const fallbackY = height - (padding?.bottom || 0)
+      xAxisY = ensureValidNumber(fallbackY, height || 0)
+    }
+
+    // Offset for scaleBand: bandwidth() / 2 (as in Recharts)
+    // bandwidth() returns the available band width (without internal padding)
+    // Following Recharts logic exactly: offsetForBand = bandwidth() / 2
+    const bandwidth = xScale.bandwidth()
+    if (!isValidNumber(bandwidth) || bandwidth <= 0) {
+      // If bandwidth is not valid, don't render the axis
+      return svg`<g class="iw-chart-xAxis"></g>`
+    }
+    const offsetForBand = bandwidth / 2
+
+    return svg`
+    <g class="iw-chart-xAxis">
+      <!-- X Axis Line -->
+      <line
+        x1=${padding?.left || 0}
+        y1=${xAxisY}
+        x2=${(width || 0) - (padding?.right || 0)}
+        y2=${xAxisY}
+        stroke="#ddd"
+        stroke-width="0.0625em"
+        class="iw-chart-xAxis-line"
+      />
+      ${repeat(
+        categories,
+        (cat) => cat,
+        (cat) => {
+          // Following Recharts: coordinate = scale(category) + offset
+          // where offset = bandwidth() / 2 for scaleBand
+          // xScale(cat) returns the initial position of the band (including external padding)
+          // We add bandwidth() / 2 to get the center of the band
+          const scaled = xScale(cat)
+          if (scaled == null || !isValidNumber(scaled)) {
+            return svg``
+          }
+          const coordinate = scaled + offsetForBand
+          // Ensure coordinate is a valid number
+          if (!isValidNumber(coordinate)) {
+            return svg``
+          }
+          return svg`
+            <g class="iw-chart-xAxis-tick">
+              <!-- Tick line (vertical line) - uses the same coordinate -->
+              <line
+                x1=${coordinate}
+                y1=${xAxisY}
+                x2=${coordinate}
+                y2=${xAxisY + 5}
+                stroke="#ccc"
+                stroke-width="0.0625em"
+              />
+              <!-- Label - usa a mesma coordinate -->
+              <text
+                x=${coordinate}
+                y=${xAxisY + 20}
+                text-anchor="middle"
+                font-size="0.6875em"
+                fill="#777"
+                class="iw-chart-xAxis-tick-label"
+              >
+                ${cat}
+              </text>
+            </g>
+          `
+        },
+      )}
+    </g>
+  `
+  }
+
+  // Calculate ticks using helper function
+  const ticks = xScale.bandwidth
+    ? xScale.domain()
+    : calculateXTicks(entity.data, xScale)
+
+  let xAxisY = height - padding.bottom
+  if (yScale) {
+    const yDomain = yScale.domain()
+    if (yDomain[0] < 0) {
+      const zeroY = yScale(0)
+      if (isValidNumber(zeroY)) {
+        xAxisY = zeroY
+      }
+    }
+  }
+  // Ensure xAxisY is a valid number
+  if (!isValidNumber(xAxisY)) {
+    const fallbackY = height - (padding?.bottom || 0)
+    xAxisY = ensureValidNumber(fallbackY, height || 0)
+  }
+
+  // If entity has xLabels, use them for display (for categorical data)
+  const useLabels = entity.xLabels && Array.isArray(entity.xLabels)
+
+  return svg`
+    <g class="iw-chart-xAxis">
+      <!-- X Axis Line -->
+      <line
+        x1=${padding?.left || 0}
+        y1=${xAxisY}
+        x2=${(width || 0) - (padding?.right || 0)}
+        y2=${xAxisY}
+        stroke="#ddd"
+        stroke-width="0.0625em"
+        class="iw-chart-xAxis-line"
+      />
+      ${repeat(
+        ticks,
+        (t) => t,
+        (t, i) => {
+          const x = xScale(t)
+          // Ensure x is a valid number
+          if (!isValidNumber(x)) {
+            return svg``
+          }
+          // Use custom labels if available, otherwise format the tick value
+          const label =
+            useLabels && entity.xLabels[i] !== undefined
+              ? entity.xLabels[i]
+              : entity.xAxisType === "time"
+                ? formatDate(t)
+                : formatNumber(t)
+
+          return svg`
+            <g class="iw-chart-xAxis-tick">
+              <line
+                x1=${x}
+                y1=${xAxisY}
+                x2=${x}
+                y2=${xAxisY + 5}
+                stroke="#ccc"
+                stroke-width="0.0625em"
+              />
+              <text
+                x=${x}
+                y=${xAxisY + 20}
+                text-anchor="middle"
+                font-size="0.6875em"
+                fill="#777"
+                class="iw-chart-xAxis-tick-label"
+              >${label}</text>
+            </g>
+          `
+        },
+      )}
+    </g>
+  `
+}

package/src/component/x-axis.test.js

@@ -0,0 +1,148 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render } from "@inglorious/web/test"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { renderXAxis } from "./x-axis.js"
+
+describe("renderXAxis", () => {
+  let entity
+  let props
+  let api
+
+  beforeEach(() => {
+    entity = {
+      id: "test-chart",
+      type: "line",
+      data: [
+        { x: 0, y: 50 },
+        { x: 1, y: 150 },
+        { x: 2, y: 120 },
+      ],
+      width: 800,
+      height: 400,
+      padding: { top: 20, right: 50, bottom: 30, left: 50 },
+    }
+
+    props = {
+      xScale: vi.fn((x) => 50 + x * 200),
+      yScale: vi.fn((y) => 370 - (y / 200) * 350),
+      width: 800,
+      height: 400,
+      padding: { top: 20, right: 50, bottom: 30, left: 50 },
+    }
+
+    props.xScale.domain = vi.fn(() => [0, 2])
+    props.xScale.range = vi.fn(() => [50, 650])
+    props.xScale.bandwidth = vi.fn(() => 200)
+
+    props.yScale.domain = vi.fn(() => [0, 200])
+    props.yScale.range = vi.fn(() => [370, 20])
+
+    api = {
+      notify: vi.fn(),
+    }
+  })
+
+  describe("with scaleBand (categorical)", () => {
+    it("should render X axis with band scale", () => {
+      entity.data = [
+        { label: "Jan", value: 100 },
+        { label: "Feb", value: 150 },
+        { label: "Mar", value: 120 },
+      ]
+
+      const mockBandScale = vi.fn((cat) => {
+        const map = { Jan: 100, Feb: 350, Mar: 600 }
+        return map[cat] || 0
+      })
+      mockBandScale.domain = vi.fn(() => ["Jan", "Feb", "Mar"])
+      mockBandScale.range = vi.fn(() => [50, 750])
+      mockBandScale.bandwidth = vi.fn(() => 200)
+
+      props.xScale = mockBandScale
+
+      const result = renderXAxis(entity, props, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const axisLine = container.querySelector("line")
+      expect(axisLine).toBeTruthy()
+
+      const ticks = container.querySelectorAll("g.iw-chart-xAxis-tick")
+      expect(ticks.length).toBe(3)
+    })
+  })
+
+  describe("with scaleLinear (numeric)", () => {
+    it("should render X axis with linear scale", () => {
+      const result = renderXAxis(entity, props, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const axisLine = container.querySelector("line")
+      expect(axisLine).toBeTruthy()
+
+      const ticks = container.querySelectorAll("g.iw-chart-xAxis-tick")
+      expect(ticks.length).toBeGreaterThan(0)
+    })
+
+    it("should format integer ticks without decimals", () => {
+      const result = renderXAxis(entity, props, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const labels = container.querySelectorAll(".iw-chart-xAxis-tick-label")
+      labels.forEach((label) => {
+        const text = label.textContent.trim()
+        // Should not contain ".00" for integers
+        if (text.match(/^\d+$/)) {
+          expect(text).not.toContain(".00")
+        }
+      })
+    })
+  })
+
+  describe("with xLabels (custom labels)", () => {
+    it("should use custom xLabels when provided", () => {
+      entity.xLabels = ["Q1", "Q2", "Q3"]
+      entity.data = [
+        { x: 0, y: 50 },
+        { x: 1, y: 150 },
+        { x: 2, y: 120 },
+      ]
+
+      // Mock calculateXTicks to return [0, 1, 2]
+      const result = renderXAxis(entity, props, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const labels = container.querySelectorAll(".iw-chart-xAxis-tick-label")
+      // Should use xLabels when available
+      expect(labels.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe("with time axis", () => {
+    it("should format dates when xAxisType is time", () => {
+      entity.xAxisType = "time"
+      entity.data = [
+        { date: "2024-01-01", value: 100 },
+        { date: "2024-01-02", value: 150 },
+      ]
+
+      props.xScale.domain = vi.fn(() => [
+        new Date("2024-01-01"),
+        new Date("2024-01-02"),
+      ])
+
+      const result = renderXAxis(entity, props, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const axisLine = container.querySelector("line")
+      expect(axisLine).toBeTruthy()
+    })
+  })
+})

package/src/component/y-axis.js

@@ -0,0 +1,77 @@
+/* eslint-disable no-magic-numbers */
+
+import { repeat, svg } from "@inglorious/web"
+
+import { formatNumber, isValidNumber } from "../utils/data-utils.js"
+
+/**
+ * @param {any} entity
+ * @param {Object} props
+ * @param {import('d3-scale').ScaleLinear} props.yScale
+ * @param {number} props.height
+ * @param {Object} props.padding
+ * @param {Array} props.customTicks
+ * @param {any} api
+ * @returns {import('lit-html').TemplateResult}
+ */
+// eslint-disable-next-line no-unused-vars
+export function renderYAxis(entity, props, api) {
+  const { yScale, height, padding, customTicks } = props
+  // Use custom ticks if provided, otherwise use scale ticks
+  const ticks =
+    customTicks && Array.isArray(customTicks) ? customTicks : yScale.ticks(5)
+
+  // Ensure height and padding are valid numbers
+  const axisLineY2 = height - padding.bottom
+  if (!isValidNumber(axisLineY2)) {
+    return svg``
+  }
+
+  return svg`
+    <g class="iw-chart-yAxis">
+      <!-- Y Axis Line -->
+      <line
+        x1=${padding.left}
+        y1=${padding.top}
+        x2=${padding.left}
+        y2=${axisLineY2}
+        stroke="#ddd"
+        stroke-width="0.0625em"
+        class="iw-chart-yAxis-line"
+      />
+      ${repeat(
+        ticks,
+        (t) => t,
+        (t) => {
+          const y = yScale(t)
+          // Ensure y is a valid number
+          if (!isValidNumber(y)) {
+            return svg``
+          }
+          return svg`
+            <g class="iw-chart-yAxis-tick">
+              <line
+                x1=${padding.left}
+                y1=${y}
+                x2=${padding.left - 5}
+                y2=${y}
+                stroke="#ccc"
+                stroke-width="0.0625em"
+              />
+              <text
+                x=${padding.left - 10}
+                y=${y + 4}
+                text-anchor="end"
+                font-size="0.6875em"
+                fill="#777"
+                class="iw-chart-yAxis-tick-label"
+              >
+                ${formatNumber(t)}
+              </text>
+            </g>
+          `
+        },
+      )}
+    </g>
+  `
+}