from rdigc.utils import getThemeIcon
from os.path import (dirname, join)

#NEW 4.0.0
APIHUBEAU = f"https://hubeau.eaufrance.fr/api/v2/hydrometrie/observations_tr?code_entite=%s&grandeur_hydro=%s&fields=resultat_obs,date_obs&size=%s&sort=desc"
APIHUBEAUMONTHLY = f"https://www.hydro.eaufrance.fr/stationhydro/%s/monthly_vcn3_01/statistique/visualisation-echantillon"

APIMETEO  = f"https://api.open-meteo.com/v1/forecast?latitude=%s&longitude=%s&models=%s&current=temperature_2m,apparent_temperature,precipitation,cloud_cover,wind_speed_10m,wind_direction_10m,relative_humidity_2m,rain,weather_code,is_day&timezone=Europe Berlin&past_days=2&forecast_days=1"
#MODELE ACTIF
APIMODELMETEO = "meteofrance_seamless"
#MODELES PROPOSES DANS UI_PARAMS.PY
APIMODELMETEOITEMS = {"Météo Allemande"   : {"model" : "icon_seamless", "organisme" : "DWD Germany", "legend" : "Cette API utilise les prévisions météorologiques mondiales DWD ICON et les combine avec des ICON à haute résolution.\nPrévisions pour l'Europe et l'Europe centrale. Des informations sur les modèles météorologiques DWD sont disponibles ici.\nPour ICON Global et Europe, les valeurs sont interpolées de 3 heures à 1 heure après 78 heures.\nDes données à 15 minutes seulement sont disponibles pour un petit nombre de variables météorologiques et uniquement dans Europe centrale."},
                      "Météo Américaine"  : {"model" : "gfs_seamless", "organisme" : "NOAA U.S.", "legend" : "Cette API utilise les prévisions météorologiques mondiales du NOAA GFS et les combine avec le HRRR haute résolution.\nHRRR est un modèle de rafraîchissement rapide et met à jour toutes les heures. Les données à haute résolution ne sont que disponible pour les États-Unis.\nPour les autres emplacements, seule la SFP est utilisée.\nPour les GFS, les valeurs sont interpolé de 3 heures à 1 heure après 120 heures."},
                      "Météo Française"   : {"model" : "meteofrance_seamless", "organisme" : "Météo-France", "legend" : "Cette API utilise les prévisions météorologiques mondiales pour Météo-France ARPEGE et les combine avec prévisions AROME à haute résolution.\nAROME est un modèle haute résolution de 1,5 km couvrant la France et les zones voisines.\nPour les autres emplacements, seul ARPEGE est utilisé.\nPour ARPEGE, les valeurs sont interpolé de valeurs de 3 ou 6 heures à 1 heure après 72 ou 96 heures respectivement."},
                      "Météo Italienne"   : {"model" : "italia_meteo_arpae_icon_2i", "organisme" : "ItaliaMeteo", "legend" : "Cette API donne accès au modèle ICON-2I de ItaliaMeteo-ARPAE."},                      
                      "Météo Royaume-Uni" : {"model" : "ukmo_seamless", "organisme" : "UK Met Office", "legend" : "Cette API utilise les prévisions météorologiques mondiales de l'UKMO Global 10 km et les combine avec modèle à haute résolution UKV 2 km pour le Royaume-Uni et l'Irlande.\nPour UKMO Global, les valeurs sont interpolées de 3 heures à 1 heure après 54 heures et à partir de Données de 6 heures après 144 heures."},
                      "Météo Suisse"      : {"model" : "meteoswiss_icon_ch1" , "organisme" : "MeteoSwiss", "legend" : "Cette API utilise des prévisions ICON Central Europe à haute résolution MeteoSwiss."}
                      }                      
                      
APIQUALITYAIR = f"https://air-quality-api.open-meteo.com/v1/air-quality?latitude=%s&longitude=%s&current=european_aqi"

LAYERTERRITOIRE = "Département"
LAYERTERRAIN = "Terrain_dept2A"
LAYERSTATIONS = "Stations hydrométriques"
TABLEFIELDSSTATIONS = {"CdStationH" : None, "LbStationH" : None, "CdAncieRef" : None, "SEUIL_RDI" : {}, "FILTERWITH" : None}
TIMEZONE = "Europe/Paris"
LAYERCRUES = "Occurrences de crues"
#NEW 4.0.0
LAYERWATER = "L_STRAHLER_L_02A"
TABLEFIELDSWATER = {"ID" : None, "TOPONYME" : None, "FILTERWITH" : None}
LAYERCOMMUNES = "Commune"
TABLEFIELDSCOMMUNES = {"INSEE_COM" : None, "NOM" : None, "FILTERWITH" : None}
FIELDCRUES = "OCCURRENCE"
RASTERCRUES = "_OCCURRENCES_TIFF"

NAMEGROUPRASTER = "Fonds de plan"
PATHIMGSTATIONS = join(dirname(__file__),"data/stations/")
#NEW 4.1.5
PATHCOMPASS = join(dirname(__file__),"data/boussoles/northarrow_01.svg")
PATHALARM1 = join(dirname(__file__),"data/sounds/alarm_seuil_1.wav")
PATHALARM2 = join(dirname(__file__),"data/sounds/alarm_seuil_2.wav")
PATHALARM3 = join(dirname(__file__),"data/sounds/alarm_seuil_3.wav")
PATHQML = join(dirname(__file__),"data/styles/default_mask_style.qml")

PATHLOCALDATA = "D:/COPIE_SERVEURS/Ref/CARTES/SCAN_25/"
PATHLOCALFOLDERSTATIONS = "D:/COPIE_SERVEURS/Ref/CARTES/SCAN_25/"
PARAMFILES = ["params", "localdata", "webdata", "wmsservers"]
TOOLTIPPARAMFILES = ["""Ce fichier stocke les paramètres définis dans les onglets "Généraux" et "Impressions" """,
          """Ce fichier stocke les ressources locales définies dans l&apos;onglet "Ressources Externes" """,
          """Ce fichier stocke les ressources web définies dans l&apos;onglet "Ressources Externes" """,
          """Ce fichier stocke les serveurs WMS définis dans l&apos;onglet "Ressources Externes" qui alimentent les ressources disponibles pour les fonds de plan via un service web"""]
        

COMMENTSSEUILRDI = {'S1' : 'Seuil<br>RDI', 'S2' : 'Seuil de<br>1er débordement', 'S3' : 'Seuil<br>critique'}
COMMENTOBSERVATIONS = {"e0" : "Evolution stable",
          "e1" : "Evolution à la baisse",
          "e2" : "Evolution à la hausse",
          "e3" : "Evolution indéterminée",
          "v0" : "Dernière valeur observée homogène sur la période",
          "v1" : "Dernière valeur observée très inférieure à la moyenne sur la période",
          "v2" : "Dernière valeur observée légèrement inférieure à la moyenne sur la période",
          "v3" : "Dernière valeur observée inférieure à la moyenne sur la période",
          "v4" : "Dernière valeur observée très supérieure à la moyenne sur la période",
          "v5" : "Dernière valeur observée légèrement supérieure à la moyenne sur la période",
          "v6" : "Dernière valeur observée supérieure à la moyenne sur la période.",
          "v99" : "Nombre d&apos;informations remontées insuffisant."}

