js charts refactoring

.editorconfig

@@ -19,7 +19,7 @@ tab_width=3
 
 [*.js.map]
 indent_style=tab
-indent_size=2
+indent_size=3
 
 [{*.css,*.scss}]
 indent_style=space

js/app/charts.js

@@ -1,7 +1,7 @@
 (function ($) {
   $(document).ready(function () {
 
-        $('[data-spark]').each(function () {
+    $().peity && $('[data-spark]').each(function () {
       var $this = $(this),
         data = $this.attr('data-spark'),
         color = $this.attr('data-spark-color') || 'blue',
@@ -10,15 +10,15 @@
       var $div = $('<div />').html(data);
       $this.append($div);
 
-            var strokeColor = uikit.colors[color],
+      var strokeColor = tabler.colors[color],
-                fillColor = uikit.colors[color];
+        fillColor = tabler.colors[color];
 
       if (type === 'donut' || type === 'pie') {
-                fillColor = [fillColor, uikit.hexToRgbA(fillColor, .1)];
+        fillColor = [fillColor, tabler.hexToRgbA(fillColor, .1)];
       } else if (type === 'bar') {
         fillColor = [fillColor];
       } else if (type === 'line') {
-                fillColor = uikit.hexToRgbA(fillColor, .1);
+        fillColor = tabler.hexToRgbA(fillColor, .1);
       }
 
       $div.peity(type, {
@@ -38,3 +38,48 @@
 
   });
 })(jQuery);
+
+
+/*
+Apexcharts default configuration
+ */
+if (window.Apex) {
+  Apex.grid = {
+    padding: {
+      right: 0,
+      left: 0
+    }
+  };
+
+  Apex.dataLabels = {
+    enabled: false
+  };
+
+  Apex.plotOptions = {
+    pie: {
+      expandOnClick: false,
+      donut: {
+        size: '10%'
+      }
+    },
+  };
+
+  Apex.chart = {
+    toolbar: {
+      show: false,
+    },
+    animations: {
+      enabled: false,
+    }
+  };
+
+  Apex.stroke = {
+    width: 2,
+    curve: 'smooth',
+  };
+
+  Apex.fill = {
+    type: 'solid',
+    opacity: 1
+  };
+}

js/ui-kit.js

@@ -1,8 +1,7 @@
-var uikit = {
+var tabler = {
     colorVariation: function (color, variation) {
         var colorValue = this.colors[color];
 
-
         if (colorValue) {
             switch (variation) {
                 case 'light':
@@ -112,4 +111,4 @@ $(document).ready(function () {
     });
 });
 
-window.uikit = uikit;
+window.tabler = tabler;

pages/_data/charts.yml

@@ -321,3 +321,18 @@ traffic-out:
     - name: Outbound
       color: red
       data: [3, 9, 7, 14, 4, 5, 9, 1, 7, 10, 14, 14, 2, 6]
+
+devices:
+  type: donut
+  sparkline: true
+  hide-legend: true
+  series:
+    - name: a
+      color: blue-dark
+      data: [23]
+    - name: b
+      color: blue
+      data: [54]
+    - name: c
+      color: blue-light
+      data: [34]

pages/_includes/js/charts-heatmap.html

@@ -34,28 +34,28 @@
 						from: 0,
 						to: 20,
 						name: "Low",
-						color: uikit.colors.green
+						color: tabler.colors.green
 					}, {
 						from: 21,
 						to: 50,
 						name: "Medium",
-						color: uikit.colors.blue
+						color: tabler.colors.blue
 					}, {
 						from: 51,
 						to: 75,
 						name: "High",
-						color: uikit.colors.yellow
+						color: tabler.colors.yellow
 					}, {
 						from: 76,
 						to: 100,
 						name: "Extreme",
-						color: uikit.colors.red
+						color: tabler.colors.red
 					}]
 				}
 			}
 		},
 		{% else %}
-		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}uikit.colors.{{ color[0] }}, {% endfor %}{% endif %}],
+		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.colors.{{ color[0] }}, {% endfor %}{% endif %}],
 		{% endif %}
 		series: [
 		{% for i in site.months_short limit: 12 %}

pages/_includes/js/charts.html

@@ -4,13 +4,10 @@
 {% if data %}
 <script>
 $(document).ready(function(){
-   (new ApexCharts(document.getElementById('{{ include.id }}'), {
+   window.ApexCharts && (new ApexCharts(document.getElementById('{{ include.id }}'), {
       chart: {
          type: '{{ data.type }}',
          height: document.getElementById('{{ include.id }}').offsetHeight,
-         toolbar: {
-            show: false,
-         },
          {% if data.sparkline %}
          sparkline: {
             enabled: true
@@ -19,38 +16,24 @@ $(document).ready(function(){
          {% if data.stacked %}
          stacked: true,
          {% endif %}
-         animations: {
-            enabled: false,
-         }
       },
 
+      {% if data.type == 'area' %}
       fill: {
-        type: 'solid',
+        opacity: .16
-        opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %}
       },
+      {% endif %}
 
-      grid: {
-         padding: {
-            right: 0,
-            left: 0,
-            bottom: 0,
-            top: 0
-         }
-      },
-
-      stroke: {
       {% if data.dashed-history %}
+      stroke: {
          width: [2, 1],
          dashArray: [0, 3],
-         {% else %}
-         width: 2,
-         {% endif %}
-         curve: 'smooth',
       },
+      {% endif %}
 
       {% if data.series %}
       {% if data.type == 'pie' or data.type == 'donut' %}
-       series: [44, 55, 13, 43, 22],
+      series: [{% for serie in data.series %}{{ serie.data[0] }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
       {% else %}
       series: [{% for serie in data.series %}{
          name: '{{ serie.name }}',
@@ -66,10 +49,6 @@ $(document).ready(function(){
       },
       {% endif %}
 
-      dataLabels: {
-         enabled: false
-      },
-
       {% if data.days-labels-count %}
       labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-05-${n+1}`),
       {% endif %}
@@ -84,14 +63,13 @@ $(document).ready(function(){
 
       {% if data.series %}
       colors: [ {% for serie in data.series %}
-         uikit.colors["{{ serie.color | default: 'blue' }}"]{% unless forloop.last %},{% endunless %}{% endfor %}
+         {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
       ],
       {% endif %}
 
       {% if data.hide-legend %}
       legend: {
          show: false, //hide legend
-
       },
       {% endif %}
 

pages/_includes/layout/debug-footer.html

@@ -82,7 +82,7 @@
 		        return false;
 	        })
 	        .on('click', '[data-debug="fullscreen"]', function (e) {
-		        uikit.toggleFullscreen();
+		        tabler.toggleFullscreen();
 
 		        e.preventDefault();
 		        return false;

pages/_includes/layout/js.html

@@ -1,12 +1,13 @@
 <!-- {{ site.title }} additional libs -->
 <script src="{{ site.base }}/libs/jquery/jquery.js"></script>
 <script src="{{ site.base }}/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+
 <script src="{{ site.base }}/libs/apexcharts/apexcharts.min.js"></script>
 <script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script>
 
-<script src="{{ site.base }}/libs/jqvmap/jquery.vmap.js"></script>
+<!--<script src="{{ site.base }}/libs/jqvmap/jquery.vmap.js"></script>-->
-<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.world.js"></script>
+<!--<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.world.js"></script>-->
-<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.france.js"></script>
+<!--<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.france.js"></script>-->
 
 {% if site.debug %}
 {% if jekyll.environment == 'development' %}
@@ -19,7 +20,7 @@
 <script src="{{ site.base }}/js/app/charts.js"></script>
 
 <script>
-	window.uikit.colors = { {% for color in site.colors %}
+	window.tabler.colors = { {% for color in site.colors %}
 		'{{ color[0] }}': '{{ color[1].hex }}'{% unless forloop.last %},{% endunless %}{% endfor %}
 	};
 </script>

pages/_plugins/jekyll-filters.rb

@@ -67,6 +67,18 @@ module Jekyll
       value = value.gsub(/ class="feather[^"]+"/, '')
       value = value.gsub(/<svg /, '<svg class="icon ' + class_name.to_s + '" ')
     end
+
+
+    def tabler_js_color(color)
+      color = color.split('-')
+
+      if color.size == 2
+        'tabler.colorVariation("'+ color[0] + '", "'+ color[1] + '")'
+      else
+        'tabler.colors["'+ color[0] + '"]'
+      end
+
+    end
   end
 end
 

pages/cards-stats.html

@@ -128,6 +128,22 @@ layout: default
          </div>
       </div>
    </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div>Traffic monitor</div>
+            <div class="row">
+               <div class="col-6">
+                 Lorem ipsum dolor sit amet, consectetur
+               </div>
+               <div class="col-6">
+                  <div class="chart-square" id="chart-devices"></div>
+                  {% include js/charts.html id="chart-devices" chart-id="devices" %}
+               </div>
+            </div>
+         </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>

scss/ui/_charts.scss

@@ -11,6 +11,11 @@
   height: 2.5rem;
 }
 
+.chart-square {
+  height: 5.75rem;
+  outline: 1px solid red;
+}
+
 .chart-placeholder {
   background-image: linear-gradient(135deg, $border-color 25%, transparent 25%, transparent 50%, $border-color 50%, $border-color 75%, transparent 75%, transparent 100%);
   background-size: 14.14px 14.14px;