@internetstiftelsen/charts 0.0.3 → 0.0.4

package/bar.d.ts

@@ -1,5 +1,5 @@
 import type { Selection } from 'd3';
-import type { BarConfig, DataItem, ScaleType, Orientation } from './types.js';
+import type { BarConfig, DataItem, ScaleType, Orientation, ChartTheme } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Bar implements ChartComponent {
     readonly type: "bar";
@@ -7,7 +7,7 @@ export declare class Bar implements ChartComponent {
     readonly fill: string;
     readonly orientation: Orientation;
     constructor(config: BarConfig);
-    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType): void;
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType, _theme?: ChartTheme): void;
     private renderVertical;
     private renderHorizontal;
 }

package/bar.js

@@ -28,7 +28,7 @@ export class Bar {
         this.fill = config.fill || '#8884d8';
         this.orientation = config.orientation || 'vertical';
     }
-    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band') {
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', _theme) {
         if (this.orientation === 'vertical') {
             this.renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType);
         }

package/base-chart.js

@@ -146,13 +146,13 @@ export class BaseChart {
         if (!this.container)
             return;
         // Calculate current width
-        this.width = Math.min(this.container.getBoundingClientRect().width || this.theme.width, this.theme.width);
+        this.width =
+            this.container.getBoundingClientRect().width || this.theme.width;
         // Clear and setup SVG
         this.container.innerHTML = '';
         this.svg = create('svg')
             .attr('width', '100%')
             .attr('height', this.theme.height)
-            .style('max-width', `${this.theme.width}px`)
             .style('display', 'block');
         this.container.appendChild(this.svg.node());
         // Calculate layout

package/grid.js

@@ -39,8 +39,8 @@ export class Grid {
                 .tickFormat(() => ''))
                 .call((g) => g
                 .selectAll('.tick line')
-                .attr('stroke', theme.gridColor)
-                .attr('stroke-opacity', 0.5))
+                .attr('stroke', theme.grid.color)
+                .attr('stroke-opacity', theme.grid.opacity))
                 .selectAll('.domain')
                 .remove();
         }
@@ -54,8 +54,8 @@ export class Grid {
                 .tickFormat(() => ''))
                 .call((g) => g
                 .selectAll('.tick line')
-                .attr('stroke', theme.gridColor)
-                .attr('stroke-opacity', 0.5))
+                .attr('stroke', theme.grid.color)
+                .attr('stroke-opacity', theme.grid.opacity))
                 .selectAll('.domain')
                 .remove();
         }

package/legend.d.ts

@@ -15,6 +15,7 @@ export declare class Legend implements LayoutAwareComponent {
     setToggleCallback(callback: () => void): void;
     isSeriesVisible(dataKey: string): boolean;
     private getCheckmarkPath;
+    private parseColor;
     /**
      * Returns the space required by the legend
      */

package/legend.js

@@ -57,6 +57,29 @@ export class Legend {
         const scale = size / 24;
         return `M ${4 * scale} ${12 * scale} L ${9 * scale} ${17 * scale} L ${20 * scale} ${6 * scale}`;
     }
+    parseColor(color) {
+        // Handle hex colors
+        if (color.startsWith('#')) {
+            const hex = color.slice(1);
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            return { r, g, b };
+        }
+        // Handle rgb/rgba colors
+        if (color.startsWith('rgb')) {
+            const match = color.match(/\d+/g);
+            if (match) {
+                return {
+                    r: parseInt(match[0]),
+                    g: parseInt(match[1]),
+                    b: parseInt(match[2]),
+                };
+            }
+        }
+        // Default to black if we can't parse
+        return { r: 0, g: 0, b: 0 };
+    }
     /**
      * Returns the space required by the legend
      */
@@ -136,7 +159,13 @@ export class Legend {
             .append('path')
             .attr('d', this.getCheckmarkPath(boxSize))
             .attr('fill', 'none')
-            .attr('stroke', '#000')
+            .attr('stroke', (d) => {
+            // Calculate luminance to determine if we need black or white checkmark
+            const color = d.color;
+            const rgb = this.parseColor(color);
+            const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+            return luminance > 0.5 ? '#000' : '#fff';
+        })
             .attr('stroke-width', 2)
             .attr('stroke-linecap', 'round')
             .attr('stroke-linejoin', 'round')

package/line.d.ts

@@ -1,11 +1,11 @@
 import { type Selection } from 'd3';
-import type { LineConfig, DataItem, ScaleType } from './types.js';
+import type { LineConfig, DataItem, ScaleType, ChartTheme } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Line implements ChartComponent {
     readonly type: "line";
     readonly dataKey: string;
     readonly stroke: string;
-    readonly strokeWidth: number;
+    readonly strokeWidth?: number;
     constructor(config: LineConfig);
-    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType): void;
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType: ScaleType | undefined, theme: ChartTheme): void;
 }

