backend/public/dist/js/_posters.js

var map;
var bounds = [
  [42.9130026312, 75.6166317076],
  [20.5782370061, 30.5092252948],
];
var showbounds = [32.4279, 53.688];

MAP_ENDPOINT = "https://testmap.141.ir";

var iranGeoJSON = JSON.parse(PROVICES_GEOJSON);
var fullCityGeoJSON = JSON.parse(CITIES_GEOJSON);
var iranMapGeo;
var keepMapFeatureColor = null;
var iranArrayCount = 0;
var diagramData = [];
var eachfeature = [];
var diagramLabel = [];
var provinceLatlng = [];

(() => {
  $("#from_date").text(
    moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")
  );
  $("#to_date").text(moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD"));

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

  diagramData = jsonServer.data.geojson_chart.data;
  diagramLabel = jsonServer.data.geojson_chart.label;
  provinceLatlng = jsonServer.data.provinces;
  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: "#003049",
        borderColor: "#003049",
        fill: false,
        data: quantitativeActivityCount,
        id: "amount",
        label: "ساعت فعالیت در سامانه",
        yAxisID: "right",
        datalabels: {
          align: "end",
          anchor: "end",
        },
      },
      {
        backgroundColor: "#d62828",
        borderColor: "#d62828",
        fill: false,
        data: hourly_activity_chartCount,
        id: "amount",
        label: "تعداد فعالیت در سامانه",
        yAxisID: "left",
        datalabels: {
          align: "start",
          anchor: "start",
        },
      },
    ],
    labels: activityLable,
  };

  $("#activity_chart").attr(
    "width",
    $("#activity_chart").closest(".chart-bar-data").width()
  );
  $("#activity_chart").attr(
    "height",
    $("#activity_chart").closest(".chart-bar-data").height()
  );

  const activityChart = new Chart(
    document.getElementById("activity_chart").getContext("2d"),
    {
      type: "line",
      data: ActivityChartData,
      options: {
        elements: {
          rectangle: {
            borderWidth: 2,
          },
        },
        layout: {
          padding: 0,
        },
        legend: {
          display: true,
          labels: {
            boxWidth: 16,
          },
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
              },
              scaleLabel: {
                display: true,
                labelString: "روز فعالیت",
              },
              stacked: false,
              ticks: {
                autoSkip: true,
                beginAtZero: true,
              },
            },
          ],
          yAxes: [
            {
              scaleLabel: {
                display: true,
                labelString: "ساعت فعالیت در سامانه",
              },
              id: "left",
              stacked: false,
              ticks: {
                beginAtZero: true,
              },
            },
            {
              scaleLabel: {
                display: true,
                labelString: "تعداد فعالیت در سامانه",
              },
              id: "right",
              position: "right",
              stacked: false,
              ticks: {
                beginAtZero: true,
              },
            },
          ],
        },
        title: {
          display: false,
        },
        tooltips: {
          intersect: false,
          mode: "index",
          position: "nearest",
          callbacks: {},
        },
        plugins: {
          datalabels: {
            display: true,
            backgroundColor: function (context) {
              return context.dataset.backgroundColor;
            },
            display: true,
            formatter: function (value, ctx) {
              return value;
            },
            borderRadius: 4,
            color: "white",
            font: {
              weight: "bold",
            },
            padding: 6,
          },
        },
      },
    }
  );

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

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

  const roadItemsChartData = {
    datasets: [
      {
        backgroundColor: "#003049",
        borderColor: "#003049",
        fill: false,
        data: roadItemsCount,
        id: "amount",
        datalabels: {
          align: "start",
          anchor: "start",
        },
      },
    ],
    labels: roadItemsLable,
  };

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

  const roadItemsChart = new Chart(
    document.getElementById("road_items_chart").getContext("2d"),
    {
      type: "bar",
      data: roadItemsChartData,
      options: {
        legend: {
          display: false,
        },
      },
    }
  );

  const fastReactCount = [];
  const fastReactLable = [];
  const fastReactData = jsonServer.data.fast_react_chart;

  for (var i = 0; i < fastReactData.length; i++) {
    fastReactCount.push(fastReactData[i].count_number);
    switch (fastReactData[i].rms_status) {
      case 0:
        fastReactLable.push("بررسی نشده");
        break;
      case 1:
        fastReactLable.push("انجام شده");
        break;
      case 2:
        fastReactLable.push("انجام نشده");
        break;
    }
  }

  const fastReactChartData = {
    datasets: [
      {
        backgroundColor: ["#fb5607", "#8338ec", "#3a86ff"],
        data: fastReactCount,
        datalabels: {
          align: "start",
          anchor: "start",
        },
      },
    ],
    labels: fastReactLable,
  };

  $("#fast_react_chart").attr(
    "width",
    $("#fast_react_chart").closest(".chart-bar-data").width()
  );
  $("#fast_react_chart").attr(
    "height",
    $("#fast_react_chart").closest(".chart-bar-data").height()
  );

  const fastReactChart = new Chart(
    document.getElementById("fast_react_chart").getContext("2d"),
    {
      type: "pie",
      data: fastReactChartData,
      options: {
        legend: {
          display: true,
        },
      },
    }
  );

  map = L.map("map", {
    maxBounds: bounds,
    zoomControl: false,
    scrollWheelZoom: false,
    attributionControl: false,
    dragging: false,
  }).setView(showbounds, 6);
  for (var i = 0; i < provinceLatlng.length; i++) {
    var textLatLng = [
      provinceLatlng[i].poster_lat,
      provinceLatlng[i].poster_long,
    ];
    var myTextLabel = L.marker(textLatLng, {
      icon: L.divIcon({
        className: "text-labels-map", // Set class for CSS styling
        html: `${diagramLabel[i]}`,
      }),
      zIndexOffset: 1000, // Make appear above other map features
    }).addTo(map);
  }
  keepMapFeatureColor = null;
  iranArrayCount = 0;
  iranMapGeo = L.geoJSON(iranGeoJSON, {
    style: initStyleMapFeatures,
  });
  iranMapGeo.addTo(map);

})();
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 = {};
    var minOfData = Math.min(...diagramData);
    var maxOfData = Math.max(...diagramData);
    var quarter = Math.round((maxOfData - minOfData) / 3);
    if (arrayNum == null) {
      colors = {
        num: arrayNum,
        color: "#B2B1B9",
      };
    } else if (arrayNum <= minOfData + quarter)
      colors = {
        num: arrayNum,
        color: "#FF0000",
      };
    else if (arrayNum < maxOfData - quarter)
      colors = {
        num: arrayNum,
        color: "#FFCC00",
      };
    else
      colors = {
        num: arrayNum,
        color: "#13BB51",
      };

    return colors;
  }
}

$('#canvas').on('click', function(){
  html2canvas(document.getElementById('container_page')).then(function(canvas) {
    var link = document.createElement('a');
    link.download = 'filename.png';
    link.href = canvas.toDataURL()
    link.click();
});
})