CodePen Embed - Dashboard New

<div class="navbar navbar-default wds-navbar-1">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-custom-collapse">
      <i class="fa fa-user fa-fw"></i>
      <span class="badge">4</span>
    </button>
    <a class="navbar-brand" href="#">
      <span><strong>Insight</strong>Dashboard</span>
    </a>
    <div class="visible-xs" id="stupid-hack">
      <a href="#" data-toggle="collapse" data-target="#mainNav">Agent IQ <span class="caret"></span></a>
    </div>
  </div>
  
  <div class="navbar-collapse collapse pull-right navbar-custom-collapse">
    <div class="nav navbar-nav navbar-right">
      <div class="navbar-right--wrapper clearfix">
        <span class="user">Lindsay</span>
        <span class="settings">
          <a href="#" class="btn btn-primary"><i class="fa fa-gear"></i> Settings <i class="caret"></i></a>
          <a href="#" class="notification"><i class="fa fa-2x fa-bell"></i> <span class="badge">4</span></a>
        </span>
      </div> 
    </div><!--/.navbar-right-->
    
  </div>
  <div class="navbar-collapse collapse pull-left" id="mainNav">
    <ul class="nav navbar-nav">
      <li class="active" data-toggle="tab">
        <a href="#">
          <span class="nav-icon">
            <i class="fa-2lg fa icon-iq-q fa-fw"></i>
          </span>
          Agent IQ
        </a>
      </li>
      <li data-toggle="tab">
        <a href="#">
          <span class="nav-icon">
            <i class="fa-2lg fa fa-headphones fa-fw"></i>
          </span>
          <span class="compressed-lines">Virtual<br class="hidden-xs" />Agent</span>
        </a>
      </li>
      <li data-toggle="tab">
        <a href="#">
          <span class="nav-icon">
            <i class="fa-2lg fa icon-intelligence-hub fa-fw"></i>
          </span>
          Intelligence <br class="hidden-xs"/>Hub
        </a>
      </li>
    </ul>
  </div>
  
</div><!--/.nav-->

