ResultsDetailledView.vue 3.53 KB
Newer Older
Elouan Le Bars's avatar
Elouan Le Bars committed
1
2
3
<template>
  <div class="results-detailled-view">
    <div class="results-detailled-view-header">
4
      <h1>{{ title }}</h1>
Elouan Le Bars's avatar
Elouan Le Bars committed
5
      <button class="close-btn" @click.prevent="hideView">&#10006;</button>
Elouan Le Bars's avatar
Elouan Le Bars committed
6
    </div>
7
    <div class="results-detailled-view-content">
8
      <div class="results-chart-detailled" v-if="selectedView">
9
        <ResultsChart
10
11
          :key="re_render_results"
          :chart-data="chartData(selectedView)"
12
          :options="chartOptions"
Elouan Le Bars's avatar
Elouan Le Bars committed
13
          :height="80"
14
15
16
        ></ResultsChart>
      </div>
      <p>
Elouan Le Bars's avatar
Elouan Le Bars committed
17
        {{ detailled_results_text }}
18
      </p>
19
20
21
22
      <br/>
      <p v-for="eq of equivalents" :key="eq.message">
        {{ eq.text }}
      </p>
23
    </div>
Elouan Le Bars's avatar
Elouan Le Bars committed
24
25
26
27
  </div>
</template>

<script>
28
29
import ResultsChart from "./ResultsChart.js";
import store from "../store/MainStore.js";
Elouan Le Bars's avatar
Elouan Le Bars committed
30
import { detailled_results_text } from "../options/detailled_results_text.js";
31

32
export default {
33
  props: ["selectedView"],
34
35
  store,
  components: { ResultsChart },
Elouan Le Bars's avatar
Elouan Le Bars committed
36
37
  methods: {
    hideView() {
38
39
40
      this.$root.$emit("hide_results_detailled_view");
    },
  },
41
42
  data() {
    return {
43
      re_render_results: false,
44
45
46
      chartOptions: {
        maintainAspectRatio: true,
        legend: {
47
          display: false,
48
49
        },
        scales: {
50
51
52
53
54
55
          xAxes: [
            {
              stacked: true,
              ticks: {
                max: 100,
                min: 0,
56
57
58
                callback: function(value, index, values) {
                    return (value + ' %');
                }
59
60
61
              },
            },
          ],
Elouan Le Bars's avatar
Elouan Le Bars committed
62
63
          yAxes: [{ stacked: true }],
        },
64
65
66
      },
    };
  },
67
  computed: {
Elouan Le Bars's avatar
Elouan Le Bars committed
68
    chartData: function () {
69
      return (sphere) => store.state.impact_on_spheres_detailled[sphere];
Elouan Le Bars's avatar
Elouan Le Bars committed
70
    },
71
72
73
74
75
76
77
78
79
    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"
      }
    },
Elouan Le Bars's avatar
Elouan Le Bars committed
80
81
82
    detailled_results_text: function () {
      return detailled_results_text[this.selectedView];
    },
83
84
85
86
87
88
89
90
91
92
93
94
    equivalents: function () {
      if(store.state.equivalents.hasOwnProperty(this.selectedView)){
        const ret = [];
        const eqs = store.state.equivalents[this.selectedView]["ONE_KM_CAR"]
        for (const equivalent in eqs) {
          if (eqs[equivalent] !== null) {
            ret.push({ text: "Le "+equivalent+" équivaut à "+eqs[equivalent]+"km en voiture thermique."});
          }
        }
        return ret
      }
    }
Elouan Le Bars's avatar
Elouan Le Bars committed
95
  },
96
97
98
99
100
101
  mounted() {
    this.$root.$on("re_render_results_detailled", () => {
      // We re-render the component as a workaround to force chart to update
      this.re_render_results = !this.re_render_results;
    });
  },
102
};
Elouan Le Bars's avatar
Elouan Le Bars committed
103
104
105
</script>

<style>
106
107
108
.results-detailled-view {
  display: flex;
  flex-direction: column;
Elouan Le Bars's avatar
Elouan Le Bars committed
109
  padding: 60px;
Elouan Le Bars's avatar
Elouan Le Bars committed
110
  background: repeating-linear-gradient(
Elouan Le Bars's avatar
Elouan Le Bars committed
111
112
113
114
115
116
    -45deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0) 10px,
    rgba(0, 0, 0, 0.02) 10px,
    rgba(0, 0, 0, 0.02) 20px
  );
117
118
119
120
121
122
}

/*
 * HEADER
 */

Elouan Le Bars's avatar
Elouan Le Bars committed
123
124
125
126
.results-detailled-view-header {
  width: 100%;
}
.results-detailled-view-header .close {
127
128
129
130
131
132
133
134
135
136
  top: -30px;
  padding-left: 30px;
}

/*
 * CONTENT
 */

.results-detailled-view-content {
  display: block;
Elouan Le Bars's avatar
Elouan Le Bars committed
137
  position: relative;
138
139
}
.results-detailled-view-content p {
Elouan Le Bars's avatar
Elouan Le Bars committed
140
  line-height: 25px;
141
142
143
144
145
146
}

/*
 * CHARTS
 */
.results-chart-detailled {
Elouan Le Bars's avatar
Elouan Le Bars committed
147
148
  margin-bottom: 25px;
  width: 100%;
Elouan Le Bars's avatar
Elouan Le Bars committed
149
150
}
</style>