Kaynağa Gözat

fix css and structure reports

Alex Ruben 7 yıl önce
ebeveyn
işleme
923755416e

+ 109 - 0
app/Resources/public/css/base.css

@@ -602,6 +602,115 @@ input[type=checkbox], input[type=radio]{
 #exercise-description .panel-heading a.collapsed{
     background: url("../../main/img/icons/22/arrow-down-collapse.png") no-repeat left center;
 }
+/* REPORTS */
+.panel-default.panel-view{
+    border: 1px solid #e4e4e4;
+    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
+}
+.card {
+    border-radius: 6px;
+    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
+    background-color: #FFFFFF;
+    color: #252422;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
+    border: 1px solid #e4e4e4;
+}
+.card .content {
+    padding: 15px 15px 10px 15px;
+}
+.card .icon-big {
+    font-size: 2.5em;
+    min-height: 64px;
+}
+.card .numbers {
+    text-align: left;
+}
+.card .numbers h2{
+    font-size: 3.2em;
+    margin-top: 10px;
+    color: #666666;
+}
+.card .icon-big{
+    width: 65px;
+    height: 65px;
+    border-radius: 50%;
+    text-align: center;
+    vertical-align: middle;
+    margin-left: 25px;
+}
+.card .icon-student{
+    background: #f1c435;
+}
+.card .icon-studentboss{
+    background: #4b73eb;
+}
+.card .icon-teachers{
+    background: #50bbc1;
+}
+.card .icon-humanresources{
+    background: #68ceeb;
+}
+.card .icon-big i {
+    line-height: 66px;
+    color: #fff;
+}
+.card .card-title{
+    text-align: center;
+    font-size: 12px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    display: inline-block;
+    width: 100%;
+}
+.card .card-title a{
+    color: #666666;
+    font-weight: bold;
+}
+.panel-view{
+    padding: 20px;
+    text-align: center;
+}
+.easypiechart {
+    position: relative;
+    text-align: center;
+    width: 120px;
+    height: 120px;
+    margin: 20px auto 10px auto;
+}
+#easypiechart-blue .percent { color: #30a5ff;}
+#easypiechart-teal .percent { color: #1ebfae;}
+#easypiechart-orange .percent { color: #ffb53e;}
+#easypiechart-red .percent { color: #ef4040;}
+
+.easypiechart .percent {
+    display: block;
+    position: absolute;
+    font-size: 26px;
+    top: 38px;
+    width: 120px;
+}
+.easypiechart-link{
+    padding-bottom: 5px;
+    padding-top: 5px;
+    display: inline-block;
+    width: 100%;
+}
+.item-report{
+    text-align: center;
+    min-height: 200px;
+}
+.item-report .panel-default{
+    background-color: #ededed;
+    border: 1px solid #e4e4e4;
+    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
+}
+.item-report .item-report-number{
+    font-size: 35px;
+    font-weight: bold;
+    color: #666666;
+}
 /*****************************************************
  *              AGENDA                               *
  *****************************************************/

+ 3 - 2
bower.json

@@ -31,8 +31,9 @@
     "pwstrength-bootstrap": "2.1.0",
     "readmore-js": "2.1.0",
     "qtip2": "*",
