@plusscommunities/pluss-circles-web-groups 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-circles-web-groups",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "Extension package to enable circles on Pluss Communities Platform",
   "main": "dist/index.cjs.js",
   "scripts": {
@@ -35,7 +35,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "@plusscommunities/pluss-core-web": "1.4.17",
+    "@plusscommunities/pluss-core-web": "1.4.22",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "react": "^16.14.0",

package/src/apis/index.js

@@ -1 +1,7 @@
+import { PlussCore } from '../feature.config';
+
+const { Apis } = PlussCore;
+
+export const analyticsActions = Apis.analyticsActions;
+
 export * from './circleActions';

package/src/components/AnalyticsHub.js

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import { faEye, faMessage, faPeopleArrows, faUserGroup, faUserTie, faUsers, faUsersRectangle } from '@fortawesome/free-solid-svg-icons';
+import { connect } from 'react-redux';
+import { analyticsActions } from '../apis';
+import { values } from '../values.config';
+import { PlussCore } from '../feature.config';
+
+const { Analytics, Session, Components } = PlussCore;
+
+const getInitialState = () => ({
+  isLoading: true,
+  messages: 0,
+  prevMessages: 0,
+  staffMessages: 0,
+  prevStaffMessages: 0,
+  residentMessages: 0,
+  prevResidentMessages: 0,
+  groupMessages: 0,
+  prevGroupMessages: 0,
+  privateMessages: 0,
+  prevPrivateMessages: 0,
+  activeGroups: 0,
+  prevActiveGroups: 0,
+});
+
+// AnalyticsHub Component
+const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount, strings }) => {
+  const [analyticsData, setAnalyticsData] = useState(getInitialState());
+  const [isExportOpen, setIsExportOpen] = useState(false);
+
+  const hasAccess = Session.validateAccess(auth.site, values.permissionNewsletter, auth);
+  if (!hasAccess) {
+    return null;
+  }
+
+  const featureTitle = ((key) => {
+    if (!strings || !strings.sideNav || !strings.sideNav[key]) {
+      return values.textFeatureTitle;
+    }
+    return strings.sideNav[key];
+  })();
+
+  const exportColumns = [
+    { label: 'Select All', key: '' },
+    { label: 'Start Date', key: 'startDate' },
+    { label: 'End Date', key: 'endDate' },
+    { label: 'Messages', key: 'messages' },
+    { label: 'Messages by Staff', key: 'staffMessages' },
+    { label: 'Messages by Primary Users', key: 'residentMessages' },
+    { label: 'Group Messages', key: 'groupMessages' },
+    { label: 'Private Messages', key: 'privateMessages' },
+    { label: 'Groups with Messages', key: 'activeGroups' },
+  ];
+
+  useEffect(() => {
+    getData();
+  }, [startTime, endTime]);
+
+  const getData = async () => {
+    setAnalyticsData(getInitialState());
+    // Load analytics data here using startTime and endTime
+    const timeDifference = endTime - startTime;
+    const [currentStatsResponse, prevStatsResponse] = await Promise.all([
+      analyticsActions.getAggregateEntityStats(auth.site, values.entityKey, startTime, endTime, true),
+      analyticsActions.getAggregateEntityStats(auth.site, values.entityKey, startTime - timeDifference, startTime, true),
+    ]);
+
+    const data = {
+      messages: Analytics.countActivities(currentStatsResponse.data, 'Message', 'total'),
+      prevMessages: Analytics.countActivities(prevStatsResponse.data, 'Message', 'total'),
+      staffMessages: Analytics.countActivities(currentStatsResponse.data, 'StaffMessage', 'total'),
+      prevStaffMessages: Analytics.countActivities(prevStatsResponse.data, 'StaffMessage', 'total'),
+      residentMessages: Analytics.countActivities(currentStatsResponse.data, 'ResidentMessage', 'total'),
+      prevResidentMessages: Analytics.countActivities(prevStatsResponse.data, 'ResidentMessage', 'total'),
+      groupMessages: Analytics.countActivities(currentStatsResponse.data, 'GroupMessage', 'total'),
+      prevGroupMessages: Analytics.countActivities(prevStatsResponse.data, 'GroupMessage', 'total'),
+      privateMessages: Analytics.countActivities(currentStatsResponse.data, 'PrivateMessage', 'total'),
+      prevPrivateMessages: Analytics.countActivities(prevStatsResponse.data, 'PrivateMessage', 'total'),
+      activeGroups: Analytics.countActivities(currentStatsResponse.data, 'GroupMessage', 'unique'),
+      prevActiveGroups: Analytics.countActivities(prevStatsResponse.data, 'GroupMessage', 'unique'),
+      // uniquePageView: Analytics.countActivities(currentStatsResponse.data, 'UniquePageView', 'uniquearray'),
+      // prevUniquePageView: Analytics.countActivities(prevStatsResponse.data, 'UniquePageView', 'uniquearray'),
+      isLoading: false,
+    };
+    setAnalyticsData(data);
+  };
+
+  const isReadyToOpenCSV = () => {
+    return !analyticsData.isLoading;
+  };
+
+  const getExportSource = () => {
+    return [
+      {
+        startDate: moment(startTime + 1).format('D-MM-YYYY'),
+        endDate: moment(endTime).format('D-MM-YYYY'),
+        messages: analyticsData.messages,
+        staffMessages: analyticsData.staffMessages,
+        residentMessages: analyticsData.residentMessages,
+        groupMessages: analyticsData.groupMessages,
+        privateMessages: analyticsData.privateMessages,
+        activeGroups: analyticsData.activeGroups,
+      },
+    ];
+  };
+
+  const csvPopup = () => {
+    if (!isExportOpen) {
+      return null;
+    }
+    const source = getExportSource();
+    return (
+      <Components.ExportCsvPopup
+        onClose={() => {
+          setIsExportOpen(false);
+        }}
+        columns={exportColumns}
+        source={source}
+        filename={`${values.analyticsKey}analytics_${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>
+      <div className="analyticsSection dashboardSection_content">
+        <Components.StatBox
+          title="Groups with Messages"
+          icon={faUserGroup}
+          value={analyticsData.activeGroups}
+          previousValue={analyticsData.prevActiveGroups}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=GroupMessage&countType=unique&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Messages"
+          icon={faMessage}
+          value={analyticsData.messages}
+          previousValue={analyticsData.prevMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=Message&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Messages by Staff"
+          icon={faUserTie}
+          value={analyticsData.staffMessages}
+          previousValue={analyticsData.prevStaffMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=StaffMessage&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Messages by Primary Users"
+          icon={faUsers}
+          value={analyticsData.residentMessages}
+          previousValue={analyticsData.prevResidentMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=ResidentMessage&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Group Messages"
+          icon={faUsersRectangle}
+          value={analyticsData.groupMessages}
+          previousValue={analyticsData.prevGroupMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=GroupMessage&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Private Messages"
+          icon={faPeopleArrows}
+          value={analyticsData.privateMessages}
+          previousValue={analyticsData.prevPrivateMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=PrivateMessage&countType=total&dayCount=${dayCount}`}
+          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 };

package/src/index.js

@@ -1,6 +1,7 @@
 import Circles from './screens/Circles';
 import AddCircle from './screens/AddCircle';
 import Circle from './screens/Circle';
+import { AnalyticsHub } from './components/AnalyticsHub.js';
 import CircleReducer from './reducers/CircleReducer';
 import { values } from './values.config';
 
@@ -13,3 +14,4 @@ export { default as PreviewWidget } from './components/PreviewWidget';
 export { default as PreviewFull } from './components/PreviewFull';
 export { default as PreviewGrid } from './components/PreviewGrid';
 export { default as FeaturePickerContent } from './components/FeaturePickerContent';
+export const Analytics = [AnalyticsHub];