// yasi start map js
var map;
var projectMap;
var bounds = [
  [42.9130026312, 75.6166317076],
  [20.5782370061, 30.5092252948],
];
var showbounds = [32.4279, 53.688];
var iranGeoJSON = JSON.parse(PROVICES_GEOJSON);
var iranMapGeo;
var iranMapGeoProject;
var keepMapFeatureColor = null;
var keepMapFeatureColorProject = null;
var iranArrayCount = 0;
var iranArrayCountProject = 0;
var diagramData = [];
var diagramDataProject = [];
var provinceLatlng = [];
var dataItem=[];
var rmsItemLayerCluster=null;
var markerItemList = [];
var itemIcon = L.divIcon({
  className: "custom-div-icon",
  html: "<span class='beacon beacon-red'></span>",
  iconSize: [30, 42],
});
// yasi end map js
(() => {
  $(".from_date").text(
    moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")
  );
  $(".to_date").text(moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD"));

  $('title').text(`گزارش سامانه جامع راهداری کل کشور از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`)

  Chart.defaults.font.family = "IRANSansFaNum";
  Chart.defaults.font.size = 10;

  provinceLatlng = jsonServer.data.provinces;
  // yasi start map js
  diagramData=jsonServer.data.road_item_group_by_province.data;
  diagramDataProject=jsonServer.data.contracts.progress_avrage_according_province;
  dataItem=jsonServer.data.road_item_cluster;
  rmsItemLayerCluster = L.markerClusterGroup({
    showCoverageOnHover: true,
  });
  //clustermap
  map = L.map("map", {
    maxBounds: bounds,
    dragging: false,
    zoomControl: false,
    attributionControl: false,
    scrollWheelZoom: false,
    minZoom: 5,
    maxZoom: 16,
    markerZoomAnimation: true,
  }).setView(showbounds, 5);

  showLegendOnMap(diagramDataProject);


  keepMapFeatureColor = null;
  iranArrayCount = 0;
  iranMapGeo = L.geoJSON(iranGeoJSON, {
    style: initStyleMapFeatures,
  });
  iranMapGeo.addTo(map);
  for (let i = 0; i < dataItem.length; i++) {
    let marker = L.marker([dataItem[i][0], dataItem[i][1]], {
      icon: itemIcon,
    })
    markerItemList.push(marker);
  }
  rmsItemLayerCluster.addLayers(markerItemList);
  map.addLayer(rmsItemLayerCluster);
  //clustermap
// yasi end map js
//projectMap
projectMap = L.map("project_map", {
  maxBounds: bounds,
  zoomControl: false,
  scrollWheelZoom: false,
  attributionControl: false,
  dragging: false,
}).setView(showbounds, 5);
keepMapFeatureColorProject = null;
iranArrayCountProject = 0;
iranMapGeoProject = L.geoJSON(iranGeoJSON, {
  style: initStyleMapFeaturesProject,
});
iranMapGeoProject.addTo(projectMap);
//projectMap

  const activityLable = [];

  const quantitativeActivityCount = [];
  const quantitativeActivityData = jsonServer.data.quantitative_activity_chart;

  const hourly_activity_chartCount = [];
  const hourly_activity_chartData = jsonServer.data.hourly_activity_chart;

  for (var i = 0; i < hourly_activity_chartData.length; i++) {
    hourly_activity_chartCount.push(hourly_activity_chartData[i].majmoe);
    activityLable.push(
      moment(hourly_activity_chartData[i].created_at).format("jYYYY/jMM/jDD")
    );
  }
  for (var i = 0; i < quantitativeActivityData.length; i++) {
    quantitativeActivityCount.push(quantitativeActivityData[i].quantity);
  }

  const ActivityChartData = {
    datasets: [
      {
        backgroundColor: "#277da1",
        borderColor: "#277da1",
        fill: false,
        data: quantitativeActivityCount,
        id: "hours",
        label: "ساعت فعالیت در سامانه",
        yAxisID: "hours",
        datalabels: {
          align: "end",
          anchor: "end",
        },
      },
      {
        backgroundColor: "#db504a",
        borderColor: "#db504a",
        fill: false,
        data: hourly_activity_chartCount,
        id: "counts",
        label: "تعداد فعالیت در سامانه",
        yAxisID: "counts",
        datalabels: {
          align: "start",
          anchor: "start",
        },
      },
    ],
    labels: activityLable,
  };

  const ActivityChartOptions = {
    scales: {
        hours: {
          grid: {
            display: false
          },
          position: 'right',
          title: {
            display: true,
            text: 'ساعت',
            font: {
              family: "IRANSansFaNum",
              size: 11,
              weight: 'bold'
            }
          }
        },
        counts: {
          grid: {
            display: false
          },
          position: 'left',
          title: {
            display: true,
            text: 'تعداد',
            font: {
              family: "IRANSansFaNum",
              size: 11,
              weight: 'bold'
            }
          }
        },
        xAxis: {
          grid: {
            display: false
          },
          title: {
            display: true,
            text: 'تاریخ',
            font: {
              family: "IRANSansFaNum",
              size: 11,
              weight: 'bold'
            }
          }
        }
      },
      plugins: {
        legend: {
          title: {
            font: {
              family: "IRANSansFaNum",
              size: 11,
              weight: 'bold'
            }
          },
          labels: {
            usePointStyle: true,
          }
        }
      }
    }

  $("#users_activity_chart").attr(
    "width",
    $("#users_activity_chart").closest(".chart-box").width()
  );
  $("#users_activity_chart").attr(
    "height",
    $("#users_activity_chart").closest(".chart-box").height()
  );

  const activityChart = new Chart(
    document.getElementById("users_activity_chart").getContext("2d"),
    {
      type: "line",
      data: ActivityChartData,
      options: ActivityChartOptions
    }
  );
  

  const fastReactStatusChartCount = [];
  const fastReactStatusData = jsonServer.data.fast_react_chart;
  
  if(fastReactStatusData[0].st == 0) fastReactStatusChartCount.push(Math.floor(fastReactStatusData[0].percent));
  if(fastReactStatusData[1].st == 1) fastReactStatusChartCount.push(Math.ceil(fastReactStatusData[1].percent));

  const fastReactStatusChartData = {
    labels: [
      'در حال بررسی',
      'رسیدگی شده',
    ],
    datasets: [{
      label: '',
      data: fastReactStatusChartCount,
      backgroundColor: [
        '#db504a',
        '#43aa8b'
      ],
    }]
  };

  
  var fastReactStatusChartRatio =
          (+$("#fast_react_status_chart").closest(".chart-box").width() + 2) / (+$("#fast_react_status_chart").closest(".chart-box").height() + 2);

  const fastReactStatusChartOptions = {
    aspectRatio: fastReactStatusChartRatio,
    layout: {
        padding: {
          bottom: 5
        }
    },
    plugins: {
      datalabels: {
        backgroundColor: '#00000066',
        textAlign: "center",
        font: {
          weight: 'bold',
          size: 14
        },
        borderRadius: 8,
        padding: {
          top: 5,
          right: 8,
          bottom: 2,
          left: 8,
        },
        color:'#fff',
        formatter: function(value, context) {
          return value + '%';
        }
      },
      title: {
        display: true,
        text: "وضعیت شکایت های واصل شده",
        font: {
          family: "IRANSansFaNum",
          size: 14,
          weight: 'bold'
        }
      },
      subtitle: {
        display: true,
        text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
        padding: {
          bottom: 10
        }
      },
      legend: {
        position: 'right',
        title: {
          font: {
            family: "IRANSansFaNum",
            size: 14,
            weight: 'bold'
          }
        },
        labels: {
          usePointStyle: true,
          font: {
            weight: 'bold',
            size: 12
          }
        }
      }
    }
  }

  const fastReactStatusChart = new Chart(
    document.getElementById("fast_react_status_chart").getContext("2d"),
    {
      type: 'pie',
      data: fastReactStatusChartData,
      plugins: [ChartDataLabels],
      options: fastReactStatusChartOptions
    }
  );
  

  //amir
  const fastReactTopsPercentageData = jsonServer.data.top_5_province_at_road_observation_according_to_progress_percent;
  const fastReactTopsPercentageCount = []
  const fastReactTopsPercentageLabel = []

  for (var i = 0; i < fastReactTopsPercentageData.length; i++) {
    fastReactTopsPercentageCount.push(Math.floor(fastReactTopsPercentageData[i].progress_percent));
    fastReactTopsPercentageLabel.push(fastReactTopsPercentageData[i].ProvinceName);
  }

  const fastReactTopsPercentageChartData = {
    labels: ['',...fastReactTopsPercentageLabel,''],
    datasets: [{
      data: [null,...fastReactTopsPercentageCount,null],
      backgroundColor: [
        '#577590'
      ],
      borderColor: '#577590',
      borderWidth: 3,
    }]
  };

  minFastReactTopsPercentageChart = Math.round(Math.min(...fastReactTopsPercentageCount) - ((Math.max(...fastReactTopsPercentageCount) - Math.min(...fastReactTopsPercentageCount)) / fastReactTopsPercentageCount.length))

  maxFastReactTopsPercentageChart = Math.round(Math.max(...fastReactTopsPercentageCount) + ((Math.max(...fastReactTopsPercentageCount) - Math.min(...fastReactTopsPercentageCount)) / fastReactTopsPercentageCount.length))

  const fastReactTopsPercentageChartOptions = {
    plugins: {
      datalabels: {
        align: 'start',
        anchor: 'start',
        font: {
          weight: 'bold'
        },
        color:'#577590',
        formatter: function(value, context) {
          return value + '%';
        }
      },
      title: {
        position: 'bottom',
        display: true,
        color:'#577590',
        text: "رتبه بندی ادارات کل برتر (برحسب درصد رسیدگی به شکایات)",
        font: {
          family: "IRANSansFaNum",
          size: 13,
          weight: 'bold'
        }
      },
      subtitle: {
        display: true,
        color:'#577590',
        text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
        padding: {
          bottom: 10
        }
      },
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        ticks: {
          color:'#577590',
          font: {
            weight: 'bold'
          }
        }
      },
      y: {
        grid: {
          display: false
        },
        min: minFastReactTopsPercentageChart == Math.min(...fastReactTopsPercentageCount) ? (Math.min(...fastReactTopsPercentageCount) - 5) : minFastReactTopsPercentageChart,
        max: maxFastReactTopsPercentageChart == Math.max(...fastReactTopsPercentageCount) ? (Math.max(...fastReactTopsPercentageCount) + 5) : maxFastReactTopsPercentageChart,
        ticks: {
          display: false
        }
      }
    }
  }



  $("#fast_react_tops_percentage_chart").attr(
    "width",
    $("#fast_react_tops_percentage_chart").closest(".chart-box").width()
  );
  $("#fast_react_tops_percentage_chart").attr(
    "height",
    $("#fast_react_tops_percentage_chart").closest(".chart-box").height()
  );

  const fastReactTopsPercentageChart = new Chart(
    document.getElementById("fast_react_tops_percentage_chart").getContext("2d"),
    {
      type: 'line',
      data: fastReactTopsPercentageChartData,
      plugins: [ChartDataLabels],
      options: fastReactTopsPercentageChartOptions
    }
  );



  const fastReactTopsCountData = jsonServer.data.top_5_province_at_road_observation_according_to_quantity;
  const fastReactTopsCountCount = []
  const fastReactTopsCountLabel = []

  for (var i = 0; i < fastReactTopsCountData.length; i++) {
    fastReactTopsCountCount.push(fastReactTopsCountData[i].count_number);
    fastReactTopsCountLabel.push(fastReactTopsCountData[i].ProvinceName);
  }


  const fastReactTopsCountChartData = {
    labels: ['',...fastReactTopsCountLabel,''],
    datasets: [{
      data: [null,...fastReactTopsCountCount,null],
      backgroundColor: [
        '#43aa8b'
      ],
      borderColor: '#43aa8b',
      borderWidth: 3,
    }]
  };

  const fastReactTopsCountChartOptions = {
    plugins: {
      datalabels: {
        align: 'start',
        anchor: 'start',
        offset : 4,
        font: {
          weight: 'bold'
        },
        color:'#43aa8b',
        formatter: function(value, context) {
          return (+value).toLocaleString('en');
        }
      },
      title: {
        position: 'bottom',
        display: true,
        color:'#43aa8b',
        text: "رتبه بندی ادارات کل برتر (برحسب تعداد رسیدگی به شکایات)",
        font: {
          family: "IRANSansFaNum",
          size: 13,
          weight: 'bold'
        }
      },
      subtitle: {
        display: true,
        color:'#43aa8b',
        text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
        padding: {
          bottom: 10
        }
      },
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        ticks: {
          color:'#43aa8b',
          font: {
            weight: 'bold'
          }
        }
      },
      y: {
        grid: {
          display: false
        },
        min: Math.round(Math.min(...fastReactTopsCountCount) - ((Math.max(...fastReactTopsCountCount) - Math.min(...fastReactTopsCountCount)) / fastReactTopsCountCount.length),1),
        max: Math.round(Math.max(...fastReactTopsCountCount) + ((Math.max(...fastReactTopsCountCount) - Math.min(...fastReactTopsCountCount)) / fastReactTopsCountCount.length)),
        ticks: {
          display: false
        }
      }
    }
  }

  $("#fast_react_tops_count_chart").attr(
    "width",
    $("#fast_react_tops_count_chart").closest(".chart-box").width()
  );
  $("#fast_react_tops_count_chart").attr(
    "height",
    $("#fast_react_tops_count_chart").closest(".chart-box").height()
  );

  const fastReactTopsCountChart = new Chart(
    document.getElementById("fast_react_tops_count_chart").getContext("2d"),
    {
      type: 'line',
      data: fastReactTopsCountChartData,
      plugins: [ChartDataLabels],
      options: fastReactTopsCountChartOptions
    }
  );


  
  const roadItemsData = jsonServer.data.road_items_chart;
  const roadItemsCount = []
  const roadItemsLabel = []

  for (var i = 0; i < roadItemsData.length; i++) {
    roadItemsCount.push(roadItemsData[i].count_number);
    roadItemsLabel.push(roadItemsData[i].sub_item_fa);
  }

  const roadItemsChartData = {
    labels: roadItemsLabel,
    datasets: [{
      data: roadItemsCount,
      borderRadius: {
        topRight: 16,
        topLeft: 16
      },
      backgroundColor: [
        '#43aa8b',
        '#db504a',
        '#f3722c',
        '#67bd50',
        '#277da1',
      ],
    }]
  };

  const roadItemsChartOptions = {
    layout: {
      padding: {
        bottom: 15
      },
    },
    scales: {
      yAxis: {
        display:false,
      },
      x: {
        ticks: {
          font: {
            weight: 'bold'
          }
        }
      }
    },
    plugins: {
      datalabels: {
        anchor: 'start',
        textAlign: "center",
        font:{
          size: 14
        },
        padding : {
          top: 5,
          right: 4,
          left: 4,
          bottom: 2
        },
        borderRadius: 16,
        offset: 20,
        align: function (context) {
            if (context.dataset.data[context.dataIndex] == 0) {
              return "center";
            }
            return "end";
          },
        color: function (context) {
            if (context.dataset.data[context.dataIndex] == 0) {
              return "#000";
            }
            return "#fff";
        },
        backgroundColor: function (context) {
          if (context.dataset.data[context.dataIndex] == 0) {
            return null;
          }
          return context.dataset.backgroundColor[context.dataIndex];
        },
        rotation: 270,
        formatter: function(value, context) {
          return (+value).toLocaleString('en');
        }
      },
      title: {
        display: true,
        color:'#666',
        text: "پنج فعالیت پرتکرار (تعداد)",
        font: {
          family: "IRANSansFaNum",
          size: 13,
          weight: 'bold'
        }
      },
      subtitle: {
        display: true,
        color:'#666',
        text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
        padding: {
          bottom: 10
        }
      },
      legend: {
        display: false
      }
    },
  }


  $("#road_items_chart").attr(
    "width",
    $("#road_items_chart").closest(".chart-box").width()
  );
  $("#road_items_chart").attr(
    "height",
    $("#road_items_chart").closest(".chart-box").height()
  );

  const roadItemsChart = new Chart(
    document.getElementById("road_items_chart").getContext("2d"),
    {
      type: 'bar',
      data: roadItemsChartData,
      plugins: [ChartDataLabels],
      options: roadItemsChartOptions
    }
  );


  const roadItemBarData = jsonServer.data.road_item_group_province_chunk
  const maxOfDataRoadItemBar = +roadItemBarData[0].cnt
  const minOfDataRoadItemBar = +roadItemBarData[34].cnt
  const quarterRoadItemBar = (maxOfDataRoadItemBar - minOfDataRoadItemBar) / 5;
  
  let arrayRoadItemBar = {
    0 : [],
    1 : [],
    2 : [],
    3 : [],
    4 : [],
  }

  const arrayTopRoadBar = [
    roadItemBarData[0].province_fa,
    roadItemBarData[1].province_fa,
    roadItemBarData[2].province_fa,
    roadItemBarData[3].province_fa,
    roadItemBarData[4].province_fa,
  ]

  $('#top_road_bar').text(arrayTopRoadBar.join('، '))

  const arrayBottomRoadBar = [
    roadItemBarData[34].province_fa,
    roadItemBarData[33].province_fa,
    roadItemBarData[32].province_fa,
    roadItemBarData[31].province_fa,
    roadItemBarData[30].province_fa,
  ]

  $('#bottom_road_bar').text(arrayBottomRoadBar.join('، '))


  for (var i = 0; i < roadItemBarData.length; i++) {
    if (roadItemBarData[i].cnt <= minOfDataRoadItemBar + quarterRoadItemBar) { // part 1
      arrayRoadItemBar[0].push(roadItemBarData[i].cnt)
    }
    else if (roadItemBarData[i].cnt > minOfDataRoadItemBar + quarterRoadItemBar && roadItemBarData[i].cnt <= minOfDataRoadItemBar + (quarterRoadItemBar * 2)) { // part 2
      arrayRoadItemBar[1].push(roadItemBarData[i].cnt)
    }
    else if (roadItemBarData[i].cnt <= minOfDataRoadItemBar + (quarterRoadItemBar * 3) && roadItemBarData[i].cnt > minOfDataRoadItemBar + (quarterRoadItemBar * 2)) { /// part 3
      arrayRoadItemBar[2].push(roadItemBarData[i].cnt)
    }
    else if(roadItemBarData[i].cnt > minOfDataRoadItemBar + (quarterRoadItemBar * 3) && roadItemBarData[i].cnt <= minOfDataRoadItemBar + (quarterRoadItemBar * 4)) {// part 4
      arrayRoadItemBar[3].push(roadItemBarData[i].cnt)
    }
    else {
      arrayRoadItemBar[4].push(roadItemBarData[i].cnt)
    }
  }

  $('.bar-road-items-count-1').text(Math.round(minOfDataRoadItemBar))
  $('.bar-road-items-count-2').text(Math.round(minOfDataRoadItemBar + quarterRoadItemBar))
  $('.bar-road-items-count-3').text(Math.round(minOfDataRoadItemBar + (quarterRoadItemBar * 2)))
  $('.bar-road-items-count-4').text(Math.round(minOfDataRoadItemBar + (quarterRoadItemBar * 3)))
  $('.bar-road-items-count-5').text(Math.round(minOfDataRoadItemBar + (quarterRoadItemBar * 4)))
  $('.bar-road-items-count-6').text(Math.round(maxOfDataRoadItemBar))

    var temporary = new ProgressBar.Circle(temporary_bar, {
      color: '#666',
      // This has to be the same size as the maximum width to
      // prevent clipping
      strokeWidth: 8,
      trailWidth: 2,
      easing: 'easeInOut',
      duration: 1400,
      text: {
        autoStyleContainer: false
      },
      from: { color: '#db504a',},
      to: { color: '#43aa8b',},
      // Set default step function for all animate calls
      step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
    
        var value = Math.round(circle.value() * 100);
        if (value === 0) {
          circle.setText('');
        } else {
          circle.setText(`${value}%`);
        }
    
      }
    });
    temporary.text.style.fontFamily = 'IRANSansFaNum';
    temporary.text.style.fontSize = '25px';
    temporary.animate(+jsonServer.data.road_tollhouse_count_type);

    var inactive = new ProgressBar.Circle(inactive_bar, {
      color: '#666',
      // This has to be the same size as the maximum width to
      // prevent clipping
      strokeWidth: 8,
      trailWidth: 2,
      easing: 'easeInOut',
      duration: 1400,
      text: {
        autoStyleContainer: false
      },
      from: { color: '#db504a',},
      to: { color: '#43aa8b',},
      // Set default step function for all animate calls
      step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
    
        var value = Math.round(circle.value() * 100);
        if (value === 0) {
          circle.setText('');
        } else {
          circle.setText(`${Math.floor(value)}%`);
        }
    
      }
    });
    inactive.text.style.fontFamily = 'IRANSansFaNum';
    inactive.text.style.fontSize = '25px';
    inactive.animate(+jsonServer.data.road_tollhouse_count_status[0].percent);

    var active = new ProgressBar.Circle(active_bar, {
      color: '#666',

      strokeWidth: 8,
      trailWidth: 2,
      easing: 'easeInOut',
      duration: 1400,
      text: {
        autoStyleContainer: false
      },
      from: { color: '#db504a',},
      to: { color: '#43aa8b',},
      step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
    
        var value = Math.round(circle.value() * 100);
        if (value === 0) {
          circle.setText('');
        } else {
          circle.setText(`${Math.ceil(value)}%`);
        }
    
      }
    });
    active.text.style.fontFamily = 'IRANSansFaNum';
    active.text.style.fontSize = '25px';
    active.animate(+jsonServer.data.road_tollhouse_count_status[1].percent);




    $("#contracts_done_data_1").css(
          "width",
          $("#contracts_done_data_1")
            .closest(".canvas-box")
            .width() + "px"
        );
        $("#contracts_done_data_1").css(
          "height",
          $("#contracts_done_data_1")
            .closest(".canvas-box")
            .height() + "px"
        );

    var contracts_done_data_1_progress_bar = new ProgressBar.Circle(contracts_done_data_1, {
      color: '#666',
      // This has to be the same size as the maximum width to
      // prevent clipping
      strokeWidth: 10,
      trailWidth: 4,
      easing: 'easeInOut',
      duration: 1400,
      svgStyle: {
        display: "block",
        width:
          $("#contracts_done_data_1")
            .closest(".canvas-box")
            .width() + "px",
        height:
          $("#contracts_done_data_1")
            .closest(".canvas-box")
            .height() + "px",
      },
      text: {
        autoStyleContainer: false
      },
      from: { color: '#db504a',},
      to: { color: '#43aa8b',},
      // Set default step function for all animate calls
      step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
    
        var value = Math.round(circle.value() * 100);
        if (value === 0) {
          circle.setText(`0%`);
        } else {
          circle.setText(`${Math.ceil(value)}%`);
        }
    
      }
    });
    contracts_done_data_1_progress_bar.text.style.fontFamily = 'IRANSansFaNum';
    contracts_done_data_1_progress_bar.text.style.fontSize = '30px';
    contracts_done_data_1_progress_bar.animate(+jsonServer.data.contracts['done_and_in_progress'][1].percent);
    $('#contracts_done_title_1').text(jsonServer.data.contracts['done_and_in_progress'][1].fa)


    $("#contracts_done_data_2").css(
          "width",
          $("#contracts_done_data_2")
            .closest(".canvas-box")
            .width() + "px"
        );
        $("#contracts_done_data_2").css(
          "height",
          $("#contracts_done_data_2")
            .closest(".canvas-box")
            .height() + "px"
        );

    var contracts_done_data_2_progress_bar = new ProgressBar.Circle(contracts_done_data_2, {
      color: '#666',
      // This has to be the same size as the maximum width to
      // prevent clipping
      strokeWidth: 10,
      trailWidth: 4,
      easing: 'easeInOut',
      duration: 1400,
      svgStyle: {
        display: "block",
        width:
          $("#contracts_done_data_2")
            .closest(".canvas-box")
            .width() + "px",
        height:
          $("#contracts_done_data_2")
            .closest(".canvas-box")
            .height() + "px",
      },
      text: {
        autoStyleContainer: false
      },
      from: { color: '#db504a',},
      to: { color: '#43aa8b',},
      // Set default step function for all animate calls
      step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
    
        var value = Math.round(circle.value() * 100);
        if (value === 0) {
          circle.setText(`0%`);
        } else {
          circle.setText(`${Math.ceil(value)}%`);
        }
    
      }
    });
    contracts_done_data_2_progress_bar.text.style.fontFamily = 'IRANSansFaNum';
    contracts_done_data_2_progress_bar.text.style.fontSize = '30px';
    contracts_done_data_2_progress_bar.animate(+jsonServer.data.contracts['done_and_in_progress'][2].percent);
    $('#contracts_done_title_2').text(jsonServer.data.contracts['done_and_in_progress'][2].fa)


    $("#contracts_done_data_3").css(
          "width",
          $("#contracts_done_data_3")
            .closest(".canvas-box")
            .width() + "px"
        );
        $("#contracts_done_data_3").css(
          "height",
          $("#contracts_done_data_3")
            .closest(".canvas-box")
            .height() + "px"
        );

    var contracts_done_data_3_progress_bar = new ProgressBar.Circle(contracts_done_data_3, {
      color: '#666',
      // This has to be the same size as the maximum width to
      // prevent clipping
      strokeWidth: 10,
      trailWidth: 4,
      easing: 'easeInOut',
      duration: 1400,
      svgStyle: {
        display: "block",
        width:
          $("#contracts_done_data_3")
            .closest(".canvas-box")
            .width() + "px",
        height:
          $("#contracts_done_data_3")
            .closest(".canvas-box")
            .height() + "px",
      },
      text: {
        autoStyleContainer: false
      },
      from: { color: '#db504a',},
      to: { color: '#43aa8b',},
      // Set default step function for all animate calls
      step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
    
        var value = Math.round(circle.value() * 100);
        if (value === 0) {
          circle.setText(`0%`);
        } else {
          circle.setText(`${Math.ceil(value)}%`);
        }
    
      }
    });
    contracts_done_data_3_progress_bar.text.style.fontFamily = 'IRANSansFaNum';
    contracts_done_data_3_progress_bar.text.style.fontSize = '30px';
    contracts_done_data_3_progress_bar.animate(+jsonServer.data.contracts['done_and_in_progress'][3].percent);
    $('#contracts_done_title_3').text(jsonServer.data.contracts['done_and_in_progress'][3].fa)


    $("#contracts_done_data_4").css(
          "width",
          $("#contracts_done_data_4")
            .closest(".canvas-box")
            .width() + "px"
        );
        $("#contracts_done_data_4").css(
          "height",
          $("#contracts_done_data_4")
            .closest(".canvas-box")
            .height() + "px"
        );

    var contracts_done_data_4_progress_bar = new ProgressBar.Circle(contracts_done_data_4, {
      color: '#666',
      // This has to be the same size as the maximum width to
      // prevent clipping
      strokeWidth: 10,
      trailWidth: 4,
      easing: 'easeInOut',
      duration: 1400,
      svgStyle: {
        display: "block",
        width:
          $("#contracts_done_data_4")
            .closest(".canvas-box")
            .width() + "px",
        height:
          $("#contracts_done_data_4")
            .closest(".canvas-box")
            .height() + "px",
      },
      text: {
        autoStyleContainer: false
      },
      from: { color: '#db504a',},
      to: { color: '#43aa8b',},
      // Set default step function for all animate calls
      step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
    
        var value = Math.round(circle.value() * 100);
        if (value === 0) {
          circle.setText(`0%`);
        } else {
          circle.setText(`${Math.ceil(value)}%`);
        }
    
      }
    });
    contracts_done_data_4_progress_bar.text.style.fontFamily = 'IRANSansFaNum';
    contracts_done_data_4_progress_bar.text.style.fontSize = '30px';
    contracts_done_data_4_progress_bar.animate(+jsonServer.data.contracts['done_and_in_progress'][4].percent);
    $('#contracts_done_title_4').text(jsonServer.data.contracts['done_and_in_progress'][4].fa)

    const top5ProjectsData = jsonServer.data.contracts['top_5_progress_avrage_according_province'];
    const top5ProjectsCount = []
    const top5ProjectsLabel = []

    for (var i = 0; i < top5ProjectsData.length; i++) {
      if(top5ProjectsData[i].progress_project > 0) {
        top5ProjectsCount.push(top5ProjectsData[i].progress_project);
        top5ProjectsLabel.push(top5ProjectsData[i].province_fa);
      }
    }

    const top5ProjectsChartData = {
      labels: top5ProjectsLabel,
      datasets: [{
        data: top5ProjectsCount,
        borderRadius: {
          topRight: 24,
          bottomRight: 24
        },
        backgroundColor: [
          '#43aa8b',
          '#db504a',
          '#f3722c',
          '#67bd50',
          '#277da1',
        ],
      }]
    };

    const top5ProjectsChartOptions = {
      indexAxis: 'y',
      layout: {
        padding: 15
      },
      plugins: {
        title: {
          display: true,
          color:'#666',
          text: "ادارات کل برتر برحسب درصد رشد در پیشرفت پروژه",
          font: {
            family: "IRANSansFaNum",
            size: 13,
            weight: 'bold'
          }
        },
        subtitle: {
          display: true,
          color:'#666',
          text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
          padding: {
            bottom: 10
          }
        },
        legend: {
          display: false
        },
        datalabels: {
          anchor: 'start',
          textAlign: "center",
          font:{
            size: 14
          },
          padding : {
            top: 5,
            right: 8,
            left: 8,
            bottom: 2
          },
          offset: 20,
          align: function (context) {
              if (context.dataset.data[context.dataIndex] == 0) {
                return "center";
              }
              return "end";
            },
          color: function (context) {
              if (context.dataset.data[context.dataIndex] == 0) {
                return "#000";
              }
              return "#fff";
          },
          backgroundColor: function (context) {
            if (context.dataset.data[context.dataIndex] == 0) {
              return null;
            }
            return context.dataset.backgroundColor[context.dataIndex];
          },
          formatter: function(value, context) {
            return value + '%';
          }
        },
      },
      scales: {
        y: {
          ticks: {
            color:'#666',
            font: {
              size: 12,
              weight: 'bold'
            }
          }
        },
        x: {
          grid: {
            display: false
          },
          ticks: {
            display: false
          }
        }
      }
    }


    $("#top_5_projects_chart").attr(
    "width",
    $("#top_5_projects_chart").closest(".chart-box").width()
    );
    $("#top_5_projects_chart").attr(
      "height",
      $("#top_5_projects_chart").closest(".chart-box").height()
    );

    const top5ProjectsChart = new Chart(
      document.getElementById("top_5_projects_chart").getContext("2d"),
      {
        type: 'bar',
        data: top5ProjectsChartData,
        plugins: [ChartDataLabels],
        options: top5ProjectsChartOptions
      }
    );
    


    const allProjectsByTypeData = jsonServer.data.contract_subs_group_by_items;
    const allProjectsByTypeCount = []
    const allProjectsByTypeLabel = []

    for (var i = 0; i < allProjectsByTypeData.length; i++) {
      allProjectsByTypeCount.push(allProjectsByTypeData[i].count_number);
      allProjectsByTypeLabel.push(allProjectsByTypeData[i].project_type_fa);
    }
    
    const allProjectsByTypeChartData = {
    labels: allProjectsByTypeLabel,
    datasets: [{
        label: '',
        data: allProjectsByTypeCount,
        backgroundColor: [
          '#43aa8b',
          '#db504a',
          '#f3722c',
          '#67bd50',
          '#277da1',
          '#577590',
        ],
      }]
    };

    var allProjectsByTypeChartRatio =
          (+$("#all_projects_by_type_chart").closest(".chart-box").width() + 2) / (+$("#all_projects_by_type_chart").closest(".chart-box").height() + 2);

    const allProjectsByTypeChartOptions = {
      aspectRatio: allProjectsByTypeChartRatio,
      layout: {
        padding: 15
      },
      plugins: {
        datalabels: {
          backgroundColor: '#00000066',
          textAlign: "center",
          font: {
            weight: 'bold',
            size: 14
          },
          borderRadius: 8,
          padding: {
            top: 5,
            right: 8,
            bottom: 2,
            left: 8,
          },
          color:'#fff',
          formatter: function(value, context) {
            return (+value).toLocaleString('en');
          }
        },
        title: {
          display: true,
          text: "پروژه ها به تفکیک ماهیت پروژه",
          font: {
            family: "IRANSansFaNum",
            size: 14,
            weight: 'bold'
          }
        },
        subtitle: {
          display: true,
          text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
          padding: {
            bottom: 10
          }
        },
        legend: {
          position: 'right',
          labels: {
            font: {
              family: "IRANSansFaNum",
              size: 13,
              weight: 'bold'
            }
          },
          labels: {
            usePointStyle: true,
            font: {
              weight: 'bold',
              size: 12
            }
          }
        }
      }
    }

    const allProjectsByTypeChart = new Chart(
    document.getElementById("all_projects_by_type_chart").getContext("2d"),
    {
      type: 'doughnut',
      data: allProjectsByTypeChartData,
      plugins: [ChartDataLabels],
      options: allProjectsByTypeChartOptions
    }
  );
  
})()

