@internetstiftelsen/charts 0.12.0 → 0.13.0

package/README.md

@@ -198,6 +198,7 @@ import { XYChart } from '@internetstiftelsen/charts/xy-chart';
 import { Line } from '@internetstiftelsen/charts/line';
 import { Bar } from '@internetstiftelsen/charts/bar';
 import { Legend } from '@internetstiftelsen/charts/legend';
+import { Text } from '@internetstiftelsen/charts/text';
 import { Title } from '@internetstiftelsen/charts/title';
 
 const lineChart = new XYChart({ data: lineData });
@@ -215,6 +216,14 @@ const group = new ChartGroup({
 
 group
     .addChild(new Title({ text: 'Revenue vs Expenses' }))
+    .addChild(
+        new Text({
+            text: 'Source: finance team',
+            position: 'bottom',
+            variant: 'caption',
+            align: 'left',
+        }),
+    )
     .addChart(barChart)
     .addChart(lineChart)
     .addChild(new Legend());
@@ -426,7 +435,7 @@ Grouped parsing rules:
 - [DonutChart](./docs/donut-chart.md) - Donut/pie charts API
 - [PieChart](./docs/pie-chart.md) - Pie chart API
 - [GaugeChart](./docs/gauge-chart.md) - Gauge chart API
-- [Components](./docs/components.md) - Axes, Grid, Tooltip, Legend, Title
+- [Components](./docs/components.md) - Axes, Grid, Tooltip, Legend, Text, Title
 - [Theming](./docs/theming.md) - Colors, fonts, and styling
 
 ## Browser Support

package/dist/base-chart.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { ChartData, DataItem, ChartTheme, ResolvedChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale, ExportHookContext, ExportRenderContext, LegendItem, LegendMode, LegendSeries, ResponsiveConfig, ResponsiveRenderContext, DeepPartial } from './types.js';
+import type { ChartData, DataItem, ChartTheme, ResolvedChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale, ExportHookContext, ExportRenderContext, LegendItem, LegendMode, LegendSeries, ResponsiveConfig, ResponsiveRenderContext, DeepPartial, TextPosition } from './types.js';
 import type { ChartComponentBase, LayoutAwareComponentBase } from './chart-interface.js';
 import type { XAxis } from './x-axis.js';
 import type { YAxis } from './y-axis.js';
@@ -75,6 +75,13 @@ type ComponentSlot<TComponent extends ChartComponentBase = ChartComponentBase> =
     set: (component: TComponent | null) => void;
     onRegister?: (component: TComponent) => void;
 };
+type TextLayoutComponent = LayoutAwareComponentBase & ChartComponentBase & {
+    display: boolean;
+    text: string;
+    position: TextPosition;
+    variant: string;
+    render: (svg: Selection<SVGSVGElement, undefined, null, undefined>, theme: ChartTheme, width: number, x?: number, y?: number) => void;
+};
 export type BaseChartConfig = {
     data: ChartData;
     width?: number;
@@ -102,6 +109,7 @@ export declare abstract class BaseChart {
     protected tooltip: Tooltip | null;
     protected legend: Legend | null;
     protected title: Title | null;
+    protected textComponents: TextLayoutComponent[];
     protected svg: Selection<SVGSVGElement, undefined, null, undefined> | null;
     protected plotGroup: Selection<SVGGElement, undefined, null, undefined> | null;
     protected container: HTMLElement | null;
@@ -139,6 +147,7 @@ export declare abstract class BaseChart {
     private pushIfIncluded;
     private resolveAccessibleLabel;
     private syncAccessibleLabelFromSvg;
+    private resolvePrimaryTextLabel;
     protected resolveResponsiveContext(context: {
         width: number;
         height: number;
@@ -169,6 +178,7 @@ export declare abstract class BaseChart {
      */
     protected getLayoutComponents(): LayoutAwareComponentBase[];
     protected getBaseLayoutComponents(options: BaseLayoutComponentsOptions): LayoutAwareComponentBase[];
+    private getTextComponents;
     protected getExportComponents(): ChartComponentBase[];
     protected getOverrideableComponents(): ChartComponentBase[];
     protected getBaseExportComponents(options: BaseExportComponentsOptions): ChartComponentBase[];
@@ -226,6 +236,7 @@ export declare abstract class BaseChart {
     protected tryRegisterComponent(component: ChartComponentBase, slots: readonly ComponentSlot[]): boolean;
     protected applySlotOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>, slots: readonly ComponentSlot[]): () => void;
     protected applyArrayComponentOverrides<TComponent extends ChartComponentBase>(components: TComponent[], overrides: Map<ChartComponentBase, ChartComponentBase>, isComponent: (component: ChartComponentBase) => component is TComponent): () => void;
+    private isTextComponent;
     private getBaseComponentSlots;
     /**
      * Exports the chart in the specified format

package/dist/base-chart.js

@@ -135,6 +135,12 @@ export class BaseChart {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "textComponents", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
         Object.defineProperty(this, "svg", {
             enumerable: true,
             configurable: true,
@@ -410,20 +416,31 @@ export class BaseChart {
         }
     }
     resolveAccessibleLabel() {
-        const titleText = this.title?.text.trim();
+        const titleText = this.resolvePrimaryTextLabel();
         if (titleText) {
             return titleText;
         }
         return 'Chart';
     }
     syncAccessibleLabelFromSvg(svg) {
-        const titleText = svg.querySelector('.title text')?.textContent?.trim();
+        const titleText = svg
+            .querySelector('.title text, .text--title text')
+            ?.textContent?.trim();
         if (titleText) {
             svg.setAttribute('aria-label', titleText);
             return;
         }
         svg.setAttribute('aria-label', this.resolveAccessibleLabel());
     }
+    resolvePrimaryTextLabel() {
+        return this.textComponents
+            .find((component) => {
+            return (component.display &&
+                (component.type === 'title' ||
+                    component.variant === 'title'));
+        })
+            ?.text.trim();
+    }
     resolveResponsiveContext(context) {
         const activeBreakpoints = this.resolveActiveBreakpoints(context.width).map(({ name }) => name);
         return {
@@ -574,8 +591,8 @@ export class BaseChart {
     }
     getBaseLayoutComponents(options) {
         const components = [];
-        if (options.title && this.title) {
-            components.push(this.title);
+        if (options.title) {
+            components.push(...this.getTextComponents('top'));
         }
         if (options.xAxis && this.xAxis) {
             components.push(this.xAxis);
@@ -586,8 +603,16 @@ export class BaseChart {
         if (options.inlineLegend && this.legend && this.hasInlineLegend()) {
             components.push(this.legend);
         }
+        if (options.title) {
+            components.push(...this.getTextComponents('bottom'));
+        }
         return components;
     }
+    getTextComponents(position) {
+        return this.textComponents.filter((component) => {
+            return component.position === position;
+        });
+    }
     getExportComponents() {
         return this.getBaseExportComponents({
             title: true,
@@ -603,7 +628,9 @@ export class BaseChart {
     }
     getBaseExportComponents(options) {
         const components = [];
-        this.pushIfIncluded(components, options.title, this.title);
+        if (options.title) {
+            components.push(...this.textComponents);
+        }
         this.pushIfIncluded(components, options.grid, this.grid);
         this.pushIfIncluded(components, options.xAxis, this.xAxis);
         this.pushIfIncluded(components, options.yAxis, this.yAxis);
@@ -612,6 +639,13 @@ export class BaseChart {
         return components;
     }
     registerBaseComponent(component) {
+        if (this.isTextComponent(component)) {
+            this.textComponents.push(component);
+            if (component.type === 'title' && !this.title) {
+                this.title = component;
+            }
+            return true;
+        }
         return this.tryRegisterComponent(component, this.getBaseComponentSlots());
     }
     collectExportOverrides(context) {
@@ -739,7 +773,18 @@ export class BaseChart {
         return overrideComponents;
     }
     applyComponentOverrides(overrides) {
-        return this.applySlotOverrides(overrides, this.getBaseComponentSlots());
+        const previousTitle = this.title;
+        const restoreSlots = this.applySlotOverrides(overrides, this.getBaseComponentSlots());
+        const restoreText = this.applyArrayComponentOverrides(this.textComponents, overrides, this.isTextComponent);
+        this.title =
+            this.textComponents.find((component) => {
+                return component.type === 'title';
+            }) ?? null;
+        return () => {
+            restoreText();
+            restoreSlots();
+            this.title = previousTitle;
+        };
     }
     renderExportChart(chart, width, height) {
         const container = document.createElement('div');
@@ -770,11 +815,10 @@ export class BaseChart {
         });
     }
     renderTitle(svg) {
-        if (!this.title) {
-            return;
-        }
-        const position = this.layoutManager.getComponentPosition(this.title);
-        this.title.render(svg, this.renderTheme, this.width, position.x, position.y);
+        this.textComponents.forEach((component) => {
+            const position = this.layoutManager.getComponentPosition(component);
+            component.render(svg, this.renderTheme, this.width, position.x, position.y);
+        });
     }
     renderInlineLegend(svg) {
         if (!this.legend || !this.hasInlineLegend()) {
@@ -1060,15 +1104,11 @@ export class BaseChart {
             components.splice(0, components.length, ...previousState);
         };
     }
+    isTextComponent(component) {
+        return component.type === 'text' || component.type === 'title';
+    }
     getBaseComponentSlots() {
         return [
-            {
-                type: 'title',
-                get: () => this.title,
-                set: (component) => {
-                    this.title = component;
-                },
-            },
             {
                 type: 'grid',
                 get: () => this.grid,

package/dist/chart-group.d.ts

@@ -56,7 +56,7 @@ export declare class ChartGroup {
     private readonly warnedColorConflicts;
     private container;
     private legend;
-    private title;
+    private readonly textComponents;
     private resizeObserver;
     private readyPromise;
     private childLegendSnapshot;
@@ -69,6 +69,7 @@ export declare class ChartGroup {
     addChild(component: {
         type: string;
     }): this;
+    private isTextComponent;
     render(target: string | HTMLElement): HTMLElement | null;
     refresh(): HTMLElement | null;
     whenReady(): Promise<void>;
@@ -79,6 +80,7 @@ export declare class ChartGroup {
     toggleLegendSeries(dataKey: string): this;
     setLegendVisibility(visibility: Record<string, boolean>): this;
     onLegendChange(callback: () => void): () => void;
+    private resolveAccessibleLabel;
     export(format: ChartGroupExportFormat, options?: ExportOptions): Promise<string | Blob | void>;
     destroy(): void;
     private bindChartRenderCallback;
@@ -105,15 +107,19 @@ export declare class ChartGroup {
     private serializeChildLegendState;
     private serializeChildYDomains;
     private renderLegendIntoContainer;
-    private renderTitleSvg;
+    private renderTextSvg;
+    private renderTextSvgs;
     private renderLegendSvg;
     private setupResizeObserver;
     private exportSVG;
     private resolveChartOptions;
     private refreshIfMounted;
     private prepareRenderState;
+    private sumRenderedTextHeight;
     private createRenderHosts;
     private appendRenderedSection;
+    private appendRenderedTextSections;
+    private resolveTextSectionClassName;
     private renderLayoutItems;
     private createChartHost;
     private createReadyPromise;
@@ -122,9 +128,16 @@ export declare class ChartGroup {
     private createRasterExportOptions;
     private exportPdfContent;
     private resolveExportLayoutState;
+    private createExportLayoutState;
+    private createExportRenderContext;
+    private resolveBaseExportHeight;
+    private createExportComponent;
+    private runExportHooks;
     private resolveLiveChartHeightOverride;
     private exportLayoutItems;
     private composeExportSvg;
+    private syncAccessibleLabelFromSvg;
+    private appendExportTextSections;
     private validateResponsiveConfig;
     private validateItemResponsiveConfig;
     private resolveResponsiveConfigForWidth;