Have LineChart be the size of its container (#117)

Leverage `react-sizeme` to make LineChart always be the size of its container, instead of needing to specify dimensions. Related to #60
cognitedata · Jul 30, 2018 · bd7aa68 · bd7aa68
1 parent 961a4e4
commit bd7aa68
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/src/components/LineChart/index.js b/src/components/LineChart/index.js
@@ -19,8 +19,10 @@ import XAxis from '../XAxis';
 import AxisDisplayMode from './AxisDisplayMode';
 
 const propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  size: PropTypes.shape({ width: PropTypes.number.isRequired }),
+  size: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+  }).isRequired,
   width: PropTypes.number,
   height: PropTypes.number.isRequired,
   zoomable: PropTypes.bool,
@@ -127,9 +129,9 @@ class LineChartComponent extends Component {
 
   render() {
     const {
-      size: { width: sizeWidth },
+      size: { width: sizeWidth, height: sizeHeight },
       width: propWidth,
-      height,
+      height: propHeight,
       subDomain,
       crosshair,
       onMouseMove,
@@ -148,6 +150,7 @@ class LineChartComponent extends Component {
     } = this.props;
 
     const width = propWidth || sizeWidth;
+    const height = propHeight || sizeHeight;
     const xAxisHeight = 50;
     const axisCollectionSize = {
       width: this.getYAxisCollectionWidth(),
@@ -169,7 +172,7 @@ class LineChartComponent extends Component {
           display: 'grid',
           gridTemplateColumns: `${chartSize.width}px auto`,
           gridTemplateRows: '1fr auto',
-          height: `${height}px`,
+          height: '100%',
         }}
       >
         <div className="lines-container" style={{ height: '100%' }}>
@@ -235,13 +238,9 @@ class LineChartComponent extends Component {
 LineChartComponent.propTypes = propTypes;
 LineChartComponent.defaultProps = defaultProps;
 
-LineChartComponent.propTypes = propTypes;
-LineChartComponent.defaultProps = defaultProps;
-
-LineChartComponent.propTypes = propTypes;
-LineChartComponent.defaultProps = defaultProps;
-
-const SizedLineChartComponent = sizeMe()(LineChartComponent);
+const SizedLineChartComponent = sizeMe({ monitorHeight: true })(
+  LineChartComponent
+);
 
 const LineChart = props => (
   <Scaler>

diff --git a/stories/index.js b/stories/index.js
@@ -189,12 +189,26 @@ storiesOf('LineChart', module)
             baseDomain={staticBaseDomain}
             series={[{ id: 1, color: 'steelblue' }, { id: 2, color: 'maroon' }]}
           >
-            <LineChart height={CHART_HEIGHT} width={CHART_HEIGHT} />
+            <LineChart />
           </DataProvider>
         </div>
       </div>
     ))
   )
+  .add(
+    'Full-size',
+    withInfo()(() => (
+      <div style={{ height: '100vh' }}>
+        <DataProvider
+          defaultLoader={staticLoader}
+          baseDomain={staticBaseDomain}
+          series={[{ id: 1, color: 'steelblue' }, { id: 2, color: 'maroon' }]}
+        >
+          <LineChart />
+        </DataProvider>
+      </div>
+    ))
+  )
   .add(
     'Resizing',
     withInfo()(() => {
@@ -244,7 +258,7 @@ storiesOf('LineChart', module)
                     { id: 2, color: 'maroon' },
                   ]}
                 >
-                  <LineChart height={height} width={width} />
+                  <LineChart />
                 </DataProvider>
               </div>
             </React.Fragment>