fix(axis): use correct desired tick count based on axis type (#1646)

Fix the calculation of the max desired tick count for the X axis.
elastic · Apr 14, 2022 · 512a6cd · 512a6cd
1 parent 65d0e7d
commit 512a6cd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/...for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png b/...for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts
@@ -15,10 +15,9 @@ import { GroupId } from '../../../../utils/ids';
 import { convertXScaleTypes } from '../../domains/x_domain';
 import { coerceYScaleTypes } from '../../domains/y_domain';
 import { X_SCALE_DEFAULT, Y_SCALE_DEFAULT } from '../../scales/scale_defaults';
-import { isHorizontalAxis, isVerticalAxis } from '../../utils/axis_type_utils';
+import { isXDomain } from '../../utils/axis_utils';
 import { groupBy } from '../../utils/group_data_series';
 import { AxisSpec, BasicSeriesSpec, CustomXDomain, XScaleType, YDomainRange } from '../../utils/specs';
-import { isHorizontalRotation } from '../utils/common';
 import { getSpecDomainGroupId } from '../utils/spec';
 import { getAxisSpecsSelector, getSeriesSpecsSelector } from './get_specs';
 import { mergeYCustomDomainsByGroupId } from './merge_y_custom_domains';
@@ -54,19 +53,17 @@ export function getScaleConfigsFromSpecs(
   seriesSpecs: BasicSeriesSpec[],
   settingsSpec: SettingsSpec,
 ): ScaleConfigs {
-  const isHorizontalChart = isHorizontalRotation(settingsSpec.rotation);
-
   // x axis
-  const xAxes = axisSpecs.filter((d) => isHorizontalChart === isHorizontalAxis(d.position));
-  const xTicks = xAxes.reduce<number>((acc, { ticks = X_SCALE_DEFAULT.desiredTickCount }) => {
+  const xAxesSpecs = axisSpecs.filter((spec) => isXDomain(spec.position, settingsSpec.rotation));
+  const maxTickCountForXAxes = xAxesSpecs.reduce<number>((acc, { ticks = X_SCALE_DEFAULT.desiredTickCount }) => {
     return Math.max(acc, ticks);
-  }, X_SCALE_DEFAULT.desiredTickCount);
+  }, -Infinity);
 
   const xScaleConfig = convertXScaleTypes(seriesSpecs);
   const x: ScaleConfigs['x'] = {
     customDomain: settingsSpec.xDomain,
     ...xScaleConfig,
-    desiredTickCount: xTicks,
+    desiredTickCount: Number.isFinite(maxTickCountForXAxes) ? maxTickCountForXAxes : X_SCALE_DEFAULT.desiredTickCount,
   };
 
   // y axes
@@ -80,16 +77,19 @@ export function getScaleConfigsFromSpecs(
 
   const customDomainByGroupId = mergeYCustomDomainsByGroupId(axisSpecs, settingsSpec.rotation);
 
-  const yAxes = axisSpecs.filter((d) => isHorizontalChart === isVerticalAxis(d.position));
+  const yAxisSpecs = axisSpecs.filter((spec) => !isXDomain(spec.position, settingsSpec.rotation));
   const y = Object.keys(scaleConfigsByGroupId).reduce<ScaleConfigs['y']>((acc, groupId) => {
-    const axis = yAxes.find((yAxis) => yAxis.groupId === groupId);
-    const desiredTickCount = axis?.ticks ?? Y_SCALE_DEFAULT.desiredTickCount;
-    const scaleConfig = scaleConfigsByGroupId[groupId];
-    const customDomain = customDomainByGroupId.get(groupId);
+    const maxTickCountYAxes = yAxisSpecs.reduce<number>((maxTickCount, yAxis) => {
+      return yAxis.groupId === groupId
+        ? Math.max(maxTickCount, yAxis.ticks ?? Y_SCALE_DEFAULT.desiredTickCount)
+        : maxTickCount;
+    }, -Infinity);
+    const desiredTickCount = Number.isFinite(maxTickCountYAxes) ? maxTickCountYAxes : Y_SCALE_DEFAULT.desiredTickCount;
+
     if (!acc[groupId]) {
       acc[groupId] = {
-        customDomain,
-        ...scaleConfig,
+        customDomain: customDomainByGroupId.get(groupId),
+        ...scaleConfigsByGroupId[groupId],
         desiredTickCount,
       };
     }

diff --git a/storybook/stories/area/3_with_linear.story.tsx b/storybook/stories/area/3_with_linear.story.tsx
@@ -17,22 +17,22 @@ import { useBaseTheme } from '../../use_base_theme';
 export const Example = () => {
   const start = KIBANA_METRICS.metrics.kibana_os_load[0].data[0][0];
   const data = KIBANA_METRICS.metrics.kibana_os_load[0].data
-    .slice(0, 20)
-    .map((d) => [(d[0] - start) / 30000, clamp(d[1] - 10, 0, 3)]);
+    .slice(0, 21)
+    .map((d) => [(d[0] - start) / 30000, clamp(d[1], 0, 30)]);
   return (
     <Chart>
       <Settings baseTheme={useBaseTheme()} />
-      <Axis id="bottom" title="index" position={Position.Bottom} />
+      <Axis id="bottom" position={Position.Bottom} ticks={3} tickFormat={(d) => `${d} sec`} />
       <Axis
         id="left"
-        title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
         position={Position.Left}
-        tickFormat={(d) => `${Math.round(Number(d))}`}
-        ticks={7}
+        labelFormat={(d) => `${d.toFixed(0)}%`}
+        tickFormat={(d) => `${d.toFixed(1)}%`}
+        ticks={5}
       />
 
       <AreaSeries
-        id="areas"
+        id={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
         yNice