feat(legend): multiline labels with maxLines option (#1285)

integration/server/generate/vrt_page_template.js

@@ -20,6 +20,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { VRTPage } from './vrt_page';
 import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';
+
 appendIconComponentCache({
   arrowUp: require('@elastic/eui/es/components/icon/assets/arrow_up').icon,
   arrowLeft: require('@elastic/eui/es/components/icon/assets/arrow_left').icon,
@@ -32,6 +33,9 @@ appendIconComponentCache({
   pencil: require('@elastic/eui/es/components/icon/assets/pencil').icon,
   visualizeApp: require('@elastic/eui/es/components/icon/assets/app_visualize').icon,
 });
+
+document.querySelector('html')?.classList.add('disable-animations');
+
 ReactDOM.render(<VRTPage />, document.getElementById('story-root') as HTMLElement);
 
 `.trim();

integration/tests/interactions.test.ts

@@ -366,6 +366,7 @@ describe('Interactions', () => {
         { left: 282, top: 80 },
         {
           screenshotSelector: '#story-root',
+          delay: 1000,
         },
       );
     });

integration/tests/legend_stories.test.ts

@@ -27,7 +27,7 @@ describe('Legend stories', () => {
   });
   it('should 0 legend buffer', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&knob-legend buffer value=0',
+      'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&knob-legend buffer value=0&knob-max legend label lines=1',
     );
   });
   it('should have the same order as nested with no indent even if there are repeated labels', async () => {
@@ -36,6 +36,24 @@ describe('Legend stories', () => {
     );
   });
 
+  it('should correctly render multiline nested legend labels', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/legend--piechart&globals=backgrounds.value:!hex(fff);themes.value:Light&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-max legend label lines=0&knob-Number of series=5&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-multiline Legend labels=true&knob-vAlign_Legend=bottom&knob-Partition Layout=sunburst&knob-flatLegend=&knob-showLegendExtra=&knob-legendMaxDepth=2&knob-legendStrategy=key',
+    );
+  });
+
+  it('should correctly render very long multiline legend labels', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&globals=backgrounds.value:transparent;themes.value:Light&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-Number of series=5&knob-Partition Layout=sunburst&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-flatLegend=true&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-legendMaxDepth=3&knob-legendStrategy=key&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-max legend label lines=0&knob-showLegendExtra=true&knob-use long labels=true&knob-vAlign_Legend=bottom',
+    );
+  });
+
+  it('should breakup multiline legend labels with long continous words', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/legend--inside-chart&globals=backgrounds.value:transparent;themes.value:Light&knob-Inside chart_Legend=false&knob-Legend position_Legend=right&knob-max label lines_Legend=0&knob-Number of series=5&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-long label_Legend=a few separate words then averyongcontinuouswordthatneedstobebrokenup&knob-vAlign_Legend=bottom',
+    );
+  });
+
   it('should render color picker on mouse click', async () => {
     const action = async () => {
       await common.clickMouseRelativeToDOMElement({ left: 0, top: 0 }, '.echLegendItem__color');
@@ -160,25 +178,46 @@ describe('Legend stories', () => {
       },
     );
   });
+
   describe('Legend inside chart', () => {
+    const getPositionalUrl = (p1: string, p2: string, others: string = '') =>
+      `http://localhost:9001/?path=/story/legend--inside-chart&knob-vAlign_Legend=${p1}&knob-hAlign_Legend=${p2}${others}`;
+
     it.each([
       [Position.Top, Position.Left],
       [Position.Top, Position.Right],
       [Position.Bottom, Position.Left],
       [Position.Bottom, Position.Right],
-    ])('should correctly display %s %s', async (pos1, pos2) => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        `http://localhost:9001/?path=/story/legend--inside-chart&knob-Legend Position[0]=${pos1}&knob-Legend Position[1]=${pos2}&globals=themes.value:Light`,
-      );
+    ])('should correctly display %s %s', async (p1, p2) => {
+      await common.expectChartAtUrlToMatchScreenshot(getPositionalUrl(p1, p2, '&globals=themes.value:Light'));
+    });
+
+    it.each([
+      [Position.Top, Position.Left],
+      [Position.Top, Position.Right],
+      [Position.Bottom, Position.Left],
+      [Position.Bottom, Position.Right],
+    ])('should correctly display %s %s in dark mode', async (p1, p2) => {
+      await common.expectChartAtUrlToMatchScreenshot(getPositionalUrl(p1, p2, '&globals=themes.value:Dark'));
     });
+
+    const longLabel =
+      'Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.';
+
     it.each([
       [Position.Top, Position.Left],
       [Position.Top, Position.Right],
       [Position.Bottom, Position.Left],
       [Position.Bottom, Position.Right],
-    ])('should correctly display %s %s in dark mode', async (pos1, pos2) => {
+    ])('should correctly display %s %s in multiline mode', async (p1, p2) => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        getPositionalUrl(p1, p2, `&knob-max label lines_Legend=0&knob-long label_Legend=${longLabel}`),
+      );
+    });
+
+    it.each([0, 1, 3])('should correctly truncate multiline labels up to maxLines set to %d', async (maxLines) => {
       await common.expectChartAtUrlToMatchScreenshot(
-        `http://localhost:9001/?path=/story/legend--inside-chart&knob-Legend Position[0]=${pos1}&knob-Legend Position[1]=${pos2}&globals=themes.value:Dark`,
+        `http://localhost:9001/?path=/story/legend--inside-chart&globals=backgrounds.value:transparent;themes.value:Light&knob-Number of series=5&knob-Series with long name=3&knob-Inside chart_Legend=false&knob-floating columns_Legend=2&knob-vAlign_Legend=bottom&knob-hAlign_Legend=right&knob-direction_Legend=vertical&knob-max label lines_Legend=${maxLines}&knob-long label_Legend=${longLabel}`,
       );
     });
   });

