Updated texts and charts
This commit is contained in:
parent
c9b501c6fc
commit
6e07aec3a5
Binary file not shown.
|
Before Width: | Height: | Size: 799 KiB After Width: | Height: | Size: 604 KiB |
@ -9,6 +9,8 @@
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
<script src="plugins/jquery-3.5.1.min.js"></script>
|
||||
<link href="plugins/chart.min.css" rel="stylesheet">
|
||||
<script src="plugins/chart.bundle.min.js"></script>
|
||||
<script src="scripts/menu.js"></script>
|
||||
<script src="scripts/mail.js"></script>
|
||||
</head>
|
||||
@ -40,6 +42,14 @@
|
||||
|
||||
<p>Vous pouvez nous joindre en cliquant ici : <a href="mailto:badmail" class="mail">nous contacter</a> (cela devrait ouvrir votre client mail par défaut).</p>
|
||||
|
||||
<div class="stat">
|
||||
<canvas id="photo"></canvas>
|
||||
<span class="legend-cont"><span class="legend none"></span><span>Pas de photo</span></span>
|
||||
<span class="legend-cont"><span class="legend bad"></span><span>Photo de mauvaise qualité</span></span>
|
||||
<span class="legend-cont"><span class="legend ok"></span><span>Photo de qualité acceptable</span></span>
|
||||
<span class="legend-cont"><span class="legend good"></span><span>Photo de bonne qualité</span></span>
|
||||
</div>
|
||||
|
||||
<p>Certains noms de famille ont été remplacé par leurs initiales afin de respecter la vie privée des personnes dont Ginou a réalisé un portrait. Si ces personnes ou leur famille nous autorisent à publier le nom de famille complet en nous contactant, nous le feront avec plaisir.</p>
|
||||
|
||||
<h2>Notice d'utilisation</h2>
|
||||
|
||||
@ -16,4 +16,103 @@ jQuery(document).ready(function($)
|
||||
var goodMail = a2 + a9 + a4 + a7 + a3 + a5 + a1 + a6 + a8;
|
||||
$(this).attr('href', href.replace('badmail', goodMail + '?subject=[Ginou] Contact'));
|
||||
});
|
||||
|
||||
// photos stats
|
||||
fifties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
sixties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
seventies = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
eighties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
nineties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
zeroes = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
tens = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
|
||||
$.getJSON("data.json", function(data)
|
||||
{
|
||||
function gatherYear(array, min, max)
|
||||
{
|
||||
if (i.year >= min && i.year <= max)
|
||||
{
|
||||
if (i.photo == "none") array.none++;
|
||||
if (i.photo == "bad") array.bad++;
|
||||
if (i.photo == "ok") array.ok++;
|
||||
if (i.photo == "good") array.good++;
|
||||
}
|
||||
}
|
||||
|
||||
for (i of data)
|
||||
{
|
||||
gatherYear(fifties, 1950, 1959);
|
||||
gatherYear(sixties, 1960, 1969);
|
||||
gatherYear(seventies, 1970, 1979);
|
||||
gatherYear(eighties, 1980, 1989);
|
||||
gatherYear(nineties, 1990, 1999);
|
||||
gatherYear(zeroes, 2000, 2009);
|
||||
gatherYear(tens, 2010, 2020);
|
||||
}
|
||||
|
||||
var canvasDimension = document.getElementById("photo").getContext('2d');
|
||||
var chartDimension = new Chart(canvasDimension, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
|
||||
datasets: [{
|
||||
label: 'Pas de photo',
|
||||
backgroundColor: '#FB6962',
|
||||
data: [
|
||||
fifties.none, sixties.none, seventies.none, eighties.none, nineties.none, zeroes.none, tens.none
|
||||
]
|
||||
}, {
|
||||
label: 'Photo de mauvaise qualité',
|
||||
backgroundColor: '#FCFC99',
|
||||
data: [
|
||||
fifties.bad, sixties.bad, seventies.bad, eighties.bad, nineties.bad, zeroes.bad, tens.bad
|
||||
]
|
||||
}, {
|
||||
label: 'Photo de qualité acceptable',
|
||||
backgroundColor: '#79DE79',
|
||||
data: [
|
||||
fifties.ok, sixties.ok, seventies.ok, eighties.ok, nineties.ok, zeroes.ok, tens.ok
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Photo de bonne qualité',
|
||||
backgroundColor: '#0CC078',
|
||||
data: [
|
||||
fifties.good, sixties.good, seventies.good, eighties.good, nineties.good, zeroes.good, tens.good
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}, gridLines: {
|
||||
display: true
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Tableaux'
|
||||
},
|
||||
stacked: true,
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
stacked: true,
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
position: "bottom",
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -80,10 +80,10 @@ jQuery(document).ready(function($)
|
||||
var chartDimension = new Chart(canvasDimension, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["< 20cm", "20cm - 29cm", "30cm - 39cm", "40cm - 49cm", "50cm - 59cm", "60cm - 69cm", "70cm - 79cm", "80cm - 89cm", "90cm - 99cm", ">= 100cm"],
|
||||
labels: ["Allégorique", "Animal domestique", "Animalier", "Campagne", "Forêt", "Marine", "Montagne", "Métier", "Personne", "Urbain", "Végétal"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [1, 60, 54, 97, 50, 54, 11, 2, 1, 2],
|
||||
data: [2, 11, 67, 126, 3, 10, 5, 10, 46, 39, 39],
|
||||
backgroundColor: '#2589BD',
|
||||
borderColor: '#187795',
|
||||
borderWidth: 1
|
||||
|
||||
@ -159,12 +159,6 @@ article {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1200px) {
|
||||
article {
|
||||
width:95vw;
|
||||
}
|
||||
}
|
||||
|
||||
article h1 {
|
||||
text-align:center;
|
||||
}
|
||||
@ -696,9 +690,87 @@ article #stats .stat {
|
||||
|
||||
article.infos .mail {
|
||||
font-weight:bold;
|
||||
font-size:1.2rem;
|
||||
font-size:1.4rem;
|
||||
}
|
||||
|
||||
article.infos .stat {
|
||||
width:40vw;
|
||||
margin:auto;
|
||||
margin-top:2rem;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:600px) {
|
||||
article.infos .stat {
|
||||
width:90vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:601px) and (max-width:1000px) {
|
||||
article.infos .stat {
|
||||
width:70vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1001px) and (max-width:1200px) {
|
||||
article.infos .stat {
|
||||
width:60vw;
|
||||
}
|
||||
}
|
||||
|
||||
article.infos .stat canvas {
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
|
||||
article.infos .stat .legend-cont {
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
article.main.infos .stat .legend {
|
||||
width:25px;
|
||||
height:10px;
|
||||
border:1px solid black;
|
||||
display:inline-block;
|
||||
margin-right:0.4em;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
article.main.infos .stat .legend + span {
|
||||
margin-right:0.8em;
|
||||
}
|
||||
|
||||
article.infos .stat .none {
|
||||
background:#FB6962;
|
||||
}
|
||||
|
||||
article.infos .stat .bad {
|
||||
background:#FCFC99;
|
||||
}
|
||||
|
||||
article.infos .stat .ok {
|
||||
background:#79DE79;
|
||||
}
|
||||
|
||||
article.infos .stat .good {
|
||||
background:#0CC078;
|
||||
}
|
||||
|
||||
article.infos h4 + p {
|
||||
margin-left:1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width:1200px) {
|
||||
article, article.main {
|
||||
width:95vw;
|
||||
}
|
||||
|
||||
article .center {
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user