@internetstiftelsen/charts 0.8.0 → 0.9.0

package/word-cloud-chart.js

@@ -0,0 +1,199 @@
+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,
+            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/xy-chart.d.ts

@@ -1,4 +1,4 @@
-import { BaseChart, type BaseChartConfig } from './base-chart.js';
+import { BaseChart, type BaseChartConfig, type BaseLayoutContext, type BaseRenderContext } from './base-chart.js';
 import type { ChartComponent } from './chart-interface.js';
 import { type AreaStackConfig, type BarStackConfig, type LegendSeries } from './types.js';
 export type XYChartConfig = BaseChartConfig & {
@@ -16,14 +16,16 @@ export declare class XYChart extends BaseChart {
     protected getExportComponents(): ChartComponent[];
     protected createExportChart(): BaseChart;
     protected applyComponentOverrides(overrides: Map<ChartComponent, ChartComponent>): () => void;
-    private rerender;
-    protected prepareLayout(): void;
-    protected renderChart(): 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 collectSeriesValues;

package/xy-chart.js

@@ -1,7 +1,13 @@
 import { max, min, scaleBand, scaleLinear, scaleLog, scaleTime, } from 'd3';
-import { BaseChart } from './base-chart.js';
+import { BaseChart, } from './base-chart.js';
 import { ChartValidator } from './validation.js';
 import { GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
+const DEFAULT_SERIES_COLOR = '#8884d8';
+function isXYSeries(component) {
+    return (component.type === 'line' ||
+        component.type === 'bar' ||
+        component.type === 'area');
+}
 export class XYChart extends BaseChart {
     constructor(config) {
         super(config);
@@ -41,82 +47,26 @@ export class XYChart extends BaseChart {
         this.areaStackMode = config.areaStack?.mode ?? 'none';
     }
     addChild(component) {
-        const type = component.type;
-        if (type === 'line' || type === 'bar' || type === 'area') {
-            const series = component;
-            const defaultColor = '#8884d8';
-            const colorIndex = this.series.length % this.theme.colorPalette.length;
-            const newColor = this.theme.colorPalette[colorIndex];
-            if (type === 'line') {
-                const lineSeries = series;
-                const currentColor = lineSeries.stroke;
-                if (!currentColor || currentColor === defaultColor) {
-                    lineSeries.stroke = newColor;
-                }
-            }
-            else if (type === 'bar') {
-                const barSeries = series;
-                const currentColor = barSeries.fill;
-                if (!currentColor || currentColor === defaultColor) {
-                    barSeries.fill = newColor;
-                }
-            }
-            else {
-                const areaSeries = series;
-                const isUsingDefaultColor = (!areaSeries.fill || areaSeries.fill === defaultColor) &&
-                    (!areaSeries.stroke || areaSeries.stroke === defaultColor);
-                if (isUsingDefaultColor) {
-                    areaSeries.fill = newColor;
-                    areaSeries.stroke = newColor;
-                }
-            }
-            this.series.push(series);
-        }
-        else if (type === 'xAxis') {
-            this.xAxis = component;
-        }
-        else if (type === 'yAxis') {
-            this.yAxis = component;
-        }
-        else if (type === 'grid') {
-            this.grid = component;
-        }
-        else if (type === 'tooltip') {
-            this.tooltip = component;
+        if (isXYSeries(component)) {
+            this.series.push(this.resolveSeriesDefaults(component));
+            return this;
         }
-        else if (type === 'legend') {
-            this.legend = component;
-            this.legend.setToggleCallback(() => {
-                this.rerender();
-            });
-        }
-        else if (type === 'title') {
-            this.title = component;
-        }
-        return this;
+        return super.addChild(component);
     }
     getExportComponents() {
-        const components = [];
-        if (this.title) {
-            components.push(this.title);
-        }
-        if (this.grid) {
-            components.push(this.grid);
-        }
-        components.push(...this.series);
-        if (this.xAxis) {
-            components.push(this.xAxis);
-        }
-        if (this.yAxis) {
-            components.push(this.yAxis);
-        }
-        if (this.tooltip) {
-            components.push(this.tooltip);
-        }
-        if (this.legend) {
-            components.push(this.legend);
-        }
-        return components;
+        return [
+            ...this.getBaseExportComponents({
+                title: true,
+                grid: true,
+            }),
+            ...this.series,
+            ...this.getBaseExportComponents({
+                xAxis: true,
+                yAxis: true,
+                tooltip: true,
+                legend: true,
+            }),
+        ];
     }
     createExportChart() {
         return new XYChart({
@@ -136,34 +86,16 @@ export class XYChart extends BaseChart {
     }
     applyComponentOverrides(overrides) {
         const restoreBase = super.applyComponentOverrides(overrides);
-        if (overrides.size === 0) {
-            return restoreBase;
-        }
-        const previousSeries = [...this.series];
-        this.series.forEach((series, index) => {
-            const override = overrides.get(series);
-            if (override &&
-                (override.type === 'line' ||
-                    override.type === 'bar' ||
-                    override.type === 'area')) {
-                this.series[index] = override;
-            }
-        });
+        const restoreSeries = this.applyArrayComponentOverrides(this.series, overrides, isXYSeries);
         return () => {
-            this.series.splice(0, this.series.length, ...previousSeries);
+            restoreSeries();
             restoreBase();
         };
     }
-    rerender() {
-        if (!this.container) {
-            return;
-        }
-        this.update(this.sourceData);
-    }
-    prepareLayout() {
-        const svgNode = this.svg?.node();
+    prepareLayout(context) {
+        super.prepareLayout(context);
         this.xAxis?.clearEstimatedSpace?.();
-        if (svgNode && this.xAxis) {
+        if (this.xAxis) {
             const xKey = this.getXKey();
             const labelKey = this.xAxis.labelKey;
             const labels = this.data.map((item) => {
@@ -172,16 +104,10 @@ export class XYChart extends BaseChart {
                 }
                 return item[xKey];
             });
-            this.xAxis.estimateLayoutSpace?.(labels, this.theme, svgNode);
-        }
-        if (svgNode && this.legend?.isInlineMode()) {
-            this.legend.estimateLayoutSpace(this.getLegendSeries(), this.theme, this.width, svgNode);
+            this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode);
         }
     }
-    renderChart() {
-        if (!this.plotArea) {
-            throw new Error('Plot area not calculated');
-        }
+    renderChart({ svg, plotGroup, plotArea, }) {
         this.series.forEach((series) => {
             const typeName = series.type === 'line'
                 ? 'Line'
@@ -209,32 +135,26 @@ export class XYChart extends BaseChart {
         const categoryScaleType = this.getCategoryScaleType();
         const visibleSeries = this.getVisibleSeries();
         this.setupScales();
-        if (this.title) {
-            const titlePos = this.layoutManager.getComponentPosition(this.title);
-            this.title.render(this.svg, this.theme, this.width, titlePos.x, titlePos.y);
-        }
+        this.renderTitle(svg);
         if (this.grid && this.x && this.y) {
-            this.grid.render(this.plotGroup, this.x, this.y, this.theme);
+            this.grid.render(plotGroup, this.x, this.y, this.renderTheme);
         }
         this.renderSeries(visibleSeries);
         if (this.x && this.y) {
             if (this.xAxis) {
-                this.xAxis.render(this.svg, this.x, this.theme, this.plotArea.bottom, this.data);
+                this.xAxis.render(svg, this.x, this.renderTheme, plotArea.bottom, this.data);
             }
             if (this.yAxis) {
-                this.yAxis.render(this.svg, this.y, this.theme, this.plotArea.left);
+                this.yAxis.render(svg, this.y, this.renderTheme, plotArea.left);
             }
         }
         if (this.tooltip && this.x && this.y) {
             const visibleAreaSeries = visibleSeries.filter((series) => series.type === 'area');
             const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, visibleAreaSeries);
-            this.tooltip.initialize(this.theme);
-            this.tooltip.attachToArea(this.svg, this.data, visibleSeries, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this), this.isHorizontalOrientation(), categoryScaleType, (series, dataPoint) => this.getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries));
-        }
-        if (this.legend?.isInlineMode()) {
-            const legendPos = this.layoutManager.getComponentPosition(this.legend);
-            this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, legendPos.x, legendPos.y);
+            this.tooltip.initialize(this.renderTheme);
+            this.tooltip.attachToArea(svg, this.data, visibleSeries, xKey, this.x, this.y, this.renderTheme, plotArea, this.parseValue.bind(this), this.isHorizontalOrientation(), categoryScaleType, (series, dataPoint) => this.getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries));
         }
+        this.renderInlineLegend(svg);
     }
     getXKey() {
         if (this.xAxis?.dataKey) {
@@ -261,11 +181,9 @@ export class XYChart extends BaseChart {
         return this.scaleConfig.x?.type || 'band';
     }
     getVisibleSeries() {
-        const displaySeries = this.getDisplaySeries();
-        if (!this.legend) {
-            return displaySeries;
-        }
-        return displaySeries.filter((series) => this.legend.isSeriesVisible(series.dataKey));
+        return this.filterVisibleItems(this.getDisplaySeries(), (series) => {
+            return series.dataKey;
+        });
     }
     getDisplaySeries() {
         if (!this.barStackReverseSeries) {
@@ -288,6 +206,39 @@ export class XYChart extends BaseChart {
             return nextBar;
         });
     }
+    resolveSeriesDefaults(series) {
+        const colorIndex = this.series.length % this.theme.colorPalette.length;
+        const paletteColor = this.theme.colorPalette[colorIndex];
+        if (series.type === 'line') {
+            return this.cloneSeriesWithOverride(series, {
+                stroke: this.shouldReplaceSeriesColor(series.stroke)
+                    ? paletteColor
+                    : series.stroke,
+            });
+        }
+        if (series.type === 'bar') {
+            return this.cloneSeriesWithOverride(series, {
+                fill: this.shouldReplaceSeriesColor(series.fill)
+                    ? paletteColor
+                    : series.fill,
+            });
+        }
+        const shouldUsePaletteColor = this.shouldReplaceSeriesColor(series.fill) &&
+            this.shouldReplaceSeriesColor(series.stroke);
+        return this.cloneSeriesWithOverride(series, shouldUsePaletteColor
+            ? {
+                fill: paletteColor,
+                stroke: paletteColor,
+            }
+            : {});
+    }
+    shouldReplaceSeriesColor(color) {
+        return !color || color === DEFAULT_SERIES_COLOR;
+    }
+    cloneSeriesWithOverride(series, override) {
+        const exportable = series;
+        return exportable.createExportComponent(override);
+    }
     setupScales() {
         const xKey = this.getXKey();
         const isHorizontal = this.isHorizontalOrientation();
@@ -555,13 +506,13 @@ export class XYChart extends BaseChart {
                 gap: this.barStackGap,
                 nextLayerData,
             };
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme, stackingContext);
+            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, stackingContext);
         });
         areaSeries.forEach((series) => {
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme, areaStackingContextBySeries.get(series), areaValueLabelLayer ?? undefined);
+            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, areaStackingContextBySeries.get(series), areaValueLabelLayer ?? undefined);
         });
         lineSeries.forEach((series) => {
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme);
+            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme);
         });
         if (areaValueLabelLayer) {
             areaValueLabelLayer.raise();