#NEW 4.1.5
IMAGESFORBULLETIN = {"editGraph" : "icons/edit.png", "reloadGraph" : "icons/reload.png",
                     "openAllNodes" : "icons/expandall.png", "closeAllNodes" : "icons/reduceall.png", "invertAllNodes" : "icons/invertall.png",
                     "statsStation" : "icons/statsstation.png", "viewstation" : "icons/viewstation.png",
                     "docAss" : "icons/casier.png", "temporalseries" : "icons/temporalseries.png",
                     "webAss" : "icons/webass.png", "vigicrues" : "data/logos/vigicrues.png", "hydro" : "data/logos/hydro.png",
                     "inrae" : "data/logos/inrae.png", "birdz" : "data/logos/birdz.png", "graphique" : "icons/grahique.png",
                     "tabledata" : "icons/tabledatam.png", "noservice" : "icons/viewstationw.png", "urlweb" : "icons/urlweb2.png",
                     "warning" : "icons/warning.png" }

        
FORMATSRASTER = ["ECW", "JP2", "TIF", "ASC", "SDAT"]

MAPPINGDATA = {}

GROUPSACTIONS = {"actionRisquesMt" : ["Mouvements de Terrains"],
                 "actionRisquesOh" : ["Ruptures d'OH"],
                 "actionRisquesStep" : ["STEP"],
                 "actionRisquesIcpe" : ["ICPE"],
                 "actionEnjeuxPersonnes" : ["Personnes"],
                 "actionEnjeuxReseaux" : ["Réseaux"],
                 "actionEnjeuxBiens" : ["Biens & littoral"],
                 "actionEnjeuxEcologie" : ["Ecologie et patrimoine"]
                 }

THEMATICINONDATIONS = ["Atlas Zones Inondables", "Aléa Centennal issu des PPRI 2A", "Aléa Centennal Hors étude PPRI 2A", "Point de contrôle de crues", "Pluviomètre", "Stations hydrométriques", "Grands bassins versants"]
THEMATICSUBMERSIONS = ["Atlas Zone Submersion Marine"]

LEGENDSTYLES = """
<style>
    table {border-spacing: 0px; width: 100%;}
    th, td {padding: 5px 30px 5px 30px;border-spacing: 0px;font-size: 90%;margin: 0px;}
    th {color: #000000 ;text-align: left;background-color: #ffffff; }
    th.title {color: #999999;text-align: left;background-color: #5D5D5D; border-top: 0px solid #f1f8fe;border-bottom: 0px solid #cbd2d8; border-right: 0px solid #cbd2d8;}
    td.infos {color: #000000;background-color: #FFFFFF;border-top: 1px solid #f1f8fe;border-bottom: 1px solid #cbd2d8; border-right: 1px solid #cbd2d8;}
</style>
"""

INFORMATIONSSTYLESDATA = """
<style>
    div { width:350px; color:#369; background:#ddd; border:2px solid #89a;  text-decoration:none; padding:10px 20px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
    div:hover,div:focus {color:#369;background:#fff;}
    table { font-size: .8em; margin: 0 auto; width: 96%; background-color: #FFFFFF; border: solid 1px #5D1212; border-collapse: separate; border-spacing: 0; border-radius: 16px;}
    td { padding: 5px;}
    tr + tr td { border-top: solid 1px #5D1212;}
    tr:first-child td:first-child {	border-radius: 14px 0 0 0;}
    tr:first-child td:last-child { border-radius: 0 14px 0 0;}
    tr:last-child td:first-child { border-radius: 0 0 0 14px;}
    tr:last-child td:last-child {  border-radius: 0 0 14px 0;}
</style>
"""


INFORMATIONSSTYLES = """
<style>
    #information {font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;  border-collapse: collapse;  width: 100%;}
    #information td, #information th {  border: 1px solid #ddd;  padding: 8px;}
    #information tr{background-color: #c3c3c3; border: 1px solid #ddd; }
    #information tr:nth-child(even){background-color: #ddd;}
    #information tr:hover {background-color: #ddd;}
    #information th {  padding-top: 12px;  padding-bottom: 12px;  text-align: left;  background-color: #4CAF50;  color: white;}
</style>
"""

#NEW 4.0.0
STYLELABEL = "QComboBox { border-style: outset; border-radius: 3px; color: black; selection-background-color: green;}"
STYLELABELERROR = "QComboBox { border-style: outset; border-radius: 3px;  color: white; selection-background-color: red;}"

STYLECOMBOBOX = """
          QComboBox { border-style: outset; border-radius: 3px;  selection-color: black; selection-background-color: lightgray;}
          QComboBox:editable {  background-color: white; }
          QComboBox:!editable, QComboBox::drop-down:editable { font-color: black; color : black; border-left-width: 1px; border-left-color: black; border-left-style: solid; border-top-right-radius: 3px; border-right-color: black;}
          QComboBox:!editable:on, QComboBox::drop-down:editable:on {color : black; font-color: black;}
          QComboBox:on { padding-top: 3px; padding-left: 4px; }
          QComboBox::drop-down {color: black; subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
          QComboBox::down-arrow { image: url(%s); }
          QComboBox::down-arrow:on {top: 1px; left: 1px; }
          QComboBox QAbstractItemView { border: 2px solid darkgray; selection-background-color: lightgray; color: black; font-color: black;}
        """ % getThemeIcon("nodes_expand.png").replace("\\","/") 


STYLEMAPLAYERCOMBOBOX = """
          QgsMapLayerComboBox { border-style: outset; border-radius: 3px;  selection-color: black; selection-background-color: lightgray;}
          QgsMapLayerComboBox:editable {  background-color: white;}
          QgsMapLayerComboBox:!editable, QgsMapLayerComboBox::drop-down:editable { font-color: black; color : black; border-left-width: 1px; border-left-color: black; border-left-style: solid; border-top-right-radius: 3px; border-right-color: black;}
          QgsMapLayerComboBox:!editable:on, QgsMapLayerComboBox::drop-down:editable:on {color : black; font-color: black;  }
          QgsMapLayerComboBox:on { padding-top: 3px; padding-left: 4px; }
          QgsMapLayerComboBox::drop-down {color: black; subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
          QgsMapLayerComboBox::down-arrow { image: url(%s); }
          QgsMapLayerComboBox::down-arrow:on {top: 1px; left: 1px; }
          QgsMapLayerComboBox QAbstractItemView { border: 2px solid darkgray;  selection-background-color: lightgray; color: black; font-color: black;}
        """ % getThemeIcon("nodes_expand.png").replace("\\","/")           
  