function initStyleMapFeatures() {
  let randomchoose = null;
  randomchoose = getForArrayFeatureColor(
    fillColorMap(iranArrayCount, diagramData)
  );
  let StyleMap = {
    fillColor: randomchoose.color,
    weight: 2,
    opacity: 1,
    color: "white",
    fillOpacity: 0.5,
  };
  if (randomchoose.num != -2) {
    if (iranArrayCount == 35) {
      iranArrayCount = 0;
    }
    iranArrayCount++;
  }
  return StyleMap;
}
function fillColorMap(featureRow, diagramData) {
  for (let i = 0; i < diagramData.length; i++) {
    if (i == featureRow) {
      return diagramData[i];
    }
  }
}
function getForArrayFeatureColor(arrayNum) {
  if (keepMapFeatureColor) {
    return {
      num: -1,
      color: keepMapFeatureColor,
    };
  } else {
    var colors = {};
      colors = {
        num: arrayNum,
        color: "#B2B1B9",
      };
    return colors;
  }
}
// yasi end map js 
//project map 
function initStyleMapFeaturesProject() {
  let randomchoose = null;
  randomchoose = getForArrayFeatureColorProject(
    fillColorMapProject(iranArrayCountProject, diagramDataProject)
  );
  let StyleMap = {
    fillColor: randomchoose.color,
    weight: 2,
    opacity: 1,
    color: "white",
    fillOpacity: 1,
  };
  if (randomchoose.num != -2) {
    if (iranArrayCountProject == 35) {
      iranArrayCountProject = 0;
    }
    iranArrayCountProject++;
  }
  return StyleMap;
}
function fillColorMapProject(featureRow, diagramDataProject) {
  for (let i = 0; i < diagramDataProject.length; i++) {
    if (i == featureRow) {
      return diagramDataProject[i];
    }
  }
}
function getForArrayFeatureColorProject(arrayNum) {
  if (keepMapFeatureColorProject) {
    return {
      num: -1,
      color: keepMapFeatureColorProject,
    };
  } else {
    var colors = {};
    var minOfData = 1;
    var maxOfData = Math.max(...diagramDataProject);
    var quarter = Math.round((maxOfData - minOfData) / 3);
    if (arrayNum == 0 || arrayNum == null) {
      colors = {
        num: arrayNum,
        color: "#e0e0e0",
      };
    } else if (arrayNum <= minOfData + quarter)
      colors = {
        num: arrayNum,
        color: "#f94144",
      };
    else if (arrayNum < maxOfData - quarter)
      colors = {
        num: arrayNum,
        color: "#f9c74f",
      };
    else
      colors = {
        num: arrayNum,
        color: "#43aa8b",
      };

    return colors;
  }
}

