feat(axis): improved axis styles (#711)

Axis improvements

- Hide axis but show gridlines
- hide axis titles, labels, ticks and line independently
- add inner and outer padding to tick labels
- add inner and outer padding to axes titles
- transform offsets relative to local reference (i.e. rotated coordinates)
- transform offsets relative to global reference
- add tick label horizontal and vertical alignment

closes #714, #312

BREAKING CHANGES

property name changes:

AxisSpec.gridLineStyle => AxisSpec.gridLine
AxisSpec.gridLineStyle => AxisSpec.gridLine
type changes:

AxisSpec.tickLabelRotation => AxisStyle.tickLabel.rotation
AxisSpec.tickPadding => AxisStyle.tickLine.padding
AxisSpec.tickSize => AxisStyle.tickLine.size
AxisStyle.tickLabelPadding => AxisStyle.tickLabel.padding
GridLineConfig => GridLineStyle
AxisSpec.style => RecursivePartial<AxisStyle> (new AxisStyle type)
AxisConfig.axisLineStyle => AxisStyle.axisLine
AxisConfig.axisTitleStyle => AxisStyle.axisTitle
AxisConfig.tickLabelStyle => AxisStyle.tickLabel
AxisConfig.tickLineStyle => AxisStyle.tickLine
GridLineStyle requires all properties
deprecate AxisSpec.showGridLines in favor of AxisSpec.gridLine.visible

.eslintrc.js

@@ -34,7 +34,7 @@ module.exports = {
     '@typescript-eslint/no-unsafe-return': 0,
     '@typescript-eslint/explicit-module-boundary-types': 0,
     '@typescript-eslint/restrict-template-expressions': 1,
-    '@typescript-eslint/restrict-plus-operands': 1,
+    '@typescript-eslint/restrict-plus-operands': 0, // rule is broken
     '@typescript-eslint/no-unsafe-call': 1,
     '@typescript-eslint/unbound-method': 1,
     'unicorn/consistent-function-scoping': 1,

api/charts.api.md

@@ -113,25 +113,6 @@ export interface AreaStyle {
 // @public (undocumented)
 export const Axis: React.FunctionComponent<SpecRequired & SpecOptionals>;
 
-// Warning: (ae-missing-release-tag) "AxisConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export interface AxisConfig {
-    // (undocumented)
-    axisLineStyle: StrokeStyle;
-    // (undocumented)
-    axisTitleStyle: TextStyle;
-    // (undocumented)
-    gridLineStyle: {
-        horizontal: GridLineConfig;
-        vertical: GridLineConfig;
-    };
-    // (undocumented)
-    tickLabelStyle: TextStyle;
-    // (undocumented)
-    tickLineStyle: TickStyle;
-}
-
 // @public (undocumented)
 export type AxisId = string;
 
@@ -142,33 +123,49 @@ export interface AxisSpec extends Spec {
     // (undocumented)
     chartType: typeof ChartTypes.XYAxis;
     domain?: YDomainRange;
-    gridLineStyle?: GridLineConfig;
+    gridLine?: Partial<GridLineStyle>;
     groupId: GroupId;
     hide: boolean;
     id: AxisId;
     integersOnly?: boolean;
     labelFormat?: TickFormatter;
     position: Position;
     showDuplicatedTicks?: boolean;
+    // @deprecated
     showGridLines?: boolean;
     showOverlappingLabels: boolean;
     showOverlappingTicks: boolean;
     // (undocumented)
     specType: typeof SpecTypes.Axis;
-    style?: AxisStyle;
+    style?: RecursivePartial<Omit<AxisStyle, 'gridLine'>>;
     tickFormat: TickFormatter;
-    tickLabelRotation?: number;
-    tickPadding: number;
     ticks?: number;
-    tickSize: number;
     title?: string;
 }
 
 // Warning: (ae-missing-release-tag) "AxisStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface AxisStyle {
-    tickLabelPadding?: number;
+    // (undocumented)
+    axisLine: StrokeStyle & Visible;
+    // Warning: (ae-forgotten-export) The symbol "Visible" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    axisTitle: TextStyle & Visible;
+    // (undocumented)
+    gridLine: {
+        horizontal: GridLineStyle;
+        vertical: GridLineStyle;
+    };
+    // (undocumented)
+    tickLabel: TextStyle & Visible & {
+        rotation: number;
+        offset: TextOffset;
+        alignment: TextAlignment;
+    };
+    // (undocumented)
+    tickLine: TickStyle;
 }
 
 // @public
@@ -385,8 +382,6 @@ export type CompleteBoundedDomain = DomainBase & LowerBound & UpperBound;
 //
 // @public (undocumented)
 export interface CrosshairStyle {
-    // Warning: (ae-forgotten-export) The symbol "Visible" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
     band: FillStyle & Visible;
     // (undocumented)
@@ -661,20 +656,18 @@ export interface GoalSpec extends Spec {
     tickValueFormatter: BandFillColorAccessor;
 }
 
-// Warning: (ae-missing-release-tag) "GridLineConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
-export interface GridLineConfig {
+export interface GridLineStyle {
     // (undocumented)
-    dash?: number[];
+    dash: number[];
     // (undocumented)
-    opacity?: number;
+    opacity: number;
     // (undocumented)
-    stroke?: Color;
+    stroke: Color;
     // (undocumented)
-    strokeWidth?: number;
+    strokeWidth: number;
     // (undocumented)
-    visible?: boolean;
+    visible: boolean;
 }
 
 // Warning: (ae-missing-release-tag) "GroupBrushExtent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -721,6 +714,20 @@ export const HistogramModeAlignments: Readonly<{
     End: LineAlignSetting;
 }>;
 
+// Warning: (ae-missing-release-tag) "HorizontalAlignment" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const HorizontalAlignment: Readonly<{
+    Center: "center";
+    Right: "right";
+    Left: "left";
+    Near: "near";
+    Far: "far";
+}>;
+
+// @public
+export type HorizontalAlignment = $Values<typeof HorizontalAlignment>;
+
 // Warning: (ae-forgotten-export) The symbol "BinaryAccessorFn" needs to be exported by the entry point index.d.ts
 //
 // @public
@@ -862,11 +869,6 @@ export type LowerBoundedDomain = DomainBase & LowerBound;
 // @public
 export type MarkBuffer = number | ((radius: number) => number);
 
-// Warning: (ae-missing-release-tag) "mergeGridLineConfigs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export function mergeGridLineConfigs(axisSpecConfig: GridLineConfig, themeConfig: GridLineConfig): GridLineConfig;
-
 // Warning: (ae-missing-release-tag) "mergeWithDefaultAnnotationLine" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1349,6 +1351,14 @@ export interface SharedGeometryStateStyle {
     unhighlighted: GeometryStateStyle;
 }
 
