Switch to area charts for analytics

[realRobotix]

old:

new:

The old analytics have always been kinda useless to me because with the increasing amount of mods I upload to Modrinth the analytics don't really show the total downloads or the relative impact each mod has on the total. Switching to a stacked area chart fixes this. Other than a small styling change, the individual analytics in the settings of each project stay the same.

Unfortunately the areas/lines on top/in the background bleed trough the top colors especially with colors which vary extremely in value. I'm not too good at frontend and I couldn't find an easy way in the apexcharts docs to mask out the other layers.

Changing this on the fill gradient makes it look a little better in some cases, but worse in others and it's also a very hacky solution:

gradientToColors: props.colors.map(() => "var(--color-raised-bg)"),
inverseColors: false,

imo a better solution would be to overhaul the intToRgba method in analytics.js to generate better colors in the first place (see the color of "Ritchie's Projectile Lib" which is barely distinguishable from the background)
but before i start tinkering with that I'd like to get some feedback

How it looks with default colors:

I guess we could also just get rid of the fill but this might confuse the user into thinking it's a line graph and not an area one:

[triphora]

@Prospector or @IMB11 probably have some better ideas on how the RGB function could be modified to be better but I quite like this change

[Minenash]

I think this definitely a good alternative view. I have often times wanted a view that included the "total". However. I don't think this should replace the current, as you lose the ability to easily see the individual stats in isolation without having to swap between them, which I also what I want quite often.

You could be another button next to the color pallet, and I don't think it matters which one is default (as long as it remembers that last used)

[IMB11]

Would be best to have something in the appearance settings of the site for this - I think the current version in prod would be best as default - overall it's pretty good 👍

[Minenash]

I think a toggle button makes more sense as I can see people switching between the two, and going to settings to toggle would be very out of the way

[IMB11]

There isn't any more space for buttons on the mobile version of the chart, this is really an appearance change so it'd make sense for it to go into the appearance settings. Could have a nice visualization of both options as well similarly to how the grid stuff is.

[IMB11]

Happy to help add the appearance setting if needed @realRobotix :)

[realRobotix]

I feel like just putting it away into appearance settings will hinder people from finding it. (i didn't really know about the appearance page until today)
All of the grid stuff also still has buttons on each page.

Also what is the standard for a mobile device? On my device there is more than enough space but using dev tools the iPhone 11 already wraps the text in the time window dropdown.

If adding another button isn't possible how about replacing/moving the download button?
I'm not sure it's used that much and if someone actually wanted to do something with that data I think they'd be better off just using the api anyways.

[Minenash]

If adding another button isn't possible how about replacing/moving the download button?

Not sure what the use case for downloading on mobile is tbh. I could see people switching between views way more frequently than downloading on mobile.

Or the smaller buttons could be in a 2x2 configuration if there isn't enough room for all of them

---

Between this and the line color toggle, the color one makes way more sense in the settings. It's one that people are likely not switching between on a regular basis (except for the fact, than since its state is not really saved, if you prefer the non-project colors, you have to enable it every time you go to the page)

[realRobotix]

@IMB11 anyways I'd need an icon and it'd be great if someone could make that for me as there don't seem to be any public design guidelines regarding them

[IMB11]

We use lucide icons, if you can't find an icon in the @modrinth/assets package you can download one from https://lucide.dev/icons/ and register it by adding it to the icon folder and adding the relevant imports to index.ts

[IMB11]

Probably what you want? https://lucide.dev/icons/paint-bucket

[realRobotix]

there are actually pretty nice chart-area and chart-line icons we could switch between

[realRobotix]

@IMB11 I added the button but there seems to be a little issue with reactivity. Would be very nice if you could help with that.
also why not save the state of the color and make it available through the appearance settings too while i'm at it?