feat: analytics view (#202)

* feat: create member versions view

* fix: update version of apps query client

* feat: create a general statistic analytics component

* feat: display analytic view at analytic context

* test: add tests for analytics general statistics

* fix: put usestates togother and remove force for dev run

* fix: refactor

* fix: fix default values operator

* fix: use type alias instead of interfaces

* fix: trnaslations use i18 namespace

Author: LinaYahya

cypress/e2e/analytics/analyticsView.cy.ts

@@ -1,6 +1,14 @@
 import { Context, PermissionLevel } from '@graasp/sdk';
 
-import { ANALYTICS_VIEW_CY, buildDataCy } from '../../../src/config/selectors';
+import {
+  ANALYTICS_VIEW_CY,
+  STATISTIC_RUNNING_VERSIONS_KEY,
+  STATISTIC_SAVED_VERSIONS_KEY,
+  STATISTIC_TOTAL_USERS_KEY,
+  buildDataCy,
+  buildStatisticCardID,
+} from '../../../src/config/selectors';
+import { MOCK_APP_ACTIONS } from '../../fixtures/appActions';
 
 describe('Analytics View', () => {
   beforeEach(() => {
@@ -9,13 +17,30 @@ describe('Analytics View', () => {
         context: Context.Analytics,
         permission: PermissionLevel.Admin,
       },
+      database: { appActions: MOCK_APP_ACTIONS },
     });
     cy.visit('/');
   });
 
   it('should open Analytics view', () => {
-    cy.get(buildDataCy(ANALYTICS_VIEW_CY))
+    cy.get(buildDataCy(ANALYTICS_VIEW_CY)).should('be.visible');
+  });
+
+  it('should have total users general statistic', () => {
+    cy.get(`#${buildStatisticCardID(STATISTIC_TOTAL_USERS_KEY)}`)
+      .should('be.visible')
+      .and('have.text', '2');
+  });
+
+  it('should have average saved versions general statistic', () => {
+    cy.get(`#${buildStatisticCardID(STATISTIC_SAVED_VERSIONS_KEY)}`)
+      .should('be.visible')
+      .and('have.text', '1');
+  });
+
+  it('should have average running versions general statistic', () => {
+    cy.get(`#${buildStatisticCardID(STATISTIC_RUNNING_VERSIONS_KEY)}`)
       .should('be.visible')
-      .and('have.text', 'Analytics View');
+      .and('have.text', '1');
   });
 });

package.json

@@ -23,9 +23,9 @@
     "@fortawesome/free-regular-svg-icons": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@graasp/apps-query-client": "3.4.3",
+    "@graasp/apps-query-client": "3.4.8",
     "@graasp/pyodide": "github:graasp/graasp-pyodide",
-    "@graasp/sdk": "3.3.0",
+    "@graasp/sdk": "4.1.0",
     "@graasp/ui": "4.1.1",
     "@mui/icons-material": "5.15.1",
     "@mui/lab": "5.0.0-alpha.134",
@@ -53,14 +53,19 @@
     "lodash.isequal": "4.5.0",
     "lodash.isobject": "3.0.2",
     "lodash.isstring": "4.0.1",
+    "lodash.orderby": "4.6.0",
+    "lodash.sumby": "4.6.0",
     "prism-react-renderer": "2.3.1",
     "react": "18.2.0",
+    "react-csv": "2.2.2",
     "react-diff-viewer": "3.1.1",
     "react-dom": "18.2.0",
     "react-i18next": "13.5.0",
     "react-markdown": "9.0.1",
     "react-mde": "12.0.8",
     "react-router-dom": "6.21.0",
+    "react-sparklines": "1.7.0",
+    "react-syntax-highlighter": "15.5.0",
     "react-toastify": "9.1.3",
     "remark-breaks": "4.0.0",
     "remark-gfm": "4.0.0",
@@ -98,10 +103,15 @@
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/file-saver": "^2.0.7",
     "@types/i18n": "0.13.10",
-    "@types/lodash.countby": "4.6.9",
+    "@types/lodash.countby": "^4",
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.isobject": "3.0.9",
     "@types/lodash.isstring": "4.0.9",
+    "@types/lodash.orderby": "^4",
+    "@types/lodash.sumby": "4.6.9",
+    "@types/react-csv": "1.1.10",
+    "@types/react-sparklines": "^1",
+    "@types/react-syntax-highlighter": "^15",
     "@types/uuid": "9.0.7",
     "@typescript-eslint/eslint-plugin": "6.15.0",
     "@typescript-eslint/parser": "6.15.0",
