homepage charts fixes

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

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 %}

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,

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 &,

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;
 }