@internetstiftelsen/charts 0.0.5 → 0.0.7

package/bar.d.ts

@@ -5,6 +5,7 @@ export declare class Bar implements ChartComponent {
     readonly type: "bar";
     readonly dataKey: string;
     readonly fill: string;
+    readonly colorAdapter?: (data: DataItem, index: number) => 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, _theme?: ChartTheme): void;

package/bar.js

@@ -18,6 +18,12 @@ export class Bar {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "colorAdapter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "orientation", {
             enumerable: true,
             configurable: true,
@@ -26,6 +32,7 @@ export class Bar {
         });
         this.dataKey = config.dataKey;
         this.fill = config.fill || '#8884d8';
+        this.colorAdapter = config.colorAdapter;
         this.orientation = config.orientation || 'vertical';
     }
     render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', _theme) {
@@ -83,7 +90,7 @@ export class Bar {
             const yPos = y(parseValue(d[this.dataKey])) || 0;
             return Math.abs(yBaseline - yPos);
         })
-            .attr('fill', this.fill);
+            .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
     renderHorizontal(plotGroup, data, xKey, x, y, parseValue, yScaleType) {
         const getYPosition = (d) => {
@@ -132,6 +139,6 @@ export class Bar {
             return Math.abs(xPos - xBaseline);
         })
             .attr('height', bandwidth)
-            .attr('fill', this.fill);
+            .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
 }

package/legend.js

@@ -54,8 +54,10 @@ export class Legend {
         return this.visibilityState.get(dataKey) ?? true;
     }
     getCheckmarkPath(size) {
-        const scale = size / 24;
-        return `M ${4 * scale} ${12 * scale} L ${9 * scale} ${17 * scale} L ${20 * scale} ${6 * scale}`;
+        const scale = (size / 24) * 0.7;
+        const offsetX = size * 0.15;
+        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
@@ -153,7 +155,7 @@ export class Legend {
             const isVisible = this.visibilityState.get(d.dataKey) ?? true;
             return isVisible ? d.color : theme.legend.uncheckedColor;
         })
-            .attr('rx', 2);
+            .attr('rx', 3);
         // Add checkmark when visible
         legendGroups
             .append('path')

package/package.json

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

package/theme.js

@@ -28,7 +28,7 @@ export const defaultTheme = {
         fontWeight: 'normal',
     },
     legend: {
-        boxSize: 20,
+        boxSize: 24,
         uncheckedColor: '#d0d0d0',
         fontSize: 14,
     },

package/types.d.ts

@@ -45,6 +45,7 @@ export type LineConfig = {
 export type BarConfig = {
     dataKey: string;
     fill?: string;
+    colorAdapter?: (data: DataItem, index: number) => string;
     orientation?: 'vertical' | 'horizontal';
 };
 export declare function getSeriesColor(series: {