package/line.js

@@ -27,9 +27,9 @@ export class Line {
         });
         this.dataKey = config.dataKey;
         this.stroke = config.stroke || '#8884d8';
-        this.strokeWidth = config.strokeWidth || 2;
+        this.strokeWidth = config.strokeWidth;
     }
-    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band') {
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
         const getXPosition = (d) => {
             const xValue = d[xKey];
             // Handle different scale types appropriately
@@ -58,13 +58,18 @@ export class Line {
         const lineGenerator = line()
             .x(getXPosition)
             .y((d) => y(parseValue(d[this.dataKey])) || 0);
+        const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
+        const pointSize = theme.line.point.size;
+        const pointStrokeWidth = theme.line.point.strokeWidth;
+        const pointStrokeColor = theme.line.point.strokeColor || this.stroke;
+        const pointColor = theme.line.point.color || this.stroke;
         // Add line path
         plotGroup
             .append('path')
             .datum(data)
             .attr('fill', 'none')
             .attr('stroke', this.stroke)
-            .attr('stroke-width', this.strokeWidth)
+            .attr('stroke-width', lineStrokeWidth)
             .attr('d', lineGenerator);
         // Add data point circles
         plotGroup
@@ -74,9 +79,9 @@ export class Line {
             .attr('class', `circle-${this.dataKey.replace(/\s+/g, '-')}`)
             .attr('cx', getXPosition)
             .attr('cy', (d) => y(parseValue(d[this.dataKey])) || 0)
-            .attr('r', 4)
-            .attr('fill', this.stroke)
-            .attr('stroke', 'white')
-            .attr('stroke-width', 2);
+            .attr('r', pointSize)
+            .attr('fill', pointColor)
+            .attr('stroke', pointStrokeColor)
+            .attr('stroke-width', pointStrokeWidth);
     }
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.0.3",
+    "version": "0.0.4",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,

package/theme.d.ts

@@ -1,2 +1,7 @@
 import { type ChartTheme } from './types.js';
 export declare const defaultTheme: ChartTheme;
+export declare const newspaperTheme: ChartTheme;
+export declare const themes: {
+    default: ChartTheme;
+    newspaper: ChartTheme;
+};

package/theme.js

@@ -1,13 +1,17 @@
 export const defaultTheme = {
     width: 928,
     height: 600,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     margins: {
         top: 20,
         right: 20,
         bottom: 30,
         left: 40,
     },
-    gridColor: '#e0e0e0',
+    grid: {
+        color: '#e0e0e0',
+        opacity: 0.5,
+    },
     colorPalette: [
         '#50b2fc', // ocean
         '#ff4069', // ruby
@@ -21,10 +25,67 @@ export const defaultTheme = {
     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',
     },
     legend: {
         boxSize: 20,
         uncheckedColor: '#d0d0d0',
         fontSize: 14,
     },
+    line: {
+        strokeWidth: 4,
+        point: {
+            strokeWidth: 3,
+            color: 'white',
+            size: 5,
+        },
+    },
+};
+export const newspaperTheme = {
+    width: 928,
+    height: 600,
+    fontFamily: 'Georgia, "Times New Roman", Times, serif',
+    margins: {
+        top: 20,
+        right: 20,
+        bottom: 30,
+        left: 40,
+    },
+    grid: {
+        color: '#2c2c2c',
+        opacity: 0.15,
+    },
+    colorPalette: [
+        '#1a1a1a', // ink black
+        '#8b0000', // dark red
+        '#4a4a4a', // charcoal
+        '#6b4423', // sepia brown
+        '#2f4f4f', // dark slate
+        '#556b2f', // dark olive
+        '#8b4513', // saddle brown
+        '#708090', // slate gray
+    ],
+    axis: {
+        fontFamily: 'Georgia, "Times New Roman", Times, serif',
+        fontSize: '13',
+        fontWeight: '600',
+    },
+    legend: {
+        boxSize: 18,
+        uncheckedColor: '#d3d3d3',
+        fontSize: 13,
+    },
+    line: {
+        strokeWidth: 2.5,
+        point: {
+            strokeWidth: 1.5,
+            strokeColor: '#1a1a1a',
+            color: '#f5f5dc',
+            size: 5,
+        },
+    },
+};
+export const themes = {
+    default: defaultTheme,
+    newspaper: newspaperTheme,
 };

package/title.d.ts

@@ -6,6 +6,7 @@ export declare class Title implements LayoutAwareComponent {
     readonly text: string;
     private readonly fontSize;
     private readonly fontWeight;
+    private readonly fontFamily?;
     private readonly align;
     private readonly marginTop;
     private readonly marginBottom;

package/title.js

@@ -24,6 +24,12 @@ export class Title {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "fontFamily", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "align", {
             enumerable: true,
             configurable: true,
@@ -45,6 +51,7 @@ export class Title {
         this.text = config.text;
         this.fontSize = config.fontSize ?? 18;
         this.fontWeight = config.fontWeight ?? 'bold';
+        this.fontFamily = config.fontFamily;
         this.align = config.align ?? 'center';
         this.marginTop = config.marginTop ?? 10;
         this.marginBottom = config.marginBottom ?? 15;
@@ -81,7 +88,7 @@ export class Title {
             .attr('text-anchor', textAnchor)
             .attr('font-size', `${this.fontSize}px`)
             .attr('font-weight', this.fontWeight)
-            .attr('font-family', theme.axis.fontFamily)
+            .attr('font-family', this.fontFamily || theme.fontFamily)
             .text(this.text);
     }
 }

package/tooltip.d.ts

@@ -10,6 +10,6 @@ export declare class Tooltip implements ChartComponent {
     private tooltipDiv;
     constructor(config?: TooltipConfig);
     initialize(theme: ChartTheme): void;
-    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar)[], xKey: string, x: any, y: any, _theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: any) => number): void;
+    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar)[], xKey: string, x: any, y: any, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: any) => number): void;
     cleanup(): void;
 }

