Better x axis label formatting [WIP] #7103

tlrobinson · 2018-03-09T21:05:43Z

This PR resolves the following issues (which are all pretty much duplicates of each other):

x-axis label spacing #2935 "x-axis label spacing"
Horizontal Axes for metrics can get squished #6576 "Horizontal Axes for metrics can get squished"
Is it possible to show x-axis marks vertically instead horizontally for graphs ? #6937 "Is it possible to show x-axis marks vertically instead horizontally for graphs ?"
Designs for rotated x-axis labels #7015 "Designs for rotated x-axis labels"
Date labels overlapping (how to control date label formatting?) #7055 "Date labels overlapping (how to control date label formatting?)"

TODO:

Ideas:

initially render with all ticks, check for overlap, compute the max density that would prevent overlap?
- difficult to do without basically reimplementing axis tick logic?
check if formatValue with { compact: true } would prevent overlap?
- would require an additional render?
hard code different MIN_PIXELS_PER_TICK for different date granularities?
- i.e. min pixels for day would be much larger than year since January 1, 2018 is much wider than 2018

…labels

salsakran · 2018-03-15T21:19:23Z

Do days of the week come back as strings from the backend or are they mapped using moment?

…xis.axis_enabled when they overlap

tlrobinson · 2018-03-16T00:40:26Z

@salsakran they come back as numbers and we use moment to format them

mazameli · 2018-03-16T00:53:56Z

This is looking great. Looks like there are still some dashboard card scenarios we'll need to polish:

tlrobinson · 2018-03-16T16:16:08Z

Thanks. Yeah that’s the “don't rotate if not much vertical space” TODO

salsakran

Looks reasonable. Main question was whether to leave the settings enabled in case we get something off.

salsakran · 2018-03-19T23:07:50Z

frontend/src/metabase/visualizations/lib/settings/graph.js

