@inglorious/charts 1.0.1

package/src/polar/pie.test.js

@@ -0,0 +1,268 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render } from "@inglorious/web/test"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { pie } from "./pie.js"
+
+describe("pie", () => {
+  let entity
+  let api
+
+  beforeEach(() => {
+    entity = {
+      id: "test-pie",
+      type: "pie",
+      data: [
+        { name: "Category A", value: 20 },
+        { name: "Category B", value: 35 },
+        { name: "Category C", value: 15 },
+        { name: "Category D", value: 10 },
+      ],
+      width: 500,
+      height: 400,
+      colors: ["#3b82f6", "#ef4444", "#10b981", "#f59e0b"],
+      showTooltip: true,
+    }
+
+    api = {
+      getEntity: vi.fn((id) => (id === "test-pie" ? entity : null)),
+      notify: vi.fn(),
+      getType: vi.fn().mockReturnValue({
+        renderTooltip: () => "",
+      }),
+    }
+  })
+
+  describe("render()", () => {
+    it("should render pie chart with data", () => {
+      const result = pie.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 = pie.render(entity, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      expect(result).toBeDefined()
+    })
+  })
+
+  describe("renderPieChart()", () => {
+    it("should render pie chart with children", () => {
+      const children = [
+        pie.renderPie(
+          entity,
+          {
+            config: { dataKey: "value", nameKey: "name" },
+          },
+          api,
+        ),
+      ]
+
+      const result = pie.renderPieChart(
+        entity,
+        { children, config: { width: 500, height: 400 } },
+        api,
+      )
+      const container = document.createElement("div")
+      render(result, container)
+
+      const svg = container.querySelector("svg")
+      expect(svg).toBeTruthy()
+      expect(svg.getAttribute("width")).toBe("500")
+      expect(svg.getAttribute("height")).toBe("400")
+    })
+
+    it("should return error message if entity is missing", () => {
+      const result = pie.renderPieChart(null, { children: [] }, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      expect(container.textContent).toContain("Entity not found")
+    })
+
+    it("should use custom cx and cy when provided", () => {
+      const children = [
+        pie.renderPie(
+          entity,
+          {
+            config: { dataKey: "value", nameKey: "name" },
+          },
+          api,
+        ),
+      ]
+
+      const result = pie.renderPieChart(
+        entity,
+        {
+          children,
+          config: { width: 500, height: 400, cx: "35%", cy: "35%" },
+        },
+        api,
+      )
+      const container = document.createElement("div")
+      render(result, container)
+
+      const svg = container.querySelector("svg")
+      expect(svg).toBeTruthy()
+    })
+  })
+
+  describe("renderPie()", () => {
+    it("should return a function marked as isPie", () => {
+      const result = pie.renderPie(
+        entity,
+        {
+          config: { dataKey: "value", nameKey: "name" },
+        },
+        api,
+      )
+
+      expect(typeof result).toBe("function")
+      expect(result.isPie).toBe(true)
+    })
+
+    it("should render pie sectors when called with context", () => {
+      const pieFn = pie.renderPie(
+        entity,
+        {
+          config: { dataKey: "value", nameKey: "name" },
+        },
+        api,
+      )
+
+      const context = {
+        entity,
+        width: 500,
+        height: 400,
+        cx: 250,
+        cy: 200,
+        api,
+        colors: entity.colors,
+      }
+
+      const result = pieFn(context)
+      const container = document.createElement("div")
+      render(result, container)
+
+      // Should render paths for pie sectors
+      const paths = container.querySelectorAll("path")
+      expect(paths.length).toBeGreaterThan(0)
+    })
+
+    it("should support innerRadius for donut charts", () => {
+      const pieFn = pie.renderPie(
+        entity,
+        {
+          config: {
+            dataKey: "value",
+            nameKey: "name",
+            innerRadius: 50,
+          },
+        },
+        api,
+      )
+
+      expect(typeof pieFn).toBe("function")
+      expect(pieFn.isPie).toBe(true)
+    })
+
+    it("should support custom outerRadius", () => {
+      const pieFn = pie.renderPie(
+        entity,
+        {
+          config: {
+            dataKey: "value",
+            nameKey: "name",
+            outerRadius: 150,
+          },
+        },
+        api,
+      )
+
+      expect(typeof pieFn).toBe("function")
+      expect(pieFn.isPie).toBe(true)
+    })
+
+    it("should support paddingAngle", () => {
+      const pieFn = pie.renderPie(
+        entity,
+        {
+          config: {
+            dataKey: "value",
+            nameKey: "name",
+            paddingAngle: 5,
+          },
+        },
+        api,
+      )
+
+      expect(typeof pieFn).toBe("function")
+      expect(pieFn.isPie).toBe(true)
+    })
+
+    it("should support minAngle", () => {
+      const pieFn = pie.renderPie(
+        entity,
+        {
+          config: {
+            dataKey: "value",
+            nameKey: "name",
+            minAngle: 10,
+          },
+        },
+        api,
+      )
+
+      expect(typeof pieFn).toBe("function")
+      expect(pieFn.isPie).toBe(true)
+    })
+
+    it("should support cornerRadius", () => {
+      const pieFn = pie.renderPie(
+        entity,
+        {
+          config: {
+            dataKey: "value",
+            nameKey: "name",
+            cornerRadius: 10,
+          },
+        },
+        api,
+      )
+
+      expect(typeof pieFn).toBe("function")
+      expect(pieFn.isPie).toBe(true)
+    })
+
+    it("should support custom dataKey and nameKey", () => {
+      entity.data = [
+        { product: "Laptop", sales: 150 },
+        { product: "Phone", sales: 200 },
+      ]
+
+      const pieFn = pie.renderPie(
+        entity,
+        {
+          config: {
+            dataKey: "sales",
+            nameKey: "product",
+          },
+        },
+        api,
+      )
+
+      expect(typeof pieFn).toBe("function")
+      expect(pieFn.isPie).toBe(true)
+    })
+  })
+})

package/src/shape/curve.js

@@ -0,0 +1,55 @@
+import { svg } from "@inglorious/web"
+
+/**
+ * Renders a single curve/path (primitive shape)
+ * Similar to Recharts Curve component
+ *
+ * @param {Object} params
+ * @param {string} params.d - Path data (SVG path string)
+ * @param {string} [params.stroke] - Stroke color
+ * @param {string} [params.fill] - Fill color
+ * @param {string} [params.fillOpacity] - Fill opacity
+ * @param {string} [params.strokeWidth] - Stroke width
+ * @param {string} [params.className] - CSS class
+ * @param {Function} [params.onMouseEnter] - Mouse enter handler
+ * @param {Function} [params.onMouseLeave] - Mouse leave handler
+ * @returns {import('lit-html').TemplateResult}
+ */
+export function renderCurve({
+  d,
+  stroke,
+  fill = "none",
+  fillOpacity,
+  strokeWidth = "0.15625em",
+  className = "iw-chart-curve",
+  entityId,
+  onMouseEnter,
+  onMouseLeave,
+}) {
+  const wrappedOnMouseEnter = onMouseEnter
+    ? (e) => {
+        onMouseEnter(e)
+      }
+    : undefined
+
+  const wrappedOnMouseLeave = onMouseLeave
+    ? (e) => {
+        onMouseLeave(e)
+      }
+    : undefined
+
+  return svg`
+    <path
+      d=${d}
+      stroke=${stroke}
+      fill=${fill}
+      fill-opacity=${fillOpacity}
+      stroke-width=${strokeWidth}
+      class=${className}
+      data-entity-id=${entityId || undefined}
+      style=${stroke ? `stroke: ${stroke} !important;` : undefined}
+      @mouseenter=${wrappedOnMouseEnter}
+      @mouseleave=${wrappedOnMouseLeave}
+    />
+  `
+}

package/src/shape/dot.js

@@ -0,0 +1,104 @@
+/* eslint-disable no-magic-numbers */
+
+import { svg } from "@inglorious/web"
+
+import { isValidNumber } from "../utils/data-utils.js"
+
+/**
+ * Renders a single dot/circle (primitive shape)
+ * Similar to Recharts Dot component
+ *
+ * @param {Object} params
+ * @param {number} params.cx - Center X
+ * @param {number} params.cy - Center Y
+ * @param {number|string} [params.r] - Radius
+ * @param {string} [params.fill] - Fill color
+ * @param {string} [params.stroke] - Stroke color
+ * @param {string} [params.strokeWidth] - Stroke width
+ * @param {string} [params.className] - CSS class
+ * @param {Function} [params.onMouseEnter] - Mouse enter handler
+ * @param {Function} [params.onMouseLeave] - Mouse leave handler
+ * @returns {import('lit-html').TemplateResult}
+ */
+export function renderDot({
+  cx,
+  cy,
+  r = "0.25em",
+  fill,
+  stroke = "white",
+  strokeWidth = "0.125em",
+  className = "iw-chart-dot",
+  onMouseEnter,
+  onMouseLeave,
+}) {
+  if (cx == null || cy == null) {
+    return svg``
+  }
+
+  // Parse r to get numeric value and unit
+  let rValue = 0.25
+  let rUnit = ""
+
+  if (typeof r === "string") {
+    const match = r.match(/([\d.]+)([a-z%]*)/i)
+    if (match) {
+      rValue = parseFloat(match[1]) || 0.25
+      rUnit = match[2] || ""
+    } else {
+      rValue = parseFloat(r) || 0.25
+    }
+  } else if (typeof r === "number" && isValidNumber(r) && r > 0) {
+    rValue = r
+  }
+
+  // Ensure rValue is always valid
+  if (!isValidNumber(rValue) || rValue <= 0) {
+    rValue = 0.25
+  }
+
+  const rString = rValue.toString() + rUnit
+
+  // Handle mouse enter - increase radius
+  const handleMouseEnter = (e) => {
+    const circle = e.currentTarget
+    const currentR = circle.getAttribute("r")
+    const match = currentR.match(/([\d.]+)([a-z%]*)/i)
+    const currentRValue = match ? parseFloat(match[1]) : rValue
+    const currentRUnit = match ? match[2] : rUnit
+
+    // Store original if not already stored
+    if (!circle.getAttribute("data-original-r")) {
+      circle.setAttribute("data-original-r", currentR)
+    }
+
+    // Increase by 1.5x (0.25em -> 0.375em)
+    const newR = (currentRValue * 1.5).toString() + currentRUnit
+    circle.setAttribute("r", newR)
+
+    if (onMouseEnter) onMouseEnter(e)
+  }
+
+  // Handle mouse leave - restore original radius
+  const handleMouseLeave = (e) => {
+    const circle = e.currentTarget
+    const originalR = circle.getAttribute("data-original-r") || rString
+    circle.setAttribute("r", originalR)
+
+    if (onMouseLeave) onMouseLeave(e)
+  }
+
+  return svg`
+    <circle
+      cx=${cx}
+      cy=${cy}
+      r=${rString}
+      fill=${fill}
+      stroke=${stroke}
+      stroke-width=${strokeWidth}
+      class=${className}
+      data-original-r=${rString}
+      @mouseenter=${handleMouseEnter}
+      @mouseleave=${handleMouseLeave}
+    />
+  `
+}

package/src/shape/rectangle.js

@@ -0,0 +1,46 @@
+import { svg } from "@inglorious/web"
+
+/**
+ * Renders a single rectangle (primitive shape)
+ * Similar to Recharts Rectangle component
+ *
+ * @param {Object} params
+ * @param {number} params.x - X position
+ * @param {number} params.y - Y position
+ * @param {number} params.width - Width
+ * @param {number} params.height - Height
+ * @param {string} [params.fill] - Fill color
+ * @param {string} [params.className] - CSS class
+ * @param {number|string} [params.rx] - Border radius X
+ * @param {number|string} [params.ry] - Border radius Y
+ * @param {Function} [params.onMouseEnter] - Mouse enter handler
+ * @param {Function} [params.onMouseLeave] - Mouse leave handler
+ * @returns {import('lit-html').TemplateResult}
+ */
+export function renderRectangle({
+  x,
+  y,
+  width,
+  height,
+  fill,
+  className = "iw-chart-rectangle",
+  rx = "0.25em",
+  ry = "0.25em",
+  onMouseEnter,
+  onMouseLeave,
+}) {
+  return svg`
+    <rect
+      x=${x}
+      y=${y}
+      width=${width}
+      height=${height}
+      fill=${fill}
+      class=${className}
+      rx=${rx}
+      ry=${ry}
+      @mouseenter=${onMouseEnter}
+      @mouseleave=${onMouseLeave}
+    />
+  `
+}

package/src/shape/sector.js

@@ -0,0 +1,58 @@
+/* eslint-disable no-magic-numbers */
+
+import { svg } from "@inglorious/web"
+
+import { generateArcPath } from "../utils/paths.js"
+
+/**
+ * Renders a single sector (pie slice) - primitive shape
+ * Similar to Recharts Sector component
+ *
+ * @param {Object} params
+ * @param {number} params.innerRadius - Inner radius
+ * @param {number} params.outerRadius - Outer radius
+ * @param {number} params.startAngle - Start angle in radians
+ * @param {number} params.endAngle - End angle in radians
+ * @param {number} params.centerX - Center X
+ * @param {number} params.centerY - Center Y
+ * @param {string} [params.fill] - Fill color
+ * @param {string} [params.className] - CSS class
+ * @param {number} [params.cornerRadius] - Corner radius for rounded edges
+ * @param {Function} [params.onMouseEnter] - Mouse enter handler
+ * @param {Function} [params.onMouseLeave] - Mouse leave handler
+ * @param {number|string} [params.dataIndex] - Data index for tracking
+ * @returns {import('lit-html').TemplateResult}
+ */
+export function renderSector({
+  innerRadius,
+  outerRadius,
+  startAngle,
+  endAngle,
+  centerX,
+  centerY,
+  fill,
+  className = "iw-chart-sector",
+  cornerRadius = 0,
+  onMouseEnter,
+  onMouseLeave,
+  dataIndex,
+}) {
+  return svg`
+    <g transform="translate(${centerX}, ${centerY})">
+      <path
+        d=${generateArcPath(
+          innerRadius,
+          outerRadius,
+          startAngle,
+          endAngle,
+          cornerRadius,
+        )}
+        fill=${fill}
+        class=${className}
+        data-slice-index=${dataIndex}
+        @mouseenter=${onMouseEnter}
+        @mouseleave=${onMouseLeave}
+      />
+    </g>
+  `
+}

package/src/template.js

@@ -0,0 +1,25 @@
+import { svg } from "@inglorious/web"
+
+/**
+ * @typedef {import('../types/charts').ChartEntity} ChartEntity
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('lit-html').TemplateResult} TemplateResult
+ */
+
+/**
+ * Renders the chart component.
+ * @param {ChartEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const chart = api.getType(entity.type)
+  if (!chart) {
+    return svg`<text x="50%" y="50%" text-anchor="middle" fill="#999">Unknown chart type</text>`
+  }
+  const renderType = chart.render
+  if (!renderType) {
+    return svg`<text x="50%" y="50%" text-anchor="middle" fill="#999">Chart renderer not found</text>`
+  }
+  return renderType(entity, api)
+}

package/src/theme.css

@@ -0,0 +1,90 @@
+.iw-chart {
+  .iw-chart-svg {
+    background-color: white;
+    border-radius: 0.5em;
+  }
+
+  .iw-chart-svg {
+    isolation: isolate;
+  }
+
+  /* Generic hover styles for lines and curves */
+  .iw-chart-line:hover,
+  .iw-chart-curve:hover {
+    stroke-width: 0.21875em;
+  }
+
+  .iw-chart-point {
+    &:hover {
+      r: 0.375em;
+      filter: brightness(1.2);
+    }
+  }
+
+  .iw-chart-bar,
+  .iw-chart-bar-rectangle {
+    &:hover {
+      opacity: 0.9;
+      filter: brightness(1.1);
+    }
+  }
+
+  .iw-chart-area {
+    &:hover {
+      opacity: 0.9;
+      filter: brightness(1.1);
+    }
+  }
+
+  .iw-chart-pie-slice,
+  .iw-chart-donut-slice {
+    &:hover {
+      opacity: 0.9;
+      filter: brightness(1.15);
+    }
+  }
+
+  .iw-chart-modal {
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
+    padding: 0.75em;
+    box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
+    min-width: 8.75em;
+    font-size: 0.8125em;
+
+    .iw-chart-modal-header {
+      gap: 0.5em;
+      margin-bottom: 0.5em;
+      padding-bottom: 0.5em;
+      border-bottom: 1px solid #eee;
+    }
+
+    .iw-chart-modal-color {
+      width: 0.75em;
+      height: 0.75em;
+      border-radius: 0.125em;
+    }
+
+    .iw-chart-modal-label {
+      font-weight: 600;
+      color: #333;
+      font-size: 0.8125em;
+    }
+
+    .iw-chart-modal-body {
+      gap: 0.25em;
+    }
+
+    .iw-chart-modal-value {
+      font-size: 1em;
+      font-weight: 700;
+      color: #333;
+    }
+
+    .iw-chart-modal-percentage {
+      font-size: 0.75em;
+      color: #999;
+    }
+  }
+}