homepage charts

src/_data/charts.yml

@@ -229,24 +229,32 @@ pie:
   name: Lorem ipsum
   display: true
   type: pie
+  hide-legend: true
   series:
-    - name: Maximum
-      color: blue
+    - name: A
+      color: blue-darker
       data: [63]
-    - name: Minimum
+    - name: B
+      color: blue
+      data: [44]
+    - name: C
       color: blue-light
-      data: [37]
+      data: [12]
+    - name: D
+      color: blue-lighter
+      data: [14]
 
 donut:
   name: Lorem ipsum
   display: true
   type: donut
+  hide-legend: true
   series:
     - name: Maximum
-      color: blue
+      color: green
       data: [63]
     - name: Minimum
-      color: blue-light
+      color: green-light
       data: [37]
 
 

src/_includes/cards/chart.html

@@ -3,7 +3,7 @@
 		<h3 class="card-title">{{ include.title }}</h3>
 	</div>
 	<div class="card-body">
-		<div id="{{ include.id }}" style="height: 15rem;"></div>
+		<div id="{{ include.id }}" style="height: {{ include.height | default: 15}}rem;"></div>
 	</div>
 </div>
 {% include js-charts.html id=include.id data=include.data %}

src/_includes/cards/development-activity.html

@@ -2,7 +2,7 @@
 	<div class="card-header">
 		<h3 class="card-title">Development Activity</h3>
 	</div>
-	<div id="chart-development-activity" style="height: 15rem"></div>
+	<div id="chart-development-activity" style="height: 14rem"></div>
 	<table class="table card-table table-striped table-vcenter">
 		<thead>
 		<tr>

src/_plugins/jekyll-tabler.rb

@@ -45,6 +45,29 @@ module Jekyll
     def first_letter(value)
       return value[0, 1]
     end
+
+
+
+    def mix(color_1, color_2, weight=50)
+      color = "#"
+      color_1 = color_1[0,1] == '#' ? color_1[1,6] : color_1
+      color_2 = color_2[0,1] == '#' ? color_2[1,6] : color_2
+
+      for i in [0, 2, 4]
+        v1 = color_1[i, 2].to_i(16).to_s(10)
+        v2 = color_2[i, 2].to_i(16).to_s(10)
+
+        val = ((v2.to_i + (v1.to_i - v2.to_i) * (weight / 100.0)).round).to_s(16);
+
+        while val.length < 2
+          val = '0' + val
+        end
+
+        color += val
+      end
+
+      color
+    end
   end
 end
 

src/assets/js/dashboard.js

@@ -26,15 +26,14 @@ 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 %}
+        {% for color in site.colors %}
+        '{{ color[0] }}': '{{ color[1].hex }}',
+        '{{ color[0] }}-darkest': '{{ color[1].hex | mix: "#000000", 20  }}',
+        '{{ color[0] }}-darker': '{{ color[1].hex | mix: "#000000", 40  }}',
+        '{{ color[0] }}-dark': '{{ color[1].hex | mix: "#000000", 80  }}',
+        '{{ color[0] }}-light': '{{ color[1].hex | mix: "#ffffff", 70 }}',
+        '{{ color[0] }}-lighter': '{{ color[1].hex | mix: "#ffffff", 30 }}',
+        '{{ color[0] }}-lightest': '{{ color[1].hex | mix: "#ffffff", 10 }}'{% unless forloop.last %},{% endunless %}{% endfor %}
     }
 };
 

src/index.html

@@ -39,10 +39,19 @@ menu: index
 
 			<div class="row">
 				<div class="col-6">
-					{% include cards/chart.html title="Chart title" id="chart-donut" data="donut" %}
+					{% include cards/chart.html height=12 title="Chart title" id="chart-donut" data="donut" %}
 				</div>
 				<div class="col-6">
-					{% include cards/chart.html title="Chart title" id="chart-pie" data="pie" %}
+					{% include cards/chart.html height=12 title="Chart title" id="chart-pie" data="pie" %}
+				</div>
+				<div class="col-4">
+					{% include cards/digit.html color="red" title="New fedbacks" digit="62" width="28%" %}
+				</div>
+				<div class="col-4">
+					{% include cards/digit.html color="green" title="Today profit" digit="$652" width="84%" %}
+				</div>
+				<div class="col-4">
+					{% include cards/digit.html color="yellow" title="Users online" digit="76" width="34%" %}
 				</div>
 			</div>
 		</div>