xxxxxxxxxx1
<div class="card mb-4 dashboard-client-info">2
<div class="card-body d-sm-flex">3
<div class="row w-100">4
<div class="col-md-1">5
6
<center>7
<img src="https://z9t4u9f6.stackpathcdn.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" class="dashboard-img" />8
</center>9
10
</div>11
<div class="col-md-11">12
<div class="dashboard-title">Test Snippet</div>13
<div class="dashboard-subtitle w-100">14
<small class="text-muted">15
Testing Snippet16
</small>17
</div>18
</div>19
</div>20
</div>21
</div>22
23
24
25
<div class="card mb-4">26
<div class="card-header">27
<i class="fas fa-rocket mr-2"></i> Accesso rapido28
</div>29
<div class="card-body">30
<div class="expand-collapsed-menu" style="text-align: right;"><i class="fas fa-expand-arrows-alt"></i></div>31
<div class="row w-100" style="margin: 0 auto;">32
33
<div class="col-lg-3">34
<div class="card text-white bg-primary mb-3 dashboard-card">35
<a href="#">36
<div class="card-body bg-primary dashboard-card-body">37
<div class="row">38
<div class="col-lg-3">39
<span class="dashboard-icon"><i class="fa fa-user"></i></span>40
</div>41
<div class="col-lg-9">42
Name 43
</div>44
</div> 45
</div>46
</a>47
</div>48
</div>49
50
<div class="col-lg-3">51
<div class="card text-white bg-primary mb-3 dashboard-card">52
<a href="#">53
<div class="card-body bg-primary dashboard-card-body">54
<div class="row">55
<div class="col-lg-3">56
<span class="dashboard-icon"><i class="fa fa-user"></i></span>57
</div>58
<div class="col-lg-9">59
Name 60
</div>61
</div> 62
</div>63
</a>64
</div>65
</div>66
67
<div class="col-lg-3">68
<div class="card text-white bg-primary mb-3 dashboard-card">69
<a href="#">70
<div class="card-body bg-primary dashboard-card-body">71
<div class="row">72
<div class="col-lg-3">73
<span class="dashboard-icon"><i class="fa fa-user"></i></span>74
</div>75
<div class="col-lg-9">76
Name 77
</div>78
</div> 79
</div>80
</a>81
</div>82
</div>83
84
<div class="col-lg-3">85
<div class="card text-white bg-primary mb-3 dashboard-card">86
<a href="#">87
<div class="card-body bg-primary dashboard-card-body">88
<div class="row">89
<div class="col-lg-3">90
<span class="dashboard-icon"><i class="fa fa-user"></i></span>91
</div>92
<div class="col-lg-9">93
Name 94
</div>95
</div> 96
</div>97
</a>98
</div>99
</div> 100
101
</div>102
103
</div>104
</div>105
106
<div class="row">107
<div class="col-lg-6">108
<div class="card mb-4">109
<div class="card-header">110
<i class="fas fa-chart-pie mr-2"></i> Schede Registri Trattamenti111
</div>112
<div class="card-body">113
<canvas id="labelChart" height="100"></canvas> 114
</div>115
</div>116
</div> 117
<div class="col-lg-6">118
<div class="card mb-4">119
<div class="card-header">120
<i class="fas fa-chart-pie mr-2"></i> Organigramma Privacy GDPR121
</div>122
<div class="card-body">123
<canvas id="labelChart2" height="100"></canvas>124
</div>125
</div>126
</div>127
</div> 128
129
<div class="row">130
<div class="col-md-12">131
<div class="card mb-4">132
<div class="card-header">133
<i class="fas fa-lock mr-2"></i> Livello sicurezza account134
</div>135
<div class="card-body">136
<div class="progress">137
<div class="progress-bar bg-warning" style="width: 50%;" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>138
</div>139
<div class="mt-3">140
141
<div>142
<div class="mr-3"><i class="fas fa-times text-danger"></i> Google 2FA - <a href="#" class="text-primary">Attiva ora!</a></div>143
<small class="ml-3 mb-3 text-muted" style="display: block; margin-top: -5px;">Autenticazione a due fattori con Google Autenticator non attiva.</small>144
</div>145
146
<div>147
<div class="mr-3"><i class="fas fa-check text-success"></i> Password aggiornata</div>148
<small class="ml-3 mb-3 text-muted" style="display: block; margin-top: -5px;">La password è stata aggiornata meno di 6 mesi fa.</small>149
</div>150
151
152
</div>153
</div>154
</div>155
</div>156
</div>xxxxxxxxxx1
.dashboard-img2
{3
max-width: 50px;4
}5
6
a7
{8
color: #fff;9
}xxxxxxxxxx1
var ctxP = document.getElementById("labelChart").getContext('2d');2
var myPieChart = new Chart(ctxP, {3
plugins: [ChartDataLabels],4
type: 'pie',5
data: {6
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],7
datasets: [{8
data: [210, 130, 120, 160, 120],9
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],10
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]11
}]12
},13
options: {14
responsive: true,15
legend: {16
position: 'right',17
labels: {18
padding: 20,19
boxWidth: 1020
}21
},22
plugins: {23
datalabels: {24
formatter: (value, ctx) => {25
let sum = 0;26
let dataArr = ctx.chart.data.datasets[0].data;27
dataArr.map(data => {28
sum += data;29
});30
let percentage = (value * 100 / sum).toFixed(2) + "%";31
return percentage;32
},33
color: 'white',34
labels: {35
title: {36
font: {37
size: '16'38
}39
}40
}41
}42
}43
}44
});45
46
var ctxP = document.getElementById("labelChart2").getContext('2d');47
var myPieChart = new Chart(ctxP, {48
plugins: [ChartDataLabels],49
type: 'pie',50
data: {51
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],52
datasets: [{53
data: [210, 130, 120, 160, 120],54
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],55
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]56
}]57
},58
options: {59
responsive: true,60
legend: {61
position: 'right',62
labels: {63
padding: 20,64
boxWidth: 1065
}66
},67
plugins: {68
datalabels: {69
formatter: (value, ctx) => {70
let sum = 0;71
let dataArr = ctx.chart.data.datasets[0].data;72
dataArr.map(data => {73
sum += data;74
});75
let percentage = (value * 100 / sum).toFixed(2) + "%";76
return percentage;77
},78
color: 'white',79
labels: {80
title: {81
font: {82
size: '16'83
}84
}85
}86
}87
}88
}89
}); Console errors: 0