feat(xy): apply the data value formatter to data values over bars

packages/charts/src/chart_types/xy_chart/annotations/utils.ts

@@ -14,7 +14,6 @@ import { AnnotationId, AxisId, GroupId } from '../../../utils/ids';
 import { Point } from '../../../utils/point';
 import { AxisStyle } from '../../../utils/themes/theme';
 import { SmallMultipleScales } from '../state/selectors/compute_small_multiple_scales';
-import { isHorizontalRotation } from '../state/utils/common';
 import { getAxesSpecForSpecId } from '../state/utils/spec';
 import { ComputedGeometries } from '../state/utils/types';
 import { AnnotationDomainType, AnnotationSpec, AxisSpec, isLineAnnotation } from '../utils/specs';
@@ -29,12 +28,9 @@ export function getAnnotationAxis(
   domainType: AnnotationDomainType,
   chartRotation: Rotation,
 ): Position | undefined {
-  const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, groupId);
-  const isHorizontalRotated = isHorizontalRotation(chartRotation);
+  const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, groupId, chartRotation);
   const isXDomainAnnotation = isXDomain(domainType);
-  const annotationAxis = isXDomainAnnotation ? xAxis : yAxis;
-  const rotatedAnnotation = isHorizontalRotated ? annotationAxis : isXDomainAnnotation ? yAxis : xAxis;
-  return rotatedAnnotation ? rotatedAnnotation.position : undefined;
+  return isXDomainAnnotation ? xAxis?.position : yAxis?.position;
 }
 
 /** @internal */

packages/charts/src/chart_types/xy_chart/legend/legend.ts

@@ -11,7 +11,7 @@ import { LegendItem } from '../../../common/legend';
 import { SeriesKey, SeriesIdentifier } from '../../../common/series_id';
 import { ScaleType } from '../../../scales/constants';
 import { TickFormatterOptions } from '../../../specs';
-import { mergePartial } from '../../../utils/common';
+import { mergePartial, Rotation } from '../../../utils/common';
 import { BandedAccessorType } from '../../../utils/geometry';
 import { getLegendCompareFn } from '../../../utils/series_sort';
 import { PointStyle, Theme } from '../../../utils/themes/theme';
@@ -104,6 +104,7 @@ export function computeLegend(
   serialIdentifierDataSeriesMap: Record<string, DataSeries>,
   deselectedDataSeries: SeriesIdentifier[] = [],
   theme: Theme,
+  chartRotation: Rotation,
 ): LegendItem[] {
   const legendItems: LegendItem[] = [];
   const defaultColor = theme.colors.defaultVizColor;
@@ -132,7 +133,7 @@ export function computeLegend(
     const labelY1 = banded ? getBandedLegendItemLabel(name, BandedAccessorType.Y1, postFixes) : name;
 
     // Use this to get axis spec w/ tick formatter
-    const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);
+    const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, chartRotation);
     const formatter = spec.tickFormat ?? yAxis?.tickFormat ?? defaultTickFormatter;
     const { hideInLegend } = spec;
 

packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts

@@ -52,6 +52,7 @@ export const computeLegendSelector = createCustomCachedSelector(
       siDataSeriesMap,
       deselectedDataSeries,
       chartTheme,
+      settings.rotation,
     );
   },
 );

packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts

@@ -23,13 +23,14 @@ import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getTooltipHeaderFormatterSelector } from '../../../../state/selectors/get_tooltip_header_formatter';
-import { Rotation } from '../../../../utils/common';
+import { Position, Rotation } from '../../../../utils/common';
 import { isValidPointerOverEvent } from '../../../../utils/events';
 import { IndexedGeometry } from '../../../../utils/geometry';
 import { Point } from '../../../../utils/point';
 import { getTooltipCompareFn } from '../../../../utils/series_sort';
 import { isPointOnGeometry } from '../../rendering/utils';
 import { formatTooltip } from '../../tooltip/tooltip';
+import { isXDomain } from '../../utils/axis_utils';
 import { defaultXYLegendSeriesSort } from '../../utils/default_series_sort_fn';
 import { DataSeries } from '../../utils/series';
 import { BasicSeriesSpec, AxisSpec } from '../../utils/specs';
