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) 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-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..977c3d108bf 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 = { @@ -48,11 +49,7 @@ export const XYChartExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Empty Chart', @@ -71,11 +68,7 @@ export const XYChartExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Keep cross-hair in sync', @@ -96,11 +89,7 @@ export const XYChartExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: , }, { title: 'Multi Axis', @@ -119,11 +108,30 @@ export const XYChartExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- + demo: , + }, + { + title: 'Responsive chart', + text: ( +
+

+ 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.

), + 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. 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_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-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: , }, ], }; diff --git a/src/components/xy_chart/_xy_chart.scss b/src/components/xy_chart/_xy_chart.scss index 121a7a16e9c..7017226e452 100644 --- a/src/components/xy_chart/_xy_chart.scss +++ b/src/components/xy_chart/_xy_chart.scss @@ -1,3 +1,4 @@ -.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"