958 lines
30 KiB
JavaScript
958 lines
30 KiB
JavaScript
const MAP_ENDPOINT = "https://rmsmap.rmto.ir/141map/{z}/{x}/{y}.png";
|
||
var GRAB_ALL_DATA_API = "https://rms.rmto.ir/reports_summary";
|
||
const get_rahdari_projects_by_id = "https://rms.rmto.ir/rahdari_projects/project/";
|
||
let TAB_ID = 1
|
||
let isAnimating = false
|
||
var delayed;
|
||
|
||
let markers = []
|
||
var markersLayer = null
|
||
|
||
let projectsMap;
|
||
const bounds = [
|
||
[42.9130026312, 75.6166317076],
|
||
[20.5782370061, 35.5092252948],
|
||
];
|
||
const showbounds = [32.4279, 53.688];
|
||
const mapZoom = getWidth() < 508 ? 4 : 5;
|
||
|
||
let contract_subitem_projects;
|
||
let user_activity;
|
||
let gasht_rozane;
|
||
let top_provinces_according_to_number_of_complaints_handled;
|
||
let road_item;
|
||
let number_of_complaints_per_type;
|
||
let mehvar_statistics;
|
||
let safety_and_privacy;
|
||
|
||
function createColors(count) {
|
||
var point = 200 / (count - 1);
|
||
var step = 0;
|
||
var colors = [];
|
||
for (let i = 0; i < count; i++) {
|
||
var hsv = {
|
||
h: Math.floor(step),
|
||
s: 80,
|
||
v: 70,
|
||
};
|
||
colors[i] = Color(hsv).toCSS();
|
||
step += point;
|
||
}
|
||
return colors;
|
||
}
|
||
|
||
function makeIcon(iconSize, layer) {
|
||
return L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span style='width: " + iconSize + "px;height: " + iconSize + "px;' class='" + layer._icon.childNodes[0].classList.value + "'></span>",
|
||
iconSize: [0, 0],
|
||
});
|
||
}
|
||
|
||
var greenIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-green'></span>",
|
||
iconSize: [16, 16],
|
||
});
|
||
var redIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-red'></span>",
|
||
iconSize: [16, 16],
|
||
});
|
||
|
||
var orangeIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-orange'></span>",
|
||
iconSize: [16, 16],
|
||
});
|
||
|
||
var fakeIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-orange'></span>",
|
||
iconSize: [6, 6],
|
||
});
|
||
|
||
|
||
var brownIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-brown'></span>",
|
||
iconSize: [16, 16],
|
||
});
|
||
|
||
var yellowIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-yellow'></span>",
|
||
iconSize: [16, 16],
|
||
});
|
||
var blueIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-blue'></span>",
|
||
iconSize: [16, 16],
|
||
});
|
||
var stepOneIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-step-one'></span>",
|
||
iconSize: [16, 16],
|
||
});
|
||
var stepTwoIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-step-two'></span>",
|
||
iconSize: [16, 16],
|
||
});
|
||
var stepThreeIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-step-three'></span>",
|
||
iconSize: [16, 16],
|
||
});
|
||
|
||
function getWidth() {
|
||
return Math.max(
|
||
document.body.scrollWidth,
|
||
document.documentElement.scrollWidth,
|
||
document.body.offsetWidth,
|
||
document.documentElement.offsetWidth,
|
||
document.documentElement.clientWidth
|
||
);
|
||
};
|
||
|
||
const animateTabs = (old_tab, tab_id) => {
|
||
isAnimating = true
|
||
$(`.tab-box[data-tab-id='${old_tab}']`).fadeOut(100, () => {
|
||
$(`.tab-box[data-tab-id='${tab_id}']`).fadeIn(300, () => {
|
||
document.querySelector(`.tab-btn[data-tab-id='${tab_id}']`).scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
isAnimating = false
|
||
})
|
||
})
|
||
}
|
||
|
||
const gashtRozaneComponent = (data) =>
|
||
`<div class="content-row-colored-box rounded d-flex justify-content-between p-2 my-1">
|
||
<span>${data.province_fa}</span>
|
||
<span>${parseInt(data.distance).toLocaleString()}</span>
|
||
</div>`;
|
||
|
||
(() => {
|
||
$('[data-toggle="popover"]').popover({
|
||
trigger: 'focus'
|
||
})
|
||
|
||
Chart.defaults.font.family = "IRANSansFaNum";
|
||
|
||
projectsMap = L.map("projects_map", {
|
||
maxBounds: bounds,
|
||
minZoom: 5,
|
||
maxZoom: 16,
|
||
attributionControl: false
|
||
}).setView(showbounds, 5);
|
||
L.tileLayer(MAP_ENDPOINT, {}).addTo(projectsMap);
|
||
|
||
$("#data_now").text(moment().locale('fa').format('dddd DD MMMM YYYY'))
|
||
|
||
$('.tab-btn').removeClass('active')
|
||
$(`.tab-btn[data-tab-id='${TAB_ID}']`).addClass('active')
|
||
|
||
$(`.tab-box[data-tab-id='${TAB_ID}']`).show()
|
||
|
||
$.ajax({
|
||
url: GRAB_ALL_DATA_API,
|
||
type: "GET",
|
||
cache: false,
|
||
async: false,
|
||
contentType: false,
|
||
processData: false,
|
||
success: function (result) {
|
||
data = result.data;
|
||
contract_subitem_projects = data.find(({ report_name }) => report_name === 'contract_subitem_projects');
|
||
user_activity = data.find(({ report_name }) => report_name === 'user_activity');
|
||
road_item = data.find(({ report_name }) => report_name === 'road_item');
|
||
mehvar_statistics = data.find(({ report_name }) => report_name === 'mehvar_statistics');
|
||
safety_and_privacy = data.find(({ report_name }) => report_name === 'safety_and_privacy');
|
||
number_of_complaints_per_type = data.find(({ report_name }) => report_name === 'number_of_complaints_per_type');
|
||
gasht_rozane = data.find(({ report_name }) => report_name === 'gasht_rozane');
|
||
top_provinces_according_to_number_of_complaints_handled = data.find(({ report_name }) => report_name === 'top_provinces_according_to_number_of_complaints_handled');
|
||
receipt = data.find(({ report_name }) => report_name === 'receipt');
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا",
|
||
text: "مشکل در دریافت اطلاعات",
|
||
confirmButtonText: "بروزرسانی صفحه",
|
||
showLoaderOnConfirm: true,
|
||
preConfirm: () => {
|
||
location.reload(true);
|
||
},
|
||
});
|
||
},
|
||
});
|
||
// end grab data
|
||
|
||
|
||
for (const point of contract_subitem_projects.data.points) {
|
||
let icon;
|
||
|
||
switch (point.project_type_id) {
|
||
case 1:
|
||
icon = blueIcon;
|
||
break;
|
||
case 2:
|
||
icon = yellowIcon;
|
||
break;
|
||
case 3:
|
||
icon = greenIcon;
|
||
break;
|
||
case 4:
|
||
icon = redIcon;
|
||
break;
|
||
case 5:
|
||
icon = brownIcon;
|
||
break;
|
||
case 6:
|
||
icon = orangeIcon;
|
||
break;
|
||
}
|
||
let marker = new L.Marker([point.start_lat, point.start_lng], {
|
||
id: point,
|
||
icon: icon
|
||
}).on('click', () => {
|
||
window.open(get_rahdari_projects_by_id + point.id)
|
||
})
|
||
|
||
markers.push(marker);
|
||
}
|
||
markersLayer = new L.LayerGroup(markers);
|
||
projectsMap.addLayer(markersLayer);
|
||
projectsMap.on('zoomend', function () {
|
||
if (markersLayer === null) {
|
||
return 0;
|
||
}
|
||
let iconSize;
|
||
switch (projectsMap.getZoom()) {
|
||
case 5:
|
||
case 6:
|
||
case 7:
|
||
iconSize = 3;
|
||
break;
|
||
case 8:
|
||
iconSize = 4;
|
||
break;
|
||
case 9:
|
||
iconSize = 5;
|
||
break;
|
||
case 10:
|
||
iconSize = 6;
|
||
break;
|
||
case 11:
|
||
iconSize = 7;
|
||
break;
|
||
case 12:
|
||
iconSize = 7;
|
||
break;
|
||
case 13:
|
||
iconSize = 9;
|
||
break;
|
||
case 14:
|
||
case 15:
|
||
case 16:
|
||
case 17:
|
||
case 18:
|
||
iconSize = 10;
|
||
break;
|
||
}
|
||
|
||
markersLayer.eachLayer(function (layer) {
|
||
return layer.setIcon(makeIcon(iconSize, layer));
|
||
});
|
||
});
|
||
|
||
|
||
$(document).find('#user_activity_avarage').text(parseInt(user_activity.data[0].user_activity_avarage))
|
||
$(document).find('#user_count').text(parseInt(user_activity.data[0].user_count))
|
||
|
||
// gasht rozane
|
||
$(document).find('#gasht_rozane_box').empty()
|
||
gasht_rozane.data.map(item => {
|
||
const content = gashtRozaneComponent(item)
|
||
$(document).find('#gasht_rozane_box').append(content)
|
||
})
|
||
// end gasht rozane
|
||
|
||
|
||
// top_provinces_according_to_number_of_complaints_handled
|
||
const top_provinces_according_to_number_of_complaints_handled_Label = [];
|
||
const top_provinces_according_to_number_of_complaints_handled_Count = [];
|
||
for (let i = 0; i < top_provinces_according_to_number_of_complaints_handled.data.length; i++) {
|
||
top_provinces_according_to_number_of_complaints_handled_Count.push(top_provinces_according_to_number_of_complaints_handled.data[i].count_number);
|
||
top_provinces_according_to_number_of_complaints_handled_Label.push(top_provinces_according_to_number_of_complaints_handled.data[i].ProvinceName);
|
||
}
|
||
const top_provinces_according_to_number_of_complaints_handled_ChartData = {
|
||
labels: top_provinces_according_to_number_of_complaints_handled_Label,
|
||
datasets: [{
|
||
data: top_provinces_according_to_number_of_complaints_handled_Count,
|
||
backgroundColor: [
|
||
'#f3722c'
|
||
],
|
||
borderColor: '#f3722c',
|
||
borderWidth: 3,
|
||
}]
|
||
};
|
||
const top_provinces_according_to_number_of_complaints_handled_option = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: false,
|
||
},
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
}
|
||
|
||
const top_provinces_according_to_number_of_complaints_handled_chart = new Chart(
|
||
document.getElementById("top_provinces_according_to_number_of_complaints_handled").getContext("2d"),
|
||
{
|
||
type: 'line',
|
||
data: top_provinces_according_to_number_of_complaints_handled_ChartData,
|
||
options: top_provinces_according_to_number_of_complaints_handled_option,
|
||
}
|
||
);
|
||
// end top_provinces_according_to_number_of_complaints_handled
|
||
|
||
// status_sperate
|
||
const status_sperate_Label = [];
|
||
const status_sperate_Count = [];
|
||
for (let i = 0; i < contract_subitem_projects.data.status_sperate.data.length; i++) {
|
||
status_sperate_Count.push(contract_subitem_projects.data.status_sperate.data[i]);
|
||
status_sperate_Label.push(contract_subitem_projects.data.status_sperate.label[i]);
|
||
}
|
||
const status_sperate_ChartData = {
|
||
labels: status_sperate_Label,
|
||
datasets: [{
|
||
data: status_sperate_Count,
|
||
backgroundColor: [
|
||
'#f3722c',
|
||
'#f8961e',
|
||
'#577590',
|
||
'#43aa8b'
|
||
],
|
||
}]
|
||
};
|
||
const status_sperate_option = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
animation: {
|
||
onComplete: () => {
|
||
delayed = true;
|
||
},
|
||
delay: (context) => {
|
||
let delay = 0;
|
||
if (context.type === 'data' && context.mode === 'default' && !delayed) {
|
||
delay = context.dataIndex * 300 + context.datasetIndex * 100;
|
||
}
|
||
return delay;
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
position: 'top',
|
||
text: "پروژه ها به تفکیک وضعیت",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
legend: {
|
||
display: true,
|
||
position: "left",
|
||
rtl: true,
|
||
labels: {
|
||
boxWidth: 13,
|
||
fontSize: 16,
|
||
fontStyle: "bold",
|
||
fontColor: "#000",
|
||
},
|
||
},
|
||
},
|
||
}
|
||
|
||
const status_sperate_chart = new Chart(
|
||
document.getElementById("project_status_sperate").getContext("2d"),
|
||
{
|
||
type: 'doughnut',
|
||
data: status_sperate_ChartData,
|
||
options: status_sperate_option,
|
||
}
|
||
);
|
||
// end status_sperate
|
||
|
||
// type_sperate
|
||
const type_sperate_Label = [];
|
||
const type_sperate_Count = [];
|
||
for (let i = 0; i < contract_subitem_projects.data.type_sperate.data.length; i++) {
|
||
type_sperate_Count.push(contract_subitem_projects.data.type_sperate.data[i]);
|
||
type_sperate_Label.push(contract_subitem_projects.data.type_sperate.label[i]);
|
||
}
|
||
const type_sperate_ChartData = {
|
||
labels: type_sperate_Label,
|
||
datasets: [{
|
||
data: type_sperate_Count,
|
||
backgroundColor: [
|
||
'#277da1',
|
||
'#43aa8b',
|
||
'#577590',
|
||
'#f8961e',
|
||
'#f3722c',
|
||
"#dd2c2c"
|
||
],
|
||
}]
|
||
};
|
||
const type_sperate_option = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
animation: {
|
||
onComplete: () => {
|
||
delayed = true;
|
||
},
|
||
delay: (context) => {
|
||
let delay = 0;
|
||
if (context.type === 'data' && context.mode === 'default' && !delayed) {
|
||
delay = context.dataIndex * 300 + context.datasetIndex * 100;
|
||
}
|
||
return delay;
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
position: 'top',
|
||
text: "پروژه ها به تفکیک ماهیت",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
legend: {
|
||
display: true,
|
||
position: "left",
|
||
rtl: true,
|
||
labels: {
|
||
boxWidth: 13,
|
||
fontSize: 16,
|
||
fontStyle: "bold",
|
||
fontColor: "#000",
|
||
},
|
||
},
|
||
},
|
||
}
|
||
|
||
const type_sperate_chart = new Chart(
|
||
document.getElementById("project_type_sperate").getContext("2d"),
|
||
{
|
||
type: 'pie',
|
||
data: type_sperate_ChartData,
|
||
options: type_sperate_option,
|
||
}
|
||
);
|
||
// end type_sperate
|
||
|
||
// road_item
|
||
const road_item_ChartData = {
|
||
labels: road_item.data.labels,
|
||
datasets: [{
|
||
data: road_item.data.datasets[0].data,
|
||
backgroundColor: createColors(road_item.data.datasets[0].data.length).reverse(),
|
||
borderRadius: 4
|
||
}]
|
||
};
|
||
const road_item_option = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: false,
|
||
},
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
}
|
||
|
||
const road_item_chart = new Chart(
|
||
document.getElementById("road_item").getContext("2d"),
|
||
{
|
||
type: 'bar',
|
||
data: road_item_ChartData,
|
||
options: road_item_option,
|
||
}
|
||
);
|
||
// end road_item
|
||
|
||
// number_of_complaints_per_type
|
||
const number_of_complaints_per_type_Label = [];
|
||
const number_of_complaints_per_type_Count_processed = [];
|
||
const number_of_complaints_per_type_Count_reached = [];
|
||
for (let i = 0; i < number_of_complaints_per_type.data.labels.length; i++) {
|
||
number_of_complaints_per_type_Count_processed.push(number_of_complaints_per_type.data.datasets[0].data[i]);
|
||
number_of_complaints_per_type_Count_reached.push(number_of_complaints_per_type.data.datasets[1].data[i]);
|
||
if (screen.width < 1000 && screen.width >= 490) {
|
||
number_of_complaints_per_type_Label.push(number_of_complaints_per_type.data.labels[i].substring(0, 14) + "...");
|
||
} else if (screen.width < 490) {
|
||
number_of_complaints_per_type_Label.push("");
|
||
}
|
||
else {
|
||
number_of_complaints_per_type_Label.push(number_of_complaints_per_type.data.labels[i]);
|
||
}
|
||
}
|
||
const number_of_complaints_per_type_ChartData = {
|
||
labels: number_of_complaints_per_type_Label,
|
||
datasets: [
|
||
{
|
||
label: number_of_complaints_per_type.data.datasets[0].label,
|
||
backgroundColor: "#277da1",
|
||
data: number_of_complaints_per_type_Count_processed
|
||
},
|
||
{
|
||
label: number_of_complaints_per_type.data.datasets[1].label,
|
||
backgroundColor: "#f3722c",
|
||
data: number_of_complaints_per_type_Count_reached
|
||
}
|
||
]
|
||
};
|
||
const number_of_complaints_per_type_option = {
|
||
responsive: true,
|
||
maintainAspectRatio: true,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
animation: {
|
||
onComplete: () => {
|
||
delayed = true;
|
||
},
|
||
delay: (context) => {
|
||
let delay = 0;
|
||
if (context.type === 'data' && context.mode === 'default' && !delayed) {
|
||
delay = context.dataIndex * 300 + context.datasetIndex * 100;
|
||
}
|
||
return delay;
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: false,
|
||
},
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
}
|
||
|
||
const number_of_complaints_per_type_chart = new Chart(
|
||
document.getElementById("number_of_complaints_per_type").getContext("2d"),
|
||
{
|
||
type: 'bar',
|
||
data: number_of_complaints_per_type_ChartData,
|
||
options: number_of_complaints_per_type_option,
|
||
}
|
||
);
|
||
// end number_of_complaints_per_type
|
||
|
||
// mehvar_statistics_pie length & cnt
|
||
const mehvar_statistics_pie_Label_length = [];
|
||
const mehvar_statistics_pie_Count_length = [];
|
||
const mehvar_statistics_pie_Count_cnt = [];
|
||
for (let i = 0; i < mehvar_statistics.data.charts.pies.length; i++) {
|
||
mehvar_statistics_pie_Count_length.push(mehvar_statistics.data.charts.pies[i].lenght);
|
||
mehvar_statistics_pie_Count_cnt.push(mehvar_statistics.data.charts.pies[i].cnt);
|
||
mehvar_statistics_pie_Label_length.push(mehvar_statistics.data.charts.pies[i].blockage_cause_fa);
|
||
}
|
||
const mehvar_statistics_pie_ChartData_length = {
|
||
labels: mehvar_statistics_pie_Label_length,
|
||
datasets: [{
|
||
data: mehvar_statistics_pie_Count_length,
|
||
backgroundColor: [
|
||
'#277da1',
|
||
'#43aa8b',
|
||
'#577590',
|
||
'#f8961e',
|
||
'#f3722c'
|
||
],
|
||
}]
|
||
};
|
||
const mehvar_statistics_pie_ChartData_cnt = {
|
||
labels: mehvar_statistics_pie_Label_length,
|
||
datasets: [{
|
||
data: mehvar_statistics_pie_Count_cnt,
|
||
backgroundColor: [
|
||
'#277da1',
|
||
'#43aa8b',
|
||
'#577590',
|
||
'#f8961e',
|
||
'#f3722c'
|
||
],
|
||
}]
|
||
};
|
||
const mehvar_statistics_pie_option_length = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
animation: {
|
||
onComplete: () => {
|
||
delayed = true;
|
||
},
|
||
delay: (context) => {
|
||
let delay = 0;
|
||
if (context.type === 'data' && context.mode === 'default' && !delayed) {
|
||
delay = context.dataIndex * 300 + context.datasetIndex * 100;
|
||
}
|
||
return delay;
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
position: 'top',
|
||
text: "طول محور های آسیب دیده",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
legend: {
|
||
display: true,
|
||
position: "left",
|
||
rtl: true,
|
||
labels: {
|
||
boxWidth: 13,
|
||
fontSize: 16,
|
||
fontStyle: "bold",
|
||
fontColor: "#000",
|
||
},
|
||
},
|
||
},
|
||
}
|
||
const mehvar_statistics_pie_option_cnt = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
animation: {
|
||
onComplete: () => {
|
||
delayed = true;
|
||
},
|
||
delay: (context) => {
|
||
let delay = 0;
|
||
if (context.type === 'data' && context.mode === 'default' && !delayed) {
|
||
delay = context.dataIndex * 300 + context.datasetIndex * 100;
|
||
}
|
||
return delay;
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
position: 'top',
|
||
text: "تعداد محور های آسیب دیده",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
legend: {
|
||
display: true,
|
||
position: "left",
|
||
rtl: true,
|
||
labels: {
|
||
boxWidth: 13,
|
||
fontSize: 16,
|
||
fontStyle: "bold",
|
||
fontColor: "#000",
|
||
},
|
||
},
|
||
},
|
||
}
|
||
const mehvar_statistics_pie_chart_length = new Chart(
|
||
document.getElementById("mehvar_statistics_pie_length").getContext("2d"),
|
||
{
|
||
type: 'doughnut',
|
||
data: mehvar_statistics_pie_ChartData_length,
|
||
options: mehvar_statistics_pie_option_length,
|
||
}
|
||
);
|
||
const mehvar_statistics_pie_chart_cnt = new Chart(
|
||
document.getElementById("mehvar_statistics_pie_cnt").getContext("2d"),
|
||
{
|
||
type: 'pie',
|
||
data: mehvar_statistics_pie_ChartData_cnt,
|
||
options: mehvar_statistics_pie_option_cnt,
|
||
}
|
||
);
|
||
// end mehvar_statistics_pie length & cnt
|
||
|
||
// road geometry acc contribution
|
||
const mehvar_statistics_stack_data = mehvar_statistics.data.charts.stack;
|
||
const mylabels = []
|
||
const mydatasets = []
|
||
|
||
const colors = [
|
||
'#277da1',
|
||
'#43aa8b',
|
||
'#577590',
|
||
'#f8961e',
|
||
'#f3722c'
|
||
]
|
||
let cntarr = {}
|
||
let lengtharr = {}
|
||
|
||
for (const [index, mevar_stack] of mehvar_statistics_stack_data.entries()) {
|
||
|
||
for (const item of mevar_stack.data) {
|
||
if (cntarr[item.blockage_cause_fa] == undefined) cntarr[item.blockage_cause_fa] = []
|
||
cntarr[item.blockage_cause_fa][index] = item.cnt
|
||
|
||
if (lengtharr[item.blockage_cause_fa] == undefined) lengtharr[item.blockage_cause_fa] = []
|
||
lengtharr[item.blockage_cause_fa][index] = item.length
|
||
}
|
||
|
||
mylabels.push(mevar_stack.axis_type_fa)
|
||
}
|
||
|
||
let indexColor = 0
|
||
for (const [key, item] of Object.entries(cntarr)) {
|
||
mydatasets.push(
|
||
{
|
||
label: key,
|
||
data: item,
|
||
stack: 0,
|
||
backgroundColor: colors[indexColor]
|
||
}
|
||
)
|
||
indexColor++
|
||
}
|
||
|
||
indexColor = 0
|
||
for (const [key, item] of Object.entries(lengtharr)) {
|
||
mydatasets.push(
|
||
{
|
||
label: key,
|
||
data: item,
|
||
stack: 1,
|
||
backgroundColor: colors[indexColor]
|
||
}
|
||
)
|
||
indexColor++
|
||
}
|
||
|
||
const mehvar_statistics_stack_ChartData = {
|
||
labels: mylabels,
|
||
datasets: mydatasets,
|
||
};
|
||
const mehvar_statistics_stack_option = {
|
||
responsive: true,
|
||
maintainAspectRatio: true,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
animation: {
|
||
onComplete: () => {
|
||
delayed = true;
|
||
},
|
||
delay: (context) => {
|
||
let delay = 0;
|
||
if (context.type === 'data' && context.mode === 'default' && !delayed) {
|
||
delay = context.dataIndex * 300 + context.datasetIndex * 100;
|
||
}
|
||
return delay;
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
position: 'top',
|
||
text: "اطلاعات محور های آسیب دیده (طول/تعداد)",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
scales: {
|
||
x: {
|
||
stacked: true,
|
||
},
|
||
y: {
|
||
stacked: true
|
||
}
|
||
},
|
||
}
|
||
const mehvar_statistics_stack_Chart = new Chart(
|
||
document.getElementById("mehvar_statistics_stack").getContext("2d"),
|
||
{
|
||
type: 'bar',
|
||
data: mehvar_statistics_stack_ChartData,
|
||
options: mehvar_statistics_stack_option,
|
||
}
|
||
);
|
||
// end road geometry acc contribution
|
||
|
||
// safety and privacy
|
||
const safety_and_privacy_ChartData = {
|
||
labels: safety_and_privacy.data.label,
|
||
datasets: [
|
||
{
|
||
label: 'شناسایی',
|
||
data: safety_and_privacy.data.data[0],
|
||
backgroundColor: '#277da1',
|
||
borderRadius: 8
|
||
},
|
||
{
|
||
label: 'اقدام',
|
||
data: safety_and_privacy.data.data[1],
|
||
backgroundColor: '#43aa8b',
|
||
borderRadius: 8
|
||
},
|
||
{
|
||
label: 'برخورد',
|
||
data: safety_and_privacy.data.data[2],
|
||
backgroundColor: '#f8961e',
|
||
borderRadius: 8
|
||
},
|
||
],
|
||
};
|
||
const safety_and_privacy_option = {
|
||
indexAxis: 'y',
|
||
responsive: true,
|
||
maintainAspectRatio: true,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
position: 'top',
|
||
text: "تعداد اقدامات",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
legend: {
|
||
legend: {
|
||
display: true,
|
||
position: "top",
|
||
rtl: true,
|
||
labels: {
|
||
boxWidth: 13,
|
||
fontSize: 16,
|
||
fontStyle: "bold",
|
||
fontColor: "#000",
|
||
},
|
||
},
|
||
}
|
||
},
|
||
scales: {
|
||
x: {
|
||
stacked: true,
|
||
},
|
||
y: {
|
||
stacked: true
|
||
}
|
||
},
|
||
}
|
||
const safety_and_privacy_Chart = new Chart(
|
||
document.getElementById("safety_and_privacy").getContext("2d"),
|
||
{
|
||
type: 'bar',
|
||
data: safety_and_privacy_ChartData,
|
||
options: safety_and_privacy_option,
|
||
}
|
||
);
|
||
// end safety and privacy
|
||
|
||
// receipt
|
||
const receipt_Label = [];
|
||
const receipt_Count = [];
|
||
for (let i = 0; i < receipt.data.chart.length; i++) {
|
||
receipt_Count.push(receipt.data.chart[i].sum);
|
||
receipt_Label.push(receipt.data.chart[i].province_fa);
|
||
}
|
||
const receipt_ChartData = {
|
||
labels: receipt_Label,
|
||
datasets: [{
|
||
data: receipt_Count,
|
||
backgroundColor: createColors(receipt_Count.length).reverse(),
|
||
borderRadius: 4
|
||
}]
|
||
};
|
||
const receipt_option = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: false,
|
||
},
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
}
|
||
|
||
const receipt_chart = new Chart(
|
||
document.getElementById("receipt").getContext("2d"),
|
||
{
|
||
type: 'bar',
|
||
data: receipt_ChartData,
|
||
options: receipt_option,
|
||
}
|
||
);
|
||
|
||
$(document).find('#total_damage').text(parseFloat(receipt.data.sum.sum).toLocaleString("en") + ' ریال')
|
||
|
||
// document.getElementById("total_damage").getContext()
|
||
|
||
// end receipt
|
||
})()
|
||
|
||
$(document).on('click', '.tab-btn', function () {
|
||
if (isAnimating) return
|
||
|
||
const old_tab = TAB_ID
|
||
TAB_ID = $(this).data('tabId')
|
||
|
||
if (old_tab == TAB_ID) return
|
||
|
||
$('.tab-btn').removeClass('active')
|
||
$(`.tab-btn[data-tab-id='${TAB_ID}']`).addClass('active')
|
||
|
||
animateTabs(old_tab, TAB_ID)
|
||
}) |