fix(analytics): fixed broken styling in Analytics (#1328)

Closes #1320 * fix(analytics): broken style * chore(deps): install classnames * chore(deps): remove xAPI-Viewer dependencies * chore(deps): install classnames types
Lumieducation · Mar 17, 2021 · 0e4cf8e · 0e4cf8e
1 parent e15e5c0
commit 0e4cf8e
Show file tree

Hide file tree

Showing 30 changed files with 3,346 additions and 29,161 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -5,7 +5,6 @@
     "dependencies": {
         "@lumieducation/h5p-react": "7.3.1",
         "@lumieducation/h5p-server": "7.3.1",
-        "@lumieducation/xapi-viewer": "1.0.1-alpha.7",
         "@material-ui/core": "4.11.3",
         "@material-ui/icons": "4.11.2",
         "@sentry/browser": "6.2.2",
@@ -17,6 +16,7 @@
         "@types/node": "14.14.35",
         "@types/react": "17.0.3",
         "@types/react-dom": "17.0.2",
+        "classnames": "2.2.6",
         "i18next": "19.9.2",
         "i18next-http-backend": "1.1.1",
         "lodash": "4.17.21",
@@ -64,6 +64,7 @@
         ]
     },
     "devDependencies": {
+        "@types/classnames": "^2.2.11",
         "@types/debug": "4.1.5",
         "@types/lodash": "4.14.168",
         "@types/react-redux": "7.1.16",

diff --git a/client/src/state/Analytics/AnalyticsAPI.ts b/client/src/state/Analytics/AnalyticsAPI.ts
@@ -1,10 +1,8 @@
 import superagent from 'superagent';
 
-import { IInteraction, IUser } from '@lumieducation/xapi-viewer';
-
 export async function importAnalytics(): Promise<{
-    users: IUser[];
-    interactions: IInteraction[];
+    users: any[];
+    interactions: any[];
 }> {
     const response = await superagent.get('/api/v1/analytics');
 

diff --git a/client/src/state/Analytics/AnalyticsTypes.ts b/client/src/state/Analytics/AnalyticsTypes.ts
@@ -1,5 +1,10 @@
-import { IInteraction, IUser } from '@lumieducation/xapi-viewer';
+import { IInteraction } from '@lumieducation/xapi-aggregator';
 
+interface IUser {
+    id: string;
+    name: string;
+    results: number[];
+}
 // state
 
 export interface IAnalyticsState {

diff --git a/client/src/views/Analytics.tsx b/client/src/views/Analytics.tsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import AnalyticsStartPage from './components/AnalyticsStartPage';
 import AnalyticsToolbar from './components/AnalyticsToolbar';
 
-import LumixAPIViewer from '@lumieducation/xapi-viewer';
+import LumixAPIViewer from './components/AnalyticsTable';
 
 import { actions, IState } from '../state';
 

diff --git a/client/src/views/components/AnalyticsTable.tsx b/client/src/views/components/AnalyticsTable.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+
+import classnames from 'classnames';
+import { makeStyles } from '@material-ui/core/styles';
+import { IInteraction } from '@lumieducation/xapi-aggregator';
+import { useTranslation } from 'react-i18next';
+
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+
+export function get_grade_color(grade: number) {
+    grade = Math.ceil(grade / 5) * 5;
+    return classnames({
+        '#2ecc71': grade >= 85,
+        '#27ae60': grade >= 70 && grade < 85,
+        '#f1c40e': grade >= 55 && grade < 70,
+        '#e67e21': grade >= 40 && grade < 55,
+        '#e74c3c': grade >= 25 && grade < 40,
+        '#c0392b': grade < 25
+    });
+}
+
+const useStyles = makeStyles({
+    table: {
+        minWidth: 650
+    }
+});
+
+export interface IUser {
+    id: string;
+    name: string;
+    results: number[];
+}
+
+export type { IInteraction } from '@lumieducation/xapi-aggregator';
+
+const LumixAPIViewer = (props: {
+    interactions: IInteraction[];
+    users: IUser[];
+}) => {
+    const { interactions, users } = props;
+    const classes = useStyles();
+    const { t } = useTranslation();
+    let userAverage: number[] = [];
+    return (
+        <TableContainer component={Paper}>
+            <Table className={classes.table} aria-label="simple table">
+                <TableHead>
+                    <TableRow>
+                        <TableCell>{t('analytics.name')}</TableCell>
+                        {interactions.map((interaction) => (
+                            <TableCell>{interaction.name}</TableCell>
+                        ))}
+                        <TableCell></TableCell>
+                        <TableCell>{t('analytics.average')}</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    <TableRow>
+                        <TableCell></TableCell>
+                        {interactions.map((interaction, index) => {
+                            const average =
+                                (users
+                                    .map((user) => user.results[index])
+                                    .reduce((p, c) => p + c, 0) /
+                                    users.length) *
+                                100;
+                            userAverage.push(average);
+                            return (
+                                <TableCell
+                                    align="center"
+                                    style={{
+                                        backgroundColor: get_grade_color(
+                                            average
+                                        )
+                                    }}
+                                >{`${average.toFixed(0)} %`}</TableCell>
+                            );
+                        })}
+                        <TableCell></TableCell>
+                        <TableCell
+                            align="center"
+                            style={{
+                                backgroundColor: get_grade_color(
+                                    userAverage.reduce((p, c) => p + c, 0) /
+                                        userAverage.length
+                                )
+                            }}
+                        >
+                            {`${(
+                                userAverage.reduce((p, c) => p + c, 0) /
+                                userAverage.length
+                            ).toFixed(0)}
+                            %`}
+                        </TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableCell></TableCell>
+                    </TableRow>
+                    {users.map((user) => (
+                        <TableRow key={user.id}>
+                            <TableCell component="th" scope="row">
+                                {user.name}
+                            </TableCell>
+                            {user.results.map((result) => (
+                                <TableCell
+                                    align="center"
+                                    style={{
+                                        backgroundColor: get_grade_color(
+                                            result * 100
+                                        )
+                                    }}
+                                >
+                                    {`${(result * 100).toFixed(0)} %`}
+                                </TableCell>
+                            ))}
+                            <TableCell />
+                            <TableCell
+                                align="center"
+                                style={{
+                                    backgroundColor: get_grade_color(
+                                        (user.results.reduce(
+                                            (p, c) => p + c,
+                                            0
+                                        ) /
+                                            user.results.length) *
+                                            100
+                                    )
+                                }}
+                            >
+                                {`${(
+                                    (user.results.reduce((p, c) => p + c, 0) /
+                                        user.results.length) *
+                                    100
+                                ).toFixed(0)} %`}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+};
+
+export default LumixAPIViewer;
diff --git a/locales/bg.json b/locales/bg.json
@@ -1 +1,115 @@
-{"editor":{"default_name":"нов H5P","tab":{"view":"Изглед","edit":"редактиране"},"sidebar":{"open":"Отворете файла H5P","create":"Нов H5P файл","noOpenFiles":"Няма отворени файлове"},"startPage":{"title":"H5P редактор","welcomeMessage":"Lumi's H5P Editor е самостоятелно приложение, което ви позволява да преглеждате, редактирате и създавате H5P.","open":"Отворете съществуващия H5P","create":"създайте нов H5P","start":"старт"}},"settings":{"appbar":{"label":"Настройки","save":"Запазете"},"enable":"Активиране"},"analytics":{"startPage":{"title":"Lumi Analytics","welcomeMessage":"Инструментът на Анализ на Lumi ви позволява да импортирате потребителски отчети и да ги визуализира вместо вас","open":"Импортиране на .lumi файлове","start":"Започнете","learn_more":"Научете повече"}},"bug_report":{"title":"Доклади за грешки и сривове","description":"Помогнете ни да подобрим нашия софтуер и услуги, като изпращаме анонимни отчети за сривове и грешки.","consent":"Разрешавам на това приложение да изпраща отчети за грешки и сривове."},"usage_statistics":{"title":"Статистика на употребата","description":" Помогнете ни да подобрим нашия софтуер и услуги, като изпращаме анонимни статистически данни за използването.","consent":"Разрешавам на това приложение да изпраща анонимни статистически данни за използването."},"updates":{"title":"Автоматични актуализации","description":"Вземете най-новата версия автоматично.","consent":"Позволявам на това приложение автоматично да проверява за актуализации."},"language":{"title":"Език","description":"Променете езика на приложението.","help_translate":"Помогнете ни да преведем!"},"privacy_policy":{"title":"Политика за поверителност","consent":"Прочетох и се съгласявам с политиката за поверителност."},"setup_dialog":{"description":"Защитата на неприкосновеността на личния живот е важна за нас. Ние събираме само информацията, която решите да ни предоставите, и я обработваме с ваше съгласие. Искаме да бъдем максимално прозрачни. Lumi обаче разчита на някои връзки и прехвърляне на данни, за да работи.","save":"Запазете","consent_warning":"Трябва да се съгласите поне с политиката за поверителност, за да използвате това приложение."},"menu":{"quit":"Откажи се","file":{"label":"Файл","open":"Отворете аналитични файлове","save":"Запазете","save_as":"Запази като...","export":"Експортиране ...","edit":"редактиране","undo":"Отмяна","redo":"Готов","cut":"Разрез","copy":"копие","paste":"Поставете","select_all":"Избери всичко"},"h5peditor":{"new":"Нов H5P","open":"Отворете H5P"},"help":{"label":"Помогне","report_issue":"Доклад за издаване","toggle_developer_tools":"Превключете Инструменти за програмисти","follow_us_on_twitter":"Следвайте ни в Twitter","about":"относно"}},"notifications":{"analytics":{"import":{"error":"Не са намерени валидни файлове","success":"Импортирани файлове с отчети"}},"h5peditor":{"save":{"success":"H5P запазен!","error":"H5P не можа да бъде запазен."},"open":{"error":"H5P не можа да се отвори."},"export_as_html":{"success":"H5P успешно се експортира като HTML","error":"H5P не можа да се експортира като HTML"}},"export_as_html":{"dialog":{"title":"Снежен репортер","description":"Искате ли да включите репортер във вашия html? Научете повече за това","yes":"да","no":"не","here":"тук"}}}}
+{
+    "editor": {
+        "default_name": "нов H5P",
+        "tab": { "view": "Изглед", "edit": "редактиране" },
+        "sidebar": {
+            "open": "Отворете файла H5P",
+            "create": "Нов H5P файл",
+            "noOpenFiles": "Няма отворени файлове"
+        },
+        "startPage": {
+            "title": "H5P редактор",
+            "welcomeMessage": "Lumi's H5P Editor е самостоятелно приложение, което ви позволява да преглеждате, редактирате и създавате H5P.",
+            "open": "Отворете съществуващия H5P",
+            "create": "създайте нов H5P",
+            "start": "старт"
+        }
+    },
+    "settings": {
+        "appbar": { "label": "Настройки", "save": "Запазете" },
+        "enable": "Активиране"
+    },
+    "analytics": {
+        "startPage": {
+            "title": "Lumi Analytics",
+            "welcomeMessage": "Инструментът на Анализ на Lumi ви позволява да импортирате потребителски отчети и да ги визуализира вместо вас",
+            "open": "Импортиране на .lumi файлове",
+            "start": "Започнете",
+            "learn_more": "Научете повече"
+        },
+        "name": "Име",
+        "average": "Средно аритметично"
+    },
+    "bug_report": {
+        "title": "Доклади за грешки и сривове",
+        "description": "Помогнете ни да подобрим нашия софтуер и услуги, като изпращаме анонимни отчети за сривове и грешки.",
+        "consent": "Разрешавам на това приложение да изпраща отчети за грешки и сривове."
+    },
+    "usage_statistics": {
+        "title": "Статистика на употребата",
+        "description": " Помогнете ни да подобрим нашия софтуер и услуги, като изпращаме анонимни статистически данни за използването.",
+        "consent": "Разрешавам на това приложение да изпраща анонимни статистически данни за използването."
+    },
+    "updates": {
+        "title": "Автоматични актуализации",
+        "description": "Вземете най-новата версия автоматично.",
+        "consent": "Позволявам на това приложение автоматично да проверява за актуализации."
+    },
+    "language": {
+        "title": "Език",
+        "description": "Променете езика на приложението.",
+        "help_translate": "Помогнете ни да преведем!"
+    },
+    "privacy_policy": {
+        "title": "Политика за поверителност",
+        "consent": "Прочетох и се съгласявам с политиката за поверителност."
+    },
+    "setup_dialog": {
+        "description": "Защитата на неприкосновеността на личния живот е важна за нас. Ние събираме само информацията, която решите да ни предоставите, и я обработваме с ваше съгласие. Искаме да бъдем максимално прозрачни. Lumi обаче разчита на някои връзки и прехвърляне на данни, за да работи.",
+        "save": "Запазете",
+        "consent_warning": "Трябва да се съгласите поне с политиката за поверителност, за да използвате това приложение."
+    },
+    "menu": {
+        "quit": "Откажи се",
+        "file": {
+            "label": "Файл",
+            "open": "Отворете аналитични файлове",
+            "save": "Запазете",
+            "save_as": "Запази като...",
+            "export": "Експортиране ...",
+            "edit": "редактиране",
+            "undo": "Отмяна",
+            "redo": "Готов",
+            "cut": "Разрез",
+            "copy": "копие",
+            "paste": "Поставете",
+            "select_all": "Избери всичко"
+        },
+        "h5peditor": { "new": "Нов H5P", "open": "Отворете H5P" },
+        "help": {
+            "label": "Помогне",
+            "report_issue": "Доклад за издаване",
+            "toggle_developer_tools": "Превключете Инструменти за програмисти",
+            "follow_us_on_twitter": "Следвайте ни в Twitter",
+            "about": "относно"
+        }
+    },
+    "notifications": {
+        "analytics": {
+            "import": {
+                "error": "Не са намерени валидни файлове",
+                "success": "Импортирани файлове с отчети"
+            }
+        },
+        "h5peditor": {
+            "save": {
+                "success": "H5P запазен!",
+                "error": "H5P не можа да бъде запазен."
+            },
+            "open": { "error": "H5P не можа да се отвори." },
+            "export_as_html": {
+                "success": "H5P успешно се експортира като HTML",
+                "error": "H5P не можа да се експортира като HTML"
+            }
+        },
+        "export_as_html": {
+            "dialog": {
+                "title": "Снежен репортер",
+                "description": "Искате ли да включите репортер във вашия html? Научете повече за това",
+                "yes": "да",
+                "no": "не",
+                "here": "тук"
+            }
+        }
+    }
+}