@Yurik Wanted to check in on this. We'll have to stop using the extension if there's no fix in sight.

@atgo, my apologies, I accidentally had blocked all Phabricator notification emails, and only just reenabled them. Graphs must work for mobile, and if they are not, I have to find a way to fix them. Let me see what i can do there. Sadly MediaWiki-extensions-Graph is still my pet project without any formal WMF support, so I will have to do a bit of priorities juggling :)

@JGirault @Jdlrobson @Esanders know much more about mobile rendering and might give a good suggestion - the first graph has this HTML structure. The image gets right-aligned without being able to scroll horizontally.

<div style="float: right">
 <div class="mw-graph" style="min-width:350px;min-height:250px">
  <img class="mw-graph-img" src="/api/rest_v1/page/graph/png/New_Readers%2FResearch_and_stats/15545294/e7d4be07f364b19148190c3a15f6c162dc44679f.png">
 </div>
</div>

Thanks @Yurik! Really appreciate you looking into it. It's a really handy
feature :)

One thing that might be good, which I know is a bigger undertaking that
would likely require more formal WMF design support, is to restyle the
graphs to be more mobile friendly, too. There's some great examples in this
medium post:
https://medium.com/@markham/don-t-teach-data-journalism-without-teaching-mobile-first-design-2e31a850af6e#.cdk0dwrqn

For what it's worth, I have a couple graphs whose mobile functionality could be tested, interactive and static: https://meta.wikimedia.org/wiki/User:JSutherland_(WMF)/sandbox2

@atgo, thanks for the great article, and I agree it is a slightly bigger issue - it's a difference between tooling and use of those tools. The <graph> allows you to pick a canvas rectangle (width x height), and draw anything you want on it. It has no notion of mobile vs desktop, just the pixel size (just like an image really). The html generated from it could be a bit more mobile friendly, allowing proper scrolling, etc, but it is not fundamentally changing anything.

On the other hand, we could design much better graph templates and encourage people to use them, creating a guideline on how to use them for each different use case. But yes, that will be a challenge :)

With regards to graphs on mobile there are 2 things to think about

1. How it looks on a mobile device
2. Not shipping too much data / bloating the initial page load
3. Test on a real device.

I haven't looked too much at graphs but you'll want to make sure an width/float css rules are done in stylesheets via classes rather than inline styles.

In terms of not shipping too much data you'll probably want to serve a jpeg by default that when clicked loads the JavaScript needed to run and makes the graph interactive. You wouldn't want to serve the entire library by default. From a quick glance it looks like you'll doing this.

Practically you'll need to ensure any ResourceLoader modules have 'targets'=>['desktop','mobile' ] if they are designed to work on mobile but you must not do this blindly. Be sure to test on a device and review any libraries to check if they are meant to be used on mobile. If you are using a library in core and it is disabled consider not using it and using something else - there may be a good reason it's not enabled!

In terms of #1, also remember that you cannot know the device width up front. You'll probably want to set width: 100%; height: auto;

For responsive divs maintaining aspect ratio you could use the same CSS I've written for maps: https://gerrit.wikimedia.org/r/#/c/285648/

So, what's the status on fixing these?

Not much yet -- could use some help, and I will need to look at it some more once back from vacation.

@Esanders @Jdlrobson could you take a look at T147768 to see if the frame implementation would work on a mobile?

Some of these problems seem easily fixable with something along the lines of:

@media only screen and (max-width:500px) {
	@supports (object-fit: contain) {
		div.mw-graph {
			width: 100% !important;
			min-width: auto !important;
			min-height: auto !important;
		}
		div.mw-graph canvas,
		div.mw-graph .mw-graph-img {
			width: 100% !important;
			height: 100% !important;
			object-fit: contain;
			max-height: 50vh;
			max-width: 100%;
		}
	}
}

Although it doesn't work for interactive graphs, since the mouse position for these doesn't seem to take into account the computed width and height, but is looking directly at an attribute or initialization value or something (probably requires fixing the vega JS library).

I'm wondering about those min-width's on mw-graph. Why were they added ?

@TheDJ

I'm wondering about those min-width's on mw-graph. Why were they added ?

Ya on the ticket I just closed as a dupe we were wonder about that and the graph line widths too.

I've looked into this and it appears the lazy loading images is the problem here.

T133085
The offending code is https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/src/mobile.startup/lazyImages/lazyImageLoader.js#L37 which sets width and height to 0. We shouldn't be setting those if that's the case.
That fix would make the graphs show which is something (and a super trivial change). The resulting graph won't be mobile friendly but the fixes for that are already captured in T207929 and T197188.

@ovasileva this seems like an extremely small and impactful change that we could make.

Change 585539 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Do not run the lazy image formatter on images which don't have dimensions

https://gerrit.wikimedia.org/r/585539

Change 585539 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Fix graphs: Do not run the lazy image formatter on images which don't have dimensions

https://gerrit.wikimedia.org/r/585539

Also broken on desktop (https://en.wikipedia.beta.wmflabs.org/wiki/Extension:Graph/Demo#Using_RESTBase_API) so I think this is unrelated. Looks good to me.

Seems suitable for tech news as editors should know their graphs will now work in mobile and weren't before.

Test Result

Status: ✅
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA Steps

✅ AC1: Visit https://m.mediawiki.org/wiki/Extension:Graph/Demo on a mobile device and confirm graphs are not loading.