[charts] Fix multilayer time axis styles (#116749)

This commit fixes a set of issues to the new multilayer time axis: - the tickLine is now removed from ticks without a label - the axis/tick/label style is restored to the original EUI one - the multilayer time axis style is now moved into the charts plugin and reused - Lens: use the single-layer time axis when bars cluster is used - TSVB: I reduced a bit the number of ticks on the Y axis, to reduce the noise of gridlines with multilayer axis - Discover: I reduced by 8px the height of the histogram and moved the top padding to the bottom to separate a bit the time range text and the time axis Coming from @elastic/charts update: - multilayer time axis tick/grid is shown only when tick is inside domain (this removes the black vertical axis line at the beginning of the chart) fix(xy): show mouse cursors on charts with opaque background elastic-charts#1447 - Fix the invisible cursor on charts with opaque backgrounds fix(xy): multilayer time axis tick/grid only when tick is inside domain elastic-charts#1446 - Add missing last tick and rarify gridlines fix(xy): adding missing last tick and other tick improvements elastic-charts#1448
elastic · Nov 3, 2021 · 5fc70f5 · 5fc70f5
1 parent 654e75a
commit 5fc70f5
Show file tree

Hide file tree

Showing 14 changed files with 124 additions and 176 deletions.
diff --git a/package.json b/package.json
@@ -98,7 +98,7 @@
     "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace",
     "@elastic/apm-rum": "^5.9.1",
     "@elastic/apm-rum-react": "^1.3.1",
-    "@elastic/charts": "38.1.0",
+    "@elastic/charts": "38.1.3",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.35",
     "@elastic/ems-client": "8.0.0",

diff --git a/src/plugins/charts/common/index.ts b/src/plugins/charts/common/index.ts
@@ -34,6 +34,7 @@ export {
   ColorMode,
   LabelRotation,
   defaultCountLabel,
+  MULTILAYER_TIME_AXIS_STYLE,
 } from './static';
 
 export { ColorSchemaParams, Labels, Style } from './types';
diff --git a/src/plugins/charts/common/static/index.ts b/src/plugins/charts/common/static/index.ts
@@ -19,3 +19,5 @@ export {
 } from './color_maps';
 
 export { ColorMode, LabelRotation, defaultCountLabel } from './components';
+
+export * from './styles';
diff --git a/src/plugins/charts/common/static/styles/index.ts b/src/plugins/charts/common/static/styles/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './multilayer_timeaxis';
diff --git a/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts b/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { Position, RecursivePartial, AxisStyle } from '@elastic/charts';
+
+export const MULTILAYER_TIME_AXIS_STYLE: RecursivePartial<AxisStyle> = {
+  tickLabel: {
+    visible: true,
+    padding: 0,
+    rotation: 0,
+    alignment: {
+      vertical: Position.Bottom,
+      horizontal: Position.Left,
+    },
+  },
+  tickLine: {
+    visible: true,
+    size: 0.0001,
+    padding: 4,
+  },
+};
diff --git a/src/plugins/charts/public/static/index.ts b/src/plugins/charts/public/static/index.ts
@@ -9,3 +9,4 @@
 export * from './colors';
 export * from './components';
 export * from './utils';
+export * from '../../common/static/styles';
diff --git a/src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx b/src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx
@@ -23,9 +23,6 @@ import {
   Settings,
   TooltipType,
   XYChartElementEvent,
-  GridLineStyle,
-  AxisStyle,
-  RecursivePartial,
 } from '@elastic/charts';
 import { IUiSettingsClient } from 'kibana/public';
 import {
@@ -38,7 +35,7 @@ import { DataCharts$, DataChartsMessage } from '../../services/use_saved_search'
 import { FetchStatus } from '../../../../types';
 import { DiscoverServices } from '../../../../../build_services';
 import { useDataState } from '../../utils/use_data_state';
-import { LEGACY_TIME_AXIS } from '../../../../../../../charts/common';
+import { LEGACY_TIME_AXIS, MULTILAYER_TIME_AXIS_STYLE } from '../../../../../../../charts/common';
 
 export interface DiscoverHistogramProps {
   savedSearchData$: DataCharts$;
@@ -184,46 +181,6 @@ export function DiscoverHistogram({
   const xAxisFormatter = services.data.fieldFormats.deserialize(chartData.yAxisFormat);
 
   const useLegacyTimeAxis = uiSettings.get(LEGACY_TIME_AXIS, false);
-  const gridLineStyle: RecursivePartial<GridLineStyle> = useLegacyTimeAxis
-    ? {}
-    : { strokeWidth: 0.1, stroke: isDarkMode ? 'white' : 'black' };
-  const verticalAxisStyle: RecursivePartial<AxisStyle> = useLegacyTimeAxis
-    ? {}
-    : {
-        axisLine: {
-          visible: false,
-        },
-        tickLabel: {
-          fontSize: 11,
-        },
-      };
-  const xAxisStyle: RecursivePartial<AxisStyle> = useLegacyTimeAxis
-    ? {}
-    : {
-        axisLine: {
-          stroke: isDarkMode ? 'lightgray' : 'darkgray',
-          strokeWidth: 1,
-        },
-        tickLine: {
-          size: 12,
-          strokeWidth: 0.15,
-          stroke: isDarkMode ? 'white' : 'black',
-          padding: -10,
-          visible: true,
-        },
-        tickLabel: {
-          fontSize: 11,
-          padding: 0,
-          alignment: {
-            vertical: Position.Bottom,
-            horizontal: Position.Left,
-          },
-          offset: {
-            x: 1.5,
-            y: 0,
-          },
-        },
-      };
 
   return (
     <React.Fragment>
@@ -244,16 +201,13 @@ export function DiscoverHistogram({
             ticks={2}
             integersOnly
             tickFormat={(value) => xAxisFormatter.convert(value)}
-            gridLine={gridLineStyle}
-            style={verticalAxisStyle}
           />
           <Axis
             id="discover-histogram-bottom-axis"
             position={Position.Bottom}
             tickFormat={formatXValue}
             timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2}
-            gridLine={gridLineStyle}
-            style={xAxisStyle}
+            style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE}
           />
           <CurrentTime isDarkMode={isDarkMode} domainEnd={domainEnd} />
           <Endzones

diff --git a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.scss b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.scss
@@ -82,8 +82,8 @@ discover-app {
 }
 
 .dscHistogram {
-  height: $euiSize * 8;
-  padding: $euiSizeS $euiSizeS $euiSizeS $euiSizeS;
+  height: $euiSize * 7;
+  padding: 0 $euiSizeS $euiSizeS * 2 $euiSizeS;
 }
 
 .dscHistogramTimeRange {

diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js
@@ -32,7 +32,11 @@ import { getBaseTheme, getChartClasses } from './utils/theme';
 import { TOOLTIP_MODES } from '../../../../../common/enums';
 import { getValueOrEmpty } from '../../../../../common/empty_label';
 import { getSplitByTermsColor } from '../../../lib/get_split_by_terms_color';
-import { renderEndzoneTooltip, useActiveCursor } from '../../../../../../../charts/public';
+import {
+  MULTILAYER_TIME_AXIS_STYLE,
+  renderEndzoneTooltip,
+  useActiveCursor,
+} from '../../../../../../../charts/public';
 import { getAxisLabelString } from '../../../components/lib/get_axis_label_string';
 import { calculateDomainForSeries } from './utils/series_domain_calculation';
 
@@ -140,49 +144,15 @@ export const TimeSeries = ({
     [palettesService, series, syncColors]
   );
 
-  const darkMode = uiSettings.get('theme:darkMode');
-  const gridLineStyle = !useLegacyTimeAxis
-    ? {
-        visible: showGrid,
-        strokeWidth: 0.1,
-        stroke: darkMode ? 'white' : 'black',
-      }
-    : {
-        ...GRID_LINE_CONFIG,
-        visible: showGrid,
-      };
-  const xAxisStyle = !useLegacyTimeAxis
-    ? {
-        tickLabel: {
-          visible: true,
-          fontSize: 11,
-          padding: 0,
-          alignment: {
-            vertical: Position.Bottom,
-            horizontal: Position.Left,
-          },
-          offset: {
-            x: 1.5,
-            y: 0,
-          },
-        },
-        axisLine: {
-          stroke: darkMode ? 'lightgray' : 'darkgray',
-          strokeWidth: 1,
-        },
-        tickLine: {
-          size: 12,
-          strokeWidth: 0.15,
-          stroke: darkMode ? 'white' : 'black',
-          padding: -10,
-          visible: true,
-        },
-        axisTitle: {
-          visible: true,
-          padding: 0,
-        },
-      }
-    : {};
+  const gridLineStyle = {
+    ...GRID_LINE_CONFIG,
+    visible: showGrid,
+  };
+
+  const shouldUseNewTimeAxis =
+    series.every(
+      ({ stack, bars, lines }) => (bars?.show && stack !== STACKED_OPTIONS.NONE) || lines?.show
+    ) && !useLegacyTimeAxis;
 
   return (
     <Chart ref={chartRef} renderer="canvas" className={classes}>
@@ -361,10 +331,8 @@ export const TimeSeries = ({
           position={position}
           domain={domain}
           hide={hide}
-          gridLine={{
-            ...GRID_LINE_CONFIG,
-            visible: showGrid,
-          }}
+          gridLine={gridLineStyle}
+          ticks={5}
           tickFormat={tickFormatter}
         />
       ))}
@@ -375,8 +343,8 @@ export const TimeSeries = ({
         title={getAxisLabelString(interval)}
         tickFormat={xAxisFormatter}
         gridLine={gridLineStyle}
-        style={xAxisStyle}
-        timeAxisLayerCount={useLegacyTimeAxis ? 0 : 3}
+        style={shouldUseNewTimeAxis ? MULTILAYER_TIME_AXIS_STYLE : undefined}
+        timeAxisLayerCount={shouldUseNewTimeAxis ? 3 : 0}
       />
     </Chart>
   );

diff --git a/src/plugins/vis_types/xy/public/config/get_axis.ts b/src/plugins/vis_types/xy/public/config/get_axis.ts
@@ -8,16 +8,11 @@
 
 import { identity } from 'lodash';
 
-import {
-  AxisSpec,
-  TickFormatter,
-  YDomainRange,
-  ScaleType as ECScaleType,
-  Position,
-} from '@elastic/charts';
+import { AxisSpec, TickFormatter, YDomainRange, ScaleType as ECScaleType } from '@elastic/charts';
 
 import { LabelRotation } from '../../../../charts/public';
 import { BUCKET_TYPES } from '../../../../data/public';
+import { MULTILAYER_TIME_AXIS_STYLE } from '../../../../charts/common';
 
 import {
   Aspect,
@@ -164,29 +159,13 @@ function getAxisStyle(
 ): AxisSpec['style'] {
   return isMultiLayerTimeAxis
     ? {
+        ...MULTILAYER_TIME_AXIS_STYLE,
         tickLabel: {
+          ...MULTILAYER_TIME_AXIS_STYLE.tickLabel,
           visible: Boolean(ticks?.show),
-          rotation: 0, // rotation is disabled on new time axis
-          fontSize: 11,
-          padding: 0,
-          alignment: {
-            vertical: Position.Bottom,
-            horizontal: Position.Left,
-          },
-          offset: {
-            x: 1.5,
-            y: 0,
-          },
-        },
-        axisLine: {
-          stroke: darkMode ? 'lightgray' : 'darkgray',
-          strokeWidth: 1,
         },
         tickLine: {
-          size: 12,
-          strokeWidth: 0.15,
-          stroke: darkMode ? 'white' : 'black',
-          padding: -10,
+          ...MULTILAYER_TIME_AXIS_STYLE.tickLine,
           visible: Boolean(ticks?.show),
         },
         axisTitle: {
@@ -198,7 +177,7 @@ function getAxisStyle(
           visible: (title ?? '').trim().length > 0,
         },
         tickLabel: {
-          visible: ticks?.show,
+          visible: Boolean(ticks?.show),
           rotation: -(ticks?.rotation ?? rotationFallback),
         },
       };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,3 +19,5 @@ export {
		} from './color_maps';

		export { ColorMode, LabelRotation, defaultCountLabel } from './components';

		export * from './styles';