<div class="flex-container">
  <div class="flex-side">
    <div class="navside-topbar">
      <a href="#" class="btn btn-default pull-right" id="hamburger-btn"><i class="fa fa-bars"></i></a>
      <div class="input-group collapsed-content">
        <span class="input-group-addon"><div class="fa fa-search"></div></span>
        <input class="form-control" type="text" placeholder="Search reports">
      </div>
    </div><!--/.topbar-->
    <div class="panel-group wds-panel-group-1 collapsed-content" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel wds-panel panel-default">
        <div class="panel-heading active" role="tab" id="headingOne">
          <p class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Main Nav 1</a></p>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul class="panel-body list-group wds-list-menu-1">
            <a href="#" class="list-group-item wds-active">Sub Nav 1</a>
            <a href="#" class="list-group-item">Sub Nav 2</a>
            <a href="#" class="list-group-item">Sub Nav 3</a>
          </ul>
        </div>
      </div>
      <div class="panel wds-panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <p class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Main Nav 2</a></p>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <ul class="panel-body list-group wds-list-menu-1">
            <a href="#" class="list-group-item">Sub Nav 1</a>
            <a href="#" class="list-group-item">Sub Nav 2</a>
            <a href="#" class="list-group-item">Sub Nav 3</a>
          </ul>
        </div>
      </div>
      <div class="panel wds-panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <p class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Main Nav 3</a></p>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <ul class="panel-body list-group wds-list-menu-1">
            <a href="#" class="list-group-item">Active Sub Category 3a</a>
            <a href="#" class="list-group-item">Sub Category 3b</a>
            <a href="#" class="list-group-item">Sub Category 3c</a>
          </ul>
        </div>
      </div>
    </div>
  </div><!--/.flexside-->
  <div class="flex-content">
    
    <div class="the-main-chart__title-wrapper">
      <h3 class="the-main-chart__title">Agent IQ Reporting &amp; Dashboard</h3>
      <div class="the-main-chart__tool">
        <a href="#"><i class="fa fa-upload"></i> Export</a>
        <a href="#" class="btn btn-default wds-btn-dropdown" style="display:inline-block;">01/01/2014 to 31/12/2014 <span class="caret"></span></a>
      </div>
    </div>


    <div class="the-main-chart ">
      <span class="pull-right">
        <a href="#" class="btn btn-default btn-xs"><i class="fa fa-line-chart"></i></a>
        <a href="#" class="btn btn-link btn-xs"><i class="fa fa-bar-chart"></i></a>
      </span>
      <a href="#" class="btn btn-default wds-btn-dropdown ">Unique Count <span class="caret"></span></a>
      <div class="flot-wrapper" id="IQ-interaction">
        <div class="text-center y-axis">Unique Count</div>
        <div class="flot-placeholder"></div>
        <div class="text-center">Log Datetime (month)</div>
      </div>
    </div>

    <div class="well wds-well secondary-chart">
      <div class="row">
        <div class="col-md-4">
          <div class="donut-chart__wrapper">
            <div id="successful-interaction-chart" class="donut-chart" data-percent="80">
              <div class="donut-chart__text">
                <div class="donut-chart__number">900</div>
                <div class="donut-chart__description">session</div>
              </div>
            </div>
            <div class="chart-title">
              Virtual Agent <br /> <strong>Successful</strong> Interaction
              <div class="legend">
                <div class="legend__item"><span class="legend__description">Yes</span>75%</div>
                <div class="legend__item"><span class="legend__description">No</span>15%</div>
                <div class="legend__item"><span class="legend__description">None</span>5%</div>
              </div>
            </div>
          </div>
        </div><!--/.span-->
        <div class="col-md-8 nested-cols-wrapper">
          <div class="col-md-4">
            <p class="fancy"><span class="fancy-percent">5%</span>Solutions encountered <br /><b>Without a fix</b></p>
            <p class="fancy"><span class="fancy-percent">61</span> NKI requests <br /><b>15% of all transactions</b></p>
          </div><!--/.span-->
          <div class="col-md-4">
            <div class="wrap-small-chart">
              <div class="h1" style="margin-top:0"><b class="text-muted">4:32</b></div>
              <div class="flot-placeholder-small" id="drop-off-rate"></div>
            </div>
            <b>-40 Seconds</b>
            <p>Average Handling Time</p>
          </div><!--/.span-->
          <div class="col-md-4 text-center">
            <div class="chart-gauge__wrapper">
              <div class="ct-chart"></div>
              <div class="chart-gauge__title">Number of <b>Agent IQ</b> vs <b>Agent Expert</b></div>
            </div>
          </div><!--/.span-->
        </div>

      </div> 
    </div>
    
    <div class="row ">
      <div class="col-md-4">
        <div class="card__wrapper">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Solutions
          </div>
          <div class="card__content">
            <ul class="top-list">
              <li>
                <span class="chart-progress-indicator chart-progress-indicator--increase">
                  <span class="chart-progress-indicator__number">280</span>
                </span> 
                Incorrect or no APN
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 95%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">268</span>
                </span> 
                Mobile data connection disabled
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 90%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">260</span>
                </span> 
                No network selected
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 70%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">245</span>
                </span> 
                Possible software issues
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 60%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">140</span>
                </span> 
                Device has developed faulty software
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 30%;"></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
      <div class="col-md-4">
        <div class="card__wrapper">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Symptoms
          </div>
          <div class="card__content">
            <ul class="top-list">
              <li>
                <span class="chart-progress-indicator ">
                  <span class="chart-progress-indicator__number">280</span>
                </span> 
                Incorrect or no APN
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 95%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">268</span>
                </span> 
                Mobile data connection disabled
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 90%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator chart-progress-indicator--increase">
                  <span class="chart-progress-indicator__number">260</span>
                </span> 
                No network selected
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 70%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">245</span>
                </span> 
                Possible software issues
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 60%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">140</span>
                </span> 
                Device has developed faulty software
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 30%;"></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
      <div class="col-md-4">
        <div class="card__wrapper">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Issues
          </div>
          <div class="card__content">
            <ul class="top-list">
              <li>
                <span class="chart-progress-indicator ">
                  <span class="chart-progress-indicator__number">280</span>
                </span> 
                Incorrect or no APN
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 95%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">268</span>
                </span> 
                Mobile data connection disabled
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 90%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">260</span>
                </span> 
                No network selected
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 70%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">245</span>
                </span> 
                Possible software issues
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 60%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator chart-progress-indicator--increase">
                  <span class="chart-progress-indicator__number">140</span>
                </span> 
                Device has developed faulty software
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 30%;"></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
    </div><!--/.row-->
    
    <div class="row ">
      <div class="col-md-12">
        <div class="card__wrapper">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Products
          </div>
          <div id="container" class="card__content"></div>
        </div>
      </div><!--/.span-->
    </div><!--/.row-->
    
    <div class="row">
      <div class="col-md-4">
        <div class="card__wrapper card--grey">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Agents
          </div>
          <div class="card__content">
            <div class="rank rank--top">
              <span class="rank__number">1st</span>
              <div class="rank__person">Andy White</div>
              <div class="rank__position">Team Leader</div>
              <div class="rank__record">
                <div class="rank__record__label">Fixes</div>
                <span class="rank__record__stats">100 <i class="fa fa-thumbs-o-up"></i> 5 <i class="fa fa-thumbs-o-down"></i></span>
                <div class="rank__record__time">
                  <span>4.25</span> hrs
                </div>
              </div>
            </div>
            <ul class="rank--rest">
              <li class="rank">
                <div class="rank__number">2nd</div>
                <div class="rank__person">Sally Ewings</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">3rd</div>
                <div class="rank__person">Sally Ewings</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">4th</div>
                <div class="rank__person">Sally Ewings</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">5th</div>
                <div class="rank__person">Sally Ewings</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
      <div class="col-md-4">
        <div class="card__wrapper card--grey">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Team
          </div>
          <div class="card__content">
            <div class="rank rank--top">
              <span class="rank__number">1st</span>
              <div class="rank__person">Acorn</div>
              <div class="rank__record">
                <div class="rank__record__label">Fixes</div>
                <span class="rank__record__stats">100 <i class="fa fa-thumbs-o-up"></i> 5 <i class="fa fa-thumbs-o-down"></i></span>
                <div class="rank__record__time">
                  <span>4.25</span> hrs
                </div>
              </div>
            </div>
            <ul class="rank--rest">
              <li class="rank">
                <div class="rank__number">2nd</div>
                <div class="rank__person">Coco</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">3rd</div>
                <div class="rank__person">Pea</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">4th</div>
                <div class="rank__person">Unicorn</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">5th</div>
                <div class="rank__person">Phoenix</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
      <div class="col-md-4">
        <div class="card__wrapper card--grey">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Interactions Virtual Agent with Root Cause vs. not having a Root Cause
          </div>
          <div class="card__content text-center">
            <div id="piechart"></div>
            <div id="piechart__legend"></div>
          </div>
        </div>
      </div><!--/.span-->
    </div><!--/.row-->
    
  </div><!--/.flex-content-->