#NEW 4.1.5
HTMLSTYLESBULLETIN = """<style>
                    menu {display: flex; list-style: none; padding: 0;}
                    button {display:inline-block; background-color:#fff; border:#666 1px solid; margin:2px; font-size:24px; cursor:pointer; width:32px; height:32px; border-radius:50%;}
                    button:hover {background-color:#b5e61d; color:#ccc; box-shadow:3px 8px #888;}
                    ul {list-style-type: none;}

                    #stationsinfos { font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 0.8em;  border-collapse: collapse;  width: 100%;}
                    #stationsinfos td, #customers th {  border: 1px solid #FFFFFF;  padding: 8px;}
                    #stationsinfos td div {width: 200px; position: relative; z-index: 99;}
                    #stationsinfos tr:nth-child(even){background-color: #f2f2f2;}
                    #stationsinfos tr.error {background-color: #ff0000;}
                    #stationsinfos tr.noservice {background-color: #000000; color: #ffffff;}
                    #stationsinfos tr:hover {background-color: #ddd;}
                    #stationsinfos th {  padding-top: 12px;  padding-bottom: 12px;  text-align: left;  background-color: #04AA6D;  color: white;}
                    #stationsinfos th.title {  padding-top: 12px;  padding-bottom: 12px;  text-align: left;  background-color: #326a48;  color: white;}
                    #legende {background:#ffffcc; border: solid 1px #5D1212; border-collapse: separate; border-spacing: 0; border-radius: 16px;}
                    #legende tr.titlelegende {background-color: #04AA6D;  color: white; font-weight: bold;}

                    li a { text-decoration: none; color: black;}
                    span.small {font-size : 10px; font-style: italic;} 

                    .menu-deroulant {width: 60px;}
                    .menu-deroulant > a:after{ content: '>'; font-size: 1.5em; margin-left: 0px; display: inline-block;}
                    .sous-menu { z-index : 10; margin-left: -50px; margin-top: var(--hauteur-menu);font-size: 0.9em; width: 350px; text-align: left; background-color: white; border-radius: 2px; overflow: hidden; max-height: 0;}
                    .sous-menu > li > a {  font-size: 0.9em; height: 32px; padding-left: 0x; width: 200%; align-items: center; display: flex;}
                    nav > ul > li:hover > a{ color: #000; font-weight: bold;}
                    .sous-menu > li:hover { background-color: #CCC;}
                    .sous-menu > li:hover > a { color: white;}
                    @keyframes rotationFleche { 0% { transform: rotate(0deg); } 100%{ transform: rotate(90deg);} }
                    .menu-deroulant:hover > a:after{ animation: rotationFleche 0.2s linear forwards;}
                    @keyframes apparitionSousMenu { 0% { box-shadow: 0px 3px 3px 1px rgba(0,0,0,0); border-top: 3px solid #2169EC; }
                                                    30% { box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);}
                                                    100% {max-height: 50em; border-top: 3px solid #2169EC; box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);}
                    }
                    .menu-deroulant:hover > .sous-menu { animation: apparitionSousMenu 1s forwards;}
                    img.iconLegend {width: 18px; height: 18px; vertical-align:middle}

                    .titleDocAss {font-size: 12px; font-family: Montserrat, Arial, Helvetica, sans-serif; letter-spacing: 0.05em; font-weight: bold; background-color: #04AA6D;  color: white; width: 100%;}
               
                    </style>   
                 """

#NEW 4.0.0
HTMLSTATISTICS = """
<style>
.month-info {margin-top: 10px; padding: 5px;}
.month-info-box {color: #0e1635; font-weight: 600; padding: 10px;}
.month-bar-light {margin-top: -15px; margin-left: -15px; background-color: #17D8FF;}
.month-bar-middle {margin-top: -15px; margin-left: -15px; background-color: #11A4C1;}
.month-bar-high {margin-top: -15px; margin-left: -15px; background-color: #095868;}
.month-bar-light-back {margin-top: -15px; margin-left: -15px; background-color: #2E76F2;}

/* Util Classes */
.box {width: 100%; padding: 20px; position: relative;}
.box-title {font-size: 16px; font-weight: normal; padding-bottom: 10px;}
.box-footer {position: absolute; bottom: 1%;}
.box-footer a {text-decoration: none; color: #949ab0; text-transform: uppercase; display: flex; flex-direction: row; align-items: center; font-weight: 500;}
.box-footer a img {padding-left: 10px;}
.selected-tab {font-weight: 700; border-bottom: 2px solid #0e1635;}
.float-right {float: right;}
.number-fs {font-size: 14px;}
.infos-fs {font-size: 13px;}
.main-layout.active {pointer-events: none; opacity: 0.4;}

.div-img{justify-content: center; align-items: center; display:flex; padding-top:20%;}
.imgFlash{transition: transform .2s; width: 30px; height: 30px; margin:0 auto; background-color: rgb(173, 173, 237); 
		  border-radius: 5px; border: 1px solid white; vertical-align : middle ;}
.imgFlash:hover{transform:scale(5.0);}
.imgWithout{cursor: not-allowed; transition: transform .2s; width: 30px; height: 30px; margin:0 auto; background-color: rgb(173, 173, 237); 
		  border-radius: 5px; border: 2px solid red; vertical-align : middle ;}
.imgWithout:hover{transform:scale(1.0); filter : grayscale(80%);}
.post-content-wrapper{padding:20px;margin-bottom:2em;position:relative;max-width:820px;margin-left:auto;margin-right:auto;border-width:1px; border-style:solid; border-color:#000000;background-color:#ffffff;border-radius:var(--rounded);box-sizing:border-box}
</style>    
"""
HTMLGRAPHICSJS = """
\n<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>\n
"""

