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

RTL charts (https://github.com/woocommerce/woocommerce-admin/pull/1794) 

* Fix wrong tooltip position on RTL languages Dashboard

* Render chart Y axis on the right for RTL languages
This commit is contained in:
Albert Juhé Lluveras 2019-03-14 11:57:43 +01:00 committed by GitHub
parent c1b6c3d8ce
commit 1eb5d51f9c
3 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
plugins/woocommerce-admin/packages/components/src/chart/d3chart/chart.js vendored
View File

@ -55,7 +55,8 @@ class D3Chart extends Component {
}
getScaleParams( uniqueDates ) {
const { data, height, margin, orderedKeys, chartType } = this.props;
const { data, height, orderedKeys, chartType } = this.props;
const margin = this.getMargin();
const adjHeight = height - margin.top - margin.bottom;
const adjWidth = this.getWidth() - margin.left - margin.right;
@ -113,7 +114,8 @@ class D3Chart extends Component {
}
drawChart( node ) {
const { data, dateParser, margin, chartType } = this.props;
const { data, dateParser, chartType } = this.props;
const margin = this.getMargin();
const uniqueDates = getUniqueDates( data, dateParser );
const formats = this.getFormatParams();
const params = this.getParams( uniqueDates );
@ -132,7 +134,8 @@ class D3Chart extends Component {
}
shouldBeCompact() {
const { data, margin, chartType, width } = this.props;
const { data, chartType, width } = this.props;
const margin = this.getMargin();
if ( chartType !== 'bar' ) {
return false;
}
@ -143,8 +146,24 @@ class D3Chart extends Component {
return widthWithoutMargins < minimumWideWidth;
}
getMargin() {
const { margin } = this.props;
if ( window.isRtl ) {
return {
bottom: margin.bottom,
left: margin.right,
right: margin.left,
top: margin.top,
};
}
return margin;
}
getWidth() {
const { data, margin, chartType, width } = this.props;
const { data, chartType, width } = this.props;
const margin = this.getMargin();
if ( chartType !== 'bar' ) {
return width;
}

3
plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/axis.js vendored
View File

@ -241,6 +241,7 @@ const drawXAxis = ( node, params, scales, formats ) => {
const drawYAxis = ( node, scales, formats, margin ) => {
const yGrids = getYGrids( scales.yScale.domain()[ 1 ] );
const width = scales.xScale.range()[ 1 ];
const xPosition = window.isRtl ? width + margin.left + margin.right / 2 - 15 : -margin.left / 2 - 15;
node
.append( 'g' )
@ -257,7 +258,7 @@ const drawYAxis = ( node, scales, formats, margin ) => {
.append( 'g' )
.attr( 'class', 'axis y-axis' )
.attr( 'aria-hidden', 'true' )
.attr( 'transform', 'translate(-50, 12)' )
.attr( 'transform', 'translate(' + xPosition + ', 12)' )
.attr( 'text-anchor', 'start' )
.call(
d3AxisLeft( scales.yScale )

2
plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/tooltip.js vendored
View File

@ -25,7 +25,7 @@ class ChartTooltip {
elementWidthRatio,
) {
const tooltipSize = this.ref.getBoundingClientRect();
const d3BaseCoords = d3Select( '.d3-base' ).node().getBoundingClientRect();
const d3BaseCoords = this.ref.parentNode.querySelector( '.d3-base' ).getBoundingClientRect();
const leftMargin = Math.max( d3BaseCoords.left, chartCoords.left );
if ( this.position === 'below' ) {