plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

Support simple subtitle parameter (like title)

Open mjainGH opened this issue 1 year ago • 10 comments
trafficstars

Image from Figma mock by @TonyBurbs :

Screen Shot 2024-05-15 at 11 57 46 AM

mjainGH avatar Jan 18 '24 23:01 mjainGH

Here is a link to figma for the lowest touch effort: https://www.figma.com/design/tp9E4awumSOuCG1ZNev09z/Plotly.js-Design-System?node-id=21676%3A325474&t=aE2dNlExZS4pbsNs-1 It's adding in the subtitle and citation without any other major design changes

TonyBurbs avatar May 14 '24 15:05 TonyBurbs

API for subtitle

  • Same API as title
  • Add a subtitle property directly under layout with the same properties as title

Structure:

  • layout
    • subtitle
      • text: str
      • font: standard font options

@archmoj API-wise this seems pretty straightforward -- do you have any thoughts or suggestions?

emilykl avatar May 16 '24 21:05 emilykl

I think it should go inside layout.title object instead of layout. It reminds of when we added minor ticks in #6166.

That would also allow adding multiple titles and subtitles later on.

archmoj avatar May 16 '24 21:05 archmoj

Also it would be nice (and possibly easy) to have the subtitle option available on the cartesian axes and other places too.

archmoj avatar May 16 '24 21:05 archmoj

For a quick prototype, perhaps you could add the subtitle text to the end of title.text with a <br> and style it differently.

archmoj avatar May 16 '24 21:05 archmoj

I think it should go inside layout.title object instead of layout. It reminds of when we added minor ticks in #6166.

That would also allow adding multiple titles and subtitles later on.

I think that’s right. Also makes it clear that it inherits positioning from the title (presumably with optional overrides to at least the spacing relative to the main title) and it can inherit the main title font (but smaller, and remove bold if you bolder the main font?)

alexcjohnson avatar May 17 '24 03:05 alexcjohnson

@archmoj @alexcjohnson Makes sense -- do you mean something like the below?

  • layout
    • title
      • subtitle
        • text
        • font

emilykl avatar May 17 '24 15:05 emilykl

@archmoj @alexcjohnson Makes sense -- do you mean something like the below?

-layout

  • title

    • subtitle

      • text
      • font

Yes. Let's start with just that. Perhaps we rename subtitle to sub later.

archmoj avatar May 17 '24 15:05 archmoj

As suggested by @archmoj : A simple working prototype which uses HTML tags to simulate a subtitle:

https://codepen.io/emilykl-code/pen/MWdKYmr

emilykl avatar May 23 '24 15:05 emilykl

One may wants to add an attribute e.g. spacing (in pixel?) to help increase the space between the title and subtitle. But I am not sure where it should go in the API i.e. title.spacing or title.subtitle.spacing?

archmoj avatar May 24 '24 18:05 archmoj