#NEW 4.0.0
HTMLSTYLESSTATISTICS = """
<style>
@media print {
   * {-webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
       color-adjust: exact !important;   /*Firefox*/}
   @page {size: portrait; size: A4;}
   @page :left { margin-left: 3cm;}
   @page :right { margin-left: 3cm;}
    .tableFixHeaderChiffres {width:90%;  display : border-bottom: 2px solid blue; font-size:12px;}
    .tableFixHead {display : table; page-break-inside: avoid;}
    .tableFixHead table {width: 90%;}
    .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
    .tableFixHead tr.titleStation {background-color:#1C6EA4; color: white; text-align : left; margin-left: 2px; font-size:20px;}
    .tableFixHead tr td.texte1 { text-align : left; width: 15%; font-size:14px;}
    .tableFixHead tr td.indicateur1 { text-align : center; width: 15%; font-size:14px;}
    .tableFixHead tr td.indicateur2 { text-align : center; width: 10%; font-size:14px;}
    .tableFixHead tr td.indicateur3 { text-align : center; width: 10%; font-size:14px;}
    .tableFixHead tr td.indicateur4 { text-align : center; width: 10%; font-size:14px;}
    .tableFixHead tr td.indicateur5 { text-align : center; width: 10%; font-size:14px;}
    .tableFixHead tr td.texte7 { text-align : left; width: 50%; font-size:12px;}
}

/*TO ADD*/
ul {list-style-type: none;}
.menu-deroulant {width: 30px;}
.menu-deroulant > a:after{ content: '>'; font-size: 1.5em; margin-left: 0px; display: inline-block;}
.sous-menu { position:relative; z-index:100; margin-left: -50px; margin-top: var(--hauteur-menu);font-size: 0.9em; width: 350px; text-align: 
			left; background-color: white; border-radius: 2px; overflow: hidden; max-height: 0;}
.sous-menu > li > a {  font-size: 0.9em; height: 32px; padding-left: 0x; width: 200%; align-items: center; display: flex;}
.sous-menu > li > img {vertical-align : middle;}
nav > ul > li:hover > a{ color: #000; font-weight: bold;}
.sous-menu > li:hover { background-color: #CCC; opacity: 0.90;}
.sous-menu > li:hover > a { color: white;}
@keyframes rotationFleche { 0% { transform: rotate(0deg); } 100%{ transform: rotate(90deg);} }
.menu-deroulant:hover > a:after{ animation: rotationFleche 0.2s linear forwards;}
@keyframes apparitionSousMenu { 0% { box-shadow: 0px 3px 3px 1px rgba(0,0,0,0); border-top: 3px solid #2169EC; }
                                30% { box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);}
                                100% {max-height: 50em; border-top: 3px solid #2169EC; box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);}
                              }
li a { text-decoration: none; color: black; margin-top: 5px; vertical-align : middle;}
.liImg {vertical-align: middle; width: 18px; height: 18px;}
.menu-deroulant:hover > .sous-menu { animation: apparitionSousMenu 1s forwards;}
.titleDocAss {font-size: 11px; font-family: Montserrat, Arial, Helvetica, sans-serif; letter-spacing: 0.05em; font-weight: bold; background-color: #04AA6D;  color: white; width: 100%;}
/*END TO ADD*/

menu {display: flex; list-style: none; padding: 0; background-color: rgba(200, 200, 200, 20); border-radius: 5px; border:#000 1px solid; max-width: 150px; width: 150px; max-height: 35px;}
button {display:inline-block; background-color:#fff; border:#666 1px solid; margin:2px; font-size:24px; cursor:pointer; width:32px; height:32px; border-radius:50%;}
button:hover {background-color:#b5e61d; color:#ccc; box-shadow:3px 8px #888;}

/*TO KEEP */
.box-infos {width: 90%; font-size: 12px; font-weight: normal; padding-bottom: 10px;}
.tableFixHeaderChiffres {width:90%;  display : border-bottom: 2px solid blue; font-size:12px;}
.tableFixHeader {width:90%;  display : inline-block; overflow: auto; height: 101px; border-bottom: 2px solid blue; font-size:12px;}
.tableFixHead tr.titleStation {background-color:#1C6EA4; color: white; text-align : left; margin-left: 2px; font-size:20px;}
.tableFixHeader thead th.texte1 { text-align : left; width: 100%; font-size:14px;}
.tableFixHeader thead th.indicateur1 { text-align : center; width: 15%; font-size:14px;}
.tableFixHeader thead th.indicateur2 { text-align : center; width: 8%; font-size:14px;}
.tableFixHeader thead th.indicateur3 { text-align : center; width: 10%; font-size:14px;}
.tableFixHeader thead th.indicateur4 { text-align : center; width: 10%; font-size:14px;}
.tableFixHeader thead th.indicateur5 { text-align : center; width: 10%; font-size:14px;}
.tableFixHeader thead th.texte7 { text-align : left; width: 50%; font-size:12px;}

@media screen {
    .tableFixHead {width:90%; display : inline-block; overflow: auto; height: 650px; border-bottom: 2px solid blue;}
    .tableFixHead table {width: 100%;}
    .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
    .tableFixHead tr td.texte1 { text-align : left; width: 10%;}
    .tableFixHead tr td.indicateur1 { text-align : center; width: 10%;}
    .tableFixHead tr td.indicateur2 { text-align : center; width: 10%;}
    .tableFixHead tr td.indicateur3 { text-align : center; width: 10%;}
    .tableFixHead tr td.indicateur4 { text-align : center; width: 10%;}
    .tableFixHead tr td.indicateur5 { text-align : center; width: 10%;}
    .tableFixHead tr td.texte7 { text-align : left; width: 50%;}
}
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     {background-color : #3498db; color: white;}
th.titleStation {background-color:#1C6EA4; color: white;}

/*END TO KEEP */

.statistics {border-collapse: collapse; width: 100%; margin-left: 15px;}
.seuils {border-collapse: collapse; width: 100%; margin-left: 85px;}
.graphes {width : 90%; border: 2px solid orange; border-radius: 10px; box-shadow: 0px 5px 14px 0px #0e1635; margin-left: 75px;}
.stations {width : 90%; min-height: 300px; height: 300px; border-radius: 10px; color: #f0f6f8; background-color: #1C6EA4; box-shadow: 0px 5px 14px 0px #0e1635;}
.stations td.stationView {width : 25%; text-align : left;}
.stations td.stationNoView {width : 25%; text-align : left; cursor : not-allowed;}
.cellStation {text-align : right; background-color: #ECECEC;}
.cellCommentaires {text-align : justify; width :25%; font-size: 12px;}
.rowStation {background-color: #85F2EE; height: 200px;}
tbody th {padding: 4px 15px 4px 0px ; text-align: right ;}
tbody td {border: 1px solid #cccccc ; padding: 8px 15px 8px 15px ; text-align: center ;}
.rotated-th {height: 110px ; position: relative ; }
.rotated-th__label {bottom: 5px ; left: 50% ; position: absolute ; transform: rotate( -45deg ); transform-origin: center left ; white-space: nowrap ;}
.ruban {background: #b1c70d; height: 50px; width: 90%; position: relative; left: 5%; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0,0,0,0.55); z-index: 100;}
.ruban h2 {font-size: 25px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); text-align: center; margin:10px;}
.ruban_gauche {border-color: transparent #7e9202 transparent transparent; border-style: solid; border-width:15px; height:0px; width:0px; position: relative; left: 4%;
               top: 65px; z-index: 99;}
.stat-box {padding: 5px; width: 100%; color: #0e1635; background-color: #FFFFCC; border-radius: 10px; max-height: 100%; 
           border: 1px solid #949ab0; padding: 20px; border-bottom: 1px solid #949ab0;}

span.small {font-size : 10px; font-style: italic;}           
summary.elite {display: block; position: relative; background : cyan; font-size: 18px; height: 30px; border: 2.5px inset grey; padding: 6px; cursor: pointer; transform: scaleX(-1);}
summary.elite b {display: inline-block; position: absolute; right: 6px; transform: scaleX(-1);}
summary.elite::after {margin-left: 1ch; display: inline-block; content: '🔽'; transform: rotate(90deg);}
details > summary.elite {list-style-type: none;}
details > summary.elite::-webkit-details-marker {display: none;}
details[open] > summary.elite::after {content: '🔽'; transform: rotate(0deg);transition: 0.2s;}

details.normal {width: 65%; margin: 0 auto ; margin-bottom: .5rem;  box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);  border-radius: 5px;  overflow: hidden;}
summary.normal {padding: 1rem;  display: block;  background: #1C6EA4; color: white; font-size : 16px;font-weight: bold; padding-left: 2.2rem;  position: relative; cursor: pointer;  user-select: none;}
summary.normal:before {content: ''; border-width: .4rem;  border-style: solid; border-color: transparent transparent transparent #fff; position: absolute; top: 1.3rem; left: 1rem; transform: rotate(0);
                       transform-origin: .2rem 50%; transition: .25s transform ease;}
details.normal[open] > summary:before {transform: rotate(90deg);}
details.normal summary.normal::-webkit-details-marker {display:none;}
details.normal > table {padding-bottom: 1rem; margin-bottom: 0;}

img.icon {width: 24px; height: 24px; vertical-align:middle}
img.iconLegend {width: 18px; height: 18px; vertical-align:middle}
img.iconLegend:hover {width: 24px; height: 24px; cursor: pointer;}
</style>
          """

