812 lines
29 KiB
JavaScript
812 lines
29 KiB
JavaScript
// map main variables
|
||
var bounds = [
|
||
[42.9130026312, 75.6166317076],
|
||
[20.5782370061, 30.5092252948],
|
||
];
|
||
var showbounds = [32.4279, 53.688];
|
||
var iranGeoJSON = JSON.parse(PROVICES_GEOJSON);
|
||
// end map main variables
|
||
|
||
// DA map variables
|
||
var dailyAccidentMap;
|
||
var iranArrayCountDailyAccident = 0;
|
||
var diagramDataDailyAccident = [];
|
||
var keepMapFeatureColorDailyAccident = null;
|
||
// end DA map variables
|
||
|
||
// font of charts
|
||
Chart.defaults.font.family = 'IRANSansFaNum';
|
||
Chart.defaults.font.size = 13;
|
||
// end font of charts
|
||
console.log(jsonServer)
|
||
$(function() {
|
||
const params = new Proxy(new URLSearchParams(window.location.search), {
|
||
get: (searchParams, prop) => searchParams.get(prop),
|
||
});
|
||
let value_fromDate = params.from_date;
|
||
let value_toDate = params.to_date;
|
||
if (value_fromDate != null || value_toDate != null) {
|
||
value_fromDate = moment(value_fromDate).format("jYYYY/jMM/jDD");
|
||
value_toDate = moment(value_toDate).format("jYYYY/jMM/jDD");
|
||
$("#from_date").text(value_fromDate);
|
||
$("#to_date").text(value_toDate);
|
||
}else {
|
||
$(".date-box").empty();
|
||
}
|
||
$("#death_counter").prop('Counter', 0).animate({
|
||
Counter: jsonServer.payamad_tasadof[0].number_of_died
|
||
}, {
|
||
duration: 3500,
|
||
easing: 'swing',
|
||
step: function(now) {
|
||
$("#death_counter").text(Math.ceil(now));
|
||
}
|
||
});
|
||
$("#injuries_counter").prop('Counter', 0).animate({
|
||
Counter: jsonServer.payamad_tasadof[0].number_of_injured
|
||
}, {
|
||
duration: 3500,
|
||
easing: 'swing',
|
||
step: function(now) {
|
||
$("#injuries_counter").text(Math.ceil(now));
|
||
}
|
||
});
|
||
$("#accidents_counter").prop('Counter', 0).animate({
|
||
Counter: jsonServer.payamad_tasadof[0].number_of_accident
|
||
}, {
|
||
duration: 3500,
|
||
easing: 'swing',
|
||
step: function(now) {
|
||
$("#accidents_counter").text(Math.ceil(now));
|
||
}
|
||
});
|
||
});
|
||
|
||
// map choropleth
|
||
if (jsonServer.accident_report.schematic_map!=undefined){
|
||
const diagramDataDailyAccidentValue = jsonServer.accident_report.schematic_map;
|
||
|
||
for (let i = 0; i < diagramDataDailyAccidentValue.length; i++) {
|
||
diagramDataDailyAccident.push(diagramDataDailyAccidentValue[i].cnt);
|
||
}
|
||
|
||
showLegendOnMap(diagramDataDailyAccident);
|
||
|
||
dailyAccidentMap = L.map("daily_accident_map", {
|
||
maxBounds: bounds,
|
||
zoomControl: false,
|
||
scrollWheelZoom: false,
|
||
attributionControl: false,
|
||
dragging: false,
|
||
}).setView(showbounds, 5);
|
||
|
||
keepMapFeatureColorDailyAccident = null;
|
||
iranArrayCountDailyAccident = 0;
|
||
|
||
iranMapGeoDailyAccident = L.geoJSON(iranGeoJSON, {
|
||
style: initStyleMapFeaturesDailyAccident,
|
||
});
|
||
|
||
iranMapGeoDailyAccident.addTo(dailyAccidentMap);
|
||
|
||
function initStyleMapFeaturesDailyAccident() {
|
||
let randomchoose = null;
|
||
randomchoose = getForArrayFeatureColorDailyAccident(
|
||
fillColorMapDailyAccident(iranArrayCountDailyAccident, diagramDataDailyAccident)
|
||
);
|
||
let StyleMap = {
|
||
fillColor: randomchoose.color,
|
||
weight: 2,
|
||
opacity: 1,
|
||
color: "white",
|
||
fillOpacity: 1,
|
||
};
|
||
if (randomchoose.num != -2) {
|
||
if (iranArrayCountDailyAccident == 35) {
|
||
iranArrayCountDailyAccident = 0;
|
||
}
|
||
iranArrayCountDailyAccident++;
|
||
}
|
||
return StyleMap;
|
||
}
|
||
|
||
function fillColorMapDailyAccident(featureRow, diagramDataDailyAccident) {
|
||
for (let i = 0; i < diagramDataDailyAccident.length; i++) {
|
||
if (i == featureRow) {
|
||
return diagramDataDailyAccident[i];
|
||
}
|
||
}
|
||
}
|
||
|
||
function getForArrayFeatureColorDailyAccident(arrayNum) {
|
||
if (keepMapFeatureColorDailyAccident) {
|
||
return {
|
||
num: -1,
|
||
color: keepMapFeatureColorDailyAccident,
|
||
};
|
||
} else {
|
||
var colors = {};
|
||
const quarterArr = diagramDataDailyAccident.filter(a => a != null)
|
||
var minOfData = Math.min(...quarterArr);
|
||
var maxOfData = Math.max(...quarterArr);
|
||
var quarter = Math.round((maxOfData - minOfData) / 3);
|
||
if(arrayNum == 0 || arrayNum == null) {
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#e1e1e1",
|
||
};
|
||
} else if (minOfData == maxOfData) {
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#f94144",
|
||
};
|
||
} else if (arrayNum <= minOfData + quarter) {
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#43aa8b",
|
||
};
|
||
} else if (arrayNum < maxOfData - quarter) {
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#f9c74f",
|
||
};
|
||
} else
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#f94144",
|
||
};
|
||
|
||
return colors;
|
||
}
|
||
}
|
||
|
||
function showLegendOnMap(data) {
|
||
var minNum;
|
||
var maxNum;
|
||
var quarter;
|
||
var firstQuarter;
|
||
var secondQuarter;
|
||
$(".map-guid").empty();
|
||
const quarterArr = data.filter(a => a != null)
|
||
minNum = Math.min(...quarterArr);
|
||
maxNum = Math.max(...quarterArr);
|
||
quarter = (maxNum - minNum) / 3;
|
||
firstQuarter = minNum + quarter;
|
||
secondQuarter = maxNum - quarter;
|
||
if(maxNum == minNum) {
|
||
$(".map-guid").append(`<p class="text-center pb-1">راهنمای نقشه</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #f94144;"></i>
|
||
<span class="pr-1">
|
||
<span>${maxNum}</span>
|
||
</span>
|
||
</p>`);
|
||
} else {
|
||
$(".map-guid").append(`<p class="text-center pb-1">راهنمای نقشه</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #43aa8b;"></i>
|
||
<span class="pr-1">
|
||
<span>${minNum}</span>
|
||
<span>تا</span>
|
||
<span>${Math.round(firstQuarter)}</span>
|
||
</span>
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #f9c74f;"></i>
|
||
<span class="pr-1">
|
||
<span>${Math.round(firstQuarter)}</span>
|
||
<span>تا</span>
|
||
<span>${Math.round(secondQuarter)}</span>
|
||
</span>
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #f94144;"></i>
|
||
<span class="pr-1">
|
||
<span>${Math.round(secondQuarter)}</span>
|
||
<span>تا</span>
|
||
<span>${maxNum}</span>
|
||
</span>
|
||
</p>`);
|
||
|
||
}
|
||
}
|
||
}else {
|
||
$(".map-data-box-daily-accident").remove();
|
||
$(".acc-report-pie-chart-box").removeClass("col-4").addClass("col-6");
|
||
$(".acc-count-pipe-chart-box").removeClass("col-4").addClass("col-6");
|
||
$(".data-geo-text").text("در سطح استان");
|
||
}
|
||
|
||
// end map choropleth
|
||
|
||
// accident count bar chart
|
||
const acc_bar_chart_data = jsonServer.accident_report.bar_chart;
|
||
const accBarChartCount = [];
|
||
const accBarChartLabel = [];
|
||
for (var i = 0; i < acc_bar_chart_data.length; i++) {
|
||
accBarChartCount.push(acc_bar_chart_data[i].cnt);
|
||
accBarChartLabel.push(acc_bar_chart_data[i].way_geometri_fa);
|
||
}
|
||
$("#acc_accident_count_pipe_chart").attr("width", $("#acc_accident_count_pipe_chart").closest(".chart-box").width());
|
||
$("#acc_accident_count_pipe_chart").attr("height", $("#acc_accident_count_pipe_chart").closest(".chart-box").height());
|
||
const accidentcountChart = new Chart(document.getElementById('acc_accident_count_pipe_chart').getContext('2d'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: accBarChartLabel,
|
||
datasets: [{
|
||
label: "تعداد تصادفات بر اساس هندسه راه",
|
||
data: accBarChartCount,
|
||
backgroundColor: "#015688",
|
||
}, ]
|
||
},
|
||
options: {
|
||
title: {
|
||
display: true,
|
||
text: 'Chart.js Bar Chart'
|
||
},
|
||
indexAxis: 'y',
|
||
scales: {
|
||
y: {
|
||
stacked: true
|
||
},
|
||
x: {
|
||
stacked: true,
|
||
}
|
||
}
|
||
}
|
||
});
|
||
// end accident count bar chart
|
||
|
||
// accident per province bar chart
|
||
|
||
|
||
|
||
if (jsonServer.accident_report.schematic_map!=undefined){
|
||
const acc_bar_chart_data_per_pro = jsonServer.number_of_accidents_per_province;
|
||
const accBarChartPerPro = [];
|
||
const accBarChartPerProLabel = [];
|
||
for (var i = 0; i < acc_bar_chart_data_per_pro.length; i++) {
|
||
accBarChartPerPro.push(acc_bar_chart_data_per_pro[i].cnt);
|
||
accBarChartPerProLabel.push(acc_bar_chart_data_per_pro[i].province_fa);
|
||
}
|
||
$("#acc_accident_per_province_pipe_chart").attr("width", $("#acc_accident_per_province_pipe_chart").closest(".chart-box").width());
|
||
$("#acc_accident_per_province_pipe_chart").attr("height", $("#acc_accident_per_province_pipe_chart").closest(".chart-box").height());
|
||
const accidentPerProChart = new Chart(document.getElementById('acc_accident_per_province_pipe_chart').getContext('2d'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: accBarChartPerProLabel,
|
||
datasets: [{
|
||
label: "تعداد تصادفات بر حسب استان ها",
|
||
data: accBarChartPerPro,
|
||
backgroundColor: "#015688",
|
||
}, ]
|
||
},
|
||
options: {
|
||
title: {
|
||
display: true,
|
||
text: 'Chart.js Bar Chart'
|
||
},
|
||
scales: {
|
||
y: {
|
||
stacked: true
|
||
},
|
||
x: {
|
||
stacked: true,
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}else {
|
||
$(".per-pro-box").remove();
|
||
}
|
||
// end accident per province bar chart
|
||
|
||
// accident report pie chart
|
||
const accReportStatusChartCount = [];
|
||
const backgroundColorChartCount = [];
|
||
const labelsChartCount = [];
|
||
const accReportStatusData = jsonServer.accident_report.pie_chart;
|
||
|
||
for (var i = 0; i < accReportStatusData.length; i++) {
|
||
if (accReportStatusData[i].accident_type == 1) {
|
||
accReportStatusChartCount.push(accReportStatusData[i].percentage);
|
||
backgroundColorChartCount.push('#F0A500');
|
||
labelsChartCount.push('خسارتی');
|
||
} else if (accReportStatusData[i].accident_type == 2) {
|
||
accReportStatusChartCount.push(accReportStatusData[i].percentage);
|
||
backgroundColorChartCount.push('#B20600');
|
||
labelsChartCount.push('جرحی');
|
||
} else if (accReportStatusData[i].accident_type == 3) {
|
||
accReportStatusChartCount.push(accReportStatusData[i].percentage);
|
||
backgroundColorChartCount.push('#323231');
|
||
labelsChartCount.push('فوتی');
|
||
}
|
||
}
|
||
|
||
const accReportStatusChartData = {
|
||
labels: labelsChartCount,
|
||
datasets: [{
|
||
label: '',
|
||
data: accReportStatusChartCount,
|
||
backgroundColor: backgroundColorChartCount,
|
||
}]
|
||
};
|
||
var accReportPieChartRatio = (+$("#acc_report_pie_chart").closest(".chart-box").width() + 2) / (+$("#acc_report_pie_chart").closest(".chart-box").height() + 2);
|
||
|
||
const accReportPieChartOptions = {
|
||
aspectRatio: accReportPieChartRatio,
|
||
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 + '%';
|
||
}
|
||
},
|
||
legend: {
|
||
position: 'right',
|
||
title: {
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
labels: {
|
||
usePointStyle: true,
|
||
font: {
|
||
weight: 'bold',
|
||
size: 12
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const accReportPieStatusChart = new Chart(
|
||
document.getElementById("acc_report_pie_chart").getContext("2d"), {
|
||
type: 'pie',
|
||
data: accReportStatusChartData,
|
||
plugins: [ChartDataLabels],
|
||
options: accReportPieChartOptions
|
||
}
|
||
);
|
||
// end accident report pie chart
|
||
|
||
// accident report pipe chart
|
||
const accReportPipeCount = [];
|
||
const accReportPipeLabel = [];
|
||
const accReportPipeBackgroundColor = [];
|
||
|
||
for (var i = 0; i < accReportStatusData.length; i++) {
|
||
|
||
if (accReportStatusData[i].accident_type == 1) {
|
||
accReportPipeCount.push(accReportStatusData[i].cnt);
|
||
accReportPipeLabel.push(accReportStatusData[i].accident_type_fa);
|
||
accReportPipeBackgroundColor.push("#F0A500");
|
||
} else if (accReportStatusData[i].accident_type == 2) {
|
||
accReportPipeCount.push(accReportStatusData[i].cnt);
|
||
accReportPipeLabel.push(accReportStatusData[i].accident_type_fa);
|
||
accReportPipeBackgroundColor.push("#B20600");
|
||
} else if (accReportStatusData[i].accident_type == 3) {
|
||
accReportPipeCount.push(accReportStatusData[i].cnt);
|
||
accReportPipeLabel.push(accReportStatusData[i].accident_type_fa);
|
||
accReportPipeBackgroundColor.push("#323231");
|
||
}
|
||
}
|
||
|
||
const accReportPipeChartData = {
|
||
labels: accReportPipeLabel,
|
||
datasets: [{
|
||
data: accReportPipeCount,
|
||
borderRadius: {
|
||
topRight: 50,
|
||
topLeft: 50
|
||
},
|
||
backgroundColor: accReportPipeBackgroundColor,
|
||
}]
|
||
};
|
||
|
||
const accReportPipeChartOptions = {
|
||
layout: {
|
||
padding: {
|
||
bottom: 15
|
||
},
|
||
},
|
||
scales: {
|
||
yAxis: {
|
||
display: true,
|
||
},
|
||
x: {
|
||
ticks: {
|
||
font: {
|
||
weight: 'bold'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
plugins: {
|
||
datalabels: {
|
||
anchor: 'start',
|
||
textAlign: "center",
|
||
font: {
|
||
size: 14
|
||
},
|
||
padding: {
|
||
top: 5,
|
||
right: 4,
|
||
left: 4,
|
||
bottom: 2
|
||
},
|
||
borderRadius: 50,
|
||
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');
|
||
}
|
||
},
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
}
|
||
$("#acc_report_pipe_chart").attr("width", $("#acc_report_pipe_chart").closest(".chart-box").width());
|
||
$("#acc_report_pipe_chart").attr("height", $("#acc_report_pipe_chart").closest(".chart-box").height());
|
||
const accReportPipeChart = new Chart(
|
||
document.getElementById("acc_report_pipe_chart").getContext("2d"), {
|
||
type: 'bar',
|
||
data: accReportPipeChartData,
|
||
plugins: [ChartDataLabels],
|
||
options: accReportPipeChartOptions
|
||
}
|
||
);
|
||
// end accident report pipe chart
|
||
|
||
// accident type
|
||
const collisionTypeChart = jsonServer.collision_type;
|
||
|
||
for (var i = 0; i < collisionTypeChart.length; i++) {
|
||
if (collisionTypeChart[i].collision_type == 1) {
|
||
const percentage = collisionTypeChart[i].percentage;
|
||
$("#bar_title1").text(collisionTypeChart[i].collision_type_fa);
|
||
let body_bar11 = new ProgressBar.Circle(body_bar1, {
|
||
color: '#666',
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#f0a500', },
|
||
to: { color: '#323231 ', },
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
var value = Math.round(circle.value() * 100);
|
||
circle.setText(`${percentage}%`);
|
||
}
|
||
});
|
||
body_bar11.text.style.fontFamily = 'IRANSansFaNum';
|
||
body_bar11.text.style.fontSize = '20px';
|
||
body_bar11.animate(collisionTypeChart[i].percentage / 100);
|
||
} else if (collisionTypeChart[i].collision_type == 2) {
|
||
const percentage = collisionTypeChart[i].percentage;
|
||
$("#bar_title2").text(collisionTypeChart[i].collision_type_fa);
|
||
let body_bar22 = new ProgressBar.Circle(body_bar2, {
|
||
color: '#666',
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#f0a500', },
|
||
to: { color: '#323231 ', },
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
|
||
var value = Math.round(circle.value() * 100);
|
||
circle.setText(`${percentage}%`);
|
||
}
|
||
});
|
||
body_bar22.text.style.fontFamily = 'IRANSansFaNum';
|
||
body_bar22.text.style.fontSize = '20px';
|
||
body_bar22.animate(collisionTypeChart[i].percentage / 100);
|
||
} else if (collisionTypeChart[i].collision_type == 3) {
|
||
const percentage = collisionTypeChart[i].percentage;
|
||
$("#bar_title3").text(collisionTypeChart[i].collision_type_fa);
|
||
let body_bar33 = new ProgressBar.Circle(body_bar3, {
|
||
color: '#666',
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#f0a500', },
|
||
to: { color: '#323231 ', },
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
var value = Math.round(circle.value() * 100);
|
||
circle.setText(`${percentage}%`);
|
||
}
|
||
});
|
||
body_bar33.text.style.fontFamily = 'IRANSansFaNum';
|
||
body_bar33.text.style.fontSize = '20px';
|
||
body_bar33.animate(collisionTypeChart[i].percentage / 100);
|
||
} else if (collisionTypeChart[i].collision_type == 4) {
|
||
const percentage = collisionTypeChart[i].percentage;
|
||
$("#bar_title4").text(collisionTypeChart[i].collision_type_fa);
|
||
let body_bar44 = new ProgressBar.Circle(body_bar4, {
|
||
color: '#666',
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#f0a500', },
|
||
to: { color: '#323231 ', },
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
var value = Math.round(circle.value() * 100);
|
||
circle.setText(`${percentage}%`);
|
||
}
|
||
});
|
||
body_bar44.text.style.fontFamily = 'IRANSansFaNum';
|
||
body_bar44.text.style.fontSize = '20px';
|
||
body_bar44.animate(collisionTypeChart[i].percentage / 100);
|
||
} else if (collisionTypeChart[i].collision_type == 5) {
|
||
const percentage = collisionTypeChart[i].percentage;
|
||
$("#bar_title5").text(collisionTypeChart[i].collision_type_fa);
|
||
let body_bar55 = new ProgressBar.Circle(body_bar5, {
|
||
color: '#666',
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#f0a500', },
|
||
to: { color: '#323231 ', },
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
var value = Math.round(circle.value() * 100);
|
||
circle.setText(`${percentage}%`);
|
||
}
|
||
});
|
||
body_bar55.text.style.fontFamily = 'IRANSansFaNum';
|
||
body_bar55.text.style.fontSize = '20px';
|
||
body_bar55.animate(collisionTypeChart[i].percentage / 100);
|
||
} else if (collisionTypeChart[i].collision_type == 6) {
|
||
const percentage = collisionTypeChart[i].percentage;
|
||
$("#bar_title6").text(collisionTypeChart[i].collision_type_fa);
|
||
let body_bar66 = new ProgressBar.Circle(body_bar6, {
|
||
color: '#666',
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#f0a500', },
|
||
to: { color: '#323231 ', },
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
var value = Math.round(circle.value() * 100);
|
||
circle.setText(`${percentage}%`);
|
||
}
|
||
});
|
||
body_bar66.text.style.fontFamily = 'IRANSansFaNum';
|
||
body_bar66.text.style.fontSize = '20px';
|
||
body_bar66.animate(collisionTypeChart[i].percentage / 100);
|
||
} else if (collisionTypeChart[i].collision_type == 7) {
|
||
const percentage = collisionTypeChart[i].percentage;
|
||
$("#bar_title7").text(collisionTypeChart[i].collision_type_fa);
|
||
let body_bar77 = new ProgressBar.Circle(body_bar7, {
|
||
color: '#666',
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#f0a500', },
|
||
to: { color: '#323231 ', },
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
var value = Math.round(circle.value() * 100);
|
||
circle.setText(`${percentage}%`);
|
||
}
|
||
});
|
||
body_bar77.text.style.fontFamily = 'IRANSansFaNum';
|
||
body_bar77.text.style.fontSize = '20px';
|
||
body_bar77.animate(collisionTypeChart[i].percentage / 100);
|
||
}
|
||
}
|
||
|
||
// road type acc contribution
|
||
const roadTypes = ["آزادراه", "بزرگراه", "اصلی", "فرعی"];
|
||
const accTypes = ["خسارتی", "جرحی", "فوتی"]
|
||
const roadroadTypeChartData = jsonServer.share_of_accidents_by_road_type;
|
||
const roadroadTypeChartDataCount1 = [];
|
||
const roadroadTypeChartDataCount2 = [];
|
||
const roadroadTypeChartDataCount3 = [];
|
||
const roadroadTypeChartDataLabel = [];
|
||
for (var i = 0; i < roadroadTypeChartData.length; i++) {
|
||
for (var j = 0; j < roadroadTypeChartData[i].data.length; j++) {
|
||
if (roadroadTypeChartData[i].accident_type_fa == "خسارتی") {
|
||
roadroadTypeChartDataCount1.push(roadroadTypeChartData[i].data[j].cnt);
|
||
} else if (roadroadTypeChartData[i].accident_type_fa == "جرحی") {
|
||
roadroadTypeChartDataCount2.push(roadroadTypeChartData[i].data[j].cnt);
|
||
} else if (roadroadTypeChartData[i].accident_type_fa == "فوتی") {
|
||
roadroadTypeChartDataCount3.push(roadroadTypeChartData[i].data[j].cnt);
|
||
}
|
||
}
|
||
}
|
||
|
||
$("#acc_road_type_contribution_pipe_chart").attr("width", $("#acc_road_type_contribution_pipe_chart").closest(".chart-box").width());
|
||
$("#acc_road_type_contribution_pipe_chart").attr("height", $("#acc_road_type_contribution_pipe_chart").closest(".chart-box").height());
|
||
|
||
const roadTypeChart = new Chart(document.getElementById('acc_road_type_contribution_pipe_chart').getContext('2d'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: roadTypes,
|
||
datasets: [{
|
||
label: accTypes[0],
|
||
data: roadroadTypeChartDataCount1,
|
||
backgroundColor: "#f0a500",
|
||
},
|
||
{
|
||
label: accTypes[1],
|
||
data: roadroadTypeChartDataCount2,
|
||
backgroundColor: "#B20600",
|
||
},
|
||
{
|
||
label: accTypes[2],
|
||
data: roadroadTypeChartDataCount3,
|
||
backgroundColor: "#323231",
|
||
},
|
||
]
|
||
},
|
||
options: {
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true
|
||
}
|
||
}
|
||
}
|
||
});
|
||
// end road type acc contribution
|
||
|
||
// road geometry acc contribution
|
||
const geoTypes = ["فرعی", "اصلی", "بزرگراه", "آزادراه"];
|
||
const roadgeomeChartData = jsonServer.share_of_accidents_by_road_geometry;
|
||
const roadgeomeChartDataCount1 = [];
|
||
const roadgeomeChartDataCount2 = [];
|
||
const roadgeomeChartDataCount3 = [];
|
||
const roadgeomeChartDataCount4 = [];
|
||
const roadgeomeChartDataLabel = [];
|
||
for (let i = 0; i < roadgeomeChartData.length; i++) {
|
||
roadgeomeChartDataLabel.push(roadgeomeChartData[i].way_geometri_fa);
|
||
for (let j = 0; j < roadgeomeChartData[i].data.length; j++) {
|
||
if (roadgeomeChartData[i].data[j].axis_type_fa == "آزادراه") {
|
||
roadgeomeChartDataCount1.push(roadgeomeChartData[i].data[j].cnt);
|
||
} else if (roadgeomeChartData[i].data[j].axis_type_fa == "بزرگراه") {
|
||
roadgeomeChartDataCount2.push(roadgeomeChartData[i].data[j].cnt);
|
||
} else if (roadgeomeChartData[i].data[j].axis_type_fa == "اصلی") {
|
||
roadgeomeChartDataCount3.push(roadgeomeChartData[i].data[j].cnt);
|
||
} else if (roadgeomeChartData[i].data[j].axis_type_fa == "فرعی") {
|
||
roadgeomeChartDataCount4.push(roadgeomeChartData[i].data[j].cnt);
|
||
}
|
||
}
|
||
}
|
||
$("#acc_road_geometry_contribution_pipe_chart").attr("width", $("#acc_road_geometry_contribution_pipe_chart").closest(".chart-box").width());
|
||
$("#acc_road_geometry_contribution_pipe_chart").attr("height", $("#acc_road_geometry_contribution_pipe_chart").closest(".chart-box").height());
|
||
const roadgeometryChart = new Chart(document.getElementById('acc_road_geometry_contribution_pipe_chart').getContext('2d'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: roadgeomeChartDataLabel,
|
||
datasets: [{
|
||
label: geoTypes[0],
|
||
data: roadgeomeChartDataCount4,
|
||
backgroundColor: "#f0a500",
|
||
},
|
||
{
|
||
label: geoTypes[1],
|
||
data: roadgeomeChartDataCount3,
|
||
backgroundColor: "#461111",
|
||
},
|
||
{
|
||
label: geoTypes[2],
|
||
data: roadgeomeChartDataCount2,
|
||
backgroundColor: "#A13333",
|
||
},
|
||
{
|
||
label: geoTypes[3],
|
||
data: roadgeomeChartDataCount1,
|
||
backgroundColor: "#B3541E",
|
||
},
|
||
]
|
||
},
|
||
options: {
|
||
scales: {
|
||
x: {
|
||
stacked: true,
|
||
},
|
||
y: {
|
||
stacked: true
|
||
}
|
||
}
|
||
}
|
||
});
|
||
// end road geometry acc contribution
|
||
|
||
// daily time data
|
||
const perDayData = jsonServer.per_day;
|
||
for (var i = 0; i < perDayData.length; i++) {
|
||
if (perDayData[i].accident_type_fa == "خسارتی") {
|
||
$(".page").find("#dayMainPercent").text(`${perDayData[i].day.total_percentage}%`);
|
||
$(".page").find("#nightMainPercent").text(`${perDayData[i].night.total_percentage}%`);
|
||
|
||
$(".page").find("#damage_row").text(perDayData[i].accident_type_fa);
|
||
$(".page").find("#damage_day_count").text(perDayData[i].day.cnt);
|
||
$(".page").find("#damage_day_percent").text(`${perDayData[i].day.percent}%`);
|
||
$(".page").find("#damage_night_count").text(perDayData[i].night.cnt);
|
||
$(".page").find("#damage_night_percent").text(`${perDayData[i].night.percent}%`);
|
||
} else if (perDayData[i].accident_type_fa == "جرحی") {
|
||
$(".page").find("#injuries_row").text(perDayData[i].accident_type_fa);
|
||
$(".page").find("#injuries_day_count").text(perDayData[i].day.cnt);
|
||
$(".page").find("#injuries_day_percent").text(`${perDayData[i].day.percent}%`);
|
||
$(".page").find("#injuries_night_count").text(perDayData[i].night.cnt);
|
||
$(".page").find("#injuries_night_percent").text(`${perDayData[i].night.percent}%`);
|
||
} else if (perDayData[i].accident_type_fa == "فوتی") {
|
||
$(".page").find("#death_row").text(perDayData[i].accident_type_fa);
|
||
$(".page").find("#death_day_count").text(perDayData[i].day.cnt);
|
||
$(".page").find("#death_day_percent").text(`${perDayData[i].day.percent}%`);
|
||
$(".page").find("#death_night_count").text(perDayData[i].night.cnt);
|
||
$(".page").find("#death_night_percent").text(`${perDayData[i].night.percent}%`);
|
||
}
|
||
}
|
||
// end daily time data
|