зеркало из https://github.com/mozilla/treeherder.git
Bug 1632730 - Fix truncated Y axis labels in Graphs view
This commit is contained in:
Родитель
15aed07009
Коммит
e9568b1d42
|
@ -1,8 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import numeral from 'numeral';
|
|
||||||
import { Table } from 'reactstrap';
|
import { Table } from 'reactstrap';
|
||||||
|
|
||||||
|
import { abbreviatedNumber } from '../helpers';
|
||||||
|
|
||||||
export default class TooltipGraph extends React.Component {
|
export default class TooltipGraph extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -62,9 +63,6 @@ export default class TooltipGraph extends React.Component {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
abbreviatedNumber = (num) =>
|
|
||||||
num.toString().length <= 5 ? num : numeral(num).format('0.0a');
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { minValue, maxValue } = this.state;
|
const { minValue, maxValue } = this.state;
|
||||||
return (
|
return (
|
||||||
|
@ -73,13 +71,13 @@ export default class TooltipGraph extends React.Component {
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="value-column text-white">
|
<td className="value-column text-white">
|
||||||
{this.abbreviatedNumber(minValue)}
|
{abbreviatedNumber(minValue)}
|
||||||
</td>
|
</td>
|
||||||
<td className="distribution-column">
|
<td className="distribution-column">
|
||||||
<canvas ref={this.canvasRef} width={190} height={30} />
|
<canvas ref={this.canvasRef} width={190} height={30} />
|
||||||
</td>
|
</td>
|
||||||
<td className="value-column text-white">
|
<td className="value-column text-white">
|
||||||
{this.abbreviatedNumber(maxValue)}
|
{abbreviatedNumber(maxValue)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
@ -16,11 +16,12 @@ import {
|
||||||
VictoryPortal,
|
VictoryPortal,
|
||||||
} from 'victory';
|
} from 'victory';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import numeral from 'numeral';
|
||||||
import debounce from 'lodash/debounce';
|
import debounce from 'lodash/debounce';
|
||||||
import last from 'lodash/last';
|
import last from 'lodash/last';
|
||||||
import flatMap from 'lodash/flatMap';
|
import flatMap from 'lodash/flatMap';
|
||||||
|
|
||||||
import { formatNumber } from '../helpers';
|
import { abbreviatedNumber } from '../helpers';
|
||||||
|
|
||||||
import TableView from './TableView';
|
import TableView from './TableView';
|
||||||
import GraphTooltip from './GraphTooltip';
|
import GraphTooltip from './GraphTooltip';
|
||||||
|
@ -241,19 +242,20 @@ class GraphsContainer extends React.Component {
|
||||||
// padding for the y axis tick labels, so this is a workaround (setting state
|
// padding for the y axis tick labels, so this is a workaround (setting state
|
||||||
// doesn't work with this callback, which is why a class property is used instead)
|
// doesn't work with this callback, which is why a class property is used instead)
|
||||||
setLeftPadding = (tick, index, ticks) => {
|
setLeftPadding = (tick, index, ticks) => {
|
||||||
const highestTickLength = ticks[ticks.length - 1].toString();
|
const formattedNumber = abbreviatedNumber(tick).toString();
|
||||||
const newLeftPadding = highestTickLength.length * 8 + 16;
|
const highestTick = abbreviatedNumber(ticks[ticks.length - 1]).toString();
|
||||||
|
const newLeftPadding = highestTick.length * 8 + 16;
|
||||||
this.leftChartPadding =
|
this.leftChartPadding =
|
||||||
this.leftChartPadding > newLeftPadding
|
this.leftChartPadding > newLeftPadding
|
||||||
? this.leftChartPadding
|
? this.leftChartPadding
|
||||||
: newLeftPadding;
|
: newLeftPadding;
|
||||||
|
|
||||||
return formatNumber(tick);
|
return formattedNumber.toUpperCase();
|
||||||
};
|
};
|
||||||
|
|
||||||
setRightPadding = (tick, index, ticks) => {
|
setRightPadding = (tick, index, ticks) => {
|
||||||
const highestTickLength = ticks[ticks.length - 1].toString();
|
const highestTick = ticks[ticks.length - 1].toString();
|
||||||
const newRightPadding = highestTickLength.length / 2;
|
const newRightPadding = highestTick.length / 2;
|
||||||
this.rightChartPadding =
|
this.rightChartPadding =
|
||||||
this.rightChartPadding > newRightPadding
|
this.rightChartPadding > newRightPadding
|
||||||
? this.rightChartPadding
|
? this.rightChartPadding
|
||||||
|
|
|
@ -26,6 +26,9 @@ import {
|
||||||
export const formatNumber = (input) =>
|
export const formatNumber = (input) =>
|
||||||
new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(input);
|
new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(input);
|
||||||
|
|
||||||
|
export const abbreviatedNumber = (num) =>
|
||||||
|
num.toString().length <= 5 ? num : numeral(num).format('0.0a');
|
||||||
|
|
||||||
export const displayNumber = (input) =>
|
export const displayNumber = (input) =>
|
||||||
Number.isNaN(input) ? 'N/A' : Number(input).toFixed(2);
|
Number.isNaN(input) ? 'N/A' : Number(input).toFixed(2);
|
||||||
|
|
||||||
|
|
Загрузка…
Ссылка в новой задаче