HTMLSTYLESMETEO = """
menu {display: flex; list-style: none; padding: 0; background-color: rgba(200, 200, 200, 20); border-radius: 5px; border:#000 1px solid; max-width: 150px; width: 150px; max-height: 35px;}
button {display:inline-block; background-color:#fff; border:#666 1px solid; margin:2px; font-size:24px; cursor:pointer; width:32px; height:32px; border-radius:50%;}
button:hover {background-color:#b5e61d; color:#ccc; box-shadow:3px 8px #888;}

/*TO ADD*/
ul {list-style-type: none;}
.menu-deroulant {width: 30px;}
.menu-deroulant > a:after{ content: '>'; font-size: 1.5em; margin-left: 0px; display: inline-block;}
.sous-menu { position:relative; z-index:100; margin-left: -50px; margin-top: var(--hauteur-menu);font-size: 0.9em; width: 350px; text-align: 
			left; background-color: white; border-radius: 2px; overflow: hidden; max-height: 0;}
.sous-menu > li > a {  font-size: 0.9em; height: 32px; padding-left: 0x; width: 200%; align-items: center; display: flex;}
.sous-menu > li > img {vertical-align : middle;}
nav > ul > li:hover > a{ color: #000; font-weight: bold;}
.sous-menu > li:hover { background-color: #CCC; opacity: 0.90;}
.sous-menu > li:hover > a { color: white;}
@keyframes rotationFleche { 0% { transform: rotate(0deg); } 100%{ transform: rotate(90deg);} }
.menu-deroulant:hover > a:after{ animation: rotationFleche 0.2s linear forwards;}
@keyframes apparitionSousMenu { 0% { box-shadow: 0px 3px 3px 1px rgba(0,0,0,0); border-top: 3px solid #2169EC; }
                                30% { box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);}
                                100% {max-height: 50em; border-top: 3px solid #2169EC; box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);}
                              }
li a { text-decoration: none; color: black; margin-top: 5px; vertical-align : middle;}
.liImg {vertical-align: middle; width: 18px; height: 18px;}
.menu-deroulant:hover > .sous-menu { animation: apparitionSousMenu 1s forwards;}
.titleDocAss {font-size: 11px; font-family: Montserrat, Arial, Helvetica, sans-serif; letter-spacing: 0.05em; font-weight: bold; background-color: #04AA6D;  color: white; width: 100%;}
/*END TO ADD*/

td, th {text-align: center;}
table.blueTable {border: 0px solid #1C6EA4; background-color: #EEEEEE; width: 90%; text-align: left; border-collapse: collapse;}
table.blueTable td , table.blueTable th { border: 0px solid #AAAAAA; padding: 3px 2px; text-align: center;}
table.blueTable td.entite, th.entite {text-align: left; margin-left: 20px; padding : 5px;}
table.blueTable th { font-size: 1.25vmin;
  appearance: none;
  background: linear-gradient(45deg, #99ccFF 90%, #1C6EA4 10%) 50% 50% / 80% 20% no-repeat, #3B56A4; width: 50em;
  height: 5em; aspect-ratio: 7/2; border-radius: 1.5em; box-shadow:  inset 0 -0.3em 0.4em -0.2em #fff2,
    inset 0 0.25em 0.5em #0001, inset 0 0.25em 0.5em #0001, inset 0 0 0 0.25em #99ccFF; transform: translate(-0%, -0%);
  transform-style: preserve-3d; perspective: 250em; font-family: Arial, Helvetica, sans-serif; font-weight: bold}
table.blueTable tbody td {font-size: 13px;}
table.blueTable tr:nth-child(even) {background: white;}
table.blueTable thead {background: #1C6EA4;background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;}
table.blueTable thead th {font-size: 15px; font-weight: bold; color: #FFFFFF; border-left: 2px solid #D0E4F5;}
table.blueTable thead th:first-child { border-left: none;}
table.blueTable tfoot {font-size: 14px;font-weight: bold;color: #FFFFFF;background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
table.blueTable tfoot td {font-size: 14px;}
table.blueTable tfoot .links {text-align: right;}
table.blueTable tfoot .links a{display: inline-block;background: #1C6EA4;color: #FFFFFF; padding: 2px 8px; border-radius: 5px;}

span.small {font-size : 10px; font-style: italic;}  
.hint { font-size:12px; color: #6c757d; }
img.icon {width: 24px; height: 24px; vertical-align:middle}
img.iconLegend {width: 18px; height: 18px; vertical-align:middle}
.arrow {margin-bottom: 60px; --t: 55%; --h: 30%; aspect-ratio: 10/5; width: 20px; background: black;
       clip-path: polygon(0 calc(50% - var(--t)/2), calc(100% - var(--h)) calc(50% - var(--t)/2),
       calc(100% - var(--h)) 0, 100% 50%, calc(100% - var(--h)) 100%, calc(100% - var(--h)) calc(50% + var(--t)/2), 0 calc(50% + var(--t)/2));}
\n"""

NODEJSCANVAS = """
<script>
        function invertAll(){
          const details = document.querySelectorAll('details');
          const D = Array.from(details);
          for (let i = 0; i < D.length; i++) {
              if(D[i].open) {D[i].removeAttribute('open');}
              else {D[i].open = true;}
          }
        }

        function openAll() {
          const details = document.querySelectorAll('details');
          const D = Array.from(details);
          for (let i = 0; i < D.length; i++) {
             D[i].open = true;
          }
        }

        function closeAll() {
          const details = document.querySelectorAll('details');
          const D = Array.from(details);
          for (let i = 0; i < D.length; i++) {
             D[i].removeAttribute('open');
          }
        }
</script>
"""    

