Add Usage Charts

_config.yml

@@ -2,6 +2,7 @@
 title               : تذكرتك
 description         : متابعة برامج تذكرتك عن طريق متصفح الإنترنت
 url                 : "https://tazkrtak-admin.web.app"
+root-endpoint       : "https://my-json-server.typicode.com/tazkrtak/counterfeit"
 
 # Build settings
 markdown            : kramdown

_data/usage-charts.yml

@@ -0,0 +1,9 @@
+title: الاستخدام
+endpoint: ""
+intervals:
+  - name: شهر
+    id: months
+    endpoint: "/months"
+  - name: سنة
+    id: years
+    endpoint: "/years"

_includes/scripts.html

@@ -1,4 +1,6 @@
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-<script src="/assets/js/sidebar.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
+<script src="/assets/js/sidebar.js"></script>
+<script src="/assets/js/usage-charts.js"></script>

_includes/usage-charts.html

@@ -0,0 +1,18 @@
+<nav>
+  <div class="nav nav-pills mb-3" role="tablist">
+    {% for interval in site.data.usage-charts.intervals %}
+    <a class="nav-item nav-link {% if forloop.index == 1 %} active {% endif %}" id="nav-{{ interval.id }}-tab"
+      data-toggle="tab" href="#nav-{{ interval.id }}" role="tab" aria-controls="nav-{{ interval.id }}"
+      aria-selected="true">{{ interval.name }}</a>
+    {% endfor %}
+  </div>
+</nav>
+
+<div class="tab-content">
+  {% for interval in site.data.usage-charts.intervals %}
+  <div class="tab-pane fade {% if forloop.index == 1 %} show active {% endif %}" id="nav-{{ interval.id }}"
+    role="tabpanel" aria-labelledby="nav-{{ interval.id }}-tab">
+    <canvas id="{{ interval.id }}-chart"></canvas>
+  </div>
+  {% endfor %}
+</div>

_sass/_global.scss

@@ -2,4 +2,13 @@ body {
   direction: rtl;
   text-align: right;
   font-family: "Cairo", sans-serif;
-}
+}
+
+.nav-pills > .active {
+  background-color: $primary-color;
+  color: white !important;
+}
+
+.nav-pills > a {
+  color: $primary-color;
+}

_sass/_variables.scss

@@ -1 +1,2 @@
+$primary-color: #28a745 !important;
 $sidebar-width: 16rem;

assets/js/usage-charts.js

@@ -0,0 +1,44 @@
+---
+---
+
+{% for interval in site.data.usage-charts.intervals %}
+fetchData("{{ interval.endpoint }}").then(data => {
+    const x = data.map(month => month.number);
+    const y = data.map(month => month.usage);
+    createChart("{{ interval.id }}-chart", x, y);
+  });
+{% endfor %}
+
+async function fetchData(interval) {
+  const root = "{{ site.root-endpoint }}";
+  const endpoint = "{{ site.data.usage-charts.endpoint }}";
+  const response = await fetch(`${root}${endpoint}/${interval}`);
+  return await response.json();
+}
+
+function createChart(name, xData, yData) {
+  var ctx = document.getElementById(name).getContext("2d");
+
+  var gradient = ctx.createLinearGradient(0, 0, 0, 450);
+  gradient.addColorStop(0, "rgba(40, 167, 69, 0.5)");
+  gradient.addColorStop(0.5, "rgba(40, 167, 69, 0.25)");
+  gradient.addColorStop(1, "rgba(40, 167, 69, 0)");
+
+  new Chart(ctx, {
+    type: "line",
+    data: {
+      labels: xData,
+      datasets: [
+        {
+          data: yData,
+          backgroundColor: gradient
+        }
+      ]
+    },
+    options: {
+      legend: {
+        display: false
+      }
+    }
+  });
+}

index.html

@@ -1,5 +1,14 @@
 ---
 layout: default
 ---
-<h1 class="font-weight-bold">{{ site.title }}</h1>
-<p class="text-monospace">{{ site.description }}</h1>
+
+<div class="row justify-content-center">
+  <div class="col-lg-8">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">{{ site.data.usage-charts.title }}</h5>
+        {% include usage-charts.html %}
+      </div>
+    </div>
+  </div>
+</div>