Dash.BigNumber #458
Dash.BigNumber #458
Conversation
closes #248
src/client/stdlib/dash/bigNumber.ts
Outdated
| const div = html`<div style="display: flex; flex-direction: column; font-family: var(--sans-serif);"> | ||
| <div style="text-transform: uppercase; font-size: 12px;">${title}</div> |
There was a problem hiding this comment.
We’ll want to switch to <figure><h2>Title</h2>…</figure> here to match the behavior of Plot; we’ll then have card styles ensure that this gets displayed correctly within the grid.
src/client/stdlib/dash/bigNumber.ts
Outdated
| if (typeof trendFormat !== "function") trendFormat = d3.format(trendFormat); | ||
| const div = html`<div style="display: flex; flex-direction: column; font-family: var(--sans-serif);"> | ||
| <div style="text-transform: uppercase; font-size: 12px;">${title}</div> | ||
| <div style="display: flex; flex-wrap: wrap; column-gap: 10px; align-items: baseline;"> |
There was a problem hiding this comment.
We’ll either need options or CSS custom properties to control:
column-gap: 10px;font-size: 32px; font-weight: bold; line-height: 1;font-size: 14px;
| </div> | ||
| ${plot} | ||
| </div>`; | ||
| return href == null ? div : html`<a href=${href} target=${target} style="color: inherit;">${div}</a>`; |
There was a problem hiding this comment.
I'm not sure I want the link to cover the whole display; first, it's a bit ugly with the underline decoration; second (and more important), it might take over the click interaction set on children.
Fil
force-pushed
the
fil/dash-bignumber
branch
from
3aaa14e to
a6505ab
Compare
This comment was marked as outdated.
This comment was marked as outdated.
|
I feel that most of what's left is choosing names (and capitalization) for the component, the classes (if any), the correct html tags etc. I don't have strong opinions on any of these and I would not know what guidelines to follow. |
|
superseded by #547 |
closes #248
Note: this version adds a secondaryTitle option, which allows to give the trend a (native) tooltip explaining what it compares to (last week, YoY, etc).
typescript support is wonky (not sure how to make the two imports pass)