HTMLSTYLESCANVAS = """\n<style>
.ruban {background: #b1c70d; height: 50px; width: 90%; position: relative; left: 5%; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0,0,0,0.55); z-index: 100;}
.ruban h2 {font-size: 25px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); text-align: center; margin:10px;}
.ruban_gauche {border-color: transparent #7e9202 transparent transparent; border-style: solid; border-width:15px; height:0px; width:0px; position: relative; left: 4%;
           top: 65px; z-index: 99;}
.summaryTheme {cursor: pointer; text-align : left; margin-left : 10px; color : white; background: #b1c799;
               height: 25px; width: 89%; position: relative; left: 5%; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0,0,0,0.55);}
.canvasProfil { position: relative; left: -3%; top : 35px; border: 1px solid black;}

menu {display: list; list-style: none; padding: 0; background-color: rgba(200, 200, 200, 20); border-radius: 5px; border:#000 1px solid; max-width: 40px; width: 40px; 
	max-height: 150px; height: 150px; margin-left: -5px;}
menu > li {list-style-type: none;}
button {display:inline-block; background-color:#fff; border:#666 1px solid; margin:2px; font-size:24px; cursor:pointer; width:32px; height:32px; border-radius:50%;}
button:hover {background-color:#b5e61d; color:#ccc; box-shadow:3px 8px #888;}

@media screen {
tr td.texte1 { text-align : left; width: 10%;}
}
table  { border-collapse: collapse; width: 90%; cellpadding: 40px;}
th, td { padding: 8px 16px; }
th     {background-color : #3498db; color: white;}
tr.titleStation {color: white; vertical-align: botom;}

/*TO ADD*/
ul {list-style-type: none;}
.menu-deroulant {width: 30px;}
.menu-deroulant > a:after{ content: '>'; font-size: 1.5em; margin-left: 0px; display: inline-block;}
.sous-menu { position:relative; z-index:100; margin-left: -50px; margin-top: var(--hauteur-menu);font-size: 0.9em; width: 350px; text-align: 
			left; background-color: white; border-radius: 2px; overflow: hidden; max-height: 0;}
.sous-menu > li > a {  font-size: 0.9em; height: 32px; padding-left: 0x; width: 200%; align-items: center; display: flex;}
.sous-menu > li > img {vertical-align : middle;}
nav > ul > li:hover > a{ color: #000; font-weight: bold;}
.sous-menu > li:hover { background-color: #CCC; opacity: 0.90;}
.sous-menu > li:hover > a { color: white;}
@keyframes rotationFleche { 0% { transform: rotate(0deg); } 100%{ transform: rotate(90deg);} }
.menu-deroulant:hover > a:after{ animation: rotationFleche 0.2s linear forwards;}
@keyframes apparitionSousMenu { 0% { box-shadow: 0px 3px 3px 1px rgba(0,0,0,0); border-top: 3px solid #2169EC; }
                                30% { box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);}
                                100% {max-height: 50em; border-top: 3px solid #2169EC; box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);}
                              }
li a { text-decoration: none; color: black; margin-top: 5px; vertical-align : middle;}
.liImg {vertical-align: middle; width: 18px; height: 18px;}
.menu-deroulant:hover > .sous-menu { animation: apparitionSousMenu 1s forwards;}
.titleDocAss {font-size: 11px; font-family: Montserrat, Arial, Helvetica, sans-serif; letter-spacing: 0.05em; font-weight: bold; background-color: #04AA6D;  color: white; width: 100%;}
/*END TO ADD*/

span.small {font-size : 10px; font-style: italic;}
summary.elite {display: block; position: relative; background : cyan; font-size: 18px; height: 30px; border: 2.5px inset grey; padding: 6px; cursor: pointer; transform: scaleX(-1);}
summary.elite b {display: inline-block; position: absolute; right: 6px; transform: scaleX(-1);}
summary.elite::after {margin-left: 1ch; display: inline-block; content: '🔽'; transform: rotate(90deg);}
details > summary.elite {list-style-type: none;}
details > summary.elite::-webkit-details-marker {display: none;}
details[open] > summary.elite::after {content: '🔽'; transform: rotate(0deg);transition: 0.2s;}

.box-title {font-size: 16px; font-weight: normal; padding-bottom: 10px;}
.summaryTheme {cursor: pointer; text-align : left; margin-left : 10px; color : white; background: #b1c799;
               height: 25px; width: 89%; position: relative; left: 5%; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0,0,0,0.55);}
.graphes {width : 80%; border: 2px solid orange; border-radius: 10px; box-shadow: 0px 5px 14px 0px #0e1635; margin-left: 5px;}
.stat-box {padding: 5px; width: 100%; color: #0e1635; background-color: #FFFFCC; border-radius: 10px; max-height: 100%; 
           border: 1px solid #949ab0; padding: 20px; border-bottom: 1px solid #949ab0;}
img.icon {width: 24px; height: 24px; vertical-align:middle}
img.iconLegend {width: 18px; height: 18px; vertical-align:middle}
          </style>\n
          """  

