feat(legend): specify number of columns on floating legend (#1159)

When rendering a floating legend inside the chart (`Settings.legendPosition.floating:true`), the added `Settings.legendPosition.floatingColumns` property allows you to specify the number of columns used to distributed the legend items.

fix #1158

api/charts.api.md

@@ -1136,6 +1136,7 @@ export type LegendPositionConfig = {
     hAlign: typeof HorizontalAlignment.Left | typeof HorizontalAlignment.Right;
     direction: LayoutDirection;
     floating: boolean;
+    floatingColumns?: number;
 };
 
 // @public

scripts/vrt.sh

@@ -5,7 +5,7 @@ export TZ=UTC
 export JEST_PUPPETEER_CONFIG=integration/jest_puppeteer.config.js
 FILE=integration/tmp/examples.json
 
-if [[ ! -z "${LOCAL_VRT_SERVER}" ]] && [[ ! -f "$FILE" ]]; then
+if [[ -n "${LOCAL_VRT_SERVER}" ]] && [[ ! -f "$FILE" ]]; then
   echo
   echo -e "\033[31m$FILE does not exist"
   echo -e "Please run yarn test:integration:generate first"
@@ -16,4 +16,4 @@ fi
 
 rm -rf ./integration/tests/__image_snapshots__/__diff_output__
 
-jest --verbose --rootDir=integration -c=integration/jest.config.js --runInBand
+jest --verbose --rootDir=integration -c=integration/jest.config.js --runInBand "$@"

src/components/legend/_legend.scss

@@ -1,20 +1,17 @@
 .echLegend {
+  .echLegendList {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+  }
   &--horizontal {
     .echLegendList {
-      display: grid;
       grid-column-gap: $echLegendColumnGap;
       grid-row-gap: $echLegendRowGap;
       margin-top: $echLegendRowGap;
       margin-bottom: $echLegendRowGap;
     }
   }
 
-  &--vertical {
-    .echLegendList {
-      flex-direction: column;
-    }
-  }
-
   &--top,
   &--left {
     order: 0;

src/components/legend/legend.tsx

@@ -85,8 +85,8 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) {
   }
 
   const positionConfig = getLegendPositionConfig(config.legendPosition);
-  const containerStyle = getLegendStyle(positionConfig.direction, size, legend.margin);
-  const listStyle = getLegendListStyle(positionConfig.direction, chartMargins, legend);
+  const containerStyle = getLegendStyle(positionConfig, size, legend.margin);
+  const listStyle = getLegendListStyle(positionConfig, chartMargins, legend, items.length);
 
   const legendClasses = classNames('echLegend', {
     'echLegend--debug': debug,

src/components/legend/position_style.ts

@@ -49,7 +49,7 @@ export function legendPositionStyle(
       left: hAlign === Left ? chart.left + INSIDE_PADDING : undefined,
       top: vAlign === Top ? chart.top : undefined,
       bottom: vAlign === Bottom ? container.height - chart.top - chart.height : undefined,
-      height: legendSize.height >= chart.height ? chart.height : undefined,
+      height: !floating && legendSize.height >= chart.height ? chart.height : undefined,
     };
   }
 
@@ -60,7 +60,7 @@ export function legendPositionStyle(
     left: chart.left + INSIDE_PADDING,
     top: vAlign === Top ? chart.top : undefined,
     bottom: vAlign === Bottom ? container.height - chart.top - chart.height : undefined,
-    height: legendSize.height >= chart.height ? chart.height : undefined,
+    height: !floating && legendSize.height >= chart.height ? chart.height : undefined,
   };
 }
 
@@ -71,24 +71,28 @@ export const LEGEND_TO_FULL_CONFIG: Record<Position, LegendPositionConfig> = {
     hAlign: Position.Left,
     direction: LayoutDirection.Vertical,
     floating: false,
+    floatingColumns: 1,
   },
   [Position.Top]: {
     vAlign: Position.Top,
     hAlign: Position.Left,
     direction: LayoutDirection.Horizontal,
     floating: false,
+    floatingColumns: 1,
   },
   [Position.Bottom]: {
     vAlign: Position.Bottom,
     hAlign: Position.Left,
     direction: LayoutDirection.Horizontal,
     floating: false,
+    floatingColumns: 1,
   },
   [Position.Right]: {
     vAlign: Position.Top,
     hAlign: Position.Right,
     direction: LayoutDirection.Vertical,
     floating: false,
+    floatingColumns: 1,
   },
 };
 

src/components/legend/style_utils.ts

@@ -19,7 +19,7 @@
 
 import { LegendPositionConfig } from '../../specs/settings';
 import { BBox } from '../../utils/bbox/bbox_calculator';
-import { LayoutDirection } from '../../utils/common';
+import { clamp, LayoutDirection } from '../../utils/common';
 import { Margins } from '../../utils/dimensions';
 import { LegendStyle as ThemeLegendStyle } from '../../utils/themes/theme';
 
@@ -51,9 +51,10 @@ export interface LegendListStyle {
  * @internal
  */
 export function getLegendListStyle(
-  direction: LegendPositionConfig['direction'],
+  { direction, floating, floatingColumns }: LegendPositionConfig,
   chartMargins: Margins,
   legendStyle: ThemeLegendStyle,
+  totalItems: number,
 ): LegendListStyle {
   const { top: paddingTop, bottom: paddingBottom, left: paddingLeft, right: paddingRight } = chartMargins;
 
@@ -68,18 +69,21 @@ export function getLegendListStyle(
   return {
     paddingTop,
     paddingBottom,
+    ...(floating && {
+      gridTemplateColumns: `repeat(${clamp(floatingColumns ?? 1, 1, totalItems)}, auto)`,
+    }),
   };
 }
 /**
  * Get the legend global style
  * @internal
  */
-export function getLegendStyle(direction: LegendPositionConfig['direction'], size: BBox, margin: number): LegendStyle {
+export function getLegendStyle({ direction, floating }: LegendPositionConfig, size: BBox, margin: number): LegendStyle {
   if (direction === LayoutDirection.Vertical) {
     const width = `${size.width}px`;
     return {
-      width,
-      maxWidth: width,
+      width: floating ? undefined : width,
+      maxWidth: floating ? undefined : width,
       marginLeft: margin,
       marginRight: margin,
     };

src/specs/settings.tsx

@@ -383,7 +383,11 @@ export type LegendPositionConfig = {
    * @defaultValue false
    */
   floating: boolean;
-  // TODO add custom number of columns
+  /**
+   * The number of columns in floating configuration
+   * @defaultValue 1
+   */
+  floatingColumns?: number;
   // TODO add grow factor: fill, shrink, fixed column size
 };
 

stories/legend/13_inside_chart.tsx

@@ -42,9 +42,21 @@ import { SB_KNOBS_PANEL } from '../utils/storybook';
 const dg = new SeededDataGenerator();
 const data = dg.generateGroupedSeries(10, 20);
 export const Example = () => {
-  const numberOfSeries = number('Number of series', 5);
+  const numberOfSeries = number('Number of series', 5, { min: 1, max: 20, step: 1, range: true });
+  const seriesWithLongName = number('Series with long name', 3, {
+    min: 0,
+    max: numberOfSeries - 1,
+    step: 1,
+    range: true,
+  });
 
   const floating: LegendPositionConfig['floating'] = boolean('Inside chart', true, 'Legend');
+  const floatingColumns: LegendPositionConfig['floatingColumns'] = number(
+    'floating columns',
+    2,
+    { min: 1, max: 10, range: true, step: 1 },
+    'Legend',
+  );
   const vAlign: LegendPositionConfig['vAlign'] = select(
     'vAlign',
     {
@@ -91,6 +103,7 @@ export const Example = () => {
           hAlign,
           direction,
           floating,
+          floatingColumns,
         }}
         theme={darkMode ? DARK_THEME : LIGHT_THEME}
       />
@@ -109,7 +122,15 @@ export const Example = () => {
         yAccessors={['y']}
         stackAccessors={['x']}
         splitSeriesAccessors={['g']}
-        data={data.slice(0, numberOfSeries * 10)}
+        data={data.slice(0, numberOfSeries * 10).map((d, i) => {
+          if (i >= seriesWithLongName * 10 && i < seriesWithLongName * 10 + 10) {
+            return {
+              ...d,
+              g: 'long name',
+            };
+          }
+          return d;
+        })}
       />
     </Chart>
   );