@outsidedata/dolex 0.1.0

package/src/renderers/d3/comparison/diverging-bar.ts

@@ -0,0 +1,374 @@
+/**
+ * Diverging bar chart D3 renderer with adaptive sizing, smart hover targets,
+ * and value labels — following the same standards as the bar chart renderer.
+ */
+
+import type { VisualizationSpec } from '../../../types.js';
+import {
+  createSvg,
+  buildColorScale,
+  createTooltip,
+  showTooltip,
+  hideTooltip,
+  positionTooltip,
+  formatValue,
+  styleAxis,
+  getAdaptiveTickCount,
+  calculateLeftMargin,
+  shouldRotateLabels,
+  calculateBottomMargin,
+  truncateLabel,
+  shouldShowValueLabels,
+  renderEmptyState,
+  isAllZeros,
+  TEXT_MUTED,
+  AXIS_COLOR,
+  GRID_COLOR,
+} from '../shared.js';
+
+declare const d3: any;
+
+// ─── MAIN ENTRY ──────────────────────────────────────────────────────────────
+
+export function renderDivergingBar(container: HTMLElement, spec: VisualizationSpec): void {
+  const { encoding, data, config } = spec;
+  const orientation = (config as any)?.orientation === 'vertical' ? 'vertical' : 'horizontal';
+
+  // Spec always maps: encoding.x = value (quantitative), encoding.y = category (nominal)
+  // Both render functions expect: param1 = categoryField, param2 = valueField
+  const valueField = encoding.x?.field || Object.keys(data[0])[1];
+  const categoryField = encoding.y?.field || Object.keys(data[0])[0];
+
+  if (orientation === 'vertical') {
+    renderVertical(container, spec, categoryField, valueField);
+  } else {
+    renderHorizontal(container, spec, categoryField, valueField);
+  }
+}
+
+// ─── HORIZONTAL (categories top-to-bottom, bars left-to-right) ───────────────
+
+function renderHorizontal(
+  container: HTMLElement,
+  spec: VisualizationSpec,
+  xField: string,
+  yField: string
+): void {
+  const { encoding, data, config } = spec;
+  const categories = data.map((d) => String(d[xField]));
+
+  // Dynamic left margin based on label lengths
+  const leftMargin = calculateLeftMargin(categories);
+  const { svg, g, dims } = createSvg(container, spec, { left: leftMargin, bottom: 40 });
+  const tooltip = createTooltip(container);
+
+  // Check if all values are zero
+  if (isAllZeros(data, yField)) {
+    renderEmptyState(g, dims);
+    return;
+  }
+
+  const yScale = d3.scaleBand().domain(categories).range([0, dims.innerHeight]).padding(0.2);
+
+  const values = data.map((d) => Number(d[yField]));
+  const maxAbs = Math.max(Math.abs(d3.min(values)), Math.abs(d3.max(values)));
+  const xScale = d3.scaleLinear().domain([-maxAbs, maxAbs]).range([0, dims.innerWidth]).nice();
+  const midX = xScale(0);
+
+  // Adaptive tick count for x-axis
+  const xTickCount = getAdaptiveTickCount(dims.innerWidth);
+
+  // X axis (values) at bottom with adaptive ticks + formatted values
+  const xAxis = g
+    .append('g')
+    .attr('class', 'x-axis')
+    .attr('transform', `translate(0,${dims.innerHeight})`)
+    .call(
+      d3.axisBottom(xScale)
+        .ticks(xTickCount)
+        .tickSize(-dims.innerHeight)
+        .tickPadding(8)
+        .tickFormat((d: number) => formatValue(d))
+    );
+  styleAxis(xAxis);
+
+  // Y axis (categories) with truncated labels
+  const yAxis = g
+    .append('g')
+    .attr('class', 'y-axis')
+    .call(
+      d3.axisLeft(yScale)
+        .tickSize(0)
+        .tickPadding(10)
+        .tickFormat((d: string) => truncateLabel(d, 25))
+    );
+  styleAxis(yAxis);
+
+  // Center line at zero
+  g.append('line')
+    .attr('x1', midX)
+    .attr('y1', 0)
+    .attr('x2', midX)
+    .attr('y2', dims.innerHeight)
+    .attr('stroke', AXIS_COLOR)
+    .attr('stroke-width', 1.5);
+
+  // Clamp bar height for single/few items
+  const maxBarHeight = Math.min(80, dims.innerHeight * 0.3);
+  const barHeight = Math.min(yScale.bandwidth(), maxBarHeight);
+  const barYOffset = (yScale.bandwidth() - barHeight) / 2;
+
+  // Invisible hover targets (full-width for easy hovering)
+  g.selectAll('.bar-hover-target')
+    .data(data)
+    .join('rect')
+    .attr('class', 'bar-hover-target')
+    .attr('y', (d: any) => yScale(String(d[xField])))
+    .attr('x', 0)
+    .attr('height', yScale.bandwidth())
+    .attr('width', dims.innerWidth)
+    .attr('fill', 'transparent')
+    .attr('cursor', 'pointer')
+    .on('mouseover', function (event: MouseEvent, d: any) {
+      g.selectAll('.bar')
+        .filter((bd: any) => bd[xField] === d[xField])
+        .attr('opacity', 0.8);
+      const val = Number(d[yField]);
+      showTooltip(
+        tooltip,
+        `<strong>${d[xField]}</strong><br/>${yField}: ${val >= 0 ? '+' : ''}${formatValue(val)}`,
+        event
+      );
+    })
+    .on('mousemove', (event: MouseEvent) => {
+      positionTooltip(tooltip, event);
+    })
+    .on('mouseout', function () {
+      g.selectAll('.bar').attr('opacity', 1);
+      hideTooltip(tooltip);
+    });
+
+  // Draw bars (pointer-events: none — hover targets handle interaction)
+  g.selectAll('.bar')
+    .data(data)
+    .join('rect')
+    .attr('class', 'bar')
+    .attr('y', (d: any) => yScale(String(d[xField])) + barYOffset)
+    .attr('height', barHeight)
+    .attr('x', (d: any) => {
+      const val = Number(d[yField]);
+      return val >= 0 ? midX : xScale(val);
+    })
+    .attr('width', (d: any) => Math.max(2, Math.abs(xScale(Number(d[yField])) - midX)))
+    .attr('fill', (d: any) => (Number(d[yField]) >= 0 ? '#10b981' : '#ef4444'))
+    .attr('rx', 3)
+    .attr('pointer-events', 'none');
+
+  // Value labels on bars (auto-enabled for large enough bars)
+  const showLabels = shouldShowValueLabels(config, barHeight, true);
+  if (showLabels) {
+    g.selectAll('.bar-label')
+      .data(data)
+      .join('text')
+      .attr('class', 'bar-label')
+      .attr('y', (d: any) => yScale(String(d[xField]))! + yScale.bandwidth() / 2)
+      .attr('x', (d: any) => {
+        const val = Number(d[yField]);
+        const barEnd = xScale(val);
+        const barWidth = Math.abs(barEnd - midX);
+        // Place inside bar if wide enough, otherwise outside
+        if (val >= 0) {
+          return barWidth > 50 ? barEnd - 5 : barEnd + 5;
+        } else {
+          return barWidth > 50 ? barEnd + 5 : barEnd - 5;
+        }
+      })
+      .attr('text-anchor', (d: any) => {
+        const val = Number(d[yField]);
+        const barWidth = Math.abs(xScale(val) - midX);
+        if (val >= 0) return barWidth > 50 ? 'end' : 'start';
+        return barWidth > 50 ? 'start' : 'end';
+      })
+      .attr('dominant-baseline', 'middle')
+      .attr('fill', (d: any) => {
+        const barWidth = Math.abs(xScale(Number(d[yField])) - midX);
+        return barWidth > 50 ? '#ffffff' : TEXT_MUTED;
+      })
+      .attr('font-size', '10px')
+      .attr('font-weight', '500')
+      .attr('font-family', 'Inter, system-ui, sans-serif')
+      .style('opacity', 1)
+      .text((d: any) => {
+        const val = Number(d[yField]);
+        return (val >= 0 ? '+' : '') + formatValue(val);
+      });
+  }
+}
+
+// ─── VERTICAL (categories left-to-right, bars up-to-down) ────────────────────
+
+function renderVertical(
+  container: HTMLElement,
+  spec: VisualizationSpec,
+  xField: string,
+  yField: string
+): void {
+  const { encoding, data, config } = spec;
+  const categories = data.map((d) => String(d[xField]));
+
+  // Pre-calculate label rotation and dynamic bottom margin
+  const containerWidth = container.clientWidth || 800;
+  const estimatedBarWidth = (containerWidth - 140) / categories.length;
+  const willRotate = shouldRotateLabels(categories, estimatedBarWidth);
+  const bottomMargin = calculateBottomMargin(categories, willRotate);
+
+  const { svg, g, dims } = createSvg(container, spec, { bottom: bottomMargin, left: 70 });
+  const tooltip = createTooltip(container);
+
+  // Check if all values are zero
+  if (isAllZeros(data, yField)) {
+    renderEmptyState(g, dims);
+    return;
+  }
+
+  const xScale = d3.scaleBand().domain(categories).range([0, dims.innerWidth]).padding(0.2);
+
+  const values = data.map((d) => Number(d[yField]));
+  const maxAbs = Math.max(Math.abs(d3.min(values)), Math.abs(d3.max(values)));
+  const yScale = d3.scaleLinear().domain([-maxAbs, maxAbs]).range([dims.innerHeight, 0]).nice();
+  const midY = yScale(0);
+
+  // X axis (categories) at bottom with truncated labels
+  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 based on bar width and label length
+  const barWidth = xScale.bandwidth();
+  const needsRotation = shouldRotateLabels(categories, barWidth);
+  if (needsRotation) {
+    g.selectAll('.x-axis .tick text')
+      .attr('transform', 'rotate(-35)')
+      .attr('text-anchor', 'end')
+      .attr('dx', '-0.5em')
+      .attr('dy', '0.15em');
+  }
+
+  // Adaptive tick count for y-axis
+  const yTickCount = getAdaptiveTickCount(dims.innerHeight, 40);
+
+  // Y axis (values) with adaptive ticks, grid lines, formatted values
+  const yAxis = g
+    .append('g')
+    .attr('class', 'y-axis')
+    .call(
+      d3.axisLeft(yScale)
+        .ticks(yTickCount)
+        .tickSize(-dims.innerWidth)
+        .tickPadding(8)
+        .tickFormat((d: number) => formatValue(d))
+    );
+  styleAxis(yAxis);
+
+  // Center line at zero (stronger weight to stand out from grid)
+  g.append('line')
+    .attr('x1', 0)
+    .attr('y1', midY)
+    .attr('x2', dims.innerWidth)
+    .attr('y2', midY)
+    .attr('stroke', AXIS_COLOR)
+    .attr('stroke-width', 1.5);
+
+  // Clamp bar width for single/few items
+  const maxBarWidth = Math.min(80, dims.innerWidth * 0.3);
+  const clampedBarWidth = Math.min(xScale.bandwidth(), maxBarWidth);
+  const barXOffset = (xScale.bandwidth() - clampedBarWidth) / 2;
+
+  // Invisible hover targets (full-height for easy hovering)
+  g.selectAll('.bar-hover-target')
+    .data(data)
+    .join('rect')
+    .attr('class', 'bar-hover-target')
+    .attr('x', (d: any) => xScale(String(d[xField])))
+    .attr('y', 0)
+    .attr('width', xScale.bandwidth())
+    .attr('height', dims.innerHeight)
+    .attr('fill', 'transparent')
+    .attr('cursor', 'pointer')
+    .on('mouseover', function (event: MouseEvent, d: any) {
+      g.selectAll('.bar')
+        .filter((bd: any) => bd[xField] === d[xField])
+        .attr('opacity', 0.8);
+      const val = Number(d[yField]);
+      showTooltip(
+        tooltip,
+        `<strong>${d[xField]}</strong><br/>${yField}: ${val >= 0 ? '+' : ''}${formatValue(val)}`,
+        event
+      );
+    })
+    .on('mousemove', (event: MouseEvent) => {
+      positionTooltip(tooltip, event);
+    })
+    .on('mouseout', function () {
+      g.selectAll('.bar').attr('opacity', 1);
+      hideTooltip(tooltip);
+    });
+
+  // Draw bars (pointer-events: none — hover targets handle interaction)
+  g.selectAll('.bar')
+    .data(data)
+    .join('rect')
+    .attr('class', 'bar')
+    .attr('x', (d: any) => xScale(String(d[xField])) + barXOffset)
+    .attr('width', clampedBarWidth)
+    .attr('y', (d: any) => {
+      const val = Number(d[yField]);
+      return val >= 0 ? yScale(val) : midY;
+    })
+    .attr('height', (d: any) => Math.max(2, Math.abs(yScale(Number(d[yField])) - midY)))
+    .attr('fill', (d: any) => (Number(d[yField]) >= 0 ? '#10b981' : '#ef4444'))
+    .attr('rx', 3)
+    .attr('pointer-events', 'none');
+
+  // Value labels on bars (auto-enabled for wide enough bars)
+  const showLabels = shouldShowValueLabels(config, clampedBarWidth, false);
+  if (showLabels) {
+    g.selectAll('.bar-label')
+      .data(data)
+      .join('text')
+      .attr('class', 'bar-label')
+      .attr('x', (d: any) => xScale(String(d[xField]))! + xScale.bandwidth() / 2)
+      .attr('y', (d: any) => {
+        const val = Number(d[yField]);
+        const barHeight = Math.abs(yScale(val) - midY);
+        if (val >= 0) {
+          // Positive bar: label above if short, inside top if tall
+          return barHeight < 20 ? yScale(val) - 6 : yScale(val) + 14;
+        } else {
+          // Negative bar: label below if short, inside bottom if tall
+          return barHeight < 20 ? midY + barHeight + 14 : midY + barHeight - 6;
+        }
+      })
+      .attr('text-anchor', 'middle')
+      .attr('fill', (d: any) => {
+        const barHeight = Math.abs(yScale(Number(d[yField])) - midY);
+        return barHeight < 20 ? TEXT_MUTED : '#ffffff';
+      })
+      .attr('font-size', '10px')
+      .attr('font-weight', '500')
+      .attr('font-family', 'Inter, system-ui, sans-serif')
+      .style('opacity', 1)
+      .text((d: any) => {
+        const val = Number(d[yField]);
+        return (val >= 0 ? '+' : '') + formatValue(val);
+      });
+  }
+}

