@plusscommunities/pluss-maintenance-web-forms 1.1.37-beta.4 → 1.2.0-beta.0

package/src/components/AnalyticsHub.js

@@ -1,364 +0,0 @@
-import React, { useState, useEffect } from "react";
-import moment from "moment";
-import {
-	faCircleCheck,
-	faComment,
-	faWrench,
-} from "@fortawesome/free-solid-svg-icons";
-import { connect } from "react-redux";
-import { analyticsActions } from "../apis";
-import { PlussCore } from "../feature.config";
-import { values } from "../values.config";
-
-const { Analytics, Session, Components, Helper, Colours } = PlussCore;
-
-const getInitialState = () => ({
-	requests: 0,
-	prevRequests: 0,
-	completedRequests: 0,
-	prevCompletedRequests: 0,
-	comments: 0,
-	prevComments: 0,
-	isLoading: true,
-});
-
-// AnalyticsHub Component
-const AnalyticsHub = ({
-	startTime,
-	endTime,
-	auth,
-	prevText,
-	dayCount,
-	strings,
-	userType,
-	userCategory,
-	selectedSites,
-}) => {
-	const [analyticsData, setAnalyticsData] = useState(getInitialState());
-	const [isExportOpen, setIsExportOpen] = useState(false);
-	const [failedSites, setFailedSites] = useState([]);
-	const [comparisonData, setComparisonData] = useState({
-		requests: [],
-		completedRequests: [],
-		comments: [],
-		isLoading: true,
-	});
-
-	const comparisonMode = selectedSites && selectedSites.length > 1;
-
-	const hasAccess = Session.validateAccess(
-		auth.site,
-		values.permissionMaintenanceTracking,
-		auth,
-	);
-	if (!hasAccess) {
-		return null;
-	}
-
-	const featureTitle = ((key) => {
-		if (!strings || !strings.sideNav || !strings.sideNav[key]) {
-			return values.textMenuTitle;
-		}
-		return strings.sideNav[key];
-	})();
-
-	const exportColumns = [
-		{ label: "Select All", key: "" },
-		...(comparisonMode ? [{ label: "Site", key: "site" }] : []),
-		{ label: "Start Date", key: "startDate" },
-		{ label: "End Date", key: "endDate" },
-		{ label: `${values.textSingularName}s`, key: "requests" },
-		{
-			label: `Completed ${values.textSingularName}s`,
-			key: "completedRequests",
-		},
-		{ label: "Comments", key: "comments" },
-	];
-
-	useEffect(() => {
-		getData();
-	}, [startTime, endTime, userType, userCategory, selectedSites]);
-
-	const getData = async () => {
-		try {
-			setFailedSites([]);
-			if (comparisonMode) {
-				setComparisonData({
-					requests: [],
-					completedRequests: [],
-					comments: [],
-					isLoading: true,
-				});
-				const multiSiteResultsObj = await Analytics.fetchMultiSiteData(
-					selectedSites,
-					async (site) => {
-						const { data } = await analyticsActions.getAggregateEntityStats(
-							site,
-							values.analyticsKey,
-							startTime,
-							endTime,
-							true,
-							{ userType, userCategory },
-						);
-						return data;
-					},
-				);
-				const roles = auth.user.Roles;
-				const failed = Object.entries(multiSiteResultsObj)
-					.filter(([, data]) => data === null)
-					.map(([site]) => Helper.getSiteNameFromRoles(site, roles));
-				setFailedSites(failed);
-				const multiSiteResults = Object.entries(multiSiteResultsObj)
-					.filter(([, data]) => data !== null)
-					.map(([site, data]) => ({ site, data }));
-				const buildComparison = (activityKey, countType) =>
-					multiSiteResults.map((result) => ({
-						name: Helper.getSiteNameFromRoles(result.site, roles),
-						value: Analytics.countActivities(
-							result.data,
-							activityKey,
-							countType,
-						),
-					}));
-				setComparisonData({
-					requests: buildComparison("Request", "total"),
-					completedRequests: buildComparison("RequestCompleted", "unique"),
-					comments: buildComparison("Comment", "total"),
-					isLoading: false,
-				});
-			} else {
-				setAnalyticsData(getInitialState());
-				const site =
-					selectedSites && selectedSites.length === 1
-						? selectedSites[0]
-						: auth.site;
-				const timeDifference = endTime - startTime;
-				const [currentStatsResponse, prevStatsResponse] = await Promise.all([
-					analyticsActions.getAggregateEntityStats(
-						site,
-						values.analyticsKey,
-						startTime,
-						endTime,
-						true,
-						{ userType, userCategory },
-					),
-					analyticsActions.getAggregateEntityStats(
-						site,
-						values.analyticsKey,
-						startTime - timeDifference,
-						startTime,
-						true,
-						{ userType, userCategory },
-					),
-				]);
-
-				const data = {
-					requests: Analytics.countActivities(
-						currentStatsResponse.data,
-						"Request",
-						"total",
-					),
-					prevRequests: Analytics.countActivities(
-						prevStatsResponse.data,
-						"Request",
-						"total",
-					),
-					completedRequests: Analytics.countActivities(
-						currentStatsResponse.data,
-						"RequestCompleted",
-						"unique",
-					),
-					prevCompletedRequests: Analytics.countActivities(
-						prevStatsResponse.data,
-						"RequestCompleted",
-						"unique",
-					),
-					comments: Analytics.countActivities(
-						currentStatsResponse.data,
-						"Comment",
-						"total",
-					),
-					prevComments: Analytics.countActivities(
-						prevStatsResponse.data,
-						"Comment",
-						"total",
-					),
-					isLoading: false,
-				};
-				setAnalyticsData(data);
-			}
-		} catch (err) {
-			if (comparisonMode) {
-				setComparisonData((prev) => ({ ...prev, isLoading: false }));
-			} else {
-				setAnalyticsData((prev) => ({ ...prev, isLoading: false }));
-			}
-		}
-	};
-
-	const isReadyToOpenCSV = () => {
-		return comparisonMode
-			? !comparisonData.isLoading
-			: !analyticsData.isLoading;
-	};
-
-	const getExportSource = () => {
-		if (comparisonMode) {
-			const sites = comparisonData.requests || [];
-			return sites.map((site, i) => ({
-				site: site.name,
-				startDate: moment(startTime + 1).format("D-MM-YYYY"),
-				endDate: moment(endTime).format("D-MM-YYYY"),
-				requests: site.value,
-				completedRequests:
-					(comparisonData.completedRequests[i] &&
-						comparisonData.completedRequests[i].value) ||
-					0,
-				comments:
-					(comparisonData.comments[i] && comparisonData.comments[i].value) || 0,
-			}));
-		}
-		return [
-			{
-				startDate: moment(startTime + 1).format("D-MM-YYYY"),
-				endDate: moment(endTime).format("D-MM-YYYY"),
-				requests: analyticsData.requests,
-				completedRequests: analyticsData.completedRequests,
-				comments: analyticsData.comments,
-			},
-		];
-	};
-
-	const csvPopup = () => {
-		if (!isExportOpen) {
-			return null;
-		}
-		const source = getExportSource();
-		const filterSuffix = [userType, userCategory]
-			.filter(Boolean)
-			.map((f) => f.toLowerCase().replace(/\s+/g, "-"))
-			.join("_");
-		return (
-			<Components.ExportCsvPopup
-				onClose={() => {
-					setIsExportOpen(false);
-				}}
-				columns={exportColumns}
-				source={source}
-				filename={`${values.analyticsKey}analytics${comparisonMode ? "_comparison" : ""}${filterSuffix ? `_${filterSuffix}` : ""}_${source[0].startDate}_${source[0].endDate}.csv`}
-			/>
-		);
-	};
-
-	return (
-		<div className="dashboardSection">
-			{csvPopup()}
-			<div>
-				<Components.Text type="h4" className="inlineBlock marginRight-40">
-					{featureTitle}
-				</Components.Text>
-				<Components.Button
-					inline
-					buttonType="primaryAction"
-					onClick={() => {
-						if (!isReadyToOpenCSV()) return;
-						setIsExportOpen(true);
-					}}
-					isActive={isReadyToOpenCSV()}
-					leftIcon="file-code-o"
-				>
-					Export CSV
-				</Components.Button>
-			</div>
-			{failedSites.length > 0 && (
-				<Components.Text type="help" style={{ color: Colours.COLOUR_RED, marginTop: 8 }}>
-					Data unavailable for: {failedSites.join(", ")}
-				</Components.Text>
-			)}
-			<div className="analyticsSection dashboardSection_content">
-				{(() => {
-					const chartSuffix = [
-						selectedSites && selectedSites.length > 0
-							? `&sites=${selectedSites.join(",")}`
-							: "",
-						userType ? `&userType=${encodeURIComponent(userType)}` : "",
-						userCategory
-							? `&userCategory=${encodeURIComponent(userCategory)}`
-							: "",
-					].join("");
-					if (comparisonMode) {
-						return (
-							<div
-								style={{ display: "flex", flexDirection: "column", gap: 16 }}
-							>
-								<Components.ComparisonStatBox
-									title={`${featureTitle} Requests`}
-									data={comparisonData.requests}
-									prevText={prevText}
-									viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=Request&countType=total&dayCount=${dayCount}${chartSuffix}`}
-									isLoading={comparisonData.isLoading}
-								/>
-								<Components.ComparisonStatBox
-									title={`Completed ${featureTitle} Requests`}
-									data={comparisonData.completedRequests}
-									prevText={prevText}
-									viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=RequestCompleted&countType=unique&dayCount=${dayCount}${chartSuffix}`}
-									isLoading={comparisonData.isLoading}
-								/>
-								<Components.ComparisonStatBox
-									title={`${featureTitle} Comments`}
-									data={comparisonData.comments}
-									prevText={prevText}
-									viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=Comment&countType=total&dayCount=${dayCount}${chartSuffix}`}
-									isLoading={comparisonData.isLoading}
-								/>
-							</div>
-						);
-					}
-					return (
-						<>
-							<Components.StatBox
-								title={`${featureTitle} Requests`}
-								icon={faWrench}
-								value={analyticsData.requests}
-								previousValue={analyticsData.prevRequests}
-								prevText={prevText}
-								viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=Request&countType=total&dayCount=${dayCount}${chartSuffix}`}
-								isLoading={analyticsData.isLoading}
-							/>
-							<Components.StatBox
-								title={`Completed ${featureTitle} Requests`}
-								icon={faCircleCheck}
-								value={analyticsData.completedRequests}
-								previousValue={analyticsData.prevCompletedRequests}
-								prevText={prevText}
-								viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=RequestCompleted&countType=unique&dayCount=${dayCount}${chartSuffix}`}
-								isLoading={analyticsData.isLoading}
-							/>
-							<Components.StatBox
-								title={`${featureTitle} Comments`}
-								icon={faComment}
-								value={analyticsData.comments}
-								previousValue={analyticsData.prevComments}
-								prevText={prevText}
-								viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=Comment&countType=total&dayCount=${dayCount}${chartSuffix}`}
-								isLoading={analyticsData.isLoading}
-							/>
-						</>
-					);
-				})()}
-			</div>
-		</div>
-	);
-};
-
-const mapStateToProps = (state) => {
-	const { auth } = state;
-	return {
-		auth,
-		strings: (state.strings && state.strings.config) || {},
-	};
-};
-
-const toExport = connect(mapStateToProps, {})(AnalyticsHub);
-export { toExport as AnalyticsHub };