</div><!--/.flex-container-->

$grey: #34495E;
$stroke: tint($grey,80%);
$brand-primary: #3498DB;

/*NAV STUFF*/
@media(min-width:768px){
  li[data-toggle="tab"] > a{
    line-height: 1.1;
    text-align: center;
  }
  .wds-navbar-1 .navbar-nav .active>a, 
  .wds-navbar-1 .navbar-nav,
  .wds-navbar-1 .navbar-brand,
  .wds-navbar-1 .navbar-brand:before{
    min-height: 85px;
  }
  .navbar-right--wrapper{
    &:after{
      display:inline-block;
      content:"";
      height:85px;
      vertical-align: middle;
    }
  }
}
.navbar-right--wrapper{
  padding:0 10px;
  @media(max-width:767px){
    .user{
      position: relative;
      top:8px;
    }
    .settings{
      float:right;
    }
  }
}
.wds-navbar-1{
  border-bottom: 1px solid $stroke;
  margin-bottom: 0;
}
.wds-navbar-1 .navbar-header .navbar-brand span{
  padding-left: 0;
}
.navbar-brand{
  padding-left:20px;
}


.notification{
  position: relative;
  top:6px;
  .badge{
    position: absolute;
    right:0;
    bottom:0;
    font-size: 0.5em;
  }
}
/*END OF NAV*/

/*FLEXBOX FLEX-SIDE AND FLEX-CONTENT*/
#hamburger-btn{
  margin-left: 5px;
}

