# Step 09 — Reading component

Install react-circular-progressbar

$ npm i react-circular-progressbar

+ react-circular-progressbar@2.0.3
added 1 package from 1 contributor and removed 10 packages in 24.5s

55 packages are looking for funding
  run `npm fund` for details

Create DayStats component

app/javascript/components/reading/DayStats.jsx

import React from 'react';
import {
  CircularProgressbar,
  buildStyles,
} from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
import Circle from '../graph/OutputGraph';

const DayStats = () => {
  const percentage = 66;
  return (
    <>
      <div className="daily-stats">
        <div className="row reading-header">
          <h4>24-September-2019</h4>
        </div>
        <div className="row graph-box">
          <div className="row">
            <div className="col">
              <Circle>
                <CircularProgressbar
                  value={percentage}
                  text={`${percentage}%`}
                  strokeWidth={5}
                  styles={buildStyles({
                    textColor: '#4b627a',
                    pathColor: '#94e490',
                  })}
                />
              </Circle>
              <div className="text-center">
                <h6>Total</h6>
                <h6>Consumption</h6>
              </div>
            </div>
            <div className="col">
              <Circle>
                <CircularProgressbar
                  value={percentage}
                  text={`${percentage} Units`}
                  strokeWidth={5}
                  styles={buildStyles({
                    textColor: '#4b627a',
                    pathColor: '#94e490',
                  })}
                />
              </Circle>
              <div className="text-center">
                <h6>Available</h6>
                <h6>Units</h6>
              </div>
            </div>
            <div className="col">
              <Circle>
                <CircularProgressbar
                  value={percentage}
                  text={`${percentage} Units`}
                  strokeWidth={5}
                  styles={buildStyles({
                    textColor: '#4b627a',
                    pathColor: '#94e490',
                  })}
                />
              </Circle>
              <div className="text-center">
                <h6>% saved</h6>
              </div>
            </div>
          </div>
        </div>
        <div className="rows">
          <div className="row">
            <div className="col room-card">
              <div className="row">
                <div className="col">
                  <i className="fas fa-bed fa-4x" />
                </div>
                <div className="col">
                  <p>Bedroom</p>
                  <h4>8 Units</h4>
                </div>
              </div>
            </div>
            <div className="col room-card">
              <div className="row">
                <div className="col">
                  <i className="fas fa-laptop fa-4x" />
                </div>
                <div className="col">
                  <p>Study</p>
                  <h4>8 Units</h4>
                </div>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col room-card">
              <div className="row">
                <div className="col">
                  <i className="fas fa-car fa-4x" />
                </div>
                <div className="col">
                  <p>Garage</p>
                  <h4>8 Units</h4>
                </div>
              </div>
            </div>
            <div className="col room-card">
              <div className="row">
                <div className="col">
                  <i className="fas fa-couch fa-4x" />
                </div>
                <div className="col">
                  <p>Living</p>
                  <h4>8 Units</h4>
                </div>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col room-card">
              <div className="row">
                <div className="col">
                  <i className="fas fa-utensils fa-4x" />
                </div>
                <div className="col">
                  <p>Kitchen</p>
                  <h4>8 Units</h4>
                </div>
              </div>
            </div>
            <div className="col room-card">
              <div className="row">
                <div className="col">
                  <i className="fas fa-user-clock fa-4x" />
                </div>
                <div className="col">
                  <p>Guest</p>
                  <h4>8 Units</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default DayStats;

Create Reading container

app/javascript/containers/Reading.jsx

import React from 'react';
import Head from '../components/Head';
import DayStats from '../components/reading/DayStats';
import Navbar from '../components/Navbar';

export default () => (
  <div>
    <Head />
    <DayStats />
    <Navbar />
  </div>
);

Add styling for DayStats

app/assets/stylesheets/custom.css.scss

.
.
.reading-header {
  background-color: white;
  height: 75px;
  text-align: center;
  h4 {
    margin: auto;
    padding: auto;
  }
}

.graph-content {
  margin: 10% 0 10% 0;
}

.reading-input {
  margin: 5% 0 5% 0;
}

.full-width-row {
  overflow-x: hidden;
}

.daily-stats {
  background-color: #f3f4f6;
  height: 100vh;
  margin: auto;
  margin-bottom: 2em;
  padding: 0 0px 40px 0px;
  width: 70%;
  min-width: 300px;
}

.circular-dimension {
  max-width: 40%;
}

.graph-box {
  background-color: white;
  justify-content: center;
  .row {
    .col {
      max-width: 100%;
    }
  }
}

.circular-box {  
  display: flex;
  justify-content: center;
  margin-top: 30px; 
}

.room-card {  
  margin: 10px 10px 10px 10px;
  .row{
    .col {
      background-color: white;
      padding: 10px 10px 10px 10px;
      text-align: center;
      i {
        color: $blue;
      }
    }
  }  
}

@media screen and (max-width: 720px) {
  #regForm,
  .daily-stats {
    width: 100%;
  }
  .circular-dimension {
    width: 100%;
  }
  .room-card {
    .row {
      .col {
        i {
          font-size: 3em;
        }
      }
    }
  }
}