@@ -138,7 +139,7 @@ function getTooltipAndHighlightFromValue(
     if (!spec) {
       return acc;
     }
-    const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);
+    const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, chartRotation);
 
     // yScales is ensured by the enclosing if
     const yScale = scales.yScales.get(getSpecDomainGroupId(spec));
@@ -163,7 +164,7 @@ function getTooltipAndHighlightFromValue(
     }
 
     // format the tooltip values
-    const yAxisFormatSpec = [0, 180].includes(chartRotation) ? yAxis : xAxis;
+    const yAxisFormatSpec = isXDomain(yAxis?.position ?? Position.Bottom, chartRotation) ? xAxis : yAxis;
     const formattedTooltip = formatTooltip(
       indexedGeometry,
       spec,
@@ -176,7 +177,7 @@ function getTooltipAndHighlightFromValue(
     // format only one time the x value
     if (!header) {
       // if we have a tooltipHeaderFormatter, then don't pass in the xAxis as the user will define a formatter
-      const xAxisFormatSpec = [0, 180].includes(chartRotation) ? xAxis : yAxis;
+      const xAxisFormatSpec = isXDomain(xAxis?.position ?? Position.Bottom, chartRotation) ? xAxis : yAxis;
       const formatterAxis = tooltipHeaderFormatter ? undefined : xAxisFormatSpec;
       header = formatTooltip(indexedGeometry, spec, true, false, hasSingleSeries, formatterAxis);
     }

packages/charts/src/chart_types/xy_chart/state/utils/spec.ts

@@ -7,20 +7,30 @@
  */
 
 import { BasicSeriesSpec, DEFAULT_GLOBAL_ID, Spec } from '../../../../specs';
+import { Rotation } from '../../../../utils/common';
 import { GroupId } from '../../../../utils/ids';
 import { isHorizontalAxis, isVerticalAxis } from '../../utils/axis_type_utils';
 import { AxisSpec } from '../../utils/specs';
+import { isHorizontalRotation, isVerticalRotation } from './common';
 
 /** @internal */
 export function getSpecsById<T extends Spec>(specs: T[], id: string): T | undefined {
   return specs.find((spec) => spec.id === id);
 }
 
 /** @internal */
-export function getAxesSpecForSpecId(axesSpecs: AxisSpec[], groupId: GroupId) {
+export function getAxesSpecForSpecId(axesSpecs: AxisSpec[], groupId: GroupId, chartRotation: Rotation = 0) {
   return axesSpecs.reduce<{ xAxis?: AxisSpec; yAxis?: AxisSpec }>((result, spec) => {
-    if (spec.groupId === groupId && isHorizontalAxis(spec.position)) result.xAxis = spec;
-    if (spec.groupId === groupId && isVerticalAxis(spec.position)) result.yAxis = spec;
+    if (
+      (spec.groupId === groupId && isHorizontalAxis(spec.position) && isHorizontalRotation(chartRotation)) ||
+      (spec.groupId === groupId && isVerticalAxis(spec.position) && isVerticalRotation(chartRotation))
+    )
+      result.xAxis = spec;
+    else if (
+      (spec.groupId === groupId && isVerticalAxis(spec.position) && isHorizontalRotation(chartRotation)) ||
+      (spec.groupId === groupId && isHorizontalAxis(spec.position) && isVerticalRotation(chartRotation))
+    )
+      result.yAxis = spec;
     return result;
   }, {});
 }

packages/charts/src/chart_types/xy_chart/state/utils/utils.ts

@@ -11,7 +11,7 @@ import { getPredicateFn, Predicate } from '../../../../common/predicate';
 import { SeriesIdentifier, SeriesKey } from '../../../../common/series_id';
 import { Scale } from '../../../../scales';
 import { SettingsSpec, TickFormatter } from '../../../../specs';
-import { isUniqueArray, mergePartial, Rotation } from '../../../../utils/common';
+import { isUniqueArray, mergePartial, Position, Rotation } from '../../../../utils/common';
 import { CurveType } from '../../../../utils/curves';
 import { Dimensions, Size } from '../../../../utils/dimensions';
 import {
@@ -32,6 +32,7 @@ import { renderArea } from '../../rendering/area';
 import { renderBars } from '../../rendering/bars';
 import { renderBubble } from '../../rendering/bubble';
 import { renderLine } from '../../rendering/line';
+import { isXDomain } from '../../utils/axis_utils';
 import { defaultXYSeriesSort } from '../../utils/default_series_sort_fn';
 import { fillSeries } from '../../utils/fill_series';
 import { groupBy } from '../../utils/group_data_series';
@@ -347,8 +348,11 @@ function renderGeometries(
       if (shift === -1) continue; // skip bar dataSeries if index is not available
 
       const barSeriesStyle = mergePartial(chartTheme.barSeriesStyle, spec.barSeriesStyle);
-      const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);
-      const valueFormatter = yAxis?.tickFormat ?? fallBackTickFormatter;
+      const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, chartRotation);
+      const valueFormatter = isXDomain(yAxis?.position ?? Position.Bottom, chartRotation)
+        ? xAxis?.tickFormat ?? fallBackTickFormatter
+        : yAxis?.tickFormat ?? fallBackTickFormatter;
+
       const displayValueSettings = spec.displayValueSettings
         ? { valueFormatter, ...spec.displayValueSettings }
         : undefined;

packages/charts/src/utils/data_samples/test_dataset_github.ts

@@ -274,6 +274,76 @@ export const GITHUB_DATASET = [
   },
 ];
 
+/** @internal */
+export const GITHUB_DATASET_HIGH_VALUES = [
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Data Table',
+    issueType: 'Bug',
+    count: 24000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Heatmap',
+    issueType: 'Bug',
+    count: 12000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Markdown',
+    issueType: 'Bug',
+    count: 6000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'MetricVis',
+    issueType: 'Bug',
+    count: 16000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Pie Chart',
+    issueType: 'Bug',
+    count: 7000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Tagcloud',
+    issueType: 'Bug',
+    count: 19000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'TSVB',
+    issueType: 'Bug',
+    count: 86000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Timelion',
+    issueType: 'Bug',
+    count: 58000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Vega vis',
+    issueType: 'Bug',
+    count: 11000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Point Series',
+    issueType: 'Bug',
+    count: 1000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Inspector',
+    issueType: 'Bug',
+    count: 15000,
+  },
+];
+
 /** @internal */
 export const GROUPED_BAR_CHART = [
   {

storybook/stories/bar/58_data_values.story.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 { boolean, select } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { Axis, BarSeries, Chart, ScaleType, Settings } from '@elastic/charts';
+
+import { GITHUB_DATASET_HIGH_VALUES } from '../../../packages/charts/src/utils/data_samples/test_dataset_github';
+import { useBaseTheme } from '../../use_base_theme';
+
+export const Example = () => {
+  const noTickFormat = boolean('turn off special tickFormat', false);
+  const rotation = select(
+    'Rotation degree',
+    {
+      '0 deg(default)': 0,
+      '90 deg': 90,
+      '-90 deg': -90,
+      '180 deg': 180,
+    },
+    0,
+  );
+  return (
+    <Chart>
+      <Settings theme={[useBaseTheme()]} rotation={rotation} />
+      <BarSeries
+        id="issues"
+        name="Issues"
+        data={GITHUB_DATASET_HIGH_VALUES}
+        xAccessor="vizType"
+        yAccessors={['count']}
+        xScaleType={ScaleType.Ordinal}
+        displayValueSettings={{ showValueLabel: true }}
+      />
+      <Axis
+        id="bottom-axis"
+        position="bottom"
+        tickFormat={
+          (!noTickFormat && rotation === 90) || (!noTickFormat && rotation === -90)
+            ? (d: string) => `${Math.round(Number(d) / 1000)}k`
+            : undefined
+        }
+      />
+      <Axis
+        id="left-axis"
+        position="left"
+        tickFormat={
+          (!noTickFormat && rotation === 0) || (!noTickFormat && rotation === 180)
+            ? (d: string) => `${Math.round(Number(d) / 1000)}k`
+            : undefined
+        }
+      />
+    </Chart>
+  );
+};

storybook/stories/bar/bars.stories.tsx

@@ -71,3 +71,4 @@ export { Example as tooltipBoundary } from './55_tooltip_boundary.story';
 export { Example as testDualYAxis } from './49_test_dual_axis.story';
 export { Example as testUseDefaultGroupDomain } from './56_test_use_dfl_gdomain.story';
 export { Example as testRectBorder } from './57_test_rect_border_bars.story';
+export { Example as dataValue } from './58_data_values.story';