js charts refactoring

js/app/charts.js

@@ -1,40 +1,85 @@
 (function ($) {
-    $(document).ready(function () {
+  $(document).ready(function () {
 
-        $('[data-spark]').each(function () {
-            var $this = $(this),
-                data = $this.attr('data-spark'),
-                color = $this.attr('data-spark-color') || 'blue',
-                type = $this.attr('data-spark-type') || 'line';
+    $().peity && $('[data-spark]').each(function () {
+      var $this = $(this),
+        data = $this.attr('data-spark'),
+        color = $this.attr('data-spark-color') || 'blue',
+        type = $this.attr('data-spark-type') || 'line';
 
-            var $div = $('<div />').html(data);
-            $this.append($div);
+      var $div = $('<div />').html(data);
+      $this.append($div);
 
-            var strokeColor = uikit.colors[color],
-                fillColor = uikit.colors[color];
+      var strokeColor = tabler.colors[color],
+        fillColor = tabler.colors[color];
 
-            if (type === 'donut' || type === 'pie') {
-                fillColor = [fillColor, uikit.hexToRgbA(fillColor, .1)];
-            } else if (type === 'bar') {
-                fillColor = [fillColor];
-            } else if (type === 'line') {
-                fillColor = uikit.hexToRgbA(fillColor, .1);
-            }
+      if (type === 'donut' || type === 'pie') {
+        fillColor = [fillColor, tabler.hexToRgbA(fillColor, .1)];
+      } else if (type === 'bar') {
+        fillColor = [fillColor];
+      } else if (type === 'line') {
+        fillColor = tabler.hexToRgbA(fillColor, .1);
+      }
 
-            $div.peity(type, {
-                width: $this.width(),
-                height: $this.height(),
-                // max: 100,
-                // min: 0,
-                stroke: strokeColor,
-                strokeWidth: 2,
-                fill: fillColor,
-                padding: .2,
-                innerRadius: (type === 'donut') ? 17 : 0
-            });
+      $div.peity(type, {
+        width: $this.width(),
+        height: $this.height(),
+        // max: 100,
+        // min: 0,
+        stroke: strokeColor,
+        strokeWidth: 2,
+        fill: fillColor,
+        padding: .2,
+        innerRadius: (type === 'donut') ? 17 : 0
+      });
 
 
-        });
-
     });
+
+  });
 })(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;