Admins can preview pollen calendar #101
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
without any filtering ability yet
plus refactor code a bit
- only show assumptions if there are errors related to parsing.
no valid sheets would result in app crashing, somade e2e test for that and fixed it
e.g. if pollen calendar looks drastically different, then test will fail. for this example, the way to solve it would fix bug that was ruining calendar OR if it is an improvement to calendar, update the snapshots in `cypress/snapshots/base/<testfilename>/<snapshotname>` followed the `readme` of the package to setup ☝️ https://github.com/cypress-visual-regression/cypress-visual-regression
- can be used for the pollen calendar on `/pollen` page that user sees too
why? 0 has boolean value false so formatting data function was getting rid of those values fix 🛠️ only get rid of undefined values (as on those dates, no pollen value was recorded)
- noticeable when clicking the filter buttons, the multichart would keep refreshing even tho the data hasn't changed yet
when changing the date period using the date filter, the last bar or line points on the chart is offsetted by 50%. why? when changing the date period using the date filter, the timestamp generated for the date would have time midday. fix 🧑⚕️🧑⚕️ changing the date timestamp to have time of 00:00:00 (which is either midnight at the start of day or midnight at the end, idk) no more weird offset
using the stack property to stack the bars only not the lines. this is great because we don't have to manually set the max and min for each axis. and when setting suggested min and max because if there is pollen values are all at 0, it should be obvious that the chart can go higher than 0 but the value was low. SORRY soooper confusing explanation, definitely easier to show.
…ontal line it looked really weird and was especially noticeable for the dailyTotal because the horizontal line was around 40 on the y-axis fix 🛠️: chart.js connects the points based on the order they appear in the array, not based on their x-axis value (in this case the date of the pollen measurement) so sorting the parsed pollen data based on the date fixed this issue 👌👌👌😃😃😃
arnard76
added
type: feature
it should look as it does right now (50% difference is tolerated). but if it is not there, the test will let us know 😃🧪👌
arnard76
force-pushed
the
100-show-pollen-calendar-preview
branch
from
fb365a0
to
ea257b8
Compare
arnard76
force-pushed
the
74-pollen-data-standard-format
branch
from
0536d5a
to
18bbce9
Compare
arnard76
force-pushed
the
100-show-pollen-calendar-preview
branch
from
f038107
to
9b60714
Compare
arnard76
force-pushed
the
100-show-pollen-calendar-preview
branch
2 times, most recently
from
f0c1d46
to
e036797
Compare
even if errors, show any preview of any parsed data update the types
arnard76
force-pushed
the
100-show-pollen-calendar-preview
branch
from
e036797
to
6a0b6ce
Compare
arnard76
requested review from
HuzzNZ,
sharukyen,
saamuelkim,
Gautham-27 and
junjunjun1
HuzzNZ
reviewed
May 2, 2024
|
Consider:
|
weird I tried to do this. and locally it shows it renamed but on github it doesn't and i don't have any changes 🤔 |
nvm figured it out: |
feel free to give it a go if u want, but it would also make it the only directory in the project with a capital letter 😁 |
arnard76
force-pushed
the
100-show-pollen-calendar-preview
branch
from
ae71145
to
be0cdcf
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Task ⛳
#74 > #100
Solution 🫠
After inputting valid excel spreadsheet (previous two tasks), the admin can click the preview button to see how the pollen calendar would look & verify that their data is parsed (understood) correctly.
Stuff included in the pollen calendar
a bar chart (directed downwards) 📊
to compare pollen types on a single day
a line chart (directed upwards) 📉
to see the trend of a pollen type over multiple days
tooltip
to see what the easily see what the pollen value was & at which date
pollen type filter
to narrow down to the pollen types that user/admin is interested in
e.g. they are researching grass pollen or their health is heavily effected by plantain pollen more than other types
date filter
narrows down chart to show a specific time period
e.g. just summer, the entire year, multiple years, this week, last week, today etc.
NOTE: Update button doesn't do anything yet, part of the separate task (check #74)
Code changes 🤓🧑💻
Summary + explanation of code changes
Don't need to read if you don't want to. Or you can take a look at 'Files changed' tab if that is more readable.
MultiChart.tsxis a component that shows a bar chart and line chart on the same axisupdated
parseExcel.tsto include sorting of all pollen values so that the array is ordered by the date (of the pollen measurement)formatData.tsis different toparseExcel.ts! formatData is to get the already parsedPollenDataobject into a format that is ready to be displayedadd 2 visual tests for the preview
soo..... the pollen calendar has a chart on it from the module
chart.jsandchart.jsuses HTML<canvas>elements. This is great for very visual components like a graph that have to render effeciently 😀. However it is unfortunate for testing purposes because all the browser sees is a canvas element (no child elements) as seen below 👇so visual tests compare what the pollen calendar looks like with the screenshot I took before this PR e.g.
cypress/snapshots/base/pollenCalendar.cy.ts/editPollenCalendarPreview.pngso can test visual elements like canvas by differences in screenshots. I've added one test for the pollen calendar as is & one for when user hovers over a bar on the chart & tooltip is shown (check
snapshotsfolder to see how it looks)i've used this library to compare the screenshots (snapshots) but there are lots more if we need alternatives 😇
fix annoying bug:
on brave, the chart would start shrinking & lagging when hovering over a data point.
it worked perfectly fine a few days ago (on brave) and still works fine on other chromium based browsers..
fix for it 🛠️🛠️
All chart examples are decreasing in size when pixelRatio is non-terminating value chartjs/Chart.js#11224
set a height on the chart and set
maintainAspectRatiotofalseno idea why this works but no more weird lagging on chart 😇