@outsidedata/dolex 0.1.0

package/src/renderers/d3/composition/stacked-bar.ts

@@ -0,0 +1,309 @@
+/**
+ * Stacked bar chart D3 renderer.
+ * Follows bar chart standards: adaptive layout, full-column hover, instant render, value labels.
+ */
+
+import type { VisualizationSpec } from '../../../types.js';
+import {
+  createSvg,
+  buildColorScale,
+  addSortControls,
+  createTooltip,
+  showTooltip,
+  hideTooltip,
+  positionTooltip,
+  createLegend,
+  formatValue,
+  truncateLabel,
+  styleAxis,
+  getAdaptiveTickCount,
+  shouldRotateLabels,
+  calculateBottomMargin,
+  shouldShowValueLabels,
+  DARK_BG,
+  TEXT_MUTED,
+} from '../shared.js';
+
+declare const d3: any;
+
+export function renderStackedBar(container: HTMLElement, spec: VisualizationSpec): void {
+  const { config, encoding, data } = spec;
+  const categoryField = config.categoryField || encoding.x?.field;
+  const seriesField = config.seriesField || encoding.color?.field;
+  const valueField = config.valueField || encoding.y?.field;
+  const isNormalized = config.normalized || false;
+
+  // Get unique categories and series
+  let categories = [...new Set(data.map((d) => d[categoryField]))];
+  const series = [...new Set(data.map((d) => d[seriesField]))];
+
+  // Build pivot table: category -> series -> value
+  const pivoted: Record<string, Record<string, number>> = {};
+  const totals: Record<string, number> = {};
+  categories.forEach((cat) => {
+    pivoted[cat as string] = {};
+    let total = 0;
+    series.forEach((s) => {
+      const row = data.find((d) => d[categoryField] === cat && d[seriesField] === s);
+      const val = row ? Number(row[valueField]) || 0 : 0;
+      pivoted[cat as string][s as string] = val;
+      total += val;
+    });
+    totals[cat as string] = total;
+  });
+
+  // Sort categories
+  if (config.sortBy === 'value') {
+    const order = config.sortOrder === 'ascending' ? 1 : -1;
+    categories.sort((a, b) => order * (totals[a as string] - totals[b as string]));
+  } else if (config.sortBy === 'category') {
+    const order = config.sortOrder === 'ascending' ? 1 : -1;
+    categories.sort((a, b) =>
+      order * String(a).localeCompare(String(b), undefined, { sensitivity: 'base', numeric: true })
+    );
+  }
+
+  // Compute stacked data (in sorted category order)
+  const stackData = categories.map((cat) => {
+    const entry: Record<string, any> = { _category: cat };
+    const total = totals[cat as string];
+    series.forEach((s) => {
+      const val = pivoted[cat as string][s as string] || 0;
+      entry[s as string] = isNormalized && total > 0 ? (val / total) * 100 : val;
+    });
+    entry._total = isNormalized ? 100 : total;
+    return entry;
+  });
+
+  const hasNegatives = stackData.some((d: any) =>
+    (series as string[]).some((s) => d[s] < 0)
+  );
+  const stack = d3.stack().keys(series as string[]);
+  if (hasNegatives) {
+    stack.offset(d3.stackOffsetDiverging);
+  }
+  const stacked = stack(stackData);
+
+  const containerWidth = container.clientWidth || 800;
+  const containerHeight = container.clientHeight || 500;
+
+  // Hide legend in tiny containers
+  const showLegend = containerHeight > 250 && containerWidth > 350;
+
+  // Build color scale early so legend can use it
+  const colorScale = buildColorScale(encoding.color, data);
+
+  // Set up container as flex column: chart wrapper on top, legend div on bottom
+  container.style.display = 'flex';
+  container.style.flexDirection = 'column';
+  container.style.background = DARK_BG;
+  container.style.borderRadius = '8px';
+  container.style.overflow = 'hidden';
+
+  const chartWrapper = document.createElement('div');
+  chartWrapper.style.flex = '1';
+  chartWrapper.style.minHeight = '0';
+  container.appendChild(chartWrapper);
+
+  let legendDiv: HTMLDivElement | null = null;
+  if (showLegend) {
+    legendDiv = createLegend(colorScale);
+    container.appendChild(legendDiv);
+  }
+
+  // Adaptive margins
+  const estimatedBarWidth = (containerWidth - 130) / categories.length;
+  const needsRotation = shouldRotateLabels(categories.map(String), estimatedBarWidth);
+  const bottomMargin = calculateBottomMargin(categories.map(String), needsRotation);
+
+  const { svg, g, dims } = createSvg(chartWrapper, spec, {
+    bottom: bottomMargin,
+    left: 70,
+    right: 30,
+    top: 40,
+  });
+
+  // Remove the default background from SVG — container handles it now
+  svg.style('background', 'none').style('border-radius', '0');
+
+  const tooltip = createTooltip(container);
+
+  // Scales
+  const xScale = d3.scaleBand().domain(categories).range([0, dims.innerWidth]).padding(0.2);
+
+  let minY: number;
+  let maxY: number;
+  if (isNormalized) {
+    minY = 0;
+    maxY = 100;
+  } else if (hasNegatives) {
+    minY = d3.min(stacked, (layer: any) => d3.min(layer, (d: any) => d[0])) as number;
+    maxY = d3.max(stacked, (layer: any) => d3.max(layer, (d: any) => d[1])) as number;
+  } else {
+    minY = 0;
+    maxY = d3.max(stackData, (d: any) => d._total) as number;
+  }
+
+  const yScale = d3
+    .scaleLinear()
+    .domain([minY, maxY])
+    .range([dims.innerHeight, 0])
+    .nice();
+
+  // Draw x-axis (categorical)
+  const xAxis = g
+    .append('g')
+    .attr('class', 'x-axis')
+    .attr('transform', `translate(0,${dims.innerHeight})`)
+    .call(
+      d3
+        .axisBottom(xScale)
+        .tickSize(0)
+        .tickPadding(8)
+        .tickFormat((d: string) => truncateLabel(d, 25))
+    );
+
+  styleAxis(xAxis);
+
+  // Smart label rotation
+  if (needsRotation) {
+    g.selectAll('.x-axis .tick text')
+      .attr('transform', 'rotate(-35)')
+      .attr('text-anchor', 'end')
+      .attr('dx', '-0.5em')
+      .attr('dy', '0.15em');
+  }
+
+  // Draw y-axis with adaptive ticks and formatted values
+  const yTickCount = getAdaptiveTickCount(dims.innerHeight, 40);
+  const yAxis = g
+    .append('g')
+    .attr('class', 'y-axis')
+    .call(
+      d3
+        .axisLeft(yScale)
+        .ticks(yTickCount)
+        .tickSize(-dims.innerWidth)
+        .tickPadding(8)
+        .tickFormat((d: number) => isNormalized ? d + '%' : formatValue(d))
+    );
+
+  styleAxis(yAxis);
+
+  // Full-column invisible hover targets (bar chart standard)
+  g.selectAll('.bar-hover-target')
+    .data(stackData)
+    .join('rect')
+    .attr('class', 'bar-hover-target')
+    .attr('x', (d: any) => xScale(d._category))
+    .attr('y', 0)
+    .attr('width', xScale.bandwidth())
+    .attr('height', dims.innerHeight)
+    .attr('fill', 'transparent')
+    .attr('cursor', 'pointer')
+    .on('mouseover', function (event: MouseEvent, d: any) {
+      // Highlight all segments in this column
+      g.selectAll('.segment')
+        .filter((sd: any) => sd.data._category === d._category)
+        .attr('opacity', 0.8);
+
+      // Build multi-series tooltip
+      let html = `<strong>${d._category}</strong>`;
+      series.forEach((s) => {
+        const val = d[s as string];
+        if (val > 0) {
+          const swatch = `<span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:${colorScale(s)};margin-right:4px"></span>`;
+          html += `<br/>${swatch}${s}: ${isNormalized ? val.toFixed(1) + '%' : formatValue(val)}`;
+        }
+      });
+      if (!isNormalized) {
+        html += `<br/><span style="color:${TEXT_MUTED};font-size:11px">Total: ${formatValue(d._total)}</span>`;
+      }
+      showTooltip(tooltip, html, event);
+    })
+    .on('mousemove', (event: MouseEvent) => {
+      positionTooltip(tooltip, event);
+    })
+    .on('mouseout', function () {
+      g.selectAll('.segment').attr('opacity', 1);
+      hideTooltip(tooltip);
+    });
+
+  // Clamp bar width for single/few items
+  const maxBarWidth = Math.min(100, dims.innerWidth * 0.35);
+  const stackBarWidth = Math.min(xScale.bandwidth(), maxBarWidth);
+  const stackBarOffset = (xScale.bandwidth() - stackBarWidth) / 2;
+
+  // Draw stacked bars (instant, no animation)
+  g.selectAll('.series')
+    .data(stacked)
+    .join('g')
+    .attr('class', 'series')
+    .attr('fill', (d: any) => colorScale(d.key))
+    .selectAll('rect')
+    .data((d: any) => d.map((v: any) => ({ ...v, key: d.key })))
+    .join('rect')
+    .attr('class', 'segment')
+    .attr('x', (d: any) => xScale(d.data._category) + stackBarOffset)
+    .attr('y', (d: any) => Math.min(yScale(d[0]), yScale(d[1])))
+    .attr('width', stackBarWidth)
+    .attr('height', (d: any) => Math.abs(yScale(d[0]) - yScale(d[1])))
+    .attr('rx', 1)
+    .attr('pointer-events', 'none');
+
+  // Value labels on segments (auto-enabled when segments are large enough)
+  const showLabels = shouldShowValueLabels(config, xScale.bandwidth(), false);
+  if (showLabels) {
+    const allSegments: any[] = [];
+    stacked.forEach((seriesData: any) => {
+      seriesData.forEach((d: any) => {
+        const val = d[1] - d[0];
+        if (val > 0) {
+          allSegments.push({ ...d, key: seriesData.key, value: val });
+        }
+      });
+    });
+
+    g.selectAll('.segment-label')
+      .data(allSegments)
+      .join('text')
+      .attr('class', 'segment-label')
+      .attr('x', (d: any) => xScale(d.data._category)! + xScale.bandwidth() / 2)
+      .attr('y', (d: any) => {
+        const segmentHeight = yScale(d[0]) - yScale(d[1]);
+        return yScale(d[1]) + segmentHeight / 2;
+      })
+      .attr('text-anchor', 'middle')
+      .attr('dominant-baseline', 'middle')
+      .attr('fill', '#ffffff')
+      .attr('font-size', '10px')
+      .attr('font-weight', '500')
+      .attr('font-family', 'Inter, system-ui, sans-serif')
+      .attr('pointer-events', 'none')
+      .text((d: any) => {
+        const segmentHeight = yScale(d[0]) - yScale(d[1]);
+        // Only show label if segment is tall enough to fit text
+        if (segmentHeight < 16) return '';
+        return isNormalized ? d.value.toFixed(0) + '%' : formatValue(d.value);
+      });
+  }
+
+  // Total labels on top
+  if (config.showTotal && !isNormalized) {
+    g.selectAll('.total-label')
+      .data(stackData)
+      .join('text')
+      .attr('class', 'total-label')
+      .attr('x', (d: any) => xScale(d._category)! + xScale.bandwidth() / 2)
+      .attr('y', (d: any) => yScale(d._total) - 6)
+      .attr('text-anchor', 'middle')
+      .attr('fill', TEXT_MUTED)
+      .attr('font-size', '10px')
+      .attr('font-family', 'Inter, system-ui, sans-serif')
+      .text((d: any) => formatValue(d._total));
+  }
+
+  // Sort controls (show on hover, top-right corner)
+  addSortControls(svg, container, spec, dims, renderStackedBar);
+}
+

