backend/public/dist/js/report.js

fisheyeMenu({
  growRatio: 1.7,
  verticalLimit: 10,
  horizontalLimit: 1.8
});

function fisheyeMenu(options) {
  // get all items from fisheye-menu
  var items = Array.prototype.slice.call(document.querySelectorAll('.fisheye-menu button.layerButton'));
  var item = items[0];
  //get horizontal center point of each item
  var itemsMiddle = items.map(function (item) { return item.offsetLeft + (item.offsetWidth / 2); });
  //get vertical center point of each item
  var itemsVertMiddle = items.map(function (item) { return item.offsetTop + (item.offsetHeight / 2); });

  var itemWidth = item.offsetWidth;
  // vertical limits of function running
  var topLimit = item.offsetParent.offsetTop - (options.verticalLimit || 10);
  var bottomLimit = item.offsetParent.offsetTop + item.offsetHeight + (options.verticalLimit || 10);
  // ratio of new size to default
  var growRatio = options.growRatio || 1.8;
  // horizontal limit of grow reaction for single item
  var limit = item.offsetWidth * (options.horizontalLimit || 1.5);

  var sizeDiff = Math.round(itemWidth * (growRatio - 1));

  var removeGoDown = function (evt) {
    evt.target.parentNode.classList.remove('go-down');
  };
  var setListeners = function () {
    items.forEach(function (itm, index) {
      itm.addEventListener("transitionend", removeGoDown);
    });
  }();

  var makeItemBigger = function (x, y) {
    var verticallyCorrect = (y > topLimit && y < bottomLimit) ? true : false;
    //console.log(item.offsetParent.offsetTop);


    // if mouse out from vertically cirrect area make items small with transition
    if (!verticallyCorrect && !item.parentNode.classList.contains('go-down')) {
      item.parentNode.classList.add('go-down');
    }

    // if (verticallyCorrect) {
    //    let menuWidth = $('.menu_vertical').css('width');
    //    $('.menu_vertical').css('width', 'calc(' + menuWidth + ' + 50px')
    // }

    items.forEach(function (item, index) {
      var middlePoint = itemsMiddle[index];
      // horizontal distance from center point to cursor
      var dist = Math.abs(x - middlePoint);

      // if distance is bigger than limit in any direction
      // ratio is equal to 1 (item size not changed)
      var ratio = (dist > limit) ? 1 : (dist / limit);

      ratio = verticallyCorrect ? ratio : 1;

      var newSize = itemWidth + ((1 - ratio) * sizeDiff);
      // add negative top margin to item equal to half size difference
      // to stay item vertical centered
      var newMarginTop = -((1 - ratio) * (sizeDiff / 2));
      item.style.width = newSize + 'px';
      item.style.height = newSize + 'px';
      item.style.marginTop = newMarginTop + 'px';
    });
  };

  document.body.addEventListener('mousemove', function (e) {
    // position of cursor
    var pointerX = e.pageX;
    var pointerY = e.pageY;
    makeItemBigger(pointerX, pointerY);
  });
};

$('.right-menu-toggle').on('click', function () {
  if ($(this).css('right') == '0px') {
    $('.right-menu-charts').css('right', '-50px');
    $(this).css('right', '50px');
    $(this).addClass('hide-menu-toggle');
    $(this).find('i').addClass('fa-arrow-alt-circle-left').removeClass('fa-arrow-alt-circle-right');
  } else {
    $('.right-menu-charts').css('right', '30px');
    $(this).css('right', '0px');
    $(this).removeClass('hide-menu-toggle');
    $(this).find('i').addClass('fa-arrow-alt-circle-right').removeClass('fa-arrow-alt-circle-left');
  }
});

$('.item-menu-chart').on('click', function () {
  let num = parseInt($(this).attr('chartId'));

  if ($(this).hasClass('item-menu-active')) {
    $('.left-menu-view-chart').css('left', '-630px');
    $(this).removeClass('item-menu-active');
  } else {
    if ($('.item-menu-chart.item-menu-active').length > 0) {
      $('.item-menu-chart.item-menu-active').removeClass('item-menu-active');
      $('.left-menu-view-chart').css('left', '-630px');
      $(this).addClass('item-menu-active');
      setTimeout(function () {
        showChartBox(num);
        $('.left-menu-view-chart').css('left', '30px');
      }, 500);
    } else {
      showChartBox(num);
      $('.left-menu-view-chart').css('left', '30px');
      $(this).addClass('item-menu-active');
    }
  }
});

