Skip to content

Commit

Permalink
test new chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoa-pham82
hoa-pham82 committed Oct 30, 2023
1 parent 0fff6e0 commit 07a786a
Show file tree
Hide file tree
Showing 5 changed files with 415 additions and 66 deletions.
13 changes: 11 additions & 2 deletions extractData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import fs from 'fs'
import path from 'path'

export function extractData(resultPath, testType, buildNumber=process.argv[2]) {
export function extractData(resultPath, testType, buildNumber=process.argv[2], buildLink=process.argv[3]) {
const files = fs.readdirSync(resultPath);

const totalTestRun = files.filter((file) => file.endsWith('.json') && file !== 'executor.json').length;
Expand All @@ -11,6 +11,7 @@ export function extractData(resultPath, testType, buildNumber=process.argv[2]) {

let passedCount = 0;
let failedCount = 0;
let date;

const baseUrl = 'https://hoa-pham82.github.io/reusable-workflow-sample'
let uri;
Expand All @@ -27,6 +28,12 @@ export function extractData(resultPath, testType, buildNumber=process.argv[2]) {
} else if (jsonData.status === 'failed') {
failedCount++;
}

// extract report date
date = new Date(jsonData.start);
const format = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'short', day: 'numeric' }).format(date);
date = format;

});


Expand All @@ -45,7 +52,9 @@ export function extractData(resultPath, testType, buildNumber=process.argv[2]) {
totalTestCases: totalTestRun,
totalPass: passedCount,
totalFail: failedCount,
reportLink: `${baseUrl}/${uri}/${buildNumber}`
reportLink: `${baseUrl}/${uri}/${buildNumber}`,
reportDate: date,
buildUrl: buildLink
};
}

Expand Down
125 changes: 86 additions & 39 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Report</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}

th,
td {
border: 1px solid black;
padding: 10px;
text-align: center;
}

th {
background-color: #f2f2f2;
}
</style>
</head>

<body>
<h1>Driver App Test Report</h1>
<table id="testTable">
<tr>
<th>Test Type</th>
<th>Total Test Cases</th>
<th>Total Passed</th>
<th>Total Failed</th>
<th>Report Link</th>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Driver App Report</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<h1 id="heading">Driver App Summary Report</h1>
<div class="table__col">
<a
class="link"
href=""
id="buildUrl"
>
GitHub Actions Run 👉
<span class="fa fa-external-link"></span>
</a>
</div>

<div class="pie-charts">
<div class="pieID--micro-skills pie-chart--wrapper">
<h2 id="unittestHeading">Unit Test</h2>

<div class="pie-chart">
<div class="pie-chart__pie"></div>
<ul class="pie-chart__legend">
<li><em>Pass✅ </em><span id="unittestPassCount">642</span></li>
<li><em>Fail❌</em><span id="unittestFailCount">358</span></li>
<li>
<em>Total Test Run</em><span id="unittestTotalCount">1000</span>
</li>
</ul>
<a class="link" href="" id="unittestLink"></a>
</div>
</div>
<div class="pieID--categories pie-chart--wrapper">
<h2 id="androidtestHeading">Android Test</h2>
<div class="pie-chart">
<div class="pie-chart__pie"></div>
<ul class="pie-chart__legend">
<li><em>Pass✅</em><span id="androidtestPassCount">768</span></li>
<li><em>Fail❌</em><span id="androidtestFailCount">232</span></li>
<li>
<em>Total Test Run</em
><span id="androidtestTotalCount">1000</span>
</li>
</ul>
<a class="link" href="" id="androidtestLink"></a>
</div>
</div>
<div class="pieID--operations pie-chart--wrapper">
<h2 id="iostestHeading">iOS Test</h2>
<div class="pie-chart">
<div class="pie-chart__pie"></div>
<ul class="pie-chart__legend">
<li><em>Pass✅</em><span id="iostestPassCount">486</span></li>
<li><em>Fail❌</em><span id="iostestFailCount">156</span></li>
<li>
<em>Total Test Run</em><span id="iostestTotalCount">1000</span>
</li>
</ul>
<a class="link" href="" id="iostestLink"></a>
</div>
</div>
</div>
</div>

