@twinfinity/printing 6.0.1-ci.28952-beta → 6.0.2-beta

package/src/layout/legendRender.ts

@@ -1,543 +1,543 @@
-import { LegendElement, PageSpec, StyleMap } from './types';
-import {
-    DEFAULT_LEGEND_SWATCH_WIDTH_MM,
-    DEFAULT_LEGEND_CELL_PADDING_MM,
-    DEFAULT_LEGEND_BORDER_WIDTH_MM,
-    DEFAULT_LEGEND_GRID_WIDTH_MM,
-    DEFAULT_LEGEND_HEADER_WIDTH_MM,
-    DEFAULT_LEGEND_OFFSET_MM,
-    MAX_LEGEND_ROWS
-} from './legendConstants';
-import {
-    computeLegendColumnWidths,
-    computeLegendTextYOffset,
-    parseLegendColor,
-    formatLegendValue
-} from './legendUtils';
-import { resolvePath } from './renderUtils';
-import { matchesV2Filter } from './filters';
-import { pointInPolygon } from './clipUtils';
-
-/**
- * Convert HSL to RGB for PDF compatibility.
- * H: 0-360, S: 0-100, L: 0-100
- * Returns [R, G, B] where each component is 0-255
- */
-function hslToRgb(h: number, s: number, l: number): [number, number, number] {
-    h = h / 360;
-    s = s / 100;
-    l = l / 100;
-
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-
-    const hueToRgb = (t: number): number => {
-        if (t < 0) t += 1;
-        if (t > 1) t -= 1;
-        if (t < 1 / 6) return p + (q - p) * 6 * t;
-        if (t < 1 / 2) return q;
-        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-        return p;
-    };
-
-    const r = Math.round(hueToRgb(h + 1 / 3) * 255);
-    const g = Math.round(hueToRgb(h) * 255);
-    const b = Math.round(hueToRgb(h - 1 / 3) * 255);
-
-    return [r, g, b];
-}
-
-/**
- * Generate distinct colors for legend rows.
- * Uses a predefined palette or auto-generates RGB colors (for PDF compatibility).
- */
-function generateLegendColors(count: number, palette?: 'auto' | string[]): string[] {
-    if (Array.isArray(palette)) {
-        // Use provided palette, cycling if needed
-        const colors: string[] = [];
-        for (let i = 0; i < count; i++) {
-            colors.push(palette[i % palette.length]);
-        }
-        return colors;
-    }
-
-    // Auto-generate colors using HSL then convert to RGB for PDF compatibility
-    const colors: string[] = [];
-    for (let i = 0; i < count; i++) {
-        const hue = (i * 360) / count;
-        const saturation = 65 + (i % 3) * 10;
-        const lightness = 50 + (i % 2) * 10;
-
-        // Convert to RGB for jsPDF compatibility
-        const [r, g, b] = hslToRgb(hue, saturation, lightness);
-        colors.push(`rgb(${r},${g},${b})`);
-    }
-    return colors;
-}
-
-import { isRecord, getProp } from './typeGuards';
-
-export const applyLegendFilter = (
-    legendData: unknown[],
-    legend: LegendElement,
-    viewports: unknown[],
-    viewportClipPolygonsLocal: Record<string, Array<Array<{ x: number; y: number }>>>,
-    viewportRenderInfo: Record<string, { transform?: unknown }>
-): unknown[] => {
-    // Filter by class + where
-    let rows = Array.isArray(legendData)
-        ? legendData.filter((row) => matchesV2Filter(row, legend.class, legend.where))
-        : [];
-    if (!rows.length) return rows;
-
-    if (legend.clipToViewport) {
-        const targetViewportId = legend.viewport;
-        const polys = targetViewportId ? viewportClipPolygonsLocal[targetViewportId] : null;
-        const vpInfo = targetViewportId ? viewportRenderInfo[targetViewportId] : null;
-        const t = isRecord(vpInfo) ? getProp(vpInfo, 'transform') : null;
-        if (polys && polys.length && isRecord(t)) {
-            const viewMinX = getProp(t, 'viewMinX');
-            const viewMaxZ = getProp(t, 'viewMaxZ');
-            if (typeof viewMinX === 'number' && typeof viewMaxZ === 'number') {
-                rows = rows.filter((row) => {
-                    const rowX = getProp(row, 'x');
-                    const rowZ = getProp(row, 'z');
-                    if (!Number.isFinite(rowX) || !Number.isFinite(rowZ)) return false;
-                    const viewX = Number(rowX) - viewMinX;
-                    const viewY = viewMaxZ - Number(rowZ);
-                    return polys.some((poly) => pointInPolygon(poly, viewX, viewY));
-                });
-            }
-        }
-    }
-
-    return rows;
-};
-
-export interface LegendResult {
-    svg: string;
-    colorMap?: Map<string, string>; // Maps property value to color
-}
-
-export const buildLegendGroup = (
-    legend: LegendElement,
-    styles: StyleMap | undefined,
-    page: PageSpec,
-    marginMm: number | undefined,
-    legendData: unknown[],
-    fillOpacity?: number
-): LegendResult | null => {
-    if (!legend || !legendData || !legendData.length) return null;
-
-    // Debug: Log raw input data
-    // console.log(`[LEGEND INPUT] Received ${legendData.length} items for legend "${legend.id}"`);
-    // if (legend.groupBy) {
-    //   // Count duplicates by groupBy property
-    //   const counts = new Map<string, number>();
-    //   for (const item of legendData) {
-    //     const key = String(resolvePath(item, legend.groupBy) ?? '');
-    //     counts.set(key, (counts.get(key) || 0) + 1);
-    //   }
-    //   console.log('[LEGEND INPUT] Items per group (before grouping):', Array.from(counts.entries()).map(([k, v]) => `${k}: ${v}`).join(', '));
-    // }
-
-    const pageMargin = typeof marginMm === 'number' ? marginMm : 0;
-    const fontStyle = (legend.textStyle && styles?.[legend.textStyle]) || styles?.['body'];
-    const fontSizeMm = typeof fontStyle?.fontSizeMm === 'number' ? fontStyle.fontSizeMm : 5;
-    const fontFamily = fontStyle?.fontFamily ?? 'Arial, sans-serif';
-    const fontColor = isRecord(fontStyle) ? (getProp(fontStyle, 'color') ?? '#000') : '#000';
-
-    // Show color column if enabled (but swatches will be empty if no fills configured)
-    const showColorColumn = legend.showColorColumn !== false;
-    const colorColumnWidthMm = showColorColumn ? (legend.colorColumnWidthMm ?? DEFAULT_LEGEND_SWATCH_WIDTH_MM) : 0;
-    const hasFills = fillOpacity !== undefined;
-    // console.log(`[LEGEND RENDER] fillOpacity=${fillOpacity}, hasFills=${hasFills}, showColorColumn=${showColorColumn}`);
-    const cellPaddingMm = legend.cellPaddingMm ?? DEFAULT_LEGEND_CELL_PADDING_MM;
-    const borderStrokeWidthMm = legend.borderStrokeWidthMm ?? DEFAULT_LEGEND_BORDER_WIDTH_MM;
-    const borderStrokeColor = legend.borderStrokeColor ?? '#000000';
-    const gridStrokeWidthMm = legend.gridStrokeWidthMm ?? DEFAULT_LEGEND_GRID_WIDTH_MM;
-    const gridStrokeColor = legend.gridStrokeColor ?? '#000000';
-    const headerStrokeWidthMm = legend.headerStrokeWidthMm ?? DEFAULT_LEGEND_HEADER_WIDTH_MM;
-    const headerStrokeColor = legend.headerStrokeColor ?? '#000000';
-    const anchor = legend.anchor ?? 'top-right';
-    const legendMarginMm = legend.marginMm ?? DEFAULT_LEGEND_OFFSET_MM;
-
-    // Group rows if groupBy is specified
-    let processedData = legendData;
-    if (legend.groupBy && typeof legend.groupBy === 'string') {
-        const groups = new Map<string, unknown[]>();
-
-        // Group rows by the groupBy property value
-        for (const row of legendData) {
-            const groupKey = String(resolvePath(row, legend.groupBy) ?? '');
-            if (!groups.has(groupKey)) {
-                groups.set(groupKey, []);
-            }
-            groups.get(groupKey)!.push(row);
-        }
-
-        // console.log(`[LEGEND GROUPING] Total input rows: ${legendData.length}, Groups created: ${groups.size}`);
-        // for (const [key, rows] of groups.entries()) {
-        //   if (rows.length > 1) {
-        //     console.log(`[LEGEND GROUPING] Group "${key}": ${rows.length} rows`);
-        //   }
-        // }
-
-        // Aggregate each group
-        processedData = Array.from(groups.values()).map((groupRows) => {
-            if (groupRows.length === 0) return groupRows[0];
-            if (groupRows.length === 1) return groupRows[0];
-
-            // Create aggregated row (ensure first row is object-like before spreading)
-            const firstRow = groupRows[0];
-            const aggregated: any = typeof firstRow === 'object' && firstRow !== null ? { ...(firstRow as any) } : {};
-
-            // For each column, aggregate values
-            for (const col of legend.columns) {
-                const values: any[] = [];
-                for (const row of groupRows) {
-                    const val = resolvePath(row, col.property);
-                    if (val !== undefined && val !== null) {
-                        values.push(val);
-                    }
-                }
-
-                if (values.length === 0) continue;
-
-                // Check if all values are numeric - if so, sum them
-                const allNumeric = values.every((v) => {
-                    const num = typeof v === 'number' ? v : parseFloat(String(v));
-                    return !isNaN(num) && Number.isFinite(num);
-                });
-
-                if (allNumeric) {
-                    // Sum numerical values
-                    const sum = values.reduce((acc, v) => {
-                        const num = typeof v === 'number' ? v : parseFloat(String(v));
-                        return acc + num;
-                    }, 0);
-
-                    // Debug logging for aggregation
-                    // if (groupRows.length > 1 && legend.groupBy) {
-                    //   const groupKey = resolvePath(groupRows[0], legend.groupBy);
-                    //   console.log(`[LEGEND AGGREGATION] Group "${groupKey}", Column "${col.property}":`, {
-                    //     itemCount: values.length,
-                    //     values: values,
-                    //     sum: sum
-                    //   });
-                    // }
-
-                    // Set the aggregated value in the nested property structure
-                    const pathParts = col.property.split('.');
-                    let target = aggregated;
-                    for (let i = 0; i < pathParts.length - 1; i++) {
-                        if (!target[pathParts[i]]) {
-                            target[pathParts[i]] = {};
-                        }
-                        target = target[pathParts[i]];
-                    }
-                    target[pathParts[pathParts.length - 1]] = sum;
-                }
-                // For non-numeric, keep the first value (already in aggregated from spread)
-            }
-
-            return aggregated;
-        });
-    }
-
-    // Generate colors if assignColors is enabled
-    let generatedColors: string[] | null = null;
-    let colorMap: Map<string, string> | undefined;
-
-    if (legend.assignColors?.enabled) {
-        const palette = legend.assignColors.palette ?? 'auto';
-        generatedColors = generateLegendColors(processedData.length, palette);
-        // console.log(`[LEGEND COLORS] assignColors enabled, generated ${generatedColors.length} colors`);
-
-        // Build color map based on groupBy property
-        if (legend.groupBy) {
-            colorMap = new Map();
-            for (let i = 0; i < processedData.length; i++) {
-                const row = processedData[i];
-                const groupValue = String(resolvePath(row, legend.groupBy) ?? '');
-                if (!colorMap.has(groupValue)) {
-                    colorMap.set(groupValue, generatedColors[i]);
-                    // console.log(`[LEGEND COLORS] Mapped "${groupValue}" -> ${generatedColors[i]}`);
-                }
-            }
-            // console.log(`[LEGEND COLORS] Generated ${colorMap.size} colors for groupBy="${legend.groupBy}"`);
-        } else {
-            console.warn(`[LEGEND COLORS] assignColors enabled but no groupBy property set`);
-        }
-    }
-
-    const rowsMapped = processedData.map((row: unknown, index: number) => {
-        const values = legend.columns.map((col) => {
-            const raw = resolvePath(row, col.property);
-            return formatLegendValue(raw, col.format as any);
-        });
-
-        // Use generated color if assignColors is enabled, otherwise sample from item.color
-        let swatchColor: string;
-        if (generatedColors) {
-            swatchColor = generatedColors[index];
-        } else {
-            const colorValue = getProp(row, 'color');
-            const rgba = parseLegendColor(colorValue, values[0] ?? JSON.stringify(row));
-            swatchColor = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`;
-        }
-
-        return { values, color: swatchColor };
-    });
-
-    const columnLabels = legend.columns.map((c) => ({
-        label: c.label,
-        minWidthMm: c.minWidthMm,
-        maxWidthMm: c.maxWidthMm
-    }));
-    const { colWidthsMm, columnCount } = computeLegendColumnWidths(
-        columnLabels,
-        rowsMapped,
-        fontSizeMm,
-        cellPaddingMm,
-        colorColumnWidthMm,
-        fontFamily
-    );
-
-    const rowHeightMm = fontSizeMm + cellPaddingMm * 2;
-    const headerHeightMm = rowHeightMm;
-    const tableWidthMm = colWidthsMm.reduce((sum, w) => sum + w, 0);
-
-    // Check if summary is enabled
-    const summaryEnabled = legend.summary?.enabled === true;
-    const summaryLabel = legend.summary?.label ?? 'Total';
-    const summaryRowCount = summaryEnabled ? 1 : 0;
-
-    const tableHeightMm = headerHeightMm + rowsMapped.length * rowHeightMm + summaryRowCount * rowHeightMm;
-
-    const anchorPos = legend.anchorPositionMm;
-    const hasAnchorPos =
-        anchorPos &&
-        typeof anchorPos.xMm === 'number' &&
-        Number.isFinite(anchorPos.xMm) &&
-        typeof anchorPos.yMm === 'number' &&
-        Number.isFinite(anchorPos.yMm);
-
-    let originXmm = pageMargin + legendMarginMm;
-    let originYmm = pageMargin + legendMarginMm;
-
-    if (hasAnchorPos) {
-        const { xMm, yMm } = anchorPos as { xMm: number; yMm: number };
-        switch (anchor) {
-            case 'top-left':
-                originXmm = xMm;
-                originYmm = yMm;
-                break;
-            case 'top-right':
-                originXmm = xMm - tableWidthMm;
-                originYmm = yMm;
-                break;
-            case 'bottom-left':
-                originXmm = xMm;
-                originYmm = yMm - tableHeightMm;
-                break;
-            case 'bottom-right':
-            default:
-                originXmm = xMm - tableWidthMm;
-                originYmm = yMm - tableHeightMm;
-                break;
-        }
-    } else {
-        if (anchor === 'top-right' || anchor === 'bottom-right') {
-            originXmm = page.widthMm - pageMargin - legendMarginMm - tableWidthMm;
-        }
-        if (anchor === 'bottom-right' || anchor === 'bottom-left') {
-            originYmm = page.heightMm - pageMargin - legendMarginMm - tableHeightMm;
-        }
-    }
-
-    const colXmm: number[] = [];
-    let acc = 0;
-    colWidthsMm.forEach((w) => {
-        colXmm.push(acc);
-        acc += w;
-    });
-
-    const rects: string[] = [];
-    const texts: string[] = [];
-    const lines: string[] = [];
-
-    const dataColStartIdx = showColorColumn ? 1 : 0;
-    const contentOriginXmm = originXmm + colWidthsMm[0];
-    const headerBottomYmm = originYmm + headerHeightMm;
-
-    lines.push(
-        `<line x1="${contentOriginXmm}" y1="${originYmm}" x2="${originXmm + tableWidthMm}" y2="${originYmm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
-    );
-    lines.push(
-        `<line x1="${contentOriginXmm}" y1="${originYmm}" x2="${contentOriginXmm}" y2="${headerBottomYmm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
-    );
-    // Bottom border: if summary enabled, only under numbers (not under label)
-    const bottomBorderStartX = summaryEnabled ? contentOriginXmm : originXmm;
-    lines.push(
-        `<line x1="${bottomBorderStartX}" y1="${originYmm + tableHeightMm}" x2="${originXmm + tableWidthMm}" y2="${originYmm + tableHeightMm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
-    );
-    lines.push(
-        `<line x1="${originXmm + tableWidthMm}" y1="${originYmm}" x2="${originXmm + tableWidthMm}" y2="${originYmm + tableHeightMm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
-    );
-    // Left edge - stops before summary row if summary enabled
-    const leftEdgeEndYmm = summaryEnabled
-        ? originYmm + headerHeightMm + rowsMapped.length * rowHeightMm
-        : originYmm + tableHeightMm;
-    lines.push(
-        `<line x1="${originXmm}" y1="${headerBottomYmm}" x2="${originXmm}" y2="${leftEdgeEndYmm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
-    );
-
-    // Color column divider - extends all the way down
-    lines.push(
-        `<line x1="${contentOriginXmm}" y1="${headerBottomYmm}" x2="${contentOriginXmm}" y2="${originYmm + tableHeightMm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
-    );
-
-    lines.push(
-        `<line x1="${originXmm}" y1="${originYmm + headerHeightMm}" x2="${originXmm + tableWidthMm}" y2="${originYmm + headerHeightMm}" stroke="${headerStrokeColor}" stroke-width="${headerStrokeWidthMm}" />`
-    );
-
-    for (let i = 2; i < columnCount; i++) {
-        const x = originXmm + colXmm[i];
-        lines.push(
-            `<line x1="${x}" y1="${originYmm}" x2="${x}" y2="${originYmm + tableHeightMm}" stroke="${gridStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
-        );
-    }
-
-    for (let r = 0; r <= rowsMapped.length; r++) {
-        // Skip last grid line if summary enabled (we draw a heavier separator line instead)
-        if (r === rowsMapped.length && summaryEnabled) continue;
-
-        const y = originYmm + headerHeightMm + r * rowHeightMm;
-        lines.push(
-            `<line x1="${originXmm}" y1="${y}" x2="${originXmm + tableWidthMm}" y2="${y}" stroke="${gridStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
-        );
-    }
-
-    const textYOffsetMm = computeLegendTextYOffset(fontSizeMm);
-    legend.columns.slice(0, columnCount - dataColStartIdx).forEach((col, idx) => {
-        const colStart = originXmm + colXmm[idx + dataColStartIdx];
-        const colWidth = colWidthsMm[idx + dataColStartIdx];
-        const innerPad = cellPaddingMm + gridStrokeWidthMm * 0.5;
-        const x =
-            col.align === 'center'
-                ? colStart + colWidth / 2
-                : col.align === 'right'
-                  ? colStart + colWidth - innerPad
-                  : colStart + innerPad;
-        const y = originYmm + headerHeightMm / 2 + textYOffsetMm;
-        const anchorText = col.align === 'center' ? 'middle' : col.align === 'right' ? 'end' : 'start';
-        texts.push(
-            `<text x="${x}" y="${y}" font-family="${fontFamily}" font-size="${fontSizeMm}" fill="${fontColor}" dominant-baseline="middle" text-anchor="${anchorText}">${col.label}</text>`
-        );
-    });
-
-    const swatchOpacity = typeof fillOpacity === 'number' ? Math.min(Math.max(fillOpacity, 0), 1) : 1;
-
-    rowsMapped.slice(0, MAX_LEGEND_ROWS).forEach((row, rIndex) => {
-        const yTop = originYmm + headerHeightMm + rIndex * rowHeightMm;
-
-        if (showColorColumn) {
-            // Only show fill colors if the viewport has fills configured
-            if (hasFills) {
-                // row.color can be either a CSS color string (from generated colors) or RGB string
-                const swatchFill = row.color; // Already a CSS color string
-                const opacityAttr = swatchOpacity < 1 ? ` fill-opacity="${swatchOpacity.toFixed(3)}"` : '';
-                rects.push(
-                    `<rect x="${originXmm + colXmm[0]}" y="${yTop}" width="${colWidthsMm[0]}" height="${rowHeightMm}" fill="${swatchFill}"${opacityAttr} stroke="none" />`
-                );
-            } else {
-                // Empty swatch when no fills configured - just the border cell
-                rects.push(
-                    `<rect x="${originXmm + colXmm[0]}" y="${yTop}" width="${colWidthsMm[0]}" height="${rowHeightMm}" fill="none" stroke="none" />`
-                );
-            }
-        }
-
-        legend.columns.slice(0, columnCount - dataColStartIdx).forEach((col, cIdx) => {
-            const text = row.values[cIdx] ?? '';
-            if (!text) return;
-            const colStart = originXmm + colXmm[cIdx + dataColStartIdx];
-            const colWidth = colWidthsMm[cIdx + dataColStartIdx];
-            const innerPad = cellPaddingMm + gridStrokeWidthMm * 0.5;
-            const x =
-                col.align === 'center'
-                    ? colStart + colWidth / 2
-                    : col.align === 'right'
-                      ? colStart + colWidth - innerPad
-                      : colStart + innerPad;
-            const y = yTop + rowHeightMm / 2 + textYOffsetMm;
-            const anchorText = col.align === 'center' ? 'middle' : col.align === 'right' ? 'end' : 'start';
-            texts.push(
-                `<text x="${x}" y="${y}" font-family="${fontFamily}" font-size="${fontSizeMm}" fill="${fontColor}" dominant-baseline="middle" text-anchor="${anchorText}">${text}</text>`
-            );
-        });
-    });
-
-    // Render summary row (if enabled)
-    if (summaryEnabled) {
-        const summaryRowIndex = rowsMapped.length;
-        const yTop = originYmm + headerHeightMm + summaryRowIndex * rowHeightMm;
-
-        // Calculate summary values for columns with summary: true
-        const summaryValues = legend.columns.map((col) => {
-            if (!col.summary) return '';
-
-            // Sum all numerical values in this column (use processedData to reflect grouping)
-            let sum = 0;
-            let hasValues = false;
-            for (const dataRow of processedData) {
-                const rawValue = resolvePath(dataRow, col.property);
-                const numValue = typeof rawValue === 'number' ? rawValue : parseFloat(String(rawValue));
-                if (!isNaN(numValue) && Number.isFinite(numValue)) {
-                    sum += numValue;
-                    hasValues = true;
-                }
-            }
-
-            // Format the sum using the column's format settings
-            return hasValues ? formatLegendValue(sum, col.format as any) : '';
-        });
-
-        // Add heavier border line above summary row
-        lines.push(
-            `<line x1="${originXmm}" y1="${yTop}" x2="${originXmm + tableWidthMm}" y2="${yTop}" stroke="${headerStrokeColor}" stroke-width="${headerStrokeWidthMm}" />`
-        );
-
-        // Render summary label aligned with first data column
-        const innerPad = cellPaddingMm + gridStrokeWidthMm * 0.5;
-        const labelX = contentOriginXmm + innerPad;
-        const labelY = yTop + rowHeightMm / 2 + textYOffsetMm;
-        texts.push(
-            `<text x="${labelX}" y="${labelY}" font-family="${fontFamily}" font-size="${fontSizeMm}" fill="${fontColor}" font-weight="bold" dominant-baseline="middle" text-anchor="start">${summaryLabel}</text>`
-        );
-
-        // Render summary values for other columns
-        legend.columns.slice(1, columnCount - dataColStartIdx).forEach((col, cIdx) => {
-            const summaryText = summaryValues[cIdx + 1] ?? '';
-            if (!summaryText) return;
-
-            const colStart = originXmm + colXmm[cIdx + dataColStartIdx + 1];
-            const colWidth = colWidthsMm[cIdx + dataColStartIdx + 1];
-            const x =
-                col.align === 'center'
-                    ? colStart + colWidth / 2
-                    : col.align === 'right'
-                      ? colStart + colWidth - innerPad
-                      : colStart + innerPad;
-            const y = yTop + rowHeightMm / 2 + textYOffsetMm;
-            const anchorText = col.align === 'center' ? 'middle' : col.align === 'right' ? 'end' : 'start';
-            texts.push(
-                `<text x="${x}" y="${y}" font-family="${fontFamily}" font-size="${fontSizeMm}" fill="${fontColor}" font-weight="bold" dominant-baseline="middle" text-anchor="${anchorText}">${summaryText}</text>`
-            );
-        });
-    }
-
-    const svg = [`<g id="legend">`, ...rects, ...lines, ...texts, `</g>`].join('');
-    return { svg, colorMap };
-};
+import { LegendElement, PageSpec, StyleMap } from './types';
+import {
+    DEFAULT_LEGEND_SWATCH_WIDTH_MM,
+    DEFAULT_LEGEND_CELL_PADDING_MM,
+    DEFAULT_LEGEND_BORDER_WIDTH_MM,
+    DEFAULT_LEGEND_GRID_WIDTH_MM,
+    DEFAULT_LEGEND_HEADER_WIDTH_MM,
+    DEFAULT_LEGEND_OFFSET_MM,
+    MAX_LEGEND_ROWS
+} from './legendConstants';
+import {
+    computeLegendColumnWidths,
+    computeLegendTextYOffset,
+    parseLegendColor,
+    formatLegendValue
+} from './legendUtils';
+import { resolvePath } from './renderUtils';
+import { matchesV2Filter } from './filters';
+import { pointInPolygon } from './clipUtils';
+
+/**
+ * Convert HSL to RGB for PDF compatibility.
+ * H: 0-360, S: 0-100, L: 0-100
+ * Returns [R, G, B] where each component is 0-255
+ */
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+    h = h / 360;
+    s = s / 100;
+    l = l / 100;
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+
+    const hueToRgb = (t: number): number => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+
+    const r = Math.round(hueToRgb(h + 1 / 3) * 255);
+    const g = Math.round(hueToRgb(h) * 255);
+    const b = Math.round(hueToRgb(h - 1 / 3) * 255);
+
+    return [r, g, b];
+}
+
+/**
+ * Generate distinct colors for legend rows.
+ * Uses a predefined palette or auto-generates RGB colors (for PDF compatibility).
+ */
+function generateLegendColors(count: number, palette?: 'auto' | string[]): string[] {
+    if (Array.isArray(palette)) {
+        // Use provided palette, cycling if needed
+        const colors: string[] = [];
+        for (let i = 0; i < count; i++) {
+            colors.push(palette[i % palette.length]);
+        }
+        return colors;
+    }
+
+    // Auto-generate colors using HSL then convert to RGB for PDF compatibility
+    const colors: string[] = [];
+    for (let i = 0; i < count; i++) {
+        const hue = (i * 360) / count;
+        const saturation = 65 + (i % 3) * 10;
+        const lightness = 50 + (i % 2) * 10;
+
+        // Convert to RGB for jsPDF compatibility
+        const [r, g, b] = hslToRgb(hue, saturation, lightness);
+        colors.push(`rgb(${r},${g},${b})`);
+    }
+    return colors;
+}
+
+import { isRecord, getProp } from './typeGuards';
+
+export const applyLegendFilter = (
+    legendData: unknown[],
+    legend: LegendElement,
+    viewports: unknown[],
+    viewportClipPolygonsLocal: Record<string, Array<Array<{ x: number; y: number }>>>,
+    viewportRenderInfo: Record<string, { transform?: unknown }>
+): unknown[] => {
+    // Filter by class + where
+    let rows = Array.isArray(legendData)
+        ? legendData.filter((row) => matchesV2Filter(row, legend.class, legend.where))
+        : [];
+    if (!rows.length) return rows;
+
+    if (legend.clipToViewport) {
+        const targetViewportId = legend.viewport;
+        const polys = targetViewportId ? viewportClipPolygonsLocal[targetViewportId] : null;
+        const vpInfo = targetViewportId ? viewportRenderInfo[targetViewportId] : null;
+        const t = isRecord(vpInfo) ? getProp(vpInfo, 'transform') : null;
+        if (polys && polys.length && isRecord(t)) {
+            const viewMinX = getProp(t, 'viewMinX');
+            const viewMaxZ = getProp(t, 'viewMaxZ');
+            if (typeof viewMinX === 'number' && typeof viewMaxZ === 'number') {
+                rows = rows.filter((row) => {
+                    const rowX = getProp(row, 'x');
+                    const rowZ = getProp(row, 'z');
+                    if (!Number.isFinite(rowX) || !Number.isFinite(rowZ)) return false;
+                    const viewX = Number(rowX) - viewMinX;
+                    const viewY = viewMaxZ - Number(rowZ);
+                    return polys.some((poly) => pointInPolygon(poly, viewX, viewY));
+                });
+            }
+        }
+    }
+
+    return rows;
+};
+
+export interface LegendResult {
+    svg: string;
+    colorMap?: Map<string, string>; // Maps property value to color
+}
+
+export const buildLegendGroup = (
+    legend: LegendElement,
+    styles: StyleMap | undefined,
+    page: PageSpec,
+    marginMm: number | undefined,
+    legendData: unknown[],
+    fillOpacity?: number
+): LegendResult | null => {
+    if (!legend || !legendData || !legendData.length) return null;
+
+    // Debug: Log raw input data
+    // console.log(`[LEGEND INPUT] Received ${legendData.length} items for legend "${legend.id}"`);
+    // if (legend.groupBy) {
+    //   // Count duplicates by groupBy property
+    //   const counts = new Map<string, number>();
+    //   for (const item of legendData) {
+    //     const key = String(resolvePath(item, legend.groupBy) ?? '');
+    //     counts.set(key, (counts.get(key) || 0) + 1);
+    //   }
+    //   console.log('[LEGEND INPUT] Items per group (before grouping):', Array.from(counts.entries()).map(([k, v]) => `${k}: ${v}`).join(', '));
+    // }
+
+    const pageMargin = typeof marginMm === 'number' ? marginMm : 0;
+    const fontStyle = (legend.textStyle && styles?.[legend.textStyle]) || styles?.['body'];
+    const fontSizeMm = typeof fontStyle?.fontSizeMm === 'number' ? fontStyle.fontSizeMm : 5;
+    const fontFamily = fontStyle?.fontFamily ?? 'Arial, sans-serif';
+    const fontColor = isRecord(fontStyle) ? (getProp(fontStyle, 'color') ?? '#000') : '#000';
+
+    // Show color column if enabled (but swatches will be empty if no fills configured)
+    const showColorColumn = legend.showColorColumn !== false;
+    const colorColumnWidthMm = showColorColumn ? (legend.colorColumnWidthMm ?? DEFAULT_LEGEND_SWATCH_WIDTH_MM) : 0;
+    const hasFills = fillOpacity !== undefined;
+    // console.log(`[LEGEND RENDER] fillOpacity=${fillOpacity}, hasFills=${hasFills}, showColorColumn=${showColorColumn}`);
+    const cellPaddingMm = legend.cellPaddingMm ?? DEFAULT_LEGEND_CELL_PADDING_MM;
+    const borderStrokeWidthMm = legend.borderStrokeWidthMm ?? DEFAULT_LEGEND_BORDER_WIDTH_MM;
+    const borderStrokeColor = legend.borderStrokeColor ?? '#000000';
+    const gridStrokeWidthMm = legend.gridStrokeWidthMm ?? DEFAULT_LEGEND_GRID_WIDTH_MM;
+    const gridStrokeColor = legend.gridStrokeColor ?? '#000000';
+    const headerStrokeWidthMm = legend.headerStrokeWidthMm ?? DEFAULT_LEGEND_HEADER_WIDTH_MM;
+    const headerStrokeColor = legend.headerStrokeColor ?? '#000000';
+    const anchor = legend.anchor ?? 'top-right';
+    const legendMarginMm = legend.marginMm ?? DEFAULT_LEGEND_OFFSET_MM;
+
+    // Group rows if groupBy is specified
+    let processedData = legendData;
+    if (legend.groupBy && typeof legend.groupBy === 'string') {
+        const groups = new Map<string, unknown[]>();
+
+        // Group rows by the groupBy property value
+        for (const row of legendData) {
+            const groupKey = String(resolvePath(row, legend.groupBy) ?? '');
+            if (!groups.has(groupKey)) {
+                groups.set(groupKey, []);
+            }
+            groups.get(groupKey)!.push(row);
+        }
+
+        // console.log(`[LEGEND GROUPING] Total input rows: ${legendData.length}, Groups created: ${groups.size}`);
+        // for (const [key, rows] of groups.entries()) {
+        //   if (rows.length > 1) {
+        //     console.log(`[LEGEND GROUPING] Group "${key}": ${rows.length} rows`);
+        //   }
+        // }
+
+        // Aggregate each group
+        processedData = Array.from(groups.values()).map((groupRows) => {
+            if (groupRows.length === 0) return groupRows[0];
+            if (groupRows.length === 1) return groupRows[0];
+
+            // Create aggregated row (ensure first row is object-like before spreading)
+            const firstRow = groupRows[0];
+            const aggregated: any = typeof firstRow === 'object' && firstRow !== null ? { ...(firstRow as any) } : {};
+
+            // For each column, aggregate values
+            for (const col of legend.columns) {
+                const values: any[] = [];
+                for (const row of groupRows) {
+                    const val = resolvePath(row, col.property);
+                    if (val !== undefined && val !== null) {
+                        values.push(val);
+                    }
+                }
+
+                if (values.length === 0) continue;
+
+                // Check if all values are numeric - if so, sum them
+                const allNumeric = values.every((v) => {
+                    const num = typeof v === 'number' ? v : parseFloat(String(v));
+                    return !isNaN(num) && Number.isFinite(num);
+                });
+
+                if (allNumeric) {
+                    // Sum numerical values
+                    const sum = values.reduce((acc, v) => {
+                        const num = typeof v === 'number' ? v : parseFloat(String(v));
+                        return acc + num;
+                    }, 0);
+
+                    // Debug logging for aggregation
+                    // if (groupRows.length > 1 && legend.groupBy) {
+                    //   const groupKey = resolvePath(groupRows[0], legend.groupBy);
+                    //   console.log(`[LEGEND AGGREGATION] Group "${groupKey}", Column "${col.property}":`, {
+                    //     itemCount: values.length,
+                    //     values: values,
+                    //     sum: sum
+                    //   });
+                    // }
+
+                    // Set the aggregated value in the nested property structure
+                    const pathParts = col.property.split('.');
+                    let target = aggregated;
+                    for (let i = 0; i < pathParts.length - 1; i++) {
+                        if (!target[pathParts[i]]) {
+                            target[pathParts[i]] = {};
+                        }
+                        target = target[pathParts[i]];
+                    }
+                    target[pathParts[pathParts.length - 1]] = sum;
+                }
+                // For non-numeric, keep the first value (already in aggregated from spread)
+            }
+
+            return aggregated;
+        });
+    }
+
+    // Generate colors if assignColors is enabled
+    let generatedColors: string[] | null = null;
+    let colorMap: Map<string, string> | undefined;
+
+    if (legend.assignColors?.enabled) {
+        const palette = legend.assignColors.palette ?? 'auto';
+        generatedColors = generateLegendColors(processedData.length, palette);
+        // console.log(`[LEGEND COLORS] assignColors enabled, generated ${generatedColors.length} colors`);
+
+        // Build color map based on groupBy property
+        if (legend.groupBy) {
+            colorMap = new Map();
+            for (let i = 0; i < processedData.length; i++) {
+                const row = processedData[i];
+                const groupValue = String(resolvePath(row, legend.groupBy) ?? '');
+                if (!colorMap.has(groupValue)) {
+                    colorMap.set(groupValue, generatedColors[i]);
+                    // console.log(`[LEGEND COLORS] Mapped "${groupValue}" -> ${generatedColors[i]}`);
+                }
+            }
+            // console.log(`[LEGEND COLORS] Generated ${colorMap.size} colors for groupBy="${legend.groupBy}"`);
+        } else {
+            console.warn(`[LEGEND COLORS] assignColors enabled but no groupBy property set`);
+        }
+    }
+
+    const rowsMapped = processedData.map((row: unknown, index: number) => {
+        const values = legend.columns.map((col) => {
+            const raw = resolvePath(row, col.property);
+            return formatLegendValue(raw, col.format as any);
+        });
+
+        // Use generated color if assignColors is enabled, otherwise sample from item.color
+        let swatchColor: string;
+        if (generatedColors) {
+            swatchColor = generatedColors[index];
+        } else {
+            const colorValue = getProp(row, 'color');
+            const rgba = parseLegendColor(colorValue, values[0] ?? JSON.stringify(row));
+            swatchColor = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`;
+        }
+
+        return { values, color: swatchColor };
+    });
+
+    const columnLabels = legend.columns.map((c) => ({
+        label: c.label,
+        minWidthMm: c.minWidthMm,
+        maxWidthMm: c.maxWidthMm
+    }));
+    const { colWidthsMm, columnCount } = computeLegendColumnWidths(
+        columnLabels,
+        rowsMapped,
+        fontSizeMm,
+        cellPaddingMm,
+        colorColumnWidthMm,
+        fontFamily
+    );
+
+    const rowHeightMm = fontSizeMm + cellPaddingMm * 2;
+    const headerHeightMm = rowHeightMm;
+    const tableWidthMm = colWidthsMm.reduce((sum, w) => sum + w, 0);
+
+    // Check if summary is enabled
+    const summaryEnabled = legend.summary?.enabled === true;
+    const summaryLabel = legend.summary?.label ?? 'Total';
+    const summaryRowCount = summaryEnabled ? 1 : 0;
+
+    const tableHeightMm = headerHeightMm + rowsMapped.length * rowHeightMm + summaryRowCount * rowHeightMm;
+
+    const anchorPos = legend.anchorPositionMm;
+    const hasAnchorPos =
+        anchorPos &&
+        typeof anchorPos.xMm === 'number' &&
+        Number.isFinite(anchorPos.xMm) &&
+        typeof anchorPos.yMm === 'number' &&
+        Number.isFinite(anchorPos.yMm);
+
+    let originXmm = pageMargin + legendMarginMm;
+    let originYmm = pageMargin + legendMarginMm;
+
+    if (hasAnchorPos) {
+        const { xMm, yMm } = anchorPos as { xMm: number; yMm: number };
+        switch (anchor) {
+            case 'top-left':
+                originXmm = xMm;
+                originYmm = yMm;
+                break;
+            case 'top-right':
+                originXmm = xMm - tableWidthMm;
+                originYmm = yMm;
+                break;
+            case 'bottom-left':
+                originXmm = xMm;
+                originYmm = yMm - tableHeightMm;
+                break;
+            case 'bottom-right':
+            default:
+                originXmm = xMm - tableWidthMm;
+                originYmm = yMm - tableHeightMm;
+                break;
+        }
+    } else {
+        if (anchor === 'top-right' || anchor === 'bottom-right') {
+            originXmm = page.widthMm - pageMargin - legendMarginMm - tableWidthMm;
+        }
+        if (anchor === 'bottom-right' || anchor === 'bottom-left') {
+            originYmm = page.heightMm - pageMargin - legendMarginMm - tableHeightMm;
+        }
+    }
+
+    const colXmm: number[] = [];
+    let acc = 0;
+    colWidthsMm.forEach((w) => {
+        colXmm.push(acc);
+        acc += w;
+    });
+
+    const rects: string[] = [];
+    const texts: string[] = [];
+    const lines: string[] = [];
+
+    const dataColStartIdx = showColorColumn ? 1 : 0;
+    const contentOriginXmm = originXmm + colWidthsMm[0];
+    const headerBottomYmm = originYmm + headerHeightMm;
+
+    lines.push(
+        `<line x1="${contentOriginXmm}" y1="${originYmm}" x2="${originXmm + tableWidthMm}" y2="${originYmm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
+    );
+    lines.push(
+        `<line x1="${contentOriginXmm}" y1="${originYmm}" x2="${contentOriginXmm}" y2="${headerBottomYmm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
+    );
+    // Bottom border: if summary enabled, only under numbers (not under label)
+    const bottomBorderStartX = summaryEnabled ? contentOriginXmm : originXmm;
+    lines.push(
+        `<line x1="${bottomBorderStartX}" y1="${originYmm + tableHeightMm}" x2="${originXmm + tableWidthMm}" y2="${originYmm + tableHeightMm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
+    );
+    lines.push(
+        `<line x1="${originXmm + tableWidthMm}" y1="${originYmm}" x2="${originXmm + tableWidthMm}" y2="${originYmm + tableHeightMm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
+    );
+    // Left edge - stops before summary row if summary enabled
+    const leftEdgeEndYmm = summaryEnabled
+        ? originYmm + headerHeightMm + rowsMapped.length * rowHeightMm
+        : originYmm + tableHeightMm;
+    lines.push(
+        `<line x1="${originXmm}" y1="${headerBottomYmm}" x2="${originXmm}" y2="${leftEdgeEndYmm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
+    );
+
+    // Color column divider - extends all the way down
+    lines.push(
+        `<line x1="${contentOriginXmm}" y1="${headerBottomYmm}" x2="${contentOriginXmm}" y2="${originYmm + tableHeightMm}" stroke="${borderStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
+    );
+
+    lines.push(
+        `<line x1="${originXmm}" y1="${originYmm + headerHeightMm}" x2="${originXmm + tableWidthMm}" y2="${originYmm + headerHeightMm}" stroke="${headerStrokeColor}" stroke-width="${headerStrokeWidthMm}" />`
+    );
+
+    for (let i = 2; i < columnCount; i++) {
+        const x = originXmm + colXmm[i];
+        lines.push(
+            `<line x1="${x}" y1="${originYmm}" x2="${x}" y2="${originYmm + tableHeightMm}" stroke="${gridStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
+        );
+    }
+
+    for (let r = 0; r <= rowsMapped.length; r++) {
+        // Skip last grid line if summary enabled (we draw a heavier separator line instead)
+        if (r === rowsMapped.length && summaryEnabled) continue;
+
+        const y = originYmm + headerHeightMm + r * rowHeightMm;
+        lines.push(
+            `<line x1="${originXmm}" y1="${y}" x2="${originXmm + tableWidthMm}" y2="${y}" stroke="${gridStrokeColor}" stroke-width="${borderStrokeWidthMm}" />`
+        );
+    }
+
+    const textYOffsetMm = computeLegendTextYOffset(fontSizeMm);
+    legend.columns.slice(0, columnCount - dataColStartIdx).forEach((col, idx) => {
+        const colStart = originXmm + colXmm[idx + dataColStartIdx];
+        const colWidth = colWidthsMm[idx + dataColStartIdx];
+        const innerPad = cellPaddingMm + gridStrokeWidthMm * 0.5;
+        const x =
+            col.align === 'center'
+                ? colStart + colWidth / 2
+                : col.align === 'right'
+                  ? colStart + colWidth - innerPad
+                  : colStart + innerPad;
+        const y = originYmm + headerHeightMm / 2 + textYOffsetMm;
+        const anchorText = col.align === 'center' ? 'middle' : col.align === 'right' ? 'end' : 'start';
+        texts.push(
+            `<text x="${x}" y="${y}" font-family="${fontFamily}" font-size="${fontSizeMm}" fill="${fontColor}" dominant-baseline="middle" text-anchor="${anchorText}">${col.label}</text>`
+        );
+    });
+
+    const swatchOpacity = typeof fillOpacity === 'number' ? Math.min(Math.max(fillOpacity, 0), 1) : 1;
+
+    rowsMapped.slice(0, MAX_LEGEND_ROWS).forEach((row, rIndex) => {
+        const yTop = originYmm + headerHeightMm + rIndex * rowHeightMm;
+
+        if (showColorColumn) {
+            // Only show fill colors if the viewport has fills configured
+            if (hasFills) {
+                // row.color can be either a CSS color string (from generated colors) or RGB string
+                const swatchFill = row.color; // Already a CSS color string
+                const opacityAttr = swatchOpacity < 1 ? ` fill-opacity="${swatchOpacity.toFixed(3)}"` : '';
+                rects.push(
+                    `<rect x="${originXmm + colXmm[0]}" y="${yTop}" width="${colWidthsMm[0]}" height="${rowHeightMm}" fill="${swatchFill}"${opacityAttr} stroke="none" />`
+                );
+            } else {
+                // Empty swatch when no fills configured - just the border cell
+                rects.push(
+                    `<rect x="${originXmm + colXmm[0]}" y="${yTop}" width="${colWidthsMm[0]}" height="${rowHeightMm}" fill="none" stroke="none" />`
+                );
+            }
+        }
+
+        legend.columns.slice(0, columnCount - dataColStartIdx).forEach((col, cIdx) => {
+            const text = row.values[cIdx] ?? '';
+            if (!text) return;
+            const colStart = originXmm + colXmm[cIdx + dataColStartIdx];
+            const colWidth = colWidthsMm[cIdx + dataColStartIdx];
+            const innerPad = cellPaddingMm + gridStrokeWidthMm * 0.5;
+            const x =
+                col.align === 'center'
+                    ? colStart + colWidth / 2
+                    : col.align === 'right'
+                      ? colStart + colWidth - innerPad
+                      : colStart + innerPad;
+            const y = yTop + rowHeightMm / 2 + textYOffsetMm;
+            const anchorText = col.align === 'center' ? 'middle' : col.align === 'right' ? 'end' : 'start';
+            texts.push(
+                `<text x="${x}" y="${y}" font-family="${fontFamily}" font-size="${fontSizeMm}" fill="${fontColor}" dominant-baseline="middle" text-anchor="${anchorText}">${text}</text>`
+            );
+        });
+    });
+
+    // Render summary row (if enabled)
+    if (summaryEnabled) {
+        const summaryRowIndex = rowsMapped.length;
+        const yTop = originYmm + headerHeightMm + summaryRowIndex * rowHeightMm;
+
+        // Calculate summary values for columns with summary: true
+        const summaryValues = legend.columns.map((col) => {
+            if (!col.summary) return '';
+
+            // Sum all numerical values in this column (use processedData to reflect grouping)
+            let sum = 0;
+            let hasValues = false;
+            for (const dataRow of processedData) {
+                const rawValue = resolvePath(dataRow, col.property);
+                const numValue = typeof rawValue === 'number' ? rawValue : parseFloat(String(rawValue));
+                if (!isNaN(numValue) && Number.isFinite(numValue)) {
+                    sum += numValue;
+                    hasValues = true;
+                }
+            }
+
+            // Format the sum using the column's format settings
+            return hasValues ? formatLegendValue(sum, col.format as any) : '';
+        });
+
+        // Add heavier border line above summary row
+        lines.push(
+            `<line x1="${originXmm}" y1="${yTop}" x2="${originXmm + tableWidthMm}" y2="${yTop}" stroke="${headerStrokeColor}" stroke-width="${headerStrokeWidthMm}" />`
+        );
+
+        // Render summary label aligned with first data column
+        const innerPad = cellPaddingMm + gridStrokeWidthMm * 0.5;
+        const labelX = contentOriginXmm + innerPad;
+        const labelY = yTop + rowHeightMm / 2 + textYOffsetMm;
+        texts.push(
+            `<text x="${labelX}" y="${labelY}" font-family="${fontFamily}" font-size="${fontSizeMm}" fill="${fontColor}" font-weight="bold" dominant-baseline="middle" text-anchor="start">${summaryLabel}</text>`
+        );
+
+        // Render summary values for other columns
+        legend.columns.slice(1, columnCount - dataColStartIdx).forEach((col, cIdx) => {
+            const summaryText = summaryValues[cIdx + 1] ?? '';
+            if (!summaryText) return;
+
+            const colStart = originXmm + colXmm[cIdx + dataColStartIdx + 1];
+            const colWidth = colWidthsMm[cIdx + dataColStartIdx + 1];
+            const x =
+                col.align === 'center'
+                    ? colStart + colWidth / 2
+                    : col.align === 'right'
+                      ? colStart + colWidth - innerPad
+                      : colStart + innerPad;
+            const y = yTop + rowHeightMm / 2 + textYOffsetMm;
+            const anchorText = col.align === 'center' ? 'middle' : col.align === 'right' ? 'end' : 'start';
+            texts.push(
+                `<text x="${x}" y="${y}" font-family="${fontFamily}" font-size="${fontSizeMm}" fill="${fontColor}" font-weight="bold" dominant-baseline="middle" text-anchor="${anchorText}">${summaryText}</text>`
+            );
+        });
+    }
+
+    const svg = [`<g id="legend">`, ...rects, ...lines, ...texts, `</g>`].join('');
+    return { svg, colorMap };
+};