@internetstiftelsen/charts 0.4.0 → 0.4.1

package/bar.js

@@ -1,4 +1,4 @@
-import { sanitizeForCSS, mergeDeep } from './utils.js';
+import { getContrastTextColor, sanitizeForCSS, mergeDeep } from './utils.js';
 export class Bar {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -362,7 +362,7 @@ export class Bar {
         const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
         const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
         const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
-        const color = config.color ?? theme.valueLabel.color;
+        const defaultLabelColor = config.color ?? theme.valueLabel.color;
         const background = config.background ?? theme.valueLabel.background;
         const border = config.border ?? theme.valueLabel.border;
         const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
@@ -370,11 +370,14 @@ export class Bar {
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
-        data.forEach((d) => {
+        data.forEach((d, i) => {
             const categoryKey = String(d[xKey]);
             const value = parseValue(d[this.dataKey]);
             const valueText = String(value);
             const xPos = this.getScaledPosition(d, xKey, x, xScaleType);
+            const barColor = this.colorAdapter
+                ? this.colorAdapter(d, i)
+                : this.fill;
             // Calculate bar position based on stacking mode
             let barTop;
             let barBottom;
@@ -497,6 +500,9 @@ export class Bar {
             }
             tempText.remove();
             if (shouldRender) {
+                const labelColor = position === 'inside' && config.color === undefined
+                    ? getContrastTextColor(barColor)
+                    : defaultLabelColor;
                 const group = labelGroup.append('g');
                 if (position === 'outside') {
                     // Draw rounded rectangle background
@@ -522,7 +528,7 @@ export class Bar {
                     .style('font-size', `${fontSize}px`)
                     .style('font-family', fontFamily)
                     .style('font-weight', fontWeight)
-                    .style('fill', color)
+                    .style('fill', labelColor)
                     .style('pointer-events', 'none')
                     .text(valueText);
             }
@@ -574,7 +580,7 @@ export class Bar {
         const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
         const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
         const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
-        const color = config.color ?? theme.valueLabel.color;
+        const defaultLabelColor = config.color ?? theme.valueLabel.color;
         const background = config.background ?? theme.valueLabel.background;
         const border = config.border ?? theme.valueLabel.border;
         const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
@@ -582,11 +588,14 @@ export class Bar {
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
-        data.forEach((d) => {
+        data.forEach((d, i) => {
             const categoryKey = String(d[xKey]);
             const value = parseValue(d[this.dataKey]);
             const valueText = String(value);
             const yPos = this.getScaledPosition(d, xKey, y, yScaleType);
+            const barColor = this.colorAdapter
+                ? this.colorAdapter(d, i)
+                : this.fill;
             // Calculate bar position based on stacking mode
             let barLeft;
             let barRight;
@@ -711,6 +720,9 @@ export class Bar {
             }
             tempText.remove();
             if (shouldRender) {
+                const labelColor = position === 'inside' && config.color === undefined
+                    ? getContrastTextColor(barColor)
+                    : defaultLabelColor;
                 const group = labelGroup.append('g');
                 if (position === 'outside') {
                     // Draw rounded rectangle background
@@ -736,7 +748,7 @@ export class Bar {
                     .style('font-size', `${fontSize}px`)
                     .style('font-family', fontFamily)
                     .style('font-weight', fontWeight)
-                    .style('fill', color)
+                    .style('fill', labelColor)
                     .style('pointer-events', 'none')
                     .text(valueText);
             }

package/legend.d.ts

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

package/legend.js

@@ -1,5 +1,5 @@
 import { getSeriesColor } from './types.js';
-import { mergeDeep } from './utils.js';
+import { getContrastTextColor, mergeDeep } from './utils.js';
 export class Legend {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -83,29 +83,6 @@ export class Legend {
         const offsetY = size * 0.15;
         return `M ${4 * scale + offsetX} ${12 * scale + offsetY} L ${9 * scale + offsetX} ${17 * scale + offsetY} L ${20 * scale + offsetX} ${6 * scale + offsetY}`;
     }
-    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
      */
@@ -185,13 +162,7 @@ export class Legend {
             .append('path')
             .attr('d', this.getCheckmarkPath(boxSize))
             .attr('fill', 'none')
-            .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', (d) => getContrastTextColor(d.color))
             .attr('stroke-width', 2)
             .attr('stroke-linecap', 'round')
             .attr('stroke-linejoin', 'round')

package/package.json

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

package/utils.d.ts

@@ -60,4 +60,5 @@ export declare function breakWord(word: string, maxWidth: number, fontSize: stri
  * @returns Array of lines
  */
 export declare function wrapText(text: string, maxWidth: number, fontSize: string | number, fontFamily: string, fontWeight: string, svg: SVGSVGElement): string[];
+export declare function getContrastTextColor(backgroundColor: string, lightTextColor?: string, darkTextColor?: string): string;
 export declare function mergeDeep<T extends Record<string, unknown>>(base: T, override?: Partial<T>): T;

package/utils.js

@@ -168,6 +168,44 @@ export function wrapText(text, maxWidth, fontSize, fontFamily, fontWeight, svg)
     }
     return lines.length > 0 ? lines : [text];
 }
+function parseColorToRGB(color) {
+    const normalizedColor = color.trim();
+    if (normalizedColor.startsWith('#')) {
+        const hex = normalizedColor.slice(1);
+        if (hex.length === 3) {
+            const r = parseInt(hex[0] + hex[0], 16);
+            const g = parseInt(hex[1] + hex[1], 16);
+            const b = parseInt(hex[2] + hex[2], 16);
+            return { r, g, b };
+        }
+        if (hex.length === 6) {
+            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 };
+        }
+    }
+    if (normalizedColor.startsWith('rgb')) {
+        const matches = normalizedColor.match(/\d+/g);
+        if (matches && matches.length >= 3) {
+            return {
+                r: parseInt(matches[0], 10),
+                g: parseInt(matches[1], 10),
+                b: parseInt(matches[2], 10),
+            };
+        }
+    }
+    // Fallback matches legend behavior: unknown colors are treated as dark.
+    return { r: 0, g: 0, b: 0 };
+}
+export function getContrastTextColor(backgroundColor, lightTextColor = '#fff', darkTextColor = '#000') {
+    const { r, g, b } = parseColorToRGB(backgroundColor);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    if (luminance > 0.5) {
+        return darkTextColor;
+    }
+    return lightTextColor;
+}
 export function mergeDeep(base, override) {
     if (!override) {
         return { ...base };