+// @public
+export interface SimplePadding {
+    // (undocumented)
+    inner: number;
+    // (undocumented)
+    outer: number;
+}
+
 // Warning: (ae-missing-release-tag) "Spec" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1385,6 +1395,21 @@ export interface StrokeStyle<C = Color> {
     strokeWidth: number;
 }
 
+// @public
+export interface TextAlignment {
+    // (undocumented)
+    horizontal: HorizontalAlignment;
+    // (undocumented)
+    vertical: VerticalAlignment;
+}
+
+// @public
+export interface TextOffset {
+    reference: 'global' | 'local';
+    x: number | string;
+    y: number | string;
+}
+
 // Warning: (ae-missing-release-tag) "TextStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1398,7 +1423,7 @@ export interface TextStyle {
     // (undocumented)
     fontStyle?: string;
     // (undocumented)
-    padding: number;
+    padding: number | SimplePadding;
 }
 
 // Warning: (ae-missing-release-tag) "Theme" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1409,7 +1434,7 @@ export interface Theme {
     arcSeriesStyle: ArcSeriesStyle;
     areaSeriesStyle: AreaSeriesStyle;
     // (undocumented)
-    axes: AxisConfig;
+    axes: AxisStyle;
     background: BackgroundStyle;
     barSeriesStyle: BarSeriesStyle;
     bubbleSeriesStyle: BubbleSeriesStyle;
@@ -1438,7 +1463,10 @@ export type TickFormatterOptions = {
 };
 
 // @public (undocumented)
-export type TickStyle = StrokeStyle & Visible;
+export type TickStyle = StrokeStyle & Visible & {
+    padding: number;
+    size: number;
+};
 
 // Warning: (ae-missing-release-tag) "timeFormatter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1506,6 +1534,20 @@ export type UnboundedDomainWithInterval = DomainBase;
 // @public (undocumented)
 export type UpperBoundedDomain = DomainBase & UpperBound;
 
