From 2783e7e88170876c0eee52b9ac089e1da2372d4e Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Thu, 24 Oct 2019 15:24:00 -0500 Subject: [PATCH 1/4] fix: legend sizing issue with no initial legend --- package.json | 1 + src/components/legend/legend.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 9688ad71ca..7bfe1ddcfa 100644 --- 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 index e37340671e..55c9ca0aa2 100644 --- a/src/components/legend/legend.tsx +++ b/src/components/legend/legend.tsx @@ -47,7 +47,8 @@ class LegendComponent extends React.Component { this.echLegend.current && isVerticalAxis(legendPosition.get()) && this.state.width === undefined && - !chartInitialized.get() + !chartInitialized.get() && + this.echLegend.current.offsetWidth > 0 ) { const buffer = chartTheme.legend.spacingBuffer; From e4f01c7383439e1b454cff2df504232f5b366680 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Thu, 24 Oct 2019 16:47:52 -0500 Subject: [PATCH 2/4] feat(legend): resize legend when series count changes --- src/components/legend/legend.tsx | 48 +++++++++++++++++++++----------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/src/components/legend/legend.tsx b/src/components/legend/legend.tsx index 55c9ca0aa2..29dcf0d13a 100644 --- a/src/components/legend/legend.tsx +++ b/src/components/legend/legend.tsx @@ -1,6 +1,8 @@ -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 { debounce } from 'ts-debounce'; + 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 +36,7 @@ interface LegendListStyle { class LegendComponent extends React.Component { static displayName = 'Legend'; + legendItemCount = 0; state = { width: undefined, @@ -42,20 +45,7 @@ class LegendComponent extends React.Component { private echLegend = createRef(); componentDidUpdate() { - const { chartInitialized, chartTheme, legendPosition } = this.props.chartStore!; - if ( - this.echLegend.current && - isVerticalAxis(legendPosition.get()) && - this.state.width === undefined && - !chartInitialized.get() && - this.echLegend.current.offsetWidth > 0 - ) { - const buffer = chartTheme.legend.spacingBuffer; - - this.setState({ - width: this.echLegend.current.offsetWidth + buffer, - }); - } + this.tryLegendResize(); } render() { @@ -92,6 +82,32 @@ class LegendComponent extends React.Component { ); } + tryLegendResize = debounce(() => { + const { chartTheme, legendPosition, legendItems } = this.props.chartStore!; + const { width } = this.state; + + if ( + this.echLegend.current && + isVerticalAxis(legendPosition.get()) && + width === undefined && + this.echLegend.current.offsetWidth > 0 + ) { + const buffer = chartTheme.legend.spacingBuffer; + + 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, + }); + } + }, 200); + getLegendListStyle = (position: Position, { chartMargins, legend }: Theme): LegendListStyle => { const { top: paddingTop, bottom: paddingBottom, left: paddingLeft, right: paddingRight } = chartMargins; From 8b05bd60d282ba9f7b3c6eb4e0a43647c6359767 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 25 Oct 2019 09:28:22 -0500 Subject: [PATCH 3/4] fix: legned label value buffer --- src/components/legend/legend.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/legend/legend.tsx b/src/components/legend/legend.tsx index 29dcf0d13a..59d34fd17d 100644 --- a/src/components/legend/legend.tsx +++ b/src/components/legend/legend.tsx @@ -1,7 +1,6 @@ import React, { createRef } from 'react'; import { inject, observer } from 'mobx-react'; import classNames from 'classnames'; -import { debounce } from 'ts-debounce'; import { isVerticalAxis, isHorizontalAxis } from '../../chart_types/xy_chart/utils/axis_utils'; import { LegendItem as SeriesLegendItem } from '../../chart_types/xy_chart/legend/legend'; @@ -82,17 +81,19 @@ class LegendComponent extends React.Component { ); } - tryLegendResize = debounce(() => { - const { chartTheme, legendPosition, legendItems } = this.props.chartStore!; + 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; this.setState({ width: this.echLegend.current.offsetWidth + buffer, @@ -102,11 +103,12 @@ class LegendComponent extends React.Component { // Need to reset width to enable downsizing of width if (width !== undefined && legendItems.size !== this.legendItemCount) { this.legendItemCount = legendItems.size; + this.setState({ width: undefined, }); } - }, 200); + }; getLegendListStyle = (position: Position, { chartMargins, legend }: Theme): LegendListStyle => { const { top: paddingTop, bottom: paddingBottom, left: paddingLeft, right: paddingRight } = chartMargins; From 837d81fd91704b2e93819821ca5fa2ae5843a4da Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 25 Oct 2019 11:21:51 -0500 Subject: [PATCH 4/4] fix: add return after setstate --- src/components/legend/legend.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/legend/legend.tsx b/src/components/legend/legend.tsx index 59d34fd17d..93afc1409c 100644 --- a/src/components/legend/legend.tsx +++ b/src/components/legend/legend.tsx @@ -95,7 +95,7 @@ class LegendComponent extends React.Component { const buffer = chartTheme.legend.spacingBuffer; this.legendItemCount = legendItems.size; - this.setState({ + return this.setState({ width: this.echLegend.current.offsetWidth + buffer, }); }