Page MenuHomePhabricator

EditCounter: month/year chart height not accounting for legend in subpages
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
Novem_Linguae
Jun 30 2022, 11:46 AM
Referenced Files
F59336322: image.png
Apr 21 2025, 11:48 PM
F59336317: image.png
Apr 21 2025, 11:48 PM
F35289106: image.png
Jun 30 2022, 11:46 AM

Description

List of steps to reproduce

What happens?:

  • Bars for 3 years are shown almost on top of each other

image.png (729×1 px, 57 KB)

What should have happened instead?:

  • Bars for 3 years should be spaced out

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:

  • Chrome 103.0.5060.66 (Official Build) (64-bit), Windows 10

Event Timeline

MusikAnimal triaged this task as Medium priority.Jul 7 2022, 3:57 AM
MusikAnimal moved this task from Backlog to Edit Counter on the XTools board.
Alien333 changed the task status from Open to In Progress.EditedApr 17 2025, 3:21 PM
Alien333 claimed this task.
Alien333 subscribed.

This happens because the yearchart is the same height as in the main editcounter page, but the legend is included in it, so the graph itself has to be squashed to fit (extreme example here, where because of the many namespaces it's essentially 1px high).

Ok, so. (This took a very long time of thinking.)
Knowing that:

  • We cannot format the legend without some horrible hacking and/or a Chartjs update (by the way, @MusikAnimal : we're still on chartjs 2.7! it's on 4.4 right now. but I suppose the migration would be a pain...)
  • The legend sometimes wraps, and so has not a fixed height.
  • We can expect approximately from 1 to 30 rows, and from 1 to 30 namespaces.
  • On mobile, it looks like minimum 3 namespaces per line is a safe bet (I got 4 from tests, taking a margin of error).

I think we should replace (in the subpage only) the current formula: 25 * rows + 30, by 25 * rows + 25*ceil(namespaces/3)).
I've done the tables. Here are the edge cases of row height, in pixels:

wide screennarrow screen
old formula1 row30 rows1 row30 rows
1 namespace30251 namespace3025
30 namespaces-202430 namespaces-19518
new formula1 row30 rows1 row30 rows
1 namespace25251 namespace2525
30 namespaces2003130 namespaces2525

The old formula, with 1 row and 30 nses, makes it unreadable on both mobile and desktop.
The new formula also has special behaviour on this edge case, but:

  • 200px is not that awkward for destop users. Especially as all of this concerns only the subpage.
  • There'd only one row in this case
  • 200px is visible, at least. and 25px on mobile is definitely better.

For this, we should also remove the fixed line thickness of 18px. For the ~=25px lines, it won't change much. For the edge case on wide screens, it'll make it seem less weird.

Alien333 renamed this task from ec-yearcounts page: horizontal bars don't have enough padding to EditCounter: month/year chart height not accounting for legend.Apr 20 2025, 3:05 PM
Alien333 renamed this task from EditCounter: month/year chart height not accounting for legend to EditCounter: month/year chart height not accounting for legend in subpages.

Here's what the 60px stuff looks like:

image.png (492×1 px, 39 KB)

For the page reported, the bar height increase from parent page is barely visible:
image.png (492×1 px, 35 KB)

I think we're good to go.

by the way, @MusikAnimal : we're still on chartjs 2.7! it's on 4.4 right now. but I suppose the migration would be a pain...)

Indeed, our JS/CSS stack needs a complete overhaul. I've just filed T392531: Overhaul frontend tech stack.

Thanks for putting so much time into this, @Alien333!

I'll queue this up for the next deployment. The situation over at T384711 needs to be resolved before the next deploy, so it might be a bit depending on how the new bot detection performs (currently I'm experimenting with uncommitted changes made directly on the prod server).

Ok! And thanks so much for all the hard work with the crazy bots, while I'm having fun with charts! :)

MusikAnimal moved this task from Pending deployment to Complete on the XTools board.