@@ -316,6 +316,16 @@ export const GRAPH_AXIS_SETTINGS = {
    section: "Axes",
    title: t`Show x-axis line and marks`,
    widget: "toggle",
+    // widget: "select",


Why was this commented out? Thought we were going to leave it exposed.

salsakran · 2018-03-19T23:27:18Z

frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js

+    chart.selectAll("g.x text").attr("transform", function() {
+      const { width, height } = this.getBBox();
+      return `translate(-${width /
+        2},${-height / 2}) rotate(${degrees}, ${width / 2}, ${height})`;


salsakran · 2018-03-19T23:28:33Z

frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js

+    /^rotate-(\d+)$/,
+  );
+  if (match) {
+    return -parseInt(match[1], 10);


just to state the obvious, this is because we want to read eg a 45 degree rotated label from lower left to upper right, rather than having it be read from upper left to lower right?

Yeah it's rotating around the right edge of the label so we want to rotate it counter clockwise.

Actually i'm going to change this to return the un-negated rotation and negate it in onRenderRotateAxis.

I'll add some comments too

salsakran · 2018-03-19T23:29:17Z

frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js

+const X_LABEL_MIN_SPACING = 2; // minimum space we want to leave between labels
+const X_LABEL_ROTATE_90_THRESHOLD = 24; // tick width breakpoint for switching from 45° to 90°
+const X_LABEL_HIDE_THRESHOLD = 12; // tick width breakpoint for hiding labels entirely
+const X_LABEL_MAX_LABEL_HEIGHT_RATIO = 0.7; // percent rotated labels are allowed to take


My hunch is that 70% of the render area being taken up by labels is too high, but I'm down to wait until we see how this works on our internal instances before tweaking it further.

…labels

… causing integration test failure

mazameli · 2018-03-22T17:04:25Z

Any reason we haven't closed out the issues that this PR resolves?

salsakran · 2018-03-22T17:06:41Z

Only that I got used to issues being autoclosed by PR merges. You're welcome to do the honors if you don't want to wait for me =)

lucasloami · 2018-04-23T15:11:26Z

Hi guys, this feature is in v0.29.0-RC1? If yes, how can I test it? I'm using locally this version of Metabase (in docker) and I want to create a bar chart that has big strings in X axis (in a way they overlap) but I was not able to find where I can customize X axis labels' rotation.

Is there some "control" of rotation?

tlrobinson added 5 commits March 9, 2018 14:25

Add compact representation of month/days

bcda5a2

Add temporary setting for compact axis

10411c6

Add 45ª and 90ª rotated x-axis

1065d6b

Merge branch 'master' of github.com:metabase/metabase into feat-axis-…

61fd486

…labels

Merge branch 'master' of github.com:metabase/metabase into feat-axis-…

933fc1b

…labels

Refactor graph rendering to use chart.settings, pick better graph.x_a…

6dcf4ff

…xis.axis_enabled when they overlap

tlrobinson added 2 commits March 16, 2018 11:24

Add 70% height limit for rotated labels

a58b536

Disable label style setting

5cbd5ad

tlrobinson force-pushed the feat-axis-labels branch from 693e439 to 5cbd5ad Compare March 16, 2018 18:25

Fix lint

106e5db

salsakran approved these changes Mar 19, 2018

View reviewed changes

tlrobinson added 4 commits March 20, 2018 11:09

Merge branch 'master' of github.com:metabase/metabase into feat-axis-…

9eb1298

…labels

Minor cleanup, re-enable settings for x/y axis labels

93051ac

Merge branch 'master' of github.com:metabase/metabase into feat-axis-…

9842722

…labels

Make sure NativeQueryEditor doesn't crash if ace isn't available. Was…

7b17309

… causing integration test failure

tlrobinson force-pushed the feat-axis-labels branch from 23987b2 to 7b17309 Compare March 21, 2018 21:03

tlrobinson merged commit 20846dd into master Mar 21, 2018

tlrobinson deleted the feat-axis-labels branch March 21, 2018 23:29

mazameli mentioned this pull request Mar 22, 2018

Designs for rotated x-axis labels #7015

Closed

mazameli mentioned this pull request Apr 10, 2018

X axis values overlapping in dashboards/charts #7318

Closed

lucasloami mentioned this pull request Apr 19, 2018

Idea to fix a problem with chart labels #7379

Closed

TuringLovesDeathMetal mentioned this pull request May 9, 2022

Automatically rotate x-axis labels for ordinal x-axes lightdash/lightdash#2028

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Better x axis label formatting [WIP] #7103

Better x axis label formatting [WIP] #7103

tlrobinson commented Mar 9, 2018 •

edited

salsakran commented Mar 15, 2018

tlrobinson commented Mar 16, 2018

mazameli commented Mar 16, 2018

tlrobinson commented Mar 16, 2018

salsakran left a comment

salsakran Mar 19, 2018

salsakran Mar 19, 2018

salsakran Mar 19, 2018

tlrobinson Mar 20, 2018

tlrobinson Mar 20, 2018

salsakran Mar 19, 2018

mazameli commented Mar 22, 2018

salsakran commented Mar 22, 2018

lucasloami commented Apr 23, 2018

Navigation Menu

Better x axis label formatting [WIP] #7103

Better x axis label formatting [WIP] #7103

Conversation

tlrobinson commented Mar 9, 2018 • edited

salsakran commented Mar 15, 2018

tlrobinson commented Mar 16, 2018

mazameli commented Mar 16, 2018

tlrobinson commented Mar 16, 2018

salsakran left a comment

Choose a reason for hiding this comment

salsakran Mar 19, 2018

Choose a reason for hiding this comment

salsakran Mar 19, 2018

Choose a reason for hiding this comment

salsakran Mar 19, 2018

Choose a reason for hiding this comment

tlrobinson Mar 20, 2018

Choose a reason for hiding this comment

tlrobinson Mar 20, 2018

Choose a reason for hiding this comment

salsakran Mar 19, 2018

Choose a reason for hiding this comment

mazameli commented Mar 22, 2018

salsakran commented Mar 22, 2018

lucasloami commented Apr 23, 2018

tlrobinson commented Mar 9, 2018 •

edited