<template> <div> <v-container v-if="$store.getters['site/getSettings'].includes('matrix')" class="my-5"> <v-card flat> <v-card-title class="text-h5">Prototyping Matrix <dialog-info> <template v-slot:title>Prototyping Matrix</template> <template v-slot:text> In the “Prototyping Matrix” the columns show the human-centered design lenses, and the rows show the prototyping purposes. This matrix gives an overview of the effort spent in relation to the success in concluding defintions-of-done on the development of the product concept. The higher the number the better. </template> </dialog-info> </v-card-title> <v-card-text v-if="!getMatrix"> <v-skeleton-loader type="image"></v-skeleton-loader> </v-card-text> <v-card-text v-else> <v-hover v-slot="{ hover }"> <v-row no-gutters class="matrix text-uppercase font-weight-regular body-2"> <v-col cols="3"> <v-row no-gutters class="outer pa-0 my-1 mr-1 align-center justify-center text-center">Purpose/<br>Lens</v-row> <v-row no-gutters class="outer pa-0 my-1 mr-1 align-center justify-center"> <span v-if="hover">Explore</span> <span v-else>🧭 Exp</span> </v-row> <v-row no-gutters class="outer pa-0 my-1 mr-1 align-center justify-center text-center"> <span v-if="hover">Commu-<br>nicate</span> <span v-else>🗣 Com</span> </v-row> <v-row no-gutters class="outer pa-0 my-1 mr-1 align-center justify-center"> <span v-if="hover">Evaluate</span> <span v-else>🔎 Eva</span> </v-row> </v-col> <v-col cols="3"> <v-row no-gutters class="outer pa-0 my-1 mr-1 align-center justify-center text-center"> <span v-if="hover">Desira-<br>bility</span> <span v-else>💡 Des</span> </v-row> <v-row no-gutters class="inner pa-0 my-1 mr-1 align-center justify-center" :style="styleObjectMatrix(getMatrix.counts_normalized[0][0])">{{ parseFloat(getMatrix.counts[0][0]).toFixed(2) }}</v-row> <v-row no-gutters class="inner pa-0 my-1 mr-1 align-center justify-center" :style="styleObjectMatrix(getMatrix.counts_normalized[1][0])">{{ parseFloat(getMatrix.counts[1][0]).toFixed(2) }}</v-row> <v-row no-gutters class="inner pa-0 my-1 mr-1 align-center justify-center" :style="styleObjectMatrix(getMatrix.counts_normalized[2][0])">{{ parseFloat(getMatrix.counts[2][0]).toFixed(2) }}</v-row> </v-col> <v-col cols="3"> <v-row no-gutters class="outer pa-0 my-1 mr-1 align-center justify-center text-center"> <span v-if="hover">Feasi-<br>bility</span> <span v-else>⚙️ Fea</span> </v-row> <v-row no-gutters class="inner pa-0 my-1 mr-1 align-center justify-center" :style="styleObjectMatrix(getMatrix.counts_normalized[0][1])">{{ parseFloat(getMatrix.counts[0][1]).toFixed(2) }}</v-row> <v-row no-gutters class="inner pa-0 my-1 mr-1 align-center justify-center" :style="styleObjectMatrix(getMatrix.counts_normalized[1][1])">{{ parseFloat(getMatrix.counts[1][1]).toFixed(2) }}</v-row> <v-row no-gutters class="inner pa-0 my-1 mr-1 align-center justify-center" :style="styleObjectMatrix(getMatrix.counts_normalized[2][1])">{{ parseFloat(getMatrix.counts[2][1]).toFixed(2) }}</v-row> </v-col> <v-col cols="3"> <v-row no-gutters class="outer pa-0 my-1 mr-1 align-center justify-center"> <span v-if="hover">Viability</span> <span v-else>🚀 Via</span> </v-row> <v-row no-gutters class="inner pa-0 my-1 mr-1 align-center justify-center" :style="styleObjectMatrix(getMatrix.counts_normalized[0][2])">{{ parseFloat(getMatrix.counts[0][2]).toFixed(2) }}</v-row> <v-row no-gutters class="inner pa-0 my-1 mr-1 align-center justify-center" :style="styleObjectMatrix(getMatrix.counts_normalized[1][2])">{{ parseFloat(getMatrix.counts[1][2]).toFixed(2) }}</v-row> <v-row no-gutters class="inner pa-0 my-1 mr-1 align-center justify-center" :style="styleObjectMatrix(getMatrix.counts_normalized[2][2])">{{ parseFloat(getMatrix.counts[2][2]).toFixed(2) }}</v-row> </v-col> </v-row> </v-hover> </v-card-text> </v-card> </v-container> <v-container v-if="$store.getters['site/getSettings'].includes('fidelity')" class="my-5"> <v-card flat> <v-card-title class="text-h5">Fidelity <dialog-info> <template v-slot:title>Fidelity</template> <template v-slot:text> Fidelity refers to the level of detail built into the current iteration. </template> </dialog-info> </v-card-title> <v-card-text v-if="!getMatrix"> <v-skeleton-loader type="text"></v-skeleton-loader> </v-card-text> <v-card-text v-else class="pb-0"> <v-slider v-model="getMatrix.fidelity" min="0" max="100" readonly thumb-label="always" thumb-size="26" class="pt-8" color="primary" track-color="grey lighten-2" > <template v-slot:append> <div class="body-2 text--secondary">100</div> </template> <template v-slot:prepend> <div class="body-2 text--secondary">0</div> </template> </v-slider> </v-card-text> </v-card> </v-container> </div> </template> <script> import inRange from 'lodash/inRange' import {mapGetters} from "vuex"; import DialogInfo from "@/components/DialogInfo"; export default { name: "Matrix", components: {DialogInfo}, data: () => ({}), methods: { styleObjectMatrix(value) { let color = value > 0.5 ? 'white' : 'black'; let background if (inRange(value, 0, 0.2)) { background = '#ffffe5' } else if (inRange(value, 0.2, 0.3)) { background = '#f7fcb9' } else if (inRange(value, 0.3, 0.4)) { background = '#d9f0a3' } else if (inRange(value, 0.4, 0.5)) { background = '#addd8e' } else if (inRange(value, 0.5, 0.6)) { background = '#78c679' } else if (inRange(value, 0.6, 0.7)) { background = '#41ab5d' } else if (inRange(value, 0.7, 0.8)) { background = '#238443' } else if (inRange(value, 0.8, 0.9)) { background = '#006837' } else { background = '#004529' } return { background: background, color: color, } }, }, created() { if (this.getMatrix === null) { this.$store.dispatch('site/fetchMatrix') } }, computed: { ...mapGetters('site', ['getMatrix']) } } </script> <style lang="scss" scoped> .matrix{ color: white; .outer { background-color: rgb(3, 21, 29); height: 45px; } .inner { height: 45px; } } </style>