Bug 1632730 - Fix truncated Y axis labels in Graphs view

This commit is contained in:
beatrice-acasandrei 2021-02-15 18:03:36 +02:00 коммит произвёл GitHub
Родитель 15aed07009
Коммит e9568b1d42
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
3 изменённых файлов: 15 добавлений и 12 удалений

Просмотреть файл

@ -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);