Here is the code which I am using for generating react-grid-layout.
What I am trying to achieve here is a dynamic dashboard which is configurable and can be resized and dragged as well.
On initial render I am trying for the dashboard cards to display in one row as the Y-coordinates are same for all four dashboard Cards. Please refer the image.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
//import { LayoutForm } from './layout-constant';
import { Responsive,WidthProvider} from 'react-grid-layout';
const ResponsiveGridLayout = WidthProvider(Responsive);
import GridLayout from 'react-grid-layout';
import {
Row,
Col,
Card,
CardHeader,
CardBody,
Progress
} from 'reactstrap';
import LineChart from './LineChart';
import ColumnChart from './ColumnChart';
import '6d-dynamic-dashboard/lib/styles/6d_dashboard.css';
import '../../node_modules/react-grid-layout/css/styles.css';
import '../../node_modules/react-resizable/css/styles.css';
const ReactHighcharts = require('react-highcharts');
class DynamicDashboard extends Component {
constructor(props){
super(props);
this.state = {
dispStyle : {}
}
this.child = React.createRef();
console.log("props",props);
}
renderMicroDash = () => {
return(
this.props.dashProps.microDash.map((dash) => {
const className = dash.customWidth ? "pl-3" : dash.colProps;
switch(dash.type){
case 100 :
return(
<div style={{width : dash.customWidth}} className={className} key="a"
data-grid={{x: 0, y: 0, w: 3, h: 3.5, minW: 2, maxW: 4}}>
<Card body className="mb-5 mt-4">
<Row>
<Col xl="8" lg="8" sm="8" xs="8" className="text-left">
<label>{dash.label}</label>
<h1 style={dash.textStyle}>{dash.sampleFigure}</h1>
</Col>
<Col xl="4" lg="4" sm="4" xs="4">
<i className={dash.icon}></i>
</Col>
</Row>
</Card>
</div>
)
case 101 :
return(
<div style={{width : dash.customWidth}} className={className} key="x"
data-grid={{x: 2, y:0, w: 3, h: 2, minW: 2, maxW: 4}}>
<Card body className="mb-5 mt-4" style={dash.borderStyle}>
<Row>
<Col xl="12" lg="12" sm="12" xs="12" className="text-left">
<label>{dash.label}</label>
<h1 style={dash.textStyle}>{dash.sampleFigure}</h1>
</Col>
</Row>
</Card>
</div>
)
case 102 :
return(
<div style={{width : dash.customWidth}} className={className} key="c"
data-grid={{x: 4, y:0, w: 3, h: 2, minW: 2, maxW: 4}}>
<Card body className="mb-5 mt-4">
<Row>
<Col xl="12" lg="12" sm="12" xs="12" className="text-left">
<label>{dash.label}</label>
{/* <h1 style={dash.textStyle}>{dash.sampleFigure}</h1> */}
<Progress animated value={75} color="success">$385</Progress>
</Col>
</Row>
</Card>
</div>
)
case 103 :
return(
<div style={{width : dash.customWidth}} className={className} key="g"
data-grid={{x: 6 , y:0, w: 3, h: 2, minW: 2}}>
<Card body className="mb-5 mt-4" style={dash.cardStyle}>
<Row>
<Col xl="12" lg="12" sm="12" xs="12" className="text-left">
<label >{dash.label}</label>
<h1 style={dash.textStyle}>{dash.sampleFigure}</h1>
<span className="float-right">Overall Activity</span>
</Col>
</Row>
</Card>
</div>
)
}
})
)
}
render() {
return (
<div className="container col-md-12" >
<ResponsiveGridLayout className="layout"
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
rowHeight={30} width={1200}
measureBeforeMount={true}>
{this.renderMicroDash()}
</ResponsiveGridLayout>
</div>);
}
}
export default DynamicDashboard;
As you can see that the initial x coordinates for all the four cards are different and y coordinates are 0. So instead of displaying in a row they are displaying as below : Initial Render Image
Dragging and dropping and resizing is working absolutely fine.
Please help me understand what am I doing wrong or how to resolve this initial random placement of my cards by React-grid-layout.
