8000 Add subtitle to plots by emilykl · Pull Request #7012 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Add subtitle to plots #7012

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 51 commits into from
Jul 18, 2024
Merged

Add subtitle to plots #7012

Changes from 1 commit
Commits
Show all changes
51 commits
Select commit Hold shift + click to select a range
24ed9c9
add subtitle property and simple prototype
emilykl May 22, 2024
7469d8e
add simple subtitle mock
emilykl May 22, 2024
3afc2e7
coerce step for subtitle
emilykl May 22, 2024
13f8b2a
fully-featured subtitles with plot options
emilykl Jun 4, 2024
cf5eb51
add subtitle mock
emilykl Jun 4, 2024
4a55ff2
remove old mock
emilykl Jun 5, 2024
625ea53
fix subtitle placement when title is mathjax
emilykl Jun 6, 2024
972836e
small cleanup of mathjax logic
emilykl Jun 7, 2024
f6e9781
add mock testing font options with subtitle
emilykl Jun 7, 2024
35a6599
streamline placeholder logic
emilykl Jun 17, 2024
60a6287
add subtitle to titles tests
emilykl Jun 17, 2024
7eb9e52
fix small bug in subtitle logic
emilykl Jun 17, 2024
7e9fcf9
syntax
emilykl Jun 17, 2024
3190382
re-add removed comment
emilykl Jun 17, 2024
608740f
fix title positioning
emilykl Jun 17, 2024
183518c
french and spanish
emilykl Jun 17, 2024
2452a48
add config test for editable subtitle
emilykl Jun 17, 2024
8bce81b
add plot api react test for subtitle
emilykl Jun 17, 2024
2aca950
add image baselines for subtitle
emilykl Jun 17, 2024
ade53d3
update plot-schema
emilykl Jun 17, 2024
13af030
mark restyle radial axis title test as flaky
emilykl Jun 18, 2024
b2a26e0
Merge branch 'master' into add-subtitle
emilykl Jun 18, 2024
2790ec7
add draftlog
emilykl Jun 18, 2024
03638ee
add mathjax subtitle mock; add addl padding bw sutbtitle and title wh…
emilykl Jun 18, 2024
8210b58
fix bug with colorbar title
emilykl Jun 18, 2024
496ccc7
fix placeholder positioning bug
emilykl Jun 19, 2024
15754fa
remove zz-subtitle-mathjax mock
archmoj Jun 26, 2024
f2cbc23
add mathjax subtitle and title to ternary-mathjax
archmoj Jun 26, 2024
f3842e0
test positioning of subtitle when title is mathjax
archmoj Jun 26, 2024
e3813f2
update draftlog
emilykl Jun 27, 2024
e70e521
fix subtitle position after editing when title is MathJax
emilykl Jun 28, 2024
e9e8adb
syntax
emilykl Jun 28, 2024
0d154bb
fix error when no subtitle
emilykl Jun 28, 2024
2aa2b8f
syntax
emilykl Jul 8, 2024
527ff8d
change Object.assign to Lib.extendFlat
emilykl Jul 8, 2024
28d30ee
use `title` and `subtitle` keys instead of `t` and `st`
emilykl Jul 8, 2024
aa7b0a6
remove extra newline
emilykl Jul 8, 2024
db5de4d
set subtitle font size based on title font size
emilykl Jul 8, 2024
154f481
Merge branch 'add-subtitle' of https://github.com/plotly/plotly.js in…
emilykl Jul 8, 2024
6701eee
change subtitle font size multiplier to 0.7
emilykl Jul 8, 2024
313301c
change plotsubtitle key to subtitle
emilykl Jul 8, 2024
423dfd3
streamline logic
emilykl Jul 9, 2024
cef06c8
Update src/plot_api/subroutines.js
emilykl Jul 9, 2024
7cc019d
adjust mathjax padding multiplier
emilykl Jul 9, 2024
b7cda0b
render subtitle even if title is not present
emilykl Jul 9, 2024
ec166a3
better method of determining subtitle position
emilykl Jul 11, 2024
8e44892
update mathjax baselines
emilykl Jul 11, 2024
e189245
bbox bug
emilykl Jul 11, 2024
de628de
update baselines
emilykl Jul 11, 2024
47a5b82
take full title+subtitle height into account for automargin
emilykl Jul 17, 2024
b8942ee
improved subtitle automargin positioning
emilykl Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
streamline logic
  • Loading branch information
