templates.js.trends-chart.js.vm Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of cucumber-reporting Show documentation
Show all versions of cucumber-reporting Show documentation
Provides pretty html reports for Cucumber. It works by generating html from the cucumber json file.
$(document).ready(function() {
var buildNumbers = #stringArray($buildNumbers);
var failedFeatures = #numberArray($failedFeatures);
var passedFeatures = #numberArray($passedFeatures);
var failedScenarios = #numberArray($failedScenarios);
var passedScenarios = #numberArray($passedScenarios);
var passedSteps = #numberArray($passedSteps);
var failedSteps = #numberArray($failedSteps);
var skippedSteps = #numberArray($skippedSteps);
var pendingSteps = #numberArray($pendingSteps);
var undefinedSteps = #numberArray($undefinedSteps);
var durations = #numberArray($durations);
var chartFeaturesData = {
labels: buildNumbers,
datasets: [
{
label: "Failed",
data: failedFeatures,
fill: true,
lineTension: 0.1,
backgroundColor: "#F2928C", // same as failed class in css file
borderColor: "rgba(192,0,0,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false,
},
{
label: "Passed",
data: passedFeatures,
fill: true,
lineTension: 0.1,
backgroundColor: "#92DD96", // same as passed class in css file
borderColor: "rgba(0,192,192,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false
}
]
};
var featuresContext = document.getElementById("trends-features-chart");
window.myBar = new Chart(featuresContext, {
type: "line",
data: chartFeaturesData,
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
var chartScenariosData = {
labels: buildNumbers,
datasets: [
{
label: "Failed",
data: failedScenarios,
fill: true,
lineTension: 0.1,
backgroundColor: "#F2928C", // same as failed class in css file
borderColor: "rgba(192,0,0,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false
},
{
label: "Passed",
data: passedScenarios,
fill: true,
lineTension: 0.1,
backgroundColor: "#92DD96", // same as passed class in css file
borderColor: "rgba(0,192,192,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false
}
]
};
var scenariosContext = document.getElementById("trends-scenarios-chart");
window.myBar = new Chart(scenariosContext, {
type: "line",
data: chartScenariosData,
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
var chartStepsData = {
labels: buildNumbers,
datasets: [
{
label: "Failed",
data: failedSteps,
fill: true,
lineTension: 0.1,
backgroundColor: "#F2928C",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false
},
{
label: "Skipped",
data: skippedSteps,
fill: true,
lineTension: 0.1,
backgroundColor: "#8AF",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false
},
{
label: "Pending",
data: pendingSteps,
fill: true,
lineTension: 0.1,
backgroundColor: "#F5F28F",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false
},
{
label: "Undefined",
data: undefinedSteps,
fill: true,
lineTension: 0.1,
backgroundColor: "#F5B975",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false
},
{
label: "Passed",
data: passedSteps,
fill: true,
lineTension: 0.1,
backgroundColor: "#92DD96",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false
}
]
};
var stepsContext = document.getElementById("trends-steps-chart");
window.myBar = new Chart(stepsContext, {
type: "line",
data: chartStepsData,
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
var chartDurationsData = {
labels: buildNumbers,
datasets: [
{
label: "Duration",
data: durations,
fill: true,
lineTension: 0.1,
backgroundColor: "#C0C0C0",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false
}
]
};
function formatDuration(duration) {
// gets in nanosecs, outs in secs
return moment.duration(duration / 1000000).humanize();
}
var durationsContext = document.getElementById("trends-durations-chart");
new Chart(durationsContext, {
type: "line",
data: chartDurationsData,
options: {
scales: {
yAxes: [{
ticks: {
userCallback: function(value) { return formatDuration(value); }
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ": " + formatDuration(tooltipItem.yLabel);
}
}
}
}
});
});