-    "js-cookie" : "2.1.*",
-    "flag-icon-css" : "*"
+    "js-cookie": "2.1.*",
+    "flag-icon-css": "*",
+    "jquery.easy-pie-chart": "^2.1.6"
   },
   "resolutions": {
     "jquery": "2.1.4"

+ 80 - 159
main/mySpace/index.php

@@ -15,6 +15,7 @@ $cidReset = true;
 require_once __DIR__.'/../inc/global.inc.php';
 
 $htmlHeadXtra[] = api_get_jqgrid_js();
+$htmlHeadXtra[] = '<script type="text/javascript" src="'.api_get_path(WEB_PUBLIC_PATH).'assets/jquery.easy-pie-chart/dist/jquery.easypiechart.js"></script>';
 // the section (for the tabs)
 $this_section = SECTION_TRACKING;
 //for HTML editor repository
@@ -38,7 +39,7 @@ $skipData = api_get_configuration_value('tracking_skip_generic_data');
 api_block_anonymous_users();
 
 if (!$export_csv) {
-    Display :: display_header($nameTools);
+    /* Display :: display_header($nameTools); */
 }
 
 if ($is_session_admin) {
@@ -127,43 +128,72 @@ if ($is_drh) {
     );
 }
 
-echo '<div id="actions" class="actions">';
-echo '<span style="float:right">';
+$actionsRight = '';
+$actionsLeft = '';
 if ($display == 'useroverview' || $display == 'sessionoverview' || $display == 'courseoverview') {
-    echo '<a href="'.api_get_self().'?display='.$display.'&export=csv&view='.$view.'">';
-    echo Display::return_icon("export_csv.png", get_lang('ExportAsCSV'), [], 32);
-    echo '</a>';
+    $actionsRight .= Display::url(
+        Display::return_icon(
+            "export_csv.png",
+            get_lang('ExportAsCSV'),
+            null,
+            ICON_SIZE_MEDIUM),
+        api_get_self() . '?display=' . $display . '&export=csv&view=' . $view
+    );
 }
-echo '<a href="javascript: void(0);" onclick="javascript: window.print()">'.
-    Display::return_icon('printer.png', get_lang('Print'), '', ICON_SIZE_MEDIUM).'</a>';
-echo '</span>';
+$actionsRight .= Display::url(
+    Display::return_icon('printer.png',
+        get_lang('Print'),
+        null,
+        ICON_SIZE_MEDIUM),
+    'javascript: void(0);',
+    ['onclick'=>'javascript: window.print()']
+);
 
 if (!empty($session_id) &&
     !in_array($display, ['accessoverview', 'lpprogressoverview', 'progressoverview', 'exerciseprogress', 'surveyoverview'])
 ) {
-    echo '<a href="index.php">'.Display::return_icon('back.png', get_lang('Back'), '', ICON_SIZE_MEDIUM).'</a>';
+    $actionsLeft .= Display::url(Display::return_icon(
+        'back.png',
+        get_lang('Back'),
+        null,
+        ICON_SIZE_MEDIUM),
+        'index.php');
     if (!api_is_platform_admin()) {
         if (api_get_setting('add_users_by_coach') == 'true') {
             if ($is_coach) {
-                echo "<div align=\"right\">";
-                echo '<a href="user_import.php?id_session='.$session_id.'&action=export&amp;type=xml">'.
-                        Display::return_icon('excel.gif', get_lang('ImportUserList')).'&nbsp;'.get_lang('ImportUserList').'</a>';
-                echo "</div><br />";
+                $actionsLeft .= Display::url(
+                    Display::return_icon('excel.png',
+                        get_lang('ImportUserList'),
+                        null,
+                        ICON_SIZE_MEDIUM),
+                    'user_import.php?id_session='.$session_id.'&action=export&amp;type=xml');
             }
         }
     } else {
-        echo "<div align=\"right\">";
-        echo '<a href="user_import.php?id_session='.$session_id.'&action=export&amp;type=xml">'.
-                Display::return_icon('excel.gif', get_lang('ImportUserList')).'&nbsp;'.get_lang('ImportUserList').'</a>';
-        echo "</div><br />";
+        Display::url(
+            Display::return_icon('excel.png',
+            get_lang('ImportUserList'),
+            null,
+            ICON_SIZE_MEDIUM),
+            'user_import.php?id_session='.$session_id.'&action=export&amp;type=xml');
     }
+
 } else {
-    echo Display::url(
-        Display::return_icon('stats.png', get_lang('MyStats'), '', ICON_SIZE_MEDIUM),
+
+    $actionsLeft .= Display::url(
+        Display::return_icon(
+            'stats.png',
+            get_lang('MyStats'),
+            null,
+            ICON_SIZE_MEDIUM),
         api_get_path(WEB_CODE_PATH)."auth/my_progress.php"
     );
-    echo Display::url(
-        Display::return_icon("certificate_list.png", get_lang("GradebookSeeListOfStudentsCertificates"), [], ICON_SIZE_MEDIUM),
+    $actionsLeft .= Display::url(
+        Display::return_icon(
+            "certificate_list.png",
+            get_lang("GradebookSeeListOfStudentsCertificates"),
+            null,
+            ICON_SIZE_MEDIUM),
         api_get_path(WEB_CODE_PATH)."gradebook/certificate_report.php"
     );
 }
@@ -175,12 +205,12 @@ if (empty($session_id) ||
 ) {
     if ($nb_menu_items > 1) {
         foreach ($menu_items as $key => $item) {
-            echo $item;
+            $actionsLeft .= $item;
         }
     }
 }
 
-echo '</div>';
+/* echo '</div>'; */
 
 $userId = api_get_user_id();
 $stats = Tracking::getStats($userId, true);
@@ -213,103 +243,18 @@ $daysAgo = 7;
 $studentIds = [];
 $avg_courses_per_student = 0;
 
-$linkAddUser = null;
-$linkCourseDetailsAsTeacher = null;
-$linkAddCourse = null;
-$linkAddSession = null;
+$view = new Template($nameTools);
+$view->assign('students', $numberStudents);
+$view->assign('studentbosses', $numberStudentBosses);
+$view->assign('teachers', $numberTeachers);
+$view->assign('humanresources', $countHumanResourcesUsers);
+$view->assign('total_user', $numberStudents + $numberStudentBosses + $numberTeachers + $countHumanResourcesUsers);
+$view->assign('studentboss', STUDENT_BOSS);
+$view->assign('drh', DRH);
+$view->assign('stats', $stats);
 
-if (api_is_platform_admin()) {
-    $linkAddUser = ' '.Display::url(
-        Display::return_icon('2rightarrow.png', get_lang('Add')),
-        api_get_path(WEB_CODE_PATH).'admin/dashboard_add_users_to_user.php?user='.api_get_user_id(),
-        ['class' => '']
-    );
-    $linkCourseDetailsAsTeacher = ' '.Display::url(
-        Display::return_icon('2rightarrow.png', get_lang('Details')),
-        api_get_path(WEB_CODE_PATH).'mySpace/course.php',
-        ['class' => '']
-    );
-    $linkAddCourse = ' '.Display::url(
-        Display::return_icon('2rightarrow.png', get_lang('Details')),
-        api_get_path(WEB_CODE_PATH).'mySpace/course.php?follow',
-        ['class' => '']
-    );
-    $linkAddSession = ' '.Display::url(
-        Display::return_icon('2rightarrow.png', get_lang('Add')),
-        api_get_path(WEB_CODE_PATH).'admin/dashboard_add_sessions_to_user.php?user='.api_get_user_id(),
-        ['class' => '']
-    );
-}
 
-echo Display::page_subheader(get_lang('Overview'));
-echo '<div class="report_section">
-        <table class="table table-bordered table-striped">
-            <tr>
-                <td>'.Display::url(
-                    get_lang('FollowedStudents'),
-                    api_get_path(WEB_CODE_PATH).'mySpace/student.php'
-                ).'</td>
-                <td align="right">'.$numberStudents.'</td>
-            </tr>
-            <tr>
-                <td>'.Display::url(
-                    get_lang('FollowedStudentBosses'),
-                    api_get_path(WEB_CODE_PATH).'mySpace/users.php?status='.STUDENT_BOSS
-                ).'</td>
-                <td align="right">'.$numberStudentBosses.'</td>
-            </tr>
-            <tr>
-                <td>'.Display::url(
-                    get_lang('FollowedTeachers'),
-                    api_get_path(WEB_CODE_PATH).'mySpace/teachers.php'
-                ).
-                '</td>
-                <td align="right">'.$numberTeachers.'</td>
-            </tr>
-            <tr>
-                <td>'.Display::url(
-                get_lang('FollowedHumanResources'),
-                api_get_path(WEB_CODE_PATH).'mySpace/users.php?status='.DRH
-            ).
-            '</td>
-            <td align="right">'.$countHumanResourcesUsers.'</td>
-            </tr>
-            <tr>
-             <td>'.Display::url(
-                get_lang('FollowedUsers'),
-                api_get_path(WEB_CODE_PATH).'mySpace/users.php'
-            ).
-            '</td>
-                <td align="right">'.($numberStudents + $numberStudentBosses + $numberTeachers + $countHumanResourcesUsers).$linkAddUser.'</td>
-            </tr>
-            <tr>
-                <td>'.Display::url(
-                    get_lang('AssignedCourses'),
-                    api_get_path(WEB_CODE_PATH).'mySpace/course.php'
-                ).
-                '</td>
-                <td align="right">'.$countCourses.$linkCourseDetailsAsTeacher.'</td>
-            </tr>
-            <tr>
-                <td>'.Display::url(
-                    get_lang('FollowedCourses'),
-                    api_get_path(WEB_CODE_PATH).'mySpace/course.php?follow'
-                ).
-                '</td>
-                <td align="right">'.$countAssignedCourses.$linkAddCourse.'</td>
-            </tr>
-            <tr>
-                <td>'.Display::url(
-                    get_lang('FollowedSessions'),
-                    api_get_path(WEB_CODE_PATH).'mySpace/session.php'
-                ).
-                '</td>
-            <td align="right">'.$countSessions.$linkAddSession.'</td>
-            </tr>
-            </table>';
-echo '</div>';
-
-echo Display::page_subheader(get_lang('Students').' ('.$numberStudents.')');
+//echo Display::page_subheader(get_lang('Students').' ('.$numberStudents.')');
 
 $form = new FormValidator(
     'search_user',
@@ -317,7 +262,6 @@ $form = new FormValidator(
     api_get_path(WEB_CODE_PATH).'mySpace/student.php'
 );
 $form = Tracking::setUserSearchForm($form);
-$form->display();
 
 $skipData = api_get_configuration_value('tracking_skip_generic_data');
 
@@ -376,49 +320,26 @@ if ($skipData == false) {
             $sessionIdList,
             $studentIds
         );
-
-        // html part
-        echo '<div class="report_section">
-                <table class="table table-bordered table-striped">
-                    <tr>
-                        <td>'.get_lang('AverageCoursePerStudent').'</td>
-                        <td align="right">'.(is_null($avg_courses_per_student) ? '' : round($avg_courses_per_student, 2)).'</td>
-                    </tr>
-                    <tr>
-                        <td>'.get_lang('InactivesStudents').'</td>
-                        <td align="right">'.$nb_inactive_students.'</td>
-                    </tr>
-                    <tr>
-                        <td>'.get_lang('AverageTimeSpentOnThePlatform').'</td>
-                        <td align="right">'.(is_null($totalTimeSpent) ? '' : api_time_to_hms($totalTimeSpent)).'</td>
-                    </tr>
-                    <tr>
-                        <td>'.get_lang('AverageProgressInLearnpath').'</td>
-                        <td align="right">'.(is_null($avgTotalProgress) ? '' : round($avgTotalProgress, 2).'%').'</td>
-                    </tr>
-                    <tr>
-                        <td>'.get_lang('AvgCourseScore').'</td>
-                        <td align="right">'.(is_null($averageScore) ? '' : round($averageScore, 2).'%').'</td>
-                    </tr>
-                    <tr>
-                        <td>'.get_lang('AveragePostsInForum').'</td>
-                        <td align="right">'.(is_null($posts) ? '' : round($posts, 2)).'</td>
-                    </tr>
-                    <tr>
-                        <td>'.get_lang('AverageAssignments').'</td>
-                        <td align="right">'.(is_null($numberAssignments) ? '' : round($numberAssignments, 2)).'</td>
-                    </tr>
-                </table>
-             </div>';
+        $report['AverageCoursePerStudent'] = (is_null($avg_courses_per_student) ? '' : round($avg_courses_per_student, 2));
+        $report['InactivesStudents'] = $nb_inactive_students;
+        $report['AverageTimeSpentOnThePlatform'] = (is_null($totalTimeSpent) ? '' : api_time_to_hms($totalTimeSpent));
+        $report['AverageProgressInLearnpath'] = (is_null($avgTotalProgress) ? '' : round($avgTotalProgress, 2).'%');
+        $report['AvgCourseScore'] = (is_null($averageScore) ? '' : round($averageScore, 2).'%');
+        $report['AveragePostsInForum'] = (is_null($posts) ? '' : round($posts, 2));
+        $report['AverageAssignments'] = (is_null($numberAssignments) ? '' : round($numberAssignments, 2));
+        $view->assign('report', $report);
     }
 }
 