.flex-container{
  display:flex;
  min-height: 100vh;
  .flex-side, .flex-content{
    padding:10px 20px;
  }
  .flex-side{
    width: 280px;
    background:tint($grey,97%);
    border-right:1px solid $stroke;
    padding-right: 15px;
    transition: width 0.3s;
    .navside-topbar{
      padding-bottom: 10px;
    }
    .collapsed-content{
      opacity:1;
      visibility:visible;
      transition:all 0.3s 0.3s;
    }
    &.collapsed{
      width: 70px;
      
      .collapsed-content{
        opacity:0;
        visibility:hidden;
        transition:all 0.001s 0s;
      }
    }
  }
  .flex-content{
    padding-left: 15px;
    flex:1;
  }
  @media(max-width:610px){
    flex-direction:column;
    .flex-content{
      padding: 10px;
    }
    .flex-side{
      width: 100%;
      border-right:none;
      border-bottom:1px solid $stroke;
      padding:10px;
      &.collapsed{
        width: inherit;
        height:60px;
      }
    }
  }
}
/*END OF FLEXBOX*/

.flot-wrapper{
  $height:250px;
  padding-left: 20px;
  margin-bottom: 20px;
  .y-axis{
    width: $height;
    transform-origin:0 0;
    transform: rotateZ(-90deg) translateX(-100%) translateY(-100%);

  }
  .flot-placeholder{
    width: 100%;
    height:$height;
    text-align: center;
    margin-bottom: 10px;
    padding-left: 50px;
    position: relative;
  }
}

.fancy{
  padding-left:3em;
  position: relative;
  .fancy-percent{
    position: absolute;
    top:3px;
    left:0;
    font-size: 14px;
    font-weight: 200  ;
    background:#60A9D7;
    border-radius:50% 50% 0 50%;
    color:#fff;
    display:inline-block;
    min-width: 2.5em;
    padding:0.5em 0;
    text-align: center;
  }
}

//Trying BEM
.donut-chart{
  position: absolute;
  left:0;
  &__text{
    position: absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
  }
  &__number{
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    color:tint($grey,30%);
  }
  &__description{
    font-size: 12px;
  }
  &__wrapper{
    padding-left: 110px;
    min-height:110px;
  }
}


.inline-block{
  display:inline-block;
}

.chart-title{
  font-size: 18px;
  font-weight: 200;
}

.legend{
  font-size: 12px;
  &__item{
    display:inline-block;
    background: #fff;
    padding:7px;
    border:1px solid $stroke;
    font-weight: 600;
    margin-top: 3px;
  }
  &__description{
    background: #71B7E6;
    color:#fff;
    padding: 0 5px;
    margin-right: 3px;
  }
}

.secondary-chart{
  @media(max-width:991px){
    .nested-cols-wrapper>div{
      margin-top: 10px;
      border-top:1px solid $stroke;
      padding-top: 10px;
    }
  }
}

.flot-placeholder-small{
  height:50px;
}

.wrap-small-chart{
  position: relative;
  padding-top: 20px;
  .h1{
    position: absolute;
    top:0;
    z-index:1;
  }
}

.chart-gauge{
  &__wrapper{
    position: relative;
    display:inline-block;
    height:110px;
    overflow:hidden;
    //background:red;
  }
  &__title{
    position: absolute;
    display:block;
    top:70%;
    left:50%;
    text-align: center;
    padding:0 0;
    transform:translate(-50%, -50%);
    font-size: 11px;
    line-height: 1;
    b{
      font-size: 14px;
    }
  }
}

.ct-series-a .ct-slice-donut{
  stroke:#99CBED;
  fill: transparent;
  &:hover{
    cursor: pointer;
  }
}
.ct-series-b .ct-slice-donut{
  stroke:#1C84C6;
  fill: transparent;
  &:hover{
    cursor: pointer;
  }
}

.card{
  &__title{
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 2px solid $stroke;
    margin-bottom: 15px;
  }
  &--grey{
    background:tint($grey, 97%);
    border:1px solid $stroke;
    padding:10px;
    margin-bottom: 15px;
    .card__title{
      border-bottom: none;
      margin-bottom: 5px;
      >a{
        margin-left: 10px;
      }
    }
    @media(min-width:991px){
      min-height:300px;
    }
  }
}

.top-list{
  list-style:none;
  padding:0;
  .progress{
    margin-top: 2px;
  }
}

.progress-bar-blue>.progress-bar{
  background: #81BBDE;
}

.chart-progress-indicator{
  font-weight: bold;
  float:right;
  color:tint($grey, 30%);
  
  &__number{
    padding:0 10px;
  }
  &--increase{
    &:before{
      content:"\f148";
      font-family: 'FontAwesome';
    }
    & .chart-progress-indicator__number{
      background: #FFBDBD;
    }
  }
}