@@ -151,7 +161,11 @@
     ]
   },
   "resolutions": {
-    "@codemirror/state": "6.3.3"
+    "@codemirror/state": "6.3.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@types/react": "18.2.60",
+    "@types/react-dom": "18.2.19"
   },
   "packageManager": "[email protected]",
   "msw": {

src/config/selectors.ts

@@ -182,8 +182,15 @@ export const buildCommitFieldCypress = (selector: string): string =>
   `[data-cy=${selector}]`;
 export const settingKeyDataCy = (key: string): string => `setting-${key}`;
 
+export const buildStatisticCardID = (key: string): string => `statistic-${key}`;
+
 // keys for save buttons and tests
 export const EXECUTION_MODE_SETTINGS_KEY = 'EXECUTION_MODE_SETTINGS_KEY';
 export const REVIEW_MODE_SETTINGS_KEY = 'REVIEW_MODE_SETTINGS_KEY';
 export const EXPLAIN_MODE_SETTINGS_KEY = 'EXPLAIN_MODE_SETTINGS_KEY';
 export const SETTING_NEW_CHATBOT_PROMPT_KEY = 'NEW_CHATBOT_PROMPT_KEY';
+
+export const STATISTIC_TIME_SPENT_KEY = 'timeSpent';
+export const STATISTIC_TOTAL_USERS_KEY = 'totalUsers';
+export const STATISTIC_SAVED_VERSIONS_KEY = 'savedVersions';
+export const STATISTIC_RUNNING_VERSIONS_KEY = 'runningVersions';

src/interfaces/analytics.ts

@@ -0,0 +1,9 @@
+export interface GeneralMemberStatistic {
+  memberId: string;
+  endTime: string;
+  startTime: string;
+  memberName: string;
+  savedVersions: number;
+  runningVersions: number;
+  spentTimeInSeconds: number;
+}

src/langs/en.json

@@ -157,6 +157,24 @@
     "APP_MODE_COLLABORATE_DESCRIPTION": "Coming soon !",
     "PUBLIC_ALERT": "You are not authenticated. You cannot save any data.",
     "MAX_COMMENT_LENGTH_SETTING": "Maximum comment length (default is {{default}} character)",
-    "MAX_THREAD_LENGTH_SETTING": "Maximum thread length (default is {{default}} messages per user)"
+    "MAX_THREAD_LENGTH_SETTING": "Maximum thread length (default is {{default}} messages per user)",
+    "Statistics for running code": "Statistics for running code",
+    "Search by member name": "Search by member name",
+    "versions": "versions",
+    "No Results Match Member": "No Results Match Member",
+    "General Statistics": "General Statistics",
+    "Average Time Spent By Users": "Average Time Spent By Users",
+    "Total Users": "Total Users",
+    "Average Saved Versions": "Average Saved Versions",
+    "Average Running Versions": "Average Running Versions",
+    "Export": "Export",
+    "Time Spent": "Time Spent",
+    "GET_ITEM_ERROR": "Sorry, There was an error retrieving this item actions.",
+    "No Records Yet": "No Records Yet",
+    "hours": "hours",
+    "minutes": "minutes",
+    "VERSION_COUNT_one": "{{count}} version",
+    "VERSION_COUNT_other": "{{count}} versions",
+    "LAST_VERSION": "Last version: {{date}}"
   }
 }

src/modules/main/App.tsx

@@ -4,12 +4,12 @@ import { useLocalContext } from '@graasp/apps-query-client';
 import { Context } from '@graasp/sdk';
 
 import i18n from '../../config/i18n';
-import { ANALYTICS_VIEW_CY } from '../../config/selectors';
 import { DEFAULT_CONTEXT_LANGUAGE } from '../../config/settings';
 import { AppDataProvider } from '../context/AppDataContext';
 import { MembersProvider } from '../context/MembersContext';
 import { SettingsProvider } from '../context/SettingsContext';
 import BuilderView from '../views/admin/BuilderView';
