<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.highcharts.com/highcharts.js"></script>
<!--
<script src="https://code.highcharts.com/modules/exporting.js"></script>
-->
<style>
.grafico {
min-width: 310px;
max-width: 400px;
height: 280px;
margin: 0 auto
}
.main-header {
font-size: x-large;
color : #888;
font-family: Verdana;
margin-bottom: 20px;
}
.destaque {
color: #f88;
font-weight: bolder;
}
</style>
<div class="container">
<div class="row">
<div class="main-header">Coc<span class="destaque">KPI</span>t</div>
</div>
<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<i class="fa fa-list-ol fa-5x"></i>
</div>
<div class="col-xs-6 text-right">
<p class="announcement-heading">4</p>
<p class="announcement-text">Investidas</p>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
Ver lista
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<i class="fa fa-usd fa-5x"></i>
</div>
<div class="col-xs-6 text-right">
<p class="announcement-heading"> R$ 950 mil</p>
<p class="announcement-text">Valor investido</p>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
Detalhes
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-warning">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<i class="fa fa-line-chart fa-5x"></i>
</div>
<div class="col-xs-6 text-right">
<p class="announcement-heading"> 2,3 meses</p>
<p class="announcement-text">CAC Recovery Time</p>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
Detalhes
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-success">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<i class="fa fa-money fa-5x"></i>
</div>
<div class="col-xs-6 text-right">
<p class="announcement-heading"> R$ 250 mil</p>
<p class="announcement-text">Disponível <i class=""></i> </p>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer announcement-bottom">
<div class="row">
<div class="col-xs-6">
Detalhes
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6">
<h3>Lista de investidas</h3>
<table class="table table-condensed table-bordered table-hover small">
<thead>
<tr>
<th style="width:80px;">.</th>
<th>Nome</th>
<th>Valor investido</th>
<th>CAC-RT</th>
<th>CAC</th>
<th>CAC/LTV</th>
<th>Churn</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#"> <i class="glyphicon glyphicon-dashboard"></i></a>
<a href="#"> <i class="glyphicon glyphicon-eye-open"></i></a>
<a href="#"> <i class="glyphicon glyphicon-warning-sign"></i></a>
</td>
<td>
Investida 1
</td>
<td>
R$ 350 mil
</td>
<td>
4 meses
</td>
<td>
R$ 291,75
</td>
<td>3,72</td>
<td>
3,65%
</td>
</tr>
<tr class="danger">
<td>
<a href="#"> <i class="glyphicon glyphicon-dashboard"></i> </a>
<a href="#"> <i class="glyphicon glyphicon-eye-open"></i> </a>
<a href="#"> <i class="glyphicon glyphicon-warning-sign"></i></a>
</td>
<td>
Investida 2
</td>
<td>R$ 270 mil</td>
<td>7,8 meses</td>
<td>R$ 1307,32</td>
<td>2,61</td>
<td>8,45%</td>
</tr>
<tr class="info">
<td>
<a href="#"> <i class="glyphicon glyphicon-dashboard"></i> </a>
<a href="#"> <i class="glyphicon glyphicon-eye-open"></i> </a>
<a href="#"> <i class="glyphicon glyphicon-warning-sign"></i></a>
</td>
<td>
Investida 3
</td>
<td>R$ 125 mil</td>
<td>2,5 meses</td>
<td>R$ 312,45</td>
<td>9,21</td>
<td>2,5%</td>
</tr>
<tr >
<td>
<a href="#"> <i class="glyphicon glyphicon-dashboard"></i> </a>
<a href="#"> <i class="glyphicon glyphicon-eye-open"></i> </a>
<a href="#"> <i class="glyphicon glyphicon-warning-sign"></i></a>
</td>
<td>
Investida 4
</td>
<td>R$ 205 mil</td>
<td>7,1 meses</td>
<td>R$ 115,75</td>
<td>6,27</td>
<td>(n/d)</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<div id='grafico1' class="grafico"></div>
</div>
<div class="col-md-6">
<div id='grafico2' class="grafico"></div>
</div>
<div class="col-md-6">
<div id='grafico3' class="grafico"></div>
</div>
<div class="col-md-8">
<h3>Mensagens</h3>
<table class="table table-condensed table-bordered table-hover small">
<thead>
<tr>
<th style="width:30px;">.</th>
<th>Origem</th>
<th>Título</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr class="text-danger">
<td>
<i class="glyphicon glyphicon-warning-sign "></i>
</td>
<td>
Sistema - Alerta
</td>
<td>
Valor gasto acima do esperado (investida 4)
</td>
<td>
<a href="#"> <i class="glyphicon glyphicon-eye-open"></i></a>
<a href="#"> <i class="glyphicon glyphicon-arrow-right"></i> </a>
</td>
</tr>
<tr class="text-info">
<td>
<i class="glyphicon glyphicon-info-sign"></i>
</td>
<td>
Sistema - Sugestão
</td>
<td>
Sugestão de investimento (R$ 250 mil)
</td>
<td>
<a href="#"> <i class="glyphicon glyphicon-eye-open"></i></a>
<a href="#"> <i class="glyphicon glyphicon-arrow-right"></i> </a>
</td>
</tr>
<tr class="text-info">
<td>
<i class="glyphicon glyphicon-user"></i>
</td>
<td>
Investida 3 - Armando Souza
</td>
<td>
Ajustes no plano de ação
</td>
<td>
<a href="#"> <i class="glyphicon glyphicon-eye-open"></i></a>
<a href="#"> <i class="glyphicon glyphicon-arrow-right"></i> </a>
</td>
</tr>
<tr class="text-info">
<td>
<i class="glyphicon glyphicon-user"></i>
</td>
<td>
Investida 1 - Claudia Santos
</td>
<td>
Pauta da próxima reunião
</td>
<td>
<a href="#"> <i class="glyphicon glyphicon-eye-open"></i></a>
<a href="#"> <i class="glyphicon glyphicon-arrow-right"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
document.addEventListener("DOMContentLoaded", function(event) {
Highcharts.chart('grafico1', {
credits: {
enabled: false
},
title: {
text: 'Performance de CAC "ancorado"'
},
subtitle: {
text: 'evolução do CAC %'
},
yAxis: {
title: {
text: 'CAC %'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 1
}
},
series: [{
name: 'Investida 1',
data: [23, 27, 32, 26, 25, 27, 22, 19]
}, {
name: 'Investida 2',
data: [45, 49, 43, 41, 42, 41, 38, 34]
}, {
name: 'Investida 3',
data: [43, 58, 51, 52, 51, 60, 62, 65]
}, {
name: 'Investida 4',
data: [null, null, 23, 15, 19, 21, 27, 30]
}]
});
Highcharts.chart('grafico2', {
chart: {
type: 'areaspline'
},
credits: {
enabled: false
},
title: {
text: 'Performance de Churn relativo'
},
subtitle: {
text: 'evolução do Churn %'
},
yAxis: {
title: {
text: 'Churn %'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 1
}
},
series: [{
name: 'Investida 1',
data: [15, 27, 32, 26, 25, 20]
}, {
name: 'Investida 2',
data: [43, 41, 42, 41, 38, 34]
}, {
name: 'Investida 3',
data: [51, 52, 51, 60, 62, 65]
}, {
name: 'Investida 4',
data: [null, null, 29, 22, 19, 21]
}]
});
Highcharts.chart('grafico3', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Runway overview'
},
xAxis: {
categories: ['Investida 1', 'Investida 2', 'Investida 3', 'Investida 4']
},
yAxis: {
title: {
text: 'valor em R$'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Ultrapassou',
data: [0,0,0,15],
color : '#FA5858'
}, {
name: 'Disponível',
data: [150, 130, 25, 0],
color : '#58FA58'
}, {
name: 'Gasto',
data: [100, 140, 100, 205],
color : '#FE9A2E'
}]
});
});
