range slider docs

dist/js/tabler-charts.js

@@ -0,0 +1,185 @@
+/*!
+  * Tabler v0.9.0 (https://tabler.io)
+  * Copyright 2018-2020 codecalm
+  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+  */
+'use strict';
+
+(function ($) {
+  $(document).ready(function () {
+    $().peity &&
+    $('[data-spark]').each(function () {
+      const $this = $(this),
+        data = $this.attr('data-spark'),
+        color = $this.attr('data-spark-color') || 'blue',
+        type = $this.attr('data-spark-type') || 'line';
+
+      const $div = $('<div />').html(data);
+      $this.append($div);
+
+      let strokeColor = tabler.colors[color],
+        fillColor = tabler.colors[color];
+
+      if (type === 'donut' || type === 'pie') {
+        fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
+      } else if (type === 'bar') {
+        fillColor = [fillColor];
+      } else if (type === 'line') {
+        fillColor = tabler.hexToRgbA(fillColor, 0.1);
+      }
+
+      $div.peity(type, {
+        width: $this.width(),
+        height: $this.height(),
+        // max: 100,
+        // min: 0,
+        stroke: strokeColor,
+        strokeWidth: 2,
+        fill: fillColor,
+        padding: 0.2,
+        innerRadius: type === 'donut' ? 17 : 0,
+      });
+    });
+  });
+})(jQuery);
+
+/*
+charts default configuration
+ */
+if (window.Apex) {
+  const borderColor = 'rgba(0, 0, 0, 0.09)';
+  const mutedColor = '#888e9a';
+
+  window.Apex = {
+    chart: {
+      fontFamily: 'inherit',
+      foreColor: 'currentColor',
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+      animations: {
+        enabled: false,
+      },
+    },
+
+    grid: {
+      show: false,
+      position: 'back',
+      borderColor: borderColor,
+      padding: {
+        right: 0,
+        left: 0,
+        bottom: 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,
+    },
+
+    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,
+      labels: {
+        show: false,
+      },
+    },
+  };
+}
+//# sourceMappingURL=tabler-charts.js.map

dist/js/tabler.js

@@ -0,0 +1,186 @@
+/*!
+  * Tabler v0.9.0 (https://tabler.io)
+  * Copyright 2018-2020 codecalm
+  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+  */
+'use strict';
+
+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;
+
+    opacity = opacity || 1;
+
+    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+      c = hex.substring(1).split('');
+      if (c.length === 3) {
+        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+      }
+      c = '0x' + c.join('');
+      return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
+    }
+    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 (
+      !document.fullscreenElement &&
+      !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement &&
+      !document.msFullscreenElement
+    ) {
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    }
+  },
+};
+
+$(document).ready(function() {
+  const $body = $('body');
+
+  $body.on('click', '[data-toggle="menubar"]', function(e) {
+    $body.toggleClass('aside-visible');
+
+    e.preventDefault();
+    return false;
+  });
+
+  // $('[data-toggle="tooltip"]').tooltip();
+  // $('[data-toggle="popover"]').popover();
+
+  /*
+	NoUiSlider
+	*/
+	let sliders = document.querySelectorAll("[data-slider]");
+	for (let i = 0; i < sliders.length; i++) {
+		let dataSlider;
+		if (sliders[i].getAttribute("data-slider")) {
+			dataSlider = JSON.parse(sliders[i].getAttribute("data-slider"));
+    }
+		noUiSlider.create(sliders[i],dataSlider);
+	}
+
+  /*
+  Autosize plugin
+   */
+  if (window.autosize) {
+    (function() {
+      const elements = document.querySelectorAll('[data-toggle="autosize"]');
+
+      if (elements.length) {
+        elements.forEach(function(element) {
+          autosize(element);
+        });
+      }
+    })();
+  }
+
+  /*
+  Imask plugin
+   */
+  if (window.IMask) {
+    (function() {
+      const $elem = $('[data-mask]');
+
+      if ($elem) {
+        $elem.each(function() {
+          IMask($(this).get(0), {
+            mask: $(this).attr('data-mask'),
+            lazy: $(this).attr('data-mask-visible') === 'true',
+          });
+        });
+      }
+    })();
+  }
+
+  /**
+   * Seelectize plugin
+   */
+  if (jQuery && jQuery().selectize) {
+    const $elem = $('[data-selectize]');
+
+    if ($elem) {
+      $elem.selectize();
+    }
+  }
+});
+
+window.tabler = tabler;
+//# sourceMappingURL=tabler.js.map