<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/hougasian/pen/vewKaX" />
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css'><link rel='stylesheet prefetch' href='https://codepen.io/hougasian/pen/zEQBJV.css'><link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css'>
<style class="cp-pen-styles">@charset "UTF-8";
body {
background: #242418;
color: lightgrey;
margin: 2%;
}
body .menu.fixed {
background: #332 !important;
}
.rotated, .stage .title {
bottom: 0;
position: absolute;
transform: rotate(-90deg);
transition: .2s;
width: 100%;
}
.ui.container.dashboard.grid {
margin-top: 3rem;
}
.ui.container.dashboard.grid .buttons {
margin-bottom: -1rem;
}
.ui.container.dashboard.grid .buttons .button {
transition: .2s;
}
.ui.container.dashboard.grid .buttons .button .icon {
padding: 0;
}
.ui.container.dashboard.grid .buttons .button:hover {
background: rgba(255, 255, 255, 0.5) !important;
}
.ui.container.dashboard.grid .buttons .button:hover .icon {
color: white;
}
.ui.container.dashboard.grid .divider {
color: grey;
margin: 1rem -1rem;
}
.ui.container.dashboard.grid .column {
display: flex;
padding: 0 !important;
}
.statistics {
flex-grow: 1;
}
.statistic {
align-self: center;
flex-grow: 1 !important;
}
.statistic.positive .label,
.statistic.positive .value {
color: green !important;
}
.statistic.negative .label,
.statistic.negative .value {
color: #ff9cce !important;
}
.statistic .positive,
.statistic .olive + span {
color: green;
}
.statistic .neutral {
color: #332;
}
.statistic .negative,
.statistic .pink + span {
color: #ff9cce;
}
.statistic .value + .label {
padding-top: 1rem;
}
.statistic > .label {
color: grey !important;
}
.statistic .mini.leaf {
margin-left: -.5rem !important;
}
.statistic.left.floated {
border-right: 1px solid #332;
}
.statistic.left.floated > .value {
color: white;
}
.statistic.left.floated .label {
color: grey;
}
.chart {
padding-left: 1rem;
}
.chart .ct-label {
color: grey;
}
.chart text {
fill: white;
font-size: 100%;
}
.chart line {
stroke: dimgrey;
}
.ct-legend {
color: grey;
display: flex;
font-size: 80%;
justify-content: center;
padding: 1rem;
text-transform: capitalize;
z-index: 10;
}
.ct-legend:before {
color: #505050;
content: "Click to toggle →";
padding-right: 1rem;
}
.ct-legend li {
cursor: pointer;
display: inline-block;
margin-right: 1rem;
padding-left: 2rem;
position: relative;
}
.ct-legend li:before {
border: 1px solid transparent;
border-radius: .05rem;
content: "";
height: 1rem;
left: 0;
position: absolute;
transition: .2s;
width: 1rem;
}
.ct-legend li.inactive:before {
background: transparent;
}
.ct-legend.ct-legend-inside {
position: absolute;
right: 0;
top: 0;
}
.ct-legend .ct-series-0:before {
background-color: #d70206;
border-color: #d70206;
}
.ct-legend .ct-series-1:before {
background-color: #f05b4f;
border-color: #f05b4f;
}
.ct-legend .ct-series-2:before {
background-color: #f4c63d;
border-color: #f4c63d;
}
.ct-legend .ct-series-3:before {
background-color: #d17905;
border-color: #d17905;
}
.ct-legend .ct-series-4:before {
background-color: #453d3f;
border-color: #453d3f;
}
.ct-legend .ct-series-5:before {
background-color: #59922b;
border-color: #59922b;
}
.ct-legend .ct-series-6:before {
background-color: #0544d3;
border-color: #0544d3;
}
.ct-legend .ct-series-7:before {
background-color: #6b0392;
border-color: #6b0392;
}
.ct-legend .ct-series-8:before {
background-color: #f05b4f;
border-color: #f05b4f;
}
.ct-legend .ct-series-9:before {
background-color: #dda458;
border-color: #dda458;
}
.ct-legend .ct-series-10:before {
background-color: #eacf7d;
border-color: #eacf7d;
}
.ct-legend .ct-series-11:before {
background-color: #86797d;
border-color: #86797d;
}
.ct-legend .ct-series-12:before {
background-color: #b2c326;
border-color: #b2c326;
}
.ct-legend .ct-series-13:before {
background-color: #6188e2;
border-color: #6188e2;
}
.ct-legend .ct-series-14:before {
background-color: #a748ca;
border-color: #a748ca;
}
.ui.segment {
background: transparent;
border: none;
border-radius: 0 !important;
box-shadow: none;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
padding: 0;
height: 100%;
width: 100%;
}
.stage {
color: grey;
cursor: pointer;
height: 20rem;
position: relative;
transition: .2s;
background: #1e1e14;
width: 3rem;
}
.stage .title {
padding: 1rem;
}
.stage .title input[type=range] {
display: none;
}
.stage .title input[type=range] + h3 {
margin-top: -1rem;
padding-top: 1rem;
}
.stage .title h3 {
white-space: nowrap;
}
.stage .title h3 span {
display: none;
}
.stage > .chart,
.stage > .content {
display: none;
}
.stage .right.angle.icon,
.stage .remove.icon {
left: 1rem;
top: .5rem;
position: absolute;
transition: 2s;
}
.stage .remove.icon:not(.right) {
color: #ff9cce !important;
}
.stage:not(:first-of-type) {
border-left: 1px solid #332;
}
.stage.active {
background: rgba(51, 51, 34, 0.2);
width: 100%;
}
.stage.active input {
display: flex;
}
.stage.active .chart,
.stage.active .content {
display: flex;
height: 100%;
width: 100%;
}
.stage.active .chart {
flex-direction: column;
}
.stage.active .title {
border-bottom: 1px solid #332;
display: flex;
justify-content: flex-end;
padding: 1rem;
text-align: end;
transform: rotate(0deg);
}
.stage.active .title h3 {
color: white;
padding-right: 1rem;
}
.stage.active .title h3 span {
display: inline-block;
}
.stage.active .title h3 > span {
border-right: 1px solid #4d4d4d;
color: #4d4d4d;
margin-right: .5rem;
padding-right: .5rem;
}
input[type=range] {
-webkit-appearance: none;
background-color: #676767;
height: .3rem;
margin-top: 2.5rem;
margin-right: 2rem;
width: 100%;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: goldenrod;
border: 2px solid #332;
border-radius: 50%;
cursor: pointer;
display: block;
height: 1.5rem;
position: relative;
width: 1.5rem;
}
input[type=range]:focus {
outline: none;
}
</style></head><body>
<!-- menu -->
<div class="ui top fixed inverted icon menu main">
<div class="item">
<div class="ui avatar image">
<img src="https://avatars2.githubusercontent.com/u/6231956?v=3&s=460">
</div>
<div class="content">
<div class="header">
Hello Kevin
</div>
</div>
</div>
<div class="search item">
<div class="ui transparent inverted icon input">
<input type="text" placeholder="Type to search...">
<i class="search inverted link icon"></i>
</div>
</div>
<div class="right menu primary">
<a class="item">
Agents
</a>
<a class="item">
Agencies
</a>
<a class="ui dropdown item">
Businesses
<i class="angle down icon"></i>
<div class="inverted menu">
<div class="item">
<i class="building icon"></i>
Businesses Type 1
</div>
<div class="item">
<i class="building icon"></i>
Businesses Type 2
</div>
</div>
</a>
<a class="item">
Contracts
</a>
<a class="item" href="#">
<i class="dashboard icon"></i>
</a>
</div>
</div>
<div class="ui container dashboard grid">
<div class="ui horizontal divider">
<div class="ui basic small grey buttons">
<button class="ui icon button graph">
<i class="bar chart icon"></i>
</button>
<button class="ui icon button desktop">
<i class="desktop icon"></i>
</button>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui segment">
<div class="stage">
<i class="right angle remove icon"></i>
<div class="ct chart"></div>
<div class="rotated title">
<h3>Contract Status</h3>
</div>
</div>
<div class="stage active">
<i class="right angle remove icon"></i>
<div class="content">
<div class="ui huge left floated statistic">
<div class="value">
10,000
</div>
<div class="label">
2017 total
</div>
<div class="label">
<i class="olive up arrow icon"></i>
<span>999</span>
<i class="pink down arrow icon"></i>
<span>33</span>
</div>
</div>
<div class="ui small grey statistics">
<div class="statistic">
<div class="value">
300
<small class="positive">
<i class="olive mini leaf icon"></i>
3%
</small>
</div>
<div class="label">
North
<i class="olive up arrow icon"></i>
<span>9</span>
<i class="pink down arrow icon"></i>
<span>3</span>
</div>
</div>
<div class="statistic">
<div class="value">
200
<small class="positive">
<i class="olive mini leaf icon"></i>
2%
</small>
</div>
<div class="label">
South
<i class="olive up arrow icon"></i>
<span>9</span>
<i class="pink down arrow icon"></i>
<span>3</span>
</div>
</div>
<div class="statistic">
<div class="value">
100
<small class="neutral">
<i class="mini leaf icon"></i>
0%
</small>
</div>
<div class="label">
East
<i class="olive up arrow icon"></i>
<span>9</span>
<i class="pink down arrow icon"></i>
<span>3</span>
</div>
</div>
<div class="statistic">
<div class="value">
400
<small class="negative">
<i class="pink mini leaf icon"></i>
10%
</small>
</div>
<div class="label">
West
<i class="olive up arrow icon"></i>
<span>9</span>
<i class="pink down arrow icon"></i>
<span>3</span>
</div>
</div>
</div>
</div>
<div class="rotated title">
<h3>Contract by Region</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui segment">
<div class="stage">
<i class="right angle remove icon"></i>
<div class="app chart"></div>
<div class="title">
<h3>Applications</h3>
</div>
</div>
<div class="stage active">
<i class="right angle remove icon"></i>
<div class="content">
<div class="ui small grey statistics">
<div class="statistic">
<div class="value">
100
</div>
<div class="label">
Initial
</div>
</div>
<div class="statistic">
<div class="value">
200
</div>
<div class="label">
paperwork<br>
mailed
</div>
</div>
<div class="statistic">
<div class="value">
100
</div>
<div class="label">
FUCC
</div>
</div>
<div class="statistic">
<div class="value">
400
<span class="negative">0</span>
</div>
<div class="label">
contract <br>
returned <br>
<span class="negative">incomplete</span>
</div>
</div>
<div class="statistic">
<div class="value">
400
<span class="negative">30</span>
</div>
<div class="label">
sent to <br>
carrier <br>
<span class="negative">returned <br>incomplete</span>
</div>
</div>
<div class="statistic">
<div class="value">
400
</div>
<div class="label">
waiting on <br>
certification
</div>
</div>
<div class="statistic">
<div class="value">
400 <span class="negative">100</span>
</div>
<div class="label">
appointed <br>
<span class="negative">terminated</span>
</div>
</div>
<div class="statistic">
<div class="value">
50
</div>
<div class="label">
lost
</div>
</div>
</div>
</div>
<div class="title">
<input type="range" min="1" max="52" value="45">
<h3><span>Viewing week <span class="week"></span></span>Weekly Stats</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js'></script><script src='https://codepen.io/hougasian/pen/zEQBJV.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/chartist-plugin-legend/0.6.1/chartist-plugin-legend.min.js'></script>
<script >function reDraw() {
setTimeout(function() {
$.each(charts, function(i, chart) {
chart.update();
});
}, 200);
}
$('.stage').on('click', function() {
var $this = $(this);
$this.addClass('active');
$this.siblings().each(function(){
$(this).removeClass('active') ;
});
reDraw();
});
$('.button.graph').on('click', function() {
$('.stage').removeClass('active');
$('.row .stage:first-of-type').addClass('active');
reDraw();
});
$('.button.desktop').on('click', function() {
$('.stage').removeClass('active');
$('.row .stage:last-of-type').addClass('active');
reDraw();
});
var weekNo = $('span.week');
weekNo.text($('input[type=range]').val());
$('input[type=range]').on('change', function() {
var $this = $(this);
weekNo.text($this.val());
});
var barData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
series: [
{ 'name': 'returned', 'data': [1000, 1500, 2000 ,2500, 500, 1100, 1200, 1300, 1400]},
{ 'name': 'incomplete', 'data': [500, 600,700 ,800, 900,1000, 1100, 1000, 1200, 1100, 1300, 1400]},
{ 'name': 'appointed', 'data': [600, 200, 300 ,400, 500,600, 700,800, 900, 1000, 1500,1200]},
{ 'name': 'sent', 'data': [100, 200, 300 ,400, 500, 2000, 700, 800, 900, 1000, 1100, 1200] },
{ 'name': 'mailed', 'data': [1000, 1500, 2000 , 1500, 2500, 1100, 1200, 1300, 1400]},
{ 'name': 'suspended', 'data': [500, 600,700 ,800, 900, 1000, 1100, 1000, 1200, 1100, 1300, 1400]},
{ 'name': 'terminated', 'data': [600, 200, 300 ,400, 500, 600, 2500, 2000, 900, 1000, 1500, 1200]},
{ 'name': 'lost', 'data': [100, 200, 300 ,400, 500, 600, 700, 800, 2000, 1000, 1100, 2200]}
]
},
lineData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
series: [
{ 'name': 'incomplete', 'data': [500, 600,700 ,800, 900,1000, 1100, 1000, 1200, 1100, 1300, 1400]},
{ 'name': 'appointed', 'data': [600, 200, 300 ,400, 500,600, 700,800, 900, 1000, 1500,1200]},
{ 'name': 'terminated', 'data': [600, 200, 300 ,400, 500, 600, 2500, 2000, 900, 1000, 1500, 1200]},
{ 'name': 'lost', 'data': [100, 200, 300 ,400, 500, 600, 700, 800, 2000, 1000, 1100, 2200]}
]
},
barOptions = {
width: '100%',
height: '200px',
fullWidth: true,
chartPadding: {
bottom: 20,
left: 20,
right: 20,
top: 20
},
seriesBarDistance: 10,
reverseData: false,
horizontalBars: false,
axisY: {
offset: 40
},
plugins: [
Chartist.plugins.legend()
]
},
lineOptions = {
low: 0,
showArea: true,
width: '100%',
height: '200px',
fullWidth: true,
chartPadding: {
bottom: 20,
right: 20,
top: 20
},
axisY: {
offset: 40
},
plugins: [
Chartist.plugins.legend()
]
};
var ct = [],
app = [],
charts = [
ct = new Chartist.Bar('.ct.chart', barData, barOptions),
app = new Chartist.Line('.app.chart', lineData, lineOptions)
];
//# sourceURL=pen.js
</script>
</body></html>
