Annuaire › Code ouvert
Code publié par son auteur, en lecture seule. « Copier dans mon espace » crée un nouveau site à vous (non publié) que vous pouvez modifier librement.
js/config.js · 2.6 Ko
/* ============================================================
config.js - réglages du graphique de pluviométrie
============================================================
Toutes les constantes qu'on peut avoir envie de changer sont
ici : couleurs, marges, vitesse d'animation...
============================================================ */
/* ---------- Police ---------- */
const POLICE = 'system-ui, -apple-system, "Segoe UI", sans-serif';
/* ---------- Taille du canevas ---------- */
// La largeur suit celle de la page ; la hauteur est un RATIO de la largeur
// (0.62 = 62 % de la largeur), puis bornée entre un minimum et un maximum.
const RATIO_HAUTEUR = 0.62;
const HAUTEUR_MIN = 260;
const HAUTEUR_MAX = 440;
/* ---------- Marges autour de la zone de tracé (en pixels) ----------
La "zone de tracé" est le rectangle où l'on dessine les barres.
Les marges laissent de la place aux graduations et à la légende. */
const MARGE_GAUCHE = 46; // pour les graduations de l'axe vertical (mm)
const MARGE_DROITE = 12;
const MARGE_HAUT = 46; // pour la légende
const MARGE_BAS = 46; // pour les noms de mois et la mention "valeurs d'illustration"
/* ---------- Axe vertical ---------- */
const PAS_GRADUATION = 100; // une ligne de grille tous les 100 mm
const PAS_GRADUATION_FIN = 50; // si les valeurs sont petites, tous les 50 mm
/* ---------- Animation ----------
VITESSE_ANIMATION : plus la valeur est PETITE, plus l'animation est RAPIDE.
(voir explication dans sketch.js, fonction mettreAJourAnimation) */
const VITESSE_ANIMATION = 0.02;
const VITESSE_MELANGE = 0.005; // vitesse du fondu histogramme <-> courbe
/* ---------- Histogramme ---------- */
const LARGEUR_BARRE = 0.68; // largeur de la barre = 68 % de la largeur de sa colonne
const LARGEUR_COLONNE_VALEURS = 34; // on écrit les valeurs au-dessus des barres si la colonne est assez large
/* ---------- Couleurs (hexadécimal) ----------
Choisies pour bien contraster et rester lisibles par les personnes
qui distinguent mal certaines couleurs : bleu (pluie) / orange (survol)
/ rouge foncé en pointillés (moyenne). */
const COULEURS = {
fond: '#ffffff',
texte: '#1c2a39',
texteDoux: '#4a5b6d',
grille: '#dde4eb',
axe: '#7a8b9c',
barreClaire: '#9cc9ea', // petites valeurs
barreFoncee: '#1b5f96', // grandes valeurs
survol: '#f2a007', // colonne survolée
moyenne: '#b3261e', // ligne de moyenne
courbe: '#1b5f96',
infobulleFond: '#1c2a39',
infobulleTexte: '#ffffff'
};
/* ---------- Texte ---------- */
const MENTION_ILLUSTRATION = "valeurs d'illustration (non officielles)";