173 lines
7.5 KiB
Twig
173 lines
7.5 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Rapport{% endblock %}
|
|
|
|
|
|
|
|
{% block content %}
|
|
|
|
<!-- az-header -->
|
|
<div class="az-content">
|
|
<div class="container">
|
|
<div class="az-content-body d-flex flex-column">
|
|
|
|
|
|
<div class="az-content-breadcrumb">
|
|
<span>Rapport</span>
|
|
<span>Détail</span>
|
|
</div>
|
|
<h2 class="az-content-title">Rapport</h2>
|
|
<div class="az-content-label mg-b-5"></div>
|
|
|
|
<div class="wd-500 mg-b-20">
|
|
<select class="form-control">
|
|
{% for investigation in listeInvestigations %}
|
|
<option value="{{ investigation.id }}"> {{ investigation.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="card card-dashboard-one">
|
|
<div class="card-header">
|
|
<div>
|
|
<label class="mg-b-0">Total des views</label>
|
|
<h2>13,956</h2>
|
|
</div>
|
|
<div>
|
|
<label class="mg-b-0">Total des reponses</label>
|
|
<h2>33.50%</h2>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn active">Excel</button>
|
|
<button class="btn">PDF</button>
|
|
<button class="btn">CSV</button>
|
|
</div>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body">
|
|
<!-- card-body-top -->
|
|
<div class="flot-chart-wrapper">
|
|
<div id="flotChart" class="flot-chart"></div>
|
|
</div>
|
|
<!-- flot-chart-wrapper -->
|
|
</div>
|
|
<!-- card-body -->
|
|
</div>
|
|
<!-- card -->
|
|
|
|
|
|
<div class="card card-dashboard-five">
|
|
<div class="card-header">
|
|
<h6 class="card-title">Question 1</h6>
|
|
<span class="card-text">Tells you where your visitors originated from, such as search engines, social networks or website referrals.</span>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body row row-sm">
|
|
<div class="col-md-6">
|
|
<div class="az-traffic-detail-item">
|
|
<div>
|
|
<span>Organic Search</span>
|
|
<span>1,320 <span>(25%)</span></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-purple wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- progress -->
|
|
</div>
|
|
<div class="az-traffic-detail-item">
|
|
<div>
|
|
<span>Email</span>
|
|
<span>987 <span>(20%)</span></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-primary wd-20p" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- progress -->
|
|
</div>
|
|
<div class="az-traffic-detail-item">
|
|
<div>
|
|
<span>Referral</span>
|
|
<span>2,010 <span>(30%)</span></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-info wd-30p" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- progress -->
|
|
</div>
|
|
<div class="az-traffic-detail-item">
|
|
<div>
|
|
<span>Other</span>
|
|
<span>400 <span>(10%)</span></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-gray-500 wd-10p" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- progress -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- card-body -->
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% block javascripts %}
|
|
<script src="{{ asset('assets/js/chart.flot.sampledata.js') }}"></script>
|
|
<script src="{{ asset('assets/js/dashboard.sampledata.js') }}"></script>
|
|
<script src="{{ asset('assets/lib/chart.js/Chart.bundle.min.js') }}"></script>
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
'use strict'
|
|
|
|
var plot = $.plot('#flotChart', [{
|
|
data: flotSampleData3,
|
|
color: '#007bff',
|
|
lines: {
|
|
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
|
|
}
|
|
},{
|
|
data: flotSampleData4,
|
|
color: '#560bd0',
|
|
lines: {
|
|
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
|
|
}
|
|
}], {
|
|
series: {
|
|
shadowSize: 0,
|
|
lines: {
|
|
show: true,
|
|
lineWidth: 2,
|
|
fill: true
|
|
}
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
labelMargin: 8
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
min: 0,
|
|
max: 100,
|
|
ticks: [[0,''],[20,'20K'],[40,'40K'],[60,'60K'],[80,'80K']],
|
|
tickColor: '#eee'
|
|
},
|
|
xaxis: {
|
|
show: true,
|
|
color: '#fff',
|
|
ticks: [[25,'OCT 21'],[75,'OCT 22'],[100,'OCT 23'],[125,'OCT 24']],
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
{% endblock %} |