[XY, Pie] Long legend values support

elastic · Aug 12, 2021 · 7a1e89f · 7a1e89f
1 parent 997e9ec
commit 7a1e89f
Show file tree

Hide file tree

Showing 29 changed files with 257 additions and 2 deletions.
diff --git a/src/plugins/vis_default_editor/public/components/options/index.ts b/src/plugins/vis_default_editor/public/components/options/index.ts
@@ -16,3 +16,4 @@ export { RangeOption } from './range';
 export { RequiredNumberInputOption } from './required_number_input';
 export { TextInputOption } from './text_input';
 export { PercentageModeOption } from './percentage_mode';
+export { LongLegendOptions } from './long_legend_options';
diff --git a/src/plugins/vis_default_editor/public/components/options/long_legend_options.test.tsx b/src/plugins/vis_default_editor/public/components/options/long_legend_options.test.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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 React from 'react';
+import { mountWithIntl } from '@kbn/test/jest';
+import { LongLegendOptions, LongLegendOptionsProps } from './long_legend_options';
+import { EuiFieldNumber } from '@elastic/eui';
+
+describe('LongLegendOptions', () => {
+  let props: LongLegendOptionsProps;
+  let component;
+  beforeAll(() => {
+    props = {
+      truncateLegend: true,
+      setValue: jest.fn(),
+    };
+  });
+
+  it('renders the EuiFieldNumber', () => {
+    component = mountWithIntl(<LongLegendOptions {...props} />);
+    expect(component.find(EuiFieldNumber).length).toBe(1);
+  });
+
+  it('should call setValue when value is changes in the number input', () => {
+    component = mountWithIntl(<LongLegendOptions {...props} />);
+    const numberField = component.find(EuiFieldNumber);
+    numberField.props().onChange!(({
+      target: {
+        value: 3,
+      },
+    } as unknown) as React.ChangeEvent<HTMLInputElement>);
+
+    expect(props.setValue).toHaveBeenCalledWith('maxLegendLines', 3);
+  });
+
+  it('input number should be disabled when truncate is false', () => {
+    props.truncateLegend = false;
+    component = mountWithIntl(<LongLegendOptions {...props} />);
+    const numberField = component.find(EuiFieldNumber);
+
+    expect(numberField.props().disabled).toBeTruthy();
+  });
+});
diff --git a/src/plugins/vis_default_editor/public/components/options/long_legend_options.tsx b/src/plugins/vis_default_editor/public/components/options/long_legend_options.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 React from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
+import { SwitchOption } from './switch';
+
+export interface LongLegendOptionsProps {
+  setValue: (paramName: 'maxLegendLines' | 'truncateLegend', value: boolean | number) => void;
+  truncateLegend: boolean;
+  maxLegendLines?: number;
+  'data-test-subj'?: string;
+}
+
+function LongLegendOptions({
+  'data-test-subj': dataTestSubj,
+  setValue,
+  truncateLegend,
+  maxLegendLines,
+}: LongLegendOptionsProps) {
+  return (
+    <>
+      <SwitchOption
+        data-test-subj={dataTestSubj}
+        label={i18n.translate('visDefaultEditor.options.longLegends.truncateLegendTextLabel', {
+          defaultMessage: 'Truncate legend text',
+        })}
+        paramName="truncateLegend"
+        value={truncateLegend}
+        setValue={setValue}
+      />
+      <EuiFormRow
+        fullWidth
+        label={
+          <FormattedMessage
+            id="visDefaultEditor.options.longLegends.maxLegendLinesLabel"
+            defaultMessage="Maximum legend lines"
+          />
+        }
+      >
+        <EuiFieldNumber
+          data-test-subj="timeSeriesEditorDataMaxLegendLines"
+          value={maxLegendLines}
+          min={1}
+          max={5}
+          fullWidth
+          disabled={!Boolean(truncateLegend)}
+          onChange={(e) => {
+            setValue('maxLegendLines', Number(e.target.value));
+          }}
+        />
+      </EuiFormRow>
+    </>
+  );
+}
+
+export { LongLegendOptions };
diff --git a/src/plugins/vis_type_pie/public/__snapshots__/pie_fn.test.ts.snap b/src/plugins/vis_type_pie/public/__snapshots__/pie_fn.test.ts.snap
diff --git a/src/plugins/vis_type_pie/public/editor/components/pie.test.tsx b/src/plugins/vis_type_pie/public/editor/components/pie.test.tsx
@@ -73,6 +73,20 @@ describe('PalettePicker', function () {
     });
   });
 
