Commit b761ae05 authored by Lionel DURAND's avatar Lionel DURAND
Browse files

Ajout de l'indicateur note pour ProximiteCommerces dans la carte

Prise en compte de la note calculée par l'api
Ajout des boutons voir la carte
parent 4197c7b7
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
@customElement('c-bouton-rond')
export class BoutonRond extends LitElement {
static styles = css`
button {
cursor: pointer;
min-width: 2rem;
height: 2rem;
border-radius: 2rem;
border: none;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--c-bouton-rond__background-color, darkgrey);
color: var(--c-bouton-rond__color, black);
}
::slotted(svg) {
fill: var(--c-bouton-rond__color, white);
width: 20px;
height: 20px;
}
button:hover {
background-color: var(--c-bouton-rond__background-color__hover, grey);
color: var(--c-bouton-rond__color__hover, white);
fill: var(--c-bouton-rond__color__hover, white);
}
button:hover ::slotted(svg) {
fill: var(--c-bouton-rond__color__hover, white);
}
`;
@property()
libelle: string = 'X';
@property()
libelleTooltip: string | undefined;
render() {
return html`
<button title=${ifDefined(this.libelleTooltip)}>
<slot name="icone"></slot>
<p>${this.libelle}</p>
</button>
`;
}
}
export const ICONES_SVG = {
carte: `<svg slot="icone" viewbox="0 0 20 22" xmlns="http://www.w3.org/2000/svg">
<path d="m2.62271,18.15398c-0.11022,0.00169 -0.21773,-0.037 -0.30558,-0.11011c-0.13821,-0.1083 -0.22055,-0.28298 -0.22138,-0.46957l0,-11.01368c-0.006,-0.12641 0.02576,-0.25153 0.09045,-0.35621c0.06469,-0.10468 0.1588,-0.18309 0.26783,-0.22345l4.74272,-1.73901c0.10492,-0.03468 0.21667,-0.03468 0.32148,0l5.11702,1.73901l4.58463,-1.68103c0.16079,-0.05836 0.33723,-0.02808 0.47427,0.08113c0.12692,0.10455 0.20432,0.26629 0.21079,0.44058l0,11.01368c0.00023,0.1215 -0.03411,0.24002 -0.09845,0.33886s-0.15526,0.17286 -0.25984,0.21181l-4.74272,1.73901c-0.10492,0.03468 -0.21667,0.03468 -0.32148,0l-5.11702,-1.68103l-4.57409,1.71002c-0.05599,0.00841 -0.11268,0.00841 -0.16868,0l0.00003,0.00002l0,-0.00001l0,-0.00001zm4.74272,-2.89834c0.0507,-0.00815 0.1021,-0.00815 0.1528,0l5.11702,1.73901l4.21575,-1.54778l0,-9.81957l-4.04712,1.51297c-0.10492,0.03468 -0.21667,0.03468 -0.32148,0l-5.11702,-1.71002l-4.21575,1.54778l0,9.79041l4.04712,-1.48398c0.05482,-0.01812 0.11151,-0.02782 0.16868,-0.02898l0.00001,0.00017l0,-0.00001z" id="svg_2"/>
<path d="m12.63512,17.57432c-0.13974,0 -0.27383,-0.06108 -0.37264,-0.16976s-0.15432,-0.2562 -0.15432,-0.40991l0,-10.43401c0,-0.20716 0.10045,-0.39851 0.26349,-0.50202s0.36394,-0.10351 0.52697,0s0.26349,0.29488 0.26349,0.50202l0,10.43401c0,0.15372 -0.05553,0.30122 -0.15432,0.40991s-0.2329,0.16976 -0.37264,0.16976l-0.00002,0z" id="svg_3"/>
<path d="m7.36543,15.83531c-0.13974,0 -0.27383,-0.06108 -0.37264,-0.16976s-0.15432,-0.2562 -0.15432,-0.40991l0,-10.43401c0,-0.20716 0.10045,-0.39851 0.26349,-0.50202s0.36394,-0.10351 0.52697,0s0.26349,0.29488 0.26349,0.50202l0,10.43401c0,0.15372 -0.05553,0.30122 -0.15432,0.40991s-0.2329,0.16976 -0.37264,0.16976l-0.00002,0z" id="svg_4"/>
</svg>`
};
......@@ -20,6 +20,7 @@ export const IDS_INDICATEURS = {
sauParHabitant: 'sau-par-habitant',
politiqueArtificialisation: 'politique-artificialisation',
rythmeArtificialisation: 'rythme-artificialisation',
noteProximiteCommerces: 'note-proximite-commerces',
distancesPlusProchesCommerces: 'distances-plus-proches-commerces',
partPopulationDependanteVoiture: 'part-population-dependante-voiture'
};
......@@ -240,6 +241,18 @@ export function creerIndicateurs(systemeAlimentaire: SystemeAlimentaire): Indica
"Cet indicateur correspond au ratio entre le nombre d'hectares agricoles, naturels et forestiers artificialisés sur un an et la surface agricole utile disponible. Cette valeur doit tendre vers zéro dans le cadre de l'objectif de Zéro Artificialisation Nette.",
estCliquable: false
},
{
id: IDS_INDICATEURS.noteProximiteCommerces,
idMaillon: IDS_MAILLONS.proximiteCommerces,
libelle: "Évaluation globale de l'axe Proximité aux commerces",
description: '',
estCliquable: true,
icone: '<svg width="128px" height="128px" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet"><path d="M79.69 62.69c7.36 15.65 30.45 32.94 32.41 42.77c1.34 6.7-3.33 12.26-9.19 11.2c-6.6-1.19-6.91-10.69-4.31-17.99c6.54-18.38 8.79-28.99 6.53-38.95l-1.08-4.68" fill="none" stroke="#616161" stroke-width="6" stroke-miterlimit="10"></path><path d="M80.82 56.1c-1.87 0-1.14-1.61-1.14-3.6V25.92c0-1.99-.73-3.6 1.14-3.6s5.12 1.11 5.12 3.6V52.5c0 1.99-3.25 3.6-5.12 3.6z" fill="#82aec0"></path><path d="M82.1 113.93V27.96C82.1 14.73 71.37 4 58.14 4H34.96C21.72 4 11 14.73 11 27.96v85.97c-3.3.97-5.71 4.02-5.71 7.63v.3c0 1.18.96 2.14 2.14 2.14h78.24c1.18 0 2.14-.96 2.14-2.14v-.3a7.95 7.95 0 0 0-5.71-7.63z" fill="#f44336"></path><path d="M65.68 56.57H26.93c-1.77 0-3.21-1.44-3.21-3.21V22.42c0-1.77 1.44-3.21 3.21-3.21h38.75c1.77 0 3.21 1.44 3.21 3.21v30.93a3.21 3.21 0 0 1-3.21 3.22z" fill="#fff"></path><path fill="#9e9e9e" d="M32.22 29.6h29.31v7.64H32.22z"></path><path fill="#9e9e9e" d="M32.22 41.36h29.31V49H32.22z"></path><path d="M24.13 47c-.05.52-.81.52-.86.01c-.74-7.27-1.16-14.55-1.48-21.82c-.47-4.02 2.63-7.49 6.78-7.21c11.79-.35 23.64-.35 35.43-.01c4.14-.28 7.27 3.19 6.79 7.21c-.32 7.28-.75 14.57-1.49 21.85c-.05.52-.81.52-.86 0c-.77-7.53-1.19-15.07-1.53-22.59a2.11 2.11 0 0 0-.09-.45c-.25-.9-1.12-1.65-2.02-1.56c-.48.02-36.58.01-37.04-.01c-.9-.09-1.77.66-2.02 1.57c-.04.15-.07.3-.09.45c-.34 7.51-.75 15.04-1.52 22.56z" fill="#82aec0"></path><ellipse cx="46.31" cy="84.08" rx="16.79" ry="17.89" fill="#f5f5f5"></ellipse><path d="M38.87 86.6c0-4.37 7.43-12.95 7.43-12.95s7.43 8.58 7.43 12.95s-3.33 7.92-7.43 7.92s-7.43-3.55-7.43-7.92z" fill="#212121"></path><path fill="#c62828" d="M11 110.03h71.1v3.89H11z"></path><path d="M17.45 22.04c.88-4.96 5.2-11.1 14.13-11.1" fill="none" stroke="#ff7555" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10"></path><g><path fill="#9e9e9e" d="M108.059 58.98l-5.796 1.472l-.955-3.76l5.796-1.472z"></path><path d="M104.77 29.85l6.73-12.2c.5-.9 1.16-1.7 1.95-2.35c2.46-2.02 7.97-6.58 9.13-7.84c1.51-1.64-1.29-5.1-3.28-3.73c-1.56 1.08-7.3 6.12-9.69 8.23c-.7.61-1.28 1.34-1.73 2.16l-7.07 12.82l3.96 2.91z" fill="#9e9e9e"></path><path d="M100.66 37.73l9.42-1.95l3.32 11.82c.53 2.08-.43 2.68-2.27 3.15l-6.66 1.85m-5.22-15.27l8.05 18.35l7.62-2.13c3.19-.93 3.1-3.53 2.61-5.46l-3.93-14.4l-14.35 3.64z" fill="#757575"></path><path d="M103.82 21.12l4.87 2.74c.65.36.89 1.17.56 1.83l-.97 1.94l2.25 1.7a8.565 8.565 0 0 1 3.16 4.77l.27 1.05l-6.96 1.79a2.742 2.742 0 0 0-1.95 3.34l3.21 12.63c.32 1.36.4 2.48-.97 2.78l-5.55 1.38c-1.32.29-2.63-.52-2.96-1.83L94.9 39.95c-1.74-6.85.94-9.17 1.5-10.3s3.5-4.21 3.5-4.21l2.01-3.76c.37-.69 1.23-.94 1.91-.56z" fill="#f44336"></path><path fill="none" stroke="#ff7555" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M106.8 29.34l-4.83-2.42"></path></g></svg>',
style: stylesIndicateurNotes,
nomIndicateurRequeteApi: 'proximiteCommerces.indicateurGlobal',
champValeurReponseApi: 'note',
champMessageReponseApi: 'message'
},
{
id: IDS_INDICATEURS.partPopulationDependanteVoiture,
idMaillon: IDS_MAILLONS.proximiteCommerces,
......
......@@ -458,6 +458,10 @@
"sauTotaleHa": 27879427
},
"proximiteCommerces": {
"indicateurGlobal": {
"message": "",
"note": 8
},
"indicateursParTypesCommerces": [
{
"typeCommerce": "BOULANGERIE_PATISSERIE",
......
......@@ -747,79 +747,78 @@ describe('Test interface API Diagnostic...', () => {
});
it("Mapper le retour JSON dans l'objet du domaine Diagnostic.populationAgricole", () => {
expect(diagnostic.proximiteCommerces).toEqual({
indicateursProximiteCommerces: [
{
distancePlusProcheCommerceMetres: 870.51,
pourcentagePopulationAccesAPied: 72,
pourcentagePopulationAccesAVelo: 89,
pourcentagePopulationDependanteVoiture: 11,
typeCommerce: {
code: 'BOULANGERIE_PATISSERIE',
libelle: 'Boulangerie pâtisserie'
}
},
{
distancePlusProcheCommerceMetres: 1404.28,
pourcentagePopulationAccesAPied: 59,
pourcentagePopulationAccesAVelo: 80,
pourcentagePopulationDependanteVoiture: 20,
typeCommerce: {
code: 'BOUCHERIE_POISSONNERIE',
libelle: 'Boucherie / Poissonnerie'
}
},
{
distancePlusProcheCommerceMetres: 953.95,
pourcentagePopulationAccesAPied: 70,
pourcentagePopulationAccesAVelo: 87,
pourcentagePopulationDependanteVoiture: 13,
typeCommerce: {
code: 'COMMERCE_GENERALISTE',
libelle: 'Commerce généraliste'
}
},
{
distancePlusProcheCommerceMetres: 3092.8,
pourcentagePopulationAccesAPied: 33,
pourcentagePopulationAccesAVelo: 63,
pourcentagePopulationDependanteVoiture: 37,
typeCommerce: {
code: 'COMMERCE_SPECIALISE',
libelle: 'Commerce spécialisé'
}
},
{
distancePlusProcheCommerceMetres: 1580.39,
pourcentagePopulationAccesAPied: 59,
pourcentagePopulationAccesAVelo: 80,
pourcentagePopulationDependanteVoiture: 20,
typeCommerce: {
code: 'TOUS_MOYENNE',
libelle: 'Commerce moyen'
}
},
{
distancePlusProcheCommerceMetres: 651.88,
pourcentagePopulationAccesAPied: 79,
pourcentagePopulationAccesAVelo: 93,
pourcentagePopulationDependanteVoiture: 7,
typeCommerce: {
code: 'TOUS_PLUS_PROCHE',
libelle: 'Commerce le plus proche'
}
},
{
distancePlusProcheCommerceMetres: 3257.54,
pourcentagePopulationAccesAPied: 30,
pourcentagePopulationAccesAVelo: 60,
pourcentagePopulationDependanteVoiture: 40,
typeCommerce: {
code: 'TOUS_PLUS_LOIN',
libelle: 'Commerce le plus loin'
}
expect(diagnostic.proximiteCommerces.indicateurSynthese.note.getValeurDecimaleOuNULL()).toEqual(8);
expect(diagnostic.proximiteCommerces.indicateursProximiteCommerces).toEqual([
{
distancePlusProcheCommerceMetres: 870.51,
pourcentagePopulationAccesAPied: 72,
pourcentagePopulationAccesAVelo: 89,
pourcentagePopulationDependanteVoiture: 11,
typeCommerce: {
code: 'BOULANGERIE_PATISSERIE',
libelle: 'Boulangerie pâtisserie'
}
]
});
},
{
distancePlusProcheCommerceMetres: 1404.28,
pourcentagePopulationAccesAPied: 59,
pourcentagePopulationAccesAVelo: 80,
pourcentagePopulationDependanteVoiture: 20,
typeCommerce: {
code: 'BOUCHERIE_POISSONNERIE',
libelle: 'Boucherie / Poissonnerie'
}
},
{
distancePlusProcheCommerceMetres: 953.95,
pourcentagePopulationAccesAPied: 70,
pourcentagePopulationAccesAVelo: 87,
pourcentagePopulationDependanteVoiture: 13,
typeCommerce: {
code: 'COMMERCE_GENERALISTE',
libelle: 'Commerce généraliste'
}
},
{
distancePlusProcheCommerceMetres: 3092.8,
pourcentagePopulationAccesAPied: 33,
pourcentagePopulationAccesAVelo: 63,
pourcentagePopulationDependanteVoiture: 37,
typeCommerce: {
code: 'COMMERCE_SPECIALISE',
libelle: 'Commerce spécialisé'
}
},
{
distancePlusProcheCommerceMetres: 1580.39,
pourcentagePopulationAccesAPied: 59,
pourcentagePopulationAccesAVelo: 80,
pourcentagePopulationDependanteVoiture: 20,
typeCommerce: {
code: 'TOUS_MOYENNE',
libelle: 'Commerce moyen'
}
},
{
distancePlusProcheCommerceMetres: 651.88,
pourcentagePopulationAccesAPied: 79,
pourcentagePopulationAccesAVelo: 93,
pourcentagePopulationDependanteVoiture: 7,
typeCommerce: {
code: 'TOUS_PLUS_PROCHE',
libelle: 'Commerce le plus proche'
}
},
{
distancePlusProcheCommerceMetres: 3257.54,
pourcentagePopulationAccesAPied: 30,
pourcentagePopulationAccesAVelo: 60,
pourcentagePopulationDependanteVoiture: 40,
typeCommerce: {
code: 'TOUS_PLUS_LOIN',
libelle: 'Commerce le plus loin'
}
}
]);
});
});
......@@ -120,7 +120,10 @@ export function traduireJsonEnDiagnostic(diagJson: any): Diagnostic {
diagJson.politiqueFonciere.partLogementsVacants2013,
diagJson.politiqueFonciere.partLogementsVacants2018
),
new ProximiteCommerces(creerListeIndicateursProximitesCommerces(diagJson.proximiteCommerces.indicateursParTypesCommerces))
new ProximiteCommerces(
diagJson.proximiteCommerces.indicateurGlobal.note,
creerListeIndicateursProximitesCommerces(diagJson.proximiteCommerces.indicateursParTypesCommerces)
)
);
}
......
......@@ -16,3 +16,10 @@ export function chargerPageDiagnostic(idTerritoire: string, idEchelleTerritorial
? (window.location.href = `diagnostic.html?idTerritoire=${idTerritoire}&echelleTerritoriale=${idEchelleTerritoriale}`)
: (window.location.href = `diagnostic.html?idTerritoire=${idTerritoire}`);
}
export function genererLienCarte(idTerritoire?: string, idEchelleTerritoriale?: string, idIndicateur?: string): string | undefined {
if (!idTerritoire || !idEchelleTerritoriale || !idIndicateur) return undefined;
else {
return `./carte.html?idTerritoire=${idTerritoire}&echelleTerritoriale=${idEchelleTerritoriale}&idIndicateur=${idIndicateur}`;
}
}
......@@ -122,6 +122,6 @@ export function creerDiagnosticVide(territoire: Territoire) {
new ClassesSuperficies(0, 0, 0, 0, 0)
),
new PolitiqueFonciere(new IndicateurSynthese(0, ''), 0, 0, '', 0, 0),
new ProximiteCommerces([new IndicateursProximiteCommercesParTypeCommerce({ code: '', libelle: '' }, 0, 0, 0, 0)])
new ProximiteCommerces(0, [new IndicateursProximiteCommercesParTypeCommerce({ code: '', libelle: '' }, 0, 0, 0, 0)])
);
}
import { customElement, state } from 'lit/decorators.js';
import { css, html, LitElement } from 'lit';
import { Indicateur } from '../../commun/domaines/Indicateur';
import { ICONES_SVG } from '../../commun/configuration/icones_svg';
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
import { BoutonRond } from '../../commun/composants/BoutonRond';
BoutonRond;
@customElement('c-titre-indicateur')
export class TitreIndicateur extends LitElement {
......@@ -17,20 +21,12 @@ export class TitreIndicateur extends LitElement {
margin: 0;
}
button {
c-bouton-rond {
--c-bouton-rond__background-color: var(--gris2);
--c-bouton-rond__background-color__hover: var(--turquoise);
--c-bouton-rond__color: var(--bleu-marine);
--c-bouton-rond__color__hover: var(--blanc);
margin-left: 0.5rem;
cursor: pointer;
width: 2rem;
height: 2rem;
border-radius: 2rem;
border: none;
display: grid;
place-items: center;
}
button:hover {
background-color: var(--c-texte-surbrillance);
color: white;
}
.details {
......@@ -60,13 +56,11 @@ export class TitreIndicateur extends LitElement {
@state()
private description: string = '';
//TODO : calcul n'est jamais utilisé.. a virer ?
@state()
private calcul: string = '';
private lienMethodologie: string = '';
// TODO : state pas utile pour l'instant, on peut virer cet attribut et mettre la valeur "sources-de-donnees" directement en dur dans le render
@state()
private lienMethodologie: string = '';
private lienCarte?: string;
@state()
private visible = true;
......@@ -75,11 +69,15 @@ export class TitreIndicateur extends LitElement {
this.visible = true;
}
// TODO : remplacer le param de type indicateur par 2 param de type string (titre et description). Permet d'etre indépendant ici du domaine (quand on peut c'est mieux)
afficher(indicateur: Indicateur) {
this.titre = indicateur.libelle;
this.description = indicateur.description;
this.lienMethodologie = 'sources-de-donnees';
private ouvrirLienCarte() {
window.open(this.lienCarte, '_self');
}
afficher(titre: string, description: string, lienMethodologie: string, lienCarte?: string) {
this.titre = titre;
this.description = description;
this.lienMethodologie = lienMethodologie;
this.lienCarte = lienCarte;
}
firstUpdated() {
......@@ -95,12 +93,16 @@ export class TitreIndicateur extends LitElement {
render() {
let titreHTML = html` <div class="titre">
<h3>${this.titre}</h3>
<button @click="${this.rendreVisible}">?</button>
<c-bouton-rond @click="${this.rendreVisible}" libelle="?" libelleTooltip="Plus d'infos sur cet indicateur"></c-bouton-rond>
${this.lienCarte
? html`<c-bouton-rond @click="${this.ouvrirLienCarte}" libelle="" libelleTooltip="Voir la carte">
${unsafeSVG(ICONES_SVG.carte)}
</c-bouton-rond>`
: ''}
</div>`;
let detailHTML = this.visible
? html` <div class="details">
<div>${this.description}</div>
<div>${this.calcul}</div>
<a href="./methodologie.html#${this.lienMethodologie}">Voir méthodologie</a>.
</div>`
: ``;
......
import { Afficheur } from '../../commun/controleurs/Afficheur';
import { Levier } from '../../commun/domaines/Levier';
import { Maillon } from '../../commun/domaines/Maillon';
import { sourcesDonnees } from '../../commun/sources-donnees';
import { injecterHtmlParIdElement } from '../../commun/vues';
import { AllerPlusLoin } from '../composants/AllerPlusLoin';
......@@ -14,6 +12,7 @@ import { ChartDistancesAuxCommerces } from '../vues/charts/ChartDistancesAuxComm
import { Figure } from '../composants/Figure';
import { IDS_INDICATEURS } from '../../commun/configuration/indicateurs';
import { IDS_MAILLONS } from '../../commun/configuration/maillons';
import { genererLienCarte } from '../../commun/routeur';
// Init explicite de chaque module pour forcer la conservation de l'import dans le js compilé
// Car s'il n'est pas référencé dans le code autrement que par son type, TSC va supprimer l'import
......@@ -55,8 +54,16 @@ export class AfficheurDiagnosticProximiteCommerces implements Afficheur<Rapport>
);
this.titreIndicateurPopulationDependanteVoiture.afficher(
rapport.systemeAlimentaire?.getIndicateur(IDS_INDICATEURS.partPopulationDependanteVoiture)!
rapport.systemeAlimentaire?.getIndicateur(IDS_INDICATEURS.partPopulationDependanteVoiture)!.libelle,
rapport.systemeAlimentaire?.getIndicateur(IDS_INDICATEURS.partPopulationDependanteVoiture)!.description,
'sources-de-donnees',
genererLienCarte(
rapport.getIdTerritoireLienCarte(),
rapport.getIdEchelleTerritorialeLienCarte(),
IDS_INDICATEURS.partPopulationDependanteVoiture
)
);
injecterHtmlParIdElement(
'texte-population-dependante-voiture',
`Le graphique ci-dessous présente la part de la population théoriquement
......@@ -90,7 +97,12 @@ export class AfficheurDiagnosticProximiteCommerces implements Afficheur<Rapport>
`Source : Les Greniers d'Abondance, à partir de la ${sourcesDonnees.base_permanente_equipements.source}, la ${sourcesDonnees.commerces_osm.source} et les ${sourcesDonnees.carroyage_insee.source}.`
);
this.titreIndicateurDistancesAuxCommerces.afficher(rapport.systemeAlimentaire.getIndicateur(IDS_INDICATEURS.distancesPlusProchesCommerces)!);
this.titreIndicateurDistancesAuxCommerces.afficher(
rapport.systemeAlimentaire.getIndicateur(IDS_INDICATEURS.distancesPlusProchesCommerces)!.libelle,
rapport.systemeAlimentaire.getIndicateur(IDS_INDICATEURS.distancesPlusProchesCommerces)!.description,
'sources-de-donnees'
);
injecterHtmlParIdElement(
'texte-distances-aux-commerces',
`Le schéma ci-dessous présente la distance moyenne par habitant pour atteindre
......
......@@ -119,7 +119,7 @@ export class AfficheurDiagnosticSynthese implements Afficheur<Rapport> {
maillon.nom,
indicateurSynthese?.note.getValeurDecimaleOuNULL(),
indicateurSynthese?.message,
EchelleTerritoriale.listerTousLesCodeCategories.includes(idEchelleTerritorialeActive) && maillon.id != IDS_MAILLONS.proximiteCommerces,
EchelleTerritoriale.listerTousLesCodeCategories.includes(idEchelleTerritorialeActive),
idTerritoirePrincipal,
idEchelleTerritorialeActive
);
......
......@@ -7,7 +7,7 @@ import { PopulationAgricole } from './PopulationAgricole';
import { PolitiqueFonciere } from './PolitiqueFonciere';
import { ClassesAges } from './ClassesAges';
import { ClassesSuperficies } from './ClassesSuperficies';
import { IndicateursProximiteCommercesParTypeCommerce, ProximiteCommerces } from './proximite-commerces/ProximiteCommerces';
import { ProximiteCommerces } from './proximite-commerces/ProximiteCommerces';
describe('Tests de la classe Diagnostic', () => {
it('Valider le calcul des champs dynamiques', () => {
......@@ -59,7 +59,7 @@ function creerDiagnostic() {
new ClassesSuperficies(0, 0, 0, 0, 0)
),
new PolitiqueFonciere(new IndicateurSynthese(0, ''), 0, 0, '', 0, 0),
new ProximiteCommerces([])
new ProximiteCommerces(0, [])
);
return diagnostic;
......@@ -99,6 +99,6 @@ function creerDiagnosticPays() {
new ClassesSuperficies(0, 0, 0, 0, 0)
),
new PolitiqueFonciere(new IndicateurSynthese(0, ''), 0, 0, '', 0, 0),
new ProximiteCommerces([])
new ProximiteCommerces(0, [])
);
}
......@@ -17,11 +17,11 @@ describe('Tests de la classe Proximité aux commerces', () => {
70
);
let proximitéCommerces = new ProximiteCommerces([indicateursProximiteCommerces1, indicateursProximiteCommerces2]);
let proximitéCommerces = new ProximiteCommerces(3, [indicateursProximiteCommerces1, indicateursProximiteCommerces2]);
proximitéCommerces.setProximiteCommercesPays(proximitéCommerces);
expect(proximitéCommerces.indicateursProximiteCommercesParTypeCommerce('TOUS_MOYENNE')!.distancePlusProcheCommerceMetres).toEqual(600);
expect(proximitéCommerces.indicateurSynthese?.note.getValeurDecimaleOuNULL()).toEqual(3.1);
expect(proximitéCommerces.indicateurSynthese?.note.getValeurDecimaleOuNULL()).toEqual(3);
expect(proximitéCommerces.indicateurSynthese?.message).toEqual(
`<strong>31%</strong> de la population a accès à différents types de commerces à moins de 3 kilomètres de son domicile, c’est-à-dire en moins de 15 minutes à vélo.`
);
......
......@@ -2,29 +2,30 @@ import { IndicateurSynthese } from '../IndicateurSynthese';
export class ProximiteCommerces {
private proximiteCommercesPays?: ProximiteCommerces;
public readonly indicateurSynthese: IndicateurSynthese;
public indicateursProximiteCommerces: IndicateursProximiteCommercesParTypeCommerce[];
constructor(indicateursProximiteCommerces: IndicateursProximiteCommercesParTypeCommerce[]) {
constructor(public readonly note: number | null, indicateursProximiteCommerces: IndicateursProximiteCommercesParTypeCommerce[]) {
this.indicateursProximiteCommerces = indicateursProximiteCommerces;
this.indicateurSynthese = new IndicateurSynthese(
this.note,
this.construireMessageSynthese(
this.note,
this.indicateursProximiteCommercesParTypeCommerce('TOUS_MOYENNE')?.pourcentagePopulationAccesAVelo
)
);
}
setProximiteCommercesPays(proximiteCommercesPays: ProximiteCommerces) {
this.proximiteCommercesPays = proximiteCommercesPays;
}
get noteSynthese() {
return this.indicateursProximiteCommercesParTypeCommerce('TOUS_MOYENNE')!.pourcentagePopulationAccesAVelo / 10;
}
get messageSynthese() {
return `<strong>${
this.indicateursProximiteCommercesParTypeCommerce('TOUS_MOYENNE')!.pourcentagePopulationAccesAVelo
}%</strong> de la population a accès à différents types de commerces à moins de 3 kilomètres de son domicile, c’est-à-dire en moins de 15 minutes à vélo.`;
}
get indicateurSynthese() {
return new IndicateurSynthese(this.noteSynthese, this.messageSynthese);
private construireMessageSynthese(note: number | null, pourcentagePopulationAccesAVelo: number | null | undefined) {
if (note == null || pourcentagePopulationAccesAVelo == null) {
return 'Données non disponibles';
}
return `<strong>${pourcentagePopulationAccesAVelo}%</strong> de la population a accès à différents types de commerces à moins de 3 kilomètres de son domicile, c’est-à-dire en moins de 15 minutes à vélo.`;
}
get messageDetaille() {
......
//TODO virer boutons pour PAT etc.
import { ICONES_SVG } from '../../commun/configuration/icones_svg';
import { genererLienCarte } from '../../commun/routeur';
export function getHtmlBoutonLienCarte(
idTerritoire: string | undefined,
idEchelleTerritoriale: string | undefined,
......@@ -7,14 +10,10 @@ export function getHtmlBoutonLienCarte(
if (!idTerritoire || !idEchelleTerritoriale || !idIndicateur) return ``;
else {
return `
<a class="cmp__bouton__lien-carte" href="./carte.html?idTerritoire=${idTerritoire}&echelleTerritoriale=${idEchelleTerritoriale}&idIndicateur=${idIndicateur}">
<a class="cmp__bouton__lien-carte" href="${genererLienCarte(idTerritoire, idEchelleTerritoriale, idIndicateur)}">
<p class="masquer-sur-mobile-grand">Voir la carte</p>
<p class="masquer-par-defaut afficher-sur-mobile-grand">Carte</p>
<svg viewbox="0 0 20 22" xmlns="http://www.w3.org/2000/svg">
<path d="m2.62271,18.15398c-0.11022,0.00169 -0.21773,-0.037 -0.30558,-0.11011c-0.13821,-0.1083 -0.22055,-0.28298 -0.22138,-0.46957l0,-11.01368c-0.006,-0.12641 0.02576,-0.25153 0.09045,-0.35621c0.06469,-0.10468 0.1588,-0.18309 0.26783,-0.22345l4.74272,-1.73901c0.10492,-0.03468 0.21667,-0.03468 0.32148,0l5.11702,1.73901l4.58463,-1.68103c0.16079,-0.05836 0.33723,-0.02808 0.47427,0.08113c0.12692,0.10455 0.20432,0.26629 0.21079,0.44058l0,11.01368c0.00023,0.1215 -0.03411,0.24002 -0.09845,0.33886s-0.15526,0.17286 -0.25984,0.21181l-4.74272,1.73901c-0.10492,0.03468 -0.21667,0.03468 -0.32148,0l-5.11702,-1.68103l-4.57409,1.71002c-0.05599,0.00841 -0.11268,0.00841 -0.16868,0l0.00003,0.00002l0,-0.00001l0,-0.00001zm4.74272,-2.89834c0.0507,-0.00815 0.1021,-0.00815 0.1528,0l5.11702,1.73901l4.21575,-1.54778l0,-9.81957l-4.04712,1.51297c-0.10492,0.03468 -0.21667,0.03468 -0.32148,0l-5.11702,-1.71002l-4.21575,1.54778l0,9.79041l4.04712,-1.48398c0.05482,-0.01812 0.11151,-0.02782 0.16868,-0.02898l0.00001,0.00017l0,-0.00001z" id="svg_2"/>
<path d="m12.63512,17.57432c-0.13974,0 -0.27383,-0.06108 -0.37264,-0.16976s-0.15432,-0.2562 -0.15432,-0.40991l0,-10.43401c0,-0.20716 0.10045,-0.39851 0.26349,-0.50202s0.36394,-0.10351 0.52697,0s0.26349,0.29488 0.26349,0.50202l0,10.43401c0,0.15372 -0.05553,0.30122 -0.15432,0.40991s-0.2329,0.16976 -0.37264,0.16976l-0.00002,0z" id="svg_3"/>
<path d="m7.36543,15.83531c-0.13974,0 -0.27383,-0.06108 -0.37264,-0.16976s-0.15432,-0.2562 -0.15432,-0.40991l0,-10.43401c0,-0.20716 0.10045,-0.39851 0.26349,-0.50202s0.36394,-0.10351 0.52697,0s0.26349,0.29488 0.26349,0.50202l0,10.43401c0,0.15372 -0.05553,0.30122 -0.15432,0.40991s-0.2329,0.16976 -0.37264,0.16976l-0.00002,0z" id="svg_4"/>
</svg>
${ICONES_SVG.carte}
</a>
`;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment