Skip to content

GitLab

Commit 032e015d authored by Matt Glorion's avatar Matt Glorion
Browse files

Merge remote-tracking branch 'origin/dev' into dev 

# Conflicts:
#	front/src/components/Results.vue
#	front/src/components/ResultsDetailedView.vue
#	front/src/store/MainStore.js
parents 0a1b27fd a6ca545e
Hide whitespace changes
Inline Side-by-side
Showing with 269 additions and 332 deletions
front/src/components/IncrementButton.vue
View file @ 032e015d
......@@ -12,6 +12,7 @@
-
</button>
<input
@focus="$event.target.select()"
type="text"
name="increment-button-value"
v-bind:value="value"
......@@ -83,15 +84,20 @@ export default {
this.interval = false;
},
input: function (event) {
if (parseInt(event.target.value) > this.min) {
this.$emit("input", parseInt(event.target.value));
var value = parseInt(event.target.value);
if (value > this.min) {
this.newValue = value
this.$emit("input", value);
} else {
this.newValue = this.min
this.$emit("input", this.min);
event.target.value = this.min;
}
if (parseInt(event.target.value) < this.max) {
this.$emit("input", parseInt(event.target.value));
this.newValue = value
this.$emit("input", value);
} else {
this.newValue = this.max
this.$emit("input", this.max);
event.target.value = this.max;
}
......
front/src/components/Results.vue
View file @ 032e015d
......@@ -87,116 +87,10 @@ export default {
this.$root.$emit("re_render_results_detailed");
});
},
exportResults() {
let pdfName = "impactometre-results";
var doc = new jsPDF();
doc.setFont("Helvetica", "Bold");
var line = 20;
var left_space = 20;
doc.text("Impactomètre - Comparatif", left_space, line);
//TODO: fix this workaround by setting a "name" variable inside Scenario component
var headers = document.querySelectorAll(".scenario-header h2");
store.state.scenarios_json.forEach((scenario, index) => {
if (scenario.meetingDuration > 1) {
line = 34;
doc.setFontSize(12);
doc.setFont("Helvetica", "Bold");
doc.text(headers[index].textContent, left_space, line);
doc.setFont("Helvetica", "");
doc.setFontSize(7);
line += 6;
doc.text(
"Nombre de participants : " + String(scenario.numberOfParticipants),
left_space,
line
);
line += 4;
doc.text(
"Durée de la réunion (min) : " + String(scenario.meetingDuration),
left_space,
line
);
line += 6;
doc.text("Logiciel : " + scenario.software.name, left_space, line);
line += 6;
doc.setFont("Helvetica", "Bold");
doc.text("Matériel", left_space, line);
doc.setFont("Helvetica", "");
scenario.hardware.forEach((hardware) => {
if (hardware.qty != 0) {
line += 4;
doc.text(
" - " + String(hardware.qty) + " " + hardware.french,
left_space,
line
);
}
});
line += 6;
doc.setFont("Helvetica", "Bold");
doc.text("Trajets", left_space, line);
doc.setFont("Helvetica", "");
scenario.journey.forEach((journey) => {
line += 4;
var journey_fr = journey_options.find(
(option) => option.name === journey.mean
);
if (journey_fr) {
doc.text(
"- " +
String(journey.distance) +
" km parcourus en " +
journey_fr.french,
left_space,
line
);
}
});
left_space = left_space + 65;
}
});
// Canvas
line = line + 40;
doc.setFontSize(12);
doc.setFont("Helvetica", "Bold");
doc.text("Résultats", 20, line);
line = line + 10;
var all_canvas = document.querySelectorAll(
".results-chart canvas#horizontalbar-chart"
);
all_canvas.forEach((canvas, index) => {
doc.setFontSize(10);
doc.setFont("Helvetica", "Bold");
doc.text(sections_comparatif[index].title, 20, line);
line = line + 4;
var canvasImg = canvas.toDataURL("image/png");
doc.addImage(canvasImg, "PNG", 15, line, 54, 18);
doc.setFont("Helvetica", "");
doc.setFontSize(7);
var sectionText = detailed_results_text[sections_comparatif[index].name];
// var splitText = doc.splitTextToSize(sectionText,100);
doc.text(sectionText, 84, line + 4);
line = line + 40;
});
doc.save(pdfName + ".pdf");
},
display_results_detailed_view(choice) {
this.$root.$emit("display_results_detailed_view", choice);
this.$root.$emit("re_render_results_detailed");
exportResults,
display_results_detailled_view(choice) {
this.$root.$emit("display_results_detailled_view", choice);
this.$root.$emit("re_render_results_detailled");
},
},
computed: {
......
front/src/components/ResultsDetailedView.vue
View file @ 032e015d
......@@ -30,6 +30,7 @@
<script>
import ResultsChart from "./ResultsChart.js";
import store from "../store/MainStore.js";
import { sections_comparatif } from "../options/options.js";
import { detailed_results_text } from "../options/detailed_results_text";
//register custom tooltip positioner for chart
......@@ -89,12 +90,8 @@ export default {
return (sphere) => store.state.impact_on_spheres_detailed[sphere];
},
title: function () {
//TODO: clean this function (code redundancy)
switch(this.selectedView) {
case "HUMAN_HEALTH": return "Impact sur la santé humaine"
case "ECOSYSTEM_QUALITY": return "Impact sur la qualité des écosystèmes"
case "CLIMATE_CHANGE": return "Impact sur le changement climatique"
case "RESOURCES": return "Impact sur les ressources"
if (this.selectedView) {
return sections_comparatif.find(el => el.name == this.selectedView).title;
}
},
detailed_results_text: function () {
......@@ -153,8 +150,10 @@ export default {
.results-detailed-view-content p {
line-height: 25px;
text-align: justify;
}
/*
* CHARTS
*/
......
front/src/components/SinglePage.vue
View file @ 032e015d
......@@ -9,36 +9,33 @@
<h2>A propos</h2>
<br />
<p>
<b>L’Impactomètre</b> est un outil ayant été produit dans le cadre
d’un projet de l’UTC encadré par Yacine Baouch. Il est le fruit d’un
travail réalisé par plusieurs groupes d’étudiants que sont Jules
Farjas, William Boffy, Aurélien Béranger, Clément Brizard, Valentin
Le Gauche, Maria Idrissi, Elouan Le Bars, Matthieu Glorion et Edmond
Giraud.
<b>Impactometre.fr</b> permet de comparer différents scénarios de
réunions selon des critères environnementaux. Son objectif est de
vous aider à faire des choix : est-il préférable d’organiser une
visio-conférence ou de faire déplacer tous les participants ? etc.
</p>
<p>
Cet outil a pour vocation d’évaluer l’impact environnemental d’une
réunion afin que l’utilisateur puisse l’optimiser au mieux, dans une
démarche écologique. L’évaluation de cet impact est réalisée selon
une méthode fortement inspirée de la méthode ACV (Analyse Cycle de
Vie d’un produit). L’impact environnemental d’une réunion est en
effet calculé comme la somme des impacts environnementaux des
matériels utilisés, des transports réalisés et du logiciel de
visioconférence.
Impactometre.fr prend en compte les impacts environnementaux du
matériel utilisé (ordinateurs, vidéoprojecteur…), des transports
réalisés par les participants à la réunion mais aussi ceux de la
visioconférence (transfert de données, logiciel…). L’utilisateur
renseigne donc différentes informations pour décrire
les scénarios de réunions envisagés.
</p>
<p>
L’utilisateur doit renseigner ces différents critères pour que
l’application puisse évaluer l’impact environnemental de la réunion,
selon quatre catégories : l’impact sur la santé humaine, sur la
qualité de l’écosystème, sur le changement climatique et sur les
ressources. Le résultat est calculé dans une unité adaptée pour
chacune de ces catégories et affiché en pourcentages. Il est
normalisé sur le scénario ayant le plus d’impact, celui-ci étant à
100%.
Les résultats sont affichés selon quatre catégories environnementales
: l’impact sur la santé humaine, la qualité de l’écosystème,
le changement climatique et les ressources. Pour chaque catégorie,
le résultat est normalisé par le scénario ayant le plus d’impact,
c’est-à-dire qu’il sera affiché à 100%. Un équivalent est aussi
donné en kilomètres parcourus en voiture thermique.
</p>
<p>
Vous pouvez retrouver l'article sur lequel se basent les calculs
réalisés dans le code
La méthode utilisée par Impactometre.fr est fortement inspirée
d’une Analyse de Cycle de Vie. Les données utilisées proviennent
de la base de données EcoInvent et l’évaluation est réalisée
selon Impact2002+. Vous pouvez retrouver l'article qui décrit
la construction de la méthode d’évaluation
<a
target="_blank"
rel="noopener noreferrer"
......@@ -46,6 +43,17 @@
>à cette adresse.</a
>
</p>
<p>
<b>Impactometre.fr</b> est un outil développé dans le cadre
d’un projet de l’Université de technologie de Compiègne.
Il est le fruit d’un travail réalisé par Aurélien Béranger,
William Boffy, Clément Brizard, Jules Farjas, Edmond Giraud,
Matthieu Glorion, Maria Idrissi, Elouan Le Bars et Valentin
Le Gauche et encadré par Yacine Baouch, enseignant à l’UTC.
</p>
<p>
Impactometre.fr est hébergé par l’association Picasoft.
</p>
<p id="licence">
Licence libre GNU GPL V3 -
<a href="https://gitlab.utc.fr/tx-techno-num/impactometre"
......@@ -58,19 +66,11 @@
<h2>Utilisation</h2>
<br />
<div class="video">
<iframe
src="https://player.vimeo.com/video/436047872"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
<video controls width="80%" >
<source src="../../public/videos/impactometre-utilisation-720.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
</div>
</div>
......@@ -130,11 +130,8 @@ export default {
color: gray;
text-align: right;
}
/*
* HOWTO
*/
.video {
padding: 30% 0 0 0;
position: relative;
.video video{
margin-left: 10%;
margin-right: 10%;
}
</style>
front/src/functions/export_results.js 0 → 100644
View file @ 032e015d
import jsPDF from "jspdf";
import store from "../store/MainStore.js";
import { sections_comparatif, journey_options } from "../options/options.js";
import { detailled_results_text } from "../options/detailled_results_text.js";
export function exportResults() {
let pdfName = "impactometre-resultats";
var doc = new jsPDF();
doc.setFont("Helvetica", "Bold");
var line = 18;
var left_space = 20;
doc.text("Impactometre.fr", left_space, line);
//TODO: fix this workaround by setting a "name" variable inside Scenario component
var headers = document.querySelectorAll(".scenario-header h2");
store.state.scenarios_json.forEach((scenario, index) => {
if (scenario.meetingDuration > 1) {
line = 26;
doc.setFontSize(12);
doc.setFont("Helvetica", "Bold");
doc.text(headers[index].textContent, left_space, line);
doc.setFont("Helvetica", "");
doc.setFontSize(7);
line += 6;
doc.text(
"Nombre de participants : " + String(scenario.numberOfParticipants),
left_space,
line
);
line += 4;
doc.text(
"Durée de la réunion (min) : " + String(scenario.meetingDuration),
left_space,
line
);
line += 6;
doc.text("Logiciel : " + scenario.software.name, left_space, line);
line += 6;
doc.setFont("Helvetica", "Bold");
doc.text("Matériel", left_space, line);
doc.setFont("Helvetica", "");
scenario.hardware.forEach((hardware) => {
if (hardware.qty != 0) {
line += 4;
doc.text(
" - " + String(hardware.qty) + " " + hardware.french,
left_space,
line
);
}
});
line += 6;
doc.setFont("Helvetica", "Bold");
doc.text("Trajets", left_space, line);
doc.setFont("Helvetica", "");
scenario.journey.forEach((journey) => {
line += 4;
var journey_fr = journey_options.find(
(option) => option.name === journey.mean
);
if (journey_fr) {
doc.text(
"- " +
String(journey.distance) +
" km parcourus en " +
journey_fr.french,
left_space,
line
);
}
});
left_space = left_space + 65;
}
});
// Canvas
line = line + 34;
doc.setFontSize(12);
doc.setFont("Helvetica", "Bold");
doc.text("Comparaison des scénarios de réunion", 20, line);
line = line + 10;
var all_canvas = document.querySelectorAll(
".results-chart canvas#horizontalbar-chart"
);
all_canvas.forEach((canvas, index) => {
doc.setFontSize(10);
doc.setFont("Helvetica", "Bold");
doc.text(sections_comparatif[index].title, 20, line);
line = line + 4;
var canvasImg = canvas.toDataURL("image/png", 1);
console.log(canvas.width);
doc.addImage(canvasImg, "PNG", 15, line, 70, canvas.height*70/canvas.width);
doc.setFont("Helvetica", "");
doc.setFontSize(8);
var sectionText = detailled_results_text[sections_comparatif[index].name];
// var splitText = doc.splitTextToSize(sectionText,100);
doc.text(sectionText, 100, line + 4);
line = line + 32;
});
doc.setFontSize(12);
doc.setFont("Helvetica", "Bold");
line = line + 6;
doc.text("A propos d'Impactometre.fr", 20, line);
line = line + 8;
doc.setFont("Helvetica", "");
doc.setFontSize(8);
var about = `Ces comparaisons sont des estimations des impacts environnementaux potentiels. Elles ne constituent pas des mesures réelles.
Les données utilisées proviennent de la base de données EcoInvent et l'évaluation environnementale est réalisée selon Impact2002+.
Vous pouvez retrouver plus d'informations sur la construction de la méthode dans la rubrique « A propos » de Impactometre.fr.
Impactometre.fr a été développé dans le cadre d'un projet de l'Université de technologie de Compiègne et est hébergé par l'association
Picasoft.
Licence libre GNU GPL V3.`;
doc.text(about, 20, line);
doc.save(pdfName + ".pdf");
}
front/src/options/detailed_results_text.js
View file @ 032e015d
export const detailed_results_text = {
HUMAN_HEALTH:
`L'impact sur la santé humaine est mesuré en DALY (Disability Adjusted Life Years)
et exprimé en pourcentage par rapport au scénario ayant le plus d'impact.
Cette méthode d'évaluation consiste à déterminer l'impact en année de vies de la
réunion sur une vie humaine.
Elle prend en compte la toxicité de la réunion sur la santé humaine, les effets respiratoires,
les rayonnements ionisants et la diminution de la couche.`
`L'impact sur la santé humaine est une catégorie de dommage
environnemental quis'exprime en DALY, Disability Adjusted
Life Years (années de vie corrigées du facteur d'incapacité).
Elle prend en compte les indicateurs environnementaux de
la toxicité humaine, des effets respiratoires, des
rayonnements ionisants et la diminution de la couche d'ozone. `
,
ECOSYSTEM_QUALITY:
`L'impact sur la qualité de l'écosystème est mesuré en PDF*m^2*année et exprimé
en pourcentage par rapport au scénario ayant le plus d'impact. Le PDF (Potentially
Disappeared Fraction of species) correspond à la fraction des espèces qui a une
forte probabilité de ne pas se trouver dans une région en raison des impacts
néfastes de la réunion.
Cet impact est mesuré en prenant en compte la diminution de la couche d'ozone,
l'oxydation photochimique, l'écotoxicité aquatique et terrestre, l'acidification
et l'eutrophisation des eaux et des terres ainsi que l'occupation des terres.`
`L'impact sur la qualité de l'écosystème est une catégorie de dommage
environnemental qui s'exprime en PDF*m2*année. Le Potentially
Disappeared Fraction of species (PDF) correspond à la fraction des
espèces qui a une forte probabilité de ne pas se trouver dans une
région. Cette catégorie prend en compte la diminution de la couche
d'ozone, l'oxydation photochimique, l'écotoxicité aquatique et
terrestre, l'acidification et l'eutrophisation des eaux et des terres,
ainsi que l'occupation des terres.`
,
CLIMATE_CHANGE:
`L'impact sur la changement climatique est mesuré en Kg eqCO2 et exprimé en
pourcentage par rapport au scénario ayant le plus d'impact. L'équivalent C02 étant,
pour un gaz à effet de serre, la quantité de dioxyde de carbone qui aurait la même
capacité à retenir le rayonnement solaire.`
`L'impact sur le changement climatique s'exprime en kilogramme
équivalent CO2 (KgeqCO2). Cette catégorie prend en compte les
émissions des gaz à effet de serre.`
,
RESOURCES:
`L'impact sur les ressources considère l'utilisation d'énergies non renouvelables et
l'extraction de minéraux. Il est mesuré en MJ primaire et exprimé en pourcentage par
rapport au scénario ayant le plus d'impact. Cette quantité d'énergie primaire correspond à
la quantité d'énergoe contenue dans les ressources naturelles avant transformation.`
`L'impact sur les ressources est une catégorie de dommage
environnemental qui s'exprime en MJ primaire. Cela regroupe
à la fois l'utilisation d'énergies non renouvelables et
l'extraction de minéraux.`
,
};
front/src/store/MainStore.js
View file @ 032e015d
......@@ -7,127 +7,72 @@ let labels = ["A", "B", "C"];
let labels_detailed = ["Scenario A", "Scenario B", "Scenario C"];
let backgroundColor = ["#e97272", "#e7dc73", "#83bdec"];
var datasets = function () {
return [
{
backgroundColor,
data: [0, 0, 0],
},
];
};
var datasets_detailled = function () {
return [
{
label: "Matériel",
data: [0, 0, 0],
backgroundColor,
},
{
label: "Réseau",
data: [0, 0, 0],
backgroundColor,
},
{
label: "Trajets",
data: [0, 0, 0],
backgroundColor,
},
];
};
const state = {
scenarios_json: [],
equivalents: {},
impact_on_spheres: {
HUMAN_HEALTH: {
labels,
datasets: [
{
backgroundColor,
data: [0, 0, 0],
},
],
datasets: datasets(),
},
ECOSYSTEM_QUALITY: {
labels,
datasets: [
{
backgroundColor,
data: [0, 0, 0],
},
],
datasets: datasets(),
},
CLIMATE_CHANGE: {
labels,
datasets: [
{
backgroundColor,
data: [0, 0, 0],
},
],
datasets: datasets(),
},
RESOURCES: {
labels,
datasets: [
{
backgroundColor,
data: [0, 0, 0],
},
],
datasets: datasets(),
},
},
impact_on_spheres_detailed: {
HUMAN_HEALTH: {
labels: labels_detailed,
datasets: [
{
label: "Matériel",
data: [0, 0, 0],
backgroundColor,
},
{
label: "Réseau",
data: [0, 0, 0],
backgroundColor,
},
{
label: "Trajets",
data: [0, 0, 0],
backgroundColor,
},
],
labels: labels_detailled,
datasets: datasets_detailled(),
},
ECOSYSTEM_QUALITY: {
labels: labels_detailed,
datasets: [
{
label: "Matériel",
data: [0, 0, 0],
backgroundColor,
},
{
label: "Réseau",
data: [0, 0, 0],
backgroundColor,
},
{
label: "Trajets",
data: [0, 0, 0],