Currently, I am working on a reporting page that will display various graphs. Upon entering the page, an API request is made to retrieve all default information. The plan is to enable users to later select filters based on their inputs.
For instance: initial view shows all results, while applying filters narrows down the results.
To achieve this functionality, I am utilizing vuejs for building components, vuex for storing information, and Google Charts for creating the graphs.
The issue I am facing is that when I apply filters, the graphs do not update even though the state is being updated. I have implemented a watcher to monitor changes in the state, but it only triggers when the component is initially created.
Here's a snippet of my code:
Vuex
import axios from 'axios';
const state = {
dataChart: {}
}
const mutations = {
'ADD_DATA_CHART'(state, data) {
state.dataChart[data.key] = [];
[].forEach.call(data.states, (s, i) => {
let obj = {};
obj.name = s;
obj.data = [];
[].forEach.call(data.value, d => {
obj.data.push([d.name, d[data.keys[i]].toFixed(2)]);
});
state.dataChart[data.key].push(obj);
});
}
}
const actions = {
fetchReporting({state, commit}, response) {
axios.post(response.endpoint, response.formData)
.then(({data}) => {
commit('ADD_DATA_CHART', {key: response.chart, value: data, states: response.states, keys: response.keys})
}).catch(err => {
console.log(err);
});
}
}
const getters = {
dataChart: state => state.dataChart
}
export default {
state,
mutations,
actions,
getters
}
Component
<template>
<div class="box-content-white">
<div class="title">Chart</div>
<div id="stackedChart"></div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { mapActions } from 'vuex';
export default {
props: {
endpoint: String,
chart: String,
states: Array,
keys: Array
},
data() {
return {
data: []
}
},
methods: {
// Methods here
},
mounted() {
// Fetch data and mount chart
},
computed: {
...mapGetters({
dataChart: 'dataChart'
})
},
watch: {
// Watcher implementation
}
}
</script>
I am currently stuck on this issue. Any suggestions or solutions are greatly appreciated!