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

Fix date formatting in safari by switching to moment (https://github.com/woocommerce/woocommerce-admin/pull/1290)

This commit is contained in:
Justin Shreve 2019-01-14 11:29:46 -05:00 committed by GitHub
parent 81b28d7b19
commit a3ccfd300e
7 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-admin/packages/components/CHANGELOG.md
View File

@ -11,6 +11,7 @@
- `getColor()` method in chart utils now requires `keys` and `colorScheme` to be passed as separate params. - `getColor()` method in chart utils now requires `keys` and `colorScheme` to be passed as separate params.
- Fix to avoid duplicated Y-axis ticks when the Y max value was 0. - Fix to avoid duplicated Y-axis ticks when the Y max value was 0.
- Remove decimals from Y-axis when displaying currencies. - Remove decimals from Y-axis when displaying currencies.
- Fix date formatting on charts in Safari.
# 1.3.0 # 1.3.0

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

@ -5,6 +5,7 @@
*/ */
import { axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis'; import { axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis';
import { smallBreak, wideBreak } from './breakpoints'; import { smallBreak, wideBreak } from './breakpoints';
import moment from 'moment';
const dayTicksThreshold = 63; const dayTicksThreshold = 63;
const weekTicksThreshold = 9; const weekTicksThreshold = 9;
@ -107,8 +108,8 @@ const calculateXTicksIncrementFactor = ( uniqueDates, maxTicks ) => {
* @returns {boolean} whether the first and last date are different hours from the same date. * @returns {boolean} whether the first and last date are different hours from the same date.
*/ */
const areDatesInTheSameDay = dates => { const areDatesInTheSameDay = dates => {
const firstDate = new Date( dates [ 0 ] ); const firstDate = moment( dates [ 0 ] ).toDate();
const lastDate = new Date( dates [ dates.length - 1 ] ); const lastDate = moment( dates [ dates.length - 1 ] ).toDate();
return ( return (
firstDate.getDate() === lastDate.getDate() && firstDate.getDate() === lastDate.getDate() &&
firstDate.getMonth() === lastDate.getMonth() && firstDate.getMonth() === lastDate.getMonth() &&
@ -123,7 +124,7 @@ const areDatesInTheSameDay = dates => {
*/ */
const getFirstDatePerMonth = dates => { const getFirstDatePerMonth = dates => {
return dates.filter( return dates.filter(
( date, i ) => i === 0 || new Date( date ).getMonth() !== new Date( dates[ i - 1 ] ).getMonth() ( date, i ) => i === 0 || moment( date ).toDate().getMonth() !== moment( dates[ i - 1 ] ).toDate().getMonth()
); );
}; };
@ -188,9 +189,9 @@ export const getYGrids = ( yMax ) => {
export const drawAxis = ( node, params ) => { export const drawAxis = ( node, params ) => {
const xScale = params.type === 'line' ? params.xLineScale : params.xScale; const xScale = params.type === 'line' ? params.xLineScale : params.xScale;
const removeDuplicateDates = ( d, i, ticks, formatter ) => { const removeDuplicateDates = ( d, i, ticks, formatter ) => {
const monthDate = d instanceof Date ? d : new Date( d ); const monthDate = moment( d ).toDate();
let prevMonth = i !== 0 ? ticks[ i - 1 ] : ticks[ i ]; let prevMonth = i !== 0 ? ticks[ i - 1 ] : ticks[ i ];
prevMonth = prevMonth instanceof Date ? prevMonth : new Date( prevMonth ); prevMonth = prevMonth instanceof Date ? prevMonth : moment( prevMonth ).toDate();
return i === 0 return i === 0
? formatter( monthDate ) ? formatter( monthDate )
: compareStrings( formatter( prevMonth ), formatter( monthDate ) ).join( ' ' ); : compareStrings( formatter( prevMonth ), formatter( monthDate ) ).join( ' ' );
@ -198,7 +199,7 @@ export const drawAxis = ( node, params ) => {
const yGrids = getYGrids( params.yMax ); const yGrids = getYGrids( params.yMax );
const ticks = params.xTicks.map( d => ( params.type === 'line' ? new Date( d ) : d ) ); const ticks = params.xTicks.map( d => ( params.type === 'line' ? moment( d ).toDate() : d ) );
node node
.append( 'g' ) .append( 'g' )

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

@ -5,6 +5,7 @@
*/ */
import { get } from 'lodash'; import { get } from 'lodash';
import { event as d3Event, select as d3Select } from 'd3-selection'; import { event as d3Event, select as d3Select } from 'd3-selection';
import moment from 'moment';
/** /**
* Internal dependencies * Internal dependencies
@ -34,7 +35,7 @@ export const drawBars = ( node, data, params ) => {
'aria-label', 'aria-label',
d => d =>
params.mode === 'item-comparison' params.mode === 'item-comparison'
? params.tooltipLabelFormat( d.date instanceof Date ? d.date : new Date( d.date ) ) ? params.tooltipLabelFormat( d.date instanceof Date ? d.date : moment( d.date ).toDate() )
: null : null
); );

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

@ -6,6 +6,7 @@
import { find, get } from 'lodash'; import { find, get } from 'lodash';
import { format as d3Format } from 'd3-format'; import { format as d3Format } from 'd3-format';
import { line as d3Line } from 'd3-shape'; import { line as d3Line } from 'd3-shape';
import moment from 'moment';
/** /**
* Allows an overriding formatter or defaults to d3Format or d3TimeFormat * Allows an overriding formatter or defaults to d3Format or d3TimeFormat
@ -93,7 +94,7 @@ export const getUniqueDates = ( lineData, parseDate ) => {
*/ */
export const getLine = ( xLineScale, yScale ) => export const getLine = ( xLineScale, yScale ) =>
d3Line() d3Line()
.x( d => xLineScale( new Date( d.date ) ) ) .x( d => xLineScale( moment( d.date ).toDate() ) )
.y( d => yScale( d.value ) ); .y( d => yScale( d.value ) );
/** /**
@ -107,15 +108,15 @@ export const getLine = ( xLineScale, yScale ) =>
export const getDateSpaces = ( data, uniqueDates, width, xLineScale ) => export const getDateSpaces = ( data, uniqueDates, width, xLineScale ) =>
uniqueDates.map( ( d, i ) => { uniqueDates.map( ( d, i ) => {
const datapoints = find( data, { date: d } ); const datapoints = find( data, { date: d } );
const xNow = xLineScale( new Date( d ) ); const xNow = xLineScale( moment( d ).toDate() );
const xPrev = const xPrev =
i >= 1 i >= 1
? xLineScale( new Date( uniqueDates[ i - 1 ] ) ) ? xLineScale( moment( uniqueDates[ i - 1 ] ).toDate() )
: xLineScale( new Date( uniqueDates[ 0 ] ) ); : xLineScale( moment( uniqueDates[ 0 ] ).toDate() );
const xNext = const xNext =
i < uniqueDates.length - 1 i < uniqueDates.length - 1
? xLineScale( new Date( uniqueDates[ i + 1 ] ) ) ? xLineScale( moment( uniqueDates[ i + 1 ] ).toDate() )
: xLineScale( new Date( uniqueDates[ uniqueDates.length - 1 ] ) ); : xLineScale( moment( uniqueDates[ uniqueDates.length - 1 ] ).toDate() );
let xWidth = i === 0 ? xNext - xNow : xNow - xPrev; let xWidth = i === 0 ? xNext - xNow : xNow - xPrev;
const xStart = i === 0 ? 0 : xNow - xWidth / 2; const xStart = i === 0 ? 0 : xNow - xWidth / 2;
xWidth = i === 0 || i === uniqueDates.length - 1 ? xWidth / 2 : xWidth; xWidth = i === 0 || i === uniqueDates.length - 1 ? xWidth / 2 : xWidth;

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

@ -5,6 +5,7 @@
*/ */
import { event as d3Event, select as d3Select } from 'd3-selection'; import { event as d3Event, select as d3Select } from 'd3-selection';
import { smallBreak, wideBreak } from './breakpoints'; import { smallBreak, wideBreak } from './breakpoints';
import moment from 'moment';
/** /**
* Internal dependencies * Internal dependencies
@ -64,13 +65,13 @@ export const drawLines = ( node, data, params ) => {
const opacity = d.focus ? 1 : 0.1; const opacity = d.focus ? 1 : 0.1;
return d.visible ? opacity : 0; return d.visible ? opacity : 0;
} ) } )
.attr( 'cx', d => params.xLineScale( new Date( d.date ) ) ) .attr( 'cx', d => params.xLineScale( moment( d.date ).toDate() ) )
.attr( 'cy', d => params.yScale( d.value ) ) .attr( 'cy', d => params.yScale( d.value ) )
.attr( 'tabindex', '0' ) .attr( 'tabindex', '0' )
.attr( 'aria-label', d => { .attr( 'aria-label', d => {
const label = d.label const label = d.label
? d.label ? d.label
: params.tooltipLabelFormat( d.date instanceof Date ? d.date : new Date( d.date ) ); : params.tooltipLabelFormat( d.date instanceof Date ? d.date : moment( d.date ).toDate() );
return `${ label } ${ params.tooltipValueFormat( d.value ) }`; return `${ label } ${ params.tooltipValueFormat( d.value ) }`;
} ) } )
.on( 'focus', ( d, i, nodes ) => { .on( 'focus', ( d, i, nodes ) => {
@ -99,9 +100,9 @@ export const drawLines = ( node, data, params ) => {
focusGrid focusGrid
.append( 'line' ) .append( 'line' )
.attr( 'x1', d => params.xLineScale( new Date( d.date ) ) ) .attr( 'x1', d => params.xLineScale( moment( d.date ).toDate() ) )
.attr( 'y1', 0 ) .attr( 'y1', 0 )
.attr( 'x2', d => params.xLineScale( new Date( d.date ) ) ) .attr( 'x2', d => params.xLineScale( moment( d.date ).toDate() ) )
.attr( 'y2', params.height ); .attr( 'y2', params.height );
focusGrid focusGrid
@ -113,7 +114,7 @@ export const drawLines = ( node, data, params ) => {
.attr( 'fill', d => getColor( d.key, params.orderedKeys, params.colorScheme ) ) .attr( 'fill', d => getColor( d.key, params.orderedKeys, params.colorScheme ) )
.attr( 'stroke', '#fff' ) .attr( 'stroke', '#fff' )
.attr( 'stroke-width', lineStroke + 2 ) .attr( 'stroke-width', lineStroke + 2 )
.attr( 'cx', d => params.xLineScale( new Date( d.date ) ) ) .attr( 'cx', d => params.xLineScale( moment( d.date ).toDate() ) )
.attr( 'cy', d => params.yScale( d.value ) ); .attr( 'cy', d => params.yScale( d.value ) );
focus focus

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

@ -9,6 +9,7 @@ import {
scaleLinear as d3ScaleLinear, scaleLinear as d3ScaleLinear,
scaleTime as d3ScaleTime, scaleTime as d3ScaleTime,
} from 'd3-scale'; } from 'd3-scale';
import moment from 'moment';
/** /**
* Describes and rounds the maximum y value to the nearest thousand, ten-thousand, million etc. In case it is a decimal number, ceils it. * Describes and rounds the maximum y value to the nearest thousand, ten-thousand, million etc. In case it is a decimal number, ceils it.
@ -57,7 +58,10 @@ export const getXGroupScale = ( orderedKeys, xScale, compact = false ) =>
*/ */
export const getXLineScale = ( uniqueDates, width ) => export const getXLineScale = ( uniqueDates, width ) =>
d3ScaleTime() d3ScaleTime()
.domain( [ new Date( uniqueDates[ 0 ] ), new Date( uniqueDates[ uniqueDates.length - 1 ] ) ] ) .domain( [
moment( uniqueDates[ 0 ], 'YYYY-MM-DD HH:mm' ).toDate(),
moment( uniqueDates[ uniqueDates.length - 1 ], 'YYYY-MM-DD HH:mm' ).toDate(),
] )
.rangeRound( [ 0, width ] ); .rangeRound( [ 0, width ] );
/** /**

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

@ -4,6 +4,7 @@
* External dependencies * External dependencies
*/ */
import { select as d3Select } from 'd3-selection'; import { select as d3Select } from 'd3-selection';
import moment from 'moment';
/** /**
* Internal dependencies * Internal dependencies
@ -108,11 +109,7 @@ export const calculateTooltipPosition = ( element, chart, tooltipPosition, eleme
const getTooltipRowLabel = ( d, row, params ) => { const getTooltipRowLabel = ( d, row, params ) => {
if ( d[ row.key ].labelDate ) { if ( d[ row.key ].labelDate ) {
return params.tooltipLabelFormat( return params.tooltipLabelFormat( moment( d[ row.key ].labelDate ).toDate() );
d[ row.key ].labelDate instanceof Date
? d[ row.key ].labelDate
: new Date( d[ row.key ].labelDate )
);
} }
return row.key; return row.key;
}; };
@ -135,7 +132,7 @@ export const showTooltip = ( params, d, position ) => {
const tooltipTitle = params.tooltipTitle const tooltipTitle = params.tooltipTitle
? params.tooltipTitle ? params.tooltipTitle
: params.tooltipLabelFormat( d.date instanceof Date ? d.date : new Date( d.date ) ); : params.tooltipLabelFormat( moment( d.date ).toDate() );
d3Select( params.tooltip ) d3Select( params.tooltip )
.style( 'left', position.x + 'px' ) .style( 'left', position.x + 'px' )