@internetstiftelsen/charts 0.13.0 → 0.13.1

package/dist/line.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLabelConfig, ExportHooks, LineConfigBase } from './types.js';
+import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLabelConfig, ExportHooks, LineConfigBase, LineCurveType, LinePointsConfig } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { XYPointAnimationContext, XYPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Line implements ChartComponent<LineConfigBase> {
@@ -7,6 +7,8 @@ export declare class Line implements ChartComponent<LineConfigBase> {
     readonly dataKey: string;
     readonly stroke: string;
     readonly strokeWidth?: number;
+    readonly curve: LineCurveType;
+    readonly points: Required<LinePointsConfig>;
     readonly valueLabel?: LineValueLabelConfig;
     readonly exportHooks?: ExportHooks<LineConfigBase>;
     constructor(config: LineConfig);

package/dist/line.js

@@ -1,7 +1,18 @@
-import { line } from 'd3';
+import { curveBasis, curveCardinal, curveLinear, curveMonotoneX, curveNatural, curveStep, line, } from 'd3';
 import { sanitizeForCSS, mergeDeep } from './utils.js';
 import { getScalePosition } from './scale-utils.js';
 import { buildXYDatumSnapshotKeys, createTransitionCompletionPromise, createLeftToRightRevealTransition, getEnterStaggerTiming, } from './xy-motion/helpers.js';
+const DEFAULT_LINE_POINTS = {
+    show: 'always',
+};
+const LINE_CURVE_FACTORIES = {
+    linear: curveLinear,
+    monotone: curveMonotoneX,
+    step: curveStep,
+    natural: curveNatural,
+    basis: curveBasis,
+    cardinal: curveCardinal,
+};
 export class Line {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -28,6 +39,18 @@ export class Line {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "curve", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "points", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "valueLabel", {
             enumerable: true,
             configurable: true,
@@ -43,6 +66,10 @@ export class Line {
         this.dataKey = config.dataKey;
         this.stroke = config.stroke || '#8884d8';
         this.strokeWidth = config.strokeWidth;
+        this.curve = config.curve || 'linear';
+        this.points = {
+            show: config.points?.show ?? DEFAULT_LINE_POINTS.show,
+        };
         this.valueLabel = config.valueLabel;
         this.exportHooks = config.exportHooks;
     }
@@ -51,6 +78,8 @@ export class Line {
             dataKey: this.dataKey,
             stroke: this.stroke,
             strokeWidth: this.strokeWidth,
+            curve: this.curve,
+            points: this.points,
             valueLabel: this.valueLabel,
         };
     }
@@ -80,7 +109,9 @@ export class Line {
         });
         const transitions = [
             ...this.renderLinePath(plotGroup, lineData, animatedLineData, theme, sanitizeForCSS(this.dataKey), animation),
-            ...this.renderLinePoints(plotGroup, validLineData, validAnimatedLineData, theme, animation),
+            ...(this.points.show === 'always'
+                ? this.renderLinePoints(plotGroup, validLineData, validAnimatedLineData, theme, animation)
+                : []),
         ];
         const snapshot = this.createSnapshot(validLineData);
         // Render value labels if enabled (only for valid values)
@@ -129,8 +160,10 @@ export class Line {
     }
     renderLinePath(plotGroup, lineData, animatedLineData, theme, sanitizedKey, animation) {
         const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
+        const curveFactory = LINE_CURVE_FACTORIES[this.curve] || curveLinear;
         const lineGenerator = line()
             .defined((entry) => entry.valid)
+            .curve(curveFactory)
             .x((entry) => entry.x)
             .y((entry) => entry.y);
         const finalPath = lineGenerator(lineData);

package/dist/tooltip.js

@@ -269,7 +269,11 @@ export class Tooltip {
             .attr('aria-hidden', 'true')
             .style('fill', 'none')
             .style('pointer-events', 'all');
-        const pointSeries = series.filter((currentSeries) => {
+        const focusCircleSeries = series.filter((currentSeries) => {
+            if (currentSeries.type === 'line' &&
+                currentSeries.points.show === 'never') {
+                return false;
+            }
             return (currentSeries.type === 'line' ||
                 currentSeries.type === 'area' ||
                 currentSeries.type === 'scatter');
@@ -278,7 +282,7 @@ export class Tooltip {
             return currentSeries.type === 'bar';
         });
         const hasBarSeries = barSeries.length > 0;
-        const focusCircles = pointSeries.map((currentSeries) => {
+        const focusCircles = focusCircleSeries.map((currentSeries) => {
             const seriesColor = getSeriesColor(currentSeries);
             return svg
                 .append('circle')
@@ -303,7 +307,7 @@ export class Tooltip {
         const updateVisualStateAtIndex = (closestIndex) => {
             const dataPoint = data[closestIndex];
             const dataPointPosition = dataPointPositions[closestIndex];
-            pointSeries.forEach((currentSeries, seriesIndex) => {
+            focusCircleSeries.forEach((currentSeries, seriesIndex) => {
                 const value = resolveSeriesValue(currentSeries, dataPoint, closestIndex);
                 if (!Number.isFinite(value)) {
                     focusCircles[seriesIndex].style('opacity', 0);

package/dist/types.d.ts

@@ -184,16 +184,25 @@ export type ValueLabelConfig = {
 export type LineValueLabelConfig = ValueLabelConfig & {
     show?: boolean;
 };
+export type LinePointVisibility = 'always' | 'hover' | 'never';
+export type LinePointsConfig = {
+    show?: LinePointVisibility;
+};
 export type BarValueLabelConfig = ValueLabelConfig & {
     show?: boolean;
     position?: 'inside' | 'outside';
     insidePosition?: 'top' | 'middle' | 'bottom';
 };
 export type BarSide = 'left' | 'right';
+export type CurveType = 'linear' | 'monotone' | 'step' | 'natural' | 'basis' | 'cardinal';
+export type LineCurveType = CurveType;
+export type AreaCurveType = CurveType;
 export type LineConfigBase = {
     dataKey: string;
     stroke?: string;
     strokeWidth?: number;
+    curve?: LineCurveType;
+    points?: LinePointsConfig;
     valueLabel?: LineValueLabelConfig;
 };
 export type LineConfig = LineConfigBase & {
@@ -219,7 +228,6 @@ 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;

package/docs/xy-chart.md

@@ -338,6 +338,10 @@ 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)
+    curve?: 'linear' | 'monotone' | 'step' | 'natural' | 'basis' | 'cardinal',
+    points?: {
+        show?: 'always' | 'hover' | 'never'
+    },                               // Data point visibility (default: 'always')
     valueLabel?: {
         show?: boolean,
         formatter?: (dataKey, value, data) => string
@@ -355,8 +359,20 @@ chart.addChild(new Line({ dataKey: 'expenses' }));
 // Manual colors
 chart.addChild(new Line({ dataKey: 'revenue', stroke: '#00ff00' }));
 chart.addChild(new Line({ dataKey: 'expenses', stroke: '#ff0000' }));
+
+// Smooth line interpolation
+chart.addChild(new Line({ dataKey: 'revenue', curve: 'monotone' }));
+
+// Show point circles only while hovering or focusing a tooltip target
+chart
+    .addChild(new Line({ dataKey: 'revenue', points: { show: 'hover' } }))
+    .addChild(new Tooltip());
 ```
 
+`points.show: 'hover'` uses `Tooltip` focus markers, so add a `Tooltip`
+component when hover-only points should be visible. Use `'never'` to suppress
+both static line points and tooltip focus markers for that line.
+
 ---
 
 ## Scatter

package/package.json

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