From 36ef0a9459a2b3fa2929477a5e738eff3fb63f11 Mon Sep 17 00:00:00 2001 From: Robert Elliott Date: Fri, 26 Oct 2018 10:10:29 +0200 Subject: [PATCH] updated dotRadius and lineStroke based on viewport size --- .../client/components/chart/utils.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/plugins/woocommerce-admin/client/components/chart/utils.js b/plugins/woocommerce-admin/client/components/chart/utils.js index 27f7576d76a..bf95344e487 100644 --- a/plugins/woocommerce-admin/client/components/chart/utils.js +++ b/plugins/woocommerce-admin/client/components/chart/utils.js @@ -588,7 +588,9 @@ export const drawLines = ( node, data, params ) => { .attr( 'role', 'region' ) .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 .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 } ) ) ) .enter() .append( 'circle' ) - .attr( 'r', 6 ) + .attr( 'r', dotRadius ) .attr( 'fill', d => getColor( d.key, params ) ) .attr( 'stroke', '#fff' ) - .attr( 'stroke-width', 3 ) + .attr( 'stroke-width', lineStroke + 1 ) .style( 'opacity', d => { const opacity = d.focus ? 1 : 0.1; return d.visible ? opacity : 0; @@ -658,10 +660,10 @@ export const drawLines = ( node, data, params ) => { .data( d => d.values ) .enter() .append( 'circle' ) - .attr( 'r', 8 ) + .attr( 'r', dotRadius + 2 ) .attr( 'fill', d => getColor( d.key, params ) ) .attr( 'stroke', '#fff' ) - .attr( 'stroke-width', 4 ) + .attr( 'stroke-width', lineStroke + 2 ) .attr( 'cx', d => params.xLineScale( new Date( d.date ) ) ) .attr( 'cy', d => params.yScale( d.value ) );