Monthly installs section

[codemonkey800]

Description

Closes #731
Depends on #729

Refactors the UI for the area chart to match the designs for the monthly installs section. This also partially fixes #723 because this PR adds data normalization and filtering such that we only show data points after the published line.

Demos

https://napari-hub-monthly-installs.vercel.app/plugins/napari-svg?enable-feature=activityDashboard

>= 12 months

< 12 months

1 month

Next Steps

• Implement Activity dashboard empty states #732

[codemonkey800]

@liaprins-czi I noticed that the y-axis has some weird looking values in the case when there's only one data point when the y value is 0

it looks fine with larger values of y though:

y = 5	y = 10	y = 100

should we do any special rendering if the last y value is 0?

[liaprins-czi]

Thanks for sharing this, it's looking so good to see it coming together!

There are just a few things to update that I saw from design perspective:

• The aspect ratio fo the chart is a little too tall. This would make there be too tall of a gap between the bottom of the other metrics (like number of installs) and any future metrics we'd add to the dashboard, below this top row of installs-based metrics + chart. Is it possible to maintain the same width of the chart, but make itshorter? Here is the aspect ratio of the design in Figma, if we can have it this same height that'd be ideal (225px x 119px)!
  

Current implementation of chart (225px x 150px):

• When teh screen width is narrowed, the activity dashboard metrics + chart don't scale to fit the space as expected. I don't think I was very explicit about this in the designs, so I will mock up like I did for the Collections breakpoints. But basically the metrics + chart should switch between 1-, 2-, 3-columns of content in the exact same way and at the same breakpoints as the Collections design. Right now they are not widening to fill the space the same way. I will start mocking up these more thoroughly now and will let you know when ready (should be today).

• Yeah good point about the y-axis when the data only has zeroes! I think in that case we could just have the y-axis scale from 0 to 1, and could still have ~4-5 tick mark labels for consistency (like 0.2, 0.4, 0.6, 0.8, 1.0) if that is possible?

[liaprins-czi]

UPDATE: @codemonkey800 Here are the breakpoint mockups for the Activity dashboard; I did the same breakpoints as for Collections, and mocked up what the screen should look like AT each breakpoint, and also right before (1px narrower) the breakpoint hits:
https://www.figma.com/file/d3t84J9Uzmj0GZnYROzdQX/Activity-Dashboard?node-id=1729%3A2340
(Scroll to the right or zoom out to see them all!)

[liaprins-czi]

(Just copy-pasting these original comments I'd made on this issue before I could add them as reviews)

Thanks for sharing this, it's looking so good to see it coming together!

There are just a few things to update that I saw from design perspective:

• The aspect ratio fo the chart is a little too tall. This would make there be too tall of a gap between the bottom of the other metrics (like number of installs) and any future metrics we'd add to the dashboard, below this top row of installs-based metrics + chart. Is it possible to maintain the same width of the chart, but make itshorter? Here is the aspect ratio of the design in Figma, if we can have it this same height that'd be ideal (225px x 119px)!

Screenshot 2022-11-07 at 9 13 15 AM
Current implementation of chart (225px x 150px):
Screenshot 2022-11-07 at 9 13 31 AM

• When teh screen width is narrowed, the activity dashboard metrics + chart don't scale to fit the space as expected. I don't think I was very explicit about this in the designs, so here's a link to much more specific design at each of the relevant breakpoints (follows the same pattern as Collections breakpoints). I mocked up what the screen should look like AT each breakpoint, and also right before (1px narrower) the breakpoint hits:
  https://www.figma.com/file/d3t84J9Uzmj0GZnYROzdQX/Activity-Dashboard?node-id=1729%3A2340
  (Scroll to the right or zoom out to see them all!)

• Yeah good point about the y-axis when the data only has zeroes! I think in that case we could just have the y-axis scale from 0 to 1, and could still have ~4-5 tick mark labels for consistency (like 0.2, 0.4, 0.6, 0.8, 1.0) if that is possible?

[codemonkey800]

thank you @liaprins-czi , sorry it notified you again. i was only fixing the branch by rebasing 😅 I'll let you know when it's ready for re-review 👍

[codemonkey800]

@liaprins-czi could you re-review again pls? I think I've addressed everything but the scaling issue. could you take a look and see if it's correct? if not then we can go over it in more detail

https://napari-hub-monthly-installs.vercel.app/plugins/napari-svg?enable-feature=activityDashboard

[liaprins-czi]

Thanks for fixing the area chart width so it scales with the columns as the page changes width. There are a few other things that shoudl change to better match the designs, but not sure if you were planning them as part of a separate PR, but I will list them here!

• The other metrics should also scale the same way that the area chart responds to the screen width changing (link to designs). Currently they maintain their narrower width when the screen gets narrower and switches to having less columsn (3 to 2, then 2 to 1), but they should widen to match the new column width.
  Current implementation when 2 columns:
  

Current implementation when 1 column:

• The tick labels text of the area chart is too large when the UI switches to 2 columns (<875px); they shoudl be the same size that they are at >=875px. Also the little dots within the area chart marking each data point shoudl be the same size (but if the dots are difficult / time-consuming to fix it's not a big deal!)
  <875px:
  

=875px:

• The first two metrics are rolling up the metrics into shortened forms like "1.1k", but we decided that we would list the actual whole number for these two install metrics, not shorten them with the "k" abbreviation style. However, I think it's good that the y-axis of the area chart does use this shortened "1k" etc style, so it can fit larger numbers more concisely (so don't change it there!)

• The months that are labeled in the x-axis should always be "Jan", "Apr", Jul", "Oct", and these month's labels should shift along the y-axis as needed to match where their months are. We want these months specifically to be labeled always because they map to the end of the four "quarters" of a year. (Sorry I didn't clarify this better in the final designs!)

[codemonkey800]

@liaprins-czi (1) and (4) should be addressed, (3) should be addressed in #750, and I believe i addressed (2) but it's a bit tricky fixing the scaling with SVG. if it's still having issues with scaling, let's move it to another GitHub issue pls 😄

could you please check again when you get a chance? 🙏

https://napari-hub-monthly-installs.vercel.app/

[liaprins-czi]

Looks like everythign I requested is fixed! Thanks, nice work! 🙌 🐹