[Charts] Multi-layer time axis (#115853)

This commit introduces the multi-layer time axis in Discover, Lens, Visualize, TSVB. It adds visualization:useLegacyTimeAxis advanced settings under charts plugin to toggle legacy time axis. The new multi-layer time axis is introduced in @elastic/charts https://elastic.github.io/elastic-charts/?path=/story/area-chart--timeslip and was demoed as part of the Kibana Demo Days. It is the outcome of the research done in elastic/elastic-charts#1310 related to improving the time axis solving the following problems: - sparse time labels that can be far apart - unclear where time point is on the label (the middle) - difficult / tedious to read due to redundant information and small fonts - resolution is not explicit (is it hours of days or days themselves)
elastic · Oct 27, 2021 · 6b4d9dd · 6b4d9dd
1 parent e0fe096
commit 6b4d9dd
Show file tree

Hide file tree

Showing 26 changed files with 341 additions and 71 deletions.
diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc
@@ -516,6 +516,9 @@ Enables the legacy charts library for timelion charts in Visualize.
 **This setting is deprecated and will not be supported as of 8.0.**
 Maps values to specific colors in charts using the *Compatibility* palette.
 
+[[visualization-uselegacytimeaxis]]`visualization:useLegacyTimeAxis`::
+Enables the legacy time axis for charts in Lens, Discover, Visualize and TSVB
+
 [[visualization-heatmap-maxbuckets]]`visualization:heatmap:maxBuckets`::
 The maximum number of buckets a datasource can return. High numbers can have a negative impact on your browser rendering performance.
 

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.0.1",
+    "@elastic/charts": "38.1.0",
     "@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
@@ -7,6 +7,7 @@
  */
 
 export const COLOR_MAPPING_SETTING = 'visualization:colorMapping';
+export const LEGACY_TIME_AXIS = 'visualization:useLegacyTimeAxis';
 
 export {
   CustomPaletteArguments,

diff --git a/src/plugins/charts/server/plugin.ts b/src/plugins/charts/server/plugin.ts
@@ -9,7 +9,7 @@
 import { i18n } from '@kbn/i18n';
 import { schema } from '@kbn/config-schema';
 import { CoreSetup, Plugin } from 'kibana/server';
-import { COLOR_MAPPING_SETTING, palette, systemPalette } from '../common';
+import { COLOR_MAPPING_SETTING, LEGACY_TIME_AXIS, palette, systemPalette } from '../common';
 import { ExpressionsServerSetup } from '../../expressions/server';
 
 interface SetupDependencies {
@@ -45,6 +45,21 @@ export class ChartsServerPlugin implements Plugin<object, object> {
         category: ['visualization'],
         schema: schema.string(),
       },
+      [LEGACY_TIME_AXIS]: {
+        name: i18n.translate('charts.advancedSettings.visualization.useLegacyTimeAxis.name', {
+          defaultMessage: 'Legacy chart time axis',
+        }),
+        value: false,
+        description: i18n.translate(
+          'charts.advancedSettings.visualization.useLegacyTimeAxis.description',
+          {
+            defaultMessage:
+              'Enables the legacy time axis for charts in Lens, Discover, Visualize and TSVB',
+          }
+        ),
+        category: ['visualization'],
+        schema: schema.boolean(),
+      },
     });
 
     return {};

diff --git a/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.tsx b/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.tsx
@@ -115,7 +115,6 @@ export function DiscoverChart({
               onResetQuery={resetSavedSearch}
             />
           </EuiFlexItem>
-
           {showViewModeToggle && (
             <EuiFlexItem grow={false}>
               <DocumentViewModeToggle
@@ -124,7 +123,6 @@ export function DiscoverChart({
               />
             </EuiFlexItem>
           )}
-
           {timefield && (
             <EuiFlexItem className="dscResultCount__toggle" grow={false}>
               <EuiPopover

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,6 +23,9 @@ import {
   Settings,
   TooltipType,
   XYChartElementEvent,
+  GridLineStyle,
+  AxisStyle,
+  RecursivePartial,
 } from '@elastic/charts';
 import { IUiSettingsClient } from 'kibana/public';
 import {
@@ -35,6 +38,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';
 
 export interface DiscoverHistogramProps {
   savedSearchData$: DataCharts$;
@@ -179,6 +183,48 @@ 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>
       <div className="dscHistogram" data-test-subj="discoverChart" data-time-range={timeRangeText}>
@@ -195,15 +241,19 @@ export function DiscoverHistogram({
           <Axis
             id="discover-histogram-left-axis"
             position={Position.Left}
-            ticks={5}
+            ticks={2}
             integersOnly
             tickFormat={(value) => xAxisFormatter.convert(value)}
+            gridLine={gridLineStyle}
+            style={verticalAxisStyle}
           />
           <Axis
             id="discover-histogram-bottom-axis"
             position={Position.Bottom}
             tickFormat={formatXValue}
-            ticks={10}
+            timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2}
+            gridLine={gridLineStyle}
+            style={xAxisStyle}
           />
           <CurrentTime isDarkMode={isDarkMode} domainEnd={domainEnd} />
           <Endzones
@@ -222,6 +272,7 @@ export function DiscoverHistogram({
             xAccessor="x"
             yAccessors={['y']}
             data={data}
+            yNice
             timeZone={timeZone}
             name={chartData.yAxisLabel}
           />

diff --git a/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts b/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts
@@ -64,6 +64,10 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'text',
     _meta: { description: 'Non-default value of setting.' },
   },
+  'visualization:useLegacyTimeAxis': {
+    type: 'boolean',
+    _meta: { description: 'Non-default value of setting.' },
+  },
   'visualization:regionmap:showWarnings': {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },

diff --git a/src/plugins/kibana_usage_collection/server/collectors/management/types.ts b/src/plugins/kibana_usage_collection/server/collectors/management/types.ts
@@ -40,6 +40,7 @@ export interface UsageStats {
   'visualize:enableLabs': boolean;
   'visualization:heatmap:maxBuckets': number;
   'visualization:colorMapping': string;
+  'visualization:useLegacyTimeAxis': boolean;
   'visualization:regionmap:showWarnings': boolean;
   'visualization:tileMap:maxPrecision': number;
   'csv:separator': string;

diff --git a/src/plugins/telemetry/schema/oss_plugins.json b/src/plugins/telemetry/schema/oss_plugins.json
@@ -7110,6 +7110,12 @@
             "description": "Non-default value of setting."
           }
         },
+        "visualization:useLegacyTimeAxis": {
+          "type": "boolean",
+          "_meta": {
+            "description": "Non-default value of setting."
+          }
+        },
         "visualization:regionmap:showWarnings": {
           "type": "boolean",
           "_meta": {

diff --git a/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.js b/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.js
@@ -19,6 +19,7 @@ import { createFieldFormatter } from '../../lib/create_field_formatter';
 import { checkIfSeriesHaveSameFormatters } from '../../lib/check_if_series_have_same_formatters';
 import { TimeSeries } from '../../../visualizations/views/timeseries';
 import { MarkdownSimple } from '../../../../../../../../plugins/kibana_react/public';
+import { LEGACY_TIME_AXIS } from '../../../../../../../../plugins/charts/common';
 import { replaceVars } from '../../lib/replace_vars';
 import { getInterval } from '../../lib/get_interval';
 import { createIntervalBasedFormatter } from '../../lib/create_interval_based_formatter';
@@ -272,6 +273,7 @@ class TimeseriesVisualization extends Component {
             syncColors={syncColors}
             palettesService={palettesService}
             interval={interval}
+            useLegacyTimeAxis={getConfig(LEGACY_TIME_AXIS, false)}
             isLastBucketDropped={Boolean(
               model.drop_last_bucket ||
                 model.series.some((series) => series.series_drop_last_bucket)

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
@@ -72,6 +72,7 @@ export const TimeSeries = ({
   palettesService,
   interval,
   isLastBucketDropped,
+  useLegacyTimeAxis,
 }) => {
   // If the color isn't configured by the user, use the color mapping service
   // to assign a color from the Kibana palette. Colors will be shared across the
@@ -138,6 +139,51 @@ 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,
+        },
+      }
+    : {};
+
   return (
     <Chart ref={chartRef} renderer="canvas" className={classes}>
       <Settings
@@ -328,10 +374,9 @@ export const TimeSeries = ({
         position={Position.Bottom}
         title={getAxisLabelString(interval)}
         tickFormat={xAxisFormatter}
-        gridLine={{
-          ...GRID_LINE_CONFIG,
-          visible: showGrid,
-        }}
+        gridLine={gridLineStyle}
+        style={xAxisStyle}
+        timeAxisLayerCount={useLegacyTimeAxis ? 0 : 3}
       />
     </Chart>
   );
@@ -357,4 +402,5 @@ TimeSeries.propTypes = {
   annotations: PropTypes.array,
   interval: PropTypes.number,
   isLastBucketDropped: PropTypes.bool,
+  useLegacyTimeAxis: PropTypes.bool,
 };
diff --git a/src/plugins/vis_types/xy/public/components/xy_axis.tsx b/src/plugins/vis_types/xy/public/components/xy_axis.tsx
@@ -25,6 +25,7 @@ export const XYAxis: FC<XYAxisPros> = ({
   domain,
   style,
   integersOnly,
+  timeAxisLayerCount,
 }) => (
   <Axis
     id={`${id}__axis`}
@@ -40,5 +41,6 @@ export const XYAxis: FC<XYAxisPros> = ({
     labelFormat={ticks?.labelFormatter}
     showOverlappingLabels={ticks?.showOverlappingLabels}
     showDuplicatedTicks={ticks?.showDuplicates}
+    timeAxisLayerCount={timeAxisLayerCount}
   />
 );