package/src/renderers/d3/composition/sunburst.ts

@@ -0,0 +1,403 @@
+/**
+ * Sunburst D3 renderer.
+ *
+ * Concentric rings from hierarchical data. Inner ring = top-level categories,
+ * outer rings = deeper levels. Each node is an arc segment.
+ *
+ * Layout: flex column — title (HTML) → SVG chart → HTML legend.
+ */
+
+import type { VisualizationSpec } from '../../../types.js';
+import {
+  buildColorScale,
+  createTooltip,
+  showTooltip,
+  hideTooltip,
+  positionTooltip,
+  formatValue,
+  truncateLabel,
+  contrastText,
+  contrastTextMuted,
+  isAllZeros,
+  DEFAULT_PALETTE,
+  DARK_BG,
+  TEXT_COLOR,
+  TEXT_MUTED,
+  createLegend,
+} from '../shared.js';
+
+declare const d3: any;
+
+export function renderSunburst(container: HTMLElement, spec: VisualizationSpec): void {
+  const { config, encoding, data } = spec;
+  const parentField = config.parentField;
+  const childField = config.childField;
+  const valueField = config.valueField || encoding.size?.field;
+  const showLabels = config.showLabels ?? true;
+  const showValues = config.showValues ?? false;
+  const innerR = config.innerRadius ?? 0;
+
+  const width = container.clientWidth || 600;
+  const height = container.clientHeight || 600;
+
+  // ── Flex column container ──
+  container.style.display = 'flex';
+  container.style.flexDirection = 'column';
+  container.style.background = DARK_BG;
+  container.style.borderRadius = '8px';
+  container.style.overflow = 'hidden';
+  container.style.fontFamily = 'Inter, system-ui, sans-serif';
+
+  // ── Title (HTML div) ──
+  const titleHeight = spec.title ? 36 : 0;
+  if (spec.title) {
+    const titleDiv = document.createElement('div');
+    titleDiv.style.cssText = `
+      text-align: center;
+      color: ${TEXT_COLOR};
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 36px;
+      height: 36px;
+      flex-shrink: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 0 10px;
+    `;
+    titleDiv.textContent = spec.title;
+    titleDiv.title = spec.title;
+    container.appendChild(titleDiv);
+  }
+
+  // ── Chart wrapper (takes remaining space) ──
+  const chartWrapper = document.createElement('div');
+  chartWrapper.style.cssText = `flex: 1; min-height: 0; position: relative;`;
+  container.appendChild(chartWrapper);
+
+  // Compute available chart area
+  const legendEstimate = 32; // reserve space for legend row
+  const chartHeight = height - titleHeight - legendEstimate;
+  const chartPad = 12;
+  const radius = Math.min(width - chartPad * 2, chartHeight - chartPad * 2) / 2;
+
+  const svg = d3
+    .select(chartWrapper)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', chartHeight);
+
+  const centerX = width / 2;
+  const centerY = chartHeight / 2;
+  const g = svg.append('g').attr('transform', `translate(${centerX},${centerY})`);
+
+  const tooltip = createTooltip(container);
+
+  // Check if all values are zero
+  if (valueField && isAllZeros(data, valueField)) {
+    const emptyDiv = document.createElement('div');
+    emptyDiv.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: ${width}px;
+      height: ${chartHeight}px;
+      color: ${TEXT_MUTED};
+      font-size: 14px;
+      font-family: Inter, system-ui, sans-serif;
+    `;
+    emptyDiv.textContent = 'All values are zero';
+    chartWrapper.appendChild(emptyDiv);
+    return;
+  }
+
+  // ── Build hierarchy ──
+  const root = buildHierarchy(data, parentField, childField, valueField, config);
+
+  // ── Partition layout ──
+  const effectiveInner = Math.min(innerR, radius * 0.6);
+  d3.partition().size([2 * Math.PI, radius - effectiveInner])(root);
+
+  // ── Color scale ──
+  const topLevelNames = root.children ? root.children.map((c: any) => c.data.name) : [];
+  const colorScale = encoding.color
+    ? buildColorScale(encoding.color, data)
+    : d3.scaleOrdinal().domain(topLevelNames).range(DEFAULT_PALETTE);
+
+  // ── Arc generator ──
+  const arc = d3
+    .arc()
+    .startAngle((d: any) => d.x0)
+    .endAngle((d: any) => d.x1)
+    .innerRadius((d: any) => d.y0 + effectiveInner)
+    .outerRadius((d: any) => d.y1 + effectiveInner);
+
+  // ── Draw arcs ──
+  const descendants = root.descendants().filter((d: any) => d.depth > 0);
+
+  const arcs = g
+    .selectAll('.sunburst-arc')
+    .data(descendants)
+    .join('path')
+    .attr('class', 'sunburst-arc')
+    .attr('d', (d: any) =>
+      d3.arc()
+        .startAngle(d.x0)
+        .endAngle(d.x1)
+        .innerRadius(d.y0 + effectiveInner)
+        .outerRadius(d.y1 + effectiveInner)
+        .cornerRadius(d.depth * 3)(d)
+    )
+    .attr('fill', (d: any) => getArcColor(d, colorScale))
+    .attr('stroke', DARK_BG)
+    .attr('stroke-width', 1)
+    .attr('opacity', 1)
+    .style('cursor', 'pointer')
+    .on('mouseover', function (event: MouseEvent, d: any) {
+      // Dim all arcs, highlight this one + its ancestor chain
+      arcs.attr('opacity', 0.3);
+      const ancestors = getAncestorChain(d);
+      arcs
+        .filter((n: any) => ancestors.has(n) || n === d)
+        .attr('opacity', 1);
+      d3.select(this).attr('stroke', '#ffffff').attr('stroke-width', 2);
+
+      const path = getAncestorPath(d);
+      showTooltip(
+        tooltip,
+        `<strong>${path}</strong><br/>${valueField}: ${formatValue(d.value)}`,
+        event
+      );
+    })
+    .on('mousemove', (event: MouseEvent) => {
+      positionTooltip(tooltip, event);
+    })
+    .on('mouseout', function () {
+      arcs.attr('opacity', 1).attr('stroke', DARK_BG).attr('stroke-width', 1);
+      hideTooltip(tooltip);
+    });
+
+  // ── Labels (skip on small charts) ──
+  if (showLabels && radius > 140) {
+    drawArcLabels(g, descendants, arc, showValues, colorScale, radius, 0);
+  }
+
+  // ── Center label (donut mode) ──
+  if (effectiveInner > 30) {
+    g.append('text')
+      .attr('text-anchor', 'middle')
+      .attr('dominant-baseline', 'central')
+      .attr('fill', TEXT_MUTED)
+      .attr('font-size', '12px')
+      .attr('font-family', 'Inter, system-ui, sans-serif')
+      .text(`Total: ${formatValue(root.value)}`);
+  }
+
+  if (topLevelNames.length > 1) {
+    const legendDiv = createLegend(colorScale);
+    container.appendChild(legendDiv);
+  }
+}
+
+// ─── HELPERS ──────────────────────────────────────────────────────────────────
+
+function getArcColor(d: any, colorScale: any): string {
+  const ancestor = getTopAncestor(d);
+  const baseColor = colorScale(ancestor.data.name);
+  if (d.depth > 1) {
+    const lightenFactor = Math.min(d.depth * 0.12, 0.4);
+    return d3.interpolateRgb(baseColor, '#ffffff')(lightenFactor);
+  }
+  return baseColor;
+}
+
+function buildNestedHierarchy(
+  items: Record<string, any>[],
+  levelFields: string[],
+  valueField: string,
+  levelIdx: number,
+  clampVal: (v: number) => number
+): any[] {
+  const field = levelFields[levelIdx];
+  const groups = [...new Set(items.map((d) => d[field]))];
+
+  if (levelIdx === levelFields.length - 1) {
+    return groups.map((name) => ({
+      name,
+      value: clampVal(items
+        .filter((d) => d[field] === name)
+        .reduce((sum, d) => sum + (Number(d[valueField]) || 0), 0)),
+      _data: items.find((d) => d[field] === name),
+    }));
+  }
+
+  return groups.map((name) => ({
+    name,
+    children: buildNestedHierarchy(
+      items.filter((d) => d[field] === name),
+      levelFields,
+      valueField,
+      levelIdx + 1,
+      clampVal
+    ),
+  }));
+}
+
+function buildHierarchy(
+  data: Record<string, any>[],
+  parentField: string | undefined,
+  childField: string | undefined,
+  valueField: string | undefined,
+  config: VisualizationSpec['config']
+): any {
+  const levelFields: string[] | undefined = config.levelFields;
+
+  // Compute min-visible threshold: 2% of max ensures extreme-range items stay visible
+  const allVals = valueField
+    ? data.map((d) => Number(d[valueField]) || 0).filter((v) => v > 0)
+    : [];
+  const maxVal = allVals.length > 0 ? Math.max(...allVals) : 0;
+  const minVisible = maxVal * 0.02;
+  const clampVal = (v: number) => (v > 0 && v < minVisible ? minVisible : v);
+
+  if (levelFields && levelFields.length > 0 && valueField) {
+    const hierarchy = {
+      name: 'root',
+      children: buildNestedHierarchy(data, levelFields, valueField, 0, clampVal),
+    };
+    return d3.hierarchy(hierarchy).sum((d: any) => d.value);
+  }
+
+  if (parentField && childField && valueField) {
+    const parents = [...new Set(data.map((d) => d[parentField]))];
+    const hierarchy = {
+      name: 'root',
+      children: parents.map((p) => ({
+        name: p,
+        children: data
+          .filter((d) => d[parentField] === p)
+          .map((d) => ({
+            name: d[childField],
+            value: clampVal(Number(d[valueField]) || 0),
+            _data: d,
+          })),
+      })),
+    };
+    return d3.hierarchy(hierarchy).sum((d: any) => d.value);
+  }
+
+  if (parentField && valueField) {
+    const parents = [...new Set(data.map((d) => d[parentField]))];
+    const hierarchy = {
+      name: 'root',
+      children: parents.map((p) => {
+        const items = data.filter((d) => d[parentField] === p);
+        return {
+          name: p,
+          children: items.map((d, i) => ({
+            name: d[childField || parentField] || `Item ${i}`,
+            value: clampVal(Number(d[valueField]) || 0),
+            _data: d,
+          })),
+        };
+      }),
+    };
+    return d3.hierarchy(hierarchy).sum((d: any) => d.value);
+  }
+
+  const categoryField = config.categoryField || childField || parentField;
+  const hierarchy = {
+    name: 'root',
+    children: data.map((d) => ({
+      name: d[categoryField!] || 'Unknown',
+      value: clampVal(Number(d[valueField!]) || 0),
+      _data: d,
+    })),
+  };
+  return d3.hierarchy(hierarchy).sum((d: any) => d.value);
+}
+
+function getTopAncestor(d: any): any {
+  let node = d;
+  while (node.parent && node.parent.parent) {
+    node = node.parent;
+  }
+  return node;
+}
+
+function getAncestorChain(d: any): Set<any> {
+  const chain = new Set<any>();
+  let node = d.parent;
+  while (node && node.depth > 0) {
+    chain.add(node);
+    node = node.parent;
+  }
+  return chain;
+}
+
+function getAncestorPath(d: any): string {
+  const parts: string[] = [];
+  let node = d;
+  while (node && node.depth > 0) {
+    parts.unshift(node.data.name);
+    node = node.parent;
+  }
+  return parts.join(' \u203A ');
+}
+
+function drawArcLabels(
+  g: any,
+  descendants: any[],
+  arc: any,
+  showValues: boolean,
+  colorScale: any,
+  _radius: number,
+  _effectiveInner: number
+): void {
+  const labels = g
+    .selectAll('.sunburst-label')
+    .data(descendants)
+    .join('text')
+    .attr('class', 'sunburst-label')
+    .attr('transform', (d: any) => {
+      const [x, y] = arc.centroid(d);
+      return `translate(${x},${y})`;
+    })
+    .attr('text-anchor', 'middle')
+    .attr('dominant-baseline', 'central')
+    .attr('font-family', 'Inter, system-ui, sans-serif')
+    .attr('pointer-events', 'none');
+
+  labels.each(function (this: SVGTextElement, d: any) {
+    const el = d3.select(this);
+    const angle = d.x1 - d.x0;
+    const thickness = d.y1 - d.y0;
+    if (angle < 0.12 || thickness < 18) return;
+
+    const fillColor = getArcColor(d, colorScale);
+    const isLarge = angle >= 0.25 && thickness >= 25;
+    const fontSize = isLarge ? '12px' : '10px';
+    const maxChars = Math.max(3, Math.floor(angle * 12));
+    const rawName = String(d.data.name);
+    if (rawName.length > maxChars) return;
+
+    el.append('tspan')
+      .attr('x', 0)
+      .attr('dy', showValues && angle > 0.3 ? '-0.35em' : '0em')
+      .attr('fill', contrastText(fillColor))
+      .attr('font-size', fontSize)
+      .attr('font-weight', '600')
+      .text(rawName);
+
+    if (showValues && angle > 0.3) {
+      const valueFontSize = isLarge ? '11px' : '9px';
+      el.append('tspan')
+        .attr('x', 0)
+        .attr('dy', '1.2em')
+        .attr('fill', contrastTextMuted(fillColor))
+        .attr('font-size', valueFontSize)
+        .attr('font-weight', '400')
+        .text(formatValue(d.value));
+    }
+  });
+}