Move axisTitle style to theme

packages/charts/api/charts.api.md

@@ -1135,6 +1135,11 @@ export interface HeatmapSpec extends Spec {
 
 // @public (undocumented)
 export interface HeatmapStyle {
+    // (undocumented)
+    axisTitle: Visible & Font & {
+        fontSize: Pixels;
+        padding: Pixels | SimplePadding;
+    };
     brushArea: {
         visible: boolean;
         fill?: Color;
@@ -1196,7 +1201,7 @@ export interface HeatmapStyle {
         align: TextAlign;
         baseline: TextBaseline;
         visible: boolean;
-        padding: number;
+        padding: Pixels | Padding;
     };
     // (undocumented)
     yAxisLabel: Font & {
@@ -1206,12 +1211,7 @@ export interface HeatmapStyle {
         };
         baseline: TextBaseline;
         visible: boolean;
-        padding: number | {
-            left?: number;
-            right?: number;
-            top?: number;
-            bottom?: number;
-        };
+        padding: Pixels | Padding;
     };
 }
 
@@ -2132,9 +2132,9 @@ export type ShowAccessor = (value: PrimitiveValue) => boolean;
 // @public
 export interface SimplePadding {
     // (undocumented)
-    inner: number;
+    inner: Pixels;
     // (undocumented)
-    outer: number;
+    outer: Pixels;
 }
 
 // @alpha (undocumented)

packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts

@@ -19,7 +19,7 @@ import { LinearScale, OrdinalScale, RasterTimeScale } from '../../../../specs';
 import { withTextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
 import { addIntervalToTime } from '../../../../utils/chrono/elasticsearch';
 import { clamp } from '../../../../utils/common';
-import { Dimensions, innerPad } from '../../../../utils/dimensions';
+import { Dimensions, innerPad, pad } from '../../../../utils/dimensions';
 import { Logger } from '../../../../utils/logger';
 import { HeatmapStyle, Theme } from '../../../../utils/themes/theme';
 import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup';
@@ -56,11 +56,11 @@ function getValuesInRange(
 function estimatedNonOverlappingTickCount(
   chartWidth: number,
   formatter: HeatmapSpec['xAxisLabelFormatter'],
-  { padding, fontSize, fontFamily }: HeatmapStyle['xAxisLabel'],
+  { fontSize, fontFamily }: HeatmapStyle['xAxisLabel'],
 ): number {
   return withTextMeasure((textMeasure) => {
     const labelSample = formatter(Date.now());
-    const { width } = textMeasure(labelSample, padding, fontSize, fontFamily);
+    const { width } = textMeasure(labelSample, 0, fontSize, fontFamily);
     const maxTicks = chartWidth / width;
     // Dividing by 2 is a temp fix to make sure {@link ScaleContinuous} won't produce
     // to many ticks creating nice rounded tick values
@@ -123,7 +123,7 @@ export function shapeViewModel(
     return {
       ...d,
       // position of the Y labels
-      x: -(typeof padding === 'number' ? padding : padding.right ?? 0),
+      x: -pad(padding, 'right'),
       y: cellHeight / 2 + (yScale(d.value) || 0),
     };
   });
@@ -417,13 +417,15 @@ function getXTicks(
     formatter: HeatmapSpec['xAxisLabelFormatter'],
     scaleCallback: (x: string | number) => number | undefined | null,
   ) => (value: string | number): TextBox => {
+    const ip = 6; //innerPad(style.xAxisLabel.padding);
+    console.log(ip);
     return {
       text: formatter(value),
       value,
       isValue: false,
       ...style.xAxisLabel,
       x: scaleCallback(value) ?? 0,
-      y: style.xAxisLabel.fontSize / 2 + style.xAxisLabel.padding,
+      y: style.xAxisLabel.fontSize / 2 + ip,
     };
   };
   if (isRasterTimeScale(spec.xScale)) {

packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts

@@ -13,7 +13,7 @@ import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getLegendSizeSelector } from '../../../../state/selectors/get_legend_size';
-import { Dimensions, innerPad, outerPad } from '../../../../utils/dimensions';
+import { Dimensions, innerPad, outerPad, verticalPad } from '../../../../utils/dimensions';
 import { isHorizontalLegend } from '../../../../utils/legend';
 import { HeatmapStyle } from '../../../../utils/themes/theme';
 import { HeatmapCellDatum } from '../../layout/viewmodel/viewmodel';
@@ -85,7 +85,9 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
     const yAxisWidth = getYAxisHorizontalUsedSpace(yValues, heatmap.yAxisLabel, textMeasure);
 
     const xAxisTitleVerticalSize = getTextSizeDimension(xAxisLabelName, heatmap.axisTitle, textMeasure, 'height');
-    const xAxisHeight = heatmap.xAxisLabel.visible ? heatmap.xAxisLabel.fontSize + heatmap.xAxisLabel.padding * 2 : 0;
+    const xAxisHeight = heatmap.xAxisLabel.visible
+      ? heatmap.xAxisLabel.fontSize + verticalPad(heatmap.xAxisLabel.padding)
+      : 0;
 
     const availableHeightForGrid = container.height - xAxisTitleVerticalSize - xAxisHeight - legendHeight;
 
@@ -118,6 +120,8 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
       left: grid.left,
     };
 
+    console.log({ grid, container, xAxis, rowHeight });
+
     return { grid, yAxis, xAxis, visibleNumberOfRows, fullHeatmapHeight, rowHeight };
   },
 );

packages/charts/src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts

@@ -11,6 +11,7 @@ import { ScaleType } from '../../../../scales/constants';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { withTextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
+import { horizontalPad } from '../../../../utils/dimensions';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';
 import { getHeatmapTableSelector } from './get_heatmap_table';
 
@@ -40,7 +41,8 @@ export const getXAxisRightOverflow = createCustomCachedSelector(
           )
             .ticks()
             .reduce(
-              (max, n) => Math.max(max, measure(xAxisLabelFormatter(n), padding, fontSize, fontFamily).width + padding),
+              (max, n) =>
+                Math.max(max, measure(xAxisLabelFormatter(n), horizontalPad(padding), fontSize, fontFamily).width),
               0,
             );
         }) / 2;

packages/charts/src/utils/dimensions.ts

@@ -41,7 +41,7 @@ export interface PerSideDistance {
 export type Margins = PerSideDistance;
 
 /**
- * todo seperate type with parition padding type that allows number
+ * todo separate type with partition padding type that allows number
  * @public
  */
 export type Padding = PerSideDistance;
@@ -62,3 +62,15 @@ export const innerPad = (padding: number | Partial<SimplePadding>, minPadding =
 /** @internal */
 export const outerPad = (padding: number | Partial<SimplePadding>, minPadding = 0) =>
   Math.max(minPadding, typeof padding === 'number' ? padding : padding?.outer ?? 0);
+
+/** @internal */
+export const verticalPad = (padding: number | Padding, minPadding = 0) =>
+  Math.max(minPadding, typeof padding === 'number' ? padding * 2 : padding.top + padding.bottom);
+
+/** @internal */
+export const horizontalPad = (padding: number | Padding, minPadding = 0) =>
+  Math.max(minPadding, typeof padding === 'number' ? padding * 2 : padding.left + padding.right);
+
+/** @internal */
+export const pad = (padding: number | Padding, direction: keyof Padding, minPadding = 0) =>
+  Math.max(minPadding, typeof padding === 'number' ? padding : padding[direction]);

packages/charts/src/utils/themes/dark_theme.ts

@@ -337,7 +337,7 @@ export const DARK_THEME: Theme = {
       fontWeight: 'normal',
       align: 'center',
       baseline: 'middle',
-      padding: 6,
+      padding: { top: 6, bottom: 6, left: 6, right: 6 },
     },
     yAxisLabel: {
       visible: true,
@@ -349,7 +349,7 @@ export const DARK_THEME: Theme = {
       fontVariant: 'normal',
       fontWeight: 'normal',
       baseline: 'middle',
-      padding: 5,
+      padding: { top: 5, bottom: 5, left: 5, right: 5 },
     },
     axisTitle: {
       visible: true,

packages/charts/src/utils/themes/light_theme.ts

@@ -336,7 +336,7 @@ export const LIGHT_THEME: Theme = {
       fontWeight: 'normal',
       align: 'center',
       baseline: 'middle',
-      padding: 6,
+      padding: { top: 6, bottom: 6, left: 6, right: 6 },
     },
     yAxisLabel: {
       visible: true,
@@ -348,7 +348,7 @@ export const LIGHT_THEME: Theme = {
       fontVariant: 'normal',
       fontWeight: 'normal',
       baseline: 'middle',
-      padding: 5,
+      padding: { top: 5, bottom: 5, left: 5, right: 5 },
     },
     axisTitle: {
       visible: true,

packages/charts/src/utils/themes/theme.ts

@@ -12,7 +12,7 @@ import { Color } from '../../common/colors';
 import { Pixels, Ratio } from '../../common/geometry';
 import { Font, FontStyle, TextAlign, TextBaseline } from '../../common/text_utils';
 import { ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment } from '../common';
-import { Margins, SimplePadding } from '../dimensions';
+import { Margins, Padding, SimplePadding } from '../dimensions';
 import { Point } from '../point';
 import { PartitionStyle } from './partition';
 
@@ -217,14 +217,14 @@ export interface HeatmapStyle {
     align: TextAlign;
     baseline: TextBaseline;
     visible: boolean;
-    padding: number;
+    padding: Pixels | Padding;
   };
   yAxisLabel: Font & {
     fontSize: Pixels;
     width: Pixels | 'auto' | { max: Pixels };
     baseline: TextBaseline;
     visible: boolean;
-    padding: number | { left?: number; right?: number; top?: number; bottom?: number };
+    padding: Pixels | Padding;
   };
   axisTitle: Visible & Font & { fontSize: Pixels; padding: Pixels | SimplePadding };
   grid: {