massaging y ticks and updating tests

This commit is contained in:
Robert Elliott 2018-09-05 13:20:12 +02:00
parent 709e5a2896
commit 58efdd90c0
3 changed files with 19 additions and 12 deletions

View File

@ -5,12 +5,12 @@
justify-content: flex-start;
align-items: flex-start;
margin: -$gap;
border-top: 1px solid $core-grey-light-200;
border-top: 1px solid $core-grey-light-700;
.woocommerce-chart__header {
min-height: 50px;
border-top: 1px solid $core-grey-light-200;
border-bottom: 1px solid $core-grey-dark-500;
border-top: 1px solid $core-grey-light-700;
border-bottom: 1px solid $core-grey-light-700;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
@ -48,6 +48,8 @@
&.woocommerce-legend__direction-column {
height: 100%;
min-height: none;
border-right: none;
margin-bottom: $gap;
}
}
}
@ -56,7 +58,7 @@
overflow: visible;
}
.tooltip {
border: 1px solid $core-grey-light-200;
border: 1px solid $core-grey-light-700;
position: absolute;
display: none;
min-width: 324px;
@ -105,8 +107,8 @@
.key-colour {
display: inline-block;
width: 10px;
height: 10px;
width: 16px;
height: 16px;
margin-right: 8px;
}
.key-key {
@ -128,7 +130,7 @@
.grid {
.tick {
line {
stroke: $core-grey-light-200;
stroke: $core-grey-light-500;
stroke-width: 1;
shape-rendering: crispEdges;
}
@ -167,7 +169,7 @@
}
line {
&.focus-grid {
stroke: $core-grey-light-200;
stroke: $core-grey-light-700;
stroke-width: 1px;
}
}
@ -201,7 +203,7 @@
&.woocommerce-legend__direction-column {
flex-direction: column;
border-right: 1px solid $core-grey-dark-500;
border-right: 1px solid $core-grey-light-700;
height: 300px;
min-width: 320px;

View File

@ -157,7 +157,7 @@ describe( 'getXLineScale', () => {
describe( 'getYMax', () => {
it( 'calculate the correct maximum y value', () => {
expect( testYMax ).toEqual( 14139347 );
expect( testYMax ).toEqual( 15000000 );
} );
} );

View File

@ -138,8 +138,13 @@ export const getXLineScale = ( uniqueDates, width ) =>
* @param {array} lineData - from `getLineData`
* @returns {number} the maximum value in the timeseries multiplied by 4/3
*/
export const getYMax = lineData =>
Math.round( 4 / 3 * d3Max( lineData, d => d3Max( d.values.map( date => date.value ) ) ) );
export const getYMax = lineData => {
const yMax = Math.round(
4 / 3 * d3Max( lineData, d => d3Max( d.values.map( date => date.value ) ) )
);
const pow3Y = Math.pow( 10, ( ( Math.log( yMax ) * Math.LOG10E + 1 ) | 0 ) - 2 ) * 3;
return Math.ceil( yMax / pow3Y ) * pow3Y;
};
/**
* Describes getYScale