ResultsDetailledView.vue 3.67 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
50
51
52
53
54
55
        hover: {
           mode: 'nearest',
           intersect: true
         },
         tooltips: {
          mode: 'point',
        },
56
        scales: {
57
58
59
60
61
62
          xAxes: [
            {
              stacked: true,
              ticks: {
                max: 100,
                min: 0,
63
64
65
                callback: function(value, index, values) {
                    return (value + ' %');
                }
66
67
68
              },
            },
          ],
Elouan Le Bars's avatar
Elouan Le Bars committed
69
70
          yAxes: [{ stacked: true }],
        },
71
72
73
      },
    };
  },
74
  computed: {
Elouan Le Bars's avatar
Elouan Le Bars committed
75
    chartData: function () {
76
      return (sphere) => store.state.impact_on_spheres_detailled[sphere];
Elouan Le Bars's avatar
Elouan Le Bars committed
77
    },
78
79
80
81
82
83
84
85
86
    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
87
88
89
    detailled_results_text: function () {
      return detailled_results_text[this.selectedView];
    },
90
91
92
93
94
95
96
97
98
99
100
101
    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
102
  },
103
104
105
106
107
108
  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;
    });
  },
109
};
Elouan Le Bars's avatar
Elouan Le Bars committed
110
111
112
</script>

<style>
113
114
115
.results-detailled-view {
  display: flex;
  flex-direction: column;
Elouan Le Bars's avatar
Elouan Le Bars committed
116
  padding: 60px;
Elouan Le Bars's avatar
Elouan Le Bars committed
117
  background: repeating-linear-gradient(
Elouan Le Bars's avatar
Elouan Le Bars committed
118
119
120
121
122
123
    -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
  );
124
125
126
127
128
129
}

/*
 * HEADER
 */

Elouan Le Bars's avatar
Elouan Le Bars committed
130
131
132
133
.results-detailled-view-header {
  width: 100%;
}
.results-detailled-view-header .close {
134
135
136
137
138
139
140
141
142
143
  top: -30px;
  padding-left: 30px;
}

/*
 * CONTENT
 */

.results-detailled-view-content {
  display: block;
Elouan Le Bars's avatar
Elouan Le Bars committed
144
  position: relative;
145
146
}
.results-detailled-view-content p {
Elouan Le Bars's avatar
Elouan Le Bars committed
147
  line-height: 25px;
148
149
150
151
152
153
}

/*
 * CHARTS
 */
.results-chart-detailled {
Elouan Le Bars's avatar
Elouan Le Bars committed
154
155
  margin-bottom: 25px;
  width: 100%;
Elouan Le Bars's avatar
Elouan Le Bars committed
156
157
}
</style>