feat: statistics section

lms/hooks.py

@@ -21,7 +21,7 @@ app_license = "AGPL"
 # include js, css files in header of web template
 web_include_css = "lms.bundle.css"
 # web_include_css = "/assets/lms/css/lms.css"
-web_include_js = ["website.bundle.js", "controls.bundle.js"]
+web_include_js = ["website.bundle.js"]
 
 # include custom scss in every website theme (without file extension ".scss")
 # website_theme_scss = "lms/public/scss/website"

lms/lms/dashboard_chart/new_signups/new_signups.json

@@ -0,0 +1,32 @@
+{
+ "based_on": "creation",
+ "chart_name": "New Signups",
+ "chart_type": "Count",
+ "color": "#4463F0",
+ "creation": "2021-09-28 18:57:50.047656",
+ "docstatus": 0,
+ "doctype": "Dashboard Chart",
+ "document_type": "User",
+ "dynamic_filters_json": "[]",
+ "filters_json": "[]",
+ "group_by_type": "Count",
+ "idx": 1,
+ "is_public": 1,
+ "is_standard": 1,
+ "last_synced_on": "2022-10-14 15:57:47.583435",
+ "modified": "2022-10-14 17:20:21.880532",
+ "modified_by": "Administrator",
+ "module": "LMS",
+ "name": "New Signups",
+ "number_of_groups": 0,
+ "owner": "basawaraj@erpnext.com",
+ "roles": [],
+ "source": "",
+ "time_interval": "Daily",
+ "timeseries": 1,
+ "timespan": "Last Quarter",
+ "type": "Line",
+ "use_report_chart": 0,
+ "value_based_on": "",
+ "y_axis": []
+}

lms/public/css/style.css

@@ -1713,25 +1713,20 @@ li {
 
 .stats-parent {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     grid-gap: 2rem;
 }
 
 .stats-label {
-    color: var(--text-muted);
+    color: var(--gray-900);
-    font-weight: bold;
+    font-weight: 500;
 }
 
 .stats-value {
     color: var(--gray-900);
-    font-weight: 600;
+    font-weight: 500;
-    font-size: 2rem;
+    font-size: 1.5rem;
-}
+    margin-top: 2rem;
-
-.stats-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
 }
 
 .indicator-pill.green::before {
@@ -1774,3 +1769,9 @@ li {
 .modal-header .modal-title {
     color: var(--gray-900);
 }
+
+.frappe-chart .title {
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--gray-900);
+}

lms/templates/statistics.html

@@ -1,7 +1,7 @@
 <div class="stats-parent">
 
     {% if published_courses %}
-    <div class="stats-card">
+    <div class="common-card-style p-4 flex-column">
         <div class="stats-label">
             {{ _("Published Courses") }}
         </div>
@@ -12,7 +12,7 @@
     {% endif %}
 
     {% if total_signups %}
-    <div class="stats-card">
+    <div class="common-card-style p-4 flex-column">
         <div class="stats-label">
             {{ _("Total Signups") }}
         </div>
@@ -23,7 +23,7 @@
     {% endif %}
 
     {% if enrollment_count %}
-    <div class="stats-card">
+    <div class="common-card-style p-4 flex-column">
         <div class="stats-label">
             {{ _("Enrollment Count") }}
         </div>

lms/templates/stats.html

@@ -0,0 +1,16 @@
+{% set published_courses = True %}
+{% set total_signups = True %}
+{% set enrollment_count = True %}
+
+<div class="mt-10">
+    {% include "lms/templates/statistics.html" %}
+
+    <div class="row mt-10">
+        <div class="col">
+            <div class="common-card-style p-4" id="new-signups"></div>
+        </div>
+        <div class="col">
+            <div class="common-card-style p-4" id="course-enrollments"></div>
+        </div>
+    </div>
+</div>

lms/www/courses/course.html

@@ -423,3 +423,9 @@
     </div>
 </div>
 {% endmacro %}
+
+
+{%- block script %}
+    {{ super() }}
+    {{ include_script('controls.bundle.js') }}
+{% endblock %}

lms/www/courses/index.html

@@ -42,7 +42,7 @@
 
             <ul class="nav lms-nav" id="courses-tab">
                 <li class="nav-item">
-                    <a class="nav-link active" data-toggle="tab" href="#live">
+                    <a class="nav-link" data-toggle="tab" href="#live">
                         {{ _("Live") }}
                     </a>
                 </li>
@@ -76,12 +76,18 @@
                     </a>
                 </li>
                 {% endif %}
+
+                <li class="nav-item">
+                    <a class="nav-link active" data-toggle="tab" href="#stats">
+                        {{ _("Statistics") }}
+                    </a>
+                </li>
             </ul>
 
             <div class="border-bottom mb-4"></div>
 
             <div class="tab-content">
-                <div class="tab-pane active" id="live" role="tabpanel" aria-labelledby="live">
+                <div class="tab-pane" id="live" role="tabpanel" aria-labelledby="live">
                     {% set courses = live_courses %}
                     {% set title = _("Live Courses") %}
                     {% set classes = "live-courses" %}
@@ -113,6 +119,10 @@
                 </div>
                 {% endif %}
 
+                <div class="tab-pane active" id="stats" role="tabpanel" aria-labelledby="stats">
+                    {% include "lms/templates/stats.html" %}
+                </div>
+
             </div>
 
         {% endif %}

lms/www/courses/index.js

@@ -0,0 +1,38 @@
+
+frappe.ready(() => {
+    generate_graph("New Signups");
+    generate_graph("Course Enrollments");
+});
+
+
+const generate_graph = (chart_name) => {
+    let date = frappe.datetime;
+
+    frappe.call({
+        method: "frappe.desk.doctype.dashboard_chart.dashboard_chart.get",
+        args: {
+            "chart_name": chart_name,
+            "timespan": "Select Date Range",
+            "from_date": date.add_days(date.get_today(), -30),
+            "to_date": date.get_today()
+        },
+        callback: (data) => {
+            render_chart(data.message, chart_name);
+        }
+    });
+};
+
+
+const render_chart = (data, chart_name) => {
+    let dom_element = chart_name == "Course Enrollments" ? "#course-enrollments" : "#new-signups"
+    const chart = new frappe.Chart(dom_element, {
+        title: chart_name,
+        data: data,
+        type: 'line',
+        height: 250,
+        colors: ['#2490ef'],
+        axisOptions: {
+            xIsSeries: 1,
+        },
+    });
+};