META-INF.resources.js.components.detail.ReferralDetail.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.analytics.reports.web
Liferay Analytics Reports Web
There is a newer version: 2.0.101
/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayButton from '@clayui/button';
import ClayList from '@clayui/list';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import className from 'classnames';
import {sub} from 'frontend-js-web';
import PropTypes from 'prop-types';
import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';

import {
	ChartDispatchContext,
	ChartStateContext,
	useDateTitle,
	useIsPreviousPeriodButtonDisabled,
} from '../../context/ChartStateContext';
import ConnectionContext from '../../context/ConnectionContext';
import {
	StoreDispatchContext,
	StoreStateContext,
} from '../../context/StoreContext';
import {generateDateFormatters as dateFormat} from '../../utils/dateFormat';
import {numberFormat} from '../../utils/numberFormat';
import Hint from '../Hint';
import TimeSpanSelector from '../TimeSpanSelector';
import TotalCount from '../TotalCount';

const ITEMS_TO_SHOW = 5;

export default function ReferralDetail({
	currentPage,
	handleDetailPeriodChange,
	timeSpanOptions,
	trafficShareDataProvider,
	trafficSourcesDataProvider,
	trafficVolumeDataProvider,
}) {
	const {languageTag} = useContext(StoreStateContext);

	const [isReferringPagesExpanded, setIsReferringPagesExpanded] =
		useState(false);

	const [isReferringDomainsExpanded, setIsReferringDomainsExpanded] =
		useState(false);

	const {referringDomains, referringPages} = currentPage.data;

	const dateFormatters = useMemo(
		() => dateFormat(languageTag),
		[languageTag]
	);

	const {firstDate, lastDate} = useDateTitle();

	const title = useMemo(() => {
		return dateFormatters.formatChartTitle([firstDate, lastDate]);
	}, [dateFormatters, firstDate, lastDate]);

	const dispatch = useContext(StoreDispatchContext);

	const chartDispatch = useContext(ChartDispatchContext);

	const {pieChartLoading, timeSpanKey, timeSpanOffset} =
		useContext(ChartStateContext);

	const {validAnalyticsConnection} = useContext(ConnectionContext);

	const isPreviousPeriodButtonDisabled = useIsPreviousPeriodButtonDisabled();

	const firstUpdateRef = useRef(true);

	const trafficSourceDetailClasses = className(
		'c-p-3 traffic-source-detail',
		{
			'traffic-source-detail--loading': pieChartLoading,
		}
	);

	useEffect(() => {
		if (firstUpdateRef.current) {
			firstUpdateRef.current = false;

			return;
		}

		if (validAnalyticsConnection) {
			chartDispatch({
				payload: {
					loading: true,
				},
				type: 'SET_PIE_CHART_LOADING',
			});

			trafficSourcesDataProvider()
				.then((trafficSources) => {
					handleDetailPeriodChange(trafficSources, 'referral', true);
				})
				.catch(() => {
					dispatch({type: 'ADD_WARNING'});
				})
				.finally(() => {
					chartDispatch({
						payload: {
							loading: false,
						},
						type: 'SET_PIE_CHART_LOADING',
					});
				});
		}
	}, [
		chartDispatch,
		dispatch,
		handleDetailPeriodChange,
		timeSpanKey,
		timeSpanOffset,
		trafficSourcesDataProvider,
		validAnalyticsConnection,
	]);

	return (
		
			{pieChartLoading && (
				
			)}

			
				
			

			{title && {title}}

			

			

			
				
					
						
							
								{Liferay.Language.get('top-referring-pages')}

								
									
								
							
						
					

					
						
							{Liferay.Language.get('traffic')}
						
					
				

				{referringPages
					.slice(0, isReferringPagesExpanded ? 10 : ITEMS_TO_SHOW)
					.map(({trafficAmount, url}) => {
						return (
							
								
									
										
											
												{url}
											
										
									
								

								
									
										{numberFormat(
											languageTag,
											trafficAmount
										)}
									
								
							
						);
					})}
			

			{referringPages.length > 5 && (
				
						setIsReferringPagesExpanded(!isReferringPagesExpanded)
					}
					small
				>
					{isReferringPagesExpanded ? (
						{Liferay.Language.get('view-less')}
					) : (
						{Liferay.Language.get('view-more')}
					)}
				
			)}

			
				
					
						
							
								{Liferay.Language.get('top-referring-domains')}

								
									
								
							
						
					

					
						
							{Liferay.Language.get('traffic')}
						
					
				

				{referringDomains
					.slice(0, isReferringDomainsExpanded ? 10 : ITEMS_TO_SHOW)
					.map(({trafficAmount, url}) => {
						return (
							
								
									
										
											
												{url}
											
										
									
								

								
									
										{numberFormat(
											languageTag,
											trafficAmount
										)}
									
								
							
						);
					})}
			

			{referringDomains.length > 5 && (
				
						setIsReferringDomainsExpanded(
							!isReferringDomainsExpanded
						)
					}
					small
				>
					{isReferringDomainsExpanded ? (
						{Liferay.Language.get('view-less')}
					) : (
						{Liferay.Language.get('view-more')}
					)}
				
			)}
		
	);
}

ReferralDetail.propTypes = {
	currentPage: PropTypes.object.isRequired,
	handleDetailPeriodChange: PropTypes.func.isRequired,
	timeSpanOptions: PropTypes.arrayOf(
		PropTypes.shape({
			key: PropTypes.string,
			label: PropTypes.string,
		})
	).isRequired,
	trafficShareDataProvider: PropTypes.func.isRequired,
	trafficSourcesDataProvider: PropTypes.func.isRequired,
	trafficVolumeDataProvider: PropTypes.func.isRequired,
};