charts refactor, libs refactor

.editorconfig

@@ -2,8 +2,9 @@
 charset=utf-8
 end_of_line=lf
 insert_final_newline=true
-indent_style=space
+indent_style=tab
-indent_size=2
+indent_size=3
+max_line_length=off
 
 [*.svg]
 indent_style=tab
@@ -18,6 +19,10 @@ insert_final_newline=false
 indent_style=tab
 tab_width=3
 
+[{*.rb,*.yml}]
+indent_style=space
+indent_size=2
+
 [*.js.map]
 indent_style=tab
 indent_size=3

build/copy-libs.js

@@ -1,11 +1,22 @@
-const libs = require('../pages/_data/libs'),
+const all_libs = require('../pages/_data/libs'),
   path = require('path'),
   { exec } = require('child_process');
 
-const all_libs = libs.js.concat(libs.css);
+let files = [];
+
+Object.keys(all_libs.js).forEach(function (lib) {
+  files.push(Array.isArray(all_libs.js[lib]) ? all_libs.js[lib] : [all_libs.js[lib]]);
+});
+
+Object.keys(all_libs.css).forEach(function (lib) {
+  files.push(Array.isArray(all_libs.css[lib]) ? all_libs.css[lib] : [all_libs.css[lib]]);
+});
+
+files = files.flat();
+
+files.forEach(function (file) {
+  let dirname = path.dirname(file).replace('@', '');
+  let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} dist/libs/${file.replace('@', '')}`;
 
-all_libs.forEach(function (lib) {
-  let dirname = path.dirname(lib).replace('@', '');
-  let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${lib} dist/libs/${lib.replace('@', '')}`;
   exec(cmd)
 });

js/tabler-charts.js

@@ -5,20 +5,20 @@
       const $this = $(this),
         data = $this.attr('data-spark'),
         color = $this.attr('data-spark-color') || 'blue',
+        bgColor = $this.attr('data-spark-color-bg') || 'blue',
         type = $this.attr('data-spark-type') || 'line';
 
       const $div = $('<div/>').html(data);
       $this.append($div);
 