package/tooltip.js

@@ -38,7 +38,7 @@ export class Tooltip {
             .style('pointer-events', 'none')
             .style('z-index', '1000');
     }
-    attachToArea(svg, data, series, xKey, x, y, _theme, plotArea, parseValue) {
+    attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue) {
         if (!this.tooltipDiv)
             return;
         const tooltip = this.tooltipDiv;
@@ -65,13 +65,14 @@ export class Tooltip {
             .style('pointer-events', 'all');
         // Create focus circles for each series
         const focusCircles = series.map((s) => {
+            const seriesColor = getSeriesColor(s);
             return svg
                 .append('circle')
                 .attr('class', `focus-circle-${s.dataKey.replace(/\s+/g, '-')}`)
-                .attr('r', 5)
-                .attr('fill', getSeriesColor(s))
-                .attr('stroke', 'white')
-                .attr('stroke-width', 2)
+                .attr('r', theme.line.point.size + 1)
+                .attr('fill', theme.line.point.color || seriesColor)
+                .attr('stroke', theme.line.point.strokeColor || seriesColor)
+                .attr('stroke-width', theme.line.point.strokeWidth)
                 .style('opacity', 0)
                 .style('pointer-events', 'none');
         });
@@ -114,8 +115,9 @@ export class Tooltip {
             });
             // Position tooltip relative to the data point
             const svgRect = svg.node().getBoundingClientRect();
-            const tooltipX = svgRect.left + xPos + 10;
+            const tooltipX = svgRect.left + window.scrollX + xPos + 10;
             const tooltipY = svgRect.top +
+                window.scrollY +
                 y(parseValue(dataPoint[series[0].dataKey])) -
                 10;
             tooltip

package/types.d.ts

@@ -5,23 +5,37 @@ export type ColorPalette = string[];
 export type ChartTheme = {
     width: number;
     height: number;
+    fontFamily: string;
     margins: {
         top: number;
         right: number;
         bottom: number;
         left: number;
     };
-    gridColor: string;
+    grid: {
+        color: string;
+        opacity: number;
+    };
     colorPalette: ColorPalette;
     axis: {
         fontFamily: string;
         fontSize: string;
+        fontWeight?: string;
     };
     legend: {
         boxSize: number;
         uncheckedColor: string;
         fontSize: number;
     };
+    line: {
+        strokeWidth: number;
+        point: {
+            strokeWidth: number;
+            strokeColor?: string;
+            color?: string;
+            size: number;
+        };
+    };
 };
 export type LineConfig = {
     dataKey: string;
@@ -60,6 +74,7 @@ export type TitleConfig = {
     text: string;
     fontSize?: number;
     fontWeight?: string;
+    fontFamily?: string;
     align?: 'left' | 'center' | 'right';
     marginTop?: number;
     marginBottom?: number;
@@ -75,6 +90,8 @@ export type ScaleConfig = {
     range?: any[];
     padding?: number;
     nice?: boolean;
+    min?: number;
+    max?: number;
 };
 export type AxisScaleConfig = {
     x?: Partial<ScaleConfig>;

package/x-axis.js

@@ -58,6 +58,7 @@ export class XAxis {
             .tickPadding(this.tickPadding))
             .attr('font-size', theme.axis.fontSize)
             .attr('font-family', theme.axis.fontFamily)
+            .attr('font-weight', theme.axis.fontWeight || 'normal')
             .attr('stroke', 'none');
         // Apply rotation to labels if enabled
         if (this.rotatedLabels) {

package/xy-chart.js

@@ -189,8 +189,8 @@ export class XYChart extends BaseChart {
         else if ((scaleType === 'linear' || scaleType === 'log') && dataKey) {
             // For linear and log scales with a dataKey, calculate from that key
             const values = this.data.map((d) => this.parseValue(d[dataKey]));
-            const minVal = min(values) ?? 0;
-            const maxVal = max(values) ?? 100;
+            const minVal = config.min ?? (min(values) ?? 0);
+            const maxVal = config.max ?? (max(values) ?? 100);
             domain =
                 scaleType === 'log' && minVal <= 0
                     ? [1, maxVal]
@@ -199,8 +199,8 @@ export class XYChart extends BaseChart {
         else {
             // Calculate from series data (for value axes without explicit dataKey)
             const values = this.data.flatMap((d) => this.series.map((s) => this.parseValue(d[s.dataKey])));
-            const minVal = min(values) ?? 0;
-            const maxVal = max(values) ?? 100;
+            const minVal = config.min ?? (min(values) ?? 0);
+            const maxVal = config.max ?? (max(values) ?? 100);
             domain =
                 scaleType === 'log' && minVal <= 0
                     ? [1, maxVal]
@@ -266,7 +266,7 @@ export class XYChart extends BaseChart {
             ? this.series.filter((series) => this.legend.isSeriesVisible(series.dataKey))
             : this.series;
         visibleSeries.forEach((series) => {
-            series.render(this.plotGroup, sortedData, xKey, this.x, this.y, this.parseValue, categoryScaleType);
+            series.render(this.plotGroup, sortedData, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme);
         });
     }
 }

package/y-axis.js

@@ -52,6 +52,7 @@ export class YAxis {
             .call(axis)
             .attr('font-size', theme.axis.fontSize)
             .attr('font-family', theme.axis.fontFamily)
+            .attr('font-weight', theme.axis.fontWeight || 'normal')
             .selectAll('.domain')
             .remove();
     }