package/src/renderers/d3/comparison/grouped-bar.ts

@@ -0,0 +1,323 @@
+/**
+ * Grouped bar chart D3 renderer — side-by-side bars for multi-metric comparison.
+ * Follows bar chart standards: adaptive layout, full-column hover, instant render, HTML legend.
+ */
+
+import type { VisualizationSpec } from '../../../types.js';
+import {
+  createSvg,
+  buildColorScale,
+  createLegend,
+  addSortControls,
+  createTooltip,
+  showTooltip,
+  hideTooltip,
+  positionTooltip,
+  formatValue,
+  styleAxis,
+  getAdaptiveTickCount,
+  shouldRotateLabels,
+  calculateBottomMargin,
+  calculateLeftMargin,
+  truncateLabel,
+  shouldShowValueLabels,
+  renderEmptyState,
+  isAllZeros,
+  DARK_BG,
+  TEXT_MUTED,
+} from '../shared.js';
+
+declare const d3: any;
+
+export function renderGroupedBar(container: HTMLElement, spec: VisualizationSpec): void {
+  const { config, encoding, data } = spec;
+  let isHorizontal = config.orientation === 'horizontal';
+
+  const categoryField = config.categoryField || encoding.x?.field;
+  const seriesField = config.seriesField || encoding.color?.field;
+  const valueField = config.valueField || encoding.y?.field;
+
+  if (!categoryField || !valueField) return;
+
+  let series: string[];
+  let pivoted: Record<string, Record<string, number>>;
+
+  if (seriesField) {
+    series = [...new Set(data.map((d: any) => String(d[seriesField])))];
+    pivoted = {};
+    for (const d of data) {
+      const cat = String(d[categoryField]);
+      if (!pivoted[cat]) pivoted[cat] = {};
+      pivoted[cat][String(d[seriesField])] = Number(d[valueField]) || 0;
+    }
+  } else {
+    const numericFields = Object.keys(data[0] || {}).filter(
+      (k) => k !== categoryField && typeof data[0][k] === 'number'
+    );
+    series = numericFields.length > 1 ? numericFields : [valueField];
+    pivoted = {};
+    for (const d of data) {
+      const cat = String(d[categoryField]);
+      pivoted[cat] = {};
+      for (const s of series) {
+        pivoted[cat][s] = Number(d[s]) || 0;
+      }
+    }
+  }
+
+  let categories = [...new Set(data.map((d: any) => String(d[categoryField])))];
+
+  if (config.sortBy === 'value') {
+    const order = config.sortOrder === 'ascending' ? 1 : -1;
+    categories.sort((a, b) => {
+      const totalA = series.reduce((sum, s) => sum + (pivoted[a]?.[s] ?? 0), 0);
+      const totalB = series.reduce((sum, s) => sum + (pivoted[b]?.[s] ?? 0), 0);
+      return order * (totalA - totalB);
+    });
+  } else if (config.sortBy === 'category') {
+    const order = config.sortOrder === 'ascending' ? 1 : -1;
+    categories.sort((a, b) => order * a.localeCompare(b, undefined, { sensitivity: 'base', numeric: true }));
+  }
+
+  if (!isHorizontal && categories.length * series.length > 20) {
+    isHorizontal = true;
+  }
+
+  let minVal = 0;
+  let maxVal = 0;
+  for (const cat of categories) {
+    for (const s of series) {
+      const v = pivoted[cat]?.[s as string] ?? 0;
+      if (v < minVal) minVal = v;
+      if (v > maxVal) maxVal = v;
+    }
+  }
+
+  // Check if all values are zero
+  if (minVal === 0 && maxVal === 0) {
+    container.style.display = 'flex';
+    container.style.flexDirection = 'column';
+    container.style.background = DARK_BG;
+    container.style.borderRadius = '8px';
+    const chartWrapper = document.createElement('div');
+    chartWrapper.style.flex = '1';
+    container.appendChild(chartWrapper);
+    const { svg, g, dims } = createSvg(chartWrapper, spec);
+    svg.style('background', 'none');
+    renderEmptyState(g, dims);
+    return;
+  }
+
+  const containerWidth = container.clientWidth || 800;
+  const containerHeight = container.clientHeight || 500;
+
+  const showLegend = containerHeight > 250 && containerWidth > 350;
+
+  const colorScale = buildColorScale(encoding.color, data, seriesField || valueField);
+
+  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);
+  }
+
+  const tooltip = createTooltip(container);
+
+  if (isHorizontal) {
+    const labels = categories;
+    const leftMargin = calculateLeftMargin(labels);
+    const { svg, g, dims } = createSvg(chartWrapper, spec, { left: leftMargin, bottom: 40, right: 30, top: 40 });
+    svg.style('background', 'none').style('border-radius', '0');
+
+    const yScale = d3.scaleBand().domain(categories).range([0, dims.innerHeight]).padding(0.2);
+
+    // Clamp group height for single/few items
+    const maxGroupHeight = Math.min(120, dims.innerHeight * 0.4);
+    const groupHeight = Math.min(yScale.bandwidth(), maxGroupHeight);
+    const groupYOffset = (yScale.bandwidth() - groupHeight) / 2;
+    const yInner = d3.scaleBand().domain(series).range([0, groupHeight]).padding(0.05);
+
+    const xScale = d3.scaleLinear().domain([Math.min(0, minVal), Math.max(0, maxVal)]).range([0, dims.innerWidth]).nice();
+
+    const xTickCount = getAdaptiveTickCount(dims.innerWidth);
+    const xAxis = g.append('g')
+      .attr('class', 'x-axis')
+      .attr('transform', `translate(0,${dims.innerHeight})`)
+      .call(d3.axisBottom(xScale).ticks(xTickCount).tickSize(-dims.innerHeight).tickPadding(8)
+        .tickFormat((d: number) => formatValue(d)));
+    styleAxis(xAxis);
+
+    const yAxis = g.append('g')
+      .attr('class', 'y-axis')
+      .call(d3.axisLeft(yScale).tickSize(0).tickPadding(10)
+        .tickFormat((d: string) => truncateLabel(d, 25)));
+    styleAxis(yAxis);
+
+    g.selectAll('.group-hover-target')
+      .data(categories)
+      .join('rect')
+      .attr('class', 'group-hover-target')
+      .attr('y', (cat: string) => yScale(cat))
+      .attr('x', 0)
+      .attr('height', yScale.bandwidth())
+      .attr('width', dims.innerWidth)
+      .attr('fill', 'transparent')
+      .attr('cursor', 'pointer')
+      .on('mouseover', function (event: MouseEvent, cat: string) {
+        g.selectAll(`.bar[data-category="${CSS.escape(cat)}"]`).attr('opacity', 0.8);
+        let html = `<strong>${cat}</strong>`;
+        series.forEach((s) => {
+          const val = pivoted[cat]?.[s] ?? 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}: ${formatValue(val)}`;
+        });
+        showTooltip(tooltip, html, event);
+      })
+      .on('mousemove', (event: MouseEvent) => {
+        positionTooltip(tooltip, event);
+      })
+      .on('mouseout', function () {
+        g.selectAll('.bar').attr('opacity', 1);
+        hideTooltip(tooltip);
+      });
+
+    for (const cat of categories) {
+      for (const s of series) {
+        const val = pivoted[cat]?.[s] ?? 0;
+        g.append('rect')
+          .attr('class', 'bar')
+          .attr('data-category', cat)
+          .attr('y', (yScale(cat) ?? 0) + groupYOffset + (yInner(s) ?? 0))
+          .attr('x', val >= 0 ? xScale(0) : xScale(val))
+          .attr('height', yInner.bandwidth())
+          .attr('width', Math.max(2, Math.abs(xScale(val) - xScale(0))))
+          .attr('fill', colorScale(s))
+          .attr('rx', 2)
+          .attr('pointer-events', 'none');
+      }
+    }
+
+    addSortControls(svg, container, spec, dims, renderGroupedBar);
+  } else {
+    const estBarWidth = (containerWidth - 130) / categories.length;
+    const willRotate = shouldRotateLabels(categories, estBarWidth);
+    const bottomMargin = calculateBottomMargin(categories, willRotate);
+    const { svg, g, dims } = createSvg(chartWrapper, spec, { bottom: bottomMargin, left: 70, right: 30, top: 40 });
+    svg.style('background', 'none').style('border-radius', '0');
+
+    const xScale = d3.scaleBand().domain(categories).range([0, dims.innerWidth]).padding(0.2);
+
+    // Clamp group width for single/few items
+    const maxGroupWidth = Math.min(120, dims.innerWidth * 0.4);
+    const groupWidth = Math.min(xScale.bandwidth(), maxGroupWidth);
+    const groupXOffset = (xScale.bandwidth() - groupWidth) / 2;
+    const xInner = d3.scaleBand().domain(series).range([0, groupWidth]).padding(0.05);
+
+    const yScale = d3.scaleLinear().domain([Math.min(0, minVal), Math.max(0, maxVal)]).range([dims.innerHeight, 0]).nice();
+
+    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);
+
+    if (willRotate) {
+      g.selectAll('.x-axis .tick text')
+        .attr('transform', 'rotate(-35)')
+        .attr('text-anchor', 'end')
+        .attr('dx', '-0.5em')
+        .attr('dy', '0.15em');
+    }
+
+    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) => formatValue(d)));
+    styleAxis(yAxis);
+
+    g.selectAll('.group-hover-target')
+      .data(categories)
+      .join('rect')
+      .attr('class', 'group-hover-target')
+      .attr('x', (cat: string) => xScale(cat))
+      .attr('y', 0)
+      .attr('width', xScale.bandwidth())
+      .attr('height', dims.innerHeight)
+      .attr('fill', 'transparent')
+      .attr('cursor', 'pointer')
+      .on('mouseover', function (event: MouseEvent, cat: string) {
+        g.selectAll(`.bar[data-category="${CSS.escape(cat)}"]`).attr('opacity', 0.8);
+        let html = `<strong>${cat}</strong>`;
+        series.forEach((s) => {
+          const val = pivoted[cat]?.[s] ?? 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}: ${formatValue(val)}`;
+        });
+        showTooltip(tooltip, html, event);
+      })
+      .on('mousemove', (event: MouseEvent) => {
+        positionTooltip(tooltip, event);
+      })
+      .on('mouseout', function () {
+        g.selectAll('.bar').attr('opacity', 1);
+        hideTooltip(tooltip);
+      });
+
+    for (const cat of categories) {
+      for (const s of series) {
+        const val = pivoted[cat]?.[s] ?? 0;
+        const barHeight = Math.max(2, Math.abs(yScale(0) - yScale(val)));
+        g.append('rect')
+          .attr('class', 'bar')
+          .attr('data-category', cat)
+          .attr('x', (xScale(cat) ?? 0) + groupXOffset + (xInner(s) ?? 0))
+          .attr('y', val >= 0 ? yScale(val) : yScale(0))
+          .attr('width', xInner.bandwidth())
+          .attr('height', barHeight)
+          .attr('fill', colorScale(s))
+          .attr('rx', 2)
+          .attr('pointer-events', 'none');
+      }
+    }
+
+    const showLabels = shouldShowValueLabels(config, xInner.bandwidth(), false);
+    if (showLabels) {
+      for (const cat of categories) {
+        for (const s of series) {
+          const val = pivoted[cat]?.[s] ?? 0;
+          const barHeight = Math.abs(yScale(0) - yScale(val));
+          const barX = (xScale(cat) ?? 0) + groupXOffset + (xInner(s) ?? 0) + xInner.bandwidth() / 2;
+          const yPos = val >= 0 ? yScale(val) : yScale(0);
+          const inside = barHeight >= 20;
+          g.append('text')
+            .attr('class', 'bar-label')
+            .attr('x', barX)
+            .attr('y', inside ? yPos + 14 : yPos - 6)
+            .attr('text-anchor', 'middle')
+            .attr('fill', inside ? '#ffffff' : TEXT_MUTED)
+            .attr('font-size', '10px')
+            .attr('font-weight', '500')
+            .attr('font-family', 'Inter, system-ui, sans-serif')
+            .attr('pointer-events', 'none')
+            .text(formatValue(val));
+        }
+      }
+    }
+
+    addSortControls(svg, container, spec, dims, renderGroupedBar);
+  }
+}
+