Corona-tracker
Corona-tracker copied to clipboard
COVID-19-electronic-health-system
INNOVATION TEST: Place a sample chart into education card by reusing Chart.js
Summary
Place a sample chart.js into education card in the sliding cards feature. Please reuse the chart.js component we already have to do so.
The idea is that pictures, graphs/charts can convey information much quicker and denser than just text. It is a bit more engaging as well.
KEY: This is more of a test. Don't spend too much time on it. It's more to see how it would look and if its something worth pursuing further.
To save even more time, ask @Tanvez on how to quickly implement when the time comes.
Motivation
Why are we doing this? Testing forms of displaying information. Testing forms of increasing engagement
What use cases does it support? Increase engagement aids in education.
What is the expected outcome? One of the education cards will have a simple graph or chart that displays some useful information.
Describe alternatives you've considered
Not adding this and just having simple text. A short sentence to summarize a news fact/article.
Additional context
The experiment to add this should be relatively quick. No need to lots of styling. More to see how it will look.
Please include a gif of interacting with the feature in the PR as well.
This can definitely be done at a later time after v2 release since we are on a time crunch.
I did not push it yet because it's just a test. Here how Chart component looks inside the Card component
Wow, this is awesome! We should definitely figure out a way to incorporate this soon - makes the app feel a lot more "alive"
Yes, it makes app more interactive and alive. We can reuse Chart.js component and feed it different data for each card.
I think we can leave it open for the time being, until it’s been fully implemented. I’m open to ideas though - thoughts?
@pavel-ilin Is Chart.js working dependent on installing canvas? I see canvas is used in it, but my googling tells me it's built in and doesn't need installing? Installing it is also giving me errors Dockerizing the app so I want to make sure it's necessary.
@JWaltuch Chart.js It shouldn't depend in separate canvas package. Canvas is not imported from external libraries into Chart.js. It use default canvas JSX element.
Cool :) I wonder if if it was added to package.json for Chart.js to begin with or if its for something else? That's the only place I see canvas being used