[Lens] Improve tick placement for binary formatter (#116158)

elastic · Oct 26, 2021 · 877db67 · 877db67
1 parent 8d195db
commit 877db67
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
@@ -1445,6 +1445,40 @@ describe('xy_expression', () => {
       });
     });
 
+    test('sets up correct yScaleType equal to binary_linear for bytes formatting', () => {
+      const { args, data } = sampleArgs();
+      data.tables.first.columns[0].meta = {
+        type: 'number',
+        params: { id: 'bytes', params: { pattern: '0,0.00b' } },
+      };
+
+      const wrapper = mountWithIntl(
+        <XYChart
+          {...defaultProps}
+          data={data}
+          args={{
+            ...args,
+            layers: [
+              {
+                layerId: 'first',
+                layerType: layerTypes.DATA,
+                seriesType: 'line',
+                xAccessor: 'd',
+                accessors: ['a', 'b'],
+                columnToLabel: '{"a": "Label A", "b": "Label B", "d": "Label D"}',
+                xScaleType: 'ordinal',
+                yScaleType: 'linear',
+                isHistogram: false,
+                palette: mockPaletteOutput,
+              },
+            ],
+          }}
+        />
+      );
+
+      expect(wrapper.find(LineSeries).at(0).prop('yScaleType')).toEqual('linear_binary');
+    });
+
     test('allowBrushingLastHistogramBin should be fakse for ordinal data', () => {
       const { args, data } = sampleArgs();
 

diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -31,6 +31,7 @@ import {
   LabelOverflowConstraint,
   DisplayValueStyle,
   RecursivePartial,
+  ScaleType,
 } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
 import type {
@@ -767,6 +768,8 @@ export function XYChart({
             axisConfiguration.series.find((currentSeries) => currentSeries.accessor === accessor)
           );
 
+          const formatter = table?.columns.find((column) => column.id === accessor)?.meta?.params;
+
           const seriesProps: SeriesSpec = {
             splitSeriesAccessors: splitAccessor ? [splitAccessor] : [],
             stackAccessors: isStacked ? [xAccessor as string] : [],
@@ -775,7 +778,10 @@ export function XYChart({
             yAccessors: [accessor],
             data: rows,
             xScaleType: xAccessor ? xScaleType : 'ordinal',
-            yScaleType,
+            yScaleType:
+              formatter?.id === 'bytes' && yScaleType === ScaleType.Linear
+                ? ScaleType.LinearBinary
+                : yScaleType,
             color: ({ yAccessor, seriesKeys }) => {
               const overwriteColor = getSeriesColor(layer, accessor);
               if (overwriteColor !== null) {