+// Warning: (ae-missing-release-tag) "VerticalAlignment" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const VerticalAlignment: Readonly<{
+    Middle: "middle";
+    Top: "top";
+    Bottom: "bottom";
+    Near: "near";
+    Far: "far";
+}>;
+
+// @public
+export type VerticalAlignment = $Values<typeof VerticalAlignment>;
+
 // Warning: (ae-missing-release-tag) "XYBrushArea" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)

integration/helpers.ts

@@ -72,15 +72,18 @@ function encodeString(string: string) {
  */
 const storiesToSkip: Record<string, string[]> = {
   // Interactions: ['Some story name'],
+  Legend: [
+    'Actions',
+  ],
 };
 
 /**
  * Delays for stories to skip in all vrt based on group.
  */
 const storiesToDelay: Record<string, Record<string, number>> = {
-  Legend: {
-    Actions: 200, // needed for icon to load
-  },
+  // GroupName: {
+  //   'some story name': 200,
+  // },
 };
 
 export function getStorybookInfo(): StoryGroupInfo[] {

src/chart_types/xy_chart/annotations/utils.test.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { RecursivePartial } from '@elastic/eui';
 import React from 'react';
 
 import { ChartTypes } from '../..';
@@ -29,7 +30,7 @@ import { Position, Rotation } from '../../../utils/commons';
 import { Dimensions } from '../../../utils/dimensions';
 import { GroupId, AnnotationId } from '../../../utils/ids';
 import { Point } from '../../../utils/point';
-import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/theme';
+import { DEFAULT_ANNOTATION_LINE_STYLE, AxisStyle } from '../../../utils/themes/theme';
 import { computeAnnotationDimensionsSelector } from '../state/selectors/compute_annotations';
 import {
   AnnotationDomainTypes,
@@ -73,6 +74,12 @@ describe('annotation utils', () => {
   };
 
   const groupId = 'foo-group';
+  const style: RecursivePartial<AxisStyle> = {
+    tickLine: {
+      size: 10,
+      padding: 10,
+    },
+  };
 
   const axesSpecs: AxisSpec[] = [];
   const verticalAxisSpec: AxisSpec = {
@@ -84,8 +91,7 @@ describe('annotation utils', () => {
     showOverlappingTicks: false,
     showOverlappingLabels: false,
     position: Position.Left,
-    tickSize: 10,
-    tickPadding: 10,
+    style,
     tickFormat: (value: any) => value.toString(),
     showGridLines: true,
   };
@@ -98,8 +104,7 @@ describe('annotation utils', () => {
     showOverlappingTicks: false,
     showOverlappingLabels: false,
     position: Position.Bottom,
-    tickSize: 10,
-    tickPadding: 10,
+    style,
     tickFormat: (value: any) => value.toString(),
     showGridLines: true,
   };

src/chart_types/xy_chart/legend/legend.test.ts

@@ -21,7 +21,8 @@ import { ChartTypes } from '../..';
 import { LegendItem } from '../../../commons/legend';
 import { ScaleType } from '../../../scales/constants';
 import { SpecTypes } from '../../../specs/constants';
-import { Position } from '../../../utils/commons';
+import { Position, RecursivePartial } from '../../../utils/commons';
+import { AxisStyle } from '../../../utils/themes/theme';
 import { SeriesCollectionValue, getSeriesName } from '../utils/series';
 import { AxisSpec, BasicSeriesSpec, SeriesTypes } from '../utils/specs';
 import { computeLegend } from './legend';
@@ -94,6 +95,12 @@ const spec2: BasicSeriesSpec = {
   hideInLegend: false,
 };
 
+const style: RecursivePartial<AxisStyle> = {
+  tickLine: {
+    size: 10,
+    padding: 10,
+  },
+};
 const axesSpecs: AxisSpec[] = [];
 const axisSpec: AxisSpec = {
   chartType: ChartTypes.XYAxis,
@@ -104,8 +111,7 @@ const axisSpec: AxisSpec = {
   showOverlappingTicks: false,
   showOverlappingLabels: false,
   position: Position.Left,
-  tickSize: 10,
-  tickPadding: 10,
+  style,
   tickFormat: (value: any) => `${value}`,
 };
 axesSpecs.push(axisSpec);