@zombie-mermaid/svg-renderer 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/svg-renderer",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "MIT",
   "description": "SVG rendering primitives and the ELK-backed layout engine behind zombie-mermaid's SVG output.",
   "repository": {
@@ -37,7 +37,7 @@
   "dependencies": {
     "elkjs": "^0.11.0",
     "entities": "^7.0.1",
-    "@zombie-mermaid/core": "4.1.0",
-    "@zombie-mermaid/mermaid-parser": "4.1.0"
+    "@zombie-mermaid/core": "4.2.0",
+    "@zombie-mermaid/mermaid-parser": "4.2.0"
   }
 }

package/src/__tests__/pie-layout.test.ts

@@ -0,0 +1,215 @@
+import { describe, it, expect } from 'vitest'
+import { parsePieChart } from '@zombie-mermaid/mermaid-parser'
+import type { PositionedPieChart } from '@zombie-mermaid/mermaid-parser'
+import { layoutPieChart, PIE } from '../pie/layout.ts'
+import { estimateTextWidth } from '../styles.ts'
+
+// Geometry follows Mermaid's pieRenderer.ts (default config): a 450px frame,
+// radius 185 at (225, 225), slices clockwise from 12 o'clock in source
+// order, labels at 0.75r, legend 216px right of the centre, rows 22px apart.
+
+const layout = (src: string): PositionedPieChart =>
+  layoutPieChart(parsePieChart(src))
+
+const TAU = Math.PI * 2
+const close = (a: number, b: number) => expect(a).toBeCloseTo(b, 6)
+
+describe('pie layout: Mermaid frame', () => {
+  it('uses a 450px-tall frame with radius 185 centred at (225, 225)', () => {
+    const p = layout('pie\n  "A" : 1\n  "B" : 1')
+    expect(p.height).toBe(450)
+    expect(p.radius).toBe(185)
+    expect(p.cx).toBe(225)
+    expect(p.cy).toBe(225)
+    // Outline circle: radius + half the 2px outer stroke.
+    expect(p.outerRadius).toBe(186)
+  })
+
+  it('places the title centred over the pie, baseline 25px from the top', () => {
+    const p = layout('pie title Pets\n  "A" : 1')
+    expect(p.title).toEqual({ text: 'Pets', x: 225, y: 25 })
+  })
+
+  it('omits the title when there is none', () => {
+    expect(layout('pie\n  "A" : 1').title).toBeUndefined()
+  })
+
+  it('sizes the width as pie + margin + swatch + gap + longest legend text', () => {
+    const p = layout('pie\n  "Short" : 1\n  "A much longer label" : 1')
+    const longest = estimateTextWidth('A much longer label', 17, 400)
+    expect(p.width).toBe(Math.ceil(450 + 40 + 18 + 4 + longest))
+  })
+
+  it('widens the viewBox for a title wider than the chart, keeping the pie centred under it', () => {
+    const title =
+      'An extremely long pie chart title that runs well past the legend'
+    const p = layout(`pie title ${title}\n  "A" : 1`)
+    const titleW = estimateTextWidth(title, 25, 400)
+    expect(titleW / 2).toBeGreaterThan(225)
+    // Content shifted right by the overhang on the left.
+    close(p.cx, titleW / 2)
+    close(p.title!.x, p.cx)
+    expect(p.width).toBeGreaterThanOrEqual(Math.floor(titleW))
+  })
+})
+
+describe('pie layout: slices', () => {
+  it("draws slices in source order, clockwise from 12 o'clock, unsorted", () => {
+    const p = layout('pie\n  "Small" : 10\n  "Big" : 70\n  "Mid" : 20')
+    expect(p.slices.map((s) => s.label)).toEqual(['Small', 'Big', 'Mid'])
+    close(p.slices[0]!.startAngle, 0)
+    close(p.slices[0]!.endAngle, 0.1 * TAU)
+    close(p.slices[1]!.startAngle, 0.1 * TAU)
+    close(p.slices[1]!.endAngle, 0.8 * TAU)
+    close(p.slices[2]!.endAngle, TAU)
+    // First slice starts at the top of the circle.
+    expect(p.slices[0]!.path.startsWith('M225,40A185,185,0,0,1,')).toBe(true)
+  })
+
+  it('angles always cover exactly the full circle', () => {
+    const p = layout('pie\n  "A" : 3.3\n  "B" : 7.1\n  "C" : 12.9\n  "D" : 0.9')
+    const sweep = p.slices.reduce((t, s) => t + (s.endAngle - s.startAngle), 0)
+    close(sweep, TAU)
+  })
+
+  it('labels each slice with toFixed(0) of its share, at 0.75 of the radius', () => {
+    const p = layout(
+      'pie\n  "Calcium" : 42.96\n  "Potassium" : 50.05\n  "Magnesium" : 10.01\n  "Iron" : 5',
+    )
+    // Mermaid's own docs example renders 40% / 46% / 9% / 5%.
+    expect(p.slices.map((s) => s.percentText)).toEqual([
+      '40%',
+      '46%',
+      '9%',
+      '5%',
+    ])
+    for (const s of p.slices) {
+      const mid = (s.startAngle + s.endAngle) / 2
+      close(s.labelX, 225 + 185 * 0.75 * Math.sin(mid))
+      close(s.labelY, 225 - 185 * 0.75 * Math.cos(mid))
+    }
+  })
+
+  it('uses whole-number percentages only, even for shares like 33.3%', () => {
+    const p = layout('pie\n  "A" : 1\n  "B" : 1\n  "C" : 1')
+    expect(p.slices.map((s) => s.percentText)).toEqual(['33%', '33%', '33%'])
+  })
+
+  it('draws a single slice as a full circle labelled 100%, label straight below the centre', () => {
+    const p = layout('pie\n  "Only" : 5')
+    expect(p.slices).toHaveLength(1)
+    const s = p.slices[0]!
+    expect(s.percentText).toBe('100%')
+    expect(s.path).toBe('M225,40A185,185,0,1,1,225,410A185,185,0,1,1,225,40Z')
+    close(s.labelX, 225)
+    close(s.labelY, 225 + 185 * 0.75)
+  })
+
+  it('leaves out slices under 1% but keeps them in the legend; the rest fill the circle', () => {
+    const p = layout('pie\n  "Big" : 995\n  "Tiny" : 5\n  "Other" : 100')
+    // Tiny = 5/1100 = 0.45%.
+    expect(p.slices.map((s) => s.label)).toEqual(['Big', 'Other'])
+    expect(p.legend.map((l) => l.text)).toEqual(['Big', 'Tiny', 'Other'])
+    // Drawn slices share the full circle between them...
+    close(p.slices[0]!.endAngle, (995 / 1095) * TAU)
+    close(p.slices[1]!.endAngle, TAU)
+    // ...but percentages are of the whole total, omitted slices included.
+    expect(p.slices.map((s) => s.percentText)).toEqual(['90%', '9%'])
+  })
+
+  it('keeps a slice of exactly 1%', () => {
+    const p = layout('pie\n  "A" : 99\n  "B" : 1')
+    expect(p.slices.map((s) => s.label)).toEqual(['A', 'B'])
+    expect(p.slices[1]!.percentText).toBe('1%')
+  })
+
+  it('does not draw zero-value slices', () => {
+    const p = layout('pie\n  "A" : 0\n  "B" : 4\n  "C" : 0')
+    expect(p.slices.map((s) => s.label)).toEqual(['B'])
+    expect(p.legend).toHaveLength(3)
+  })
+
+  it('draws no slices when every value is zero', () => {
+    const p = layout('pie\n  "A" : 0\n  "B" : 0')
+    expect(p.slices).toEqual([])
+    expect(p.legend).toHaveLength(2)
+  })
+
+  it('keeps palette slots tied to source position, so an omitted slice still uses one', () => {
+    const p = layout('pie\n  "A" : 500\n  "Tiny" : 1\n  "C" : 500')
+    expect(p.slices.map((s) => s.colorIndex)).toEqual([0, 2])
+    expect(p.legend.map((l) => l.colorIndex)).toEqual([0, 1, 2])
+  })
+
+  it('wraps colours after 12 slices', () => {
+    const lines = Array.from({ length: 14 }, (_, i) => `  "S${i}" : 10`)
+    const p = layout(`pie\n${lines.join('\n')}`)
+    expect(p.slices.map((s) => s.colorIndex)).toEqual([
+      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1,
+    ])
+  })
+})
+
+describe('pie layout: legend', () => {
+  it('lists every slice to the right of the pie, 22px apart, centred on it', () => {
+    const p = layout('pie\n  "A" : 1\n  "B" : 2\n  "C" : 3\n  "D" : 4')
+    expect(p.legend.map((l) => l.x)).toEqual([441, 441, 441, 441])
+    // translate(216, i * 22 - 22 * 4 / 2) from the centre.
+    expect(p.legend.map((l) => l.y)).toEqual([181, 203, 225, 247])
+    for (const l of p.legend) {
+      expect(l.size).toBe(18)
+      expect(l.textX).toBe(l.x + 22)
+      expect(l.textY).toBe(l.y + 14)
+    }
+  })
+
+  it('shows `label [value]` with showData, value printed as-is', () => {
+    const p = layout(
+      'pie showData\n  "A" : 1234567\n  "B" : 42.50\n  "C" : 0.125',
+    )
+    expect(p.legend.map((l) => l.text)).toEqual([
+      'A [1234567]',
+      'B [42.5]',
+      'C [0.125]',
+    ])
+  })
+
+  it('shows the bare label without showData', () => {
+    expect(layout('pie\n  "A" : 1').legend[0]!.text).toBe('A')
+  })
+
+  it('grows the viewBox for a legend taller than the frame instead of clipping it', () => {
+    const lines = Array.from({ length: 30 }, (_, i) => `  "S${i}" : 1`)
+    const p = layout(`pie\n${lines.join('\n')}`)
+    // Mermaid would start the legend at 225 - 330 = -105, above the frame.
+    const first = p.legend[0]!
+    const last = p.legend[p.legend.length - 1]!
+    expect(first.y).toBe(0)
+    expect(last.y + last.size).toBeLessThanOrEqual(p.height)
+    // The pie moved down by the same amount and keeps its frame.
+    expect(p.cy).toBe(225 + 105)
+    expect(p.height).toBe(30 * 22 - 4)
+  })
+})
+
+describe('pie layout: empty chart', () => {
+  it('draws only the circle and title for a bare `pie`', () => {
+    const p = layout('pie title Nothing yet')
+    expect(p.slices).toEqual([])
+    expect(p.legend).toEqual([])
+    expect(p.title?.text).toBe('Nothing yet')
+    expect(p.height).toBe(450)
+    // No legend: the pie and its right margin only, not a cropped half.
+    expect(p.width).toBe(PIE.height + PIE.margin)
+  })
+})
+
+describe('pie layout: accessibility fields', () => {
+  it('carries accTitle and accDescr through', () => {
+    const p = layout(
+      'pie\n  accTitle: Pets\n  accDescr: Dogs vs cats\n  "A" : 1',
+    )
+    expect(p.accTitle).toBe('Pets')
+    expect(p.accDescr).toBe('Dogs vs cats')
+  })
+})

