fix: initial legend sizing issue (#441)

Fix legend sizing issue with no initial legend and dynamic legend data. closes #367
elastic · Oct 25, 2019 · 64b9f83 · 64b9f83
1 parent f6c5d27
commit 64b9f83
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "concat:sass": "node scripts/concat_sass.js",
     "autoprefix:css": "yarn postcss dist/*.css --no-map --use autoprefixer -d dist",
     "build": "yarn build:clean && yarn build:ts && yarn build:sass && yarn autoprefix:css && yarn concat:sass",
+    "build:watch": "yarn build:clean && yarn build:sass && yarn autoprefix:css && yarn concat:sass && yarn build:ts -w ",
     "start": "yarn storybook",
     "storybook": "start-storybook -p 9001 -c .storybook --ci",
     "storybook:build": "rm -rf .out && build-storybook -c .storybook -o .out",

diff --git a/src/components/legend/legend.tsx b/src/components/legend/legend.tsx
@@ -1,6 +1,7 @@
-import classNames from 'classnames';
-import { inject, observer } from 'mobx-react';
 import React, { createRef } from 'react';
+import { inject, observer } from 'mobx-react';
+import classNames from 'classnames';
+
 import { isVerticalAxis, isHorizontalAxis } from '../../chart_types/xy_chart/utils/axis_utils';
 import { LegendItem as SeriesLegendItem } from '../../chart_types/xy_chart/legend/legend';
 import { ChartStore } from '../../chart_types/xy_chart/store/chart_state';
@@ -34,6 +35,7 @@ interface LegendListStyle {
 
 class LegendComponent extends React.Component<LegendProps, LegendState> {
   static displayName = 'Legend';
+  legendItemCount = 0;
 
   state = {
     width: undefined,
@@ -42,19 +44,7 @@ class LegendComponent extends React.Component<LegendProps, LegendState> {
   private echLegend = createRef<HTMLDivElement>();
 
   componentDidUpdate() {
-    const { chartInitialized, chartTheme, legendPosition } = this.props.chartStore!;
-    if (
-      this.echLegend.current &&
-      isVerticalAxis(legendPosition.get()) &&
-      this.state.width === undefined &&
-      !chartInitialized.get()
-    ) {
-      const buffer = chartTheme.legend.spacingBuffer;
-
-      this.setState({
-        width: this.echLegend.current.offsetWidth + buffer,
-      });
-    }
+    this.tryLegendResize();
   }
 
   render() {
@@ -91,6 +81,35 @@ class LegendComponent extends React.Component<LegendProps, LegendState> {
     );
   }
 
+  tryLegendResize = () => {
+    const { chartInitialized, chartTheme, legendPosition, legendItems } = this.props.chartStore!;
+    const { width } = this.state;
+
+    if (
+      this.echLegend.current &&
+      isVerticalAxis(legendPosition.get()) &&
+      !chartInitialized.get() &&
+      width === undefined &&
+      this.echLegend.current.offsetWidth > 0
+    ) {
+      const buffer = chartTheme.legend.spacingBuffer;
+      this.legendItemCount = legendItems.size;
+
+      return this.setState({
+        width: this.echLegend.current.offsetWidth + buffer,
+      });
+    }
+
+    // Need to reset width to enable downsizing of width
+    if (width !== undefined && legendItems.size !== this.legendItemCount) {
+      this.legendItemCount = legendItems.size;
+
+      this.setState({
+        width: undefined,
+      });
+    }
+  };
+
   getLegendListStyle = (position: Position, { chartMargins, legend }: Theme): LegendListStyle => {
     const { top: paddingTop, bottom: paddingBottom, left: paddingLeft, right: paddingRight } = chartMargins;