feat(ui): Use tabular figures in tables and charts #28871
Conversation
The CSS style `font-variant-numeric: tabular-nums;` turns on tabular figures - monospaced substitutes for numeric characters in Rubik, ideal for tables and charts.
| @@ -11,7 +11,7 @@ export default function Grid(props: EChartOption.Grid = {}): EChartOption.Grid { | |||
| top: 20, | |||
| bottom: 20, | |||
| // This should allow for sufficient space for Y-axis labels | |||
| left: '0%', | |||
| left: 4, | |||
There was a problem hiding this comment.
This is a workaround to prevent y-axis overflows.
It looks like ECharts calculates the y-axis width by pre-rendering the axis and getting the pre-rendered width. This becomes a problem because there is no explicit way to tell ECharts to use tabular figures in axes (instead, we have to add a special CSS style to the chart container), so it will pre-render axes with the default proportional figures. Numbers with proportional figures are always more narrow than those with tabular figures. As a result, the calculated y-axis width is more narrow than it should be.
I'm not sure how we can cleanly fix this. The workaround I found is to add a left offset to the grid, thus providing more space for the y-axis. From my testing, an offset of 4 should be enough for most use cases.
| @@ -270,7 +270,7 @@ class WidgetCardChart extends React.Component<WidgetCardChartProps> { | |||
| const axisField = widget.queries[0]?.fields?.[0] ?? 'count()'; | |||
| const chartOptions = { | |||
| grid: { | |||
| left: 0, | |||
| left: 4, | |||
There was a problem hiding this comment.
Workaround for y-axis width issue. See comment above ⬆️
| @@ -194,7 +194,7 @@ class MiniBarChart extends React.Component<Props> { | |||
| // default size. | |||
| top: labelYAxisExtents ? 6 : 0, | |||
| bottom: markers || labelYAxisExtents ? 4 : 0, | |||
| left: markers ? 4 : 0, | |||
| left: markers ? 8 : 4, | |||
There was a problem hiding this comment.
Workaround for y-axis width issue. See comment above ⬆️
| @@ -614,6 +614,7 @@ const TimeAxis = styled('div')` | |||
| color: ${p => p.theme.gray300}; | |||
| font-size: 10px; | |||
| font-weight: 500; | |||
| font-variant-numeric: tabular-nums; | |||
There was a problem hiding this comment.
@vuluongj20 Can you apply this to the <TickText/> component in this same file (just below)?
There was a problem hiding this comment.
Hmm both of these are nested inside <TimeAxis/>, and should inherit the style from it:
Did you just want me to be more specific (i.e. apply tabular-nums to <TickText/> and <DurationGuideBox/> instead of <TimeAxis/> as the shared parents)?
There was a problem hiding this comment.
@vuluongj20 ah i see. looks good to me!
* Use tabular figures in tables and charts The CSS style `font-variant-numeric: tabular-nums;` turns on tabular figures - monospaced substitutes for numeric characters in Rubik, ideal for tables and charts. This commits adds the `tabular-nums` CSS style to components across the app.
The CSS style
font-variant-numeric: tabular-nums;turns on tabular figures - monospaced substitutes for numeric characters in Rubik, ideal for tables and charts.This commits adds the
tabular-numsCSS style to components across the app.We shouldn't use tabular figures globally (i.e. we shouldn't add
tabular-numstobody {}ortable {}). They are only appropriate for certain columns and text spans. For example, in the table row below, we only need tabular figures in the numeric columns on the right. The transaction column on the left contains both letters and numbers, and so would look better with the default proportional figures.Here's a list of the components/elements that have been updated to use tabular figures:
(You can spot tabular figures by looking at the 1s, which have a horizontal slab (line) at the bottom – see the difference in the image above.)
Numeric columns in tables
Chart axis labels