@internetstiftelsen/charts 0.1.0 → 0.1.1

package/line.js

@@ -63,7 +63,13 @@ export class Line {
             // Handle band scales with bandwidth
             return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
         };
+        // Helper to check if a data point has a valid (non-null) value
+        const hasValidValue = (d) => {
+            const value = d[this.dataKey];
+            return value !== null && value !== undefined;
+        };
         const lineGenerator = line()
+            .defined(hasValidValue)
             .x(getXPosition)
             .y((d) => y(parseValue(d[this.dataKey])) || 0);
         const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
@@ -79,11 +85,12 @@ export class Line {
             .attr('stroke', this.stroke)
             .attr('stroke-width', lineStrokeWidth)
             .attr('d', lineGenerator);
-        // Add data point circles
+        // Add data point circles (only for valid values)
+        const validData = data.filter(hasValidValue);
         const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
             .selectAll(`.circle-${sanitizedKey}`)
-            .data(data)
+            .data(validData)
             .join('circle')
             .attr('class', `circle-${sanitizedKey}`)
             .attr('cx', getXPosition)
@@ -92,9 +99,9 @@ export class Line {
             .attr('fill', pointColor)
             .attr('stroke', pointStrokeColor)
             .attr('stroke-width', pointStrokeWidth);
-        // Render value labels if enabled
+        // Render value labels if enabled (only for valid values)
         if (this.valueLabel?.show) {
-            this.renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition);
+            this.renderValueLabels(plotGroup, validData, y, parseValue, theme, getXPosition);
         }
     }
     renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition) {

package/package.json

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

package/types.d.ts

@@ -97,6 +97,7 @@ export type XAxisConfig = {
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
     oversizedBehavior?: LabelOversizedBehavior;
+    tickFormat?: string | ((value: number) => string) | null;
 };
 export type YAxisConfig = {
     tickFormat?: string | ((value: number) => string) | null;

package/x-axis.d.ts

@@ -9,6 +9,7 @@ export declare class XAxis implements LayoutAwareComponent {
     private readonly fontSize;
     private readonly maxLabelWidth?;
     private readonly oversizedBehavior;
+    private readonly tickFormat;
     private wrapLineCount;
     constructor(config?: XAxisConfig);
     /**

package/x-axis.js

@@ -44,6 +44,13 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Object.defineProperty(this, "tickFormat", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "wrapLineCount", {
             enumerable: true,
             configurable: true,
@@ -54,6 +61,7 @@ export class XAxis {
         this.rotatedLabels = config?.rotatedLabels ?? false;
         this.maxLabelWidth = config?.maxLabelWidth;
         this.oversizedBehavior = config?.oversizedBehavior ?? 'truncate';
+        this.tickFormat = config?.tickFormat ?? null;
     }
     /**
      * Returns the space required by the x-axis
@@ -74,14 +82,24 @@ export class XAxis {
         };
     }
     render(svg, x, theme, yPosition) {
+        const axisGenerator = axisBottom(x)
+            .tickSizeOuter(0)
+            .tickSize(0)
+            .tickPadding(this.tickPadding);
+        // Apply tick formatting if specified
+        if (this.tickFormat) {
+            if (typeof this.tickFormat === 'function') {
+                axisGenerator.tickFormat(this.tickFormat);
+            }
+            else {
+                axisGenerator.ticks(5, this.tickFormat);
+            }
+        }
         const axis = svg
             .append('g')
             .attr('class', 'x-axis')
             .attr('transform', `translate(0,${yPosition})`)
-            .call(axisBottom(x)
-            .tickSizeOuter(0)
-            .tickSize(0)
-            .tickPadding(this.tickPadding))
+            .call(axisGenerator)
             .attr('font-size', theme.axis.fontSize)
             .attr('font-family', theme.axis.fontFamily)
             .attr('font-weight', theme.axis.fontWeight || 'normal')

package/xy-chart.d.ts

@@ -6,8 +6,6 @@ export type XYChartConfig = BaseChartConfig & {
 };
 export declare class XYChart extends BaseChart {
     private readonly series;
-    private sortedDataCache;
-    private xKeyCache;
     private barStackMode;
     private barStackGap;
     constructor(config: XYChartConfig);
@@ -15,7 +13,6 @@ export declare class XYChart extends BaseChart {
     private rerender;
     protected renderChart(): void;
     private getXKey;
-    private getSortedData;
     private setupScales;
     private isHorizontalOrientation;
     private createScale;

package/xy-chart.js

@@ -11,18 +11,6 @@ export class XYChart extends BaseChart {
             writable: true,
             value: []
         });
-        Object.defineProperty(this, "sortedDataCache", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "xKeyCache", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
         Object.defineProperty(this, "barStackMode", {
             enumerable: true,
             configurable: true,
@@ -97,9 +85,7 @@ export class XYChart extends BaseChart {
         if (this.xAxis?.dataKey) {
             ChartValidator.validateDataKey(this.data, this.xAxis.dataKey, 'XAxis');
         }
-        // Cache sorted data
         const xKey = this.getXKey();
-        const sortedData = this.getSortedData(xKey);
         this.setupScales();
         // Render title if present
         if (this.title) {
@@ -124,7 +110,7 @@ export class XYChart extends BaseChart {
         // Render tooltip
         if (this.tooltip && this.x && this.y) {
             this.tooltip.initialize(this.theme);
-            this.tooltip.attachToArea(this.svg, sortedData, this.series, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this), this.isHorizontalOrientation());
+            this.tooltip.attachToArea(this.svg, this.data, this.series, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this), this.isHorizontalOrientation());
         }
         // Render legend if present
         if (this.legend) {
@@ -138,16 +124,6 @@ export class XYChart extends BaseChart {
         }
         return (Object.keys(this.data[0]).find((key) => !this.series.some((s) => s.dataKey === key)) || 'column');
     }
-    getSortedData(xKey) {
-        // Return cached data if xKey matches
-        if (this.sortedDataCache && this.xKeyCache === xKey) {
-            return this.sortedDataCache;
-        }
-        // Sort and cache
-        this.xKeyCache = xKey;
-        this.sortedDataCache = [...this.data].sort((a, b) => String(a[xKey]).localeCompare(String(b[xKey])));
-        return this.sortedDataCache;
-    }
     setupScales() {
         const xKey = this.getXKey();
         const isHorizontal = this.isHorizontalOrientation();
@@ -285,7 +261,6 @@ export class XYChart extends BaseChart {
         if (!this.plotGroup || !this.x || !this.y)
             return;
         const xKey = this.getXKey();
-        const sortedData = this.getSortedData(xKey);
         const isHorizontal = this.isHorizontalOrientation();
         // For horizontal bars, the category scale is on Y (user's X config becomes Y)
         // For vertical bars, the category scale is on X (user's X config stays X)
@@ -299,7 +274,7 @@ export class XYChart extends BaseChart {
         // Get only bar series for stacking calculations
         const barSeries = visibleSeries.filter((s) => s.type === 'bar');
         // Compute stacking data for bar charts
-        const { cumulativeDataBySeriesIndex, totalData } = this.computeStackingData(sortedData, xKey, barSeries);
+        const { cumulativeDataBySeriesIndex, totalData } = this.computeStackingData(this.data, xKey, barSeries);
         visibleSeries.forEach((series) => {
             if (series.type === 'bar') {
                 const barIndex = barSeries.indexOf(series);
@@ -311,10 +286,10 @@ export class XYChart extends BaseChart {
                     totalData,
                     gap: this.barStackGap,
                 };
-                series.render(this.plotGroup, sortedData, 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.theme, stackingContext);
             }
             else {
-                series.render(this.plotGroup, sortedData, 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.theme);
             }
         });
     }