Add subtitle to plots

[emilykl]

trafficstars

Closes #6856

Adds ability to add a subtitle to plots.

• [x] Able to add subtitle using the following API:

    "layout": {
        "title": {
            "text": "A simple plot",
            "subtitle": {
                "text": "With a subtitle"
            }

• [x] Ability to change the font options of the subtitle by passing font options to layout.title.subtitle.font
• [x] Ability to edit the subtitle when editable: true

[archmoj]

• [ ] Subtitle should wrap automatically onto new lines when too long (maybe? Ideally yes but this is complicated)

I think word wrap is out of the scope of this PR. cc: #382

[archmoj]

@emilykl Do you think that the height of subtitle should push the margins? In your example if I set subtitle.text: '1st<br>2nd<br>3rd<br>4th' the subtitle would go over the cartesian subplot area.

[archmoj]

This is quite minor. But I noticed when config.editable is set to true and having an empty subtitle I get a black subtitle instead of gray on Click to enter Plot subtitle.

        "title": {
            "text": "A simple plot",
            "subtitle": {
                "text": ""
            }
        },

[archmoj]

Just addressed a baseline update in #7019. Please pull master and merge it into this branch. Thank you!

[emilykl]

@emilykl Do you think that the height of subtitle should push the margins? In your example if I set subtitle.text: '1st<br>2nd<br>3rd<br>4th' the subtitle would go over the cartesian subplot area.

@archmoj I would say "Yes, obviously", except that it looks like currently, even the height of the title doesn't push the margins -- if you add too many lines to the title, it will overlap the chart (see codepen).

So I think if we make the subtitle push the margins dynamically, we need to make that the behavior for the title as well.

I guess the other option would be to push the margin by a fixed amount if there is a subtitle present. I'm not sure whether that's necessary though; the current amount of space looks OK to me if the subtitle is one or two lines.

[emilykl]

This is quite minor. But I noticed when config.editable is set to true and having an empty subtitle I get a black subtitle instead of gray on Click to enter Plot subtitle.

good catch, thanks. Do you know where this styling is set in the code?

I think this is probably also related to the bug I noticed where the size of the text currently being edited is too large for the subtitle.

[archmoj]

For subtitles please add a French (or other languages that you know) translation to lib/locales e.g. here: https://github.com/plotly/plotly.js/blob/caf32e57cfdbd370076b926f84c114093f62f0b9/lib/locales/fr.js#L13

[archmoj]

@emilykl Please note that we discouraged force pushing (into this repository) when having a PR open with comments as it could confuse reviewers specially when they have started the review of the PR. Please don't worry and this is just fine for this pull request. I've done it in the past and I would possibly consider force pushing in certain cases in future. But in general it's better to do a rebase on most recent commits, if you want to edit a mistake on last push. And in case you want to have the changes from the master branch, you should consider merging master instead of rebasing. Thank you!

[archmoj]

Now only 3 tests fails when running the following command on my machine as well as on the CI.

npm run test-jasmine colorbar

[archmoj]

Please also add a draft log for this PR. Thank you!

[emilykl]

Yes I'm getting those same failures locally too @archmoj . I'm having trouble figuring out how to debug, please let me know if you have any suggestions!

[archmoj]

Yes I'm getting those same failures locally too @archmoj . I'm having trouble figuring out how to debug, please let me know if you have any suggestions!

I get different graphs for this on the master branch compared to this branch related to the size of an empty colorbar title:

Plotly.newPlot(gd,
  [{z: [[1, 2], [3, 4]], type: 'heatmap'}],
  {width: 400, height: 400},
  {editable: true}
);

On master:

This branch:

The behavior on master may be more desirable. No?

[emilykl]

@archmoj Good catch.

Overall the behavior on master is better, I agree. Although the location of the placeholder (above the colorbar rather than overlapping it) is better on this branch. I will try to figure out how to prevent the placeholder from crowding the chart over to the left. There must be a subtle difference between the element properties on master vs. this branch.

[emilykl]

@archmoj I believe the above issue with the colorbar title is fixed. (Colorbar tests are passing on my machine; we will see if they pass in the CI.)

The issue was that the colorbar title was missing the js-placeholder class, which I have fixed. "unfortunately" that has also made it revert to the weird placement seen on master; however I think fixing that is beyond the scope of this PR.

[archmoj]

@emilykl The PR looks great! :1st_place_medal: Is there is anything else on your toDo list? You may consider updating the PR description too.

[emilykl]

@archmoj I believe all outstanding issues are resolved.

Tests are passing.

Can I have a final 👍 to merge?

[archmoj]

@emilykl I was trying to add a subtitle to automargin-title-paper-multiline-bottom mock; but it may not render properly? Please check

{
  "data": [
    {
      "showlegend": false,
      "type": "scatter",
      "x": [1, 2, 3],
      "y": [4, 5, 6]
    }
  ],
  "layout": {
    "height": 300,
    "width": 400,
    "margin": { "t": 0, "b": 0, "l": 0, "r": 0 },
    "title": {
      "subtitle": {
        "text": "subtitle"
      },
      "automargin": true,
      "text": "Paper<br>Multi-line",
      "pad": { "t": 15, "b": 10 },
      "yref": "paper",
      "y": 0
    }
  }
}

[archmoj]

Also a mock like 19 that has a tile.text: 'Click to enter Plot title' it does not render a subtitle unless one changes the title!

[archmoj]

Mock 28 has a title stating with a <br>. When the subtitle is added the position of it is not under the title.

[archmoj]

The position of subtitle is not correct when adding a subtitle to automargin-title-paper-multiline mock.

[archmoj]

Also please check the position of subtitle when added to bar-alignment-offset mock.

[archmoj]

Similarly on the worldcup mock the positioning of subtitle could be improved.

[emilykl]

Also a mock like 19 that has a tile.text: 'Click to enter Plot title' it does not render a subtitle unless one changes the title!

@archmoj Good catch. I've modified the logic so that the subtitle is rendered even if there is no title (or the title is just a placeholder). But the placement is a bit odd since the subtitle is positioned according to the height of the title, and the title height is 0. Would you suggest any changes here? I'm inclined to leave as-is since this is a pretty rare edge case and doing anything more complicated would be kind of tricky and involve a bunch of extra logic.

[archmoj]

Also a mock like 19 that has a tile.text: 'Click to enter Plot title' it does not render a subtitle unless one changes the title!

@archmoj Good catch. I've modified the logic so that the subtitle is rendered even if there is no title (or the title is just a placeholder). But the placement is a bit odd since the subtitle is positioned according to the height of the title, and the title height is 0. Would you suggest any changes here? I'm inclined to leave as-is since this is a pretty rare edge case and doing anything more complicated would be kind of tricky and involve a bunch of extra logic.

If an empty title (title: '') renders similar to a blank title (title: ' ') then yes this should be the correct behavior IMHO.

[archmoj]

Similarly on the worldcup mock the positioning of subtitle could be improved.

This one is fixed now.

[archmoj]

Mock 28 has a title stating with a <br>. When the subtitle is added the position of it is not under the title.

This renders OK now after the fixes. Thanks!

[archmoj]

@emilykl Would you try taking into account the height of subtitle text in the automargin calculations?

[emilykl]

@emilykl Would you try taking into account the height of subtitle text in the automargin calculations?

@archmoj Yes I am working on it, it's a bit tricky as the code for the automargin is pretty convoluted

[archmoj]

Thanks @emilykl for this great PR :trophy: :dancer:

[hannahker]

Wow thanks @archmoj @emilykl I was literally just looking for this feature this morning! 🥳