backend/public/dist/js/BI.js

// --------------------------------------------------------------

Chart.defaults.global.defaultFontFamily = 'IRANSansFaNum';

var pieChartItem = null;
var pieChartItemCanvas = $('#pieChart');
var cakeChartItem = null;
var cakeChartItemCanvas = $('#cakeChart');
var lineChartItem = null;
var lineChartItemCanvas = $('#lineChart');
var barChartItem = null;
var barChartItemCanvas = $('#barChart');

var chartColors = [
  'rgba(255, 99, 132, 0.6)',
  'rgba(54, 162, 235, 0.6)',
  'rgba(255, 206, 86, 0.6)',
  'rgba(75, 192, 192, 0.6)',
  'rgba(153, 102, 255, 0.6)',
  'rgba(255, 159, 64, 0.6)',
  'rgba(255, 64, 159, 0.6)',
  'rgba(159, 255, 64, 0.6)',
  'rgba(255, 64, 255, 0.6)',
  'rgba(159, 159, 64, 0.6)',
];

function randomScalingFactor() {
  return Math.round(Math.random() * 100);
};

function randomConfig(num) {
  let config = null;
  switch (num) {
    case 1: {
      config = {
        type: 'pie',
        data: {
          datasets: [{
            data: [
              randomScalingFactor(),
              randomScalingFactor()
            ],
            backgroundColor: [
              chartColors[0],
              chartColors[1],
            ],
            label: 'Dataset 1'
          }],
          labels: [
            'احداث',
            'نگه داری'
          ]
        },
        options: {
          responsive: true,
          legend: {
            display: true
          },
          title: {
            display: true,
            text: 'تفکیک پروژه های راه روستایی',
            position: 'bottom'
          },
          tooltips: {
            enabled: true
          }
        }
      };
      break;
    }
    case 2: {
      config = {
        data: {
          datasets: [{
            data: [
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor()
            ],
            backgroundColor: [
              chartColors[0],
              chartColors[1],
              chartColors[2],
              chartColors[3],
              chartColors[4],
            ],
            label: 'تفکیک پروژه های راه روستایی'
          }],
          labels: [
            'شریانی',
            'غیرشریانی',
            'فرعی',
            'اصلی',
            'شریانی-اصلی'
          ]
        },
        options: {
          responsive: true,
          legend: {
            display: true,
            position: 'right',
          },
          title: {
            display: true,
            text: 'تفکیک پروژه های راه روستایی',
            position: 'bottom'
          },
          scale: {
            ticks: {
              display: true,
              beginAtZero: true
            },
            reverse: false
          },
          animation: {
            animateRotate: false,
            animateScale: true
          },
          tooltips: {
            enabled: true
          }
        }
      };
      break;
    }
    case 3: {
      config = {
        type: 'line',
        data: {
          labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'],
          datasets: [{
            label: 'پیشرفت فیزیکی',
            backgroundColor: chartColors[0],
            borderColor: chartColors[0],
            data: [
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor()
            ],
            fill: false,
          }, {
            label: 'پیشرفت ریالی',
            fill: false,
            backgroundColor: chartColors[1],
            borderColor: chartColors[1],
            data: [
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor()
            ],
          }]
        },
        options: {
          responsive: true,
          legend: {
            display: true,
          },
          title: {
            display: true,
            text: 'نسبت پیشرفت فیزیکی به ریالی',
            position: 'bottom'
          },
          tooltips: {
            enabled: true,
            mode: 'index',
            intersect: false,
          },
          hover: {
            mode: 'nearest',
            intersect: true
          },
          scales: {
            xAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'ماه'
              }
            }],
            yAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'مقدار'
              }
            }]
          }
        }
      };
      break;
    }
    case 4: {
      config = {
        type: 'bar',
        data:
        {
          labels: ['مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
          datasets: [{
            label: 'راه روستایی',
            backgroundColor: chartColors[0],
            borderColor: chartColors[0],
            borderWidth: 1,
            data: [
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor()
            ]
          }, {
            label: 'راهداری',
            backgroundColor: chartColors[1],
            borderColor: chartColors[1],
            borderWidth: 1,
            data: [
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor()
            ]
          }]
        },
        options: {
          responsive: true,
          legend: {
            display: true,
            position: 'top',
          },
          title: {
            display: true,
            text: 'تفکیک پروژه های انجام شده تاکنون',
            position: 'bottom'
          },
          scales: {
            xAxes: [{
              display: true,
            }],
            yAxes: [{
              display: true,
            }]
          },
          tooltips: {
            enabled: true
          }
        }
      };
    }
  }
  return config;
}

createChartItem();

function createChartItem() {
  if (pieChartItem)
    pieChartItem.destroy();
  pieChartItem = new Chart(pieChartItemCanvas, randomConfig(1));
  if (cakeChartItem)
    cakeChartItem.destroy();
  cakeChartItem = new Chart.PolarArea(cakeChartItemCanvas, randomConfig(2));
  if (lineChartItem)
    lineChartItem.destroy();
  lineChartItem = new Chart(lineChartItemCanvas, randomConfig(3));
  if (barChartItem)
    barChartItem.destroy();
  barChartItem = new Chart(barChartItemCanvas, randomConfig(4));
}

// --------------------------------------------------------------

randomNumbers();

function randomNumbers() {
  $({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 1100 }, {
    duration: 1500,
    easing: 'swing',
    step: function () {
      $('#first-number').text(Math.ceil(this.Counter));
    }
  });

  $({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 400 }, {
    duration: 1500,
    easing: 'swing',
    step: function () {
      $('#second-number').text(Math.ceil(this.Counter));
    }
  });

  $({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 630 }, {
    duration: 1500,
    easing: 'swing',
    step: function () {
      $('#third-number').text(Math.ceil(this.Counter));
    }
  });

  $({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) }, {
    duration: 1500,
    easing: 'swing',
    step: function () {
      $('#fourth-number').text(Math.ceil(this.Counter) + '%');
    }
  });

  $({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) }, {
    duration: 1500,
    easing: 'swing',
    step: function () {
      $('#fifth-number').text(Math.ceil(this.Counter) + '%');
    }
  });
}

// Map selection

$('.map-svg-box svg #iran polygon').on('click', function () {
  randomNumbers();
  createChartItem();
});

$('.map-svg-box svg #iran polygon').on('mouseover', function () {
  $(this).addClass('active-polygon');
});

$('.map-svg-box svg #iran polygon').on('mouseout', function () {
  $(this).removeClass('active-polygon');
});

$('.map-svg-box svg #iran path').on('click', function () {
  let selectedProvince = provinces.find(entry => entry.id == parseInt(this.id.substring(3)));
  // console.log(selectedProvince);
});

$('.map-svg-box svg #iran path').on('mouseover', function () {
  $(this).addClass('active-polygon');
});

$('.map-svg-box svg #iran path').on('mouseout', function () {
  $(this).removeClass('active-polygon');
});