import React from 'react'
import { Row, Col } from 'antd';
import Page from '@/components/Page';
import Banner from './components/Banner';
import EscalationCharts from './components/EscalationCharts';
import AssignedCharts from './components/AssignedCharts';
import ProblemCharts from './components/ProblemCharts';
import SpotCharts from './components/SpotCharts';

export default (props) => {

  const chartStyle = {
    height: '260px',
    width: '100%',
  }

  const chartStyle2 = {
    height: '200px',
    width: '100%',
  }

  return (
    <Page>
      <Banner />

      <Row gutter={24} style={{ marginTop: '24px' }}>
        <Col span={24}>
          <AssignedCharts style={chartStyle} />
        </Col>
      </Row>

      <Row gutter={24} style={{ marginTop: '24px' }}>
        <Col span={12}>
          <ProblemCharts style={chartStyle2} />
        </Col>
        <Col span={12}>
          <EscalationCharts style={chartStyle2} />
        </Col>

      </Row>
      <Row gutter={24} style={{ marginTop: '24px' }}>
        <Col span={24}>
          <SpotCharts style={chartStyle} />
        </Col>
      </Row>
    </Page>
  )
}