@internetstiftelsen/charts 0.9.2 → 0.10.1

package/dist/legend.js

@@ -1,5 +1,6 @@
 import { select } from 'd3';
 import { getSeriesColor } from './types.js';
+import { LegendStateController } from './legend-state.js';
 import { getContrastTextColor, mergeDeep } from './utils.js';
 export class Legend {
     constructor(config) {
@@ -69,11 +70,17 @@ export class Legend {
             writable: true,
             value: 8
         });
-        Object.defineProperty(this, "visibilityState", {
+        Object.defineProperty(this, "stateController", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new Map()
+            value: void 0
+        });
+        Object.defineProperty(this, "stateControllerCleanup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
         });
         Object.defineProperty(this, "onToggleCallback", {
             enumerable: true,
@@ -99,15 +106,18 @@ export class Legend {
             writable: true,
             value: null
         });
-        this.mode = config?.mode ?? 'inline';
-        this.position = config?.position || 'bottom';
-        this.disconnectedTarget = config?.disconnectedTarget;
-        this.marginTop = config?.marginTop ?? 20;
-        this.marginBottom = config?.marginBottom ?? 10;
-        this.paddingX = config?.paddingX;
-        this.itemSpacingX = config?.itemSpacingX;
-        this.itemSpacingY = config?.itemSpacingY;
-        this.exportHooks = config?.exportHooks;
+        const { mode = 'inline', position = 'bottom', disconnectedTarget, marginTop = 20, marginBottom = 10, paddingX, itemSpacingX, itemSpacingY, exportHooks, } = config ?? {};
+        this.mode = mode;
+        this.position = position;
+        this.disconnectedTarget = disconnectedTarget;
+        this.marginTop = marginTop;
+        this.marginBottom = marginBottom;
+        this.paddingX = paddingX;
+        this.itemSpacingX = itemSpacingX;
+        this.itemSpacingY = itemSpacingY;
+        this.exportHooks = exportHooks;
+        this.stateController = new LegendStateController();
+        this.bindStateController(this.stateController);
     }
     getExportConfig() {
         return {
@@ -127,16 +137,19 @@ export class Legend {
             ...merged,
             exportHooks: this.exportHooks,
         });
-        legend.visibilityState = new Map(this.visibilityState);
-        legend.onToggleCallback = () => {
-            this.visibilityState = new Map(legend.visibilityState);
-            this.onToggleCallback?.();
-        };
+        const clonedStateController = this.stateController.clone();
+        clonedStateController.subscribe(() => {
+            this.stateController.setVisibilityMap(clonedStateController.toVisibilityMap());
+        });
+        legend.setStateController(clonedStateController);
         return legend;
     }
     setToggleCallback(callback) {
         this.onToggleCallback = callback;
     }
+    setStateController(controller) {
+        this.bindStateController(controller);
+    }
     isInlineMode() {
         return this.mode === 'inline';
     }
@@ -159,22 +172,16 @@ export class Legend {
         };
     }
     isSeriesVisible(dataKey) {
-        return this.visibilityState.get(dataKey) ?? true;
+        return this.stateController.isSeriesVisible(dataKey);
     }
     setSeriesVisible(dataKey, visible) {
-        this.visibilityState.set(dataKey, visible);
-        this.triggerChange();
+        this.stateController.setSeriesVisible(dataKey, visible);
     }
     toggleSeries(dataKey) {
-        const currentState = this.visibilityState.get(dataKey) ?? true;
-        this.visibilityState.set(dataKey, !currentState);
-        this.triggerChange();
+        this.stateController.toggleSeries(dataKey);
     }
     setVisibilityMap(visibility) {
-        Object.entries(visibility).forEach(([dataKey, isVisible]) => {
-            this.visibilityState.set(dataKey, isVisible);
-        });
-        this.triggerChange();
+        this.stateController.setVisibilityMap(visibility);
     }
     estimateLayoutSpace(series, theme, width, svg) {
         const signature = this.getLayoutSignature(series, width, theme);
@@ -269,7 +276,7 @@ export class Legend {
             .attr('width', theme.legend.boxSize)
             .attr('height', theme.legend.boxSize)
             .attr('fill', (d) => {
-            const isVisible = this.visibilityState.get(d.dataKey) ?? true;
+            const isVisible = this.stateController.isSeriesVisible(d.dataKey);
             return isVisible ? d.color : theme.legend.uncheckedColor;
         })
             .attr('rx', 3);
@@ -283,7 +290,7 @@ export class Legend {
             .attr('stroke-linecap', 'round')
             .attr('stroke-linejoin', 'round')
             .style('display', (d) => {
-            const isVisible = this.visibilityState.get(d.dataKey) ?? true;
+            const isVisible = this.stateController.isSeriesVisible(d.dataKey);
             return isVisible ? 'block' : 'none';
         });
         // Add label text
@@ -296,7 +303,7 @@ export class Legend {
             .text((d) => d.label);
     }
     isLegendItemVisible(dataKey) {
-        return this.visibilityState.get(dataKey) ?? true;
+        return this.stateController.isSeriesVisible(dataKey);
     }
     isToggleActivationKey(key) {
         return key === 'Enter' || key === ' ' || key === 'Spacebar';
@@ -304,11 +311,7 @@ export class Legend {
     computeLayout(series, theme, width, svg) {
         const settings = this.resolveLayoutSettings(theme);
         const legendItems = this.buildLegendItems(series);
-        legendItems.forEach((item) => {
-            if (!this.visibilityState.has(item.dataKey)) {
-                this.visibilityState.set(item.dataKey, true);
-            }
-        });
+        this.stateController.ensureSeries(legendItems.map((item) => item.dataKey), { silent: true });
         const measuredItems = this.measureLegendItemWidths(legendItems, theme, svg);
         const rows = this.buildRows(measuredItems, width, settings);
         const positionedItems = this.positionRows(rows, width, settings);
@@ -439,10 +442,14 @@ export class Legend {
     getFallbackRowHeight(theme) {
         return Math.max(theme.legend.boxSize, theme.legend.fontSize);
     }
-    triggerChange() {
-        this.onToggleCallback?.();
-        this.onChangeCallbacks.forEach((callback) => {
-            callback();
+    bindStateController(controller) {
+        this.stateControllerCleanup?.();
+        this.stateController = controller;
+        this.stateControllerCleanup = controller.subscribe(() => {
+            this.onToggleCallback?.();
+            this.onChangeCallbacks.forEach((callback) => {
+                callback();
+            });
         });
     }
 }

package/dist/line.js

@@ -123,7 +123,9 @@ export class Line {
         const plotBottom = y.range()[0];
         data.forEach((d) => {
             const value = parseValue(d[this.dataKey]);
-            const valueText = String(value);
+            const valueText = config.formatter
+                ? config.formatter(this.dataKey, value, d)
+                : String(value);
             const xPos = getXPosition(d);
             const yPos = y(value) || 0;
             // Create temporary text to measure dimensions

package/dist/pie-chart.d.ts

@@ -46,6 +46,9 @@ export declare class PieChart extends RadialChartBase {
     private segments;
     constructor(config: PieChartConfig);
     private validatePieData;
+    private validatePieConfig;
+    private validateValueLabelConfig;
+    private validateDataItems;
     private prepareSegments;
     private warnOnTinySlices;
     protected getExportComponents(): ChartComponentBase[];

package/dist/pie-chart.js

@@ -8,6 +8,17 @@ const FULL_CIRCLE_RADIANS = Math.PI * 2;
 const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
 const OUTSIDE_LABEL_LINE_INSET_PX = 4;
 const TINY_SLICE_THRESHOLD_RATIO = 0.03;
+const DEFAULT_PIE_VALUE_LABEL = {
+    show: false,
+    position: 'auto',
+    minInsidePercentage: 8,
+    outsideOffset: 16,
+    insideMargin: 8,
+    minVerticalSpacing: 14,
+    formatter: (label, value, _data, _percentage) => {
+        return `${label}: ${value}`;
+    },
+};
 export class PieChart extends RadialChartBase {
     constructor(config) {
         super(config);
@@ -71,25 +82,31 @@ export class PieChart extends RadialChartBase {
             writable: true,
             value: []
         });
-        const pieConfig = config.pie ?? {};
-        this.innerRadiusRatio = pieConfig.innerRadius ?? 0;
-        this.startAngle = pieConfig.startAngle ?? 0;
-        this.endAngle = pieConfig.endAngle ?? FULL_CIRCLE_RADIANS;
-        this.padAngle = pieConfig.padAngle ?? this.theme.donut.padAngle;
-        this.cornerRadius =
-            pieConfig.cornerRadius ?? this.theme.donut.cornerRadius;
-        this.sort = pieConfig.sort ?? 'none';
-        this.valueKey = config.valueKey ?? 'value';
-        this.labelKey = config.labelKey ?? 'name';
+        const pieConfig = {
+            innerRadius: 0,
+            startAngle: 0,
+            endAngle: FULL_CIRCLE_RADIANS,
+            padAngle: this.theme.donut.padAngle,
+            cornerRadius: this.theme.donut.cornerRadius,
+            sort: 'none',
+            ...config.pie,
+        };
+        const resolvedConfig = {
+            valueKey: 'value',
+            labelKey: 'name',
+            ...config,
+        };
+        this.innerRadiusRatio = pieConfig.innerRadius;
+        this.startAngle = pieConfig.startAngle;
+        this.endAngle = pieConfig.endAngle;
+        this.padAngle = pieConfig.padAngle;
+        this.cornerRadius = pieConfig.cornerRadius;
+        this.sort = pieConfig.sort;
+        this.valueKey = resolvedConfig.valueKey;
+        this.labelKey = resolvedConfig.labelKey;
         this.valueLabel = {
-            show: config.valueLabel?.show ?? false,
-            position: config.valueLabel?.position ?? 'auto',
-            minInsidePercentage: config.valueLabel?.minInsidePercentage ?? 8,
-            outsideOffset: config.valueLabel?.outsideOffset ?? 16,
-            insideMargin: config.valueLabel?.insideMargin ?? 8,
-            minVerticalSpacing: config.valueLabel?.minVerticalSpacing ?? 14,
-            formatter: config.valueLabel?.formatter ??
-                ((label, value, _data, _percentage) => `${label}: ${value}`),
+            ...DEFAULT_PIE_VALUE_LABEL,
+            ...config.valueLabel,
         };
         this.initializeDataState();
     }
@@ -97,6 +114,11 @@ export class PieChart extends RadialChartBase {
         ChartValidator.validateDataKey(this.data, this.labelKey, 'PieChart');
         ChartValidator.validateDataKey(this.data, this.valueKey, 'PieChart');
         ChartValidator.validateNumericData(this.data, this.valueKey, 'PieChart');
+        this.validatePieConfig();
+        this.validateValueLabelConfig();
+        this.validateDataItems();
+    }
+    validatePieConfig() {
         if (this.innerRadiusRatio < 0 || this.innerRadiusRatio > 1) {
             throw new Error(`PieChart: pie.innerRadius must be between 0 and 1, received '${this.innerRadiusRatio}'`);
         }
@@ -106,6 +128,8 @@ export class PieChart extends RadialChartBase {
         if (this.padAngle < 0) {
             throw new Error(`PieChart: pie.padAngle must be >= 0, received '${this.padAngle}'`);
         }
+    }
+    validateValueLabelConfig() {
         if (this.valueLabel.minInsidePercentage < 0 ||
             this.valueLabel.minInsidePercentage > 100) {
             throw new Error(`PieChart: valueLabel.minInsidePercentage must be between 0 and 100, received '${this.valueLabel.minInsidePercentage}'`);
@@ -119,6 +143,8 @@ export class PieChart extends RadialChartBase {
         if (this.valueLabel.minVerticalSpacing < 0) {
             throw new Error(`PieChart: valueLabel.minVerticalSpacing must be >= 0, received '${this.valueLabel.minVerticalSpacing}'`);
         }
+    }
+    validateDataItems() {
         for (const [index, item] of this.data.entries()) {
             const label = String(item[this.labelKey] ?? '').trim();
             if (!label) {
@@ -173,7 +199,7 @@ export class PieChart extends RadialChartBase {
         return this.getBaseExportComponents({
             title: true,
             tooltip: true,
-            legend: this.legend?.isInlineMode(),
+            legend: this.shouldIncludeLegendInExport(),
         });
     }
     update(data) {

package/dist/scatter.d.ts

@@ -0,0 +1,16 @@
+import type { ChartTheme, D3Scale, DataItem, ExportHooks, LineValueLabelConfig, ScaleType, ScatterConfig, ScatterConfigBase } from './types.js';
+import type { ChartComponent } from './chart-interface.js';
+import type { Selection } from 'd3';
+export declare class Scatter implements ChartComponent<ScatterConfigBase> {
+    readonly type: "scatter";
+    readonly dataKey: string;
+    readonly stroke: string;
+    readonly pointSize?: number;
+    readonly valueLabel?: LineValueLabelConfig;
+    readonly exportHooks?: ExportHooks<ScatterConfigBase>;
+    constructor(config: ScatterConfig);
+    getExportConfig(): ScatterConfigBase;
+    createExportComponent(override?: Partial<ScatterConfigBase>): ChartComponent<ScatterConfigBase>;
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType: ScaleType | undefined, theme: ChartTheme): void;
+    private renderValueLabels;
+}

package/dist/scatter.js

@@ -0,0 +1,165 @@
+import { mergeDeep, sanitizeForCSS } from './utils.js';
+import { getScalePosition } from './scale-utils.js';
+export class Scatter {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'scatter'
+        });
+        Object.defineProperty(this, "dataKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "stroke", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pointSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueLabel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.dataKey = config.dataKey;
+        this.stroke = config.stroke || '#8884d8';
+        this.pointSize = config.pointSize;
+        this.valueLabel = config.valueLabel;
+        this.exportHooks = config.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            dataKey: this.dataKey,
+            stroke: this.stroke,
+            pointSize: this.pointSize,
+            valueLabel: this.valueLabel,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new Scatter({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
+    }
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
+        const getXPosition = (d) => {
+            return (getScalePosition(x, d[xKey], xScaleType) +
+                (x.bandwidth ? x.bandwidth() / 2 : 0));
+        };
+        const hasValidValue = (d) => {
+            const value = d[this.dataKey];
+            if (value === null || value === undefined) {
+                return false;
+            }
+            return Number.isFinite(parseValue(value));
+        };
+        const validData = data.filter(hasValidValue);
+        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;
+        const sanitizedKey = sanitizeForCSS(this.dataKey);
+        plotGroup
+            .selectAll(`.scatter-point-${sanitizedKey}`)
+            .data(validData)
+            .join('circle')
+            .attr('class', `scatter-point-${sanitizedKey}`)
+            .attr('cx', getXPosition)
+            .attr('cy', (d) => y(parseValue(d[this.dataKey])) || 0)
+            .attr('r', pointSize)
+            .attr('fill', pointColor)
+            .attr('stroke', pointStrokeColor)
+            .attr('stroke-width', pointStrokeWidth);
+        if (this.valueLabel?.show) {
+            this.renderValueLabels(plotGroup, validData, y, parseValue, theme, getXPosition, pointSize);
+        }
+    }
+    renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition, pointSize) {
+        const config = this.valueLabel;
+        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 background = config.background ?? theme.valueLabel.background;
+        const border = config.border ?? theme.valueLabel.border;
+        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
+        const padding = config.padding ?? theme.valueLabel.padding;
+        const labelGroup = plotGroup
+            .append('g')
+            .attr('class', `scatter-value-labels-${sanitizeForCSS(this.dataKey)}`);
+        const plotTop = y.range()[1];
+        const plotBottom = y.range()[0];
+        data.forEach((d) => {
+            const value = parseValue(d[this.dataKey]);
+            const valueText = config.formatter
+                ? config.formatter(this.dataKey, value, d)
+                : String(value);
+            const xPos = getXPosition(d);
+            const yPos = y(value) || 0;
+            const tempText = labelGroup
+                .append('text')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .text(valueText);
+            const textBBox = tempText.node().getBBox();
+            const boxWidth = textBBox.width + padding * 2;
+            const boxHeight = textBBox.height + padding * 2;
+            const labelX = xPos;
+            let labelY;
+            let shouldRender = true;
+            labelY = yPos - boxHeight / 2 - pointSize - 4;
+            if (labelY - boxHeight / 2 < plotTop + 4) {
+                labelY = yPos + boxHeight / 2 + pointSize + 4;
+                if (labelY + boxHeight / 2 > plotBottom - 4) {
+                    shouldRender = false;
+                }
+            }
+            tempText.remove();
+            if (shouldRender) {
+                const group = labelGroup.append('g');
+                group
+                    .append('rect')
+                    .attr('x', labelX - boxWidth / 2)
+                    .attr('y', labelY - boxHeight / 2)
+                    .attr('width', boxWidth)
+                    .attr('height', boxHeight)
+                    .attr('rx', borderRadius)
+                    .attr('ry', borderRadius)
+                    .attr('fill', background)
+                    .attr('stroke', border)
+                    .attr('stroke-width', 1);
+                group
+                    .append('text')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'central')
+                    .style('font-size', `${fontSize}px`)
+                    .style('font-family', fontFamily)
+                    .style('font-weight', fontWeight)
+                    .style('fill', color)
+                    .style('pointer-events', 'none')
+                    .text(valueText);
+            }
+        });
+    }
+}

package/dist/tooltip.d.ts

@@ -4,6 +4,7 @@ import type { ChartComponent } from './chart-interface.js';
 import type { Line } from './line.js';
 import type { Bar } from './bar.js';
 import type { Area } from './area.js';
+import type { Scatter } from './scatter.js';
 import type { PlotAreaBounds } from './layout-manager.js';
 export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     readonly id = "iisChartTooltip";
@@ -21,6 +22,6 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     getExportConfig(): TooltipConfigBase;
     createExportComponent(override?: Partial<TooltipConfigBase>): ChartComponent<TooltipConfigBase>;
     initialize(theme: ChartTheme): void;
-    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar | Area)[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean, categoryScaleType?: ScaleType, resolveSeriesValue?: (series: Line | Bar | Area, dataPoint: DataItem, index: number) => number): void;
+    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar | Area | Scatter)[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean, categoryScaleType?: ScaleType, resolveSeriesValue?: (series: Line | Bar | Area | Scatter, dataPoint: DataItem, index: number) => number): void;
     cleanup(): void;
 }

package/dist/tooltip.js

@@ -214,10 +214,10 @@ export class Tooltip {
             .attr('aria-hidden', 'true')
             .style('fill', 'none')
             .style('pointer-events', 'all');
-        const lineSeries = series.filter((s) => s.type === 'line' || s.type === 'area');
+        const pointSeries = series.filter((s) => s.type === 'line' || s.type === 'area' || s.type === 'scatter');
         const barSeries = series.filter((s) => s.type === 'bar');
         const hasBarSeries = barSeries.length > 0;
-        const focusCircles = lineSeries.map((s) => {
+        const focusCircles = pointSeries.map((s) => {
             const seriesColor = getSeriesColor(s);
             return svg
                 .append('circle')
@@ -243,7 +243,7 @@ export class Tooltip {
         const showTooltipAtIndex = (closestIndex) => {
             const dataPoint = data[closestIndex];
             const dataPointPosition = dataPointPositions[closestIndex];
-            lineSeries.forEach((s, i) => {
+            pointSeries.forEach((s, i) => {
                 const value = resolveSeriesValue(s, dataPoint, closestIndex);
                 if (!Number.isFinite(value)) {
                     focusCircles[i].style('opacity', 0);
@@ -420,6 +420,22 @@ export class Tooltip {
             .attr('aria-label', (dataPoint) => buildAccessibleLabel(dataPoint))
             .style('pointer-events', 'none');
         const focusTargetNodes = focusTargets.nodes();
+        const getNextFocusTargetIndex = (currentIndex, key) => {
+            switch (key) {
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    return currentIndex + 1;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    return currentIndex - 1;
+                case 'Home':
+                    return 0;
+                case 'End':
+                    return focusTargetNodes.length - 1;
+                default:
+                    return -1;
+            }
+        };
         focusTargets
             .on('focus', function () {
             const currentIndex = focusTargetNodes.indexOf(this);
@@ -441,28 +457,8 @@ export class Tooltip {
             if (currentIndex === -1) {
                 return;
             }
-            let nextIndex = null;
-            switch (event.key) {
-                case 'ArrowRight':
-                case 'ArrowDown':
-                    nextIndex = currentIndex + 1;
-                    break;
-                case 'ArrowLeft':
-                case 'ArrowUp':
-                    nextIndex = currentIndex - 1;
-                    break;
-                case 'Home':
-                    nextIndex = 0;
-                    break;
-                case 'End':
-                    nextIndex = focusTargetNodes.length - 1;
-                    break;
-                default:
-                    return;
-            }
-            if (nextIndex === null ||
-                nextIndex < 0 ||
-                nextIndex >= focusTargetNodes.length) {
+            const nextIndex = getNextFocusTargetIndex(currentIndex, event.key);
+            if (nextIndex < 0 || nextIndex >= focusTargetNodes.length) {
                 return;
             }
             event.preventDefault();

package/dist/types.d.ts

@@ -3,6 +3,7 @@ export type DeepPartial<T> = {
 };
 export type DataValue = string | number | boolean | Date | null | undefined;
 export type DataItem = Record<string, unknown>;
+export type SeriesValueFormatter = (dataKey: string, value: DataValue, data: DataItem) => string;
 export type GroupedDataGroup = {
     group: string;
     data: DataItem[];
@@ -167,6 +168,7 @@ export type ValueLabelConfig = {
     border?: string;
     borderRadius?: number;
     padding?: number;
+    formatter?: SeriesValueFormatter;
 };
 export type LineValueLabelConfig = ValueLabelConfig & {
     show?: boolean;
@@ -176,6 +178,7 @@ export type BarValueLabelConfig = ValueLabelConfig & {
     position?: 'inside' | 'outside';
     insidePosition?: 'top' | 'middle' | 'bottom';
 };
+export type BarSide = 'left' | 'right';
 export type LineConfigBase = {
     dataKey: string;
     stroke?: string;
@@ -185,11 +188,21 @@ export type LineConfigBase = {
 export type LineConfig = LineConfigBase & {
     exportHooks?: ExportHooks<LineConfigBase>;
 };
+export type ScatterConfigBase = {
+    dataKey: string;
+    stroke?: string;
+    pointSize?: number;
+    valueLabel?: LineValueLabelConfig;
+};
+export type ScatterConfig = ScatterConfigBase & {
+    exportHooks?: ExportHooks<ScatterConfigBase>;
+};
 export type BarConfigBase = {
     dataKey: string;
     fill?: string;
     colorAdapter?: (data: DataItem, index: number) => string;
     maxBarSize?: number;
+    side?: BarSide;
     valueLabel?: BarValueLabelConfig;
 };
 export type BarConfig = BarConfigBase & {
@@ -265,7 +278,7 @@ export type GridConfig = GridConfigBase & {
     exportHooks?: ExportHooks<GridConfigBase>;
 };
 export type TooltipConfigBase = {
-    formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
+    formatter?: SeriesValueFormatter;
     labelFormatter?: (label: string, data: DataItem) => string;
     customFormatter?: (data: DataItem, series: {
         dataKey: string;
@@ -328,6 +341,7 @@ export type ScaleConfig = {
     range?: number[];
     padding?: number;
     groupGap?: number;
+    reverse?: boolean;
     nice?: boolean;
     min?: number;
     max?: number;
@@ -344,6 +358,10 @@ export type BarStackingContext = {
     totalSeries: number;
     cumulativeData: Map<string, number>;
     totalData: Map<string, number>;
+    positiveCumulativeData: Map<string, number>;
+    negativeCumulativeData: Map<string, number>;
+    positiveTotalData: Map<string, number>;
+    negativeTotalData: Map<string, number>;
     gap: number;
     nextLayerData?: Map<string, number>;
 };