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

Merge pull request woocommerce/woocommerce-admin#540 from woocommerce/add/chart-readability 

Component - chart: adjust chart height and dots
This commit is contained in:
Robert Elliott 2018-10-26 10:15:35 +02:00 committed by GitHub
parent 01fa16aa35 36ef0a9459
commit a9cb5a78cc
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/woocommerce-admin/client/components/chart/index.js
View File

@ -202,6 +202,9 @@ class Chart extends Component {
let { yFormat } = this.props;
const legendDirection = layout === 'standard' && width >= WIDE_BREAKPOINT ? 'row' : 'column';
const chartDirection = layout === 'comparison' && width >= WIDE_BREAKPOINT ? 'row' : 'column';
let chartHeight = width > 1329 ? 300 : 220;
chartHeight = width <= 1329 && width > 783 ? 220 : chartHeight;
chartHeight = width <= 783 ? 180 : chartHeight;
const legend = (
<Legend
className={ 'woocommerce-chart__legend' }
@ -278,7 +281,7 @@ class Chart extends Component {
colorScheme={ d3InterpolateViridis }
data={ visibleData }
dateParser={ dateParser }
height={ 300 }
height={ chartHeight }
margin={ margin }
mode={ mode }
orderedKeys={ orderedKeys }

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

@ -588,10 +588,14 @@ export const drawLines = ( node, data, params ) => {
.attr( 'role', 'region' )
.attr( 'aria-label', d => d.key );
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' )
.attr( 'fill', 'none' )
.attr( 'stroke-width', 3 )
.attr( 'stroke-width', lineStroke )
.attr( 'stroke-linejoin', 'round' )
.attr( 'stroke-linecap', 'round' )
.attr( 'stroke', d => getColor( d.key, params ) )
@ -601,16 +605,16 @@ export const drawLines = ( node, data, params ) => {
} )
.attr( 'd', d => params.line( d.values ) );
params.uniqueDates.length < 50 &&
params.width / params.uniqueDates.length > 36 &&
series
.selectAll( 'circle' )
.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;
@ -656,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 ) );