recaptime.dev / phorge
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Charts: Rotate x-axis labels for better readability

Summary:
Rotation is a fundamental movement pattern in our every-day activities.
Whether we play Spin The Bottle at our birthday, change our keyboard layout regularly, or do a sumersault to roll back into bed after our hair of the dog, we all regularly rely on rotation.
Thus also apply this principle to chart labels.

All credits go to http://www.d3noob.org/2013/01/how-to-rotate-text-labels-for-x-axis-of.html

Closes T16013

Test Plan:
# Go to `/project/reports/1/` after having constant task activity within that project tag for a while
# Try different viewport widths
# Take a deep breath and admit that the x-axis labels are more readable than before

Reviewers: O1 Blessed Committers, valerio.bozzolan

Reviewed By: O1 Blessed Committers, valerio.bozzolan

Subscribers: tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T16013

Differential Revision: https://we.phorge.it/D25908

Andre Klapper c8e3ee17 1552925d

+15 -10
+8 -8
resources/celerity/map.php
··· 396 396 'rsrc/js/application/diffusion/behavior-pull-lastmodified.js' => 'c715c123', 397 397 'rsrc/js/application/doorkeeper/behavior-doorkeeper-tag.js' => '6a85bc5a', 398 398 'rsrc/js/application/drydock/drydock-live-operation-status.js' => '47a0728b', 399 - 'rsrc/js/application/fact/Chart.js' => '351abd1c', 399 + 'rsrc/js/application/fact/Chart.js' => 'ce6f8e3d', 400 400 'rsrc/js/application/fact/ChartCurtainView.js' => '86954222', 401 401 'rsrc/js/application/fact/ChartFunctionLabel.js' => '81de1dab', 402 402 'rsrc/js/application/files/behavior-document-engine.js' => '243d6c22', ··· 702 702 'javelin-behavior-user-menu' => '60cd9241', 703 703 'javelin-behavior-view-placeholder' => 'a9942052', 704 704 'javelin-behavior-workflow' => '9623adc1', 705 - 'javelin-chart' => '351abd1c', 705 + 'javelin-chart' => 'ce6f8e3d', 706 706 'javelin-chart-curtain-view' => '86954222', 707 707 'javelin-chart-function-label' => '81de1dab', 708 708 'javelin-color' => '78f811c9', ··· 1230 1230 'aphront-typeahead-control-css', 1231 1231 'phui-tag-view-css', 1232 1232 ), 1233 - '351abd1c' => array( 1234 - 'phui-chart-css', 1235 - 'd3', 1236 - 'javelin-chart-curtain-view', 1237 - 'javelin-chart-function-label', 1238 - ), 1239 1233 '3829a3cf' => array( 1240 1234 'javelin-behavior', 1241 1235 'javelin-uri', ··· 2056 2050 'javelin-install', 2057 2051 'phuix-button-view', 2058 2052 'phabricator-diff-tree-view', 2053 + ), 2054 + 'ce6f8e3d' => array( 2055 + 'phui-chart-css', 2056 + 'd3', 2057 + 'javelin-chart-curtain-view', 2058 + 'javelin-chart-function-label', 2059 2059 ), 2060 2060 'cef53b3e' => array( 2061 2061 'javelin-install',
+7 -2
webroot/rsrc/js/application/fact/Chart.js
··· 86 86 87 87 var svg = d3.select(container_node).append('svg') 88 88 .attr('width', size.frameWidth) 89 - .attr('height', size.frameHeight) 89 + .attr('height', size.frameHeight + 20) 90 90 .attr('class', 'chart'); 91 91 92 92 var g = svg.append('g') ··· 124 124 g.append('g') 125 125 .attr('class', 'x axis') 126 126 .attr('transform', css_function('translate', 0, size.height)) 127 - .call(xAxis); 127 + .call(xAxis) 128 + .selectAll('text') 129 + .style('text-anchor', 'end') 130 + .attr('dx', '-.8em') 131 + .attr('dy', '.15em') 132 + .attr('transform', 'rotate(-25)'); 128 133 129 134 g.append('g') 130 135 .attr('class', 'y axis')