content: import React from 'react';
  import { Card, } from 'react-mdl';
  
  import './style.css';
  import '../../../node_modules/react-grid-layout/css/styles.css';
  import '../../../node_modules/react-mdl/extra/material.css';
  import '../../../node_modules/react-mdl/extra/material.js';
  
  import {Responsive, WidthProvider} from 'react-grid-layout';
  const ResponsiveReactGridLayout = WidthProvider(Responsive);
  import SensorChart from '../SensorChart';
  import {LazyPage} from '../LazyMain'
  
  
  var HausGrid = React.createClass({
    render: function() {
      // layout is an array of objects, see the demo for more complete usage
      var dict = {
        isResizable: true,
        layout: [
          {i: 'a', x: 0, y: 0, w: 1, h: 2},
          {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
          {i: 'c', x: 4, y: 0, w: 1, h: 2}
        ]
      };
      return (
        <ResponsiveReactGridLayout {...dict} className="layout"
          breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
          cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
          <Card key={'a'} shadow={0}><SensorChart /></Card>
          <Card key={'b'} shadow={0}> 2 </Card>
          <Card key={'c'} shadow={0}> 3 </Card>
        </ResponsiveReactGridLayout>
      )
    }
  });
  
  
  class Dashboard extends React.Component {
    constructor(...props) {
      super(...props);
      this.state = {}
    }
  
  
    render() {
      return (
        <LazyPage title="Dashboard" pageName="Dashboard">
          <div className="React-grid">
            <HausGrid />
          </div>
        </LazyPage>
      )
    }
  }
  
  export default Dashboard;
  