@internetstiftelsen/charts 0.11.0 → 0.13.0

package/dist/chart-group.js

@@ -174,11 +174,11 @@ export class ChartGroup {
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "title", {
+        Object.defineProperty(this, "textComponents", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: null
+            value: []
         });
         Object.defineProperty(this, "resizeObserver", {
             enumerable: true,
@@ -253,8 +253,8 @@ export class ChartGroup {
         return this;
     }
     addChild(component) {
-        if (component.type === 'title') {
-            this.title = component;
+        if (this.isTextComponent(component)) {
+            this.textComponents.push(component);
             if (this.container) {
                 this.refresh();
             }
@@ -272,7 +272,10 @@ export class ChartGroup {
             }
             return this;
         }
-        throw new Error('ChartGroup only supports Title and Legend via addChild()');
+        throw new Error('ChartGroup only supports Text, Title, and Legend via addChild()');
+    }
+    isTextComponent(component) {
+        return component.type === 'text' || component.type === 'title';
     }
     render(target) {
         this.container = this.resolveContainer(target);
@@ -285,17 +288,18 @@ export class ChartGroup {
             return null;
         }
         const container = this.container;
-        const { width, renderedTitle, renderedLegend, layout, totalHeight } = this.prepareRenderState(container);
+        const { width, renderedTopText, renderedBottomText, renderedLegend, layout, totalHeight, } = this.prepareRenderState(container);
         this.isRendering = true;
         try {
             this.applyScaleSyncOverrides(width);
             container.innerHTML = '';
             const { root, chartLayer } = this.createRenderHosts(totalHeight, layout.chartHeight);
-            this.appendRenderedSection(root, 'chart-group__title', renderedTitle);
+            this.appendRenderedTextSections(root, renderedTopText);
             root.appendChild(chartLayer);
             container.appendChild(root);
             this.renderLayoutItems(chartLayer, layout.items);
             this.appendRenderedSection(root, 'chart-group__legend', renderedLegend);
+            this.appendRenderedTextSections(root, renderedBottomText);
             this.readyPromise = this.createReadyPromise();
             this.syncLegendStateFromChildren();
             this.childYDomainSnapshot = this.serializeChildYDomains(width);
@@ -338,11 +342,20 @@ export class ChartGroup {
     onLegendChange(callback) {
         return this.legendState.subscribe(callback);
     }
+    resolveAccessibleLabel() {
+        return (this.textComponents
+            .find((component) => {
+            return (component.display &&
+                (component.type === 'title' ||
+                    component.variant === 'title'));
+        })
+            ?.text.trim() || 'Chart group');
+    }
     async export(format, options) {
         const container = this.requireRenderedContainer(options);
         await this.whenReady();
         const width = options?.width ?? this.resolveContainerWidth(container);
-        const { svg, height } = await this.exportSVG(width, options);
+        const { svg, height } = await this.exportSVG(format, width, options);
         const content = await this.resolveExportContent(format, svg, width, height, options);
         if (options?.download) {
             this.downloadContent(content, format, options);
@@ -701,11 +714,11 @@ export class ChartGroup {
         legendHost.appendChild(renderedLegend.svg);
         root.appendChild(legendHost);
     }
-    renderTitleSvg(width) {
-        if (!this.title || !this.title.display) {
+    renderTextSvg(width, component) {
+        if (!component.display) {
             return null;
         }
-        const height = Math.max(1, this.title.getRequiredSpace().height);
+        const height = Math.max(1, component.getRequiredSpace(this.theme).height);
         const svg = create('svg')
             .attr('width', width)
             .attr('height', height)
@@ -714,14 +727,27 @@ export class ChartGroup {
         if (!svgNode) {
             return null;
         }
-        this.title.render(svg, this.theme, width);
+        component.render(svg, this.theme, width);
         return {
+            component,
             height,
             svg: svgNode,
         };
     }
-    renderLegendSvg(width) {
-        if (!this.legend || this.legend.mode === 'hidden') {
+    renderTextSvgs(width, position, components = this.textComponents) {
+        return components
+            .filter((component) => {
+            return component.position === position;
+        })
+            .map((component) => {
+            return this.renderTextSvg(width, component);
+        })
+            .filter((section) => {
+            return section !== null;
+        });
+    }
+    renderLegendSvg(width, legend = this.legend) {
+        if (!legend || legend.mode === 'hidden') {
             return null;
         }
         const items = this.getLegendItemsForWidth(width);
@@ -750,10 +776,10 @@ export class ChartGroup {
                     fill: item.color,
                 };
             });
-            this.legend.estimateLayoutSpace(series, this.theme, width, svgNode);
-            const height = Math.max(1, this.legend.getMeasuredHeight());
+            legend.estimateLayoutSpace(series, this.theme, width, svgNode);
+            const height = Math.max(1, legend.getMeasuredHeight());
             svg.attr('height', height);
-            this.legend.render(svg, series, this.theme, width);
+            legend.render(svg, series, this.theme, width);
             return {
                 height,
                 svg: svgNode,
@@ -775,15 +801,23 @@ export class ChartGroup {
         });
         this.resizeObserver.observe(this.container);
     }
-    async exportSVG(width, options) {
+    async exportSVG(format, width, options) {
         this.applyScaleSyncOverrides(width);
-        const exportLayoutState = this.resolveExportLayoutState(width);
+        const baseContext = this.createExportRenderContext(format, width, options);
+        const exportLayoutState = this.resolveExportLayoutState(width, baseContext);
         const layout = this.calculateLayout(width, exportLayoutState.chartAreaHeight, exportLayoutState.defaultChartHeightOverride);
         const childSvgs = await this.exportLayoutItems(layout.items, options);
-        const totalHeight = exportLayoutState.titleHeight +
+        const totalHeight = exportLayoutState.topTextHeight +
             layout.chartHeight +
-            exportLayoutState.legendHeight;
+            exportLayoutState.legendHeight +
+            exportLayoutState.bottomTextHeight;
         const exportSvg = this.composeExportSvg(width, totalHeight, layout.chartHeight, exportLayoutState, childSvgs);
+        this.runExportHooks({
+            ...baseContext,
+            height: totalHeight,
+            svg: exportSvg,
+        }, exportLayoutState);
+        this.syncAccessibleLabelFromSvg(exportSvg);
         return {
             svg: exportSvg.outerHTML,
             height: totalHeight,
@@ -805,21 +839,31 @@ export class ChartGroup {
     }
     prepareRenderState(container) {
         const width = this.resolveContainerWidth(container);
-        const renderedTitle = this.renderTitleSvg(width);
+        const renderedTopText = this.renderTextSvgs(width, 'top');
+        const renderedBottomText = this.renderTextSvgs(width, 'bottom');
         const renderedLegend = this.renderLegendSvg(width);
-        const chartAreaHeight = this.resolveChartAreaHeightConstraint(this.resolveTotalHeightConstraint(container.getBoundingClientRect()), renderedTitle?.height ?? 0, renderedLegend?.height ?? 0);
+        const topTextHeight = this.sumRenderedTextHeight(renderedTopText);
+        const bottomTextHeight = this.sumRenderedTextHeight(renderedBottomText);
+        const chartAreaHeight = this.resolveChartAreaHeightConstraint(this.resolveTotalHeightConstraint(container.getBoundingClientRect()), topTextHeight, (renderedLegend?.height ?? 0) + bottomTextHeight);
         const layout = this.calculateLayout(width, chartAreaHeight);
-        const totalHeight = (renderedTitle?.height ?? 0) +
+        const totalHeight = topTextHeight +
             layout.chartHeight +
-            (renderedLegend?.height ?? 0);
+            (renderedLegend?.height ?? 0) +
+            bottomTextHeight;
         return {
             width,
-            renderedTitle,
+            renderedTopText,
+            renderedBottomText,
             renderedLegend,
             layout,
             totalHeight,
         };
     }
+    sumRenderedTextHeight(sections) {
+        return sections.reduce((total, section) => {
+            return total + section.height;
+        }, 0);
+    }
     createRenderHosts(totalHeight, chartHeight) {
         const root = document.createElement('div');
         root.className = 'chart-group';
@@ -842,6 +886,16 @@ export class ChartGroup {
         host.appendChild(section.svg);
         root.appendChild(host);
     }
+    appendRenderedTextSections(root, sections) {
+        sections.forEach((section) => {
+            this.appendRenderedSection(root, this.resolveTextSectionClassName(section.component), section);
+        });
+    }
+    resolveTextSectionClassName(component) {
+        return component.type === 'title'
+            ? 'chart-group__title'
+            : 'chart-group__text';
+    }
     renderLayoutItems(chartLayer, items) {
         items.forEach((item) => {
             const chartHost = this.createChartHost(item);
@@ -922,37 +976,103 @@ export class ChartGroup {
             margin: options?.pdfMargin ?? 0,
         });
     }
-    resolveExportLayoutState(width) {
-        const renderedTitle = this.renderTitleSvg(width);
-        const renderedLegend = this.renderLegendSvg(width);
-        const titleHeight = renderedTitle?.height ?? 0;
+    resolveExportLayoutState(width, context) {
+        const textComponents = this.textComponents
+            .map((component) => {
+            return this.createExportComponent(component, context);
+        })
+            .filter((component) => {
+            return component !== null;
+        });
+        const legend = this.createExportComponent(this.legend, context);
+        const renderedTopText = this.renderTextSvgs(width, 'top', textComponents);
+        const renderedBottomText = this.renderTextSvgs(width, 'bottom', textComponents);
+        const renderedLegend = this.renderLegendSvg(width, legend);
+        return this.createExportLayoutState(renderedTopText, renderedBottomText, renderedLegend);
+    }
+    createExportLayoutState(renderedTopText, renderedBottomText, renderedLegend) {
+        const topTextHeight = this.sumRenderedTextHeight(renderedTopText);
+        const bottomTextHeight = this.sumRenderedTextHeight(renderedBottomText);
         const legendHeight = renderedLegend?.height ?? 0;
         if (this.configuredHeight !== undefined) {
             return {
-                renderedTitle,
+                renderedTopText,
+                renderedBottomText,
                 renderedLegend,
-                titleHeight,
+                topTextHeight,
+                bottomTextHeight,
                 legendHeight,
-                chartAreaHeight: this.resolveChartAreaHeightConstraint(this.configuredHeight, titleHeight, legendHeight),
+                chartAreaHeight: this.resolveChartAreaHeightConstraint(this.configuredHeight, topTextHeight, legendHeight + bottomTextHeight),
             };
         }
         const defaultChartHeightOverride = this.resolveLiveChartHeightOverride();
         return {
-            renderedTitle,
+            renderedTopText,
+            renderedBottomText,
             renderedLegend,
-            titleHeight,
+            topTextHeight,
+            bottomTextHeight,
             legendHeight,
             defaultChartHeightOverride,
         };
     }
+    createExportRenderContext(format, width, options) {
+        return {
+            format,
+            options,
+            width,
+            height: this.resolveBaseExportHeight(width),
+        };
+    }
+    resolveBaseExportHeight(width) {
+        const state = this.createExportLayoutState(this.renderTextSvgs(width, 'top'), this.renderTextSvgs(width, 'bottom'), this.renderLegendSvg(width));
+        const layout = this.calculateLayout(width, state.chartAreaHeight, state.defaultChartHeightOverride);
+        return (state.topTextHeight +
+            layout.chartHeight +
+            state.legendHeight +
+            state.bottomTextHeight);
+    }
+    createExportComponent(component, context) {
+        if (!component) {
+            return null;
+        }
+        const exportable = component;
+        const currentConfig = exportable.getExportConfig?.() ?? {};
+        const result = exportable.exportHooks?.beforeRender?.call(component, context, currentConfig);
+        if (!result ||
+            typeof result !== 'object' ||
+            !exportable.createExportComponent) {
+            return component;
+        }
+        return exportable.createExportComponent(result);
+    }
+    runExportHooks(context, state) {
+        [
+            ...state.renderedTopText.map((rendered) => {
+                return { component: rendered.component, rendered };
+            }),
+            { component: this.legend, rendered: state.renderedLegend },
+            ...state.renderedBottomText.map((rendered) => {
+                return { component: rendered.component, rendered };
+            }),
+        ].forEach(({ component, rendered }) => {
+            if (!component || !rendered) {
+                return;
+            }
+            const exportable = component;
+            exportable.exportHooks?.before?.call(component, context);
+        });
+    }
     resolveLiveChartHeightOverride() {
         if (!this.container) {
             return undefined;
         }
         const liveWidth = this.resolveContainerWidth(this.container);
-        const liveTitle = this.renderTitleSvg(liveWidth);
+        const liveTopText = this.renderTextSvgs(liveWidth, 'top');
+        const liveBottomText = this.renderTextSvgs(liveWidth, 'bottom');
         const liveLegend = this.renderLegendSvg(liveWidth);
-        const liveChartAreaHeight = this.resolveChartAreaHeightConstraint(this.resolveTotalHeightConstraint(this.container.getBoundingClientRect()), liveTitle?.height ?? 0, liveLegend?.height ?? 0);
+        const liveChartAreaHeight = this.resolveChartAreaHeightConstraint(this.resolveTotalHeightConstraint(this.container.getBoundingClientRect()), this.sumRenderedTextHeight(liveTopText), (liveLegend?.height ?? 0) +
+            this.sumRenderedTextHeight(liveBottomText));
         if (liveChartAreaHeight === undefined) {
             return undefined;
         }
@@ -982,28 +1102,44 @@ export class ChartGroup {
         exportSvg.setAttribute('width', String(width));
         exportSvg.setAttribute('height', String(totalHeight));
         exportSvg.setAttribute('role', 'img');
-        exportSvg.setAttribute('aria-label', this.title?.text.trim() || 'Chart group');
-        if (state.renderedTitle) {
-            state.renderedTitle.svg.setAttribute('x', '0');
-            state.renderedTitle.svg.setAttribute('y', '0');
-            exportSvg.appendChild(document.importNode(state.renderedTitle.svg, true));
-        }
+        exportSvg.setAttribute('aria-label', this.resolveAccessibleLabel());
+        let yOffset = 0;
+        this.appendExportTextSections(exportSvg, state.renderedTopText, yOffset);
+        yOffset += state.topTextHeight;
         childSvgs.forEach((item) => {
             const parsed = parser.parseFromString(item.svg, 'image/svg+xml');
             const imported = document.importNode(parsed.documentElement, true);
             imported.setAttribute('x', String(item.x));
-            imported.setAttribute('y', String(state.titleHeight + item.y));
+            imported.setAttribute('y', String(yOffset + item.y));
             imported.setAttribute('width', String(item.width));
             imported.setAttribute('height', String(item.height));
             exportSvg.appendChild(imported);
         });
+        yOffset += chartHeight;
         if (state.renderedLegend) {
             state.renderedLegend.svg.setAttribute('x', '0');
-            state.renderedLegend.svg.setAttribute('y', String(state.titleHeight + chartHeight));
+            state.renderedLegend.svg.setAttribute('y', String(yOffset));
             exportSvg.appendChild(document.importNode(state.renderedLegend.svg, true));
+            yOffset += state.legendHeight;
         }
+        this.appendExportTextSections(exportSvg, state.renderedBottomText, yOffset);
         return exportSvg;
     }
+    syncAccessibleLabelFromSvg(svg) {
+        const titleText = svg
+            .querySelector('.title text, .text--title text')
+            ?.textContent?.trim();
+        svg.setAttribute('aria-label', titleText || this.resolveAccessibleLabel());
+    }
+    appendExportTextSections(exportSvg, sections, startY) {
+        let yOffset = startY;
+        sections.forEach((section) => {
+            section.svg.setAttribute('x', '0');
+            section.svg.setAttribute('y', String(yOffset));
+            exportSvg.appendChild(document.importNode(section.svg, true));
+            yOffset += section.height;
+        });
+    }
     validateResponsiveConfig(responsive) {
         const breakpoints = responsive?.breakpoints;
         if (!breakpoints) {

package/dist/chart-interface.d.ts

@@ -1,5 +1,5 @@
-import type { ExportHooks } from './types.js';
-export type ChartComponentType = 'line' | 'scatter' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
+import type { ChartTheme, ExportHooks } from './types.js';
+export type ChartComponentType = 'line' | 'scatter' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'text' | 'title' | 'donutCenterContent';
 export interface ChartComponentBase {
     type: ChartComponentType;
 }
@@ -13,7 +13,7 @@ export type ComponentSpace = {
     position: 'top' | 'bottom' | 'left' | 'right';
 };
 export interface LayoutAwareComponentBase extends ChartComponentBase {
-    getRequiredSpace(): ComponentSpace;
+    getRequiredSpace(theme?: ChartTheme): ComponentSpace;
 }
 export interface LayoutAwareComponent<TConfig = unknown> extends ChartComponent<TConfig>, LayoutAwareComponentBase {
 }

package/dist/grouped-data.d.ts

@@ -13,6 +13,7 @@ export type NormalizedChartData = {
     data: DataItem[];
     schema: DataSchema;
 };
+export declare function attachDataSchema<T extends ChartData>(data: T, schema: DataSchema): T;
 export declare function hasEmptyGroupNames(data: GroupedDataGroup[]): boolean;
 export declare function isGroupedData(data: unknown): data is GroupedDataGroup[];
 export declare function resolveDataSchema(data: ChartData): DataSchema;

package/dist/grouped-data.js

@@ -3,9 +3,78 @@ export const GROUPED_CATEGORY_LABEL_KEY = '__iis_grouped_category_label__';
 export const GROUPED_GROUP_LABEL_KEY = '__iis_grouped_group_label__';
 export const GROUPED_GAP_TICK_PREFIX = '__iis_group_gap__';
 export const GROUPED_EMPTY_GROUP_ERROR = 'Grouped data requires non-empty group names';
+const DATA_SCHEMA_KEY = Symbol('iisChartDataSchema');
+const CATEGORY_KEY_NAMES = new Set(['category', 'kategori', 'label', 'name']);
+export function attachDataSchema(data, schema) {
+    Object.defineProperty(data, DATA_SCHEMA_KEY, {
+        value: schema,
+        enumerable: false,
+        configurable: true,
+    });
+    return data;
+}
 function isRecord(value) {
     return typeof value === 'object' && value !== null;
 }
+function isBlankValue(value) {
+    if (value === null || value === undefined) {
+        return true;
+    }
+    return typeof value === 'string' && value.trim() === '';
+}
+function isNumericLikeValue(value) {
+    if (typeof value === 'number') {
+        return Number.isFinite(value);
+    }
+    if (typeof value !== 'string') {
+        return false;
+    }
+    const trimmed = value.trim();
+    return trimmed.length > 0 && Number.isFinite(parseFloat(trimmed));
+}
+function collectDataKeys(data) {
+    const seen = new Set();
+    const keys = [];
+    data.forEach((row) => {
+        Object.keys(row).forEach((key) => {
+            if (seen.has(key)) {
+                return;
+            }
+            seen.add(key);
+            keys.push(key);
+        });
+    });
+    return keys;
+}
+function hasOnlyNonNumericValues(data, key) {
+    let hasValue = false;
+    return (data.every((row) => {
+        const value = row[key];
+        if (isBlankValue(value)) {
+            return true;
+        }
+        hasValue = true;
+        return !isNumericLikeValue(value);
+    }) && hasValue);
+}
+function isNamedCategoryKey(key) {
+    return CATEGORY_KEY_NAMES.has(key.trim().toLowerCase());
+}
+function resolveCategoryKey(data, fallback) {
+    const keys = collectDataKeys(data);
+    const namedCategoryKey = keys.find(isNamedCategoryKey);
+    if (namedCategoryKey) {
+        return namedCategoryKey;
+    }
+    const nonNumericCategoryKey = keys.find((key) => hasOnlyNonNumericValues(data, key));
+    return nonNumericCategoryKey ?? keys[0] ?? fallback;
+}
+function resolveMetricKeys(data, categoryKey) {
+    return collectDataKeys(data).filter((key) => key !== categoryKey);
+}
+function getAttachedDataSchema(data) {
+    return data[DATA_SCHEMA_KEY] ?? null;
+}
 function hasNonEmptyGroupName(value) {
     return typeof value === 'string' && value.trim().length > 0;
 }
@@ -38,56 +107,27 @@ function resolveFlatSchema(data) {
             metricKeys: [],
         };
     }
-    const keys = Object.keys(data[0]);
-    const categoryKey = keys[0] ?? 'column';
-    const metricKeys = [];
-    const seen = new Set();
-    data.forEach((row) => {
-        Object.keys(row).forEach((key) => {
-            if (key === categoryKey || seen.has(key)) {
-                return;
-            }
-            seen.add(key);
-            metricKeys.push(key);
-        });
-    });
+    const categoryKey = resolveCategoryKey(data, 'column');
     return {
         grouped: false,
         categoryKey,
-        metricKeys,
+        metricKeys: resolveMetricKeys(data, categoryKey),
     };
 }
 function resolveGroupedSchema(data) {
-    let firstRow = null;
-    for (const group of data) {
-        if (group.data.length > 0) {
-            firstRow = group.data[0];
-            break;
-        }
-    }
-    const categoryKey = firstRow
-        ? (Object.keys(firstRow)[0] ?? 'category')
-        : 'category';
-    const metricKeys = [];
-    const seen = new Set();
-    data.forEach((group) => {
-        group.data.forEach((row) => {
-            Object.keys(row).forEach((key) => {
-                if (key === categoryKey || seen.has(key)) {
-                    return;
-                }
-                seen.add(key);
-                metricKeys.push(key);
-            });
-        });
-    });
+    const rows = data.flatMap((group) => group.data);
+    const categoryKey = rows.length > 0 ? resolveCategoryKey(rows, 'category') : 'category';
     return {
         grouped: true,
         categoryKey,
-        metricKeys,
+        metricKeys: resolveMetricKeys(rows, categoryKey),
     };
 }
 export function resolveDataSchema(data) {
+    const attachedSchema = getAttachedDataSchema(data);
+    if (attachedSchema) {
+        return attachedSchema;
+    }
     if (isGroupedData(data)) {
         return resolveGroupedSchema(data);
     }
@@ -95,7 +135,7 @@ export function resolveDataSchema(data) {
 }
 function normalizeGroupedData(data) {
     assertNonEmptyGroupNames(data);
-    const schema = resolveGroupedSchema(data);
+    const schema = resolveDataSchema(data);
     const categoryKey = schema.categoryKey;
     const normalizedRows = data.flatMap((group, groupIndex) => {
         return group.data.map((row, rowIndex) => {
@@ -119,6 +159,6 @@ export function normalizeChartData(data) {
     }
     return {
         data,
-        schema: resolveFlatSchema(data),
+        schema: resolveDataSchema(data),
     };
 }

package/dist/grouped-tabular.js

@@ -1,4 +1,4 @@
-import { GROUPED_EMPTY_GROUP_ERROR, hasEmptyGroupNames, resolveDataSchema, } from './grouped-data.js';
+import { GROUPED_EMPTY_GROUP_ERROR, attachDataSchema, hasEmptyGroupNames, resolveDataSchema, } from './grouped-data.js';
 export const GROUPED_STRING_EMPTY_INPUT_ERROR = 'Input string is empty';
 export const GROUPED_STRING_MISSING_HEADER_ERROR = 'Unable to resolve grouped header row from input string';
 export const GROUPED_STRING_FIRST_ROW_BLANK_GROUP_ERROR = 'First data row cannot have a blank group label';
@@ -212,7 +212,11 @@ function parseGroupedRows(headerRow, dataRows, options) {
         headers: ['', categoryKey, ...metricKeys],
         categoryKey,
         metricKeys,
-        data: rebuilt.data,
+        data: attachDataSchema(rebuilt.data, {
+            grouped: true,
+            categoryKey,
+            metricKeys,
+        }),
     };
 }
 function rowHasCategoryOrMetricValues(row) {
@@ -258,7 +262,7 @@ function parseFlatRows(headerRow, dataRows, options) {
         return '';
     });
     const columns = toUniqueNames(columnCandidates, 'column');
-    return dataRows
+    const rows = dataRows
         .filter((row) => rowHasMetricContent(row))
         .map((row) => {
         const item = {};
@@ -267,6 +271,11 @@ function parseFlatRows(headerRow, dataRows, options) {
         });
         return item;
     });
+    return attachDataSchema(rows, {
+        grouped: false,
+        categoryKey: columns[0] ?? options?.categoryKey?.trim() ?? 'category',
+        metricKeys: columns.slice(1),
+    });
 }
 export function parseGroupedTabularString(input, options) {
     const { headerRow, dataRows } = parseStringTable(input, options);

package/dist/layout-manager.js

@@ -36,7 +36,7 @@ export class LayoutManager {
         let marginLeft = this.theme.margins.left;
         // Accumulate space requirements from components
         for (const component of components) {
-            const space = component.getRequiredSpace();
+            const space = component.getRequiredSpace(this.theme);
             switch (space.position) {
                 case 'top':
                     marginTop += space.height;
@@ -88,14 +88,14 @@ export class LayoutManager {
         let leftOffset = 0;
         let rightOffset = 0;
         for (const component of components) {
-            const space = component.getRequiredSpace();
+            const space = component.getRequiredSpace(this.theme);
             let x = 0;
             let y = 0;
             switch (space.position) {
                 case 'top':
-                    // Position above plot area, stacking upward
+                    // Position above plot area, stacking downward from the outer margin.
                     x = 0;
-                    y = this.plotBounds.top - topOffset - space.height;
+                    y = this.theme.margins.top + topOffset;
                     topOffset += space.height;
                     break;
                 case 'bottom':