<!-- partial -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://codepen.io/MaciejCaputa/pen/EmMooZ.js"></script>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<script src="./script.js"></script>
<script src="./loadData.js"></script>
</body>
</html>
48 changes: 48 additions & 0 deletions loadData.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* eslint-disable prettier/prettier */
function populateTestTypeData(
testType,
totalTestCases,
totalPass,
totalFail,
link
) {
const passCountElement = document.getElementById(`${testType}PassCount`);
const failCountElement = document.getElementById(`${testType}FailCount`);
const totalCountElement = document.getElementById(`${testType}TotalCount`);
const linkReport = document.getElementById(`${testType}Link`);

passCountElement.textContent = totalPass;
failCountElement.textContent = totalFail;
totalCountElement.textContent = totalTestCases;
linkReport.innerHTML = `<a class="link" href="${link}">View Report 👉</a>`;
}

fetch('report.json')
.then((response) => response.json())
.then((data) => {
data.forEach((type) => {
populateTestTypeData(
type.testType.toLowerCase().replace(' ', ''),
type.totalTestCases,
type.totalPass,
type.totalFail,
type.reportLink
);
});

const heading = document.getElementById('heading');
heading.textContent = `Driver App Summary Report - ${data[0].reportDate}`;

const executor = document.getElementById('buildUrl');
executor.innerHTML = `<a
class="link"
href="${data[0].buildUrl}"
id="buildUrl"
>
#GitHub Actions Run 👉
<span class="fa fa-external-link"></span>
</a>`
})
.catch((error) => {
console.error('Error fetching test data:', error);
});
115 changes: 90 additions & 25 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,90 @@
/* eslint-disable prettier/prettier */

fetch('report.json')
.then(response => response.json())
.then(data => {
// Populate the table with dynamic data
const table = document.getElementById('testTable');

data.forEach(testType => {
const row = table.insertRow();
const columns = ['testType', 'totalTestCases', 'totalPass', 'totalFail', 'reportLink'];

columns.forEach(column => {
const cell = row.insertCell();
if (column === 'reportLink') {
cell.innerHTML = `<a href="${testType[column]}">View Report</a>`;
} else {
cell.textContent = testType[column];
}
});
});
})
.catch(error => {
console.error('Error fetching test data:', error);
});
function sliceSize(dataNum, dataTotal) {
return (dataNum / dataTotal) * 360;
}

function addSlice(id, sliceSize, pieElement, offset, sliceID, color) {
$(pieElement).append("<div class='slice "+ sliceID + "'><span></span></div>");
var offset = offset - 1;
var sizeRotation = -179 + sliceSize;

$(id + " ." + sliceID).css({
"transform": "rotate(" + offset + "deg) translate3d(0,0,0)"
});

$(id + " ." + sliceID + " span").css({
"transform" : "rotate(" + sizeRotation + "deg) translate3d(0,0,0)",
"background-color": color
});
}

function iterateSlices(id, sliceSize, pieElement, offset, dataCount, sliceCount, color) {
var
maxSize = 179,
sliceID = "s" + dataCount + "-" + sliceCount;

if( sliceSize <= maxSize ) {
addSlice(id, sliceSize, pieElement, offset, sliceID, color);
} else {
addSlice(id, maxSize, pieElement, offset, sliceID, color);
iterateSlices(id, sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
}
}

function createPie(id) {
var
listData = [],
listTotal = 0,
offset = 0,
i = 0,
pieElement = id + " .pie-chart__pie"
dataElement = id + " .pie-chart__legend"

color = [
"cornflowerblue",
"olivedrab",
"orange",
"tomato",
"crimson",
"purple",
"turquoise",
"forestgreen",
"navy"
];

color = shuffle( color );

$(dataElement+" span").each(function() {
listData.push(Number($(this).html()));
});

for(i = 0; i < listData.length; i++) {
listTotal += listData[i];
}

for(i=0; i < listData.length; i++) {
var size = sliceSize(listData[i], listTotal);
iterateSlices(id, size, pieElement, offset, i, 0, color[i]);
$(dataElement + " li:nth-child(" + (i + 1) + ")").css("border-color", color[i]);
offset += size;
}
}

function shuffle(a) {
var j, x, i;
for (i = a.length; i; i--) {
j = Math.floor(Math.random() * i);
x = a[i - 1];
a[i - 1] = a[j];
a[j] = x;
}

return a;
}

function createPieCharts() {
createPie('.pieID--micro-skills' );
createPie('.pieID--categories' );
createPie('.pieID--operations' );
}

createPieCharts();
Loading

0 comments on commit 07a786a

Please sign in to comment.