+import AnalyticsView from '../views/analytics/AnalyticsView';
 import PlayerView from '../views/read/PlayerView';
 
 const App: FC = () => {
@@ -25,12 +25,11 @@ const App: FC = () => {
 
   const renderContent = (): ReactElement => {
     switch (context.context) {
-      // eslint-disable-next-line default-case-last
       case Context.Builder:
         return <BuilderView />;
 
       case Context.Analytics:
-        return <div data-cy={ANALYTICS_VIEW_CY}>Analytics View</div>;
+        return <AnalyticsView />;
 
       case Context.Player:
       default:

src/modules/views/analytics/AnalyticsView.tsx

@@ -0,0 +1,76 @@
+import { useTranslation } from 'react-i18next';
+
+import { Alert, Box } from '@mui/material';
+
+import { AppAction } from '@graasp/sdk';
+import { Loader } from '@graasp/ui';
+
+import { differenceInSeconds } from 'date-fns';
+import groupBy from 'lodash.groupby';
+import orderBy from 'lodash.orderby';
+
+import { APP_ACTIONS_TYPES } from '@/config/appActionsTypes';
+import { hooks } from '@/config/queryClient';
+import { CodeVersionType } from '@/interfaces/codeVersions';
+
+import { ANALYTICS_VIEW_CY } from '../../../config/selectors';
+import GeneralStatistics from './GeneralStatistics';
+import UsersRunningCodeVersions from './UsersRunningCodeVersions';
+
+const AnalyticsView = (): JSX.Element => {
+  const { data, isLoading } = hooks.useAppActions();
+
+  const { t } = useTranslation();
+
+  if (data) {
+    const actionsOrdersByCreatedDate = orderBy(data, 'createdAt');
+    const actionsByType = groupBy(actionsOrdersByCreatedDate, 'type');
+    const actionsByMember = groupBy(actionsOrdersByCreatedDate, 'member.id');
+
+    const generalStatistic = Object.entries(actionsByMember).map(
+      ([memberId, memberActions]) => {
+        const startTime = memberActions[0].createdAt;
+        const endTime = memberActions[memberActions.length - 1].createdAt;
+        return {
+          memberId,
+          endTime,
+          startTime,
+          memberName: memberActions[0].member.name,
+          savedVersions: memberActions.filter(
+            (version) => version.type === APP_ACTIONS_TYPES.SAVE_CODE,
+          ).length,
+          runningVersions: memberActions.filter(
+            (version) => version.type === APP_ACTIONS_TYPES.RUN_CODE,
+          ).length,
+          spentTimeInSeconds: differenceInSeconds(endTime, startTime),
+        };
+      },
+    );
+
+    return (
+      <div data-cy={ANALYTICS_VIEW_CY}>
+        <GeneralStatistics generalStatistics={generalStatistic} />
+        <UsersRunningCodeVersions
+          runningVersions={
+            actionsByType[
+              APP_ACTIONS_TYPES.RUN_CODE
+            ] as AppAction<CodeVersionType>[]
+          }
+          generalStatistics={generalStatistic}
+        />
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <Box pl={2} pr={2} mb={2} flexGrow={1}>
+      <Alert severity="error">{t('GET_ITEM_ERROR')}</Alert>
+    </Box>
+  );
+};
+
+export default AnalyticsView;

src/modules/views/analytics/GeneralStatistics.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AccessTime, People, RunCircleSharp, Save } from '@mui/icons-material';
+import { Box, Grid, Typography } from '@mui/material';
+
+import { formatDuration } from 'date-fns';
+import sumBy from 'lodash.sumby';
+
+import {
+  STATISTIC_RUNNING_VERSIONS_KEY,
+  STATISTIC_SAVED_VERSIONS_KEY,
+  STATISTIC_TIME_SPENT_KEY,
+  STATISTIC_TOTAL_USERS_KEY,
+} from '@/config/selectors';
+import { GeneralMemberStatistic } from '@/interfaces/analytics';
+import { formatSeconds } from '@/utils/chart';
+
+import StatisticCard from './StatisticCard';
+
+const AccessTimeIcon = <AccessTime fontSize="large" color="primary" />;
+const PeopleIcon = <People fontSize="large" color="primary" />;
+const SaveIcon = <Save fontSize="large" color="primary" />;
+const RunIcon = <RunCircleSharp fontSize="large" color="primary" />;
+
+type Props = {
+  generalStatistics: GeneralMemberStatistic[];
+};
+
+const GeneralStatistics = ({ generalStatistics }: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const savedVersions = sumBy(generalStatistics, 'savedVersions');
+  const runningVersions = sumBy(generalStatistics, 'runningVersions');
+
+  const averageTime = generalStatistics.reduce(
+    (acc, curr) => acc + curr.spentTimeInSeconds,
+    0,
+  );
+
+  const { hours, minutes } = formatSeconds(
+    averageTime / generalStatistics.length,
+  );
+
+  return (
+    <Box marginY={4}>
+      <Typography variant="h6" align="center">
+        {t('General Statistics')}
+      </Typography>
+      <Grid container spacing={2} marginTop={1} justifyContent="center">
+        <StatisticCard
+          icon={AccessTimeIcon}
+          title={t('Average Time Spent By Users')}
+          stat={formatDuration({ hours, minutes })}
+          key={STATISTIC_TIME_SPENT_KEY}
+          cardId={STATISTIC_TIME_SPENT_KEY}
+        />
+        <StatisticCard
+          icon={PeopleIcon}
+          title={t('Total Users')}
+          stat={generalStatistics.length}
+          key={STATISTIC_TOTAL_USERS_KEY}
+          cardId={STATISTIC_TOTAL_USERS_KEY}
+        />
+        <StatisticCard
+          icon={SaveIcon}
+          title={t('Average Saved Versions')}
+          stat={(savedVersions / generalStatistics.length || 0).toFixed()}
+          key={STATISTIC_SAVED_VERSIONS_KEY}
+          cardId={STATISTIC_SAVED_VERSIONS_KEY}
+        />
+        <StatisticCard
+          icon={RunIcon}
+          title={t('Average Running Versions')}
+          stat={(runningVersions / generalStatistics.length || 0).toFixed()}
+          key={STATISTIC_RUNNING_VERSIONS_KEY}
+          cardId={STATISTIC_RUNNING_VERSIONS_KEY}
+        />
+      </Grid>
+    </Box>
+  );
+};
+
+export default GeneralStatistics;