@inglorious/charts 1.0.1

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

@@ -0,0 +1,107 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render } from "@inglorious/web/test"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { renderYAxis } from "./y-axis.js"
+
+describe("renderYAxis", () => {
+  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 = {
+      yScale: vi.fn((y) => 370 - (y / 200) * 350),
+      width: 800,
+      height: 400,
+      padding: { top: 20, right: 50, bottom: 30, left: 50 },
+    }
+
+    props.yScale.domain = vi.fn(() => [0, 200])
+    props.yScale.range = vi.fn(() => [370, 20])
+    props.yScale.ticks = vi.fn(() => [0, 50, 100, 150, 200])
+
+    api = {
+      notify: vi.fn(),
+    }
+  })
+
+  describe("basic rendering", () => {
+    it("should render Y axis with line and ticks", () => {
+      const result = renderYAxis(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-yAxis-tick")
+      expect(ticks.length).toBeGreaterThan(0)
+    })
+
+    it("should format integer ticks without decimals", () => {
+      const result = renderYAxis(entity, props, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const labels = container.querySelectorAll(".iw-chart-yAxis-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 custom ticks", () => {
+    it("should use customTicks when provided", () => {
+      props.customTicks = [0, 100, 200]
+
+      const result = renderYAxis(entity, props, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const ticks = container.querySelectorAll("g.iw-chart-yAxis-tick")
+      expect(ticks.length).toBe(3)
+    })
+  })
+
+  describe("with negative values", () => {
+    it("should render axis at zero line when domain includes negatives", () => {
+      props.yScale.domain = vi.fn(() => [-50, 200])
+      props.yScale.range = vi.fn(() => [370, 20])
+      props.yScale.ticks = vi.fn(() => [-50, 0, 50, 100, 150, 200])
+      props.yScale = vi.fn((y) => {
+        if (y === 0) return 296 // Zero line position
+        return 370 - ((y + 50) / 250) * 350
+      })
+      props.yScale.domain = vi.fn(() => [-50, 200])
+      props.yScale.range = vi.fn(() => [370, 20])
+      props.yScale.ticks = vi.fn(() => [-50, 0, 50, 100, 150, 200])
+
+      const result = renderYAxis(entity, props, api)
+      const container = document.createElement("div")
+      render(result, container)
+
+      const axisLine = container.querySelector("line")
+      expect(axisLine).toBeTruthy()
+    })
+  })
+})

package/src/handlers.js

@@ -0,0 +1,150 @@
+/* eslint-disable no-magic-numbers */
+
+import { generateColors, getDefaultColors } from "./utils/colors.js"
+import { calculatePadding } from "./utils/padding.js"
+
+/**
+ * @typedef {import('../types/charts').ChartEntity} ChartEntity
+ * @typedef {import('../types/charts').ChartDataPoint} ChartDataPoint
+ * @typedef {import('../types/charts').PieDataPoint} PieDataPoint
+ * @typedef {import('../types/charts').ChartTooltip} ChartTooltip
+ * @typedef {import('../types/charts').TooltipPosition} TooltipPosition
+ */
+
+/**
+ * Initializes the chart entity with default state.
+ * @param {ChartEntity} entity
+ */
+export function create(entity) {
+  entity.width ??= 800
+  entity.height ??= 400
+  entity.padding ??= calculatePadding(entity.width, entity.height)
+  entity.data ??= []
+
+  if (!entity.colors) {
+    const dataCount = entity.data?.length || 0
+    entity.colors =
+      dataCount > 5 ? generateColors(dataCount) : getDefaultColors()
+  }
+
+  entity.showLegend ??= true
+  entity.showGrid ??= true
+  entity.showTooltip ??= true
+  entity.tooltip ??= null
+  entity.tooltipX ??= 0
+  entity.tooltipY ??= 0
+  // labelPosition: "inside" | "outside" | "tooltip" | "auto"
+  entity.labelPosition ??= "outside"
+  entity.showLabel ??= true
+  entity.outerPadding ??= undefined
+  entity.outerRadius ??= undefined
+  entity.innerRadius ??= undefined
+  entity.offsetRadius ??= 20
+  entity.minLabelPercentage ??= 2
+  entity.labelOverflowMargin ??= 20
+  entity.cx ??= undefined
+  entity.cy ??= undefined
+  entity.startAngle ??= undefined
+  entity.endAngle ??= undefined
+  entity.paddingAngle ??= undefined
+  entity.minAngle ??= undefined
+  entity.cornerRadius ??= undefined
+  entity.dataKey ??= undefined
+  entity.nameKey ??= undefined
+
+  if (!entity.xAxisType && entity.data?.length > 0) {
+    const hasDates = entity.data.some(
+      (d) => d.date || (d.values && d.values.some((v) => v.date)),
+    )
+    entity.xAxisType = hasDates ? "time" : "linear"
+  }
+}
+
+/**
+ * Updates the chart data.
+ * @param {ChartEntity} entity
+ * @param {ChartDataPoint[] | PieDataPoint[]} data
+ */
+export function dataUpdate(entity, data) {
+  entity.data = data
+
+  if (entity.brush?.enabled) {
+    const maxIndex = Math.max(0, (data?.length || 0) - 1)
+    entity.brush.startIndex = Math.min(entity.brush.startIndex || 0, maxIndex)
+    entity.brush.endIndex = Math.min(
+      entity.brush.endIndex || maxIndex,
+      maxIndex,
+    )
+  }
+}
+
+/**
+ * Resizes the chart.
+ * @param {ChartEntity} entity
+ * @param {number} width
+ * @param {number} height
+ */
+export function sizeUpdate(entity, width, height) {
+  entity.width = width
+  entity.height = height
+  entity.padding = calculatePadding(width, height)
+}
+
+/**
+ * Shows a tooltip at the specified position.
+ * @param {ChartEntity} entity
+ * @param {{ label: string; percentage?: number; value: number; color: string; x: number; y: number }} tooltipData
+ */
+export function tooltipShow(entity, tooltipData) {
+  entity.tooltip = {
+    label: tooltipData.label,
+    percentage: tooltipData.percentage,
+    value: tooltipData.value,
+    color: tooltipData.color,
+  }
+  entity.tooltipX = tooltipData.x
+  entity.tooltipY = tooltipData.y
+}
+
+/**
+ * Hides the tooltip.
+ * @param {ChartEntity} entity
+ */
+export function tooltipHide(entity) {
+  entity.tooltip = null
+}
+
+/**
+ * Moves the tooltip to a new position.
+ * @param {ChartEntity} entity
+ * @param {TooltipPosition} position
+ */
+export function tooltipMove(entity, position) {
+  if (!entity.tooltip) return
+  entity.tooltipX = position.x
+  entity.tooltipY = position.y
+}
+
+/**
+ * Handles brush change event (zoom/pan).
+ * This is called automatically when brush selection changes.
+ * @param {ChartEntity} entity
+ * @param {{ startIndex: number; endIndex: number }} payload
+ */
+export function brushChange(entity, payload) {
+  if (!entity.brush) entity.brush = { enabled: true }
+
+  const { startIndex, endIndex } = payload
+  const dataLength = entity.data?.length || 0
+
+  entity.brush.startIndex = Math.max(0, Math.min(startIndex, dataLength - 1))
+  entity.brush.endIndex = Math.max(
+    entity.brush.startIndex,
+    Math.min(endIndex, dataLength - 1),
+  )
+
+  if (entity.brush.startIndex === entity.brush.endIndex && dataLength > 1) {
+    if (entity.brush.endIndex < dataLength - 1) entity.brush.endIndex++
+    else if (entity.brush.startIndex > 0) entity.brush.startIndex--
+  }
+}

package/src/index.js

@@ -0,0 +1,264 @@
+import { svg } from "@inglorious/web"
+
+import * as handlers from "./handlers.js"
+import { render } from "./template.js"
+import { extractDataKeysFromChildren } from "./utils/extract-data-keys.js"
+
+// Export chart types for config style
+export {
+  areaChart,
+  barChart,
+  donutChart,
+  lineChart,
+  pieChart,
+} from "./utils/chart-utils.js"
+
+export const chart = {
+  ...handlers,
+  render,
+
+  // Chart Delegators
+  renderLineChart: createDelegator("line"),
+  renderAreaChart: createDelegator("area"),
+  renderBarChart: createDelegator("bar"),
+  renderPieChart: createDelegator("pie"),
+
+  // Component Renderers (Abstracted)
+  renderLine: createComponentRenderer("renderLine", "line"),
+  renderArea: createComponentRenderer("renderArea", "area"),
+  renderBar: createComponentRenderer("renderBar", "bar"),
+  renderPie: createComponentRenderer("renderPie", "pie"),
+  renderYAxis: createComponentRenderer("renderYAxis"),
+  renderTooltip: createComponentRenderer("renderTooltip"),
+
+  // Lazy Renderers
+  renderCartesianGrid: (entity, props, api) =>
+    createLazyRenderer(entity, api, "renderCartesianGrid"),
+  renderXAxis: (entity, props, api) =>
+    createLazyRenderer(entity, api, "renderXAxis"),
+  renderBrush: (entity, props, api) =>
+    createLazyRenderer(entity, api, "renderBrush"),
+
+  // Declarative Helpers for Composition Style (return intention objects)
+  // The parent (renderLineChart, etc) processes these objects and "stamps" them with entity and api
+  XAxis: (config = {}) => ({ type: "XAxis", config }),
+  YAxis: (config = {}) => ({ type: "YAxis", config }),
+  Line: (config = {}) => ({ type: "Line", config }),
+  Area: (config = {}) => ({ type: "Area", config }),
+  Bar: (config = {}) => ({ type: "Bar", config }),
+  Pie: (config = {}) => ({ type: "Pie", config }),
+  CartesianGrid: (config = {}) => ({ type: "CartesianGrid", config }),
+  Tooltip: (config = {}) => ({ type: "Tooltip", config }),
+  Brush: (config = {}) => ({ type: "Brush", config }),
+  Dots: (config = {}) => ({ type: "Dots", config }),
+  Legend: (config = {}) => ({ type: "Legend", config }),
+
+  // Helper to create bound methods (reduces repetition)
+  forEntity(entityId, api) {
+    const entity = api.getEntity(entityId)
+    return entity ? createInstance(entity, api) : getEmptyInstance()
+  },
+
+  // Create instance for inline charts (no entityId needed)
+  forEntityInline(api, tempEntity = null) {
+    const entity = tempEntity || {
+      id: `__temp_${Date.now()}`,
+      type: "line", // Default, can be overridden by config
+      data: [],
+    }
+    // Preserve showTooltip if explicitly set in tempEntity
+    const preserveShowTooltip =
+      tempEntity?.showTooltip !== undefined ? tempEntity.showTooltip : undefined
+    // Initialize entity manually since it doesn't go through the store's create handler
+    handlers.create(entity)
+    // Restore showTooltip if it was explicitly set
+    if (preserveShowTooltip !== undefined) {
+      entity.showTooltip = preserveShowTooltip
+    }
+    return createInstance(entity, api, true) // true = inline mode
+  },
+
+  createInstance,
+}
+
+function createInstance(entity, api, isInline = false) {
+  let currentEntity = entity
+
+  const createChartFactory =
+    (chartType, renderMethod, forceStandard = false) =>
+    (arg1 = {}, arg2 = []) => {
+      const isLegacy = !forceStandard && Array.isArray(arg1)
+      const config = isLegacy ? arg2 || {} : arg1
+      const children = isLegacy ? arg1 : arg2
+
+      if (isInline) {
+        const resolvedData = config.data ?? currentEntity.data
+        currentEntity = {
+          ...currentEntity,
+          type: config.type || chartType,
+          ...(resolvedData ? { data: resolvedData } : null),
+          width: config.width || currentEntity.width,
+          height: config.height || currentEntity.height,
+        }
+      }
+
+      const finalConfig = {
+        ...config,
+        data:
+          config.data ||
+          (!isInline && currentEntity.data ? currentEntity.data : undefined),
+        // PieChart usually doesn't need dataKeys, but the extractor handles it
+        dataKeys:
+          chartType !== "pie"
+            ? config.dataKeys || extractDataKeysFromChildren(children)
+            : undefined,
+      }
+
+      return renderMethodOnType(
+        currentEntity,
+        renderMethod,
+        {
+          children: Array.isArray(children) ? children : [children],
+          config: finalConfig,
+        },
+        api,
+      )
+    }
+
+  // baseMethods return intention objects (don't render directly)
+  // Processing happens in renderXxxChart which receives the children
+  const baseMethods = {
+    CartesianGrid: (cfg = {}) => ({ type: "CartesianGrid", config: cfg }),
+    XAxis: (cfg = {}) => ({ type: "XAxis", config: cfg }),
+    YAxis: (cfg = {}) => ({ type: "YAxis", config: cfg }),
+    Tooltip: (cfg = {}) => ({ type: "Tooltip", config: cfg }),
+    Brush: (cfg = {}) => ({ type: "Brush", config: cfg }),
+    Line: (cfg = {}) => ({ type: "Line", config: cfg }),
+    Area: (cfg = {}) => ({ type: "Area", config: cfg }),
+    Bar: (cfg = {}) => ({ type: "Bar", config: cfg }),
+    Pie: (cfg = {}) => ({ type: "Pie", config: cfg }),
+  }
+
+  const instance = {
+    LineChart: createChartFactory("line", "renderLineChart", true),
+    AreaChart: createChartFactory("area", "renderAreaChart", true),
+    BarChart: createChartFactory("bar", "renderBarChart", true),
+    PieChart: createChartFactory("pie", "renderPieChart", true),
+
+    ...baseMethods,
+
+    // Aliases for compatibility (renderX)
+    renderLineChart: createChartFactory("line", "renderLineChart", false),
+    renderAreaChart: createChartFactory("area", "renderAreaChart", false),
+    renderBarChart: createChartFactory("bar", "renderBarChart", false),
+    renderPieChart: createChartFactory("pie", "renderPieChart", false),
+    renderCartesianGrid: baseMethods.CartesianGrid,
+    renderXAxis: baseMethods.XAxis,
+    renderYAxis: baseMethods.YAxis,
+    renderLine: baseMethods.Line,
+    renderArea: baseMethods.Area,
+    renderBar: baseMethods.Bar,
+    renderPie: baseMethods.Pie,
+    renderTooltip: baseMethods.Tooltip,
+    renderBrush: baseMethods.Brush,
+
+    // Dots and Legend also return intention objects
+    // Processing happens in renderXxxChart which receives the children
+    renderDots: (config = {}) => ({ type: "Dots", config }),
+    renderLegend: (config = {}) => ({ type: "Legend", config }),
+  }
+
+  // Synchronize PascalCase names with camelCase aliases
+  instance.Dots = instance.renderDots
+  instance.Legend = instance.renderLegend
+
+  return instance
+}
+
+function createDelegator(typeKey) {
+  const firstCharIndex = 0
+  const restStartIndex = 1
+  const firstChar = typeKey.charAt(firstCharIndex)
+  const rest = typeKey.slice(restStartIndex)
+  const methodName = `render${firstChar.toUpperCase() + rest}Chart`
+
+  return function delegateToChartType(entity, params, api) {
+    if (!entity) return renderEmptyTemplate()
+    const chartType = api.getType(typeKey)
+    return chartType?.[methodName]
+      ? chartType[methodName](entity, params, api)
+      : renderEmptyTemplate()
+  }
+}
+
+function createLazyRenderer(entity, api, methodName) {
+  return function renderLazy(ctx) {
+    if (!entity) return renderEmptyTemplate()
+    const chartTypeName = ctx?.chartType || entity.type
+    const chartType = api.getType(chartTypeName)
+    return chartType?.[methodName]
+      ? chartType[methodName](entity, { config: ctx?.config || {} }, api)
+      : renderEmptyTemplate()
+  }
+}
+
+function createComponentRenderer(methodName, typeOverride = null) {
+  return function renderComponent(entity, { config = {} }, api) {
+    if (!entity) return renderEmptyTemplate()
+    const type = api.getType(typeOverride || entity.type)
+    return type?.[methodName]
+      ? type[methodName](entity, { config }, api)
+      : renderEmptyTemplate()
+  }
+}
+
+function renderMethodOnType(entity, methodName, params, api) {
+  const type = api.getType(entity.type)
+  return type?.[methodName]
+    ? type[methodName](entity, params, api)
+    : renderEmptyTemplate()
+}
+
+function renderEmptyTemplate() {
+  return svg``
+}
+
+function renderEmptyLazyTemplate() {
+  return renderEmptyTemplate
+}
+
+function getEmptyInstance() {
+  return {
+    renderLineChart: renderEmptyTemplate,
+    renderAreaChart: renderEmptyTemplate,
+    renderBarChart: renderEmptyTemplate,
+    renderPieChart: renderEmptyTemplate,
+    renderCartesianGrid: renderEmptyLazyTemplate,
+    renderXAxis: renderEmptyLazyTemplate,
+    renderYAxis: renderEmptyTemplate,
+    renderLegend: renderEmptyLazyTemplate,
+    renderLine: renderEmptyTemplate,
+    renderArea: renderEmptyTemplate,
+    renderBar: renderEmptyTemplate,
+    renderPie: renderEmptyTemplate,
+    renderDots: renderEmptyLazyTemplate,
+    renderTooltip: renderEmptyTemplate,
+    renderBrush: renderEmptyLazyTemplate,
+    // Composition Style
+    LineChart: renderEmptyTemplate,
+    AreaChart: renderEmptyTemplate,
+    BarChart: renderEmptyTemplate,
+    PieChart: renderEmptyTemplate,
+    CartesianGrid: renderEmptyLazyTemplate,
+    XAxis: renderEmptyLazyTemplate,
+    YAxis: renderEmptyTemplate,
+    Line: renderEmptyTemplate,
+    Area: renderEmptyTemplate,
+    Bar: renderEmptyTemplate,
+    Pie: renderEmptyTemplate,
+    Dots: renderEmptyLazyTemplate,
+    Tooltip: renderEmptyTemplate,
+    Brush: renderEmptyLazyTemplate,
+    Legend: renderEmptyLazyTemplate,
+  }
+}

package/src/polar/donut.js

@@ -0,0 +1,181 @@
+/* eslint-disable no-magic-numbers */
+
+import { html, svg } from "@inglorious/web"
+
+import { createTooltipComponent, renderTooltip } from "../component/tooltip.js"
+import { formatNumber } from "../utils/data-utils.js"
+import { calculatePieData } from "../utils/paths.js"
+import { renderPieSectors } from "./pie.js"
+
+export const donut = {
+  /**
+   * Top-level rendering entry point for donut charts.
+   * @param {import('../types/charts').ChartEntity} entity
+   * @param {import('@inglorious/web').Api} api
+   * @returns {import('lit-html').TemplateResult}
+   */
+  render(entity, api) {
+    if (!entity.data || entity.data.length === 0) {
+      return svg`<svg>...</svg>`
+    }
+
+    // dataKey and nameKey: like Recharts (flexible data access)
+    const dataKey = entity.dataKey ?? ((d) => d.value)
+    const nameKey = entity.nameKey ?? ((d) => d.label || d.name || "")
+
+    // startAngle, endAngle, paddingAngle, minAngle: like Recharts
+    const startAngle = entity.startAngle ?? 0
+    const endAngle = entity.endAngle ?? 360
+    const paddingAngle = entity.paddingAngle ?? 0
+    const minAngle = entity.minAngle ?? 0
+
+    const pieData = calculatePieData(
+      entity.data,
+      dataKey,
+      startAngle,
+      endAngle,
+      paddingAngle,
+      minAngle,
+    )
+
+    const labelPosition = entity.labelPosition ?? "tooltip" // Default to tooltip for donut
+
+    const outerPadding =
+      entity.outerPadding ??
+      (labelPosition === "tooltip" ? 50 : labelPosition === "inside" ? 20 : 60)
+
+    // outerRadius: like Recharts (default calculated from dimensions)
+    const outerRadius =
+      entity.outerRadius ??
+      Math.min(entity.width, entity.height) / 2 - outerPadding
+
+    // innerRadius: for donut, use innerRadiusRatio if provided, otherwise default to 0.6
+    const innerRadius =
+      entity.innerRadius ?? outerRadius * (entity.innerRadiusRatio ?? 0.6)
+
+    const offsetRadius = entity.offsetRadius ?? 20
+
+    // cx and cy: like Recharts (custom center position)
+    const centerX = entity.cx
+      ? typeof entity.cx === "string"
+        ? (parseFloat(entity.cx) / 100) * entity.width
+        : entity.cx
+      : entity.width / 2
+
+    const centerY = entity.cy
+      ? typeof entity.cy === "string"
+        ? (parseFloat(entity.cy) / 100) * entity.height
+        : entity.cy
+      : entity.height / 2
+
+    // cornerRadius: like Recharts (rounded edges)
+    const cornerRadius = entity.cornerRadius ?? 0
+
+    const slices = renderPieSectors({
+      pieData,
+      outerRadius,
+      innerRadius,
+      centerX,
+      centerY,
+      colors: entity.colors,
+      labelPosition,
+      showLabel: entity.showLabel ?? true,
+      offsetRadius,
+      minLabelPercentage: entity.minLabelPercentage,
+      labelOverflowMargin: entity.labelOverflowMargin,
+      cornerRadius,
+      nameKey,
+      width: entity.width,
+      height: entity.height,
+      labelPositions: null,
+      onSliceEnter: (slice, index, event) => {
+        if (!entity.showTooltip) return
+
+        const path = event.target
+        const svgEl = path.closest("svg")
+        const rect = svgEl.getBoundingClientRect()
+        const angle = (slice.startAngle + slice.endAngle) / 2
+        const angleOffset = angle - Math.PI / 2
+        const labelRadius = outerRadius * 1.1
+        const x = centerX + Math.cos(angleOffset) * labelRadius
+        const y = centerY + Math.sin(angleOffset) * labelRadius
+        // Use absolute value to handle both clockwise and counter-clockwise slices
+        const percentage =
+          (Math.abs(slice.endAngle - slice.startAngle) / (2 * Math.PI)) * 100
+
+        // Use nameKey to get label
+        const label = nameKey(slice.data)
+
+        api.notify(`#${entity.id}:tooltipShow`, {
+          label,
+          percentage,
+          value: slice.value,
+          color:
+            slice.data.color || entity.colors[index % entity.colors.length],
+          x: rect.left + x,
+          y: rect.top + y,
+        })
+      },
+      onSliceLeave: () => {
+        api.notify(`#${entity.id}:tooltipHide`)
+      },
+    })
+
+    // Center text for donut (optional feature)
+    // Wrapped in <g> for better organization and potential future composition
+    const centerText = entity.centerText
+      ? svg`
+          <g class="iw-chart-center-text">
+            <text
+              x=${centerX}
+              y=${centerY - 5}
+              text-anchor="middle"
+              font-size="1.125em"
+              font-weight="bold"
+              fill="#333"
+            >
+              ${entity.centerText}
+            </text>
+            <text
+              x=${centerX}
+              y=${centerY + 15}
+              text-anchor="middle"
+              font-size="0.75em"
+              fill="#777"
+            >
+              ${formatNumber(pieData.reduce((sum, d) => sum + d.value, 0))}
+            </text>
+          </g>
+        `
+      : ""
+
+    return html`
+      <div class="iw-chart">
+        <svg
+          width=${entity.width}
+          height=${entity.height}
+          viewBox="0 0 ${entity.width} ${entity.height}"
+          class="iw-chart-svg"
+          @mousemove=${(e) => {
+            if (!entity.tooltip) return
+            const rect = e.currentTarget.getBoundingClientRect()
+            api.notify(`#${entity.id}:tooltipMove`, {
+              x: e.clientX - rect.left + 15,
+              y: e.clientY - rect.top - 15,
+            })
+          }}
+        >
+          ${slices} ${centerText}
+        </svg>
+
+        ${renderTooltip(entity, {}, api)}
+      </div>
+    `
+  },
+
+  /**
+   * Composition sub-render for tooltip overlay.
+   * @type {(entity: import('../types/charts').ChartEntity, params: { config?: Record<string, any> }, api: import('@inglorious/web').Api) => (ctx: Record<string, any>) => import('lit-html').TemplateResult}
+   */
+  renderTooltip: createTooltipComponent(),
+}