@outsidedata/dolex 0.1.0

package/dist/src/renderers/d3/composition/marimekko.d.ts

@@ -0,0 +1,3 @@
+import type { VisualizationSpec } from '../../../types.js';
+export declare function renderMarimekko(container: HTMLElement, spec: VisualizationSpec): void;
+//# sourceMappingURL=marimekko.d.ts.map

package/dist/src/renderers/d3/composition/marimekko.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marimekko.d.ts","sourceRoot":"","sources":["../../../../../src/renderers/d3/composition/marimekko.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AA0C3D,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,GAAG,IAAI,CA6QrF"}

package/dist/src/renderers/d3/composition/marimekko.js

@@ -0,0 +1,229 @@
+import { createSvg, buildColorScale, addSortControls, createTooltip, showTooltip, hideTooltip, positionTooltip, createLegend, formatValue, truncateLabel, contrastText, renderEmptyState, isAllZeros, DARK_BG, TEXT_MUTED, AXIS_COLOR, } from '../shared.js';
+export function renderMarimekko(container, spec) {
+    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 showLabels = config.showLabels !== false;
+    const showPercentages = config.showPercentages !== false;
+    const containerWidth = container.clientWidth || 800;
+    const containerHeight = container.clientHeight || 500;
+    const showLegend = containerHeight > 200 && containerWidth > 250;
+    const colorScale = buildColorScale(encoding.color, data);
+    const secondaryKeys = [...new Set(data.map((d) => String(d[seriesField])))];
+    let primaryKeys = [...new Set(data.map((d) => String(d[categoryField])))];
+    const columnTotals = {};
+    primaryKeys.forEach((pk) => {
+        columnTotals[pk] = 0;
+        data.forEach((d) => {
+            if (String(d[categoryField]) === pk) {
+                columnTotals[pk] += Math.abs(Number(d[valueField])) || 0;
+            }
+        });
+    });
+    if (config.sortBy === 'value') {
+        const order = config.sortOrder === 'ascending' ? 1 : -1;
+        primaryKeys.sort((a, b) => order * (columnTotals[a] - columnTotals[b]));
+    }
+    else if (config.sortBy === 'category') {
+        const order = config.sortOrder === 'ascending' ? 1 : -1;
+        primaryKeys.sort((a, b) => order * a.localeCompare(b, undefined, { sensitivity: 'base', numeric: true }));
+    }
+    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 = null;
+    if (showLegend) {
+        legendDiv = createLegend(colorScale);
+        container.appendChild(legendDiv);
+    }
+    const { svg, g, dims } = createSvg(chartWrapper, spec, {
+        bottom: 50,
+        left: 20,
+        right: 30,
+        top: 40,
+    });
+    svg.style('background', 'none').style('border-radius', '0');
+    const tooltip = createTooltip(container);
+    // Check if all values are zero
+    if (isAllZeros(data, valueField)) {
+        renderEmptyState(g, dims);
+        return;
+    }
+    const grandTotal = data.reduce((s, d) => s + (Math.abs(Number(d[valueField])) || 0), 0);
+    if (grandTotal === 0 || primaryKeys.length === 0 || secondaryKeys.length === 0) {
+        g.append('text')
+            .attr('x', dims.innerWidth / 2)
+            .attr('y', dims.innerHeight / 2)
+            .attr('text-anchor', 'middle')
+            .attr('fill', TEXT_MUTED)
+            .attr('font-size', '13px')
+            .attr('font-family', 'Inter, system-ui, sans-serif')
+            .text('No data to display');
+        return;
+    }
+    const gap = Math.max(1, Math.min(3, dims.innerWidth / primaryKeys.length * 0.03));
+    const totalGaps = gap * (primaryKeys.length - 1);
+    const availableWidth = dims.innerWidth - totalGaps;
+    const columns = [];
+    let currentX = 0;
+    primaryKeys.forEach((pk, i) => {
+        const colTotal = columnTotals[pk];
+        const colWidth = grandTotal > 0 ? (colTotal / grandTotal) * availableWidth : availableWidth / primaryKeys.length;
+        const segments = [];
+        let currentY = 0;
+        secondaryKeys.forEach((sk) => {
+            const row = data.find((d) => String(d[categoryField]) === pk && String(d[seriesField]) === sk);
+            const val = row ? Math.abs(Number(row[valueField])) || 0 : 0;
+            if (val === 0) {
+                segments.push({
+                    primaryKey: pk, secondaryKey: sk, value: 0,
+                    x: currentX, y: currentY, width: colWidth, height: 0,
+                    pctOfColumn: 0, pctOfTotal: 0,
+                });
+                return;
+            }
+            const segHeight = colTotal > 0 ? (val / colTotal) * dims.innerHeight : 0;
+            segments.push({
+                primaryKey: pk, secondaryKey: sk, value: val,
+                x: currentX, y: currentY, width: colWidth, height: segHeight,
+                pctOfColumn: colTotal > 0 ? (val / colTotal) * 100 : 0,
+                pctOfTotal: grandTotal > 0 ? (val / grandTotal) * 100 : 0,
+            });
+            currentY += segHeight;
+        });
+        columns.push({ primaryKey: pk, total: colTotal, x: currentX, width: colWidth, segments });
+        currentX += colWidth + (i < primaryKeys.length - 1 ? gap : 0);
+    });
+    const allSegments = columns.flatMap((col) => col.segments.filter((s) => s.height > 0));
+    g.selectAll('.col-hover-target')
+        .data(columns)
+        .join('rect')
+        .attr('class', 'col-hover-target')
+        .attr('x', (d) => d.x)
+        .attr('y', 0)
+        .attr('width', (d) => Math.max(0, d.width))
+        .attr('height', dims.innerHeight)
+        .attr('fill', 'transparent')
+        .attr('cursor', 'pointer')
+        .on('mouseover', function (event, d) {
+        g.selectAll('.mekko-segment').attr('opacity', (s) => s.primaryKey === d.primaryKey ? 1 : 0.3);
+        const colPct = grandTotal > 0 ? ((d.total / grandTotal) * 100).toFixed(1) : '0.0';
+        let html = `<strong>${d.primaryKey}</strong>`;
+        html += `<br/><span style="color:${TEXT_MUTED};font-size:11px">Column total: ${formatValue(d.total)} (${colPct}%)</span>`;
+        d.segments.filter(s => s.value > 0).forEach((seg) => {
+            const swatch = `<span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:${colorScale(seg.secondaryKey)};margin-right:4px"></span>`;
+            html += `<br/>${swatch}${seg.secondaryKey}: ${formatValue(seg.value)} (${seg.pctOfColumn.toFixed(0)}%)`;
+        });
+        showTooltip(tooltip, html, event);
+    })
+        .on('mousemove', (event) => {
+        positionTooltip(tooltip, event);
+    })
+        .on('mouseout', function () {
+        g.selectAll('.mekko-segment').attr('opacity', 1);
+        hideTooltip(tooltip);
+    });
+    g.selectAll('.mekko-segment')
+        .data(allSegments)
+        .join('rect')
+        .attr('class', 'mekko-segment')
+        .attr('x', (d) => d.x)
+        .attr('y', (d) => d.y)
+        .attr('width', (d) => Math.max(0, d.width))
+        .attr('height', (d) => Math.max(0, d.height))
+        .attr('fill', (d) => colorScale(d.secondaryKey))
+        .attr('stroke', DARK_BG)
+        .attr('stroke-width', 1)
+        .attr('pointer-events', 'none');
+    const isSmall = dims.innerWidth < 350 || dims.innerHeight < 300;
+    if ((showLabels || showPercentages) && !isSmall) {
+        g.selectAll('.mekko-label')
+            .data(allSegments)
+            .join('text')
+            .attr('class', 'mekko-label')
+            .attr('x', (d) => d.x + d.width / 2)
+            .attr('y', (d) => d.y + d.height / 2)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'central')
+            .attr('fill', (d) => contrastText(colorScale(d.secondaryKey)))
+            .attr('font-size', (d) => {
+            const minDim = Math.min(d.width, d.height);
+            return Math.max(9, Math.min(12, minDim / 4)) + 'px';
+        })
+            .attr('font-weight', '600')
+            .attr('font-family', 'Inter, system-ui, sans-serif')
+            .attr('pointer-events', 'none')
+            .text((d) => {
+            if (d.width < 45 || d.height < 22)
+                return '';
+            const parts = [];
+            const maxChars = Math.max(3, Math.floor(d.width / 8));
+            if (showLabels && d.width >= 65 && d.height >= 30) {
+                parts.push(truncateLabel(d.secondaryKey, Math.min(maxChars, Math.floor(d.width / 7))));
+            }
+            if (showPercentages && d.width >= 45 && d.height >= 22) {
+                parts.push(d.pctOfColumn.toFixed(0) + '%');
+            }
+            const text = parts.join(' ');
+            if (text.length * 6.5 > d.width - 4)
+                return parts.length > 1 ? parts[parts.length - 1] : '';
+            return text;
+        });
+    }
+    const axisG = g.append('g');
+    columns.forEach((col) => {
+        const centerX = col.x + col.width / 2;
+        const charWidth = 7;
+        const maxChars = Math.max(3, Math.floor(col.width / charWidth));
+        const label = truncateLabel(col.primaryKey, maxChars);
+        const needsRotation = col.width < 40 && col.primaryKey.length > 3;
+        const labelG = axisG
+            .append('text')
+            .attr('x', centerX)
+            .attr('y', dims.innerHeight + 16)
+            .attr('text-anchor', needsRotation ? 'end' : 'middle')
+            .attr('fill', TEXT_MUTED)
+            .attr('font-size', '11px')
+            .attr('font-family', 'Inter, system-ui, sans-serif');
+        if (needsRotation) {
+            labelG
+                .attr('transform', `rotate(-35, ${centerX}, ${dims.innerHeight + 16})`)
+                .attr('dx', '-0.3em')
+                .attr('dy', '0.15em');
+        }
+        labelG.text(label);
+        if (col.primaryKey.length > maxChars) {
+            labelG.append('title').text(col.primaryKey);
+        }
+        const colPct = grandTotal > 0 ? ((col.total / grandTotal) * 100).toFixed(0) + '%' : '';
+        if (col.width >= 30) {
+            axisG
+                .append('text')
+                .attr('x', centerX)
+                .attr('y', dims.innerHeight + (needsRotation ? 28 : 30))
+                .attr('text-anchor', 'middle')
+                .attr('fill', TEXT_MUTED)
+                .attr('font-size', '10px')
+                .attr('font-family', 'Inter, system-ui, sans-serif')
+                .attr('opacity', 0.6)
+                .text(colPct);
+        }
+    });
+    axisG
+        .append('line')
+        .attr('x1', 0)
+        .attr('y1', dims.innerHeight)
+        .attr('x2', dims.innerWidth)
+        .attr('y2', dims.innerHeight)
+        .attr('stroke', AXIS_COLOR)
+        .attr('stroke-width', 0.5);
+    addSortControls(svg, container, spec, dims, renderMarimekko);
+}
+//# sourceMappingURL=marimekko.js.map

