{ tabs.map( ( tab, tabIndex ) => {
if ( ! isLoading ) {
const itemChartData = this.buildChartData( data[ selectedIndex ], tabs[ tabIndex ] );
const delta = getDelta( deltas, selectedDate, tab.attr );
const deltaValue =
delta.direction === 'is-undefined-increase'
? '-'
: Math.abs( Math.round( delta.percentage_change * 100 ) );
const periodFormat = getPeriodFormat( unit, delta.reference_period );
return (
<Tab
key={ tab.attr }
index={ tabIndex }
label={ tab.label }
selected={ tabIndex === selectedTabIndex }
tabClick={ this.tabClick }
>
<span className="store-stats-chart__value value">
{ tab.type === 'currency'
? formatCurrency( itemChartData.value, data[ selectedIndex ].currency )
: Math.round( itemChartData.value * 100 ) / 100 }
</span>
<Delta
value={ `${ deltaValue }%` }
className={ `${ delta.favorable } ${ delta.direction }` }
suffix={ `since ${ moment( delta.reference_period, periodFormat ).format(
UNITS[ unit ].sinceFormat
) }` }
/>
</Tab>
);
}
} ) }
render() {
const { data, deltas, query, selectedDate, widgets } = this.props;
const { unit } = query;
const selectedIndex = findIndex( data, d => d.period === selectedDate );
const firstRealKey = Object.keys( deltas[ selectedIndex ] ).filter(
key => key !== 'period'
)[ 0 ];
const sincePeriod = getDelta( deltas, selectedDate, firstRealKey );
const periodFormat = getPeriodFormat( unit, sincePeriod.reference_period );
const values = [
{
key: 'title',
label: translate( 'Stat' ),
},
{
key: 'value',
label: translate( 'Value' ),
},
{
key: 'sparkline',
label: translate( 'Trend' ),
},
{
key: 'delta',
label: `${ translate( 'Since' ) } \
${ moment( sincePeriod.reference_period, periodFormat ).format( UNITS[ unit ].sinceFormat ) }`,
},
];
const titles = (
<TableRow isHeader>
{ values.map( ( value, i ) => {
return (
<TableItem
className={ classnames( 'store-stats-widget-list__table-item', value.key ) }
isHeader
key={ i }
isTitle={ 0 === i }
>
{ value.label }
</TableItem>
);
} ) }
</TableRow>
);
const widgetData = widgets.map( widget => {
const timeSeries = data.map( row => +row[ widget.key ] );
const delta = getDelta( deltas, selectedDate, widget.key );
const deltaValue =
delta.direction === 'is-undefined-increase'
? '-'
: Math.abs( Math.round( delta.percentage_change * 100 ) );
return {
title: widget.title,
value: formatValue( timeSeries[ selectedIndex ], widget.format, sincePeriod.currency ),
sparkline: (
<Sparkline
aspectRatio={ 3 }
data={ timeSeries }
highlightIndex={ selectedIndex }
maxHeight={ 50 }
/>
),
delta: (
<Delta
value={ `${ deltaValue }%` }
className={ `${ delta.favorable } ${ delta.direction }` }
/>
),
};
} );
return (
<Table className="store-stats-widget-list" header={ titles }>
{ widgetData.map( ( row, i ) => (
<TableRow className="store-stats-widget-list__table-row" key={ i }>
{ values.map( ( value, j ) => (
<TableItem
className={ classnames( 'store-stats-widget-list__table-item', value.key ) }
key={ value.key }
isTitle={ 0 === j }
>
{ row[ value.key ] }
</TableItem>
) ) }
</TableRow>
) ) }
</Table>
);
}
