From 6de194b195cb44c230fef457f7433ef262d72b2e Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 Jul 2018 12:30:20 +0200 Subject: [PATCH 1/7] Make EUIXYChart responsive using ResizeObserver This drops the use of native react-vis makeVisFlexible in favour of ResizeObserver to support resizing of the chart container as in kibana dashboard. --- package.json | 1 + src/components/xy_chart/_xy_chart.scss | 4 ++ .../__snapshots__/default_axis.test.js.snap | 2 + .../horizontal_grid.test.js.snap | 1 + .../__snapshots__/vertical_grid.test.js.snap | 1 + .../axis/__snapshots__/x_axis.test.js.snap | 1 + .../axis/__snapshots__/y_axis.test.js.snap | 1 + .../__snapshots__/crosshair_x.test.js.snap | 1 + .../__snapshots__/crosshair_y.test.js.snap | 1 + .../__snapshots__/area_series.test.js.snap | 14 +++++- .../horizontal_bar_series.test.js.snap | 3 ++ .../horizontal_rect_series.test.js.snap | 3 ++ .../__snapshots__/line_series.test.js.snap | 31 +++++++++--- .../vertical_bar_series.test.js.snap | 3 ++ .../vertical_rect_series.test.js.snap | 3 ++ src/components/xy_chart/utils/flexible.js | 47 +++++++++++++++++++ src/components/xy_chart/xy_chart.js | 7 +-- yarn.lock | 4 ++ 18 files changed, 117 insertions(+), 11 deletions(-) create mode 100644 src/components/xy_chart/utils/flexible.js diff --git a/package.json b/package.json index 258cc8b1a6e..26bbfc1de38 100644 --- a/package.json +++ b/package.json @@ -124,6 +124,7 @@ "react-test-renderer": "^16.2.0", "redux": "^3.7.2", "redux-thunk": "^2.2.0", + "resize-observer-polyfill": "^1.5.0", "rimraf": "^2.6.2", "sass-extract": "^2.1.0", "sass-extract-js": "^0.3.0", diff --git a/src/components/xy_chart/_xy_chart.scss b/src/components/xy_chart/_xy_chart.scss index 121a7a16e9c..d7611c7fcf9 100644 --- a/src/components/xy_chart/_xy_chart.scss +++ b/src/components/xy_chart/_xy_chart.scss @@ -1,3 +1,7 @@ .rv-xy-plot__inner { overflow: visible; // TODO fix when adding automatic margin into svg } +.rv-xy-plot { + width: 100% !important; // this because react-vis fix the width of the container in px + height: 100% !important; // avoid a correct computation of the component size +} diff --git a/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap b/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap index cb03e4c7653..98d6cede4cf 100644 --- a/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap +++ b/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap @@ -16,6 +16,7 @@ exports[`EuiDefaultAxis render default axis 1`] = `
-
+
{ + entries.forEach((entry) => { + const { width, height } = entry.contentRect; + const notifyWidth = this.state.width !== width; + const notifyHeight = this.state.height !== height; + if (notifyWidth || notifyHeight) { + this.setState({ width, height }); + } + }); + }; + + render() { + return ( +
+ +
+ ); + } + }; +} diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index d901e8aee89..8e30a208a24 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -1,6 +1,6 @@ import React, { PureComponent, Fragment } from 'react'; -import { XYPlot, AbstractSeries, makeVisFlexible } from 'react-vis'; - +import { XYPlot, AbstractSeries } from 'react-vis'; +import { makeFlexible } from './utils/flexible'; import PropTypes from 'prop-types'; import { EuiEmptyPrompt } from '../empty_prompt'; import { EuiSelectionBrush } from './selection_brush'; @@ -143,6 +143,7 @@ class XYChart extends PureComponent { stackBy={stackBy} yPadding={yPadding} xPadding={xPadding} + style={{ width: '100%', height: '100%' }} > {this._renderChildren(children)} {showDefaultAxis && } @@ -218,4 +219,4 @@ XYChart.defaultProps = { margins: DEFAULT_MARGINS, }; -export const EuiXYChart = makeVisFlexible(XYChart); +export const EuiXYChart = makeFlexible(XYChart); diff --git a/yarn.lock b/yarn.lock index ff5d3fd3d33..f2a303970e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8604,6 +8604,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" +resize-observer-polyfill@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69" + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a" From 1a5bcdcf39c806be5725218f216d297ee06ce658 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 Jul 2018 17:28:06 +0200 Subject: [PATCH 2/7] Rename observable callback to a meaningful one --- src/components/xy_chart/utils/flexible.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/xy_chart/utils/flexible.js b/src/components/xy_chart/utils/flexible.js index 0d84776538c..5af0286e8cb 100644 --- a/src/components/xy_chart/utils/flexible.js +++ b/src/components/xy_chart/utils/flexible.js @@ -11,7 +11,7 @@ export function makeFlexible(WrappedComponent) { width: 0, }; this.containerRef = React.createRef(); - this.ro = new ResizeObserver(this.createResizeObserver); + this.ro = new ResizeObserver(this.onResize); } componentDidMount() { @@ -22,7 +22,7 @@ export function makeFlexible(WrappedComponent) { this.ro.unobserve(this.containerRef.current); } - createResizeObserver = (entries) => { + onResize = (entries) => { entries.forEach((entry) => { const { width, height } = entry.contentRect; const notifyWidth = this.state.width !== width; From 9f789288c0ab9f610c318ddaf5a7be68769b4a56 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 Jul 2018 18:09:52 +0200 Subject: [PATCH 3/7] Add responsive example --- .../src/views/xy_chart/responsive_chart.js | 84 +++++++++++++++++++ .../src/views/xy_chart/xy_chart_example.js | 28 +++++++ 2 files changed, 112 insertions(+) create mode 100644 src-docs/src/views/xy_chart/responsive_chart.js diff --git a/src-docs/src/views/xy_chart/responsive_chart.js b/src-docs/src/views/xy_chart/responsive_chart.js new file mode 100644 index 00000000000..6f35ffbafc5 --- /dev/null +++ b/src-docs/src/views/xy_chart/responsive_chart.js @@ -0,0 +1,84 @@ +import React from 'react'; + +import { + EuiXYChart, + EuiLineSeries, +} from '../../../../src/experimental'; +import { + EuiButton, + EuiPage, + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiPageContentHeader, + EuiPageContentHeaderSection, + EuiPageHeader, + EuiPageHeaderSection, + EuiPageSideBar, + EuiTitle, +} from '../../../../src/components'; + +const DATA_A = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: -1 }, + { x: 4, y: 3 }, + { x: 5, y: 2 }, +]; + +export default class Example extends React.Component { + state = { + sideBarVisible: true, + } + onClick = () => { + this.setState((prevState) => ({ sideBarVisible: !prevState.sideBarVisible })); + } + render() { + const { sideBarVisible } = this.state; + return ( + + { + sideBarVisible && ( + + Side bar + + ) + } + + + + +

Page title

+ + + + + Toggle Sidebar + + + + + + + +

Chart title

+ + + + Chart abilities + + + + + + + + + + + ); + } +} diff --git a/src-docs/src/views/xy_chart/xy_chart_example.js b/src-docs/src/views/xy_chart/xy_chart_example.js index 80cb27b0f0e..6239034e839 100644 --- a/src-docs/src/views/xy_chart/xy_chart_example.js +++ b/src-docs/src/views/xy_chart/xy_chart_example.js @@ -5,6 +5,7 @@ import { EuiXYChart } from '../../../../src/experimental'; import ComplexChartExampleCode from './complex'; import EmptyExampleCode from './empty'; import MultiAxisChartExampleCode from './multi_axis'; +import ResponsiveChartExample from './responsive_chart'; import { ExampleCrosshair } from './crosshair_sync'; export const XYChartExample = { @@ -125,6 +126,33 @@ export const XYChartExample = {
), }, + { + title: 'Responsive chart', + text: ( +
+

+ You can omit width ando/or height + prop and the chart takes the full width and/or height of it's parent. +

+

The parent container needs to have computed a height and or width.

+
+ ), + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./responsive_chart'), + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React', + }, + ], + demo: ( +
+ +
+ ), + }, // TODO include the following example when AreasSeries PR (create vertical areachart) // will be merged into react-vis and orientation prop semantic will be solved. // { From ac6c77d34d42ee6622ff4e2b5a4aca5526f3ca5e Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 Jul 2018 18:37:44 +0200 Subject: [PATCH 4/7] Remove unnecessary margin from example demos --- .../src/views/xy_chart/xy_chart_example.js | 30 ++++--------------- .../src/views/xy_chart_area/area_example.js | 24 +++------------ .../views/xy_chart_axis/xy_axis_example.js | 12 ++------ .../src/views/xy_chart_bar/bar_example.js | 10 +++---- .../xy_chart_histogram/histogram_example.js | 10 +++---- .../src/views/xy_chart_line/line_example.js | 30 ++++--------------- 6 files changed, 26 insertions(+), 90 deletions(-) diff --git a/src-docs/src/views/xy_chart/xy_chart_example.js b/src-docs/src/views/xy_chart/xy_chart_example.js index 6239034e839..ea2e927023b 100644 --- a/src-docs/src/views/xy_chart/xy_chart_example.js +++ b/src-docs/src/views/xy_chart/xy_chart_example.js @@ -49,11 +49,7 @@ export const XYChartExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Empty Chart', @@ -72,11 +68,7 @@ export const XYChartExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Keep cross-hair in sync', @@ -97,11 +89,7 @@ export const XYChartExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Multi Axis', @@ -120,11 +108,7 @@ export const XYChartExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Responsive chart', @@ -147,11 +131,7 @@ export const XYChartExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, // TODO include the following example when AreasSeries PR (create vertical areachart) // will be merged into react-vis and orientation prop semantic will be solved. diff --git a/src-docs/src/views/xy_chart_area/area_example.js b/src-docs/src/views/xy_chart_area/area_example.js index ac270fb357a..1c8fd07c642 100644 --- a/src-docs/src/views/xy_chart_area/area_example.js +++ b/src-docs/src/views/xy_chart_area/area_example.js @@ -46,11 +46,7 @@ export const XYChartAreaExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Stacked Area Series', @@ -74,11 +70,7 @@ export const XYChartAreaExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Curved Area Series', @@ -104,11 +96,7 @@ export const XYChartAreaExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Range area chart', @@ -129,11 +117,7 @@ export const XYChartAreaExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, ], }; diff --git a/src-docs/src/views/xy_chart_axis/xy_axis_example.js b/src-docs/src/views/xy_chart_axis/xy_axis_example.js index ddb83096a26..0777341a681 100644 --- a/src-docs/src/views/xy_chart_axis/xy_axis_example.js +++ b/src-docs/src/views/xy_chart_axis/xy_axis_example.js @@ -46,11 +46,7 @@ export const XYChartAxisExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Annotations', @@ -73,11 +69,7 @@ export const XYChartAxisExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, ], }; diff --git a/src-docs/src/views/xy_chart_bar/bar_example.js b/src-docs/src/views/xy_chart_bar/bar_example.js index 7c3c02dc9fd..e23e146dbeb 100644 --- a/src-docs/src/views/xy_chart_bar/bar_example.js +++ b/src-docs/src/views/xy_chart_bar/bar_example.js @@ -91,7 +91,7 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, { title: 'Stacked Vertical Bar Chart', @@ -113,7 +113,7 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, { title: 'Horizontal Bar Chart', @@ -138,7 +138,7 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, { title: 'Stacked Horizontal Bar Chart', @@ -163,7 +163,7 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, { @@ -185,7 +185,7 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, ], }; diff --git a/src-docs/src/views/xy_chart_histogram/histogram_example.js b/src-docs/src/views/xy_chart_histogram/histogram_example.js index 520fc0f07fe..ac1af3a16b9 100644 --- a/src-docs/src/views/xy_chart_histogram/histogram_example.js +++ b/src-docs/src/views/xy_chart_histogram/histogram_example.js @@ -89,7 +89,7 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, { title: 'Stacked Vertical Histogram', @@ -121,7 +121,7 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, { title: 'Horizontal Histogram', @@ -144,7 +144,7 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, { title: 'Stacked Horizontal Histogram', @@ -175,7 +175,7 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, { title: 'Time Series Histogram version', @@ -196,7 +196,7 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: (), + demo: , }, ], }; diff --git a/src-docs/src/views/xy_chart_line/line_example.js b/src-docs/src/views/xy_chart_line/line_example.js index a3104023925..1d4a31048a8 100644 --- a/src-docs/src/views/xy_chart_line/line_example.js +++ b/src-docs/src/views/xy_chart_line/line_example.js @@ -48,11 +48,7 @@ export const XYChartLineExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Custom domain line chart', @@ -76,11 +72,7 @@ export const XYChartLineExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Multi Line chart', @@ -102,11 +94,7 @@ export const XYChartLineExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Curved Line chart', @@ -132,11 +120,7 @@ export const XYChartLineExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Custom style Line chart', @@ -170,11 +154,7 @@ export const XYChartLineExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, ], }; From e165feaaa155b55d9953a8f91e8cb6393495b576 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 Jul 2018 18:49:32 +0200 Subject: [PATCH 5/7] Re-enable overflow:hidden on chart after introducing static margins --- .../views/xy_chart_histogram/time_histogram_series.js | 9 +++++++-- src/components/xy_chart/_xy_chart.scss | 3 --- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/xy_chart_histogram/time_histogram_series.js b/src-docs/src/views/xy_chart_histogram/time_histogram_series.js index 83317b3288f..d51c081c786 100644 --- a/src-docs/src/views/xy_chart_histogram/time_histogram_series.js +++ b/src-docs/src/views/xy_chart_histogram/time_histogram_series.js @@ -13,7 +13,12 @@ import { const { SCALE } = EuiXYChartUtils; const timestamp = Date.now(); const ONE_HOUR = 3600000; - +const margins = { + top: 10, + left: 80, + right: 0, + bottom: 20, +}; function randomizeData(size = 24, max = 15) { return new Array(size) @@ -50,7 +55,7 @@ export default class Example extends Component { Randomize data - + {data.map((d, i) => )} diff --git a/src/components/xy_chart/_xy_chart.scss b/src/components/xy_chart/_xy_chart.scss index d7611c7fcf9..7017226e452 100644 --- a/src/components/xy_chart/_xy_chart.scss +++ b/src/components/xy_chart/_xy_chart.scss @@ -1,6 +1,3 @@ -.rv-xy-plot__inner { - overflow: visible; // TODO fix when adding automatic margin into svg -} .rv-xy-plot { width: 100% !important; // this because react-vis fix the width of the container in px height: 100% !important; // avoid a correct computation of the component size From 67047b670d812cbdd4160de76c1b8e953ac5865c Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 Jul 2018 18:51:32 +0200 Subject: [PATCH 6/7] Fix typos in example text --- src-docs/src/views/xy_chart/xy_chart_example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/xy_chart/xy_chart_example.js b/src-docs/src/views/xy_chart/xy_chart_example.js index ea2e927023b..977c3d108bf 100644 --- a/src-docs/src/views/xy_chart/xy_chart_example.js +++ b/src-docs/src/views/xy_chart/xy_chart_example.js @@ -115,10 +115,10 @@ export const XYChartExample = { text: (

- You can omit width ando/or height + You can omit width and/or height prop and the chart takes the full width and/or height of it's parent.

-

The parent container needs to have computed a height and or width.

+

The parent container needs to have computed a height and/or width.

), source: [ From 566f7b9780be7f17ea453a8454bace0bb431416d Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 30 Jul 2018 11:54:22 +0200 Subject: [PATCH 7/7] Update CHANGELOG --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3239d6bf988..783fee92995 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `3.2.1`. +**Bug fixes** + +- Fixed `EuiXYChart` responsive resize in a flexbox layout ([#1041](https://github.com/elastic/eui/pull/1041)) ## [`3.2.1`](https://github.com/elastic/eui/tree/v3.2.1)