META-INF.resources.js.components.detail.Countries.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 ClayDropDown from '@clayui/drop-down';
import ClayIcon from '@clayui/icon';
import ClayList from '@clayui/list';
import PropTypes from 'prop-types';
import React, {useContext, useState} from 'react';

import {StoreStateContext} from '../../context/StoreContext';
import {numberFormat} from '../../utils/numberFormat';

const COUNTRY_VALUE_TYPE = [
	{label: Liferay.Language.get('views'), name: 'views'},
	{label: Liferay.Language.get('views-percentage'), name: 'views-percentage'},
];

export default function Countries({currentPage}) {
	const [isDropdownOpen, setIsDropdownOpen] = useState(false);

	const [countryValueType, setCountryValueType] = useState(
		COUNTRY_VALUE_TYPE[0]
	);

	const {languageTag, publishedToday} = useContext(StoreStateContext);

	const handleCountryValueType = (valueTypeName) => {
		const newCountryValueType = COUNTRY_VALUE_TYPE.find(
			(countryValueType) => {
				return countryValueType.name === valueTypeName;
			}
		);
		setCountryValueType(newCountryValueType);
	};

	return (
		<>
			
				{Liferay.Language.get('views-by-location')}
			

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

					
						
									
										
											{countryValueType.label}
										

										
									
								
							}
						>
							
								{COUNTRY_VALUE_TYPE.map((valueType, index) => (
									 {
											handleCountryValueType(
												valueType.name
											);
											setIsDropdownOpen(false);
										}}
									>
										{valueType.label}
									
								))}
							
						
					
				

				{!publishedToday &&
					currentPage.data.countrySearch.map(
						({countryCode, countryName, views, viewsP}) => {
							return (
								
									
										
											
												
													{countryName}
												
											
										
									

									
										
											{countryValueType.name === 'views'
												? numberFormat(
														languageTag,
														views
													)
												: countryValueType.name ===
													  'views-percentage'
													? `${numberFormat(
															languageTag,
															viewsP
														)}%`
													: views}
										
									
								
							);
						}
					)}
			
		
	);
}

Countries.propTypes = {
	currentPage: PropTypes.object.isRequired,
};