From c2558cc3f4cad36d866ecc11a2c532766d2fe3cb Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 30 Nov 2020 23:17:56 +0100
Subject: [PATCH] homepage charts fixes

---
 src/pages/_data/pages.yml                         | 14 +++++++++++++-
 src/pages/_includes/cards/most-visited-pages.html |  7 ++++---
 src/pages/_includes/ui/chart-sparkline.html       | 12 +++++++++++-
 src/scss/ui/_cards.scss                           |  2 +-
 src/scss/ui/_charts.scss                          |  4 ++++
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/pages/_data/pages.yml b/src/pages/_data/pages.yml
index 1640ab77..f09a7c2b 100644
--- a/src/pages/_data/pages.yml
+++ b/src/pages/_data/pages.yml
@@ -20,4 +20,16 @@
   visitors: 986
   unique: 865
   bounce-rate: 44.89%
-  data: 9, 6, 14, 11, 8, 24, 2, 16, 15
+  data: 6, 15, 13, 13, 5, 7, 17, 20, 19
+
+- uri: /colors.html
+  visitors: 912
+  unique: 822
+  bounce-rate: 41.12%
+  data: 2, 11, 15, 14, 21, 20, 8, 23, 18, 14
+
+- uri: /docs/index.html
+  visitors: 855
+  unique: 798
+  bounce-rate: 32.65%
+  data: 22, 12, 7, 14, 3, 21, 8, 23, 18, 14
diff --git a/src/pages/_includes/cards/most-visited-pages.html b/src/pages/_includes/cards/most-visited-pages.html
index 84467503..0cabc294 100644
--- a/src/pages/_includes/cards/most-visited-pages.html
+++ b/src/pages/_includes/cards/most-visited-pages.html
@@ -2,8 +2,8 @@
 	<div class="card-header">
 		<h3 class="card-title">Most Visited Pages</h3>
 	</div>
-	<div class="table-responsive">
-		<table class="table card-table table-vcenter">
+	<div class="card-table table-responsive">
+		<table class="table table-vcenter">
 
 			<thead>
 			<tr>
@@ -16,6 +16,7 @@
 
 			{% for page in site.data.pages %}
 			{% assign data = page.data | join: ',' %}
+			{% assign id = "bounce-rate-" | append: forloop.index %}
 			<tr>
 				<td>
 					{{ page.uri }}
@@ -25,7 +26,7 @@
 				<td class="text-muted">{{ page.unique | format_number }}</td>
 				<td class="text-muted">{{ page.bounce-rate }}</td>
 				<td class="text-right w-1">
-					{% include ui/chart-sparkline.html type="line" data=data %}
+					{% include ui/chart-sparkline.html type="line" data=data id=id small=true %}
 				</td>
 			</tr>
 			{% endfor %}
diff --git a/src/pages/_includes/ui/chart-sparkline.html b/src/pages/_includes/ui/chart-sparkline.html
index 0d1ddf37..313165ba 100644
--- a/src/pages/_includes/ui/chart-sparkline.html
+++ b/src/pages/_includes/ui/chart-sparkline.html
@@ -2,6 +2,9 @@
 {% assign id = include.id %}
 {% assign color = include.color | default: 'blue' %}
 {% assign height = include.height | default: 2.5 %}
+{% if include.small %}
+	{% assign height = include.height | default: 1.5 %}
+{% endif %}
 
 {% assign data = include.data %}
 {% if include.percentage %}
@@ -9,7 +12,7 @@
 {% endif %}
 
 {% if id %}
-	<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
+	<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}{% if include.small %} chart-sparkline-sm{% endif %}" id="sparkline-{{ id }}"></div>
 
 	{% capture_global scripts %}
 	<script>
@@ -53,6 +56,13 @@
 					}
 				},
 				{% endif %}
+				{% if type == 'area' %}
+				fill: {
+					gradient: {
+						opacityFrom: [.1, .1]
+					}
+				},
+				{% endif %}
 				{% if type == 'area' or type == 'line' %}
 				stroke: {
 					width: 2,
diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss
index 45412e32..d0c44e2e 100644
--- a/src/scss/ui/_cards.scss
+++ b/src/scss/ui/_cards.scss
@@ -287,7 +287,7 @@ Card status
 Card table
  */
 .card-table {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 
   tr {
     .card-header ~ .table-responsive &,
diff --git a/src/scss/ui/_charts.scss b/src/scss/ui/_charts.scss
index 6417620c..61a8eafa 100644
--- a/src/scss/ui/_charts.scss
+++ b/src/scss/ui/_charts.scss
@@ -30,6 +30,10 @@ Chart sparkline
   min-height: 0 !important;
 }
 
+.chart-sparkline-sm {
+  height: 1.5rem;
+}
+
 .chart-sparkline-square {
   width: 2.5rem;
 }
-- 
GitLab