Page MenuHomePhabricator

Long y-axis values overlaps y-axis label
Open, HighPublic2 Estimated Story Points

Description

When the values on the y-axis are long, the label for the y-axis is not properly given space, but instead overlaps with the values.
Two examples: one on Commons and one on Beta.

Here is also a screenshot from Commons for convenience:

Screenshot from 2024-12-01 11-04-23.png (592×325 px, 23 KB)

Requirements

  • Axis values should at most display 4 characters, including an abbreviation if needed. For example 1000000 would become 1M. We can use Intl.NumberFormat function to make sure these are localizable. See code below
  • We will loosely enforce this 4 character requirement for the time being. Don't worry if exceptionally numbers such as 1,000,000,000,000,000,000 still overlap Y axis (likely abbreviated as 1,000,000T - this is out of scope).
  • This should be true for both X and Y axis
  • xAxis.nameGap and yAxis.nameGap value will be increased to accommodate 4 characters (to be tweaked later with Derek)

Formatter code

/**
 * @param {number} num
 * @return {string}
 */
function convertNumber( num, language ) {
    const formatter = new Intl.NumberFormat( language, {
		style: 'decimal',
        notation: num > 1000 ? 'compact' : 'standard',
        compactDisplay: 'short',
		minimumFractionDigits: 0,
		maximumFractionDigits: 1
	} );
    return formatter.format( num );
}

Event Timeline

Options:

  • Reposition the label
  • Keep the current position, but abbrieviate large numbers e.g. 50000000 becomes 50M for example (Intl.NumberFormat has support for that):
const formatter = new Intl.NumberFormat( getLanguage(), {
                style: 'decimal',
        notation: num > 1000 ? 'compact' : 'standard',
        compactDisplay: 'short',
                minimumFractionDigits: 0,
                maximumFractionDigits: 1
        } );
    return formatter.format( num );
CCiufo-WMF set the point value for this task to 2.Mon, Dec 2, 8:03 PM
CCiufo-WMF moved this task from Backlog to Sprint 12 on the Charts board.
CCiufo-WMF edited projects, added Charts (Sprint 12); removed Charts.

@DTorsani-WMF and I talked about this today, and suggest the following:

  • Axis values should at most display 4 characters, including an abbreviation if needed. For example 1,000,000 would become 1M. We can use Intl.NumberFormat function to make sure these are localizable. We will loosely enforce this 4 character requirement for the time being. Don't worry if exceptionally numbers such as 1,000,000,000,000,000,000 still overlap Y axis.
  • This should be true for both X and Y axis
  • xAxis.nameGap and yAxis.nameGap will be increased to accommodate the 4 characters (to be tweaked later with Derek)