<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/felixsusanto/pen/MKYvvm?depth=everything&order=popularity&page=8&q=dashboard&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://ppl.wdsserve.com/1.0/ppl/ppl.min.css'>
<style class="cp-pen-styles">/*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) {
.navbar-right--wrapper .user {
position: relative;
top: 8px;
}
.navbar-right--wrapper .settings {
float: right;
}
}
.wds-navbar-1 {
border-bottom: 1px solid tint(#34495E, 80%);
margin-bottom: 0;
}
.wds-navbar-1 .navbar-header .navbar-brand span {
padding-left: 0;
}
.navbar-brand {
padding-left: 20px;
}
.notification {
position: relative;
top: 6px;
}
.notification .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-container .flex-side, .flex-container .flex-content {
padding: 10px 20px;
}
.flex-container .flex-side {
width: 280px;
background: tint(#34495E, 97%);
border-right: 1px solid tint(#34495E, 80%);
padding-right: 15px;
transition: width 0.3s;
}
.flex-container .flex-side .navside-topbar {
padding-bottom: 10px;
}
.flex-container .flex-side .collapsed-content {
opacity: 1;
visibility: visible;
transition: all 0.3s 0.3s;
}
.flex-container .flex-side.collapsed {
width: 70px;
}
.flex-container .flex-side.collapsed .collapsed-content {
opacity: 0;
visibility: hidden;
transition: all 0.001s 0s;
}
.flex-container .flex-content {
padding-left: 15px;
flex: 1;
}
@media (max-width: 610px) {
.flex-container {
flex-direction: column;
}
.flex-container .flex-content {
padding: 10px;
}
.flex-container .flex-side {
width: 100%;
border-right: none;
border-bottom: 1px solid tint(#34495E, 80%);
padding: 10px;
}
.flex-container .flex-side.collapsed {
width: inherit;
height: 60px;
}
}
/*END OF FLEXBOX*/
.flot-wrapper {
padding-left: 20px;
margin-bottom: 20px;
}
.flot-wrapper .y-axis {
width: 250px;
transform-origin: 0 0;
transform: rotateZ(-90deg) translateX(-100%) translateY(-100%);
}
.flot-wrapper .flot-placeholder {
width: 100%;
height: 250px;
text-align: center;
margin-bottom: 10px;
padding-left: 50px;
position: relative;
}
.fancy {
padding-left: 3em;
position: relative;
}
.fancy .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;
}
.donut-chart {
position: absolute;
left: 0;
}
.donut-chart__text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.donut-chart__number {
font-size: 32px;
font-weight: bold;
line-height: 1;
color: tint(#34495E, 30%);
}
.donut-chart__description {
font-size: 12px;
}
.donut-chart__wrapper {
padding-left: 110px;
min-height: 110px;
}
.inline-block {
display: inline-block;
}
.chart-title {
font-size: 18px;
font-weight: 200;
}
.legend {
font-size: 12px;
}
.legend__item {
display: inline-block;
background: #fff;
padding: 7px;
border: 1px solid tint(#34495E, 80%);
font-weight: 600;
margin-top: 3px;
}
.legend__description {
background: #71B7E6;
color: #fff;
padding: 0 5px;
margin-right: 3px;
}
@media (max-width: 991px) {
.secondary-chart .nested-cols-wrapper > div {
margin-top: 10px;
border-top: 1px solid tint(#34495E, 80%);
padding-top: 10px;
}
}
.flot-placeholder-small {
height: 50px;
}
.wrap-small-chart {
position: relative;
padding-top: 20px;
}
.wrap-small-chart .h1 {
position: absolute;
top: 0;
z-index: 1;
}
.chart-gauge__wrapper {
position: relative;
display: inline-block;
height: 110px;
overflow: hidden;
}
.chart-gauge__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;
}
.chart-gauge__title b {
font-size: 14px;
}
.ct-series-a .ct-slice-donut {
stroke: #99CBED;
fill: transparent;
}
.ct-series-a .ct-slice-donut:hover {
cursor: pointer;
}
.ct-series-b .ct-slice-donut {
stroke: #1C84C6;
fill: transparent;
}
.ct-series-b .ct-slice-donut:hover {
cursor: pointer;
}
.card__title {
font-weight: bold;
text-transform: uppercase;
padding-bottom: 5px;
border-bottom: 2px solid tint(#34495E, 80%);
margin-bottom: 15px;
}
.card--grey {
background: tint(#34495E, 97%);
border: 1px solid tint(#34495E, 80%);
padding: 10px;
margin-bottom: 15px;
}
.card--grey .card__title {
border-bottom: none;
margin-bottom: 5px;
}
.card--grey .card__title > a {
margin-left: 10px;
}
@media (min-width: 991px) {
.card--grey {
min-height: 300px;
}
}
.top-list {
list-style: none;
padding: 0;
}
.top-list .progress {
margin-top: 2px;
}
.progress-bar-blue > .progress-bar {
background: #81BBDE;
}
.chart-progress-indicator {
font-weight: bold;
float: right;
color: tint(#34495E, 30%);
}
.chart-progress-indicator__number {
padding: 0 10px;
}
.chart-progress-indicator--increase:before {
content: "\f148";
font-family: 'FontAwesome';
}
.chart-progress-indicator--increase .chart-progress-indicator__number {
background: #FFBDBD;
}
.rank {
position: relative;
padding-left: 40px;
}
.rank__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%;
}
.rank__number:first-letter {
font-size: 14px;
font-weight: 800;
}
.rank__person {
font-size: 14px;
}
.rank__position {
font-size: 12px;
color: tint(#34495E, 50%);
margin-top: -5px;
margin-bottom: 5px;
}
.rank__record {
font-size: 12px;
font-weight: bold;
}
.rank__record__label {
font-weight: 600;
margin-bottom: -5px;
color: tint(#34495E, 50%);
}
.rank__record__time {
font-weight: normal;
color: tint(#34495E, 50%);
}
.rank__record__time span {
color: #34495E;
}
.rank__record__stats i {
color: tint(#34495E, 50%);
}
.rank--rest {
display: inline-block;
padding: 0;
list-style: none;
vertical-align: top;
}
.rank--top {
display: inline-block;
padding-right: 10px;
}
.rank--top .rank__person {
font-size: 18px;
}
.rank--top .rank__position {
font-size: 12px;
color: tint(#34495E, 50%);
margin-top: -5px;
margin-bottom: 5px;
}
.rank--top .rank__record {
font-size: 18px;
font-weight: bold;
}
.rank--top .rank__record .rank__record__label {
font-size: 11px;
color: #34495E;
font-weight: 600;
margin-bottom: -5px;
}
.rank--top .rank__record .rank__record__time {
font-size: 11px;
font-weight: 200;
}
.rank--top .rank__record .rank__record__time 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;
}
.navbar-header > button .badge {
position: absolute;
right: 0;
bottom: 0;
font-size: 0.6em;
}
.navbar-default .navbar-toggle {
background: #3498DB;
border-color: #3498DB;
color: #fff;
margin-top: 25px;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background: tint(#3498DB, 20%);
border-color: tint(#3498DB, 20%);
}
.navbar-default .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;
}
.the-main-chart__title {
flex-grow: 1;
margin-top: 3px;
margin-right: 10px;
}
</style></head><body>
<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 & 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-->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.resize.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.5/chartist.min.js'></script><script src='https://code.highcharts.com/highcharts.js'></script><script src='https://code.highcharts.com/modules/treemap.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js'></script>
<script >$("#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: " 20% Root Causes Defined", data: 20, color: '#AED6F1'},
{ label: " 80% Root Causes Defined", data: 80, color: '#71B7E6'}
] , {
series: {
pie: {
show: true,
stroke: {width: 0}
}
},
legend:{
position: "sw",
container: $('#piechart__legend')
}
});
//# sourceURL=pen.js
</script>
</body></html>
