feat: statistics section

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,
+        },
+    });
+};