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

updated dotRadius and lineStroke based on viewport size

This commit is contained in:
Robert Elliott 2018-10-26 10:10:29 +02:00
parent 2551696c6a
commit 36ef0a9459
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -588,7 +588,9 @@ export const drawLines = ( node, data, params ) => {
.attr( 'role', 'region' ) .attr( 'role', 'region' )
.attr( 'aria-label', d => d.key ); .attr( 'aria-label', d => d.key );
const lineStroke = params.width <= 1329 || params.uniqueDates.length > 50 ? 2 : 3; let lineStroke = params.width <= 1329 || params.uniqueDates.length > 50 ? 2 : 3;
lineStroke = params.width <= 783 ? 1.25 : lineStroke;
const dotRadius = params.width <= 1329 ? 4 : 6;
series series
.append( 'path' ) .append( 'path' )
@ -609,10 +611,10 @@ export const drawLines = ( node, data, params ) => {
.data( ( d, i ) => d.values.map( row => ( { ...row, i, visible: d.visible, key: d.key } ) ) ) .data( ( d, i ) => d.values.map( row => ( { ...row, i, visible: d.visible, key: d.key } ) ) )
.enter() .enter()
.append( 'circle' ) .append( 'circle' )
.attr( 'r', 6 ) .attr( 'r', dotRadius )
.attr( 'fill', d => getColor( d.key, params ) ) .attr( 'fill', d => getColor( d.key, params ) )
.attr( 'stroke', '#fff' ) .attr( 'stroke', '#fff' )
.attr( 'stroke-width', 3 ) .attr( 'stroke-width', lineStroke + 1 )
.style( 'opacity', d => { .style( 'opacity', d => {
const opacity = d.focus ? 1 : 0.1; const opacity = d.focus ? 1 : 0.1;
return d.visible ? opacity : 0; return d.visible ? opacity : 0;
@ -658,10 +660,10 @@ export const drawLines = ( node, data, params ) => {
.data( d => d.values ) .data( d => d.values )
.enter() .enter()
.append( 'circle' ) .append( 'circle' )
.attr( 'r', 8 ) .attr( 'r', dotRadius + 2 )
.attr( 'fill', d => getColor( d.key, params ) ) .attr( 'fill', d => getColor( d.key, params ) )
.attr( 'stroke', '#fff' ) .attr( 'stroke', '#fff' )
.attr( 'stroke-width', 4 ) .attr( 'stroke-width', lineStroke + 2 )
.attr( 'cx', d => params.xLineScale( new Date( d.date ) ) ) .attr( 'cx', d => params.xLineScale( new Date( d.date ) ) )
.attr( 'cy', d => params.yScale( d.value ) ); .attr( 'cy', d => params.yScale( d.value ) );