@internetstiftelsen/charts 0.5.1 → 0.6.1

package/theme.js

@@ -1,3 +1,13 @@
+export const DEFAULT_COLOR_PALETTE = [
+    '#50b2fc', // ocean
+    '#ff4069', // ruby
+    '#55c7b4', // jade
+    '#ffce2e', // lemon
+    '#c27fec', // peacock
+    '#f99963', // sandstone
+    '#ff9fb4', // ruby-light
+    '#1f2a36', // cyberspace
+];
 export const defaultTheme = {
     width: 928,
     height: 600,
@@ -5,32 +15,30 @@ export const defaultTheme = {
     margins: {
         top: 20,
         right: 20,
-        bottom: 30,
-        left: 40,
+        bottom: 20,
+        left: 20,
     },
     grid: {
         color: '#e0e0e0',
         opacity: 0.5,
     },
-    colorPalette: [
-        '#50b2fc', // ocean
-        '#ff4069', // ruby
-        '#55c7b4', // jade
-        '#ffce2e', // lemon
-        '#c27fec', // peacock
-        '#f99963', // sandstone
-        '#ff9fb4', // ruby-light
-        '#1f2a36', // cyberspace
-    ],
+    colorPalette: [...DEFAULT_COLOR_PALETTE],
     axis: {
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
         fontSize: '14',
         fontWeight: 'normal',
+        groupLabel: {
+            fontWeight: '700',
+            color: '#111827',
+        },
     },
     legend: {
         boxSize: 24,
         uncheckedColor: '#d0d0d0',
         fontSize: 14,
+        paddingX: 0,
+        itemSpacingX: 20,
+        itemSpacingY: 8,
     },
     line: {
         strokeWidth: 4,
@@ -45,7 +53,7 @@ export const defaultTheme = {
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
         fontWeight: '600',
         color: '#1f2a36',
-        background: 'rgba(255, 255, 255, 0.95)',
+        background: '#ffffff',
         border: '#e0e0e0',
         borderRadius: 4,
         padding: 4,
@@ -80,8 +88,8 @@ export const newspaperTheme = {
     margins: {
         top: 20,
         right: 20,
-        bottom: 30,
-        left: 40,
+        bottom: 20,
+        left: 20,
     },
     grid: {
         color: '#2c2c2c',
@@ -101,11 +109,18 @@ export const newspaperTheme = {
         fontFamily: 'Georgia, "Times New Roman", Times, serif',
         fontSize: '13',
         fontWeight: '600',
+        groupLabel: {
+            fontWeight: '700',
+            color: '#1a1a1a',
+        },
     },
     legend: {
         boxSize: 18,
         uncheckedColor: '#d3d3d3',
         fontSize: 13,
+        paddingX: 0,
+        itemSpacingX: 20,
+        itemSpacingY: 8,
     },
     line: {
         strokeWidth: 2.5,
@@ -121,7 +136,7 @@ export const newspaperTheme = {
         fontFamily: 'Georgia, "Times New Roman", Times, serif',
         fontWeight: '600',
         color: '#1a1a1a',
-        background: 'rgba(245, 245, 220, 0.95)',
+        background: '#ffffff',
         border: '#2c2c2c',
         borderRadius: 2,
         padding: 3,

package/tooltip.d.ts

@@ -1,8 +1,9 @@
 import { type Selection } from 'd3';
-import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme, ExportHooks, TooltipConfigBase } from './types.js';
+import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme, ExportHooks, TooltipConfigBase, ScaleType } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { Line } from './line.js';
 import type { Bar } from './bar.js';
+import type { Area } from './area.js';
 import type { PlotAreaBounds } from './layout-manager.js';
 export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     readonly id = "iisChartTooltip";
@@ -20,6 +21,6 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     getExportConfig(): TooltipConfigBase;
     createExportComponent(override?: Partial<TooltipConfigBase>): ChartComponent;
     initialize(theme: ChartTheme): void;
-    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar)[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean): void;
+    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar | Area)[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean, categoryScaleType?: ScaleType, resolveSeriesValue?: (series: Line | Bar | Area, dataPoint: DataItem, index: number) => number): void;
     cleanup(): void;
 }

package/tooltip.js

@@ -86,31 +86,40 @@ export class Tooltip {
             .style('z-index', '1000');
         this.tooltipDiv = tooltip;
     }
-    attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal = false) {
+    attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal = false, categoryScaleType = 'band', resolveSeriesValue = (targetSeries, dataPoint) => {
+        const rawValue = dataPoint[targetSeries.dataKey];
+        if (rawValue === null || rawValue === undefined) {
+            return NaN;
+        }
+        return parseValue(rawValue);
+    }) {
         if (!this.tooltipDiv)
             return;
         const tooltip = this.tooltipDiv;
         const formatter = this.formatter;
         const labelFormatter = this.labelFormatter;
         const customFormatter = this.customFormatter;
-        // Helper to get x position for any scale type
+        const getCategoryScaleValue = (value, scaleType) => {
+            switch (scaleType) {
+                case 'band':
+                    return String(value);
+                case 'time':
+                    return value instanceof Date
+                        ? value
+                        : new Date(String(value));
+                case 'linear':
+                case 'log':
+                    return typeof value === 'number' ? value : Number(value);
+            }
+        };
         const getXPosition = (dataPoint) => {
             const xValue = dataPoint[xKey];
-            const scaled = x(xValue instanceof Date
-                ? xValue
-                : typeof xValue === 'string'
-                    ? xValue
-                    : new Date(xValue));
+            const scaled = x(getCategoryScaleValue(xValue, categoryScaleType));
             return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
         };
-        // Helper to get y position for category scale (used in horizontal orientation)
         const getYPosition = (dataPoint) => {
             const yValue = dataPoint[xKey];
-            const scaled = y(yValue instanceof Date
-                ? yValue
-                : typeof yValue === 'string'
-                    ? yValue
-                    : new Date(yValue));
+            const scaled = y(getCategoryScaleValue(yValue, categoryScaleType));
             return (scaled || 0) + (y.bandwidth ? y.bandwidth() / 2 : 0);
         };
         // Create overlay rect for mouse tracking using plot area bounds
@@ -123,11 +132,9 @@ export class Tooltip {
             .attr('height', plotArea.height)
             .style('fill', 'none')
             .style('pointer-events', 'all');
-        // Determine which series are lines vs bars
-        const lineSeries = series.filter((s) => s.type === 'line');
+        const lineSeries = series.filter((s) => s.type === 'line' || s.type === 'area');
         const barSeries = series.filter((s) => s.type === 'bar');
         const hasBarSeries = barSeries.length > 0;
-        // Create focus circles only for line series
         const focusCircles = lineSeries.map((s) => {
             const seriesColor = getSeriesColor(s);
             return svg
@@ -143,11 +150,9 @@ export class Tooltip {
         overlay
             .on('mousemove', (event) => {
             const [mouseX, mouseY] = pointer(event, svg.node());
-            // Find closest data point based on orientation
             let closestIndex = 0;
             let dataPointPosition;
             if (isHorizontal) {
-                // For horizontal charts, find closest by Y position (categories on Y axis)
                 const yPositions = data.map((d) => getYPosition(d));
                 let minDistance = Math.abs(mouseY - yPositions[0]);
                 for (let i = 1; i < yPositions.length; i++) {
@@ -160,7 +165,6 @@ export class Tooltip {
                 dataPointPosition = yPositions[closestIndex];
             }
             else {
-                // For vertical charts, find closest by X position (categories on X axis)
                 const xPositions = data.map((d) => getXPosition(d));
                 let minDistance = Math.abs(mouseX - xPositions[0]);
                 for (let i = 1; i < xPositions.length; i++) {
@@ -173,40 +177,40 @@ export class Tooltip {
                 dataPointPosition = xPositions[closestIndex];
             }
             const dataPoint = data[closestIndex];
-            // Update focus circles for line series
             lineSeries.forEach((s, i) => {
-                const value = parseValue(dataPoint[s.dataKey]);
+                const value = resolveSeriesValue(s, dataPoint, closestIndex);
+                if (!Number.isFinite(value)) {
+                    focusCircles[i].style('opacity', 0);
+                    return;
+                }
                 if (isHorizontal) {
-                    // Horizontal: cx = value position (X), cy = category position (Y)
                     focusCircles[i]
                         .attr('cx', x(value))
                         .attr('cy', dataPointPosition)
                         .style('opacity', 1);
                 }
                 else {
-                    // Vertical: cx = category position (X), cy = value position (Y)
                     focusCircles[i]
                         .attr('cx', dataPointPosition)
                         .attr('cy', y(value))
                         .style('opacity', 1);
                 }
             });
-            // Fade non-hovered bars
             if (hasBarSeries) {
                 barSeries.forEach((s) => {
                     const sanitizedKey = sanitizeForCSS(s.dataKey);
                     svg.selectAll(`.bar-${sanitizedKey}`).style('opacity', (_, i) => (i === closestIndex ? 1 : 0.5));
                 });
             }
-            // Build tooltip content
             let content;
             if (customFormatter) {
                 content = customFormatter(dataPoint, series);
             }
             else {
+                const labelValue = dataPoint[xKey];
                 const label = labelFormatter
-                    ? labelFormatter(dataPoint[xKey], dataPoint)
-                    : dataPoint[xKey];
+                    ? labelFormatter(String(labelValue), dataPoint)
+                    : String(labelValue);
                 content = `<strong>${label}</strong><br/>`;
                 series.forEach((s) => {
                     const value = dataPoint[s.dataKey];
@@ -220,23 +224,24 @@ export class Tooltip {
                     }
                 });
             }
-            // Position tooltip: X anchored to data point, Y at midpoint of values
             tooltip.style('visibility', 'visible').html(content);
-            // Get tooltip dimensions after content is set
             const tooltipNode = tooltip.node();
             const tooltipRect = tooltipNode.getBoundingClientRect();
             const tooltipWidth = tooltipRect.width;
             const tooltipHeight = tooltipRect.height;
             const svgRect = svg.node().getBoundingClientRect();
             const offsetX = 12;
-            // Calculate min/max values across all series for this data point
-            const values = series.map((s) => parseValue(dataPoint[s.dataKey]));
-            const minValue = Math.min(...values);
-            const maxValue = Math.max(...values);
+            const values = series.map((s) => resolveSeriesValue(s, dataPoint, closestIndex));
+            const finiteValues = values.filter((value) => Number.isFinite(value));
+            const minValue = finiteValues.length
+                ? Math.min(...finiteValues)
+                : 0;
+            const maxValue = finiteValues.length
+                ? Math.max(...finiteValues)
+                : 0;
             let tooltipX;
             let tooltipY;
             if (isHorizontal) {
-                // Horizontal: X at midpoint of values, Y anchored to category
                 const minX = x(minValue);
                 const maxX = x(maxValue);
                 const midX = (minX + maxX) / 2;
@@ -248,8 +253,7 @@ export class Tooltip {
                         tooltipHeight / 2;
             }
             else {
-                // Vertical: X anchored to category, Y at midpoint of values
-                const minY = y(maxValue); // Note: Y scale is inverted
+                const minY = y(maxValue);
                 const maxY = y(minValue);
                 const midY = (minY + maxY) / 2;
                 tooltipX =
@@ -260,7 +264,6 @@ export class Tooltip {
                 tooltipY =
                     svgRect.top + window.scrollY + midY - tooltipHeight / 2;
             }
-            // Edge detection - flip horizontally if approaching right edge
             const viewportWidth = window.innerWidth;
             if (tooltipX + tooltipWidth > viewportWidth - 10) {
                 if (isHorizontal) {
@@ -281,7 +284,6 @@ export class Tooltip {
                             offsetX;
                 }
             }
-            // Ensure tooltip doesn't go off edges
             tooltipX = Math.max(10, tooltipX);
             tooltipY = Math.max(10, Math.min(tooltipY, window.innerHeight +
                 window.scrollY -
@@ -294,7 +296,6 @@ export class Tooltip {
             .on('mouseout', () => {
             tooltip.style('visibility', 'hidden');
             focusCircles.forEach((circle) => circle.style('opacity', 0));
-            // Reset bar opacity
             if (hasBarSeries) {
                 barSeries.forEach((s) => {
                     const sanitizedKey = sanitizeForCSS(s.dataKey);

package/types.d.ts

@@ -1,5 +1,10 @@
 export type DataValue = string | number | boolean | Date | null | undefined;
 export type DataItem = Record<string, any>;
+export type GroupedDataGroup = {
+    group: string;
+    data: DataItem[];
+};
+export type ChartData = DataItem[] | GroupedDataGroup[];
 export type ExportFormat = 'svg' | 'json' | 'csv' | 'xlsx' | 'png' | 'jpg' | 'pdf';
 export type ExportOptions = {
     download?: boolean;
@@ -47,11 +52,20 @@ export type ChartTheme = {
         fontFamily: string;
         fontSize: string;
         fontWeight?: string;
+        groupLabel?: {
+            fontFamily?: string;
+            fontSize?: string;
+            fontWeight?: string;
+            color?: string;
+        };
     };
     legend: {
         boxSize: number;
         uncheckedColor: string;
         fontSize: number;
+        paddingX: number;
+        itemSpacingX: number;
+        itemSpacingY: number;
     };
     line: {
         strokeWidth: number;
@@ -136,10 +150,32 @@ export type BarConfigBase = {
 export type BarConfig = BarConfigBase & {
     exportHooks?: ExportHooks<BarConfigBase>;
 };
+export type AreaCurveType = 'linear' | 'monotone' | 'step' | 'natural' | 'basis' | 'cardinal';
+export type AreaConfigBase = {
+    dataKey: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    curve?: AreaCurveType;
+    stackId?: string | number;
+    baseline?: number;
+    showLine?: boolean;
+    showPoints?: boolean;
+    pointSize?: number;
+    valueLabel?: LineValueLabelConfig;
+};
+export type AreaConfig = AreaConfigBase & {
+    exportHooks?: ExportHooks<AreaConfigBase>;
+};
 export type BarStackConfig = {
     mode?: BarStackMode;
     gap?: number;
 };
+export type AreaStackMode = 'none' | 'normal' | 'percent';
+export type AreaStackConfig = {
+    mode?: AreaStackMode;
+};
 export declare function getSeriesColor(series: {
     stroke?: string;
     fill?: string;
@@ -147,6 +183,10 @@ export declare function getSeriesColor(series: {
 export type LabelOversizedBehavior = 'truncate' | 'wrap' | 'hide';
 export type XAxisConfigBase = {
     dataKey?: string;
+    labelKey?: string;
+    groupLabelKey?: string;
+    showGroupLabels?: boolean;
+    groupLabelGap?: number;
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
     oversizedBehavior?: LabelOversizedBehavior;
@@ -190,6 +230,9 @@ export type LegendConfigBase = {
     position?: 'bottom';
     marginTop?: number;
     marginBottom?: number;
+    paddingX?: number;
+    itemSpacingX?: number;
+    itemSpacingY?: number;
 };
 export type LegendConfig = LegendConfigBase & {
     exportHooks?: ExportHooks<LegendConfigBase>;
@@ -219,6 +262,7 @@ export type ScaleConfig = {
     domain?: ScaleDomainValue[];
     range?: number[];
     padding?: number;
+    groupGap?: number;
     nice?: boolean;
     min?: number;
     max?: number;
@@ -237,3 +281,11 @@ export type BarStackingContext = {
     totalData: Map<string, number>;
     gap: number;
 };
+export type AreaStackingContext = {
+    mode: AreaStackMode;
+    stackId: string | number;
+    seriesIndex: number;
+    totalSeries: number;
+    cumulativeData: Map<string, number>;
+    totalData: Map<string, number>;
+};

package/validation.d.ts

@@ -18,6 +18,10 @@ export declare class ChartValidator {
      * Validates that data contains at least one valid numeric value for the specified key
      */
     static validateNumericData(data: DataItem[], dataKey: string, componentName: string): void;
+    /**
+     * Validates that all non-null values are positive for logarithmic scales
+     */
+    static validatePositiveData(data: DataItem[], dataKey: string, componentName: string): void;
     /**
      * Validates scale configuration
      */

package/validation.js

@@ -55,6 +55,31 @@ export class ChartValidator {
             throw new ChartValidationError(`${componentName}: No valid numeric values found for dataKey "${dataKey}"`);
         }
     }
+    /**
+     * Validates that all non-null values are positive for logarithmic scales
+     */
+    static validatePositiveData(data, dataKey, componentName) {
+        const invalidIndices = [];
+        data.forEach((item, index) => {
+            const rawValue = item[dataKey];
+            if (rawValue === null || rawValue === undefined) {
+                return;
+            }
+            const value = typeof rawValue === 'number'
+                ? rawValue
+                : parseFloat(String(rawValue));
+            if (!Number.isFinite(value) || value <= 0) {
+                invalidIndices.push(index);
+            }
+        });
+        if (invalidIndices.length > 0) {
+            const indices = invalidIndices.slice(0, 3).join(', ');
+            const more = invalidIndices.length > 3
+                ? ` and ${invalidIndices.length - 3} more`
+                : '';
+            throw new ChartValidationError(`${componentName}: Logarithmic scale requires values > 0 for dataKey "${dataKey}" (invalid at indices: ${indices}${more})`);
+        }
+    }
     /**
      * Validates scale configuration
      */

package/x-axis.d.ts

@@ -1,9 +1,13 @@
 import { type Selection } from 'd3';
-import type { XAxisConfig, ChartTheme, D3Scale, ExportHooks, XAxisConfigBase } from './types.js';
+import type { XAxisConfig, ChartTheme, D3Scale, DataItem, ExportHooks, XAxisConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     readonly type: "xAxis";
     readonly dataKey?: string;
+    readonly labelKey?: string;
+    readonly groupLabelKey?: string;
+    readonly showGroupLabels: boolean;
+    readonly groupLabelGap: number;
     private readonly rotatedLabels;
     private readonly tickPadding;
     private fontSize;
@@ -16,6 +20,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly minLabelGap;
     private readonly preserveEndLabels;
     readonly exportHooks?: ExportHooks<XAxisConfigBase>;
+    private resolveGroupLabelStyle;
     constructor(config?: XAxisConfig);
     getExportConfig(): XAxisConfigBase;
     createExportComponent(override?: Partial<XAxisConfigBase>): LayoutAwareComponent;
@@ -25,7 +30,10 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     getRequiredSpace(): ComponentSpace;
     estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement): void;
     clearEstimatedSpace(): void;
-    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number): void;
+    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number, data?: DataItem[]): void;
+    private buildLabelLookup;
+    private renderGroupLabels;
+    private buildGroupRanges;
     private applyLabelConstraints;
     private wrapTextElement;
     private addTitleTooltip;