@emilykl
emilykl committed Jul 9, 2024
commit 423dfd307cbed1c63900bdf71ee14f3f628b3d77
17 changes: 9 additions & 8 deletions src/components/titles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ var interactConstants = require('../../constants/interactions');

var OPPOSITE_SIDE = require('../../constants/alignment').OPPOSITE_SIDE;
var numStripRE = / [XY][0-9]* /;
var MATHJAX_PADDING_BOTTOM = 10;
var MATHJAX_PADDING_MULTIPLIER = 0.83;
var EXTRA_SPACING_BETWEEN_TITLE_AND_SUBTITLE = 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although I kind of like the current positioning of subtitle which is compact;
I was wondering the correct value for this constant might be 1.3

plotly.js/src/constants/alignment.js

Line 34 in 8b1f5bd

LINE_SPACING: 1.3,

This is why:
If I call

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: 'title', subtitle: {text: 'subtittle'}}});

the subtitle render closer compared to when I call

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: 'title<br><sub>subtittle</sub>'}});

So perhaps you could try using (LINE_SPACING - 1) * title.font.size in your calculations?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@archmoj Do you think the subtitle looks better with additional spacing?

I'd prefer not to change the spacing just to match the appearance of <sub>, since that spacing is arbitrary.

I prefer the more compact look.


/**
* Titles - (re)draw titles on the axes and plot:
Expand Down Expand Up @@ -79,12 +80,12 @@ function draw(gd, titleClass, options) {
var subtitleProp = options.subtitlePropName;
var subtitleEnabled = !!subtitleProp;
var subtitlePlaceholder = options.subtitlePlaceholder;
var subtitle = (cont.title || {}).subtitle;
var subtitleTxt = (subtitle && subtitle.text ? subtitle.text : '').trim();
var subtitle = (cont.title || {}).subtitle || {text: '', font: {}};
var subtitleTxt = subtitle.text.trim();
var subtitleIsPlaceholder = false;
var subtitleOpacity = 1;

var subtitleFont = subtitle && subtitle.font ? subtitle.font : {};
var subtitleFont = subtitle.font;
var subFontFamily = subtitleFont.family;
var subFontSize = subtitleFont.size;
var subFontColor = subtitleFont.color;
Expand Down Expand Up @@ -210,7 +211,7 @@ function draw(gd, titleClass, options) {
if(titleMathHeight) {
// Increase the y position of the subtitle by the height of the title,
// plus a bit of padding
var newSubtitleY = Number(subtitleElement.attr('y')) + titleMathHeight + MATHJAX_PADDING_BOTTOM;
var newSubtitleY = Number(subtitleElement.attr('y')) + titleMathHeight + MATHJAX_PADDING_MULTIPLIER * subFontSize + EXTRA_SPACING_BETWEEN_TITLE_AND_SUBTITLE;
subtitleElement.attr('y', newSubtitleY);
}
}
Expand Down Expand Up @@ -238,9 +239,9 @@ function draw(gd, titleClass, options) {
var titleElHeight = titleEl.node().getBBox().height;
var titleElMathGroup = group.select('.' + titleClass + '-math-group');
var titleElMathHeight = titleElMathGroup.node() ? titleElMathGroup.node().getBBox().height : 0;
var subtitleShift = titleElMathHeight ? titleElMathHeight + MATHJAX_PADDING_BOTTOM : titleElHeight;
var subtitleShift = titleElMathHeight ? titleElMathHeight + (MATHJAX_PADDING_MULTIPLIER * subFontSize) : titleElHeight;
var subtitleAttributes = Lib.extendFlat({}, attributes, {
y: subtitleShift + attributes.y
y: subtitleShift + EXTRA_SPACING_BETWEEN_TITLE_AND_SUBTITLE + attributes.y
});

subtitleEl.attr('transform', transformVal);
Expand Down Expand Up @@ -380,7 +381,7 @@ function draw(gd, titleClass, options) {
// Only adjust if subtitle is enabled and title text was originally empty
if(subtitleEnabled && !txt) {
var ht = Drawing.bBox(el.node()).height;
var newSubtitleY = Number(subtitleEl.attr('y')) + ht;
var newSubtitleY = Number(subtitleEl.attr('y')) + ht + EXTRA_SPACING_BETWEEN_TITLE_AND_SUBTITLE;
subtitleEl.attr('y', newSubtitleY);
}

Expand Down
0