Page MenuHomePhabricator

SPIKE Investigate "Make the Chart extension beginner-friendly"
Open, In Progress, Needs TriagePublicSpike

Description

We want to explore different options for improving charts editing user experience. This investigation is not limited to just editing; it could also enhance discoverability.

Goals:

  • Gain some technical background on how the extension works.
  • Explore a few product ideas on how we can fulfill this wish. This includes mockups/designs and technical feasibility.

Limitations:

  • We would like to limit our efforts to 2 quarter(s) to maintain a narrow scope and release an MVP as soon as possible. This will also facilitate the initial knowledge transfer and handover.

Wish: Community Wishlist - W414
Related Task: T393637: Make the chart extension more beginner-friendly

Event Timeline

KSiebert renamed this task from Investigate "Make the Chart extension beginner-friendly" to SPIKE Investigate "Make the Chart extension beginner-friendly".Jan 15 2026, 3:10 PM
dmaza changed the subtype of this task from "Task" to "Spike".Jan 15 2026, 3:10 PM
HMonroy changed the task status from Open to In Progress.Jan 20 2026, 9:44 PM

The extension uses the Jsonconfig extension to store tabular data in a JSON format. There is a "Edit as table" button when editing the of a data tabular page, and it can be use to help set data through a OOUI widget. If we want to rebuild this in codex, we probably need to introduce a Codex component to jsonconfig extension. Perhaps, we can use a similar approach in .chart pages where we use the same component to set the settings for the chart to be drawn.

We should also consider introducing links that can show users how the charts are connected to their respective data pages.

Chart renderer is use to draw the chart but I don't think will be touching that. This project is meant to focus on implementing an intuitive UX that will facilitate the data entry for charts.

In my superficial review, I envision a similar interface for both tabular data and chart data pages with links so that users can easily navigate between pages.
The extensions use Javascript, OOUI, and typescript, which we are all familiar with.

Users are also interested in adding Visual Editor to tabular pages, this is another option we can discuss. I'm not sure about this approach. The task associated to the wish mentions that we can use TemplateWizard to edit chart properties.

@bvibber @egardner any thoughts on this investigation?
I noticed there's some Visual Editor in there, it looks like it's needed when you insert a chart into a page but it's not working in my local, my guess is that because my local is not liked to a commons wiki?
Do you think this "insert chart" in VE also needs some UX improvement?
Is there an area that might get complex if we use Codex? Do you have an UI in mind?

I think making the chart setup friendlier is technically feasible but the scope would depend on how "advanced" the UX would be? And for that we would need to start discussing/reviewing some designs.

Is this task about editing the chart metadata with a nice form, or editing the actual tabular data that gets displayed? It looks like the latter is covered in T248897: Create an easy-to-use editing interface for JSON tabular data pages.

For the chart metadata, it seems a form would have these fields:

  • license (three parts: code, text, url)
  • type (one of: line, bar, etc.)
  • title and subtitle (strings)
  • xAxis and yAxis (each has two parts: title and format)
  • source (page name of the .tab file)
  • idPrefix (string)

Regarding the UI here, is it aiming to edit the .chart page while editing a page that's embedding a chart? Or to edit the .chart directly?

Given the Chart JSON conforms to a a schema, would an approach like Extension:VisualData work? It creates forms from the schema (i.e. much simpler than editing JSON by hand; it's not as nice as a purpose-built UI, but it doesn't need to be updated for changes in the structure). Would adding that sort of form to JsonConfig be useful? That'd then have utility for any JSON that specifies a schema.

@Samwilson thank you for your feedback! I think the wish is asking about improving the process, which includes both setting up the chart metadata and the tabular data with a nice form.

I'll look into Extension:VisualData to get an idea of how that works. Thanks again :)

I don't think we'd want to expose the raw JSON fields, even if they're arranged in an orderly table. The JSON should be an implementation detail that most editors never see or touch unless they feel like getting dirty and nerdy in the markup.

We had to expose raw JSON chart editing to users only because we cut the editor widget from the MVP. :)

We should have a user-friendly layout of where the fields go, think about how they're labeled, give it a good input system for localized multilingual text fields, and have a preview of the rendered chart that updates as you change it.

Yes good point, a generic UI wouldn't be the nicest thing!

@bvibber were there any designs mocked up by any chance for the editor widget?

I don't recall for sure if we did any design mockups for the chart format editor; I think we just talked about how we should have one but put it off beyond the MVP.

For the team's awareness, Commons has a default Gadget enabled for tabular pages.
https://commons.wikimedia.org/wiki/User:TheDJ/TabularImportExport

This gadget exports to Excel from the Read page:
https://commons.wikimedia.org/wiki/Data:Sweden_electricity_generation_by_source.tab

And allows to import from Excel from the Edit page:
https://commons.wikimedia.org/w/index.php?title=Data:Sweden_electricity_generation_by_source.tab&action=edit

You will only encounter this on Commons.

I suggest we focus on editing .chart metadata, and only importing or referencing .tab files (at least initially), and then putting them together via API
A good reference for what I have in mind is this Figma plugin https://pavel-kuligin.gitbook.io/chart/getting-started


For the team's awareness, Commons has a default Gadget enabled for tabular pages.
https://commons.wikimedia.org/wiki/User:TheDJ/TabularImportExport

This gadget exports to Excel from the Read page:
https://commons.wikimedia.org/wiki/Data:Sweden_electricity_generation_by_source.tab

And allows to import from Excel from the Edit page:
https://commons.wikimedia.org/w/index.php?title=Data:Sweden_electricity_generation_by_source.tab&action=edit

You will only encounter this on Commons.

I didn't notice that was a gadget. Thank you for your work on that.

A nice UI would be great. Solving the open issues and making the charts work is also something we urgently need.

Here is a proof of concept from the wishathon in November:

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Chart/+/1207226

It creates a form UI for the chart definition page based on the json schema:

https://gitlab.wikimedia.org/repos/mediawiki/services/chart-renderer/-/blob/main/docs/schemas/extension/current.json?ref_type=heads

{F72154008}

{F72154009}