Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
plugins/woocommerce-admin/client/components/chart/style.scss
View File

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

2
plugins/woocommerce-admin/client/components/chart/test/utils.js
View File

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

9
plugins/woocommerce-admin/client/components/chart/utils.js
View File

@ -138,8 +138,13 @@ export const getXLineScale = ( uniqueDates, width ) =>
* @param {array} lineData - from `getLineData` * @param {array} lineData - from `getLineData`
* @returns {number} the maximum value in the timeseries multiplied by 4/3 * @returns {number} the maximum value in the timeseries multiplied by 4/3
*/ */
export const getYMax = lineData => export const getYMax = lineData => {
Math.round( 4 / 3 * d3Max( lineData, d => d3Max( d.values.map( date => date.value ) ) ) ); 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 * Describes getYScale