+  it('renders the long legend options for the elastic charts implementation', async () => {
+    component = mountWithIntl(<PieOptions {...props} />);
+    await act(async () => {
+      expect(findTestSubject(component, 'pieLongLegendsOptions').length).toBe(1);
+    });
+  });
+
+  it('not renders the long legend options for the vislib implementation', async () => {
+    component = mountWithIntl(<PieOptions {...props} showElasticChartsOptions={false} />);
+    await act(async () => {
+      expect(findTestSubject(component, 'pieLongLegendsOptions').length).toBe(0);
+    });
+  });
+
   it('renders the label position dropdown for the elastic charts implementation', async () => {
     component = mountWithIntl(<PieOptions {...props} />);
     await act(async () => {

diff --git a/src/plugins/vis_type_pie/public/editor/components/pie.tsx b/src/plugins/vis_type_pie/public/editor/components/pie.tsx
@@ -26,6 +26,7 @@ import {
   SwitchOption,
   SelectOption,
   PalettePicker,
+  LongLegendOptions,
 } from '../../../../vis_default_editor/public';
 import { VisEditorOptionsProps } from '../../../../visualizations/public';
 import { TruncateLabelsOption } from './truncate_labels';
@@ -169,6 +170,12 @@ const PieOptions = (props: PieOptionsProps) => {
               }}
               data-test-subj="visTypePieNestedLegendSwitch"
             />
+            <LongLegendOptions
+              data-test-subj="pieLongLegendsOptions"
+              truncateLegend={stateParams.truncateLegend ?? true}
+              maxLegendLines={stateParams.maxLegendLines ?? 1}
+              setValue={setValue}
+            />
           </>
         )}
         {props.showElasticChartsOptions && palettesRegistry && (

diff --git a/src/plugins/vis_type_pie/public/mocks.ts b/src/plugins/vis_type_pie/public/mocks.ts
@@ -279,6 +279,8 @@ export const createMockPieParams = (): PieVisParams => {
     },
     legendPosition: 'right',
     nestedLegend: false,
+    maxLegendLines: 1,
+    truncateLegend: true,
     distinctColors: false,
     palette: {
       name: 'default',

diff --git a/src/plugins/vis_type_pie/public/pie_component.tsx b/src/plugins/vis_type_pie/public/pie_component.tsx
@@ -320,7 +320,16 @@ const PieComponent = (props: PieComponentProps) => {
               services.actions,
               services.fieldFormats
             )}
-            theme={chartTheme}
+            theme={[
+              chartTheme,
+              {
+                legend: {
+                  labelOptions: {
+                    maxLines: visParams.truncateLegend ? visParams.maxLegendLines ?? 1 : 0,
+                  },
+                },
+              },
+            ]}
             baseTheme={chartBaseTheme}
             onRenderChange={onRenderChange}
           />

diff --git a/src/plugins/vis_type_pie/public/pie_fn.test.ts b/src/plugins/vis_type_pie/public/pie_fn.test.ts
@@ -23,6 +23,8 @@ describe('interpreter/functions#pie', () => {
     legendPosition: 'right',
     isDonut: true,
     nestedLegend: true,
+    truncateLegend: true,
+    maxLegendLines: true,
     distinctColors: false,
     palette: 'kibana_palette',
     labels: {

diff --git a/src/plugins/vis_type_pie/public/pie_fn.ts b/src/plugins/vis_type_pie/public/pie_fn.ts
@@ -89,6 +89,19 @@ export const createPieVisFn = (): VisTypePieExpressionFunctionDefinition => ({
       }),
       default: false,
     },
+    truncateLegend: {
+      types: ['boolean'],
+      help: i18n.translate('visTypePie.function.args.truncateLegendHelpText', {
+        defaultMessage: 'Defines if the legend items will be truncated or not',
+      }),
+      default: true,
+    },
+    maxLegendLines: {
+      types: ['number'],
+      help: i18n.translate('visTypePie.function.args.maxLegendLinesHelpText', {
+        defaultMessage: 'Defines the number of lines per legend item',
+      }),
+    },
     distinctColors: {
       types: ['boolean'],
       help: i18n.translate('visTypePie.function.args.distinctColorsHelpText', {

diff --git a/src/plugins/vis_type_pie/public/sample_vis.test.mocks.ts b/src/plugins/vis_type_pie/public/sample_vis.test.mocks.ts
@@ -28,6 +28,8 @@ export const samplePieVis = {
         legendPosition: 'right',
         isDonut: true,
         nestedLegend: true,
+        truncateLegend: true,
+        maxLegendLines: 1,
         distinctColors: false,
         palette: 'kibana_palette',
         labels: {

diff --git a/src/plugins/vis_type_pie/public/to_ast.ts b/src/plugins/vis_type_pie/public/to_ast.ts
@@ -50,6 +50,8 @@ export const toExpressionAst: VisToExpressionAst<PieVisParams> = async (vis, par
     addLegend: vis.params.addLegend,
     legendPosition: vis.params.legendPosition,
     nestedLegend: vis.params?.nestedLegend,
+    truncateLegend: vis.params.truncateLegend,
+    maxLegendLines: vis.params.maxLegendLines,
     distinctColors: vis.params?.distinctColors,
     isDonut: vis.params.isDonut,
     palette: vis.params?.palette?.name,

diff --git a/src/plugins/vis_type_pie/public/types/types.ts b/src/plugins/vis_type_pie/public/types/types.ts
@@ -33,6 +33,8 @@ interface PieCommonParams {
   addLegend: boolean;
   legendPosition: Position;
   nestedLegend: boolean;
+  truncateLegend: boolean;
+  maxLegendLines: number;
   distinctColors: boolean;
   isDonut: boolean;
 }

diff --git a/src/plugins/vis_type_pie/public/utils/get_columns.test.ts b/src/plugins/vis_type_pie/public/utils/get_columns.test.ts
@@ -144,6 +144,8 @@ describe('getColumns', () => {
       },
       legendPosition: 'right',
       nestedLegend: false,
+      maxLegendLines: 1,
+      truncateLegend: false,
       palette: {
         name: 'default',
         type: 'palette',

diff --git a/src/plugins/vis_type_pie/public/vis_type/pie.ts b/src/plugins/vis_type_pie/public/vis_type/pie.ts
@@ -35,6 +35,8 @@ export const getPieVisTypeDefinition = ({
       addLegend: !showElasticChartsOptions,
       legendPosition: Position.Right,
       nestedLegend: false,
+      truncateLegend: true,
+      maxLegendLines: 1,
       distinctColors: false,
       isDonut: true,
       palette: {

diff --git a/src/plugins/vis_type_xy/public/__snapshots__/to_ast.test.ts.snap b/src/plugins/vis_type_xy/public/__snapshots__/to_ast.test.ts.snap
diff --git a/src/plugins/vis_type_xy/public/components/xy_settings.tsx b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -60,6 +60,8 @@ type XYSettingsProps = Pick<
   legendAction?: LegendAction;
   legendColorPicker: LegendColorPicker;
   legendPosition: Position;
+  truncateLegend: boolean;
+  maxLegendLines: number;
 };
 
 function getValueLabelsStyling() {
@@ -93,6 +95,8 @@ export const XYSettings: FC<XYSettingsProps> = ({
   legendAction,
   legendColorPicker,
   legendPosition,
+  maxLegendLines,
+  truncateLegend,
 }) => {
   const themeService = getThemeService();
   const theme = themeService.useChartsTheme();
@@ -113,6 +117,9 @@ export const XYSettings: FC<XYSettingsProps> = ({
     crosshair: {
       ...theme.crosshair,
     },
+    legend: {
+      labelOptions: { maxLines: truncateLegend ? maxLegendLines ?? 1 : 0 },
+    },
     axes: {
       axisTitle: {
         padding: {

diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts
@@ -426,6 +426,8 @@ export const getVis = (bucketType: string) => {
           fittingFunction: 'linear',
           times: [],
           addTimeMarker: false,
+          maxLegendLines: 1,
+          truncateLegend: true,
           radiusRatio: 9,
           thresholdLine: {
             show: false,
@@ -849,6 +851,8 @@ export const getStateParams = (type: string, thresholdPanelOn: boolean) => {
     legendPosition: 'right',
     times: [],
     addTimeMarker: false,
+    maxLegendLines: 1,
+    truncateLegend: true,
     detailedTooltip: true,
     palette: {
       type: 'palette',

diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.test.tsx
@@ -105,6 +105,26 @@ describe('PointSeries Editor', function () {
     });
   });
 
+  it('not renders the long legend options if showElasticChartsOptions is false', async () => {
+    component = mountWithIntl(<PointSeriesOptions {...props} />);
+    await act(async () => {
+      expect(findTestSubject(component, 'xyLongLegendsOptions').length).toBe(0);
+    });
+  });
+
+  it('renders the long legend options if showElasticChartsOptions is true', async () => {
+    const newVisProps = ({
+      ...props,
+      extraProps: {
+        showElasticChartsOptions: true,
+      },
+    } as unknown) as PointSeriesOptionsProps;
+    component = mountWithIntl(<PointSeriesOptions {...newVisProps} />);
+    await act(async () => {
+      expect(findTestSubject(component, 'xyLongLegendsOptions').length).toBe(1);
+    });
+  });
+
   it('not renders the fitting function for a bar chart', async () => {
     const newVisProps = ({
       ...props,

diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx
@@ -11,7 +11,11 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { BasicOptions, SwitchOption } from '../../../../../../vis_default_editor/public';
+import {
+  BasicOptions,
+  SwitchOption,
+  LongLegendOptions,
+} from '../../../../../../vis_default_editor/public';
 import { BUCKET_TYPES } from '../../../../../../data/public';
 
 import { VisParams } from '../../../../types';
@@ -58,6 +62,14 @@ export function PointSeriesOptions(
         <EuiSpacer size="m" />
 
         <BasicOptions {...props} legendPositions={legendPositions} />
+        {props.extraProps?.showElasticChartsOptions && (
+          <LongLegendOptions
+            data-test-subj="xyLongLegendsOptions"
+            truncateLegend={stateParams.truncateLegend ?? true}
+            maxLegendLines={stateParams.maxLegendLines ?? 1}
+            setValue={setValue}
+          />
+        )}
 
         {vis.data.aggs!.aggs.some(
           (agg) => agg.schema === 'segment' && agg.type.name === BUCKET_TYPES.DATE_HISTOGRAM