$('.menu-map-toggle').on('click', function () {
  if ($(this).parent().css('width') == '500px') {
    $(this).parent().animate({
      width: "50",
      height: "50"
    }, 500, function () {
      $(this).find('.map-svg-box').removeClass('map-svg-box-open');
    });
  } else {
    $(this).parent().animate({
      width: "500",
      height: "480"
    }, 500, function () {
      $(this).find('.map-svg-box').addClass('map-svg-box-open');
    });
  }
});

$('#iranMap polygon').on('click', function () {
  if ($('.left-menu-map').css('width') == '500px') {
    console.log($(this).attr('id'));
  }
});

$('#iranMap path').on('click', function () {
  if ($('.left-menu-map').css('width') == '500px') {
    console.log($(this).attr('id'));
  }
});

function handleTopMenuClick(num) {
  switch (num) {
    case 1: {
      window.open('starter.html', '_self');
      break;
    }
    case 2: {
      $('#reportModal').modal('show');
      break;
    }
    case 3: {
      window.open('starter.html', '_self');
      break;
    }
    case 4: {
      window.open('starter.html', '_self');
      break;
    }
  }
}

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

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

var chartItemCanvas = $('#myChart');
var chartItem = null;
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 changeChartBoxTitle(str) {
  $('.chart-title').text(str);
}

function showChartBox(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,
          title: {
            display: true,
            text: 'تفکیک پروژه های راه روستایی',
            position: 'bottom'
          }
        }
      };
      changeChartBoxTitle('تفکیک پروژه های راه روستایی');
      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: {
            position: 'right',
          },
          title: {
            display: true,
            text: 'تفکیک پروژه های راه روستایی',
            position: 'bottom'
          },
          scale: {
            ticks: {
              beginAtZero: true
            },
            reverse: false
          },
          animation: {
            animateRotate: false,
            animateScale: true
          }
        }
      };
      changeChartBoxTitle('تفکیک پروژه های راه روستایی');
      break;
    }
    case 3: {
      config = {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor(),
              randomScalingFactor()

            ],
            backgroundColor: [
              chartColors[0],
              chartColors[1],
              chartColors[2],
              chartColors[3],
              chartColors[4],
              chartColors[5],
              chartColors[6],
              chartColors[7]

            ],
            label: 'تفکیک پروژه های راهداری'
          }],
          labels: [
            'پاکسازی',
            'علایم',
            'رنگ آمیزی',
            'حریم',
            'ایمن سازی',
            'راهدار خانه',
            'اضطراری',
            'راهدارخانه'
          ]
        },
        options: {
          responsive: true,
          legend: {
            position: 'left',
          },
          title: {
            display: true,
            text: 'تفکیک پروژه های راهداری',
            position: 'bottom'
          },
        }
      };
      changeChartBoxTitle('تفکیک پروژه های راهداری');
      break;
    }
    case 4: {
      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,
          title: {
            display: true,
            text: 'نسبت پیشرفت فیزیکی به ریالی',
            position: 'bottom'
          },
          tooltips: {
            mode: 'index',
            intersect: false,
          },
          hover: {
            mode: 'nearest',
            intersect: true
          },
          scales: {
            xAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'ماه'
              }
            }],
            yAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'مقدار'
              }
            }]
          }
        }
      };
      changeChartBoxTitle('نسبت پیشرفت فیزیکی به ریالی');
      break;
    }
    case 5: {
      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: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'تفکیک پروژه های انجام شده تاکنون',
            position: 'bottom'
          }
        }
      };
      changeChartBoxTitle('تفکیک پروژه های انجام شده تاکنون');
      break;
    }
    case 6: {
      break;
    }
    case 7: {
      break;
    }
    case 8: {
      break;
    }
    case 9: {
      break;
    }
    case 10: {
      break;
    }
  }

  updateChart(num, config);
}

function updateChart(num, config) {
  if (chartItem) {
    chartItem.destroy();
  }

  if (num == 2) {
    chartItem = new Chart.PolarArea(chartItemCanvas, config);
  } else {
    chartItem = new Chart(chartItemCanvas, config);
  }
}


// ------------- Ali ------------------------

