base tabler

liquid/includes/cards/social-traffic.html

@@ -0,0 +1,29 @@
+{% assign services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest:854,VK:650,Pinterest:420' | split: ',' %}
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Social Media Traffic</h3>
+	</div>
+	<table class="table card-table table-vcenter">
+		<thead>
+		<tr>
+			<th>Network</th>
+			<th colspan="2">Visitors</th>
+		</tr>
+		</thead>
+		<tbody>
+		{% for service in services %}
+		{% assign s = service | split: ':' %}
+		<tr>
+			<td>{{ s[0] }}</td>
+			<td>{{ s[1] | format_number }}</td>
+			<td class="w-50">
+				<div class="progress progress-xs">
+
+					<div class="progress-bar bg-primary" style="width: {{ s[1] | divided_by: 5000.0 | times: 100 }}%"></div>
+				</div>
+			</td>
+		</tr>
+		{% endfor %}
+		</tbody>
+	</table>
+</div>