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 ) { 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 adjHeight = height - margin.top - margin.bottom;
const adjWidth = this.getWidth() - margin.left - margin.right; const adjWidth = this.getWidth() - margin.left - margin.right;
@ -113,7 +114,8 @@ class D3Chart extends Component {
} }
drawChart( node ) { 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 uniqueDates = getUniqueDates( data, dateParser );
const formats = this.getFormatParams(); const formats = this.getFormatParams();
const params = this.getParams( uniqueDates ); const params = this.getParams( uniqueDates );
@ -132,7 +134,8 @@ class D3Chart extends Component {
} }
shouldBeCompact() { shouldBeCompact() {
const { data, margin, chartType, width } = this.props; const { data, chartType, width } = this.props;
const margin = this.getMargin();
if ( chartType !== 'bar' ) { if ( chartType !== 'bar' ) {
return false; return false;
} }
@ -143,8 +146,24 @@ class D3Chart extends Component {
return widthWithoutMargins < minimumWideWidth; 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() { getWidth() {
const { data, margin, chartType, width } = this.props; const { data, chartType, width } = this.props;
const margin = this.getMargin();
if ( chartType !== 'bar' ) { if ( chartType !== 'bar' ) {
return width; 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 drawYAxis = ( node, scales, formats, margin ) => {
const yGrids = getYGrids( scales.yScale.domain()[ 1 ] ); const yGrids = getYGrids( scales.yScale.domain()[ 1 ] );
const width = scales.xScale.range()[ 1 ]; const width = scales.xScale.range()[ 1 ];
const xPosition = window.isRtl ? width + margin.left + margin.right / 2 - 15 : -margin.left / 2 - 15;
node node
.append( 'g' ) .append( 'g' )
@ -257,7 +258,7 @@ const drawYAxis = ( node, scales, formats, margin ) => {
.append( 'g' ) .append( 'g' )
.attr( 'class', 'axis y-axis' ) .attr( 'class', 'axis y-axis' )
.attr( 'aria-hidden', 'true' ) .attr( 'aria-hidden', 'true' )
.attr( 'transform', 'translate(-50, 12)' ) .attr( 'transform', 'translate(' + xPosition + ', 12)' )
.attr( 'text-anchor', 'start' ) .attr( 'text-anchor', 'start' )
.call( .call(
d3AxisLeft( scales.yScale ) 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, elementWidthRatio,
) { ) {
const tooltipSize = this.ref.getBoundingClientRect(); 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 ); const leftMargin = Math.max( d3BaseCoords.left, chartCoords.left );
if ( this.position === 'below' ) { if ( this.position === 'below' ) {