@internetstiftelsen/charts 0.8.0 → 0.9.1

package/dist/word-cloud-chart.d.ts

@@ -0,0 +1,32 @@
+import { BaseChart, type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
+import type { ChartData } from './types.js';
+export type WordCloudRotationMode = 'none' | 'right-angle';
+export type WordCloudSpiral = 'archimedean' | 'rectangular';
+export type WordCloudConfig = {
+    maxWords?: number;
+    minWordLength?: number;
+    minValue?: number;
+    minFontSize?: number;
+    maxFontSize?: number;
+    padding?: number;
+    rotation?: WordCloudRotationMode;
+    spiral?: WordCloudSpiral;
+};
+export type WordCloudChartConfig = Pick<BaseChartConfig, 'data' | 'width' | 'height' | 'theme' | 'responsive'> & {
+    wordCloud?: WordCloudConfig;
+};
+export declare class WordCloudChart extends BaseChart {
+    private readonly options;
+    private layout;
+    private layoutRunId;
+    private resolvePendingReady;
+    constructor(config: WordCloudChartConfig);
+    destroy(): void;
+    protected validateSourceData(data: ChartData): void;
+    protected renderChart({ svg, plotArea }: BaseRenderContext): void;
+    protected createExportChart(): BaseChart;
+    private startLayout;
+    private renderWords;
+    private stopLayout;
+    private finishReady;
+}

package/dist/word-cloud-chart.js

@@ -0,0 +1,201 @@
+import cloud from 'd3-cloud';
+import { scaleSqrt } from 'd3';
+import { BaseChart, } from './base-chart.js';
+import { isGroupedData } from './grouped-data.js';
+const DEFAULT_OPTIONS = {
+    maxWords: 75,
+    minWordLength: 1,
+    minValue: 1,
+    minFontSize: 3,
+    maxFontSize: 20,
+    padding: 1,
+    rotation: undefined,
+    spiral: 'archimedean',
+};
+const GROUPED_DATA_ERROR = 'WordCloudChart: grouped datasets are not supported; provide a flat array of rows instead';
+function createPreparedWords(data, plotArea, options, colors) {
+    const counts = new Map();
+    data.forEach((row) => {
+        const word = row.word.trim();
+        const count = row.count;
+        if (!word ||
+            word.length < options.minWordLength ||
+            !Number.isFinite(count) ||
+            count < options.minValue) {
+            return;
+        }
+        counts.set(word, (counts.get(word) ?? 0) + count);
+    });
+    if (counts.size === 0) {
+        throw new Error('WordCloudChart: no valid words remain after filtering; adjust minWordLength or minValue, or provide valid rows');
+    }
+    const words = Array.from(counts.entries())
+        .map(([text, value]) => ({ text, value }))
+        .sort((left, right) => right.value - left.value)
+        .slice(0, options.maxWords);
+    const baseDimension = Math.max(1, Math.min(plotArea.width, plotArea.height));
+    const minFontSize = (baseDimension * options.minFontSize) / 100;
+    const maxFontSize = (baseDimension * options.maxFontSize) / 100;
+    const maxValue = words[0].value;
+    const minValue = words[words.length - 1].value;
+    const fontScale = maxValue === minValue
+        ? null
+        : scaleSqrt()
+            .domain([minValue, maxValue])
+            .range([minFontSize, maxFontSize]);
+    return words.map((word, index) => {
+        return {
+            text: word.text,
+            value: word.value,
+            size: fontScale ? fontScale(word.value) : maxFontSize,
+            color: colors[index % colors.length] ?? '#000000',
+        };
+    });
+}
+export class WordCloudChart extends BaseChart {
+    constructor(config) {
+        super(config);
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "layout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "layoutRunId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "resolvePendingReady", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        const wordCloud = config.wordCloud ?? {};
+        this.options = {
+            maxWords: wordCloud.maxWords ?? DEFAULT_OPTIONS.maxWords,
+            minWordLength: wordCloud.minWordLength ?? DEFAULT_OPTIONS.minWordLength,
+            minValue: wordCloud.minValue ?? DEFAULT_OPTIONS.minValue,
+            minFontSize: wordCloud.minFontSize ?? DEFAULT_OPTIONS.minFontSize,
+            maxFontSize: wordCloud.maxFontSize ?? DEFAULT_OPTIONS.maxFontSize,
+            padding: wordCloud.padding ?? DEFAULT_OPTIONS.padding,
+            rotation: wordCloud.rotation,
+            spiral: wordCloud.spiral ?? DEFAULT_OPTIONS.spiral,
+        };
+        this.initializeDataState();
+    }
+    destroy() {
+        this.layoutRunId += 1;
+        this.stopLayout();
+        this.setReadyPromise(Promise.resolve());
+        super.destroy();
+    }
+    validateSourceData(data) {
+        if (isGroupedData(data)) {
+            throw new Error(GROUPED_DATA_ERROR);
+        }
+    }
+    renderChart({ svg, plotArea }) {
+        this.stopLayout();
+        this.renderTitle(svg);
+        const words = createPreparedWords(this.data, plotArea, this.options, this.renderTheme.colorPalette);
+        this.setReadyPromise(new Promise((resolve) => {
+            this.resolvePendingReady = resolve;
+            this.startLayout(words, plotArea, ++this.layoutRunId, resolve);
+        }));
+    }
+    createExportChart() {
+        return new WordCloudChart({
+            data: this.sourceData,
+            width: this.configuredWidth,
+            height: this.configuredHeight,
+            theme: this.theme,
+            responsive: this.responsiveConfig,
+            wordCloud: this.options,
+        });
+    }
+    startLayout(words, plotArea, runId, resolve) {
+        const layout = cloud()
+            .words(words.map((word) => ({ ...word })))
+            .size([
+            Math.max(1, Math.floor(plotArea.width)),
+            Math.max(1, Math.floor(plotArea.height)),
+        ])
+            .padding(this.options.padding)
+            .spiral(this.options.spiral)
+            .font(this.renderTheme.fontFamily)
+            .fontWeight(this.renderTheme.valueLabel.fontWeight)
+            .fontSize((word) => word.size)
+            .text((word) => word.text)
+            .on('end', (placedWords) => {
+            this.layout = null;
+            if (runId !== this.layoutRunId ||
+                !this.plotGroup ||
+                !this.plotArea) {
+                this.finishReady(resolve);
+                return;
+            }
+            if (placedWords.length < words.length) {
+                console.warn(`[Chart Warning] WordCloudChart: rendered ${placedWords.length} of ${words.length} words within the available area; reduce maxWords or font sizes to fit more words`);
+            }
+            this.renderWords(this.plotGroup, this.plotArea, placedWords);
+            this.finishReady(resolve);
+        });
+        if (this.options.rotation === 'none') {
+            layout.rotate(0);
+        }
+        else if (this.options.rotation === 'right-angle') {
+            layout.rotate((_word, index) => (index % 2 === 0 ? 0 : 90));
+        }
+        this.layout = layout;
+        layout.start();
+    }
+    renderWords(plotGroup, plotArea, words) {
+        plotGroup.attr('transform', `translate(${plotArea.left}, ${plotArea.top})`);
+        plotGroup
+            .append('rect')
+            .attr('class', 'word-cloud-viewport')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', plotArea.width)
+            .attr('height', plotArea.height)
+            .attr('fill', 'transparent')
+            .attr('stroke', 'none')
+            .attr('pointer-events', 'none');
+        plotGroup
+            .append('g')
+            .attr('class', 'word-cloud')
+            .attr('transform', `translate(${plotArea.width / 2}, ${plotArea.height / 2})`)
+            .selectAll('text')
+            .data(words)
+            .join('text')
+            .attr('class', 'word-cloud-word')
+            .attr('text-anchor', 'middle')
+            .style('font-family', this.renderTheme.fontFamily)
+            .style('font-weight', String(this.renderTheme.valueLabel.fontWeight))
+            .style('font-size', (word) => `${word.size}px`)
+            .style('fill', (word) => word.color)
+            .attr('transform', (word) => `translate(${word.x ?? 0}, ${word.y ?? 0}) rotate(${word.rotate ?? 0})`)
+            .text((word) => word.text);
+    }
+    stopLayout() {
+        if (this.layout) {
+            this.layout.stop();
+            this.layout = null;
+        }
+        this.resolvePendingReady?.();
+        this.resolvePendingReady = null;
+    }
+    finishReady(resolve) {
+        this.resolvePendingReady = null;
+        resolve();
+    }
+}

package/{x-axis.d.ts → dist/x-axis.d.ts}

@@ -22,10 +22,11 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly minLabelGap;
     private readonly preserveEndLabels;
     readonly exportHooks?: ExportHooks<XAxisConfigBase>;
+    private resolveFontSizeValue;
     private resolveGroupLabelStyle;
     constructor(config?: XAxisConfig);
     getExportConfig(): XAxisConfigBase;
-    createExportComponent(override?: Partial<XAxisConfigBase>): LayoutAwareComponent;
+    createExportComponent(override?: Partial<XAxisConfigBase>): LayoutAwareComponent<XAxisConfigBase>;
     /**
      * Returns the space required by the x-axis
      */

package/{x-axis.js → dist/x-axis.js}

@@ -2,14 +2,23 @@ import { axisBottom } from 'd3';
 import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 import { GROUPED_CATEGORY_ID_KEY, GROUPED_CATEGORY_LABEL_KEY, GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
 export class XAxis {
+    resolveFontSizeValue(fontSize, fallback) {
+        if (typeof fontSize === 'number' && Number.isFinite(fontSize)) {
+            return fontSize;
+        }
+        if (typeof fontSize === 'string') {
+            const parsedFontSize = parseFloat(fontSize);
+            if (Number.isFinite(parsedFontSize)) {
+                return parsedFontSize;
+            }
+        }
+        return fallback;
+    }
     resolveGroupLabelStyle(theme) {
         const axisGroupLabel = theme.axis.groupLabel;
         const fontFamily = axisGroupLabel?.fontFamily ?? theme.axis.fontFamily;
         const fontWeight = axisGroupLabel?.fontWeight ?? '700';
-        const parsedFontSize = parseFloat(axisGroupLabel?.fontSize ?? theme.axis.fontSize);
-        const fontSize = Number.isFinite(parsedFontSize)
-            ? parsedFontSize
-            : this.fontSize;
+        const fontSize = this.resolveFontSizeValue(axisGroupLabel?.fontSize ?? theme.axis.fontSize, this.fontSize);
         const color = axisGroupLabel?.color ?? '#111827';
         return {
             fontFamily,
@@ -91,7 +100,6 @@ export class XAxis {
             writable: true,
             value: void 0
         });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         Object.defineProperty(this, "tickFormat", {
             enumerable: true,
             configurable: true,
@@ -223,12 +231,7 @@ export class XAxis {
             this.wrapLineCount = 1;
             return;
         }
-        const parsedFontSize = typeof theme.axis.fontSize === 'string'
-            ? parseFloat(theme.axis.fontSize)
-            : theme.axis.fontSize;
-        this.fontSize = Number.isFinite(parsedFontSize)
-            ? parsedFontSize
-            : this.fontSize;
+        this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
         const fontSize = this.fontSize;
         const fontFamily = theme.axis.fontFamily;
         const fontWeight = theme.axis.fontWeight || 'normal';
@@ -308,11 +311,12 @@ export class XAxis {
         }
         else if (this.tickFormat) {
             // Apply tick formatting if specified
-            if (typeof this.tickFormat === 'function') {
-                axisGenerator.tickFormat(this.tickFormat);
+            const tickFormat = this.tickFormat;
+            if (typeof tickFormat === 'function') {
+                axisGenerator.tickFormat((value) => tickFormat(value));
             }
             else {
-                axisGenerator.ticks(5, this.tickFormat);
+                axisGenerator.ticks(5, tickFormat);
             }
         }
         const axis = svg

package/{xy-chart.d.ts → dist/xy-chart.d.ts}

@@ -1,7 +1,8 @@
-import { BaseChart, type BaseChartConfig } from './base-chart.js';
-import type { ChartComponent } from './chart-interface.js';
-import { type AreaStackConfig, type BarStackConfig, type LegendSeries } from './types.js';
+import { BaseChart, type BaseChartConfig, type BaseLayoutContext, type BaseRenderContext } from './base-chart.js';
+import type { ChartComponentBase } from './chart-interface.js';
+import { type AreaStackConfig, type BarStackConfig, type LegendSeries, type Orientation } from './types.js';
 export type XYChartConfig = BaseChartConfig & {
+    orientation?: Orientation;
     barStack?: BarStackConfig;
     areaStack?: AreaStackConfig;
 };
@@ -11,21 +12,25 @@ export declare class XYChart extends BaseChart {
     private barStackGap;
     private barStackReverseSeries;
     private areaStackMode;
+    private readonly orientation;
     constructor(config: XYChartConfig);
-    addChild(component: ChartComponent): this;
-    protected getExportComponents(): ChartComponent[];
+    addChild(component: ChartComponentBase): this;
+    protected getExportComponents(): ChartComponentBase[];
     protected createExportChart(): BaseChart;
-    protected applyComponentOverrides(overrides: Map<ChartComponent, ChartComponent>): () => void;
-    private rerender;
-    protected prepareLayout(): void;
-    protected renderChart(): void;
+    protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
+    protected prepareLayout(context: BaseLayoutContext): void;
+    protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
     private getXKey;
     protected getLegendSeries(): LegendSeries[];
     private getCategoryScaleType;
     private getVisibleSeries;
     private getDisplaySeries;
+    private resolveSeriesDefaults;
+    private shouldReplaceSeriesColor;
+    private cloneSeriesWithOverride;
     private setupScales;
     private isHorizontalOrientation;
+    private validateSeriesOrientation;
     private collectSeriesValues;
     private getStackedAreaGroups;
     private buildBandDomainWithGroupGaps;