// 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