js-chart

src/_data/charts.yml

@@ -15,6 +15,24 @@ tasks:
       color: orange
       data: [0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]
 
+development-activity:
+  name: Development Activity
+  type: area
+  hide-points: true
+  hide-tooltip: true
+  remove-padding: true
+  legend-position: 'top'
+  series:
+    - name: 'Purchases'
+      color: blue-dark
+      data: [30, 10, 10, 15, 0, 47, 65, 10]
+    - name: 'Plans'
+      color: blue
+      data: [20, 25, 30, 35, 55, 42, 15, 25]
+    - name: 'Services'
+      color: blue-light
+      data: [10, 30, 25, 30, 35, 15, 10, 15]
+
 employment:
   name: Employment Growth
   display: true

src/_data/menu.yml

@@ -86,6 +86,10 @@ pages:
       name: 503 error
       url: 503.html
 
+    email:
+      name: Email
+      url: email.html
+
     empty:
       name: Empty page
       url: empty.html

src/_includes/cards/development-activity.html

@@ -0,0 +1,48 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Development Activity</h3>
+	</div>
+	<div id="chart-development-activity" style="height: 15rem"></div>
+	<table class="table card-table table-striped table-vcenter">
+		<thead>
+		<tr>
+			<th colspan="2">User</th>
+			<th>Commit</th>
+			<th>Date</th>
+			<th></th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td class="w-1"><span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[10].photo }})"></span></td>
+			<td>Ryan Lawrence</td>
+			<td>Initial commit</td>
+			<td>May 6, 2016</td>
+			<td class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
+		</tr>
+		<tr>
+			<td><span class="avatar">BM</span></td>
+			<td>Benji Miller</td>
+			<td>Main structure</td>
+			<td>April 22, 2016</td>
+			<td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
+		</tr>
+		<tr>
+			<td><span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[16].photo }})"></span></td>
+			<td>Justine Adams</td>
+			<td>Left sidebar adjusments</td>
+			<td>April 15, 2016</td>
+			<td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
+		</tr>
+		<tr>
+			<td><span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[12].photo }})"></span></td>
+			<td>Brett Harris</td>
+			<td>Topbar dropdown style</td>
+			<td>April 8, 2016</td>
+			<td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
+		</tr>
+		</tbody>
+	</table>
+</div>
+
+{% include js-charts.html id="chart-development-activity" data="development-activity" %}

src/_includes/js-charts.html

@@ -32,7 +32,7 @@ require(['c3', 'jquery'], function(c3, $) {
 				{% endif %}
 
 				colors: { {% for serie in data.series %}
-					'data{{ forloop.index }}': tabler.colors.{{ serie.color | default: 'blue' }}{% unless forloop.last %},{% endunless %}{% endfor %}
+					'data{{ forloop.index }}': tabler.colors["{{ serie.color | default: 'blue' }}"]{% unless forloop.last %},{% endunless %}{% endfor %}
 				},
 
 				names: {
@@ -42,6 +42,26 @@ require(['c3', 'jquery'], function(c3, $) {
 				}
 			},
 
+        	{% if data.remove-padding %}
+			axis: {
+				y: {
+					padding: {
+						bottom: 0,
+					},
+					show: false,
+						tick: {
+						outer: false
+					}
+				},
+				x: {
+					padding: {
+						left: 0,
+						right: 0
+					},
+					show: false
+				}
+			},
+			{% else %}
 			axis: {
 				{% if data.type != 'pie' and data.type != 'donut' %}
 				x: {
@@ -54,6 +74,7 @@ require(['c3', 'jquery'], function(c3, $) {
 				rotated: true,
 				{% endif %}
 			},
+        	{% endif %}
 
 
 			{% if data.type == 'bar' %}
@@ -63,15 +84,45 @@ require(['c3', 'jquery'], function(c3, $) {
 
 
 			legend: {
-				{% if data.hide-legend %}show: false, //hide legend
-				{% else %}padding: 16,{% endif %}
+                {% if data.hide-legend %}show: false, //hide legend
+                {% else %}
+				{% if data.legend-position == 'top' %}
+				position: 'inset',
+				padding: 0,
+				inset: {
+                    anchor: 'top-left',
+					x: 20,
+					y: 8,
+					step: 10
+				}
+				{% else %}
+                padding: 16,
+                {% endif %}
+                {% endif %}
 			},
 
+        	{% if data.hide-tooltip %}
+			tooltip: {
+				format: {
+					title: function (x) {
+						return '';
+					}
+				}
+			},
+        	{% endif %}
 
+        	{% if data.remove-padding %}
+			padding: {
+				bottom: 0,
+				left: -1,
+				right: -1
+			},
+			{% else %}
 			padding: {
 				{% if data.hide-legend %}bottom: 0,{% else %}bottom: 16,{% endif %}
 				top: 0
 			},
+       		{% endif %}
 
 			{% if data.hide-points %}
 			point: {

src/assets/js/core.js

@@ -94,8 +94,4 @@ $(document).ready(function () {
             });
         });
     }
-
-
-
-
 });

src/assets/js/dashboard.js

@@ -26,6 +26,13 @@ require.config({
 
 window.tabler = {
     colors: {
+        'blue-darkest': '#0e1929',
+        'blue-darker': '#1c3353',
+        'blue-dark': '#3866a6',
+        'blue-light': '#7ea5dd',
+        'blue-lighter': '#c8d9f1',
+        'blue-lightest': '#edf2fa',
+
         {% for color in site.colors %}"{{ color[0] }}": "{{ color[1].hex }}"{% unless forloop.last %},{% endunless %}
         {% endfor %}
     }

src/assets/plugins/charts-c3/scss/_c3.scss

@@ -124,10 +124,9 @@
 }
 
 .c3-legend-background {
-	opacity: 0.75;
-	fill: white;
+	fill: transparent;
 	stroke: lightgray;
-	stroke-width: 1;
+	stroke-width: 0;
 }
 
 /*-- Title --*/

src/index.html

@@ -9,7 +9,7 @@ menu: index
 
 	{% include page-title.html title="Dashboard" %}
 
-	<div class="row row-cards row-deck">
+	<div class="row row-cards">
 
 		<div class="col-6 col-sm-4 col-lg-2">
 			{% include cards/stats-1.html number=43 title="New Tickets" percentage=6 %}
@@ -30,6 +30,7 @@ menu: index
 			{% include cards/stats-1.html number=621 title="Products" percentage=-1 %}
 		</div>
 		<div class="col-lg-8">
+			{% include cards/development-activity.html %}
 			{% include cards/tasks.html %}
 		</div>