package/src/__tests__/pie-svg.test.ts

@@ -0,0 +1,194 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { __resetSvgTitleIdCounterForTests, THEMES } from '@zombie-mermaid/core'
+import { getSeriesColor } from '@zombie-mermaid/mermaid-parser'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+
+beforeEach(() => {
+  __resetSvgTitleIdCounterForTests()
+})
+
+const BASIC = `pie title Pets adopted by volunteers
+  "Dogs" : 386
+  "Cats" : 85
+  "Rats" : 15`
+
+const count = (svg: string, re: RegExp) => (svg.match(re) ?? []).length
+
+describe('pie SVG: structure', () => {
+  const svg = renderMermaidSVG(BASIC)
+
+  it('draws the outline circle, one path per slice, a label each, the title and a legend row each', () => {
+    expect(count(svg, /class="pie-outer"/g)).toBe(1)
+    expect(count(svg, /<path [^>]*class="pie-slice /g)).toBe(3)
+    expect(count(svg, /class="pie-slice-label"/g)).toBe(3)
+    expect(count(svg, /class="pie-title"/g)).toBe(1)
+    expect(count(svg, /<g class="pie-legend">/g)).toBe(3)
+  })
+
+  it("paints in Mermaid's order: circle, slices, labels, title, legend", () => {
+    const order = [
+      'class="pie-outer"',
+      'class="pie-slice ',
+      'class="pie-slice-label"',
+      'class="pie-title"',
+      'class="pie-legend"',
+    ].map((m) => svg.indexOf(m))
+    expect(order).toEqual([...order].sort((a, b) => a - b))
+    expect(order.every((i) => i > 0)).toBe(true)
+  })
+
+  it('writes whole-number percentage labels', () => {
+    const labels = [...svg.matchAll(/class="pie-slice-label">([^<]*)</g)].map(
+      (m) => m[1],
+    )
+    // 386/486, 85/486, 15/486
+    expect(labels).toEqual(['79%', '17%', '3%'])
+  })
+
+  it('draws no callout lines', () => {
+    expect(svg).not.toMatch(/<polyline|<line /)
+  })
+
+  it('tags slices with their label and value', () => {
+    expect(svg).toContain('data-label="Dogs" data-value="386"')
+  })
+
+  it('sizes the root to the layout', () => {
+    expect(svg).toMatch(
+      /^<svg [^>]*viewBox="0 0 \d+ 450" width="\d+" height="450"/,
+    )
+  })
+
+  it('escapes labels and titles', () => {
+    const out = renderMermaidSVG('pie title A <b> & "c"\n  "x<y & \\"z\\"" : 1')
+    expect(out).toContain(
+      'class="pie-title">A &lt;b&gt; &amp; &quot;c&quot;</text>',
+    )
+    expect(out).toContain('data-label="x&lt;y &amp; &quot;z&quot;"')
+    expect(out).toContain(
+      'class="pie-legend-text">x&lt;y &amp; &quot;z&quot;</text>',
+    )
+  })
+
+  it('renders an empty chart as the outline circle and title only', () => {
+    const out = renderMermaidSVG('pie title Empty')
+    expect(count(out, /class="pie-outer"/g)).toBe(1)
+    expect(out).not.toContain('class="pie-slice')
+    expect(out).not.toContain('class="pie-legend"')
+    expect(out).toContain('class="pie-title">Empty</text>')
+  })
+
+  it('renders a bare `pie` with no title', () => {
+    const out = renderMermaidSVG('pie')
+    expect(out).toContain('class="pie-outer"')
+    expect(out).not.toContain('class="pie-title"')
+  })
+})
+
+describe('pie SVG: styling and theme', () => {
+  it("uses Mermaid's 0.7 slice opacity, 2px strokes and text sizes", () => {
+    const svg = renderMermaidSVG(BASIC)
+    expect(svg).toContain(
+      '.pie-slice { stroke: var(--fg); stroke-width: 2px; opacity: 0.7; }',
+    )
+    expect(svg).toContain(
+      '.pie-outer { fill: none; stroke: var(--fg); stroke-width: 2px; }',
+    )
+    expect(svg).toMatch(/\.pie-title \{[^}]*font-size: 25px/)
+    expect(svg).toMatch(/\.pie-slice-label \{[^}]*font-size: 17px/)
+    expect(svg).toMatch(/\.pie-legend-text \{[^}]*font-size: 17px/)
+  })
+
+  it('fills slot 0 with the live theme accent and later slots with series shades', () => {
+    const svg = renderMermaidSVG(BASIC, {
+      bg: '#ffffff',
+      fg: '#111111',
+      accent: '#e11d48',
+    })
+    expect(svg).toContain('--pie-color-0: var(--accent, #3b82f6);')
+    expect(svg).toContain(
+      `--pie-color-1: ${getSeriesColor(1, '#e11d48', '#ffffff')};`,
+    )
+    expect(svg).toContain(
+      `--pie-color-2: ${getSeriesColor(2, '#e11d48', '#ffffff')};`,
+    )
+    expect(svg).toContain('.pie-color-1 { fill: var(--pie-color-1); }')
+    expect(svg).toContain('rect.pie-color-1 { stroke: var(--pie-color-1); }')
+  })
+
+  it('adapts the series shades to a dark background', () => {
+    const dark = THEMES['tokyo-night']!
+    const svg = renderMermaidSVG(BASIC, dark)
+    expect(svg).toContain(
+      `--pie-color-1: ${getSeriesColor(1, dark.accent ?? '#3b82f6', dark.bg)};`,
+    )
+    expect(svg).toContain(`--bg:${dark.bg}`)
+    // Light vs dark backgrounds pick different shades for the same slot.
+    expect(getSeriesColor(1, '#3b82f6', '#ffffff')).not.toBe(
+      getSeriesColor(1, '#3b82f6', dark.bg),
+    )
+  })
+
+  it('defines colour variables only for palette slots in use, wrapping after 12', () => {
+    const lines = Array.from({ length: 14 }, (_, i) => `  "S${i}" : 10`)
+    const svg = renderMermaidSVG(`pie\n${lines.join('\n')}`)
+    expect(count(svg, /--pie-color-\d+:/g)).toBe(12)
+    expect(svg).not.toContain('--pie-color-12')
+    expect(count(svg, /class="pie-slice pie-color-0"/g)).toBe(2)
+  })
+
+  it('resolves to concrete colours with resolveColors', () => {
+    const svg = renderMermaidSVG(BASIC, { resolveColors: true })
+    expect(svg).not.toMatch(/var\(--pie-color/)
+  })
+
+  it('honours nonce and styleAttribute: false', () => {
+    const svg = renderMermaidSVG(BASIC, { nonce: 'abc', styleAttribute: false })
+    expect(count(svg, /<style nonce="abc">/g)).toBe(2)
+    expect(svg).not.toMatch(/<style>/)
+    expect(svg.slice(0, svg.indexOf('>'))).not.toContain('style=')
+  })
+})
+
+describe('pie SVG: accessibility', () => {
+  it('uses accTitle as the accessible name and accDescr as the description', () => {
+    const svg = renderMermaidSVG(
+      'pie\n  accTitle: Pet adoptions\n  accDescr: Dogs lead by far\n  "Dogs" : 3\n  "Cats" : 1',
+    )
+    expect(svg).toMatch(
+      /^<svg [^>]*role="img" aria-labelledby="zm-title-1" aria-describedby="zm-desc-1"/,
+    )
+    expect(svg).toContain('<title id="zm-title-1">Pet adoptions</title>')
+    expect(svg).toContain('<desc id="zm-desc-1">Dogs lead by far</desc>')
+  })
+
+  it('lets options.title override accTitle', () => {
+    const svg = renderMermaidSVG('pie\n  accTitle: From source\n  "A" : 1', {
+      title: 'From caller',
+    })
+    expect(svg).toContain('>From caller</title>')
+    expect(svg).not.toContain('From source')
+  })
+
+  it('does not use the visible title as the accessible name', () => {
+    const svg = renderMermaidSVG(BASIC)
+    expect(svg).toMatch(/^<svg [^>]*role="img"/)
+    expect(svg).not.toContain('<title')
+  })
+
+  it('drops the name and description for decorative output', () => {
+    const svg = renderMermaidSVG(
+      'pie\n  accTitle: T\n  accDescr: D\n  "A" : 1',
+      { decorative: true },
+    )
+    expect(svg).toMatch(/^<svg [^>]*aria-hidden="true"/)
+    expect(svg).not.toMatch(
+      /<title|<desc|aria-labelledby|aria-describedby|role=/,
+    )
+  })
+
+  it('embeds the source when asked', () => {
+    const svg = renderMermaidSVG(BASIC, { embedSource: true })
+    expect(svg).toMatch(/^<svg data-src="pie title Pets/)
+  })
+})

package/src/index.ts

@@ -62,6 +62,8 @@ export * from './sequence/layout.ts'
 export * from './sequence/renderer.ts'
 export * from './xychart/layout.ts'
 export * from './xychart/renderer.ts'
+export * from './pie/layout.ts'
+export * from './pie/renderer.ts'
 
 import { decodeXML } from 'entities'
 import type {

package/src/pie/layout.ts

@@ -0,0 +1,234 @@
+// ============================================================================
+// Pie chart layout
+//
+// Turns a parsed PieChart into absolute SVG geometry, following Mermaid's own
+// renderer (packages/mermaid/src/diagrams/pie/pieRenderer.ts, default config:
+// textPosition 0.75, no donut hole, legend on the right):
+//
+//   - a 450 x 450 frame with a 40px margin, so the pie radius is 185 and its
+//     centre sits at (225, 225); a 2px outline circle of radius 186 around it
+//   - slices in source order, clockwise from 12 o'clock (d3.pie with
+//     sort(null)); slices under 1% of the total are left out and the rest
+//     share the full circle between them
+//   - each drawn slice labelled with `toFixed(0)` of its share of the
+//     *whole* total (omitted slices included), at 0.75 of the radius
+//   - the title centred over the pie with its baseline 25px from the top
+//   - a legend row for every slice, omitted ones included: an 18px swatch
+//     and the label (or `label [value]` with showData), rows 22px apart,
+//     vertically centred on the pie, starting 216px right of its centre
+//   - width = pie + margin + swatch + gap + longest legend text, widened to
+//     fit a title wider than that
+//
+// Two places differ from Mermaid on purpose, both where Mermaid's output is
+// broken rather than a style choice:
+//   - A legend taller than the 450px frame (more than ~20 rows) grows the
+//     viewBox instead of being clipped at the top and bottom.
+//   - A chart with no slices keeps the pie's own width. Mermaid's width
+//     formula takes Math.max() of an empty list there (-Infinity), which
+//     leaves a viewBox that crops the circle in half.
+//
+// Lengths are kept from Mermaid as-is. Text widths come from this library's
+// own metrics for its own font, not Mermaid's "trebuchet ms".
+// ============================================================================
+
+import type {
+  PieChart,
+  PositionedPieChart,
+  PositionedPieLegendItem,
+  PositionedPieSlice,
+} from '@zombie-mermaid/mermaid-parser'
+import { estimateTextWidth } from '../styles.ts'
+
+/** Mermaid pieRenderer.ts constants (default config and default theme). */
+export const PIE = {
+  /** Frame height; the pie's own width equals it. */
+  height: 450,
+  margin: 40,
+  legendRectSize: 18,
+  legendSpacing: 4,
+  /** `pie.textPosition` default: label distance as a fraction of the radius. */
+  textPosition: 0.75,
+  /** `pieOuterStrokeWidth`; the outline circle sits half of it outside the pie. */
+  outerStrokeWidth: 2,
+  /** `pieTitleTextSize` */
+  titleFontSize: 25,
+  /** `pieSectionTextSize` */
+  sectionFontSize: 17,
+  /** `pieLegendTextSize` */
+  legendFontSize: 17,
+  fontWeight: 400,
+  /** Mermaid's `pie1`..`pie12` scale wraps after this many colours. */
+  paletteSize: 12,
+  /** Slices below this percentage of the total are not drawn. */
+  minPercent: 1,
+} as const
+
+const TAU = Math.PI * 2
+
+/** Round to two decimals for compact path data. */
+function r(n: number): string {
+  return String(Math.round(n * 100) / 100)
+}
+
+/** Point on a circle, angle in radians clockwise from 12 o'clock (d3's convention). */
+function polar(
+  cx: number,
+  cy: number,
+  radius: number,
+  angle: number,
+): { x: number; y: number } {
+  return { x: cx + radius * Math.sin(angle), y: cy - radius * Math.cos(angle) }
+}
+
+/** Wedge path, or a full circle when the slice covers the whole pie. */
+function slicePath(
+  cx: number,
+  cy: number,
+  radius: number,
+  start: number,
+  end: number,
+): string {
+  if (end - start >= TAU - 1e-9) {
+    return (
+      `M${r(cx)},${r(cy - radius)}` +
+      `A${r(radius)},${r(radius)},0,1,1,${r(cx)},${r(cy + radius)}` +
+      `A${r(radius)},${r(radius)},0,1,1,${r(cx)},${r(cy - radius)}Z`
+    )
+  }
+  const p0 = polar(cx, cy, radius, start)
+  const p1 = polar(cx, cy, radius, end)
+  const large = end - start > Math.PI ? 1 : 0
+  return (
+    `M${r(p0.x)},${r(p0.y)}` +
+    `A${r(radius)},${r(radius)},0,${large},1,${r(p1.x)},${r(p1.y)}` +
+    `L${r(cx)},${r(cy)}Z`
+  )
+}
+
+/** Legend row text, as Mermaid builds it: `String(value)`, no number formatting. */
+function legendText(label: string, value: number, showData: boolean): string {
+  return showData ? `${label} [${String(value)}]` : label
+}
+
+/** Lay out a parsed pie chart. Options are accepted for registry parity; none apply. */
+export function layoutPieChart(
+  chart: PieChart,
+  _options: unknown = {},
+): PositionedPieChart {
+  const height = PIE.height
+  const pieWidth = height
+  const radius = Math.min(pieWidth, height) / 2 - PIE.margin
+  // Everything below is first computed in Mermaid's frame (pie centre at
+  // (225, 225)), then shifted so the viewBox starts at (0, 0).
+  const cx0 = pieWidth / 2
+  const cy0 = height / 2
+
+  const total = chart.slices.reduce((sum, s) => sum + s.value, 0)
+
+  // createPieArcs(): keep slices at or above 1% of the total. A zero total
+  // gives NaN here, which drops every slice, as in Mermaid. (Mermaid filters
+  // a second time on `toFixed(0) !== '0'`, which nothing at or above 1% can
+  // fail, so that step is not repeated.)
+  const drawn = chart.slices
+    .map((slice, index) => ({ slice, colorIndex: index % PIE.paletteSize }))
+    .filter(({ slice }) => (slice.value / total) * 100 >= PIE.minPercent)
+  // d3.pie() spreads the full circle over the slices it is given.
+  const drawnTotal = drawn.reduce((sum, d) => sum + d.slice.value, 0)
+
+  // Legend geometry (Mermaid's 'right' position).
+  const rowHeight = PIE.legendRectSize + PIE.legendSpacing
+  const rowCount = chart.slices.length
+  const legendOffset = (rowHeight * rowCount) / 2
+  const legendX0 = cx0 + 12 * PIE.legendRectSize
+  const legendTexts = chart.slices.map((s) =>
+    legendText(s.label, s.value, chart.showData),
+  )
+  const longestText = Math.max(
+    0,
+    ...legendTexts.map((t) =>
+      estimateTextWidth(t, PIE.legendFontSize, PIE.fontWeight),
+    ),
+  )
+
+  const chartAndLegendWidth =
+    rowCount > 0
+      ? pieWidth +
+        PIE.margin +
+        PIE.legendRectSize +
+        PIE.legendSpacing +
+        longestText
+      : pieWidth + PIE.margin
+
+  const titleText = chart.title ?? ''
+  const titleWidth =
+    titleText.length > 0
+      ? estimateTextWidth(titleText, PIE.titleFontSize, PIE.fontWeight)
+      : 0
+  const titleLeft = cx0 - titleWidth / 2
+  const titleRight = cx0 + titleWidth / 2
+
+  const minX = Math.min(0, titleLeft)
+  const maxX = Math.max(chartAndLegendWidth, titleRight)
+  const legendTop = cy0 - legendOffset
+  const legendBottom =
+    cy0 + (rowCount - 1) * rowHeight - legendOffset + PIE.legendRectSize
+  const minY = rowCount > 0 ? Math.min(0, legendTop) : 0
+  const maxY = rowCount > 0 ? Math.max(height, legendBottom) : height
+
+  const dx = -minX
+  const dy = -minY
+  const cx = cx0 + dx
+  const cy = cy0 + dy
+
+  const slices: PositionedPieSlice[] = []
+  let angle = 0
+  const labelRadius = radius * PIE.textPosition
+  for (const { slice, colorIndex } of drawn) {
+    const start = angle
+    const end = angle + (slice.value / drawnTotal) * TAU
+    angle = end
+    const label = polar(cx, cy, labelRadius, (start + end) / 2)
+    slices.push({
+      label: slice.label,
+      value: slice.value,
+      colorIndex,
+      startAngle: start,
+      endAngle: end,
+      path: slicePath(cx, cy, radius, start, end),
+      percentText: `${((slice.value / total) * 100).toFixed(0)}%`,
+      labelX: label.x,
+      labelY: label.y,
+    })
+  }
+
+  const legend: PositionedPieLegendItem[] = legendTexts.map((text, index) => {
+    const x = legendX0 + dx
+    const y = cy0 + index * rowHeight - legendOffset + dy
+    return {
+      text,
+      colorIndex: index % PIE.paletteSize,
+      x,
+      y,
+      size: PIE.legendRectSize,
+      textX: x + PIE.legendRectSize + PIE.legendSpacing,
+      textY: y + PIE.legendRectSize - PIE.legendSpacing,
+    }
+  })
+
+  return {
+    width: Math.ceil(maxX - minX),
+    height: Math.ceil(maxY - minY),
+    cx,
+    cy,
+    radius,
+    outerRadius: radius + PIE.outerStrokeWidth / 2,
+    title:
+      titleText.length > 0
+        ? { text: titleText, x: cx, y: cy - (height - 50) / 2 }
+        : undefined,
+    slices,
+    legend,
+    accTitle: chart.accTitle,
+    accDescr: chart.accDescr,
+  }
+}