go-zap/public/assets/js/pages/chartjs.init.js

/******/ (function() { // webpackBootstrap
var __webpack_exports__ = {};
/*!********************************************!*\
  !*** ./resources/js/pages/chartjs.init.js ***!
  \********************************************/
/*
Template Name: Skote - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: themesbrand@gmail.com
File: ChartJs init Js File
*/
function getChartColorsArray(chartId) {
  if (document.getElementById(chartId) !== null) {
      var colors = document.getElementById(chartId).getAttribute("data-colors");
      
      if (colors) {
          colors = JSON.parse(colors);
          return colors.map(function (value) {
              var newValue = value.replace(" ", "");
              if (newValue.indexOf(",") === -1) {
                  var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
                  
                  if (color){
                    color = color.replace(" ", "");
                    return color;
                  }
                  else return newValue;;
              } else {
                  var val = value.split(',');
                  if (val.length == 2) {
                      var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
                      rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
                      return rgbaColor;
                  } else {
                      return newValue;
                  }
              }
          });
      }
  }
}

!function ($) {
  "use strict";

  var ChartJs = function ChartJs() {};

  ChartJs.prototype.respChart = function (selector, type, data, options) {
    Chart.defaults.global.defaultFontColor = "#9295a4", Chart.defaults.scale.gridLines.color = "rgba(166, 176, 207, 0.1)"; // get selector by context

    var ctx = selector.get(0).getContext("2d"); // pointing parent container to make chart js inherit its width

    var container = $(selector).parent(); // enable resizing matter

    $(window).resize(generateChart); // this function produce the responsive Chart JS

    function generateChart() {
      // make chart width fit with its container
      var ww = selector.attr('width', $(container).width());

      switch (type) {
        case 'Line':
          new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
          });
          break;

        case 'Doughnut':
          new Chart(ctx, {
            type: 'doughnut',
            data: data,
            options: options
          });
          break;

        case 'Pie':
          new Chart(ctx, {
            type: 'pie',
            data: data,
            options: options
          });
          break;

        case 'Bar':
          new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
          });
          break;

        case 'Radar':
          new Chart(ctx, {
            type: 'radar',
            data: data,
            options: options
          });
          break;

        case 'PolarArea':
          new Chart(ctx, {
            data: data,
            type: 'polarArea',
            options: options
          });
          break;
      } // Initiate new chart or Redraw

    }

    ; // run function - render chart at first load

    generateChart();
  }, //init
  ChartJs.prototype.init = function () {
    //creating lineChart
    var LinechartLinechartColors = getChartColorsArray("lineChart");

    if (LinechartLinechartColors) {
      var lineChart = {
        labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
        datasets: [{
          label: "Sales Analytics",
          fill: true,
          lineTension: 0.5,
          backgroundColor: LinechartLinechartColors[0],
          borderColor: LinechartLinechartColors[1],
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: LinechartLinechartColors[1],
          pointBackgroundColor: "#fff",
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: LinechartLinechartColors[1],
          pointHoverBorderColor: "#fff",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
        }, {
          label: "Monthly Earnings",
          fill: true,
          lineTension: 0.5,
          backgroundColor: LinechartLinechartColors[2],
          borderColor: LinechartLinechartColors[3],
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: LinechartLinechartColors[3],
          pointBackgroundColor: "#fff",
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: LinechartLinechartColors[3],
          pointHoverBorderColor: "#eef0f2",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36]
        }]
      };
      var lineOpts = {
        scales: {
          yAxes: [{
            ticks: {
              max: 100,
              min: 20,
              stepSize: 10
            }
          }]
        }
      };
      this.respChart($("#lineChart"), 'Line', lineChart, lineOpts);
    } //donut chart


    var DoughnutchartColors = getChartColorsArray("doughnut");

    if (DoughnutchartColors) {
      var donutChart = {
        labels: ["Desktops", "Tablets"],
        datasets: [{
          data: [300, 210],
          backgroundColor: DoughnutchartColors,
          hoverBackgroundColor: DoughnutchartColors,
          hoverBorderColor: "#fff"
        }]
      };
      this.respChart($("#doughnut"), 'Doughnut', donutChart);
    } //Pie chart


    var PiechartColors = getChartColorsArray("pie");

    if (PiechartColors) {
      var pieChart = {
        labels: ["Desktops", "Tablets"],
        datasets: [{
          data: [300, 180],
          backgroundColor: PiechartColors,
          hoverBackgroundColor: PiechartColors,
          hoverBorderColor: "#fff"
        }]
      };
      this.respChart($("#pie"), 'Pie', pieChart);
    } //barchart


    var BarchartColors = getChartColorsArray("bar");

    if (BarchartColors) {
      var barChart = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
          label: "Sales Analytics",
          backgroundColor: BarchartColors[0],
          borderColor: BarchartColors[0],
          borderWidth: 1,
          hoverBackgroundColor: BarchartColors[1],
          hoverBorderColor: BarchartColors[1],
          data: [65, 59, 81, 45, 56, 80, 50, 20]
        }]
      };
      var barOpts = {
        scales: {
          xAxes: [{
            barPercentage: 0.4
          }]
        }
      };
      this.respChart($("#bar"), 'Bar', barChart, barOpts);
    } //radar chart


    var RadarchartColors = getChartColorsArray("radar");

    if (RadarchartColors) {
      var radarChart = {
        labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
        datasets: [{
          label: "Desktops",
          backgroundColor: RadarchartColors[0],
          borderColor: RadarchartColors[1],
          pointBackgroundColor: RadarchartColors[1],
          pointBorderColor: "#fff",
          pointHoverBackgroundColor: "#fff",
          pointHoverBorderColor: RadarchartColors[1],
          data: [65, 59, 90, 81, 56, 55, 40]
        }, {
          label: "Tablets",
          backgroundColor: RadarchartColors[2],
          borderColor: RadarchartColors[3],
          pointBackgroundColor: RadarchartColors[3],
          pointBorderColor: "#fff",
          pointHoverBackgroundColor: "#fff",
          pointHoverBorderColor: RadarchartColors[3],
          data: [28, 48, 40, 19, 96, 27, 100]
        }]
      };
      this.respChart($("#radar"), 'Radar', radarChart);
    } //Polar area  chart


    var PolarAreachartColors = getChartColorsArray("polarArea");

    if (PolarAreachartColors) {
      var polarChart = {
        datasets: [{
          data: [11, 16, 7, 18],
          backgroundColor: PolarAreachartColors,
          label: 'My dataset',
          // for legend
          hoverBorderColor: "#fff"
        }],
        labels: ["Series 1", "Series 2", "Series 3", "Series 4"]
      };
      this.respChart($("#polarArea"), 'PolarArea', polarChart);
    }
  }, $.ChartJs = new ChartJs(), $.ChartJs.Constructor = ChartJs;
}(window.jQuery), //initializing
function ($) {
  "use strict";

  $.ChartJs.init();
}(window.jQuery);
/******/ })()
;