var provinces = [
  {
    id: 1,
    name: 'آذربایجان شرقی',
    lat: 37.9211202,
    lng: 46.6821517
  },
  {
    id: 2,
    name: 'آذربایجان غربی',
    lat: 37.7416484,
    lng: 45.0207638
  },
  {
    id: 3,
    name: 'اردبیل',
    lat: 38.4583983,
    lng: 47.9313001
  },
  {
    id: 4,
    name: 'اصفهان',
    lat: 33.196733,
    lng: 50.7884216,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 33.096733,
        lng: 50.7884216,
      },
      {
        id: 2,
        type: 1,
        lat: 33.396733,
        lng: 50.7884216
      },
      {
        id: 3,
        type: 2,
        lat: 33.196733,
        lng: 50.4884216
      },
      {
        id: 4,
        type: 2,
        lat: 33.196733,
        lng: 50.8884216
      },
      {
        id: 5,
        type: 3,
        lat: 33.196733,
        lng: 51.1884216
      },
      {
        id: 6,
        type: 4,
        lat: 33.496733,
        lng: 50.9884216
      },
      {
        id: 7,
        type: 2,
        lat: 33.696733,
        lng: 50.1884216
      },
      {
        id: 8,
        type: 3,
        lat: 33.296733,
        lng: 51.4884216
      },
    ]
  },
  {
    id: 32,
    name: 'البرز',
    lat: 35.9960,
    lng: 50.9289
  },
  {
    id: 5,
    name: 'ایلام',
    lat: 33.1545696,
    lng: 46.7576343
  },
  {
    id: 6,
    name: 'بوشهر',
    lat: 28.8936645,
    lng: 51.3204877
  },
  {
    id: 7,
    name: 'تهران',
    lat: 35.5021945,
    lng: 51.3269098
  },
  {
    id: 8,
    name: 'چهارمحال و بختیاری',
    lat: 32.0163307,
    lng: 50.685709
  },
  {
    id: 29,
    name: 'خراسان جنوبی',
    lat: 33.0006776,
    lng: 58.3262335
  },
  {
    id: 30,
    name: 'خراسان رضوی',
    lat: 35.756361,
    lng: 59.1280992,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 35.756361,
        lng: 59.1280992
      },
      {
        id: 2,
        type: 1,
        lat: 36.756361,
        lng: 59.3280992
      },
      {
        id: 3,
        type: 1,
        lat: 35.456361,
        lng: 60.1280992
      },
      {
        id: 4,
        type: 2,
        lat: 35.956361,
        lng: 60.5280992
      },
      {
        id: 5,
        type: 3,
        lat: 34.156361,
        lng: 60.5280992
      },
      {
        id: 6,
        type: 4,
        lat: 34.756361,
        lng: 59.6280992
      },
      {
        id: 7,
        type: 1,
        lat: 34.156361,
        lng: 58.6280992
      },
      {
        id: 8,
        type: 2,
        lat: 35.156361,
        lng: 58.4280992
      },
      {
        id: 9,
        type: 2,
        lat: 36.056361,
        lng: 58.1280992
      },
    ]
  },
  {
    id: 31,
    name: 'خراسان شمالی',
    lat: 37.5378855,
    lng: 56.9526137
  },
  {
    id: 10,
    name: 'خوزستان',
    lat: 31.5535141,
    lng: 49.0077168
  },
  {
    id: 11,
    name: 'زنجان',
    lat: 36.515854,
    lng: 48.4777616,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 36.515854,
        lng: 48.4777616
      },
      {
        id: 2,
        type: 1,
        lat: 35.415854,
        lng: 47.5777616
      },
      {
        id: 3,
        type: 2,
        lat: 37.315854,
        lng: 48.3777616
      },
      {
        id: 4,
        type: 4,
        lat: 36.915854,
        lng: 48.5777616
      },
      {
        id: 5,
        type: 2,
        lat: 37.115854,
        lng: 49.4777616
      },
    ]
  },
  {
    id: 12,
    name: 'سمنان',
    lat: 35.4380386,
    lng: 54.8626294
  },
  {
    id: 13,
    name: 'سیستان و بلوچستان',
    lat: 28.1292481,
    lng: 60.8236848,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 29.1292481,
        lng: 60.8236848
      },
      {
        id: 2,
        type: 1,
        lat: 28.1292481,
        lng: 61.8236848
      },
      {
        id: 3,
        type: 1,
        lat: 27.1292481,
        lng: 61.8236848
      },
      {
        id: 4,
        type: 2,
        lat: 28.1292481,
        lng: 59.8236848
      },
      {
        id: 5,
        type: 3,
        lat: 30.1292481,
        lng: 60.4236848
      },
      {
        id: 6,
        type: 4,
        lat: 31.1292481,
        lng: 61.4236848
      },
      {
        id: 7,
        type: 4,
        lat: 27.7292481,
        lng: 60.8236848
      },
      {
        id: 8,
        type: 2,
        lat: 27.1292481,
        lng: 59.2236848
      },
    ]
  },
  {
    id: 14,
    name: 'فارس',
    lat: 29.299051,
    lng: 53.218456
  },
  {
    id: 28,
    name: 'قزوین',
    lat: 36.0156291,
    lng: 49.8398161
  },
  {
    id: 26,
    name: 'قم',
    lat: 34.7191915,
    lng: 51.0122844
  },
  {
    id: 16,
    name: 'کردستان',
    lat: 35.672803,
    lng: 47.0124376
  },
  {
    id: 15,
    name: 'کرمان',
    lat: 29.571858,
    lng: 57.301047
  },
  {
    id: 17,
    name: 'کرمانشاه',
    lat: 34.3789744,
    lng: 46.7010122
  },
  {
    id: 18,
    name: 'کهگیلویه و بویراحمد',
    lat: 30.8143476,
    lng: 50.8661454
  },
  {
    id: 27,
    name: 'گلستان',
    lat: 37.1984436,
    lng: 55.070672
  },
  {
    id: 19,
    name: 'گیلان',
    lat: 37.5115476,
    lng: 49.3554429
  },
  {
    id: 20,
    name: 'لرستان',
    lat: 33.5372643,
    lng: 48.2435197
  },
  {
    id: 21,
    name: 'مازندران',
    lat: 36.3159159,
    lng: 51.8968597
  },
  {
    id: 22,
    name: 'مرکزی',
    lat: 34.5302705,
    lng: 49.7864561
  },
  {
    id: 23,
    name: 'هرمزگان',
    lat: 27.7198095,
    lng: 56.335807
  },
  {
    id: 24,
    name: 'همدان',
    lat: 34.973321,
    lng: 48.6555779
  },
  {
    id: 25,
    name: 'یزد',
    lat: 32.2452686,
    lng: 55.105172,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 32.1452686,
        lng: 55.205172,
      },
      {
        id: 2,
        type: 1,
        lat: 31.8452686,
        lng: 55.205172,
      },
      {
        id: 3,
        type: 1,
        lat: 31.8452686,
        lng: 55.405172,
      },
      {
        id: 4,
        type: 2,
        lat: 31.6452686,
        lng: 55.605172,
      },
      {
        id: 5,
        type: 2,
        lat: 32.3452686,
        lng: 55.205172,
      },
      {
        id: 6,
        type: 3,
        lat: 32.9452686,
        lng: 55.105172,
      },
      {
        id: 7,
        type: 3,
        lat: 33.2452686,
        lng: 55.905172,
      },
    ]
  },
];

