Skip to content
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.

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

title, subtitle #1761

Merged
merged 10 commits into from
Aug 9, 2023
Merged

title, subtitle #1761

merged 10 commits into from
Aug 9, 2023

Conversation

Fil
Copy link
Contributor

@Fil Fil commented Jul 20, 2023

Add top-level title and subtitle options.

Like caption, these options make a figure element. By default the title is considered text, and set in a H2 element. The subtitle in a H3 element. If an HTML node is passed, it is used as is (this differs from caption, where the contents are always wrapped in a figcaption element).

I'd like to add default styles, but better discuss them here before, because changing the styles will modify all the snapshot tests. And, in that case, maybe add ${className}-figure on the figure element?

Default styles could be something like:

.${className}-h2 {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
.${className}-h3 {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  font-weight: normal;
  font-style: italic;
}

Demo: https://observablehq.com/@observablehq/plot-title-1761

closes #92
supersedes #423

@Fil Fil requested a review from mbostock July 20, 2023 09:03
@Fil

This comment was marked as outdated.

src/plot.js Outdated
Comment on lines 328 to 336
for (const e of [[title, "h2"], [subtitle, "h3"], ...legends, svg, [caption, "figcaption"]]) {
const [contents, tag] = Array.isArray(e) ? e : [e];
if (contents == null) continue;
if (tag && (!contents.ownerDocument || tag === "figcaption")) {
const c = document.createElement(tag);
if (tag === "h2" || tag === "h3") c.className = `${className}-${tag}`;
c.appendChild(contents.ownerDocument ? contents : document.createTextNode(contents));
figure.appendChild(c);
} else figure.appendChild(contents);
Copy link
Member

Choose a reason for hiding this comment

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

This feels like it’s written a bit too generically; probably better to just break out the code separately for title, subtitle, legends, svg, and caption.

Note that we could also do figure.append(...legends, svg) for that case.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've updated the logic, hopefully it feels more readable/less messy?

src/plot.d.ts Outdated Show resolved Hide resolved
@Fil Fil marked this pull request as ready for review August 7, 2023 15:23
@Fil Fil enabled auto-merge (squash) August 7, 2023 15:23
src/plot.js Outdated Show resolved Hide resolved
Copy link
Member

@mbostock mbostock left a comment

Choose a reason for hiding this comment

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

Better! But we need to respect the context.document instead of using the global document.

src/plot.js Show resolved Hide resolved
src/plot.js Outdated Show resolved Hide resolved
src/plot.js Outdated Show resolved Hide resolved
@Fil
Copy link
Contributor Author

Fil commented Aug 9, 2023

I've now added documentation, with a custom stylesheet to bypass vitepress margins on h2 and h3.

@Fil Fil requested a review from mbostock August 9, 2023 07:44
docs/features/plots.md Outdated Show resolved Hide resolved
@Fil Fil merged commit b7a0be4 into main Aug 9, 2023
1 check passed
@Fil Fil deleted the fil/title branch August 9, 2023 20:24
Fil added a commit that referenced this pull request Aug 21, 2023
* title, subtitle

* better JSDoc links (scoped to this PR)

* make the figure creation logic more readable (hopefully)
chaichontat pushed a commit to chaichontat/plot that referenced this pull request Jan 14, 2024
* title, subtitle

* better JSDoc links (scoped to this PR)

* make the figure creation logic more readable (hopefully)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Plot title (and signature, sources).
2 participants