-$view = new Template($toolName);
-$view->assign('header', $toolName);
-$view->assign('actions',Display::toolbarAction('toolbar', [$actions]));
-$view->assign('content', $content);
+
+$view->assign('header', $nameTools);
+$view->assign('form', $form->returnForm());
+$view->assign('actions',Display::toolbarAction('toolbar', [$actionsLeft, $actionsRight]));
+$view->assign('title', get_lang('Students').' ('.$numberStudents.')');
+
 $template = $view->get_template('my_space/index.tpl');
 $content = $view->fetch($template);
+$view->assign('content', $content);
 $view->display_one_col_template();
 
 
@@ -430,5 +351,5 @@ if ($export_csv) {
 }
 
 if (!$export_csv) {
-    Display::display_footer();
+    //Display::display_footer();
 }

+ 301 - 0
main/template/default/my_space/index.tpl

@@ -0,0 +1,301 @@
+<div class="search-student">
+    {{ form }}
+</div>
+
+<div class="page-header">
+    <h4>
+        {{ 'Overview' | get_lang  }}
+    </h4>
+</div>
+
+<div class="view-global-followed">
+    <div class="row">
+        <div class="col-lg-3 col-sm-3">
+            <div class="card">
+                <div class="content">
+                    <div class="card-title"><a href="{{ _p.web_main }}mySpace/student.php">{{ 'FollowedStudents' | get_lang }}</a></div>
+                    <div class="row">
+                        <div class="col-xs-5">
+                            <div class="icon-big icon-student text-center">
+                                <i class="fa fa-graduation-cap" aria-hidden="true"></i>
+                            </div>
+                        </div>
+                        <div class="col-xs-7">
+                            <div class="numbers">
+
+                                <h2>{{ students }}</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-3">
+            <div class="card">
+                <div class="content">
+                    <div class="card-title"><a href="{{ _p.web_main }}mySpace/users.php?status={{ studentboss }}">{{ 'FollowedStudentBosses' | get_lang }}</a></div>
+                    <div class="row">
+                        <div class="col-xs-5">
+                            <div class="icon-big icon-studentboss text-center">
+                                <i class="fa fa-address-book" aria-hidden="true"></i>
+                            </div>
+                        </div>
+                        <div class="col-xs-7">
+                            <div class="numbers">
+
+                                <h2>{{ studentbosses }}</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-3">
+            <div class="card">
+                <div class="content">
+                    <div class="card-title"><a href="{{ _p.web_main }}mySpace/teachers.php">{{ 'FollowedTeachers' | get_lang }}</a></div>
+                    <div class="row">
+                        <div class="col-xs-5">
+                            <div class="icon-big icon-teachers text-center">
+                                <i class="fa fa-book" aria-hidden="true"></i>
+                            </div>
+                        </div>
+                        <div class="col-xs-7">
+                            <div class="numbers">
+
+                                <h2>{{ teachers }}</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-3">
+            <div class="card">
+                <div class="content">
+                    <div class="card-title"><a href="{{ _p.web_main }}mySpace/users.php?status={{ drh }}">{{ 'FollowedHumanResources' | get_lang }}</a></div>
+                    <div class="row">
+                        <div class="col-xs-5">
+                            <div class="icon-big icon-humanresources text-center">
+                                <i class="fa fa-user" aria-hidden="true"></i>
+                            </div>
+                        </div>
+                        <div class="col-xs-7">
+                            <div class="numbers">
+                                <h2>{{ humanresources }}</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="view-global">
+    <div class="panel panel-default panel-view">
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-lg-3 col-sm-3">
+                    <div class="easy-donut">
+                        <div id="easypiechart-blue" class="easypiechart" data-percent="{{ total_user }}">
+                            <span class="percent">{{ total_user }}</span>
+                        </div>
+                        <div class="easypiechart-link">
+                            <a class="btn btn-default" href="{{ _p.web_main }}mySpace/users.php">
+                                {{ 'FollowedUsers' | get_lang }}
+                            </a>
+                        </div>
+                    </div>
+
+                    {% if _u.status == 1 %}
+                        <a href="{{ _p.web_main }}admin/dashboard_add_users_to_user.php?user={{ _u.id }}" class="btn btn-default btn-sm">
+                            <i class="fa fa-plus" aria-hidden="true"></i>
+                        </a>
+                    {% endif %}
+                </div>
+                <div class="col-lg-3 col-sm-3">
+                    <div class="easy-donut">
+                        <div id="easypiechart-orange" class="easypiechart" data-percent="{{ stats.courses }}">
+                            <span class="percent">{{ stats.courses }}</span>
+                        </div>
+                        <div class="easypiechart-link">
+                            <a class="btn btn-default" href="{{ _p.web_main }}mySpace/course.php">
+                                {{ 'AssignedCourses' | get_lang }}
+                            </a>
+                        </div>
+                    </div>
+                    {% if _u.status == 1 %}
+                        <a href="{{ _p.web_main }}mySpace/course.php" class="btn btn-default btn-sm">
+                            <i class="fa fa-plus" aria-hidden="true"></i>
+                        </a>
+                    {% endif %}
+                </div>
+                <div class="col-lg-3 col-sm-3">
+                    <div  class="easy-donut">
+                        <div id="easypiechart-teal" class="easypiechart" data-percent="{{ stats.assigned_courses }}">
+                            <span class="percent">{{ stats.assigned_courses }}</span>
+                        </div>
+                        <div class="easypiechart-link">
+                            <a class="btn btn-default" href="{{ _p.web_main }}mySpace/course.php?follow">{{ 'FollowedCourses' | get_lang }}</a>
+                        </div>
+                    </div>
+                    {% if _u.status == 1 %}
+                        <a href="{{ _p.web_main }}mySpace/course.php?follow" class="btn btn-default btn-sm">
+                            <i class="fa fa-plus" aria-hidden="true"></i>
+                        </a>
+                    {% endif %}
+                </div>
+                <div class="col-lg-3 col-sm-3">
+                    <div class="easy-donut">
+                        <div id="easypiechart-red" class="easypiechart" data-percent="{{ stats.session_list |length  }}">
+                            <span class="percent">{{ stats.session_list |length }}</span>
+                        </div>
+                        <div class="easypiechart-link">
+                            <a class="btn btn-default" href="{{ _p.web_main }}mySpace/session.php">{{ 'FollowedSessions' | get_lang }}</a>
+                        </div>
+                    </div>
+                    {% if _u.status == 1 %}
+                        <a href="{{ _p.web_main }}admin/dashboard_add_sessions_to_user.php?user={{ _u.id }}" class="btn btn-default btn-sm">
+                            <i class="fa fa-plus" aria-hidden="true"></i>
+                        </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="page-header">
+    <h4>
+        {{ title }}
+    </h4>
+</div>
+<div class="report-section">
+    <div class="row">
+        <div class="col-lg-3 col-sm-3">
+            <div class="item-report">
+                <div class="panel panel-default">
+                    <div class="panel-body">
+                        <div class="item-report-number">
+                            {{ report.AverageCoursePerStudent }}
+                        </div>
+                    </div>
+                </div>
+                <p>{{ 'AverageCoursePerStudent' | get_lang }}</p>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-3">
+            <div class="item-report">
+                <div class="panel panel-default">
+                    <div class="panel-body">
+                        <div class="item-report-number">
+                            {{ report.InactivesStudents }}
+                        </div>
+                    </div>
+                </div>
+                <p>{{ 'InactivesStudents' | get_lang }}</p>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-3">
+            <div class="item-report">
+                <div class="panel panel-default">
+                    <div class="panel-body">
+                        <div class="item-report-number">
+                            {{ report.AverageTimeSpentOnThePlatform }}
+                        </div>
+                    </div>
+                </div>
+                <p>{{ 'AverageTimeSpentOnThePlatform' | get_lang }}</p>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-3">
+            <div class="item-report">
+                <div class="panel panel-default">
+                    <div class="panel-body">
+                        <div class="item-report-number">
+                            {{ report.AverageProgressInLearnpath }}
+                        </div>
+                    </div>
+                </div>
+                <p>{{ 'AverageProgressInLearnpath' | get_lang }}</p>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-3">
+            <div class="item-report">
+                <div class="panel panel-default">
+                    <div class="panel-body">
+                        <div class="item-report-number">
+                            {{ report.AvgCourseScore }}
+                        </div>
+
+                    </div>
+                </div>
+                <p>{{ 'AvgCourseScore' | get_lang }}</p>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-3">
+            <div class="item-report">
+                <div class="panel panel-default">
+                    <div class="panel-body">
+                        <div class="item-report-number">
+                            {{ report.AveragePostsInForum }}
+                        </div>
+
+                    </div>
+                </div>
+                <p> {{ 'AveragePostsInForum' | get_lang }}</p>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-3">
+            <div class="item-report">
+                <div class="panel panel-default">
+                    <div class="panel-body">
+                        <div class="item-report-number">
+                            {{ report.AverageAssignments }}
+                        </div>
+
+                    </div>
+                </div>
+                <p> {{ 'AverageAssignments' | get_lang }}</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+    $(function() {
+        $('#easypiechart-teal').easyPieChart({
+            scaleColor: false,
+            barColor: '#1ebfae',
+            lineWidth:8,
+            trackColor: '#f2f2f2'
+        });
+    });
+
+    $(function() {
+        $('#easypiechart-orange').easyPieChart({
+            scaleColor: false,
+            barColor: '#ffb53e',
+            lineWidth:8,
+            trackColor: '#f2f2f2'
+        });
+    });
+
+    $(function() {
+        $('#easypiechart-red').easyPieChart({
+            scaleColor: false,
+            barColor: '#f9243f',
+            lineWidth:8,
+            trackColor: '#f2f2f2'
+        });
+    });
+
+    $(function() {
+        $('#easypiechart-blue').easyPieChart({
+            scaleColor: false,
+            barColor: '#30a5ff',
+            lineWidth:8,
+            trackColor: '#f2f2f2'
+        });
+    });
+
+</script>