$('svg #iran polygon').on('click', function () {
  // console.log(this.id);
  // console.log(provinces.find(entry => entry.id == parseInt(this.id.substring(3))));
  if ($('.left-menu-map').css('width') == '500px') {
    let selectedProvince = provinces.find(entry => entry.id == parseInt(this.id.substring(3)));

    // areaChart = new Chart(areaChartCanvas, {
    //   type: 'line',
    //   data: areaChartData2,
    //   options: areaChartOptions
    // });

    // let numberOfProjects = $('.numberOfProjects');
    // let numberOfActiveProjects = $('#numberOfActiveProjects');
    // let numberOfOpenedProjects = $('#numberOfOpenedProjects');
    // let numberOfFinishedProjects = $('#numberOfFinishedProjects');
    // let numberOfStoppedProjects = $('#numberOfStoppedProjects');

    // jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 700 }, {
    //   duration: 1000,
    //   easing: 'swing',
    //   step: function () {
    //     numberOfProjects.text(Math.ceil(this.Counter));
    //   }
    // });
    // jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 400 }, {
    //   duration: 1000,
    //   easing: 'swing',
    //   step: function () {
    //     numberOfActiveProjects.text(Math.ceil(this.Counter));
    //   }
    // });
    // jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 250 }, {
    //   duration: 1000,
    //   easing: 'swing',
    //   step: function () {
    //     numberOfOpenedProjects.text(Math.ceil(this.Counter));
    //   }
    // });
    // jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 100 }, {
    //   duration: 1000,
    //   easing: 'swing',
    //   step: function () {
    //     numberOfFinishedProjects.text(Math.ceil(this.Counter));
    //   }
    // });
    // jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 50) }, {
    //   duration: 1000,
    //   easing: 'swing',
    //   step: function () {
    //     numberOfStoppedProjects.text(Math.ceil(this.Counter));
    //   }
    // });
  }
});

function getProjectProgress() {
  let percentage = Math.floor(Math.random() * 100) + 1;     // returns a random integer from 0 to 99 + 1
  return percentage;
}

// ------------- Ali End ------------------------