@internetstiftelsen/charts 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,417 @@
+# Chart Library
+
+A framework-agnostic, composable charting library built on D3.js with TypeScript.
+
+## Features
+
+- **Framework Agnostic**: Core library has zero framework dependencies - works with vanilla JS, React, Vue, Svelte, or any other framework
+- **Flexible Scale System**: Support for band, linear, time, and logarithmic scales
+- **Composable Architecture**: Build charts by composing components (lines, axes, grids, tooltips, legends, titles)
+- **Layout-Driven Design**: Components self-measure and automatically adjust chart dimensions
+- **Automatic Resize**: Built-in ResizeObserver handles responsive behavior automatically
+- **Type Safe**: Written in TypeScript with comprehensive type definitions
+- **Data Validation**: Built-in validation with helpful error messages
+- **Performance Optimized**: Data caching and minimized redundant calculations
+- **Automatic Color Assignment**: Smart color palette system with sensible defaults
+
+## Installation
+
+```bash
+npm install @internetstiftelsen/charts
+```
+
+## Quick Start
+
+### Vanilla JavaScript
+
+```javascript
+import { XYChart } from '@internetstiftelsen/charts/xy-chart';
+import { Line } from '@internetstiftelsen/charts/line';
+import { Bar } from '@internetstiftelsen/charts/bar';
+import { XAxis } from '@internetstiftelsen/charts/x-axis';
+import { YAxis } from '@internetstiftelsen/charts/y-axis';
+import { Grid } from '@internetstiftelsen/charts/grid';
+import { Tooltip } from '@internetstiftelsen/charts/tooltip';
+import { Legend } from '@internetstiftelsen/charts/legend';
+
+// Your data
+const data = [
+    { date: '2010', revenue: 100, expenses: 80 },
+    { date: '2011', revenue: 150, expenses: 90 },
+    { date: '2012', revenue: 200, expenses: 110 },
+    { date: '2013', revenue: 250, expenses: 130 },
+];
+
+// Create chart
+const chart = new XYChart({ data });
+
+// Add components
+chart
+    .addChild(new Title({ text: 'Revenue vs Expenses' }))
+    .addChild(new Grid({ horizontal: true, vertical: false }))
+    .addChild(new XAxis({ dataKey: 'date' }))
+    .addChild(new YAxis())
+    .addChild(
+        new Tooltip({
+            formatter: (dataKey, value) => `<strong>${dataKey}</strong>: $${value}k`,
+        })
+    )
+    .addChild(new Legend({ position: 'bottom' }))
+    .addChild(new Line({ dataKey: 'revenue' }))  // Auto-assigned color
+    .addChild(new Line({ dataKey: 'expenses' })); // Auto-assigned color
+
+// Render to DOM (automatically resizes with container)
+chart.render('#chart-container');
+
+// Later: update with new data
+chart.update(newData);
+
+// Clean up when done
+chart.destroy();
+```
+
+### With React (Demo Wrapper)
+
+```jsx
+import { useRef, useEffect } from 'react';
+import { XYChart, Line, Bar, XAxis, YAxis, Grid, Tooltip, Legend } from './charts';
+
+function Chart({ data }) {
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+
+    useEffect(() => {
+        if (containerRef.current) {
+            // Create chart
+            const chart = new XYChart({ data });
+
+            chart
+                .addChild(new Grid({ horizontal: true }))
+                .addChild(new XAxis({ dataKey: 'column' }))
+                .addChild(new YAxis())
+                .addChild(new Tooltip())
+                .addChild(new Legend({ position: 'bottom' }))
+                .addChild(new Line({ dataKey: 'value1' }))
+                .addChild(new Line({ dataKey: 'value2' }));
+
+            chart.render(containerRef.current);
+            chartRef.current = chart;
+
+            return () => {
+                chart.destroy();
+            };
+        }
+    }, []);
+
+    // Update when data changes
+    useEffect(() => {
+        if (chartRef.current && data) {
+            chartRef.current.update(data);
+        }
+    }, [data]);
+
+    return <div ref={containerRef} />;
+}
+```
+
+## API Reference
+
+### XYChart
+
+The main chart class for creating XY-coordinate charts (line, bar, or mixed).
+
+#### Constructor
+
+```typescript
+new XYChart(config: XYChartConfig)
+```
+
+**Config Options:**
+
+- `data: DataItem[]` - Array of data objects (required)
+- `theme?: Partial<ChartTheme>` - Theme customization
+    - `width: number` - Chart max-width in pixels (default: 928)
+    - `height: number` - Chart height in pixels (default: 600)
+    - `margins: { top, right, bottom, left }` - Base margins around plot area (default: { top: 20, right: 20, bottom: 30, left: 40 })
+    - `colorPalette: string[]` - Array of colors for auto-assignment
+    - `gridColor: string` - Grid line color (default: '#e0e0e0')
+    - `axis: { fontFamily, fontSize }` - Axis text styling
+- `scales?: AxisScaleConfig` - Scale configuration
+    - `x?: { type: 'band' | 'linear' | 'time' | 'log', domain?: any[], padding?: number, nice?: boolean }`
+    - `y?: { type: 'band' | 'linear' | 'time' | 'log', domain?: any[], padding?: number, nice?: boolean }`
+
+#### Methods
+
+**`addChild(component: ChartComponent): this`**
+Adds a component to the chart (chainable).
+
+**`render(target: string): HTMLElement`**
+Renders the chart to a DOM element specified by CSS selector. Automatically sets up resize handling.
+
+**`update(data: DataItem[]): void`**
+Updates the chart with new data and re-renders.
+
+**`destroy(): void`**
+Cleans up all resources, removes resize observer, and clears the chart from the DOM.
+
+### Components
+
+#### Line
+
+Renders a line series on the chart.
+
+```typescript
+new Line({
+    dataKey: string,          // Key in data objects for Y values (required)
+    stroke? : string,          // Line color (auto-assigned if omitted)
+    strokeWidth? : number,     // Line width in pixels (default: 2)
+})
+```
+
+#### Bar
+
+Renders a bar series on the chart.
+
+```typescript
+new Bar({
+    dataKey: string,          // Key in data objects for Y values (required)
+    fill? : string,            // Bar color (auto-assigned if omitted)
+})
+```
+
+#### XAxis
+
+Renders the X axis.
+
+```typescript
+new XAxis({
+    dataKey? : string,  // Key in data objects for X values (auto-detected if omitted)
+})
+```
+
+#### YAxis
+
+Renders the Y axis.
+
+```typescript
+new YAxis({
+    tickFormat?: string | null,  // D3 format specifier (e.g., 's' for SI-prefix like "35k"). Default: null (no formatting)
+})
+```
+
+**Examples:**
+```javascript
+new YAxis()                         // Shows raw numbers: 35000
+new YAxis({ tickFormat: 's' })      // Shows SI-prefix: 35k
+new YAxis({ tickFormat: '$,' })     // Shows formatted: $35,000
+```
+
+#### Grid
+
+Renders grid lines.
+
+```typescript
+new Grid({
+    horizontal? : boolean,  // Show horizontal lines (default: true)
+    vertical? : boolean,    // Show vertical lines (default: true)
+})
+```
+
+#### Tooltip
+
+Renders interactive tooltips on hover.
+
+```typescript
+new Tooltip({
+    formatter? : (dataKey: string, value: any, data: DataItem) => string
+})
+```
+
+**Example formatter:**
+
+```javascript
+new Tooltip({
+    formatter: (dataKey, value, data) =>
+        `<strong>${dataKey}</strong><br/>Value: ${value}<br/>Date: ${data.date}`
+})
+```
+
+#### Legend
+
+Renders a legend for the chart.
+
+```typescript
+new Legend({
+    position?: 'bottom',      // Position (currently only 'bottom' supported)
+    marginTop?: number,       // Space above legend (default: 20)
+    marginBottom?: number,    // Space below legend (default: 10)
+})
+```
+
+#### Title
+
+Renders a title for the chart.
+
+```typescript
+new Title({
+    text: string,             // Title text (required)
+    fontSize?: number,        // Font size in pixels (default: 18)
+    fontWeight?: string,      // Font weight (default: 'bold')
+    align?: 'left' | 'center' | 'right',  // Alignment (default: 'center')
+    marginTop?: number,       // Space above title (default: 10)
+    marginBottom?: number,    // Space below title (default: 15)
+})
+```
+
+## Advanced Usage
+
+### Custom Scale Types
+
+Use time scales for temporal data:
+
+```javascript
+const chart = new XYChart({
+    data: [
+        { date: new Date('2024-01-01'), value: 100 },
+        { date: new Date('2024-01-02'), value: 150 },
+    ],
+    scales: {
+        x: { type: 'time', nice: true },
+        y: { type: 'linear', nice: true },
+    },
+});
+```
+
+Use logarithmic scales for exponential data:
+
+```javascript
+const chart = new XYChart({
+    data: [
+        { x: 1, y: 10 },
+        { x: 2, y: 100 },
+        { x: 3, y: 1000 },
+    ],
+    scales: {
+        y: { type: 'log', domain: [1, 10000] },
+    },
+});
+```
+
+### Custom Theming
+
+```javascript
+const chart = new XYChart({
+    data,
+    theme: {
+        width: 1200,           // Max-width (chart won't exceed this)
+        height: 600,
+        margins: {
+            top: 30,
+            right: 30,
+            bottom: 40,
+            left: 60,
+        },
+        colorPalette: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f7b731'],
+        gridColor: '#333333',
+        axis: {
+            fontFamily: 'Inter, sans-serif',
+            fontSize: '12',
+        },
+    },
+});
+```
+
+### Manual Color Assignment
+
+```javascript
+chart
+    .addChild(new Line({ dataKey: 'revenue', stroke: '#00ff00' }))
+    .addChild(new Line({ dataKey: 'expenses', stroke: '#ff0000' }));
+```
+
+### Responsive Charts
+
+Charts automatically resize with their container using ResizeObserver. The chart width adapts to the container up to the `theme.width` (which acts as max-width).
+
+```javascript
+// Container width: 500px → Chart width: 500px
+// Container width: 1200px → Chart width: 928px (theme default max-width)
+
+// Custom max-width
+const chart = new XYChart({
+    data,
+    theme: { width: 1200 },  // Chart won't exceed 1200px
+});
+```
+
+**No manual resize calls needed** - the chart automatically responds to container size changes!
+
+## Data Validation
+
+The library includes built-in validation with helpful error messages:
+
+```javascript
+// Empty data
+new XYChart({ data: [] });
+// Error: Data array cannot be empty
+
+// Missing dataKey
+new Line({ dataKey: 'nonexistent' });
+// Error: Line: dataKey "nonexistent" not found in data items at indices: 0, 1, 2
+
+// Invalid numeric data
+new Line({ dataKey: 'textField' });
+// Error: Line: No valid numeric values found for dataKey "textField"
+```
+
+## Browser Support
+
+Modern browsers with ES6+ support. Uses D3.js v7.
+
+## TypeScript
+
+Full TypeScript support included:
+
+```typescript
+import type { DataItem, ChartTheme, LineConfig } from './charts/types';
+
+const data: DataItem[] = [
+    { x: 1, y: 100 },
+    { x: 2, y: 200 },
+];
+
+const config: LineConfig = {
+    dataKey: 'y',
+    stroke: '#8884d8',
+    strokeWidth: 2,
+};
+```
+
+## Architecture
+
+The library follows a composable, layout-driven design:
+
+- **BaseChart**: Abstract base class providing common functionality (lifecycle, rendering, validation)
+- **XYChart**: Concrete implementation for XY-coordinate charts (lines, bars, or mixed)
+- **LayoutManager**: Calculates component positions and plot area dimensions (D3 margin convention)
+- **LayoutAwareComponent**: Interface for self-measuring components (Title, Legend, Axes)
+- **Components**: Modular components that implement `ChartComponent` or `LayoutAwareComponent`
+- **Validation**: Centralized validation layer with `ChartValidator`
+- **Scales**: Flexible scale factory supporting multiple D3 scale types
+
+Key principles:
+- **Layout-driven**: Components report their space requirements, plot area adjusts automatically
+- **Separation of concerns**: Only the plot area (grid) scales; UI elements stay fixed size
+- **D3 conventions**: Follows D3's margin convention pattern for clean, predictable layouts
+
+This architecture makes it easy to add new chart types or series (Area, Scatter, etc.) by extending BaseChart or implementing new series components.
+
+## Performance
+
+- **Data Caching**: Sorted data is cached to avoid redundant sorting operations
+- **Smart Re-rendering**: Only re-renders when necessary (data updates or container resize)
+- **Automatic Cleanup**: ResizeObserver and tooltips properly cleaned up on destroy
+- **Minimal DOM Manipulation**: Uses D3's efficient data binding
+- **SVG Optimization**: Clean SVG generation with proper cleanup
+- **Small Bundle**: ~105 KB gzipped (including D3)
+- **Small Bundle**: ~105 KB gzipped (including D3)

