Customize chart

kucingbasah737 · Nov 27, 2023 · 5f39dcd · 5f39dcd
1 parent 06dae37
commit 5f39dcd
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 104 deletions.
diff --git a/views/my-links.html.njk b/views/my-links.html.njk
@@ -57,57 +57,6 @@
 Create a new link
 </a>
 
-<canvas class="my-4 w-100" id="hitsPerDayChart" width="900" height="150"></canvas>
-
-{% endblock %}
-
-{% block bodyEnd %}
-
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js" integrity="sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp" crossorigin="anonymous"></script>
-<script>
-
-/* globals Chart:false */
-
-(() => {
-  'use strict'
-
-  // Graphs
-  const ctx = document.getElementById('hitsPerDayChart')
-  // eslint-disable-next-line no-unused-vars
-  const myChart = new Chart(ctx, {
-    type: 'line',
-    data: {
-      labels: [
-        {% for item in hitsPerDay %}
-        '{{ item.date | simpleDate }}',
-        {% endfor %}
-      ],
-      datasets: [{
-        data: [
-          {% for item in hitsPerDay %}
-          {{ item.hitCount }},
-          {% endfor %}
-        ],
-        lineTension: 0,
-        backgroundColor: 'transparent',
-        borderColor: '#007bff',
-        borderWidth: 4,
-        pointBackgroundColor: '#007bff'
-      }]
-    },
-    options: {
-      plugins: {
-        legend: {
-          display: false
-        },
-        tooltip: {
-          boxPadding: 3
-        }
-      }
-    }
-  })
-})();
-
-</script>
+{% include "my-links.line-chart-visits.html.njk" %}
 
 {% endblock %}
diff --git a/views/my-links.line-chart-visits.html.njk b/views/my-links.line-chart-visits.html.njk
@@ -0,0 +1,54 @@
+
+<canvas class="my-4 w-100" id="hitsPerDayChart" width="900" height="100"></canvas>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js" integrity="sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp" crossorigin="anonymous"></script>
+
+<script>
+/* globals Chart:false */
+
+(() => {
+  'use strict'
+
+  // Graphs
+  const ctx = document.getElementById('hitsPerDayChart')
+  // eslint-disable-next-line no-unused-vars
+  const myChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: [
+        {% for item in hitsPerDay %}
+        '{{ item.date | simpleDate }}',
+        {% endfor %}
+      ],
+      datasets: [{
+        data: [
+          {% for item in hitsPerDay %}
+          {{ item.hitCount }},
+          {% endfor %}
+        ],
+        lineTension: 0,
+        {# backgroundColor: 'transparent', #}
+        borderColor: '#007bff',
+        borderWidth: 2,
+        pointBackgroundColor: '#007bff',
+        fill: true,
+      }]
+    },
+    options: {
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          boxPadding: 3
+        }
+      },
+      scales: {
+        y: {
+          min: 0
+        },
+      },
+    }
+  })
+})();
+</script>
diff --git a/views/my-links.view.html.njk b/views/my-links.view.html.njk
@@ -13,57 +13,6 @@
 <a href="{{ basePath }}">Back to link list</a>
 </p>
 
-<canvas class="my-4 w-100" id="hitsPerDayChart" width="900" height="150"></canvas>
-
-{% endblock %}
-
-{% block bodyEnd %}
-
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js" integrity="sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp" crossorigin="anonymous"></script>
-<script>
-
-/* globals Chart:false */
-
-(() => {
-  'use strict'
-
-  // Graphs
-  const ctx = document.getElementById('hitsPerDayChart')
-  // eslint-disable-next-line no-unused-vars
-  const myChart = new Chart(ctx, {
-    type: 'line',
-    data: {
-      labels: [
-        {% for item in hitsPerDay %}
-        '{{ item.date | simpleDate }}',
-        {% endfor %}
-      ],
-      datasets: [{
-        data: [
-          {% for item in hitsPerDay %}
-          {{ item.hitCount }},
-          {% endfor %}
-        ],
-        lineTension: 0,
-        backgroundColor: 'transparent',
-        borderColor: '#007bff',
-        borderWidth: 4,
-        pointBackgroundColor: '#007bff'
-      }]
-    },
-    options: {
-      plugins: {
-        legend: {
-          display: false
-        },
-        tooltip: {
-          boxPadding: 3
-        }
-      }
-    }
-  })
-})();
-
-</script>
+{% include "my-links.line-chart-visits.html.njk" %}
 
 {% endblock %}