@internetstiftelsen/charts 0.10.0 → 0.10.1

package/README.md

@@ -10,7 +10,7 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **Combined Chart Layouts** - `ChartGroup` composes existing charts into shared dashboards with one coordinated legend
 - **Divergent Bar Support** - Bar charts automatically render from zero and diverge around `0` for mixed positive/negative values
 - **Mirrored Bar Sides** - Horizontal bars can mirror a series to the left for population-pyramid style charts without changing source data
-- **Radial Value Labels** - Pie and donut charts support optional on-chart labels with custom formatters
+- **Custom Value Labels** - XY, pie, and donut charts support optional on-chart labels with custom formatters
 - **Optional Gauge Animation** - Animate gauge value transitions with `gauge.animate`
 - **Stacking Control** - Bar stacking modes with optional reversed visual series order
 - **Axis Direction Control** - Use `scales.x.reverse` / `scales.y.reverse` to flip an axis when needed

package/dist/area.d.ts

@@ -21,5 +21,7 @@ export declare class Area implements ChartComponent<AreaConfigBase> {
     createExportComponent(override?: Partial<AreaConfigBase>): ChartComponent<AreaConfigBase>;
     private getStackValues;
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType: ScaleType | undefined, theme: ChartTheme, stackingContext?: AreaStackingContext, valueLabelLayer?: Selection<SVGGElement, undefined, null, undefined>): void;
+    private renderLinePath;
+    private renderPoints;
     private renderValueLabels;
 }

package/dist/area.js

@@ -199,43 +199,49 @@ export class Area {
             .attr('stroke', 'none')
             .attr('d', areaGenerator);
         if (this.showLine) {
-            const lineGenerator = line()
-                .defined((d) => d.valid)
-                .curve(curveFactory)
-                .x(getXPosition)
-                .y((d) => y(d.y1) || 0);
-            const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
-            plotGroup
-                .append('path')
-                .datum(areaData)
-                .attr('class', `area-line-${sanitizedKey}`)
-                .attr('fill', 'none')
-                .attr('stroke', this.stroke)
-                .attr('stroke-width', lineStrokeWidth)
-                .attr('d', lineGenerator);
+            this.renderLinePath(plotGroup, areaData, curveFactory, getXPosition, y, theme, sanitizedKey);
         }
         if (this.showPoints) {
-            const validData = areaData.filter((d) => d.valid);
-            const pointSize = this.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;
-            plotGroup
-                .selectAll(`.area-point-${sanitizedKey}`)
-                .data(validData)
-                .join('circle')
-                .attr('class', `area-point-${sanitizedKey}`)
-                .attr('cx', getXPosition)
-                .attr('cy', (d) => y(d.y1) || 0)
-                .attr('r', pointSize)
-                .attr('fill', pointColor)
-                .attr('stroke', pointStrokeColor)
-                .attr('stroke-width', pointStrokeWidth);
+            this.renderPoints(plotGroup, areaData, getXPosition, y, theme, sanitizedKey);
         }
         if (this.valueLabel?.show) {
             this.renderValueLabels(valueLabelLayer ?? plotGroup, areaData.filter((d) => d.valid), y, parseValue, theme, getXPosition);
         }
     }
+    renderLinePath(plotGroup, areaData, curveFactory, getXPosition, y, theme, sanitizedKey) {
+        const lineGenerator = line()
+            .defined((d) => d.valid)
+            .curve(curveFactory)
+            .x(getXPosition)
+            .y((d) => y(d.y1) || 0);
+        const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
+        plotGroup
+            .append('path')
+            .datum(areaData)
+            .attr('class', `area-line-${sanitizedKey}`)
+            .attr('fill', 'none')
+            .attr('stroke', this.stroke)
+            .attr('stroke-width', lineStrokeWidth)
+            .attr('d', lineGenerator);
+    }
+    renderPoints(plotGroup, areaData, getXPosition, y, theme, sanitizedKey) {
+        const validData = areaData.filter((d) => d.valid);
+        const pointSize = this.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;
+        plotGroup
+            .selectAll(`.area-point-${sanitizedKey}`)
+            .data(validData)
+            .join('circle')
+            .attr('class', `area-point-${sanitizedKey}`)
+            .attr('cx', getXPosition)
+            .attr('cy', (d) => y(d.y1) || 0)
+            .attr('r', pointSize)
+            .attr('fill', pointColor)
+            .attr('stroke', pointStrokeColor)
+            .attr('stroke-width', pointStrokeWidth);
+    }
     renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition) {
         const config = this.valueLabel;
         const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
@@ -260,7 +266,9 @@ export class Area {
             if (!Number.isFinite(parsedValue)) {
                 return;
             }
-            const valueText = String(parsedValue);
+            const valueText = config.formatter
+                ? config.formatter(this.dataKey, parsedValue, d.data)
+                : String(parsedValue);
             const xPos = getXPosition(d);
             const yPos = y(d.y1) || 0;
             const tempText = labelGroup

package/dist/bar.d.ts

@@ -17,6 +17,23 @@ export declare class Bar implements ChartComponent<BarConfigBase> {
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType?: ScaleType, theme?: ChartTheme, stackingContext?: BarStackingContext, orientation?: 'vertical' | 'horizontal'): void;
     private renderVertical;
     private renderHorizontal;
+    private resolveValueLabelConfig;
+    private resolveValueLabelPlacement;
+    private resolveValueLabelStyle;
+    private getValueLabelText;
+    private getBarColor;
+    private measureLabelBox;
+    private getLabelColor;
+    private appendValueLabel;
+    private getVerticalLabelPlacement;
+    private getVerticalOutsideLabelPlacement;
+    private getVerticalInsideLabelY;
+    private getHorizontalLabelPlacement;
+    private getHorizontalOutsideLabelPlacement;
+    private getHorizontalInsideLabelX;
+    private isHorizontalLabelWithinBounds;
+    private renderVerticalValueLabel;
+    private renderHorizontalValueLabel;
     private renderVerticalValueLabels;
     private renderHorizontalValueLabels;
 }