package/dist/src/renderers/d3/composition/marimekko.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marimekko.js","sourceRoot":"","sources":["../../../../../src/renderers/d3/composition/marimekko.ts"],"names":[],"mappings":"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"}

package/dist/src/renderers/d3/composition/metric.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Metric D3 renderer — typographic KPI / big-number cards.
+ *
+ * Pure DOM/CSS layout (no SVG). Uses CSS Grid for multi-metric
+ * arrangements, adaptive font sizes, and delta/trend indicators.
+ */
+import type { VisualizationSpec } from '../../../types.js';
+export declare function renderMetric(container: HTMLElement, spec: VisualizationSpec): void;
+//# sourceMappingURL=metric.d.ts.map

package/dist/src/renderers/d3/composition/metric.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric.d.ts","sourceRoot":"","sources":["../../../../../src/renderers/d3/composition/metric.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AA6F3D,wBAAgB,YAAY,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAyIlF"}

package/dist/src/renderers/d3/composition/metric.js

@@ -0,0 +1,224 @@
+/**
+ * Metric D3 renderer — typographic KPI / big-number cards.
+ *
+ * Pure DOM/CSS layout (no SVG). Uses CSS Grid for multi-metric
+ * arrangements, adaptive font sizes, and delta/trend indicators.
+ */
+import { DARK_BG, TEXT_COLOR, TEXT_MUTED, formatValue } from '../shared.js';
+// ─── VALUE FORMATTING ────────────────────────────────────────────────────────
+function formatMetricValue(value, format, abbreviate, prefix, suffix) {
+    let formatted;
+    switch (format) {
+        case 'currency':
+            formatted = abbreviate ? formatValue(value) : value.toLocaleString();
+            return `${prefix || '$'}${formatted}${suffix}`;
+        case 'percent':
+            formatted = abbreviate && Math.abs(value) >= 1000
+                ? formatValue(value)
+                : value.toFixed(1);
+            return `${prefix}${formatted}%${suffix}`;
+        case 'integer':
+            formatted = abbreviate ? formatValue(value) : Math.round(value).toLocaleString();
+            return `${prefix}${formatted}${suffix}`;
+        case 'decimal':
+            formatted = abbreviate && Math.abs(value) >= 1000
+                ? formatValue(value)
+                : value.toFixed(2);
+            return `${prefix}${formatted}${suffix}`;
+        default: // 'auto'
+            if (abbreviate && Math.abs(value) >= 1000) {
+                formatted = formatValue(value);
+            }
+            else if (Number.isInteger(value)) {
+                formatted = value.toLocaleString();
+            }
+            else {
+                formatted = value % 1 !== 0 ? value.toFixed(1) : value.toLocaleString();
+            }
+            return `${prefix}${formatted}${suffix}`;
+    }
+}
+function computeDelta(current, previous) {
+    if (previous === 0)
+        return { pct: 'N/A', direction: 'flat' };
+    const change = ((current - previous) / Math.abs(previous)) * 100;
+    if (Math.abs(change) < 0.05)
+        return { pct: '0%', direction: 'flat' };
+    const direction = change > 0 ? 'up' : 'down';
+    return { pct: `${Math.abs(change).toFixed(1)}%`, direction };
+}
+// ─── GRID COLUMNS ────────────────────────────────────────────────────────────
+function gridColumns(count, configColumns) {
+    if (typeof configColumns === 'number' && configColumns > 0) {
+        return `repeat(${configColumns}, 1fr)`;
+    }
+    // Auto: 1→1, 2→2, 3→3, 4→2x2, 5-6→3, 7-9→3, 10-12→4
+    if (count === 1)
+        return '1fr';
+    if (count === 2)
+        return 'repeat(2, 1fr)';
+    if (count <= 3)
+        return `repeat(${count}, 1fr)`;
+    if (count === 4)
+        return 'repeat(2, 1fr)';
+    if (count <= 6)
+        return 'repeat(3, 1fr)';
+    if (count <= 9)
+        return 'repeat(3, 1fr)';
+    return 'repeat(4, 1fr)';
+}
+// ─── ADAPTIVE SIZING ────────────────────────────────────────────────────────
+function adaptiveValueSize(count, containerWidth, containerHeight) {
+    // Base size from container area, then scale down by count
+    const area = containerWidth * containerHeight;
+    let base;
+    if (area < 150000)
+        base = 28; // tiny
+    else if (area < 300000)
+        base = 36; // small
+    else if (area < 500000)
+        base = 48; // medium
+    else
+        base = 60; // large
+    // Scale down for more metrics
+    if (count <= 1)
+        return base;
+    if (count <= 2)
+        return Math.round(base * 0.9);
+    if (count <= 4)
+        return Math.round(base * 0.75);
+    if (count <= 6)
+        return Math.round(base * 0.65);
+    return Math.round(base * 0.55);
+}
+function adaptiveLabelSize(valueFontSize) {
+    return Math.max(10, Math.round(valueFontSize * 0.22));
+}
+// ─── RENDERER ────────────────────────────────────────────────────────────────
+export function renderMetric(container, spec) {
+    const { config, data } = spec;
+    const labelField = config.labelField || 'label';
+    const valueField = config.valueField || 'value';
+    const previousValueField = config.previousValueField || null;
+    const abbreviate = config.abbreviate !== false;
+    const format = config.format || 'auto';
+    const prefix = config.prefix || '';
+    const suffix = config.suffix || '';
+    const configColumns = config.columns;
+    const width = container.clientWidth || 800;
+    const height = container.clientHeight || 500;
+    const count = data.length;
+    const valueFontSize = adaptiveValueSize(count, width, height);
+    const labelFontSize = adaptiveLabelSize(valueFontSize);
+    // Outer wrapper
+    const wrapper = document.createElement('div');
+    wrapper.style.cssText = `
+    width: ${width}px;
+    height: ${height}px;
+    background: ${DARK_BG};
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    font-family: Inter, system-ui, sans-serif;
+    overflow: hidden;
+  `;
+    // Title
+    if (spec.title) {
+        const titleEl = document.createElement('div');
+        titleEl.style.cssText = `
+      text-align: center;
+      color: ${TEXT_COLOR};
+      font-size: 14px;
+      font-weight: 600;
+      padding: 16px 16px 0;
+      flex-shrink: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+        titleEl.textContent = spec.title;
+        titleEl.title = spec.title;
+        wrapper.appendChild(titleEl);
+    }
+    // Grid container
+    const grid = document.createElement('div');
+    grid.style.cssText = `
+    flex: 1;
+    display: grid;
+    grid-template-columns: ${gridColumns(count, configColumns)};
+    gap: 8px;
+    padding: 24px;
+    align-items: center;
+    justify-items: center;
+  `;
+    for (const row of data) {
+        const label = String(row[labelField] ?? '');
+        const rawValue = Number(row[valueField]);
+        const value = isNaN(rawValue) ? 0 : rawValue;
+        const hasPrev = previousValueField && row[previousValueField] != null;
+        const prevValue = hasPrev ? Number(row[previousValueField]) : null;
+        const card = document.createElement('div');
+        card.style.cssText = `
+      text-align: center;
+      padding: 8px 12px;
+      width: 100%;
+      min-width: 0;
+      overflow: hidden;
+    `;
+        // Big number — thin weight
+        const numberEl = document.createElement('div');
+        numberEl.style.cssText = `
+      color: ${TEXT_COLOR};
+      font-size: ${valueFontSize}px;
+      font-weight: 300;
+      line-height: 1.1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    `;
+        numberEl.textContent = formatMetricValue(value, format, abbreviate, prefix, suffix);
+        card.appendChild(numberEl);
+        // Label — fat weight, underneath the value, tight
+        const labelEl = document.createElement('div');
+        labelEl.style.cssText = `
+      color: ${TEXT_MUTED};
+      font-size: ${labelFontSize}px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      margin-top: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    `;
+        labelEl.textContent = label;
+        if (label.length > 30)
+            labelEl.title = label;
+        card.appendChild(labelEl);
+        // Delta indicator — centered below label, normal flow
+        if (prevValue !== null && !isNaN(prevValue)) {
+            const delta = computeDelta(value, prevValue);
+            const deltaEl = document.createElement('div');
+            const deltaColor = delta.direction === 'up' ? '#10b981'
+                : delta.direction === 'down' ? '#ef4444'
+                    : TEXT_MUTED;
+            const arrow = delta.direction === 'up' ? '▲'
+                : delta.direction === 'down' ? '▼'
+                    : '▶';
+            deltaEl.style.cssText = `
+        color: ${deltaColor};
+        font-size: ${Math.max(10, Math.round(valueFontSize * 0.2))}px;
+        font-weight: 600;
+        margin-top: 4px;
+      `;
+            deltaEl.textContent = `${arrow} ${delta.pct}`;
+            card.appendChild(deltaEl);
+        }
+        grid.appendChild(card);
+    }
+    wrapper.appendChild(grid);
+    container.appendChild(wrapper);
+}
+//# sourceMappingURL=metric.js.map

package/dist/src/renderers/d3/composition/metric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../../../src/renderers/d3/composition/metric.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+/**
+ * Stacked bar chart D3 renderer.
+ * Follows bar chart standards: adaptive layout, full-column hover, instant render, value labels.
+ */
+import type { VisualizationSpec } from '../../../types.js';
+export declare function renderStackedBar(container: HTMLElement, spec: VisualizationSpec): void;
+//# sourceMappingURL=stacked-bar.d.ts.map

package/dist/src/renderers/d3/composition/stacked-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-bar.d.ts","sourceRoot":"","sources":["../../../../../src/renderers/d3/composition/stacked-bar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAuB3D,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAuRtF"}