function showLegendOnMap(data) {
  var minNum;
  var maxNum;
  var quarter;
  var firstQuarter;
  var secondQuarter;
  $(".map-guid").empty();
  minNum = 1;
  maxNum = Math.max(...data);
  quarter = Math.round((maxNum - minNum) / 3);
  firstQuarter = minNum + quarter;
  secondQuarter = maxNum - quarter;
  $(".map-guid").append(`<p class="text-center pb-1">راهنمای نقشه</p>
    <p>
        <i class="fa fa-circle" aria-hidden="true" style="color: #e0e0e0;"></i>
        <span class="pr-1">
            <span>0</span>
        </span>
    </p>
    <p>
        <i class="fa fa-circle" aria-hidden="true" style="color: #f94144;"></i>
        <span class="pr-1">
            <span>${minNum}</span>
            <span>تا</span>
            <span>${firstQuarter}</span>
        </span>
    </p>
    <p>
        <i class="fa fa-circle" aria-hidden="true" style="color: #f9c74f;"></i>
        <span class="pr-1">
            <span>${firstQuarter}</span>
            <span>تا</span>
            <span>${secondQuarter}</span>
        </span>
    </p>
    <p>
        <i class="fa fa-circle" aria-hidden="true" style="color: #43aa8b;"></i>
        <span class="pr-1">
            <span>${secondQuarter}</span>
            <span>تا</span>
            <span>${maxNum}</span>
        </span>
    </p>`);
}