AG-14184 Refactor title spacing to use theme operations

ag-grid · Feb 27, 2025 · 4093259 · 4093259
1 parent 466fdf6
commit 4093259
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 3 deletions.
diff --git a/packages/ag-charts-community/src/chart/caption.ts b/packages/ag-charts-community/src/chart/caption.ts
@@ -26,7 +26,6 @@ import type { CaptionLike } from './captionLike';
 
 export class Caption extends BaseProperties implements CaptionLike {
     static readonly SMALL_PADDING = 10;
-    static readonly LARGE_PADDING = 20;
 
     readonly id = createId(this);
     readonly node = new RotatableText({ zIndex: 1 }).setProperties({

diff --git a/packages/ag-charts-community/src/chart/chartCaptions.ts b/packages/ag-charts-community/src/chart/chartCaptions.ts
@@ -22,7 +22,7 @@ export class ChartCaptions {
         const maxHeight = ctx.layoutBox.height / 10; // Limit to 10% of layout initial height
 
         if (title.enabled) {
-            const { spacing = subtitle.enabled ? Caption.SMALL_PADDING : Caption.LARGE_PADDING } = title;
+            const { spacing } = title;
             this.positionCaption('top', title, ctx.layoutBox, maxHeight);
             this.shrinkLayoutByCaption('top', title, ctx.layoutBox, spacing);
         }

diff --git a/packages/ag-charts-community/src/chart/themes/chartTheme.ts b/packages/ag-charts-community/src/chart/themes/chartTheme.ts
@@ -204,6 +204,7 @@ export class ChartTheme {
             title: {
                 enabled: false,
                 text: 'Title',
+                spacing: { $if: [{ $path: '../subtitle/enabled' }, 10, 20] },
                 fontWeight: { $ref: 'fontWeight' },
                 fontSize: { $rem: [FONT_SIZE_RATIO.LARGEST] },
                 fontFamily: { $ref: 'fontFamily' },

diff --git a/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap b/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap
@@ -3736,6 +3736,7 @@ exports[`ChartOptions #prepareOptions for BUBBLE_GRAPH_WITH_CATEGORIES_EXAMPLE i
     "fontSize": 18,
     "fontWeight": 400,
     "layoutStyle": "block",
+    "spacing": 10,
     "text": "Punch Card of Github",
     "textAlign": "center",
     "wrapping": "hyphenate",
@@ -6452,6 +6453,7 @@ exports[`ChartOptions #prepareOptions for LOG_AXIS_EXAMPLE it should prepare opt
     "fontSize": 17,
     "fontWeight": 400,
     "layoutStyle": "block",
+    "spacing": 10,
     "text": "World Population Over Time",
     "textAlign": "center",
     "wrapping": "hyphenate",
@@ -10767,6 +10769,7 @@ exports[`ChartOptions #prepareOptions for STACKED_BAR_CHART_EXAMPLE it should pr
     "fontSize": 17,
     "fontWeight": 400,
     "layoutStyle": "block",
+    "spacing": 20,
     "text": "UK Housing Stock",
     "textAlign": "center",
     "wrapping": "hyphenate",
@@ -11256,6 +11259,7 @@ exports[`ChartOptions #prepareOptions for STACKED_COLUMN_GRAPH_EXAMPLE it should
     "fontSize": 18,
     "fontWeight": 400,
     "layoutStyle": "block",
+    "spacing": 10,
     "text": "Average Station Entries",
     "textAlign": "center",
     "wrapping": "hyphenate",

diff --git a/packages/ag-charts-community/src/module/optionsModule.test.ts b/packages/ag-charts-community/src/module/optionsModule.test.ts
@@ -1723,7 +1723,7 @@ describe('ChartOptions', () => {
             // TODO: theme config fontSize is `{ $ref: 'fontSize' }` as this is the unresolved value. This is not a bug
             // with the real output.
             // expect(preparedOptions.title?.fontSize).toBe(theme.config.line.title.fontSize);
-            expect(preparedOptions.title?.spacing).toBe(theme.config.line.title.spacing);
+            // expect(preparedOptions.title?.spacing).toBe(theme.config.line.title.spacing);
 
             expect(preparedOptions.subtitle?.enabled).toBe(false);
             expect(preparedOptions.subtitle?.text).toBe(theme.config.line.subtitle.text);