odhin-reports-playwright/lib/html/chartJs.html

Odhin Reports for Playwright

let options = {
        segmentShowStroke: false,
        responsive: false,
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 10,
                bottom: 0
            }
        },
        scales: {
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    display: false
                },
                scaleLabel: {
                    display: false
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    display: false
                },
            }]
        },
        legend: {
            display: false,
        },
        animation: {
            duration: 2200
        },
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    //get the concerned dataset
                    let dataset = data.datasets[tooltipItem.datasetIndex];
                    //calculate the total of this data set
                    let total = dataset.data.reduce(function (previousValue, currentValue, currentIndex, array) {
                        return previousValue + currentValue;
                    });
                    //get the current items value
                    let currentValue = dataset.data[tooltipItem.index];
                    //get the current items label
                    let currentLabel = data.labels[tooltipItem.index];
                    //calculate the percentage based on the total and current item, also this does a rough rounding to give a whole number
                    let percentage = Math.floor(((currentValue / total) * 100) + 0.5);

                    return " " + currentLabel + " " + percentage + "%";
                }
            }
        },
        title: {
            display: false,
        }
    }

    let statusPassed = "{{.PassedStatusChart}}"
    let statusFailed = "{{.FailedStatusChart}}"
    let statusTimedOut = "{{.TimedOutStatusChart}}"
    let statusSkipped = "{{.SkippedStatusChart}}"
    let statusInterrupted = "{{.InterruptedStatusChart}}"
    let statusFlaky = "{{.FlakyStatusChart}}"
    let ctxStatus = document.getElementById('chart-status').getContext('2d');
    let datasetList = [];
    let colorList = [];
    let labelList = [];
    if(parseInt(statusPassed) > 0) {
        datasetList.push(parseInt(statusPassed));
        colorList.push("#2E7D31");
        labelList.push('Passed ({{.PassedStatusChart}})');
    }
    if(parseInt(statusFailed) > 0) {
        datasetList.push(parseInt(statusFailed));
        colorList.push("#C62828");
        labelList.push('Failed ({{.FailedStatusChart}})');
    }
    if(parseInt(statusTimedOut) > 0) {
        datasetList.push(parseInt(statusTimedOut));
        colorList.push("#fcd12a");
        labelList.push('TimedOut ({{.TimedOutStatusChart}})');
    }
    if(parseInt(statusSkipped) > 0) {
        datasetList.push(parseInt(statusSkipped));
        colorList.push("#ff6f00");
        labelList.push('Skipped ({{.SkippedStatusChart}})');
    }
    if(parseInt(statusInterrupted) > 0) {
        datasetList.push(parseInt(statusInterrupted));
        colorList.push("#01579b");
        labelList.push('Interrupted ({{.InterruptedStatusChart}})');
    }
    if(parseInt(statusFlaky) > 0) {
        datasetList.push(parseInt(statusFlaky));
        colorList.push("#3c0061");
        labelList.push('Flaky ({{.FlakyStatusChart}})');
    }
    let chartStatus = new Chart(ctxStatus, {
        type: 'doughnut',
        data: {
            labels: labelList,
            datasets: [{
                data: datasetList,
                backgroundColor: colorList,
                borderColor: colorList
            }]
        },
        options: options
    });

    let ctxFile = document.getElementById('chart-file').getContext('2d');
    let chartFile = new Chart(ctxFile, {
        type: 'doughnut',
        data: {
            labels: [ {{.FilesChartLabels}} ],
            datasets: [{
                data: [ {{.FilesChartData}} ],
                backgroundColor: [ {{.FilesChartDataColor}} ],
                borderColor: [ {{.FilesChartDataColor}} ]
            }]
        },
        options: options
    });

    let ctxProject = document.getElementById('chart-project').getContext('2d');
    let chartProject = new Chart(ctxProject, {
        type: 'doughnut',
        data: {
            labels: [ {{.ProjectsChartLabels}} ],
            datasets: [{
                data: [ {{.ProjectsChartData}} ],
                backgroundColor: [ {{.ProjectsChartDataColor}} ],
                borderColor: [ {{.ProjectsChartDataColor}} ]
            }]
        },
        options: options
    });