.rank{
  position: relative;
  padding-left: 40px;
  &__number{
    position: absolute;
    left:0;
    top:0;
    display:inline-block;
    text-align: center;
    background:#99CBED;
    width: 35px;
    font-size: 10px;
    padding:0.6em 0;
    border-radius:50%;
    &:first-letter{
      font-size: 14px;
      font-weight: 800;
    }
  }
  &__person{
    font-size: 14px;
  }
  &__position{
    font-size: 12px;
    color:tint($grey,50%);
    margin-top: -5px;
    margin-bottom: 5px;
  }
  &__record{
    font-size: 12px;
    font-weight: bold;
    &__label{
      font-weight: 600;
      margin-bottom: -5px;
      color:tint($grey,50%);
    }
    &__time{
      font-weight: normal;
      color:tint($grey,50%);
      span{
        color:$grey;
      }
    }
    &__stats{
      i{
        color:tint($grey,50%);
      }
    }
  }
}
.rank--rest{
  display:inline-block;
  padding:0;
  list-style:none;
  vertical-align: top;
}
.rank--top{
  display:inline-block;
  padding-right: 10px;
  .rank__person{
    font-size: 18px;
  }
  .rank__position{
    font-size: 12px;
    color:tint($grey,50%);
    margin-top: -5px;
    margin-bottom: 5px;
  }
  .rank__record{
    font-size: 18px;
    font-weight: bold;
    .rank__record__label{
      font-size: 11px;
      color:$grey;
      font-weight: 600;
      margin-bottom: -5px;
    }
    .rank__record__time{
      font-size: 11px;
      font-weight: 200;
      span{
        font-size: 18px;
      }
    }
  }
}

#piechart{
  height:175px;
  width: 175px;
  display:inline-block;
  vertical-align: middle;
  margin-right: 5px;
  margin-bottom: 5px;
}
#piechart__legend{
  display:inline-block;
  vertical-align: middle;
}


@media(max-width:767px){
  #mainNav{
    width:100%;
  }
  .navbar-custom-collapse{
    width: 100%;
  }
}

@media(max-width:390px){
  .navbar-brand{
    font-size: 1.2em!important;
  }
}

.navbar-header>button{
  position: relative;
  .badge{
    position: absolute;
    right:0;
    bottom:0;
    font-size: 0.6em;
  }
}

.navbar-default{
  .navbar-toggle{
    background: $brand-primary;
    border-color:$brand-primary;
    color:#fff;
    margin-top: 25px;
    &:hover,
    &:focus{
      background: tint($brand-primary,20%);
      border-color: tint($brand-primary,20%);
    }
  }
  .navbar-brand{
    float:none;
    padding-left: 15px!important;
  }
}
#stupid-hack{
  margin-top: -20px;
  margin-left: 20px;
  padding-bottom: 15px;
}

.the-main-chart{
  &__title-wrapper{
    display:flex;
    flex-wrap:wrap;
    margin: 20px 0;
  }
  &__title{
    flex-grow:1;
    margin-top:3px;
    margin-right: 10px;
  }
}

View Compiled

$("#hamburger-btn").on('click',function(e){
  e.preventDefault();
  $(this).closest('.flex-side').toggleClass('collapsed');
  console.log($(this).closest('.flex-side'));
});

// jQuery Flot Chart
var visits = [[1, 50], [2, 40], [3, 45], [4, 23],[5, 55],[6, 65],[7, 61],[8, 70],[9, 65],[10, 75],[11, 57],[12, 59]];
var visitors = [[1, 25], [2, 50], [3, 23], [4, 48],[5, 38],[6, 40],[7, 47],[8, 55],[9, 43],[10,50],[11,47],[12, 39]];
var bigChartOptions = {
  series: {
    lines: { show: true,
      lineWidth: 1,
      fill: true, 
      fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] }
    },
    points: { show: true, 
      lineWidth: 2,
      radius: 3
    },
    shadowSize: 0,
    stack: true
  },
  grid: { hoverable: true, 
    clickable: true, 
    tickColor: "#EBEDEF",
    borderWidth: 0
  },
  legend: {
    labelBoxBorderColor: "#fff"
  },  
  colors: ["#30a0eb"],
  xaxis: {
    ticks: [[1, "JAN"], [2, "FEB"], [3, "MAR"], [4,"APR"], [5,"MAY"], [6,"JUN"], 
      [7,"JUL"], [8,"AUG"], [9,"SEP"], [10,"OCT"], [11,"NOV"], [12,"DEC"]],
    font: {
      size: 10,
      family: "Open Sans, Arial",
      variant: "small-caps",
      color: "#697695"
    }
  },
  yaxis: {
    ticks:3, 
    tickDecimals: 0,
    font: {size:10, color: "#9da3a9"}
  }
}

