-
-
Notifications
You must be signed in to change notification settings - Fork 839
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using data from vuex to populate a line graph #67
Comments
Hey, well it's hard for me to debug on seeing only a few methods. Does some errors get thrown? My first thought is, that is has to do with the limitations mentioned in the docs and in #44 which affect the mixin, because the mixin only calls a The reactiveProp Mixin is pretty simple and also not for all use-cases. Therefore you can implement a own watcher for your use-case. You could for example create an event bus and check what in your vuex data changed. You can access all Generally if you add new datasets, you should re-render the chart and if you add only new data to an existing dataset, you can call If you're using an event bus you could listen in the component on a |
Figured out how to resolve the issue! I actually used the reactiveData mixin instead of the reactive prop and pulled data from the vuex store with a getter. The way I fixed the issue with the chart not re-rendering after the store was somewhat hacky... When the store is initialized with data from my API endpoint, I set a bool in the store, which I access with another getter (let's call it 'chartLoaded'). In my course component, I get access to chartLoaded, then pass that down as a prop to my course-graph component. In my course-graph component, I set a watcher on chartLoaded... then when it detects that chartLoaded changed (from 0 to 1 after the store is initialized with data from my API endpoints), the watcher calls fillData() and the chart re-renders! |
@tlaredo - would you mind sharing your solution if you still remember it? |
@ivanvorona I'll have to check later tonight if I still have the solution |
@tlaredo I am all set for now. but thank you for reply anyway! |
Expected Behavior
Hello! I'm trying to load a line chart using the reactiveProp and no data is showing on the graph for me on initial load. Please note that the chart data is stored using vuex. Here's the process that we follow:
We have two components that deal with the graph:
Process:
On page load, before Course mounts, Course dispatches an action ('updatePredictionData') to initialize data in the vuex store with an API request. (the API request happens in the store)
Course calls its mounted function, which calls fillData(), which populates its data with the activeCourseChartData from the getter. activeCourseChartData returns all zeros because the store wasn't finished updating from the 'updatePredictionData' action.
Once the data in the store is finished updating, it should trigger the component's 'updated' function and call fillData() again.
The problem is that the component's 'updated' function doesn't get called, which doesn't trigger the fillData function().
The result is our graph doesn't update its data even after the computed property activeCourseChartData returns updated data
The Course component, which passes a prop to the course-graph component
template part of course component
javascript part of course component
The CourseGraph component
If you're familiar with vuex and how it interacts with chart data, please lmk :)
On a side note, if the data updates, is it supposed to re-render the graph? Like cause the graph to animate from the x-axis up?
Environment
The text was updated successfully, but these errors were encountered: