fixed issue with bed chart

package.json

@@ -57,7 +57,7 @@
     "bootstrap": "~3.3.7",
     "chai": "~3.5.0",
     "chai-as-promised": "~6.0.0",
-    "chartist": "~0.9.8",
+    "chartist": "~0.10.1",
     "classnames": "~2.2.5",
     "enzyme": "~2.5.0",
     "eslint": "~3.8.1",
@@ -76,6 +76,7 @@
     "react": "~15.3.2",
     "react-addons-test-utils": "~15.3.2",
     "react-bootstrap": "~0.30.5",
+    "react-chartist": "~0.10.2",
     "react-dom": "~15.3.2",
     "react-router": "~2.8.1",
     "react-select": "~1.0.0-rc.2",

src/admin/BedChart.js

@@ -1,10 +1,10 @@
 /* eslint no-new: "off" */
 import React from 'react'
-import Chartist from 'chartist'
 import { v4 } from 'uuid'
 import ChartKey from './ChartKey'
 import Row from 'react-bootstrap/lib/Row'
 import Col from 'react-bootstrap/lib/Col'
+import ChartistGraph from 'react-chartist'
 
 export default class BedChart extends React.Component {
   constructor(props) {
@@ -14,27 +14,25 @@ export default class BedChart extends React.Component {
     }
   }
 
-  componentDidMount() {
+  render() {
     const { total, available, pending } = this.props
     const data = {
       series: [total - available - pending, pending, available]
     }
-    //noinspection Eslint
-    new Chartist.Pie(`#${this.state.id}`, data, {
+
+    const options = {
       startAngle: 270,
       showLabel: false
-    })
-  }
+    }
 
-  render() {
     return (
       <div className='summary-chart'>
         <Row>
           <Col md={3}>
             <ChartKey/>
           </Col>
           <Col md={3}>
-            <div className='chart' id={this.state.id}/>
+            <ChartistGraph data={data} options={options} type='Pie'/>
           </Col>
         </Row>
       </div>

src/admin/admin.less

@@ -10,7 +10,7 @@
     .summary {
       margin-top: 20px;
       .description {
-        .date, .name  {
+        .date, .name {
           font-weight: bold;
         }
         .date {
@@ -64,20 +64,18 @@
             }
           }
         }
-        .chart {
-          .ct-slice-pie {
-            stroke: #e0e0e0;
-            stroke-width: 1px;
-          }
-          .ct-series-a .ct-slice-pie {
-            fill: @reservedColor;
-          }
-          .ct-series-b .ct-slice-pie {
-            fill: @pendingColor;
-          }
-          .ct-series-c .ct-slice-pie {
-            fill: @availableColor;
-          }
+        .ct-slice-pie {
+          stroke: #e0e0e0;
+          stroke-width: 1px;
+        }
+        .ct-series-a .ct-slice-pie {
+          fill: @reservedColor;
+        }
+        .ct-series-b .ct-slice-pie {
+          fill: @pendingColor;
+        }
+        .ct-series-c .ct-slice-pie {
+          fill: @availableColor;
         }
       }
     }
@@ -110,6 +108,7 @@
     }
   }
 }
+
 .refer-client {
   margin-top: 20px;
   table {
@@ -120,6 +119,7 @@
     }
   }
 }
+
 .reservations {
   margin-bottom: 21px;
   .title {