var smallChartOptions = {
  series: {
    lines: { 
      show: true,
      lineWidth: 1,
      fill: true, 
      fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] }
    },
    points: { show: false },
    shadowSize: 0
  },
  xaxis: {
    show:false
  },
  yaxis: {
    show:false
  },
  colors: ["#30a0eb"],
  grid: { borderWidth: 0 },
};


var plot1 = $.plot($("#IQ-interaction .flot-placeholder"),
  [ visits], bigChartOptions);
var plot2 = $.plot($("#drop-off-rate"),[visitors], smallChartOptions);


$('#successful-interaction-chart').easyPieChart({
  barColor: '#71B7E6',
  trackColor: '#D6DBDF',
  scaleLength: 0,
  size: 108,
  lineWidth: 5
});

var test = new Chartist.Pie('.ct-chart', {
  series: [135,90]}, {
  donut: true,
  width: '140px',
  height: '140px',
  donutWidth: 20,
  startAngle: 270-22.5,
  total: 360,
  showLabel: false
}).on('created',function(){
  $('.ct-series-b .ct-slice-donut').tooltip({title: '123 sessions (Agent Expert)', container: 'body'});
  $('.ct-series-a .ct-slice-donut').tooltip({title: '800 sessions (Agent IQ)', container: 'body'});
});
 
$('#container').highcharts({
  chart: {
    style: {
      fontFamily: "'Open Sans', sans-serif"
    }
  }, 
  credits:{enabled: false} ,
  series: [{
    type: "treemap",
    borderColor: "#FFFFFF",
    borderWidth: 5,
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    dataLabels:{
      crop: true,
      overflow: "justify",
      padding:5,
      reserveSpace: false,
      style:{
        "color": "#34495E",
        "fontSize": "12px",
        "fontWeight": "normal",
        "textShadow": "none"
      }
    },
    states:{
      hover:{
        enabled: false
      }
    },
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: false
      }
    }],
    data: [{
      id: 'A',
      name: 'Apple',
      color: "#B5E8E0"
    }, {
      id: 'S',
      name: 'Samsung',
      color: "#C5EAF7"
    }, {
      id: 'N',
      name: 'Nokia',
      color: '#FFD3A6'
    }, {
      id: 'B',
      name: 'Blackberry',
      color: '#FFC5C5'
    }, {
      id: 'H',
      name: 'HTC',
      color: '#C9D8F2'
    }, {
      name: 'iPhone 5 (A1429 - iOS 7)',
      parent: 'A',
      value: 4
    }, {
      name: 'iPhone 4S (A1429 - iOS 7)',
      parent: 'A',
      value: 2
    }, {
      name: 'GT-19505 Galaxy S4',
      parent: 'S',
      value: 2
    }, {
      name: 'GT-19305  Galaxy SIII LTE',
      parent: 'S',
      value: 2
    }, {
      name: 'Lumia 930 (RM-1045)',
      parent: 'N',
      value: 2
    }, {
      name: 'Lumia 640',
      parent: 'N',
      value: 2
    }, {
      name: 'Lumia 640 (Win 8.1)',
      parent: 'N',
      value: 1
    }, {
      name: 'BlackBerry  Leap 4G',
      parent: 'B',
      value: 2
    }, {
      name: 'HTC One (M8)',
      parent: 'H',
      value: 1
    }, {
      name: 'HTC One (M9)',
      parent: 'H',
      value: 1
    }]
  }],
  title: false
});

var pieChart = $.plot($('#piechart'),
  [
    { label: "&nbsp; 20% Root Causes Defined",  data: 20, color: '#AED6F1'},
    { label: "&nbsp; 80% Root Causes Defined",  data: 80, color: '#71B7E6'}
  ] , {
  series: {
    pie: {
      show: true,
      stroke: {width: 0}
    }
  },
  legend:{
    position: "sw",
    container: $('#piechart__legend')
  }
});

This Pen is owned by Felix on CodePen.

See more by @felixsusanto on CodePen

External CSS

https://ppl.wdsserve.com/1.0/ppl/ppl.min.css

External CSS

External JavaScript