Example #1
0
					{ 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>
							);
						}
					} ) }
Example #2
0
	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>
		);
	}