package.json

@@ -13,20 +13,20 @@
   },
   "scripts": {
     "prepack": "echo 'This package is not published, see pacakges/*' && exit 1",
-    "autoprefix:css": "lerna run --loglevel=silent --scope @elastic/charts autoprefix:css --stream",
-    "api:check": "lerna run --loglevel=silent --scope @elastic/charts api:check --stream",
-    "api:check:local": "lerna run --loglevel=silent --scope @elastic/charts api:check:local --stream",
-    "api:extract": "lerna run --loglevel=silent --scope @elastic/charts api:extract --stream",
+    "autoprefix:css": "lerna run --loglevel=silent --scope @elastic/charts autoprefix:css --stream --no-prefix",
+    "api:check": "lerna run --loglevel=silent --scope @elastic/charts api:check --stream --no-prefix",
+    "api:check:local": "lerna run --loglevel=silent --scope @elastic/charts api:check:local --stream --no-prefix",
+    "api:extract": "lerna run --loglevel=silent --scope @elastic/charts api:extract --stream --no-prefix",
     "backport": "backport",
-    "build": "lerna run --loglevel=silent --scope @elastic/charts build --stream",
-    "build:ts": "lerna run --loglevel=silent --scope @elastic/charts build:ts --stream",
-    "build:css": "lerna run --loglevel=silent --scope @elastic/charts build:css --stream",
-    "build:clean": "lerna run --loglevel=silent --scope @elastic/charts build:clean --stream",
-    "build:compile": "lerna run --loglevel=silent --scope @elastic/charts build:compile --stream",
-    "build:sass": "lerna run --loglevel=silent --scope @elastic/charts build:sass --stream",
-    "build:check": "lerna run --loglevel=silent --scope @elastic/charts build:check --stream",
-    "build:watch": "lerna run --loglevel=silent --scope @elastic/charts build:watch --stream",
-    "concat:sass": "lerna run --loglevel=silent --scope @elastic/charts concat:sass --stream",
+    "build": "lerna run --loglevel=silent --scope @elastic/charts build --stream --no-prefix",
+    "build:ts": "lerna run --loglevel=silent --scope @elastic/charts build:ts --stream --no-prefix",
+    "build:css": "lerna run --loglevel=silent --scope @elastic/charts build:css --stream --no-prefix",
+    "build:clean": "lerna run --loglevel=silent --scope @elastic/charts build:clean --stream --no-prefix",
+    "build:compile": "lerna run --loglevel=silent --scope @elastic/charts build:compile --stream --no-prefix",
+    "build:sass": "lerna run --loglevel=silent --scope @elastic/charts build:sass --stream --no-prefix",
+    "build:check": "lerna run --loglevel=silent --scope @elastic/charts build:check --stream --no-prefix",
+    "build:watch": "lerna run --loglevel=silent --scope @elastic/charts build:watch --stream --no-prefix",
+    "concat:sass": "lerna run --loglevel=silent --scope @elastic/charts concat:sass --stream --no-prefix",
     "cz": "git-cz",
     "lint": "NODE_ENV=production eslint --quiet --ext .tsx,.ts,.js .",
     "lint:fix": "yarn lint --fix",
@@ -36,8 +36,8 @@
     "pq": "pretty-quick",
     "semantic-release": "semantic-release",
     "start": "yarn storybook",
-    "storybook": "lerna run --scope charts-storybook start --stream",
-    "storybook:build": "lerna run --scope charts-storybook build --stream",
+    "storybook": "lerna run --scope charts-storybook start --stream --no-prefix",
+    "storybook:build": "lerna run --scope charts-storybook build --stream --no-prefix",
     "test": "jest --verbose --config jest.config.js",
     "test:tz": "yarn test:tz-utc && yarn test:tz-ny && yarn test:tz-jp",
     "test:tz-utc": "TZ=UTC jest --verbose --config=jest.tz.config.js",
@@ -52,7 +52,7 @@
     "test:integration:generate:examples": "./scripts/extract_examples.sh",
     "test:integration:generate:page": "./scripts/compile_vrt_page.sh",
     "test:integration:server": "cd integration/server && RNG_SEED='elastic-charts' webpack serve --content-base integration/server",
-    "typecheck:src": "lerna run --loglevel=silent --scope @elastic/charts typecheck --stream",
+    "typecheck:src": "lerna run --loglevel=silent --scope @elastic/charts typecheck --stream --no-prefix",
     "typecheck:all": "tsc -p ./tsconfig.json --noEmit",
     "ts:prune": "ts-prune",
     "link:kibana": "node ./packages/link_kibana"

packages/charts/api/charts.api.md

@@ -1147,6 +1147,11 @@ export interface LegendColorPickerProps {
 // @public (undocumented)
 export type LegendItemListener = (series: SeriesIdentifier[]) => void;
 
+// @public (undocumented)
+export interface LegendLabelOptions {
+    maxLines: number;
+}
+
 // @public
 export type LegendPath = LegendPathElement[];
 
@@ -1204,6 +1209,7 @@ export type LegendStrategy = $Values<typeof LegendStrategy>;
 // @public (undocumented)
 export interface LegendStyle {
     horizontalHeight: number;
+    labelOptions: LegendLabelOptions;
     margin: number;
     spacingBuffer: number;
     verticalWidth: number;

packages/charts/src/chart_types/xy_chart/utils/dimensions.test.ts

@@ -62,6 +62,9 @@ describe('Computed chart dimensions', () => {
     horizontalHeight: 10,
     spacingBuffer: 10,
     margin: 0,
+    labelOptions: {
+      maxLines: 1,
+    },
   };
   const defaultTheme = LIGHT_THEME;
   const chartTheme = {

packages/charts/src/components/__snapshots__/chart.test.tsx.snap

@@ -24,22 +24,24 @@ exports[`Chart should render the legend name test 1`] = `
           <div className=\\"echLegend echLegend--debug echLegend--vertical echLegend--right echLegend--top\\" style={{...}}>
             <div style={{...}} className=\\"echLegendListContainer\\">
               <ul style={{...}} className=\\"echLegendList\\">
-                <LegendItem item={{...}} positionConfig={{...}} totalItems={1} extraValues={{...}} showExtra={false} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[undefined]} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[undefined]} action={[undefined]}>
+                <LegendItem item={{...}} positionConfig={{...}} totalItems={1} extraValues={{...}} showExtra={false} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[undefined]} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[undefined]} action={[undefined]} labelOptions={{...}}>
                   <li className=\\"echLegendItem echLegendItem--vertical\\" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={[undefined]} data-ech-series-name=\\"test\\">
                     <div className=\\"background\\" />
-                    <ForwardRef color=\\"#1EA593\\" seriesName=\\"test\\" isSeriesHidden={false} hasColorPicker={false} onClick={[undefined]} pointStyle={[undefined]}>
-                      <div className=\\"echLegendItem__color\\" title=\\"series color\\">
-                        <LegendIcon pointStyle={[undefined]} color=\\"#1EA593\\" ariaLabel=\\"series color: #1EA593\\">
-                          <svg width={16} height={16} aria-label=\\"series color: #1EA593\\">
-                            <g transform=\\"\\\\n          translate(8, 8)\\\\n          rotate(0)\\\\n        \\">
-                              <path d=\\"M -3.5 0 a 3.5,3.5 0 1,0 7,0 a 3.5,3.5 0 1,0 -7,0\\" stroke=\\"#1EA593\\" strokeWidth={1} fill=\\"#1EA593\\" opacity={1} />
-                            </g>
-                          </svg>
-                        </LegendIcon>
-                      </div>
-                    </ForwardRef>
-                    <Label label=\\"test\\" isToggleable={false} onClick={[undefined]} isSeriesHidden={false}>
-                      <div className=\\"echLegendItem__label\\" title=\\"test\\" onClick={[undefined]}>
+                    <div className=\\"colorWrapper\\">
+                      <ForwardRef color=\\"#1EA593\\" seriesName=\\"test\\" isSeriesHidden={false} hasColorPicker={false} onClick={[undefined]} pointStyle={[undefined]}>
+                        <div className=\\"echLegendItem__color\\" title=\\"series color\\">
+                          <LegendIcon pointStyle={[undefined]} color=\\"#1EA593\\" ariaLabel=\\"series color: #1EA593\\">
+                            <svg width={16} height={16} aria-label=\\"series color: #1EA593\\">
+                              <g transform=\\"\\\\n          translate(8, 8)\\\\n          rotate(0)\\\\n        \\">
+                                <path d=\\"M -3.5 0 a 3.5,3.5 0 1,0 7,0 a 3.5,3.5 0 1,0 -7,0\\" stroke=\\"#1EA593\\" strokeWidth={1} fill=\\"#1EA593\\" opacity={1} />
+                              </g>
+                            </svg>
+                          </LegendIcon>
+                        </div>
+                      </ForwardRef>
+                    </div>
+                    <Label label=\\"test\\" options={{...}} isToggleable={false} onToggle={[undefined]} isSeriesHidden={false}>
+                      <div className=\\"echLegendItem__label echLegendItem__label--singleline\\" title=\\"test\\" style={{...}}>
                         test
                       </div>
                     </Label>