Page MenuHomePhabricator

Add support for basic pie charts
Closed, ResolvedPublic3 Estimated Story Points

Description

NOTE: this assumes on T373354 is complete
User Story

As a Wikipedia editor, I want to be able to create basic pie charts that can be embedded in articles so that I can enhance encyclopedic content through data visualization.

Acceptance Criteria
  • It's possible to define a .chart file that accept a new parameter of "type": "pie" with a single series.
  • "type": "pie" definitions generate a basic pie chart on preview (like this example).
  • "type": "pie" definitions can be embedded in an article to render a basic pie chart.
  • Must have a legend. See T375233 (Result of spike T369863)
  • Must use the default color scheme and patterns for each individual segment. See T375234 (Result of spike T369863)

Design

Chart standards

Pie chart specifics

  • Slices of the chart should have a borderRadius: 4 and a borderWidth: 2
  • There should also be a borderColor: '#fff' in light mode and borderColor: '#101418 in dark mode

Demo

Light mode example

Screenshot 2024-10-01 at 15.30.26.png (574×822 px, 44 KB)

Dark mode example

Screenshot 2024-10-01 at 15.31.07.png (566×808 px, 48 KB)

Details

Related Changes in GitLab:
TitleReferenceAuthorSource BranchDest Branch
Pie chart supportrepos/mediawiki/services/chart-renderer!36jdlrobsonpiechartmain
Draft: WIP: Pie chart supportrepos/mediawiki/services/chart-renderer!28jdlrobsonT373343-PIEmain
Customize query in GitLab

Event Timeline

LGoto triaged this task as Medium priority.Aug 26 2024, 6:37 PM
CCiufo-WMF set the point value for this task to 3.
CCiufo-WMF moved this task from Backlog to Up Next on the Charts board.
Jdlrobson updated the task description. (Show Details)
CCiufo-WMF edited projects, added Charts (Sprint 8); removed Charts.
Jdlrobson moved this task from Doing to Ready for Signoff on the Charts (Sprint 8) board.
Jdlrobson updated the task description. (Show Details)
Jdlrobson subscribed.

Must use the default color scheme and patterns for each individual segment. See T375234 (Result of spike T369863)

@DTorsani-WMF and @CCiufo-WMF I cannot fulfil this requirement until we have developed T376198 further. I believe the colors are implemented correctly but not the patterns. Are we okay with descoping this from this task and working on that in a follow up? Can T376197 be resolved - is the color part done?

Charts are now live on the new documentation page https://en.wikipedia.beta.wmflabs.org/wiki/Charts_2.0 - please let me know if anything is not quite to spec.

Must use the default color scheme and patterns for each individual segment. See T375234 (Result of spike T369863)

@DTorsani-WMF and @CCiufo-WMF I cannot fulfil this requirement until we have developed T376198 further. I believe the colors are implemented correctly but not the patterns. Are we okay with descoping this from this task and working on that in a follow up? Can T376197 be resolved - is the color part done?

Charts are now live on the new documentation page https://en.wikipedia.beta.wmflabs.org/wiki/Charts_2.0 - please let me know if anything is not quite to spec.

Thank you for adding a documentation page! This is looking great. I'll sign off on the rest of the sprint tasks today. I think T376198 does not need to be done before the security review, so let's just move forward with the default colors. If T376197 was effectively done as part of this sprint, then yes I'd say it can be closed.

@Jdlrobson I see what you mean now about pie charts being more of a special case, especially when it comes to the data format. I think what you've implemented here is fine for now, but we may want to tweak it in future to add support for different (hopefully, simpler) dataset formats as well.

One thing I noticed is that for pie charts, the xAxis and yAxis properties of the chart definition are essentially meaningless. I don't think this is necessarily a problem, because they aren't really needed, but I've removed them from the example at https://commons.wikimedia.beta.wmflabs.org/wiki/Data:Example.Pie.chart to avoid confusion.