AG-15505 Update chart and legend item padding

packages/ag-charts-community-examples/src/charts-overview/examples/chart-customisation/main.ts

@@ -114,7 +114,7 @@ const options: AgChartOptions = {
     ],
     legend: {
         item: {
-            paddingX: 40,
+            padding: { x: 40 },
             marker: {
                 strokeWidth: 0,
                 padding: 10,

packages/ag-charts-community-examples/src/charts-overview/examples/line-with-gaps/main.ts

@@ -220,7 +220,7 @@ const options: AgChartOptions = {
   ],
   legend: {
     item: {
-      paddingY: 15,
+      padding: { y: 15 },
     },
     spacing: 30,
   },

packages/ag-charts-community/src/chart/agChart.test.ts

@@ -78,7 +78,7 @@ describe('AgChart', () => {
             ],
             legend: {
                 item: {
-                    paddingY: 16,
+                    padding: { y: 16 },
                 },
             },
         });
@@ -134,10 +134,7 @@ describe('AgChart', () => {
         expect(chart.width).toBe(500);
         expect(chart.height).toBe(500);
         expect(chart.data.data.length).toBe(4);
-        expect(chart.padding.top).toBe(30);
-        expect(chart.padding.right).toBe(40);
-        expect(chart.padding.bottom).toBe(50);
-        expect(chart.padding.left).toBe(60);
+        expect(chart.padding).toEqual({ top: 30, right: 40, bottom: 50, left: 60 });
         expect(chart.title?.enabled).toBe(theme.config.line.title.enabled);
         expect(chart.title?.text).toBe(theme.config.line.title.text);
 
@@ -173,7 +170,7 @@ describe('AgChart', () => {
             ],
             legend: {
                 item: {
-                    paddingY: 16,
+                    padding: { y: 16 },
                 },
             },
         });

packages/ag-charts-community/src/chart/cartesianChart.ts

@@ -278,7 +278,7 @@ export class CartesianChart extends Chart {
 
             const { primaryTickCount, bbox } = axis.calculateLayout(
                 axis.nice ? primaryTickCounts[direction] : undefined,
-                { sizeLimit: axisWidth - axis.label.spacing, padding: this.padding }
+                { sizeLimit: axisWidth - axis.label.spacing, padding: this.paddingInternal }
             );
 
             primaryTickCounts[direction] ??= primaryTickCount;

packages/ag-charts-community/src/chart/chart.ts

@@ -26,6 +26,7 @@ import type {
     AgMiniChartSeriesOptions,
     AgPolarAxisOptions,
     FormatterConfiguration,
+    Padding as PaddingOption,
     SeriesOptionsTypes,
     SeriesType,
     TextOrSegments,
@@ -208,7 +209,15 @@ export abstract class Chart extends Observable implements ModuleInstance, ChartS
     private readonly chartCaptions = new ChartCaptions();
 
     @Property
-    readonly padding = new Padding(20);
+    readonly padding!: PaddingOption;
+    get paddingInternal(): Padding {
+        const padding = this.padding;
+        if (typeof padding === 'number') {
+            return new Padding(padding, padding, padding, padding);
+        } else {
+            return new Padding(padding.top, padding.right, padding.bottom, padding.left);
+        }
+    }
 
     get seriesAreaBoundingBox() {
         return this.seriesAreaManager.bbox;
@@ -362,7 +371,7 @@ export abstract class Chart extends Observable implements ModuleInstance, ChartS
         this.seriesAreaManager = new SeriesAreaManager(this.initSeriesAreaDependencies());
         this.cleanup.register(
             ctx.layoutManager.registerElement(LayoutElement.Caption, (e) => {
-                e.layoutBox.shrink(this.padding.toJson());
+                e.layoutBox.shrink(this.paddingInternal.toJson());
                 this.chartCaptions.positionCaptions(e);
             }),
             ctx.eventsHub.on('layout:complete', (e) => this.chartCaptions.positionAbsoluteCaptions(e)),
@@ -1178,7 +1187,7 @@ export abstract class Chart extends Observable implements ModuleInstance, ChartS
 
         this.ctx.seriesLabelLayoutManager.updateLabels(
             this.series.filter((s) => s.visible && s.usesPlacedLabels),
-            this.padding,
+            this.paddingInternal,
             this.seriesRect
         );
     }

packages/ag-charts-community/src/chart/commonOptionsDefs.ts

@@ -34,6 +34,7 @@ import {
     optionsDefs,
     or,
     padding,
+    paddingSide,
     positiveNumber,
     ratio,
     required,
@@ -310,12 +311,7 @@ export const commonChartOptionsDefs: OptionsDefs<Omit<AgBaseThemeableChartOption
     title: chartCaptionOptionsDefs,
     subtitle: chartCaptionOptionsDefs,
     footnote: chartCaptionOptionsDefs,
-    padding: {
-        top: positiveNumber,
-        right: positiveNumber,
-        bottom: positiveNumber,
-        left: positiveNumber,
-    },
+    padding: padding,
     seriesArea: {
         border: borderOptionsDef,
         clip: boolean,
@@ -356,6 +352,7 @@ export const commonChartOptionsDefs: OptionsDefs<Omit<AgBaseThemeableChartOption
             maxWidth: positiveNumber,
             paddingX: positiveNumber,
             paddingY: positiveNumber,
+            padding: paddingSide,
             showSeriesStroke: boolean,
         },
         pagination: {

packages/ag-charts-community/src/chart/legend/legend.ts

@@ -29,6 +29,7 @@ import type {
     FontWeight,
     Formatter,
     Padding,
+    PaddingSide,
     PixelSize,
 } from 'ag-charts-types';
 
@@ -43,6 +44,7 @@ import { Transformable } from '../../scene/transformable';
 import { isImageFill, isPatternFill } from '../../scene/util/fill';
 import { Border } from '../../util/border';
 import { callWithContext } from '../../util/callbackCache';
+import { Deprecated } from '../../util/deprecation';
 import { deepClone } from '../../util/json';
 import { objectsEqual } from '../../util/object';
 import { BaseProperties, Property } from '../../util/properties';
@@ -132,14 +134,19 @@ class LegendItem extends BaseProperties {
      * padding between legend items.
      */
     @Property
-    paddingX: number = 16;
+    @Deprecated('Use [padding] instead.')
+    paddingX?: number = undefined;
     /**
      * The legend uses grid layout for its items, occupying as few columns as possible when positioned to left or right,
      * and as few rows as possible when positioned to top or bottom. This config specifies the amount of vertical
      * padding between legend items.
      */
     @Property
-    paddingY: number = 8;
+    @Deprecated('Use [padding] instead.')
+    paddingY?: number = undefined;
+
+    @Property
+    padding: PaddingSide = 0;
 
     @Property
     showSeriesStroke: boolean = false;
@@ -428,8 +435,6 @@ export class Legend extends BaseProperties {
      */
     private calcLayout(width: number, height: number) {
         const {
-            paddingX,
-            paddingY,
             label,
             maxWidth,
             label: { maxLength = Infinity, fontStyle, fontWeight, fontSize, fontFamily },
@@ -487,7 +492,8 @@ export class Legend extends BaseProperties {
         const { pages, maxPageHeight, maxPageWidth } = this.updatePagination(bboxes, width, height);
         const oldPages = this.pages;
         this.pages = pages;
-        this.maxPageSize = [maxPageWidth - paddingX, maxPageHeight - paddingY];
+
+        this.maxPageSize = [maxPageWidth - this.getItemPaddingX(), maxPageHeight - this.getItemPaddingY()];
 
         const pageNumber = this.pagination.currentPage;
         const page = this.pages[pageNumber];
@@ -567,9 +573,9 @@ export class Legend extends BaseProperties {
         markerWidth: number,
         anyLineEnabled: boolean
     ): number {
-        const { marker: itemMarker, paddingX } = this.item;
+        const { marker: itemMarker } = this.item;
         const { symbol } = datum;
-        let paddedSymbolWidth = paddingX;
+        let paddedSymbolWidth = this.getItemPaddingX();
 
         const { markerEnabled, isCustomMarker } = this.calcSymbolsEnabled(symbol);
 
@@ -670,10 +676,9 @@ export class Legend extends BaseProperties {
         const newCurrentPage = pages.findIndex((p) => p.endIndex >= trackingIndex);
         this.pagination.currentPage = clamp(0, newCurrentPage, pages.length - 1);
 
-        const { paddingX: itemPaddingX, paddingY: itemPaddingY } = this.item;
         const paginationComponentPadding = 8;
-        const legendItemsWidth = maxPageWidth - itemPaddingX;
-        const legendItemsHeight = maxPageHeight - itemPaddingY;
+        const legendItemsWidth = maxPageWidth - this.getItemPaddingX();
+        const legendItemsHeight = maxPageHeight - this.getItemPaddingY();
 
         let paginationX = 0;
         let paginationY = -paginationBBox.y - this.item.marker.size / 2;
@@ -704,7 +709,8 @@ export class Legend extends BaseProperties {
     }
 
     private calculatePagination(bboxes: BBox[], width: number, height: number) {
-        const { paddingX: itemPaddingX, paddingY: itemPaddingY } = this.item;
+        const itemPaddingX = this.getItemPaddingX();
+        const itemPaddingY = this.getItemPaddingY();
 
         const vertPositions: readonly AgChartLegendPosition[] = [
             'left',
@@ -772,11 +778,7 @@ export class Legend extends BaseProperties {
     }
 
     private updatePositions(pageNumber: number = 0) {
-        const {
-            item: { paddingY },
-            itemSelection,
-            pages,
-        } = this;
+        const { itemSelection, pages } = this;
 
         if (pages.length < 1 || !pages[pageNumber]) {
             return;
@@ -792,7 +794,7 @@ export class Legend extends BaseProperties {
         const rowCount = columns[0].indices.length;
         const horizontal = this.getOrientation() === 'horizontal';
 
-        const itemHeight = columns[0].bboxes[0].height + paddingY;
+        const itemHeight = columns[0].bboxes[0].height + this.getItemPaddingY();
 
         const rowSumColumnWidths: number[] = [];
 
@@ -946,6 +948,16 @@ export class Legend extends BaseProperties {
         );
     }
 
+    private getItemPaddingX() {
+        const { padding } = this.item;
+        return typeof padding === 'number' ? padding : padding.x ?? 0;
+    }
+
+    private getItemPaddingY() {
+        const { padding } = this.item;
+        return typeof padding === 'number' ? padding : padding.y ?? 0;
+    }
+
     private computePagedBBox(): BBox {
         // Get BBox without group transforms applied.
         const actualBBox = Group.computeChildrenBBox(this.group.excludeChildren({ name: 'legend-container' }));

packages/ag-charts-community/src/chart/legend/legendModule.ts

@@ -8,6 +8,7 @@ import {
     fontOptionsDef,
     number,
     padding,
+    paddingSide,
     positiveNumber,
     ratio,
     strokeOptionsDef,
@@ -58,6 +59,7 @@ export const LegendModule: PluginModuleDefinition<AgChartLegendOptions> = {
             maxWidth: positiveNumber,
             paddingX: positiveNumber,
             paddingY: positiveNumber,
+            padding: paddingSide,
             showSeriesStroke: boolean,
         },
         pagination: {

packages/ag-charts-community/src/chart/polarChart.ts

@@ -3,7 +3,6 @@ import { iterate } from 'ag-charts-core';
 
 import type { ChartOptions } from '../module/optionsModule';
 import { BBox } from '../scene/bbox';
-import { Padding } from '../util/padding';
 import { PolarAxis } from './axis/polarAxis';
 import type { TransferableResources } from './chart';
 import { Chart } from './chart';
@@ -17,8 +16,6 @@ export class PolarChart extends Chart {
     static readonly className = 'PolarChart';
     static readonly type = 'polar' as const;
 
-    override padding = new Padding(40);
-
     constructor(options: ChartOptions, resources?: TransferableResources) {
         super(options, resources);
         this.ctx.axisManager.axisGroup.zIndex = ZIndexMap.AXIS_FOREGROUND;

packages/ag-charts-community/src/chart/test/examples.ts

@@ -4310,7 +4310,7 @@ export const TRUNCATED_LEGEND_ITEMS: AgCartesianChartOptions = {
     legend: {
         position: 'left',
         item: {
-            paddingY: 15,
+            padding: { y: 15 },
             maxWidth: 100,
         },
     },

packages/ag-charts-community/src/chart/themes/chartTheme.ts

@@ -313,6 +313,7 @@ export class ChartTheme {
             minWidth: 300,
             background: { visible: true, fill: { $ref: 'chartBackgroundColor' } },
             padding: {
+                // Default each side to allow the user to override them individually
                 top: { $ref: 'chartPadding' },
                 right: { $ref: 'chartPadding' },
                 bottom: { $ref: 'chartPadding' },
@@ -412,8 +413,10 @@ export class ChartTheme {
                 listeners: {},
                 toggleSeries: true,
                 item: {
-                    paddingX: 16,
-                    paddingY: 8,
+                    padding: {
+                        x: { $path: ['./paddingX', 16] },
+                        y: { $path: ['./paddingY', 8] },
+                    },
                     marker: { size: 15, padding: 8 },
                     showSeriesStroke: true,
                     label: {

packages/ag-charts-community/src/chart/update/processor.ts

@@ -1,15 +1,10 @@
 import type { Scale } from 'ag-charts-core';
 
-import type { Group } from '../../scene/group';
-import type { Padding } from '../../util/padding';
-
 /** Interface to abstract from the actual chart implementation. */
 export interface ChartLike {
     context?: unknown;
     axes: AxisLike[];
     series: SeriesLike[];
-    seriesRoot: Group;
-    padding: Padding;
 }
 
 export interface AxisLike {