package/bar.d.ts

@@ -1,13 +1,13 @@
 import type { Selection } from 'd3';
-import type { BarConfig, DataItem, ScaleType, Orientation } from './types.js';
-import type { ChartComponent } from '@/lib/chart-interface';
+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";
     readonly dataKey: string;
     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.d.ts

@@ -1,6 +1,6 @@
 import { type Selection } from 'd3';
 import type { DataItem, ChartTheme, AxisScaleConfig } from './types.js';
-import type { ChartComponent } from '@/lib/chart-interface';
+import type { ChartComponent } from './chart-interface.js';
 import type { XAxis } from './x-axis.js';
 import type { YAxis } from './y-axis.js';
 import type { Grid } from './grid.js';

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.d.ts

@@ -1,6 +1,6 @@
 import { type Selection } from 'd3';
 import type { GridConfig, ChartTheme } from './types.js';
-import type { ChartComponent } from '@/lib/chart-interface';
+import type { ChartComponent } from './chart-interface.js';
 export declare class Grid implements ChartComponent {
     readonly type: "grid";
     readonly horizontal: boolean;

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

@@ -2,7 +2,7 @@ import { type Selection } from 'd3';
 import type { LegendConfig, ChartTheme } from './types.js';
 import type { Line } from './line.js';
 import type { Bar } from './bar.js';
-import type { LayoutAwareComponent, ComponentSpace } from '@/lib/chart-interface';
+import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class Legend implements LayoutAwareComponent {
     readonly type: "legend";
     readonly position: LegendConfig['position'];
@@ -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

@@ -1,4 +1,3 @@
-import {} from 'd3';
 import { getSeriesColor } from './types.js';
 export class Legend {
     constructor(config) {
@@ -58,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
      */
@@ -137,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 { ChartComponent } from '@/lib/chart-interface';
+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,7 +1,8 @@
 {
-    "version": "0.0.2",
+    "version": "0.0.4",
     "name": "@internetstiftelsen/charts",
     "type": "module",
+    "sideEffects": false,
     "exports": {
         "./*": {
             "types": "./*.d.ts",
@@ -10,7 +11,8 @@
     },
     "files": [
         "*.js",
-        "*.d.ts"
+        "*.d.ts",
+        "README.md"
     ],
     "scripts": {
         "dev": "vite",
@@ -18,7 +20,7 @@
         "lint": "eslint .",
         "preview": "vite preview",
         "build:lib": "tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
-        "prepub": "rm -rf dist && npm run build:lib && cp package.json dist",
+        "prepub": "rm -rf dist && npm run build:lib && cp package.json dist && cp README.md dist",
         "pub": "npm run prepub && cd dist && npm publish --access public"
     },
     "dependencies": {

package/theme.d.ts

@@ -1,2 +1,7 @@
-import { type ChartTheme } from '@/lib/types';
+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,14 +1,17 @@
-import {} from '@/lib/types';
 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
@@ -22,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

@@ -1,4 +1,3 @@
-import {} from 'd3';
 export class Title {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -25,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,
@@ -46,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;
@@ -82,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

@@ -1,6 +1,6 @@
 import { type Selection } from 'd3';
 import type { TooltipConfig, DataItem, ChartTheme } from './types.js';
-import type { ChartComponent } from '@/lib/chart-interface';
+import type { ChartComponent } from './chart-interface.js';
 import type { Line } from './line.js';
 import type { Bar } from './bar.js';
 import type { PlotAreaBounds } from './layout-manager.js';
@@ -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.d.ts

@@ -1,6 +1,6 @@
 import { type Selection } from 'd3';
 import type { XAxisConfig, ChartTheme } from './types.js';
-import type { LayoutAwareComponent, ComponentSpace } from '@/lib/chart-interface';
+import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class XAxis implements LayoutAwareComponent {
     readonly type: "xAxis";
     readonly dataKey?: string;

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.d.ts

@@ -1,5 +1,5 @@
 import { BaseChart, type BaseChartConfig } from './base-chart.js';
-import type { ChartComponent } from '@/lib/chart-interface';
+import type { ChartComponent } from './chart-interface.js';
 export type XYChartConfig = BaseChartConfig;
 export declare class XYChart extends BaseChart {
     private readonly series;

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.d.ts

@@ -1,6 +1,6 @@
 import { type Selection } from 'd3';
 import type { ChartTheme, YAxisConfig } from './types.js';
-import type { LayoutAwareComponent, ComponentSpace } from '@/lib/chart-interface';
+import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class YAxis implements LayoutAwareComponent {
     readonly type: "yAxis";
     private readonly tickPadding;

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();
     }