@internetstiftelsen/charts 0.6.1 → 0.7.0

package/types.d.ts

@@ -1,3 +1,6 @@
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
 export type DataValue = string | number | boolean | Date | null | undefined;
 export type DataItem = Record<string, any>;
 export type GroupedDataGroup = {
@@ -112,6 +115,39 @@ export type ChartTheme = {
         };
     };
 };
+export type ResponsiveBreakpoints = Record<string, number>;
+export type ResponsiveRenderContext = {
+    width: number;
+    height: number;
+    breakpoint: string | null;
+};
+export type ResponsiveComponentSnapshot = {
+    index: number;
+    type: string;
+    dataKey?: string;
+    currentConfig: Record<string, unknown>;
+};
+export type ResponsiveBeforeRenderState = {
+    theme: ChartTheme;
+    components: ResponsiveComponentSnapshot[];
+};
+export type ResponsiveComponentMatch = {
+    index?: number;
+    type?: string;
+    dataKey?: string;
+};
+export type ResponsiveComponentOverride = {
+    match: ResponsiveComponentMatch;
+    override: Record<string, unknown>;
+};
+export type ResponsiveBeforeRenderResult = {
+    theme?: DeepPartial<ChartTheme>;
+    components?: ResponsiveComponentOverride[];
+};
+export type ResponsiveConfig = {
+    breakpoints?: ResponsiveBreakpoints;
+    beforeRender?: (context: ResponsiveRenderContext, state: ResponsiveBeforeRenderState) => void | ResponsiveBeforeRenderResult;
+};
 export type ValueLabelConfig = {
     fontSize?: number;
     fontFamily?: string;
@@ -227,7 +263,9 @@ export type TooltipConfig = TooltipConfigBase & {
     exportHooks?: ExportHooks<TooltipConfigBase>;
 };
 export type LegendConfigBase = {
+    mode?: LegendMode;
     position?: 'bottom';
+    disconnectedTarget?: string | HTMLElement;
     marginTop?: number;
     marginBottom?: number;
     paddingX?: number;
@@ -242,6 +280,12 @@ export type LegendSeries = {
     stroke?: string;
     fill?: string;
 };
+export type LegendMode = 'inline' | 'disconnected' | 'hidden';
+export type LegendItem = {
+    dataKey: string;
+    color: string;
+    visible: boolean;
+};
 export type TitleConfigBase = {
     text: string;
     fontSize?: number;

package/utils.d.ts

@@ -1,4 +1,7 @@
 import { type ClassValue } from 'clsx';
+import type { DeepPartial } from './types.js';
+export { toChartData } from './grouped-tabular.js';
+export type { GroupedStringParseOptions, ToChartDataOptions, } from './grouped-tabular.js';
 export declare function cn(...inputs: ClassValue[]): string;
 /**
  * Sanitizes a string to be used as a CSS class name or ID.
@@ -61,4 +64,4 @@ export declare function breakWord(word: string, maxWidth: number, fontSize: stri
  */
 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;
+export declare function mergeDeep<T extends Record<string, unknown>>(base: T, override?: DeepPartial<T>): T;

package/utils.js

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+export { toChartData } from './grouped-tabular.js';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

package/xy-chart.d.ts

@@ -1,6 +1,6 @@
 import { BaseChart, type BaseChartConfig } from './base-chart.js';
 import type { ChartComponent } from './chart-interface.js';
-import { type AreaStackConfig, type BarStackConfig } from './types.js';
+import { type AreaStackConfig, type BarStackConfig, type LegendSeries } from './types.js';
 export type XYChartConfig = BaseChartConfig & {
     barStack?: BarStackConfig;
     areaStack?: AreaStackConfig;
@@ -14,11 +14,12 @@ export declare class XYChart extends BaseChart {
     addChild(component: ChartComponent): this;
     protected getExportComponents(): ChartComponent[];
     protected createExportChart(): BaseChart;
+    protected applyComponentOverrides(overrides: Map<ChartComponent, ChartComponent>): () => void;
     private rerender;
     protected prepareLayout(): void;
     protected renderChart(): void;
     private getXKey;
-    private getLegendSeries;
+    protected getLegendSeries(): LegendSeries[];
     private getCategoryScaleType;
     private getVisibleSeries;
     private setupScales;

package/xy-chart.js

@@ -1,7 +1,7 @@
 import { max, min, scaleBand, scaleLinear, scaleLog, scaleTime, } from 'd3';
 import { BaseChart } from './base-chart.js';
 import { ChartValidator } from './validation.js';
-import { GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY } from './grouped-data.js';
+import { GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
 export class XYChart extends BaseChart {
     constructor(config) {
         super(config);
@@ -116,6 +116,7 @@ export class XYChart extends BaseChart {
             data: this.data,
             theme: this.theme,
             scales: this.scaleConfig,
+            responsive: this.responsiveConfig,
             barStack: {
                 mode: this.barStackMode,
                 gap: this.barStackGap,
@@ -125,7 +126,30 @@ export class XYChart extends BaseChart {
             },
         });
     }
+    applyComponentOverrides(overrides) {
+        const restoreBase = super.applyComponentOverrides(overrides);
+        if (overrides.size === 0) {
+            return restoreBase;
+        }
+        const previousSeries = [...this.series];
+        this.series.forEach((series, index) => {
+            const override = overrides.get(series);
+            if (override &&
+                (override.type === 'line' ||
+                    override.type === 'bar' ||
+                    override.type === 'area')) {
+                this.series[index] = override;
+            }
+        });
+        return () => {
+            this.series.splice(0, this.series.length, ...previousSeries);
+            restoreBase();
+        };
+    }
     rerender() {
+        if (!this.container) {
+            return;
+        }
         this.update(this.sourceData);
     }
     prepareLayout() {
@@ -142,7 +166,7 @@ export class XYChart extends BaseChart {
             });
             this.xAxis.estimateLayoutSpace?.(labels, this.theme, svgNode);
         }
-        if (svgNode && this.legend) {
+        if (svgNode && this.legend?.isInlineMode()) {
             this.legend.estimateLayoutSpace(this.getLegendSeries(), this.theme, this.width, svgNode);
         }
     }
@@ -199,7 +223,7 @@ export class XYChart extends BaseChart {
             this.tooltip.initialize(this.theme);
             this.tooltip.attachToArea(this.svg, this.data, visibleSeries, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this), this.isHorizontalOrientation(), categoryScaleType, (series, dataPoint) => this.getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries));
         }
-        if (this.legend) {
+        if (this.legend?.isInlineMode()) {
             const legendPos = this.layoutManager.getComponentPosition(this.legend);
             this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, legendPos.x, legendPos.y);
         }
@@ -481,7 +505,9 @@ export class XYChart extends BaseChart {
         const areaSeries = visibleSeries.filter((s) => s.type === 'area');
         const lineSeries = visibleSeries.filter((s) => s.type === 'line');
         const areaValueLabelLayer = areaSeries.length > 0
-            ? this.plotGroup.append('g').attr('class', 'area-value-label-layer')
+            ? this.plotGroup
+                .append('g')
+                .attr('class', 'area-value-label-layer')
             : null;
         const { cumulativeDataBySeriesIndex, totalData } = this.computeStackingData(this.data, xKey, barSeries);
         const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, areaSeries);