#BLOC HTML JAVACSRIPT CANVAS
JSCANVAS = """<script>
        function LineChart(con) {
            // PROPRIETES INITIALISATION GRAPHIQUE
            this.canvas = document.getElementById(con.canvasId);
            this.minX = con.minX;
            this.minY = con.minY;
            this.maxX = con.maxX;
            this.maxY = con.maxY;
            this.unitsPerTickX = con.unitsPerTickX;
            this.unitsPerTickY = con.unitsPerTickY;

            // CONSTANTES
            this.padding = 20;
            this.verticalTickSize = 5;
			this.horizontalTickSize = 8;
            this.axisColor = "#555";
            this.pointRadius = 2;
            this.font = "8pt Arial";
            this.fontHeight = 12;

            // MISE A L'ECHELLE
            this.context = this.canvas.getContext("2d");
            this.rangeX = this.maxX - this.minY;
            this.rangeY = this.maxY - this.minY;
            this.numXTicks = Math.round(this.rangeX / this.unitsPerTickX);
            this.numYTicks = Math.round(this.rangeY / this.unitsPerTickY);
            this.x = 50 //this.getLongestValueWidth() + this.padding * 2;
            this.y = this.padding * 2;
            this.width = this.canvas.width - this.x - this.padding * 2;
            this.height = this.canvas.height - this.y - this.padding - this.fontHeight;
            this.scaleX = this.width / this.rangeX;
            this.scaleY = this.height / this.rangeY;
			this.context.save();

       }

        LineChart.prototype.getLongestValueWidth = function () {
            this.context.font = this.font;
            var longestValueWidth = 0;
            for (var n = 0; n <= this.numYTicks; n++) {
                var value = this.maxY - (n * this.unitsPerTickY);
                longestValueWidth = Math.max(longestValueWidth, this.context.measureText(value).width);
            }
            return longestValueWidth;
        };

        LineChart.prototype.drawXAxis = function (canvas, colorMarker, colorLabel, positionLabel) {
			var canvas = document.getElementById(canvas);
            context = canvas.getContext('2d');
            context.save();
            context.beginPath();
            context.moveTo(this.x, this.y + this.height);
            context.lineTo(this.x + this.width, this.y + this.height);
            context.strokeStyle = colorMarker ; //this.axisColor;
            context.lineWidth = 2;
            context.stroke();

            // DESSIN DES MARQUEURS
            var n = 0;
			while (n < this.numXTicks + 5) {
				context.beginPath();
                context.moveTo((n + 1) * this.width / this.numXTicks + this.x, this.y + this.height);
                context.lineTo((n + 1) * this.width / this.numXTicks + this.x, this.y + this.height - this.horizontalTickSize);
                context.stroke();
				n = n + 25
			}
            // DESSIN DES VALEURS
            context.font = this.font;
            context.fillStyle = colorLabel;
            context.textAlign = positionLabel;
            context.textBaseline = "middle";
			
            var n = 0;
			while (n < this.numXTicks) {
				var label = Math.round((n + 1) * this.maxX / this.numXTicks);
                context.save();
                context.translate((n + 1) * this.width / this.numXTicks + this.x, this.y + this.height + this.padding);
                context.fillText(label, 0, 0);
                context.restore();
				n = n + 25
			}
			context.save();
			context.restore();
        };

        LineChart.prototype.drawYAxis = function (canvas, colorMarker, colorLabel, positionLabel, correction, minAlti) {
			var canvas = document.getElementById(canvas);
            context = canvas.getContext('2d');
            context.save();
            context.beginPath();
            context.moveTo(this.x, this.y);
            context.lineTo(this.x, this.y + this.height);
            context.strokeStyle = colorMarker ; //this.axisColor;
            context.lineWidth = 1;
            context.stroke();
            context.restore();

            // DESSIN DES MARQUEURS
            //for (var n = 0; n < this.numYTicks; n++) {
            var n = 0;
			while (n < this.numYTicks) {
                context.beginPath();
                context.moveTo(this.x, n * this.height / this.numYTicks + this.y);
                context.lineTo(this.x + this.verticalTickSize, n * this.height / this.numYTicks + this.y);
                context.stroke();
                n = n + 10;
            }

            // DESSIN DES VALEURS
            context.font = this.font;
            context.fillStyle = colorLabel;
            context.textAlign = positionLabel;
            context.textBaseline = "middle";

            //for (var n = 0; n < this.numYTicks; n++) {
            var n = 0;
			while (n < this.numYTicks) {
                var value = Math.round((this.maxY - n * this.maxY / this.numYTicks) - ( 2* correction) + minAlti);
                context.save();
                context.translate(this.x - this.padding, n * this.height / this.numYTicks + this.y);
                context.fillText(value, 0, 0);
                context.restore();
                 n = n + 10;
            }
            context.restore();
        };

		
		LineChart.prototype.drawSeuil = function (canvas, dataSeuil, color, width, nivSeuil) {
            var canvas = document.getElementById(canvas);
            context = canvas.getContext('2d');
            context.save();
            this.transformContext();
            /*
			if (nivSeuil == 1) {context.setLineDash([5, 3]);}
			if (nivSeuil == 2) {context.setLineDash([5, 5]);}
			if (nivSeuil == 3) {context.setLineDash([5, 5]);}
            */
			context.lineWidth = width; //*nivSeuil;
            context.strokeStyle = color;
            context.fillStyle = color;
            context.beginPath();
            context.moveTo(dataSeuil[0].x * this.scaleX, dataSeuil[0].y * this.scaleY);
				
             for (var n = 0; n < dataSeuil.length; n++) {
                var point = dataSeuil[n];

                // DESSIN DES SEGMENTS DE LIGNES
                context.lineTo(point.x * this.scaleX, point.y * this.scaleY);
                context.stroke();
				
                context.closePath();
                context.beginPath();
                context.arc(point.x * this.scaleX, point.y * this.scaleY, this.pointRadius, 0, 0.05 * Math.PI, false);
                context.fill();
                context.closePath();

                // POSITIONNEMENT POUR LE PROCHAIN SEGMENT
                context.beginPath();
                context.moveTo(point.x * this.scaleX, point.y * this.scaleY);
            }
            context.restore();
        };


         LineChart.prototype.drawRectangle = function (canvas, x, y, w, h, color) {
	    var canvas = document.getElementById(canvas);
            context = canvas.getContext('2d');
            context.save();
            this.transformContext();
            context.save();
            context.beginPath();
            context.fillStyle = color;
            context.rect(x, y, w, h); 
            context.fill();
            context.restore();
            context.save();
         }; 


        LineChart.prototype.drawArrow = function(canvas, x0, y0, x1, y1, color) {
              var canvas = document.getElementById(canvas);
              context = canvas.getContext('2d');
              context.save();        
              const width = 8;
              const head_len = 16;
              const head_angle = Math.PI / 6;
              const angle = Math.atan2(y1 - y0, x1 - x0);

              context.lineWidth = width;
              context.strokeStyle = color;
              context.fillStyle = color;              

              /* Adjust the point */
              x1 -= width * Math.cos(angle);
              y1 -= width * Math.sin(angle);

              context.beginPath();
              context.moveTo(x0, y0);
              context.lineTo(x1, y1);
              context.stroke();

              context.beginPath();
              context.lineTo(x1, y1);
              context.lineTo(x1 - head_len * Math.cos(angle - head_angle), y1 - head_len * Math.sin(angle - head_angle));
              context.lineTo(x1 - head_len * Math.cos(angle + head_angle), y1 - head_len * Math.sin(angle + head_angle));
              context.closePath();
              context.stroke();
              context.fill();
              context.restore();
              
        };
         //ducon
         LineChart.prototype.drawCircle = function (canvas, centerX, centerY, color){
	     var canvas = document.getElementById(canvas);
             context = canvas.getContext('2d');
             context.save();
             context.beginPath();
             context.arc(centerX, centerY, 5, 0, 2*Math.PI);
             context.fillStyle = color;
             context.fill();
             context.restore();
             context.save();             
 
        };

         LineChart.prototype.drawSimpleLine = function (canvas, dataLine, color, width, isEmpty) {
	    var canvas = document.getElementById(canvas);
            context = canvas.getContext('2d');
            context.save();
            context.lineWidth = width;
            context.strokeStyle = color;
            context.fillStyle = color;
            context.beginPath();
            context.moveTo(dataLine[0].x, dataLine[0].y);

            for (var n = 0; n < dataLine.length; n++) {
                var point = dataLine[n];

                // DESSIN DES SEGMENTS DE LIGNES
                context.lineTo(point.x , point.y);                
                context.stroke();

	        if (isEmpty) {			
                    context.closePath();
                    context.beginPath();
                }     
                context.arc(point.x, point.y, this.pointRadius, 0, 0.05 * Math.PI, false);
                context.fill();
                context.closePath();

                // POSITIONNEMENT POUR LE PROCHAIN SEGMENT
                if (isEmpty) { context.beginPath();}
                context.moveTo(point.x, point.y );
            }
	    context.closePath();
            context.restore();
            context.save();
        };


        LineChart.prototype.drawLine = function (canvas, dataLine, color, width, isBedWater) {
	    var canvas = document.getElementById(canvas);
            context = canvas.getContext('2d');
            context.save();
            this.transformContext();
            context.lineWidth = width;
            if (isBedWater) {context.setLineDash([1.5, 1.5]) ;}
            context.strokeStyle = color;
            context.fillStyle = color;
            context.beginPath();
            context.moveTo(dataLine[0].x * this.scaleX, dataLine[0].y * this.scaleY);

            for (var n = 0; n < dataLine.length; n++) {
                var point = dataLine[n];

                // DESSIN DES SEGMENTS DE LIGNES
                context.lineTo(point.x * this.scaleX, point.y * this.scaleY);
                context.stroke();
				
                context.closePath();
                context.beginPath();
                context.arc(point.x * this.scaleX, point.y * this.scaleY, this.pointRadius, 0, 0.05 * Math.PI, false);
                context.fill();
                context.closePath();

                // POSITIONNEMENT POUR LE PROCHAIN SEGMENT
                context.beginPath();
                context.moveTo(point.x * this.scaleX, point.y * this.scaleY);
            }
	    context.closePath();
            context.restore();
            context.save();
        };

	// FONCTION DESSIN DU TERRAIN / SKY
	LineChart.prototype.drawStars = function (canvas) {
            var canvas = document.getElementById(canvas);
            context = canvas.getContext('2d');
	    var radius = 1;
	    var width = canvas.width; var height = canvas.height; var maxWidth = width-radius; var maxHeight = height-radius;
				
            for(i=0; i < 200; i++){ 
                var centerX = Math.floor(Math.random() * maxWidth);
                var centerY = Math.floor(Math.random() * maxHeight);
                //var radius = Math.floor((Math.random() * 5) + 1);
                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2*Math.PI);
                context.fillStyle = "white";
                context.fill();
                                }
                context.restore();
                context.save();
            
        };
        
        LineChart.prototype.drawTerrain = function (canvas, dataMNT, color1, color2, color3, width, empty, isSky, isNightly) {
			var canvas = document.getElementById(canvas);
            context = canvas.getContext('2d');
            context.save();
            this.transformContext();
            context.lineWidth = width;
	    if (empty) {
                context.strokeStyle = color2;
                context.fillStyle = color2;
            } else if (!isSky) {
                const gradient = context.createLinearGradient(0, 0, 0, 440);
                gradient.addColorStop(0, color1);
                gradient.addColorStop(0.4, color2);
                gradient.addColorStop(1, color3);
		context.fillStyle = gradient;

            } else if (isSky && isNightly) {
                const gradient = context.createLinearGradient(0, 0, 0, 440);
                gradient.addColorStop(0, '#060010');
                gradient.addColorStop(0.06, '#ffc1a0');
                gradient.addColorStop(0.11, '#090016');
                gradient.addColorStop(0.2, '#ffc1a0');
                gradient.addColorStop(0.28, '#fe9c7f');
                gradient.addColorStop(0.55, '#0a0127');
                gradient.addColorStop(0.57, '#0a0129');
		gradient.addColorStop(0.62, '#0c012b');
		gradient.addColorStop(0.68, '#0e0131');
		gradient.addColorStop(0.69, '#0d012f');
		gradient.addColorStop(0.78, '#18023c');
		gradient.addColorStop(0.79, '#19023e');
		gradient.addColorStop(0.81, '#1c0242');
		gradient.addColorStop(0.85, '#22034b');
		gradient.addColorStop(0.92, '#2e045a');
		gradient.addColorStop(0.96, '#2f045e');
		gradient.addColorStop(0.98, '#340464');
		gradient.addColorStop(1, '#370569');
		context.fillStyle = gradient;

            } else if (isSky && color1 == '#F59F22') {
                const gradient = context.createRadialGradient(200, 200, 5, 100, 60, 800);  
                gradient.addColorStop(0, color1); 
                gradient.addColorStop(0.6, color2); 
                gradient.addColorStop(1, color3); 
				context.fillStyle = gradient;
            } else if (isSky && color1 != '#F59F22') {
                const gradient = context.createRadialGradient(600, 50, 5, 100, 60, 1400);
                gradient.addColorStop(0, color1); 
                gradient.addColorStop(0.6, color2); 
                gradient.addColorStop(1, color3);
		context.fillStyle = gradient; 
	    } 
			
            context.beginPath();
            context.moveTo(dataMNT[0].x * this.scaleX, dataMNT[0].y * this.scaleY);

            for (var n = 0; n < dataMNT.length; n++) {
                var point = dataMNT[n];

				if (empty) {
					context.lineTo(point.x * this.scaleX, point.y * this.scaleY);
					context.stroke();
					context.closePath();
					context.beginPath();
					context.arc(point.x * this.scaleX, point.y * this.scaleY, this.pointRadius, 0, 0.05 * Math.PI, false);
					context.fill();
					context.closePath();
					context.beginPath();
					context.moveTo(point.x * this.scaleX, point.y * this.scaleY);
				}else {
				    context.lineTo(point.x * this.scaleX, point.y * this.scaleY);
				}
				
            }
			
			if (!empty) {
				context.lineTo(point.x * this.scaleX, 0);
				context.lineTo(0, 0);
				context.fill();
			}
			context.closePath();
            		context.restore();
			context.save();
            
        };

		// FONCTION DESSIN DE LA RIVIERE / DU FLEUVE
        LineChart.prototype.drawWater = function (canvas, dataWater, color, width) {
			var canvas = document.getElementById(canvas);
            context = canvas.getContext('2d');
            context.save();
            this.transformContext();
            context.lineWidth = width;
			context.strokeStyle = color;
			context.fillStyle = color;
            context.beginPath();
            context.moveTo(dataWater[0].x * this.scaleX, dataWater[0].y * this.scaleY);
			
            for (var n = 0; n < dataWater.length; n++) {
                var point = dataWater[n];
           	    context.lineTo(point.x * this.scaleX, point.y * this.scaleY);
            }
			context.lineTo(point.x * this.scaleX, 0);
			context.fill();
			context.closePath();
            		context.restore();
			context.save();
        };

        // FONCTION DESSIN DU TITRE
		LineChart.prototype.drawTitle = function (canvas, label, color, x, y, px, py, isStroked) {
				var canvas = document.getElementById(canvas);
				context = canvas.getContext('2d');
				//context.font = 'italic 400 14px/2 Unknown Font, sans-serif';
				context.font = "bold 18px Arial";
				context.translate(px, py + this.padding);
				context.fillStyle = color;
				if (isStroked == '1') {
					context.strokeStyle = color;
					context.strokeText(label, x, y);
					} else {
					context.fillText(label, x, y);
					}
				//
				let { width } = context.measureText(label);
				context.fillRect(x, y+4, width, 2);
				context.restore();
				context.save();
		};

                // FONCTION DESSIN D'ETIQUETTES
		LineChart.prototype.drawLabel = function (canvas, label, x, y, px, py, color, isBold, withShadow, police) {
				var canvas = document.getElementById(canvas),
				context = canvas.getContext('2d');
                                if (isBold){
                                    context.font = "bold " + police;
                                }else{
                                    context.font = "normal " + police;
                                }    
				context.translate(px, py + this.padding);
                                context.fillStyle = color;
			
				if (withShadow){
                                    context.shadowOffsetX = 3;
                                    context.shadowOffsetY = 3;
                                    context.shadowBlur = 5;
                                    context.shadowColor = "rgba(255, 255, 255, 0.75)";
                                    context.strokeStyle = "black";
                                    context.strokeText(label, x, y);
                                }else {
                                    context.fillText(label, x, y);
                                }    
				context.restore();
				context.save();
		};
		
              // FONCTION DESSIN D'UNE IMAGE
              LineChart.prototype.drawImage = function (canvas, image, x, y, width, height) {
				var canvas = document.getElementById(canvas),
				context = canvas.getContext('2d');
                                context.save();
				var img = new Image();
				img.addEventListener('load', function(){context.drawImage(img, x, y, width, height);});
				img.src = image;
			
		};
		

            LineChart.prototype.transformContext = function () {
                var context = this.context;
                // déplacement du contexte au centre du canevas
                this.context.translate(this.x, this.y + this.height);
                // Inversion de l'échelle des ordonnées afin qu'elle augmente lorsqu'on se déplace vers le haut.
                context.scale(1, -1);
        };
        </script>
"""