-      let strokeColor = tabler.colors[color],
+      let fillColor;
-        fillColor = tabler.colors[color];
 
       if (type === 'donut' || type === 'pie') {
-        fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
+        fillColor = [color, bgColor];
       } else if (type === 'bar') {
-        fillColor = [fillColor];
+        fillColor = [color];
       } else if (type === 'line') {
-        fillColor = tabler.hexToRgbA(fillColor, 0.1);
+        fillColor = bgColor;
       }
 
       $div.peity(type, {
@@ -26,7 +26,7 @@
         height: $this.height(),
         // max: 100,
         // min: 0,
-        stroke: strokeColor,
+        stroke: color,
         strokeWidth: 2,
         fill: fillColor,
         padding: 0.2,
@@ -40,135 +40,134 @@
 charts default configuration
  */
 if (window.Apex) {
-  const borderColor = 'rgba(0, 0, 0, 0.09)';
+  // const borderColor = 'rgba(0, 0, 0, 0.09)';
-  const mutedColor = '#888e9a';
+  // const mutedColor = '#888e9a';
 
-  window.Apex = {
+  // window.Apex = {
-    chart: {
+  //   chart: {
-      fontFamily: 'inherit',
+  //     // fontFamily: 'inherit',
-      foreColor: 'currentColor',
+  //     // foreColor: 'currentColor',
-      toolbar: {
+  //     toolbar: {
-        show: false,
+  //       show: false,
-      },
+  //     },
-      zoom: {
+  //     zoom: {
-        enabled: false,
+  //       enabled: false,
-      },
+  //     },
-      animations: {
+  //     animations: {
-        enabled: false,
+  //       enabled: false,
-      },
+  //     },
-    },
+  //   },
+  //
+  //   grid: {
+  //     show: true,
+  //     borderColor: borderColor,
+  //     padding: {
+  //       right: 0,
+  //       bottom: 0,
+  //         left: 0,
+  //       top: 0,
+  //     },
+  //   },
+  //
+  //   dataLabels: {
+  //     enabled: false,
+  //     dropShadow: {
+  //       enabled: false,
+  //     },
+  //   },
+  //
+  //   plotOptions: {
+  //     pie: {
+  //       customScale: 1,
+  //       expandOnClick: false,
+  //       dataLabels: {
+  //         minAngleToShowLabel: 10,
+  //       },
+  //       donut: {
+  //         size: '80%'
+  //       }
+  //     },
+  //   },
+  //
+  //   stroke: {
+  //     width: 2,
+  //     curve: 'smooth',
+  //     lineCap: "round",
+  //   },
+  //
+  //   fill: {
+  //     type: 'solid',
+  //     opacity: 1,
+  //   },
+  //
+  //   markers: {
+  //     size: 0,
+  //     strokeWidth: 1,
+  //     radius: 2,
+  //     hover: {
+  //       size: 4,
+  //     },
+  //   },
+  //
+  //   legend: {
+  //     show: true,
+  //     fontSize: '14px',
+  //     markers: {
+  //       width: 8,
+  //       height: 8,
+  //     },
+  //     itemMargin: {
+  //       horizontal: 0,
+  //       vertical: 8,
+  //     },
+  //   },
+  //
+  //   title: {
+  //     margin: 0,
+  //     floating: true,
+  //     offsetX: 10,
+  //     style: {
+  //       fontSize: '18px',
+  //     },
+  //   },
+  //
+  //   subtitle: {
+  //     margin: 0,
+  //   },
+  //
+  //   tooltip: {
+  //     fillSeriesColor: false,
+  //   },
 
-    grid: {
+    // xaxis: {
-      show: false,
+    //   labels: {
-      position: 'back',
+    //     style: {
-      borderColor: borderColor,
+    //       colors: mutedColor,
-      padding: {
+    //       fontSize: '12px',
-        right: 0,
+    //     },
-        left: 0,
+    //     datetimeFormatter: {
-        bottom: 0,
+    //       year: 'yyyy',
-        top: 0,
+    //       month: 'MMM \'yy',
-      },
+    //       day: 'd MMM',
-    },
+    //       hour: 'HH:mm'
-
+    //     }
-    dataLabels: {
+    //   },
-      enabled: false,
+    //   tooltip: {
-      dropShadow: {
+    //     enabled: false,
-        enabled: false,
+    //   },
-      },
+    //   axisBorder: {
-    },
+    //     color: borderColor,
-
+    //     height: 0,
-    plotOptions: {
+    //   },
-      pie: {
+    //   axisTicks: {
-        customScale: 1,
+    //     show: true,
-        expandOnClick: false,
+    //     height: 4,
-        dataLabels: {
+    //     color: borderColor,
-          minAngleToShowLabel: 10,
+    //   },
-        },
+    // },
-        donut: {
+    //
-          size: '80%'
+    // yaxis: {
-        }
+    //   show: true,
-      },
+    // },
-    },
+  // };
-
-    stroke: {
-      width: 2,
-      curve: 'smooth',
-      lineCap: "round",
-    },
-
-    fill: {
-      type: 'solid',
-      opacity: 1,
-    },
-
-    markers: {
-      size: 0,
-      strokeWidth: 1,
-      radius: 2,
-      hover: {
-        size: 4,
-      },
-    },
-
-    legend: {
-      show: true,
-      fontSize: '14px',
-      markers: {
-        width: 8,
-        height: 8,
-      },
-      itemMargin: {
-        horizontal: 0,
-        vertical: 8,
-      },
-    },
-
-    title: {
-      margin: 0,
-      floating: true,
-      offsetX: 10,
-      style: {
-        fontSize: '18px',
-      },
-    },
-
-    subtitle: {
-      margin: 0,
-    },
-
-    tooltip: {
-      fillSeriesColor: false,
-    },
-
-    xaxis: {
-      labels: {
-        style: {
-          colors: mutedColor,
-          fontSize: '12px',
-        },
-        datetimeFormatter: {
-          year: 'yyyy',
-          month: 'MMM \'yy',
-          day: 'd MMM',
-          hour: 'HH:mm'
-        }
-      },
-      tooltip: {
-        enabled: false,
-      },
-      axisBorder: {
-        color: borderColor,
-        height: 0,
-      },
-      axisTicks: {
-        show: true,
-        height: 4,
-        color: borderColor,
-      },
-    },
-
-    yaxis: {
-      show: false,
-    },
-  };
 }

js/tabler.js

@@ -1,29 +1,4 @@
 const tabler = {
-  colorVariation: function(color, variation) {
-    const colorValue = this.colors[color];
-
-    if (colorValue) {
-      switch (variation) {
-        case 'light':
-          return this.mixColors(colorValue, '#ffffff', 70);
-        case 'lighten':
-          return this.mixColors(colorValue, '#ffffff', 30);
-        case 'lightest':
-          return this.mixColors(colorValue, '#ffffff', 10);
-        case 'dark':
-          return this.mixColors(colorValue, '#000000', 80);
-        case 'darken':
-          return this.mixColors(colorValue, '#000000', 40);
-        case 'darkest':
-          return this.mixColors(colorValue, '#000000', 20);
-      }
-
-      return colorValue;
-    }
-
-    throw new Error('Wrong color: ' + color);
-  },
-
   hexToRgbA: function(hex, opacity) {
     let c;
 
@@ -40,40 +15,6 @@ const tabler = {
     throw new Error('Bad Hex');
   },
 
-  mixColors: function(color_1, color_2, weight) {
-    color_1 = color_1.substr(1);
-    color_2 = color_2.substr(1);
-
-    function d2h(d) {
-      return d.toString(16);
-    }
-
-    function h2d(h) {
-      return parseInt(h, 16);
-    }
-
-    weight = typeof weight !== 'undefined' ? weight : 50;
-
-    let color = '#';
-
-    for (let i = 0; i <= 5; i += 2) {
-      let v1 = h2d(color_1.substr(i, 2)),
-        v2 = h2d(color_2.substr(i, 2));
-
-      let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
-
-      while (val.length < 2) {
-        val = '0' + val;
-      }
-
-      color += val;
-    }
-
-    return color;
-  },
-
-  colors: (window.tabler_colors || []),
-
   toggleFullscreen: function(elem) {
     elem = elem || document.documentElement;
     if (

pages/_data/charts.yml

@@ -1,5 +1,15 @@
+completion-tasks:
+  type: bar
+  days-labels-count: 7
+  debug: true
+  series:
+    - name: Tasks completion
+      data: [155, 65, 465, 265, 225, 325, 80]
+
+
 tasks-overview:
   type: bar
+  debug: true
   categories: ['Sprint 1', 'Sprint 2', 'Sprint 3', 'Sprint 4', 'Sprint 5', 'Sprint 6', 'Sprint 7', 'Sprint 8', 'Sprint 9', 'Sprint 10', 'Sprint 11', 'Sprint 12', 'Sprint 13', 'Sprint 14', 'Sprint 15', 'Sprint 16', 'Sprint 17', 'Sprint 18', 'Sprint 19', 'Sprint 20', 'Sprint 21', 'Sprint 22', 'Sprint 23', 'Sprint 24']
   series:
     - name: A
@@ -36,10 +46,10 @@ campaigns:
       color: blue
       data: 44
     - name: Reached
-      color: blue-light
+      color: blue-300
       data: 36
     - name: Opened
-      color: blue-lighten
+      color: blue-100
       data: 18
 
 tasks:
@@ -211,67 +221,6 @@ spline:
       data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
 
 
-spline-rotated:
-  name: Lorem ipsum
-  demo: true
-  type: line
-  spline: true
-  rotated: true
-  hide-legend: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: blue
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-
-bar:
-  name: Lorem ipsum
-  demo: true
-  type: bar
-  hide-legend: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: blue
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-bar-rotated:
-  name: Lorem ipsum
-  demo: true
-  type: bar
-  rotated: true
-  hide-legend: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: blue
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-
-bar-stacked:
-  name: Lorem ipsum
-  demo: true
-  type: bar
-  stacked: true
-  hide-legend: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: blue
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
 
 
 pie:
@@ -283,16 +232,16 @@ pie:
   sparkline: true
   series:
     - name: A
-      color: blue-darker
+      color: blue-700
       data: 63
     - name: B
       color: blue
       data: 44
     - name: C
-      color: blue-light
+      color: blue-300
       data: 12
     - name: D
-      color: blue-lighter
+      color: blue-100
       data: 14
 
 donut:
@@ -306,7 +255,7 @@ donut:
       color: green
       data: 63
     - name: Minimum
-      color: green-light
+      color: green-300
       data: 37
 
 
@@ -361,14 +310,15 @@ new-clients:
   type: line
   days-labels-count: 30
   sparkline: true
-  dashed-history: true
+  stroke-width: [2, 1]
+  stroke-dash: [0, 3]
   hide-legend: true
   series:
     - name: May
       color: blue
       data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
     - name: April
-      color: gray
+      color: gray-600
       data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
 
 active-users:
@@ -408,7 +358,6 @@ traffic-out:
 usd-eur:
   type: line
   days-labels-count: 30
-  auto-min: true
   stroke-curve: straight
   series:
     - name: USD/EUR
@@ -421,11 +370,11 @@ devices:
   hide-legend: true
   series:
     - name: a
-      color: blue-dark
+      color: blue-700
       data: 23
     - name: b
       color: blue
       data: 54
     - name: c
-      color: blue-light
+      color: blue-300
       data: 34

pages/_data/colors.yml

@@ -0,0 +1,123 @@
+blue: '#206bc4'
+blue-100: '#d2e1f3'
+blue-200: '#a6c4e7'
+blue-300: '#79a6dc'
+blue-400: '#4d89d0'
+blue-500: '#206bc4'
+blue-600: '#1a569d'
+blue-700: '#134076'
+blue-800: '#0d2b4e'
+blue-900: '#061527'
+
+indigo: '#6574cd'
+indigo-100: '#e0e3f5'
+indigo-200: '#c1c7eb'
+indigo-300: '#a3ace1'
+indigo-400: '#8490d7'
+indigo-500: '#6574cd'
+indigo-600: '#515da4'
+indigo-700: '#3d467b'
+indigo-800: '#282e52'
+indigo-900: '#141729'
+
+purple: '#a55eea'
+purple-100: '#eddffb'
+purple-200: '#dbbff7'
+purple-300: '#c99ef2'
+purple-400: '#b77eee'
+purple-500: '#a55eea'
+purple-600: '#844bbb'
+purple-700: '#63388c'
+purple-800: '#42265e'
+purple-900: '#21132f'
+
+pink: '#f66d9b'
+pink-100: '#fde2eb'
+pink-200: '#fbc5d7'
+pink-300: '#faa7c3'
+pink-400: '#f88aaf'
+pink-500: '#f66d9b'
+pink-600: '#c5577c'
+pink-700: '#94415d'
+pink-800: '#622c3e'
+pink-900: '#31161f'
+
+red: '#fa4654'
+red-100: '#fedadd'
+red-200: '#fdb5bb'
+red-300: '#fc9098'
+red-400: '#fb6b76'
+red-500: '#fa4654'
+red-600: '#c83843'
+red-700: '#962a32'
+red-800: '#641c22'
+red-900: '#320e11'
+
+orange: '#ff922b'
+orange-100: '#ffe9d5'
+orange-200: '#ffd3aa'
+orange-300: '#ffbe80'
+orange-400: '#ffa855'
+orange-500: '#ff922b'
+orange-600: '#cc7522'
+orange-700: '#99581a'
+orange-800: '#663a11'
+orange-900: '#331d09'
+
+yellow: '#fab005'
+yellow-100: '#feefcd'
+yellow-200: '#fddf9b'
+yellow-300: '#fcd069'
+yellow-400: '#fbc037'
+yellow-500: '#fab005'
+yellow-600: '#c88d04'
+yellow-700: '#966a03'
+yellow-800: '#644602'
+yellow-900: '#322301'
+
+green: '#5eba00'
+green-100: '#dff1cc'
+green-200: '#bfe399'
+green-300: '#9ed666'
+green-400: '#7ec833'
+green-500: '#5eba00'
+green-600: '#4b9500'
+green-700: '#387000'
+green-800: '#264a00'
+green-900: '#132500'
+
+teal: '#2bcbba'
+teal-100: '#d5f5f1'
+teal-200: '#aaeae3'
+teal-300: '#80e0d6'
+teal-400: '#55d5c8'
+teal-500: '#2bcbba'
+teal-600: '#22a295'
+teal-700: '#1a7a70'
+teal-800: '#11514a'
+teal-900: '#092925'
+
+cyan: '#17a2b8'
+cyan-100: '#d1ecf1'
+cyan-200: '#a2dae3'
+cyan-300: '#74c7d4'
+cyan-400: '#45b5c6'
+cyan-500: '#17a2b8'
+cyan-600: '#128293'
+cyan-700: '#0e616e'
+cyan-800: '#09414a'
+cyan-900: '#052025'
+
+gray: '#adb5bd'
+gray-100: '#f8f9fa'
+gray-200: '#e9ecef'
+gray-300: '#dee2e6'
+gray-400: '#ced4da'
+gray-500: '#adb5bd'
+gray-600: '#868e96'
+gray-700: '#495057'
+gray-800: '#343a40'
+gray-900: '#212529'
+
+border-color: '#dce3e9'
+text-muted: '#8a91a5'

pages/_data/libs.json

@@ -1,32 +1,37 @@
 {
-  "js": [
+  "global-libs": [
-    "jquery/dist/jquery.min.js",
+    "jquery", "bootstrap"
-    "bootstrap/dist/js/bootstrap.bundle.min.js",
+  ],
-    "autosize/dist/autosize.min.js",
+  "js": {
-    "imask/dist/imask.min.js",
+    "jquery": "jquery/dist/jquery.min.js",
-
+    "bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
-    "selectize/dist/js/standalone/selectize.min.js",
+    "autosize": "autosize/dist/autosize.min.js",
-    "apexcharts/dist/apexcharts.min.js",
+    "imask": "imask/dist/imask.min.js",
+    "selectize": "selectize/dist/js/standalone/selectize.min.js",
+    "apexcharts": "apexcharts/dist/apexcharts.min.js",
+    "jqvmap": [
       "jqvmap/dist/jquery.vmap.min.js",
       "jqvmap/dist/maps/jquery.vmap.world.js",
       "jqvmap/dist/maps/jquery.vmap.usa.js",
-    "jqvmap/dist/maps/continents/jquery.vmap.europe.js",
+      "jqvmap/dist/maps/continents/jquery.vmap.europe.js"
-    "peity/jquery.peity.min.js",
+    ],
-    "selectize/dist/js/selectize.min.js",
+    "peity": "peity/jquery.peity.min.js",
-
+    "fullcalendar": [
       "@fullcalendar/core/main.min.js",
       "@fullcalendar/daygrid/main.min.js",
       "@fullcalendar/interaction/main.min.js",
       "@fullcalendar/timegrid/main.min.js",
       "@fullcalendar/list/main.min.js"
-  ],
+    ]
-  "css": [
+  },
-    "jqvmap/dist/jqvmap.min.css",
+  "css": {
-    "selectize/dist/css/selectize.css",
+    "jqvmap": "jqvmap/dist/jqvmap.min.css",
-
+    "selectize": "selectize/dist/css/selectize.css",
+    "fullcalendar": [
       "@fullcalendar/core/main.min.css",
       "@fullcalendar/daygrid/main.min.css",
       "@fullcalendar/timegrid/main.min.css",
       "@fullcalendar/list/main.min.css"
     ]
   }
+}

pages/_includes/layout/css.html

@@ -1,7 +1,9 @@
-{% if site.data.libs %}
+{% if site.data.libs.css %}
 <!-- Libs CSS -->
 {% for lib in site.data.libs.css %}
-   <link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
+{% for file in lib[1] %}
+<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
+{% endfor %}
 {% endfor %}
 {% endif %}
 

pages/_includes/layout/js-capture.html

@@ -1,3 +1,3 @@
 {% removeemptylines %}
-{{ site.capture_global.scripts }}
+{{ site.captured_global.scripts }}
 {% endremoveemptylines %}

pages/_includes/layout/js.html

@@ -1,13 +1,11 @@
-<script>
+{% if site.data.libs.js and site.captured_libs %}
-	window.tabler_colors = { {% for color in site.colors %}
-	'{{ color[0] }}': '{{ color[1].hex }}',{% endfor %}
-	};
-</script>
-
-{% if site.data.libs %}
 <!-- Libs JS -->
 {% for lib in site.data.libs.js %}
-   <script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}"></script>
+{% if site.captured_libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
+{% for file in lib[1] %}
+<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}"></script>
+{% endfor %}
+{% endif %}
 {% endfor %}
 {% endif %}
 

pages/_includes/ui/chart.html

@@ -9,48 +9,72 @@
 {% endif %}
 
 {% if data %}
-<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
+<div id="chart-{{ id }}" {% if class %} class="{{ class }}" {% endif %}{% if data.debug %}
+     style="outline: 1px solid red" {% endif %}></div>
 
+{% append_lib apexcharts %}
 {% capture script %}
 <script>
+	// @formatter:off
 	document.addEventListener("DOMContentLoaded", function (event) {
-      {% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
+		{% if jekyll.environment == 'development' %}
+		window.tabler_chart = window.tabler_chart || {};
+		{% endif %}
 
-      window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
+		window.ApexCharts && ({% if jekyll.environment == 'development' %}
+		window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}
+		new ApexCharts(document.getElementById('chart-{{ id }}'), {
 			chart: {
-            type: '{{ data.type }}',
+				type: "{{ data.type }}",
+				{% if data.title %}
+				fontFamily: 'inherit',
+				{% endif %}
 				height: {{ height | times: 16 }},
+
 				{% if data.sparkline %}
 				sparkline: {
 					enabled: true
 				},
+				{% else %}
+				toolbar: {
+					show: true,
+				},
 				{% endif %}
+
+				{% unless data.animations %}
+				animations: {
+					enabled: false
+				},
+				{% endunless %}
+
 				{% if data.stacked %}
 				stacked: true,
 				{% endif %}
 			},
 
-         {% if data.type == 'area' %}
 			fill: {
-            opacity: .16
+				opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %},
+				{% if data.type == 'area' %}type: 'solid'{% endif %}
 			},
-         {% endif %}
 
 			{% if data.title %}
 			title: {
-            text: '{{ data.title | escape }}'
+				text: "{{ data.title | escape }}",
+				margin: 0,
+				floating: true,
+				offsetX: 10,
+				style: {
+					fontSize: '18px',
+				},
 			},
 			{% endif %}
 
-         {% if data.dashed-history or data.stroke-curve %}
+			{% if data.type == 'area' or data.type == 'line' %}
 			stroke: {
-            {% if data.dashed-history %}
+				width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
-            width: [2, 1],
+				{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
-               dashArray: [0, 3],
+				lineCap: "round",
-            {% endif %}
+				curve: "{{ data.stroke-curve | default: 'smooth' }}",
-            {% if data.stroke-curve %}
-            curve: '{{ data.stroke-curve }}',
-            {% endif %}
 			},
 			{% endif %}
 
@@ -59,9 +83,8 @@
 			series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
 			labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
 
-         {% else %}
+			{% else %}series: [{% for serie in data.series %}{
-         series: [{% for serie in data.series %}{
+				name: "{{ serie.name }}",
-            name: '{{ serie.name }}',
 				data: [{{ serie.data | join: ', ' }}]
 			}{% unless forloop.last %},{% endunless %}{% endfor %}],
 			{% endif %}
@@ -81,14 +104,12 @@
 
 			{% if data.categories or data.days-labels-count %}
 			xaxis: {
-            {% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
+				{% if data.categories %}
-            {% if data.days-labels-count %}type: 'datetime',{% endif %}
+				categories: [{% for category in data.categories %}"{{ category }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
-         },
 			{% endif %}
 
-         {% if data.auto-min %}
+			{% if data.days-labels-count %}
-         yaxis: {
+				type: 'datetime', {% endif %}
-            min: function(min) { return min },
 			},
 			{% endif %}
 
@@ -96,24 +117,13 @@
 			labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n + 1}`),
 			{% endif %}
 
-         {% if data.rotated %}
-         plotOptions: {
-            bar: {
-               horizontal: true,
-            }
-         },
-         {% endif %}
-
 			{% if data.series %}
-         colors: [
+			colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'blue' %}"{{ color | tabler_color }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
-            {% for serie in data.series %}
-            {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
-         ],
 			{% endif %}
 
 			{% if data.hide-legend %}
 			legend: {
-            show: false, //hide legend
+				show: false,
 			},
 			{% endif %}
 
@@ -136,6 +146,7 @@
 			{% endif %}
 		})).render();
 	});
+	// @formatter:on
 </script>
 {% endcapture %}
 

pages/_includes/ui/map.html

@@ -5,6 +5,8 @@
 
 {% if data %}
 <div id="map-{{ id }}" style="height: {{ height }}rem"></div>
+
+{% append_lib jqvmap %}
 {% capture script %}
 <script>
 	{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
@@ -17,7 +19,8 @@
 			borderColor: 'transparent',
 			{% if data.zoom %}enableZoom: true,{% endif %}
 			{% if data.values %}
-			scaleColors: [tabler.colorVariation('{{ color }}', 'lightest'), tabler.colors.{{ color }}],
+	      {% assign color-light = color | append: "-100" %}
+			scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
 			normalizeFunction: 'polynomial',
 			values: (chart_data = {{ data.values }}),
 			onLabelShow: function (event, label, code) {

pages/_includes/ui/sparkline.html

@@ -4,7 +4,8 @@
 {% assign square = true %}
 {% endif %}
 
-<div class="sparkline{% if square %} sparkline-square{% endif %}{% if include.wide %} sparkline-wide{% endif %}" data-spark="{{ include.data }}" data-spark-type="{{  include.type }}" {% if include.color %}data-spark-color="{{ include.color }}"{% endif %}>
+{% append_lib peity %}
+<div class="sparkline{% if square %} sparkline-square{% endif %}{% if include.wide %} sparkline-wide{% endif %}" data-spark="{{ include.data }}" data-spark-type="{{  include.type }}" {% if include.color %}data-spark-color="{{ include.color | tabler_color }}" data-spark-color-bg="{{ include.color | tabler_color: '100' }}"{% endif %}>
 	{% if include.label %}
 	<div class="sparkline-label">
 		{{ include.label }}

pages/_layouts/base.html

@@ -7,8 +7,8 @@
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <meta http-equiv="Content-Language" content="en"/>
 
-   <meta name="msapplication-TileColor" content="{{ site.colors.blue.hex }}"/>
+   <meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/>
-   <meta name="theme-color" content="{{ site.colors.blue.hex }}"/>
+   <meta name="theme-color" content="{{ site.data.colors.blue }}"/>
 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
@@ -37,7 +37,7 @@
 
 	{{ content }}
 
-	{% include_cached layout/js.html %}
+	{% include layout/js.html %}
 	{% include layout/js-capture.html %}
 
 	{% if site.debug and jekyll.environment == 'development' %}

pages/_plugins/jekyll-capture.rb

@@ -1,38 +1,54 @@
 module Jekyll
-
   module Tags
-
     class CaptureGlobal < Liquid::Block
-
       def initialize(tag_name, text, tokens)
         super
         @text = text.strip
       end
 
       def render(context)
-        if $capture_global[@text] === nil
+        if $captured_global[@text] === nil
-          $capture_global[@text] = '';
+          $captured_global[@text] = '';
         end
 
-        $capture_global[@text] += super.strip + "\n\n"
+        $captured_global[@text] += super.strip + "\n\n"
 
         ''
       end
+    end
 
+    class CaptureScripts < Liquid::Tag
+      def initialize(tag_name, text, tokens)
+        super
+        @text = text.strip
+      end
+
+      def render(context)
+        unless $captured_libs.include? @text
+          $captured_libs.push(@text)
+        end
+
+        ''
+      end
     end
   end
 
   Jekyll::Hooks.register :site, :after_init do |page, jekyll|
-    $capture_global = {}
+    $captured_global = {}
+    $captured_libs = []
   end
 
   Jekyll::Hooks.register :pages, :pre_render do |page, jekyll|
-    jekyll.site['capture_global'] = $capture_global
+    jekyll.site['captured_global'] = $captured_global
+    jekyll.site['captured_libs'] = $captured_libs
   end
 
   Jekyll::Hooks.register :pages, :post_render do |page, jekyll|
-    $capture_global = {}
+    $captured_global = {}
+    $captured_libs = []
   end
 end
 
 Liquid::Template.register_tag('capture_global', Jekyll::Tags::CaptureGlobal)
+Liquid::Template.register_tag('append_lib', Jekyll::Tags::CaptureScripts)
+

pages/_plugins/jekyll-filters.rb

@@ -69,16 +69,6 @@ module Jekyll
     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
-
     def replace_regex(input, reg_str, repl_str)
       re = Regexp.new reg_str
 
@@ -89,6 +79,15 @@ module Jekyll
       r, g, b = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/).captures
       "rgb(#{r.hex}, #{g.hex}, #{b.hex})"
     end
+
+    def tabler_color(color, variation = false)
+      if variation
+        color = color + '-' + variation
+      end
+
+      Jekyll.sites.first.data['colors'][color]
+    end
+
   end
 end
 

pages/tmp.html

@@ -3,6 +3,13 @@ tmp: true
 ---
 
 <div class="row">
+	<div class="col-md-6 col-lg-4">
+		<div class="card">
+			<div class="card-body">
+				{% include ui/chart.html chart-id="completion-tasks" height=15 %}
+			</div>
+		</div>
+	</div>
    <div class="col-12">
       <div class="card">
          <div class="card-body">

scss/_debug.scss

@@ -0,0 +1,32 @@
+$debug: false;
+
+@if $debug {
+  $colors: ("blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan);
+
+  @each $name, $color in $colors {
+    @debug ("#{$name}: '#{$color}'");
+    @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
+    @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
+    @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
+    @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
+    @debug ("#{$name}-500: '#{$color}'");
+    @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
+    @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
+    @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
+    @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
+  }
+
+  @debug ("gray: '#{$gray-500}'");
+  @debug ("gray-100: '#{$gray-100}'");
+  @debug ("gray-200: '#{$gray-200}'");
+  @debug ("gray-300: '#{$gray-300}'");
+  @debug ("gray-400: '#{$gray-400}'");
+  @debug ("gray-500: '#{$gray-500}'");
+  @debug ("gray-600: '#{$gray-600}'");
+  @debug ("gray-700: '#{$gray-700}'");
+  @debug ("gray-800: '#{$gray-800}'");
+  @debug ("gray-900: '#{$gray-900}'");
+}
+
+@debug ("border-color: '#{$border-color}'");
+@debug ("text-muted: '#{$text-muted}'");

scss/_variables.scss

@@ -14,6 +14,8 @@ $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 $icon-fonts: () !default;
 
 // COLORS
+$theme-color-interval: 10% !default;
+
 $light-black: rgba(0, 0, 0, .4) !default;
 $light-white: rgba(255, 255, 255, .4) !default;
 $min-black: rgba(135, 150, 165, .032) !default;

scss/mixins/_functions.scss

@@ -1,12 +1,12 @@
-@function alpha-attribute($color, $background) {
+//@function alpha-attribute($color, $background) {
-  $percent: alpha($color) * 100%;
+//  $percent: alpha($color) * 100%;
-  $opaque: opacify($color, 1);
+//  $opaque: opacify($color, 1);
-
+//
-  @return mix($opaque, $background, $percent);
+//  @return mix($opaque, $background, $percent);
-}
+//}
 
 @function theme-color-lighter($color) {
-  @return rgba($color, .2);
+  @return tint-color($color, 8);
 }
 
 @function str-replace($string, $search, $replace: "") {

scss/tabler.scss

@@ -73,3 +73,7 @@
 
 @import "dark";
 @import "rtl";
+
+@import "debug";
+
+

scss/utils/_colors.scss

@@ -5,12 +5,10 @@ COLORS VARIATIONS
  */
 @if $enable-color-hues {
   @each $color, $value in $colors {
-    .bg-#{$color}-lightest { background: mix($value, #fff, 10%); }
     .bg-#{$color}-lighter { background: mix($value, #fff, 30%); }
     .bg-#{$color}-light { background: mix($value, #fff, 70%); }
     .bg-#{$color}-dark { background: mix($value, #000, 80%); }
     .bg-#{$color}-darker { background: mix($value, #000, 40%); }
-    .bg-#{$color}-darkest { background: mix($value, #000, 20%); }
   }
 }