Make sure graphs load when navigating between evaluation steps. Fixes...

Make sure graphs load when navigating between evaluation steps. Fixes https://app.asana.com/0/1202404842967175/1202782140079881

resources/js/components/Evaluations/Single/Components/Step3/AttackGraph.vue

@@ -21,7 +21,7 @@ export default {
     props: ['evaluation', 'maxHeight'],
     data() {
         return {
-            loaded: this.$store.state.graphs[this.evaluation.id],
+            loaded: this.$store.state.graphs[this.evaluation.id] && this.$store.state.graphs[this.evaluation.id].attack,
             options: {
                 plugins: {
                     legend: {

resources/js/components/Evaluations/Single/Components/Step3/ExpositionGraph.vue

@@ -19,7 +19,7 @@ export default {
     props: ['evaluation'],
     data() {
         return {
-            loaded: this.$store.state.graphs[this.evaluation.id],
+            loaded: this.$store.state.graphs[this.evaluation.id] && this.$store.state.graphs[this.evaluation.id].exposition,
             options: {
                 plugins: {
                     legend: {

resources/js/components/Evaluations/Single/Components/Step3/MeasuresGraph.vue

 <template>
-    <Radar v-if="loaded && chartData" :chart-data="chartData" :chart-options="options" />
-    <div v-else class=" text-center">
-        <i class="fas fa-spin fa-spinner"></i>
+    <div>
+        <Radar v-if="loaded && chartData" :chart-data="chartData" :chart-options="options" />
+        <div v-else class=" text-center">
+            <i class="fas fa-spin fa-spinner"></i>
+        </div>
     </div>
 </template>
 
@@ -19,7 +21,7 @@ export default {
     props: ['evaluation'],
     data() {
         return {
-            loaded: this.$store.state.graphs[this.evaluation.id],
+            loaded: this.$store.state.graphs[this.evaluation.id] && this.$store.state.graphs[this.evaluation.id].measures,
             options: {
                 plugins: {
                     legend: {
@@ -53,6 +55,7 @@ export default {
             if (!this.$store.state.graphs[this.evaluation.id] || !this.$store.state.graphs[this.evaluation.id].measures) {
                 return null;
             }
+
             const labels = this.$store.state.graphs[this.evaluation.id].measures.labels;
             const data = this.$store.state.graphs[this.evaluation.id].measures.data;
 

resources/js/components/Evaluations/Single/Components/Step3/RiskGraph.vue

@@ -19,7 +19,7 @@ export default {
     props: ['evaluation'],
     data() {
         return {
-            loaded: this.$store.state.graphs[this.evaluation.id],
+            loaded: this.$store.state.graphs[this.evaluation.id] && this.$store.state.graphs[this.evaluation.id].risks,
             options: {
                 plugins: {
                     legend: {

resources/js/components/Evaluations/Single/Components/Step4/CyberRiskyGraph.vue

@@ -32,7 +32,7 @@ export default {
     props: ['evaluation'],
     data() {
         return {
-            loaded: this.$store.state.graphs[this.evaluation.id],
+            loaded: this.$store.state.graphs[this.evaluation.id] && this.$store.state.graphs[this.evaluation.id].risks && this.$store.state.graphs[this.evaluation.id].futurerisks,
         }
     },
     computed: {

resources/js/components/Evaluations/Single/Steps/Step2.vue

@@ -12,8 +12,8 @@
                     <MeasureLevelChooser
                         v-for="(measure, index) in measures"
                         :key="measure.id"
-                        :index="index"
                         :ref="`Measure${measure.id}`"
+                        :index="index"
                         :measure="measure"
                         :evaluation="evaluation"
                         :is-editable="isEditable"

resources/js/stores/graphs.js

@@ -7,7 +7,8 @@ export default {
             if (typeof state[id] === 'undefined') {
                 state[id] = {};
             }
-            state[id][name] = data
+
+            state[id] = {...state[id], [name]: data}
         },
         removeGraphData (state, {id}) {
             if (typeof state[id] !== 'undefined') {
@@ -17,9 +18,7 @@ export default {
     },
     actions: {
         async getGraphForEvaluation ({ commit }, {name, id}) {
-            console.log('getting graph data');
             const req = await axios.get(`/api/evaluations/${id}/graphs/${name}`)
-            console.log('got graph data', req);
             commit('setGraphData', { name, data: req.data, id })
             return req.data
         }