Add detail pane for package popularity

[benoit74]

Rationale

Fix #53

Changes

• implement the detail pane ... sic
  • nota: I had to pass individually the package name and number of visits to the PackagePopularityElement props (instead of directly the KPI item), because otherwise I would use the external interface PackagePopularityKpiItem to describe the prop type, and while it is supposed to work since Vue 3.6 (which we are using) I experienced stack overflow issues while developing
• change the color scheme which was indeed awful when used on large backgrounds
• contrary to the original design, all text which might be on a color background is black (instead of white in the original design), for optimal contrast allowing great accessibility
• fix the "package popularity" dashboard tile where 6 items where displayed instead of 5 planned in the original design (and adjust margins to take this into account in the layout)
• add a method in utils.ts to retrieve the package color directly from its name (instead of the KPI item)

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (3e2958f) 100.00% compared to head (2b64e5a) 100.00%. Report is 1 commits behind head on main.

:exclamation: Current head 2b64e5a differs from pull request most recent head 8c13ac5. Consider uploading reports for the commit 8c13ac5 to get more accurate results

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #91 +/- ## ========================================= Coverage 100.00% 100.00% ========================================= Files 37 37 Lines 1090 1090 Branches 202 202 ========================================= Hits 1090 1090 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.