charts

_config.yml

@@ -91,6 +91,9 @@ colors:
   gray:
     hex: '#868e96'
     name: Gray
+  black:
+    hex: '#354051'
+    name: Black
 
 variants: [primary, secondary, success, info, warning, danger, dark]
 socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram, pinterest, vk, rss, flickr, bitbucket]

js/app/charts.js

@@ -47,7 +47,9 @@ if (window.Apex) {
   Apex.grid = {
     padding: {
       right: 0,
-      left: 0
+      left: 0,
+      bottom: 0,
+      top: 0
     }
   };
 
@@ -58,9 +60,6 @@ if (window.Apex) {
   Apex.plotOptions = {
     pie: {
       expandOnClick: false,
-      donut: {
-        size: '10%'
-      }
     },
   };
 
@@ -82,4 +81,8 @@ if (window.Apex) {
     type: 'solid',
     opacity: 1
   };
+
+  Apex.legend = {
+    show: false
+  };
 }

pages/_data/charts.yml

@@ -322,6 +322,16 @@ traffic-out:
       color: red
       data: [3, 9, 7, 14, 4, 5, 9, 1, 7, 10, 14, 14, 2, 6]
 
+usd-eur:
+  type: line
+  days-labels-count: 30
+  auto-min: true
+  stroke-straight: true
+  series:
+    - name: USD/EUR
+      color: black
+      data: [1.1241, 1.0972, 1.0601, 1.0516, 1.2795, 1.0573, 1.065, 1.1892, 1.1243, 1.1421, 1.1835, 1.1917, 1.1811, 1.1649, 1.1888, 1.1995, 1.2412, 1.2193, 1.2325, 1.2077, 1.1692, 1.168, 1.1686, 1.1601, 1.1608, 1.1317, 1.0318, 1.1465, 1.1444, 1.1371]
+
 devices:
   type: donut
   sparkline: true

pages/_includes/js/charts.html

@@ -24,10 +24,15 @@ $(document).ready(function(){
       },
       {% endif %}
 
-      {% if data.dashed-history %}
+      {% if data.dashed-history or data.stroke-straight %}
       stroke: {
+         {% if data.dashed-history %}
          width: [2, 1],
-         dashArray: [0, 3],
+            dashArray: [0, 3],
+         {% endif %}
+         {% if data.stroke-straight %}
+         curve: 'straight',
+         {% endif %}
       },
       {% endif %}
 
@@ -49,6 +54,12 @@ $(document).ready(function(){
       },
       {% endif %}
 
+      {% if data.auto-min %}
+      yaxis: {
+         min: function(min) { return min },
+      },
+      {% endif %}
+
       {% if data.days-labels-count %}
       labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-05-${n+1}`),
       {% endif %}

pages/cards-stats.html

@@ -144,6 +144,27 @@ layout: default
          </div>
       </div>
    </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div>USD/EUR</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="d-flex align-items-baseline">
+               <div class="h1 mb-3 mr-2">298</div>
+               <div class="mr-auto text-green">
+                  4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
+               </div>
+            </div>
+
+            <div class="chart-sm" id="chart-usd-eur"></div>
+            {% include js/charts.html id="chart-usd-eur" chart-id="usd-eur" %}
+         </div>
+      </div>
+   </div>
    <div class="col-sm-6 col-md-4 col-lg-3">6</div>
    <div class="col-sm-6 col-md-4 col-lg-3">7</div>
    <div class="col-sm-6 col-md-4 col-lg-3">8</div>