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

This reverts commit 4f1a0b1.

.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': 0, // rule is broken
+    '@typescript-eslint/restrict-plus-operands': 1,
     '@typescript-eslint/no-unsafe-call': 1,
     '@typescript-eslint/unbound-method': 1,
     'unicorn/consistent-function-scoping': 1,

api/charts.api.md

@@ -113,6 +113,25 @@ 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;
 
@@ -123,49 +142,33 @@ export interface AxisSpec extends Spec {
     // (undocumented)
     chartType: typeof ChartTypes.XYAxis;
     domain?: YDomainRange;
-    gridLine?: Partial<GridLineStyle>;
+    gridLineStyle?: GridLineConfig;
     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?: RecursivePartial<Omit<AxisStyle, 'gridLine'>>;
+    style?: AxisStyle;
     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 {
-    // (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;
+    tickLabelPadding?: number;
 }
 
 // @public
@@ -382,6 +385,8 @@ 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)
@@ -656,18 +661,20 @@ 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 GridLineStyle {
+export interface GridLineConfig {
     // (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)
@@ -714,20 +721,6 @@ 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
@@ -869,6 +862,11 @@ 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)
@@ -1351,14 +1349,6 @@ 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)
@@ -1395,21 +1385,6 @@ 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)
@@ -1423,7 +1398,7 @@ export interface TextStyle {
     // (undocumented)
     fontStyle?: string;
     // (undocumented)
-    padding: number | SimplePadding;
+    padding: number;
 }
 
 // Warning: (ae-missing-release-tag) "Theme" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1434,7 +1409,7 @@ export interface Theme {
     arcSeriesStyle: ArcSeriesStyle;
     areaSeriesStyle: AreaSeriesStyle;
     // (undocumented)
-    axes: AxisStyle;
+    axes: AxisConfig;
     background: BackgroundStyle;
     barSeriesStyle: BarSeriesStyle;
     bubbleSeriesStyle: BubbleSeriesStyle;
@@ -1463,10 +1438,7 @@ export type TickFormatterOptions = {
 };
 
 // @public (undocumented)
-export type TickStyle = StrokeStyle & Visible & {
-    padding: number;
-    size: number;
-};
+export type TickStyle = StrokeStyle & Visible;
 
 // Warning: (ae-missing-release-tag) "timeFormatter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1534,20 +1506,6 @@ 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,18 +72,15 @@ 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>> = {
-  // GroupName: {
-  //   'some story name': 200,
-  // },
+  Legend: {
+    Actions: 200, // needed for icon to load
+  },
 };
 
 export function getStorybookInfo(): StoryGroupInfo[] {

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

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

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

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