Make EUIXYChart responsive using ResizeObserver (#1041)

This drops the use of native react-vis makeVisFlexible in favour of ResizeObserver to support resizing of the chart container as in kibana dashboard. * Rename observable callback to a meaningful one * Add responsive example * Remove unnecessary margin from example demos * Re-enable overflow:hidden on chart after introducing static margins * Fix typos in example text
elastic · Jul 30, 2018 · 22238ad · 22238ad
1 parent f675884
commit 22238ad
Show file tree

Hide file tree

Showing 27 changed files with 257 additions and 99 deletions.
diff --git 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
@@ -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
@@ -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 (
+      <EuiPage>
+        {
+          sideBarVisible && (
+            <EuiPageSideBar>
+              Side bar
+            </EuiPageSideBar>
+          )
+        }
+        <EuiPageBody>
+          <EuiPageHeader>
+            <EuiPageHeaderSection>
+              <EuiTitle size="l">
+                <h1>Page title</h1>
+              </EuiTitle>
+            </EuiPageHeaderSection>
+            <EuiPageHeaderSection>
+              <EuiButton
+                onClick={this.onClick}
+              >
+                Toggle Sidebar
+              </EuiButton>
+            </EuiPageHeaderSection>
+          </EuiPageHeader>
+          <EuiPageContent>
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle>
+                  <h2>Chart title</h2>
+                </EuiTitle>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                Chart abilities
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+            <EuiPageContentBody style={{ height: '300px' }}>
+              <EuiXYChart showDefaultAxis={false} margins={0}>
+                <EuiLineSeries name="Total Bytes" data={DATA_A} />
+              </EuiXYChart>
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
+}
diff --git 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: (
-        <div style={{ margin: 60 }}>
-          <ComplexChartExampleCode />
-        </div>
-      ),
+      demo: <ComplexChartExampleCode />,
     },
     {
       title: 'Empty Chart',
@@ -71,11 +68,7 @@ export const XYChartExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (
-        <div style={{ margin: 60 }}>
-          <EmptyExampleCode />
-        </div>
-      ),
+      demo: <EmptyExampleCode />,
     },
     {
       title: 'Keep cross-hair in sync',
@@ -96,11 +89,7 @@ export const XYChartExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (
-        <div style={{ margin: 60 }}>
-          <ExampleCrosshair />
-        </div>
-      ),
+      demo: <ExampleCrosshair />,
     },
     {
       title: 'Multi Axis',
@@ -119,11 +108,30 @@ export const XYChartExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (
-        <div style={{ margin: 60 }}>
-          <MultiAxisChartExampleCode />
+      demo: <MultiAxisChartExampleCode />,
+    },
+    {
+      title: 'Responsive chart',
+      text: (
+        <div>
+          <p>
+            You can omit <EuiCode>width</EuiCode> and/or <EuiCode>height</EuiCode>
+            prop and the chart takes the full width and/or height of it&apos;s parent.
+          </p>
+          <p>The parent container needs to have computed a height and/or width.</p>
         </div>
       ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: require('!!raw-loader!./responsive_chart'),
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: 'This component can only be used from React',
+        },
+      ],
+      demo: <ResponsiveChartExample />,
     },
     // 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
@@ -46,11 +46,7 @@ export const XYChartAreaExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (
-        <div style={{ margin: 60 }}>
-          <AreaSeriesExample />
-        </div>
-      ),
+      demo: <AreaSeriesExample />,
     },
     {
       title: 'Stacked Area Series',
@@ -74,11 +70,7 @@ export const XYChartAreaExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (
-        <div style={{ margin: 60 }}>
-          <StackedAreaSeriesExample />
-        </div>
-      ),
+      demo: <StackedAreaSeriesExample />,
     },
     {
       title: 'Curved Area Series',
@@ -104,11 +96,7 @@ export const XYChartAreaExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (
-        <div style={{ margin: 60 }}>
-          <CurvedAreaExample />
-        </div>
-      ),
+      demo: <CurvedAreaExample />,
     },
     {
       title: 'Range area chart',
@@ -129,11 +117,7 @@ export const XYChartAreaExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (
-        <div style={{ margin: 60 }}>
-          <RangeAreaExample/>
-        </div>
-      ),
+      demo: <RangeAreaExample/>,
     },
   ],
 };
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
@@ -46,11 +46,7 @@ export const XYChartAxisExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (
-        <div style={{ margin: 60 }}>
-          <SimpleAxisExampleCode />
-        </div>
-      ),
+      demo: <SimpleAxisExampleCode />,
     },
     {
       title: 'Annotations',
@@ -73,11 +69,7 @@ export const XYChartAxisExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (
-        <div style={{ margin: 60 }}>
-          <AnnotationExampleCode />
-        </div>
-      ),
+      demo: <AnnotationExampleCode />,
     },
   ],
 };
diff --git 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: (<VerticalBarSeriesExample />),
+      demo: <VerticalBarSeriesExample />,
     },
     {
       title: 'Stacked Vertical Bar Chart',
@@ -113,7 +113,7 @@ export const XYChartBarExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (<StackedVerticalBarSeriesExample />),
+      demo: <StackedVerticalBarSeriesExample />,
     },
     {
       title: 'Horizontal Bar Chart',
@@ -138,7 +138,7 @@ export const XYChartBarExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (<HorizontalBarSeriesExample />),
+      demo: <HorizontalBarSeriesExample />,
     },
     {
       title: 'Stacked Horizontal Bar Chart',
@@ -163,7 +163,7 @@ export const XYChartBarExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (<StackedHorizontalBarSeriesExample />),
+      demo: <StackedHorizontalBarSeriesExample />,
     },
 
     {
@@ -185,7 +185,7 @@ export const XYChartBarExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (<TimeSeriesExample />),
+      demo: <TimeSeriesExample />,
     },
   ],
 };
diff --git 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: (<VerticalRectSeriesExample />),
+      demo: <VerticalRectSeriesExample />,
     },
     {
       title: 'Stacked Vertical Histogram',
@@ -121,7 +121,7 @@ export const XYChartHistogramExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (<StackedVerticalRectSeriesExample />),
+      demo: <StackedVerticalRectSeriesExample />,
     },
     {
       title: 'Horizontal Histogram',
@@ -144,7 +144,7 @@ export const XYChartHistogramExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (<HorizontalRectSeriesExample />),
+      demo: <HorizontalRectSeriesExample />,
     },
     {
       title: 'Stacked Horizontal Histogram',
@@ -175,7 +175,7 @@ export const XYChartHistogramExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (<StackedHorizontalRectSeriesExample />),
+      demo: <StackedHorizontalRectSeriesExample />,
     },
     {
       title: 'Time Series Histogram version',
@@ -196,7 +196,7 @@ export const XYChartHistogramExample = {
           code: 'This component can only be used from React',
         },
       ],
-      demo: (<TimeHistogramSeriesExample />),
+      demo: <TimeHistogramSeriesExample />,
     },
   ],
 };
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
@@ -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 {
         <EuiButton onClick={this.handleRandomize}>Randomize data</EuiButton>
 
         <EuiSpacer size="xl" />
-        <EuiXYChart width={600} height={200} xType={SCALE.TIME} stackBy="y">
+        <EuiXYChart width={600} height={200} xType={SCALE.TIME} stackBy="y" margins={margins}>
           {data.map((d, i) => <EuiHistogramSeries key={i} name={`Chart ${i}`} data={d} />)}
         </EuiXYChart>
       </Fragment>