mirror of
https://github.com/anuraghazra/github-readme-stats.git
synced 2025-01-30 14:08:14 +08:00
add pie chart layout to language card (#2099)
* add pie chart layout to language card * resolve failing top-lang card tests * scale down pie chart * update readme.md * Update readme.md Co-authored-by: Rick Staa <rick.staa@outlook.com> * style: format code * update donut layout to be created without dependencies * minor update * style: format readme * resolve failing tests * refactor: clean up code and add extra tests This commit cleans up the pie chart generation code and adds additional tests. * feat: improve pie chart positioning * rename layout pie to donut * add animation to donut layout * refactor: rename pie and doughnut to donut * feat: decrease donus animation delay --------- Co-authored-by: rickstaa <rick.staa@outlook.com>
This commit is contained in:
Nabil Alamin
GitHub
parent
daa1977ba3
commit
c5e7f7b490
145
package-lock.json
generated
145
package-lock.json
generated
@ -1495,31 +1495,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/acorn-globals": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
|
||||
"integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
|
||||
"integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"acorn": "^7.1.1",
|
||||
"acorn-walk": "^7.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn-globals/node_modules/acorn": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
"acorn": "^8.1.0",
|
||||
"acorn-walk": "^8.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn-walk": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
|
||||
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
|
||||
"version": "8.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
|
||||
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
@ -1778,12 +1766,6 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/browser-process-hrtime": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
|
||||
"integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/browserslist": {
|
||||
"version": "4.21.4",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
|
||||
@ -2509,20 +2491,6 @@
|
||||
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
@ -3865,18 +3833,18 @@
|
||||
}
|
||||
},
|
||||
"node_modules/jsdom": {
|
||||
"version": "20.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.0.tgz",
|
||||
"integrity": "sha512-x4a6CKCgx00uCmP+QakBDFXwjAJ69IkkIWHmtmjd3wvXPcdOS44hfX2vqkOQrVrq8l9DhNNADZRXaCEWvgXtVA==",
|
||||
"version": "20.0.1",
|
||||
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.1.tgz",
|
||||
"integrity": "sha512-pksjj7Rqoa+wdpkKcLzQRHhJCEE42qQhl/xLMUKHgoSejaKOdaXEAnqs6uDNwMl/fciHTzKeR8Wm8cw7N+g98A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"abab": "^2.0.6",
|
||||
"acorn": "^8.7.1",
|
||||
"acorn-globals": "^6.0.0",
|
||||
"acorn": "^8.8.0",
|
||||
"acorn-globals": "^7.0.0",
|
||||
"cssom": "^0.5.0",
|
||||
"cssstyle": "^2.3.0",
|
||||
"data-urls": "^3.0.2",
|
||||
"decimal.js": "^10.3.1",
|
||||
"decimal.js": "^10.4.1",
|
||||
"domexception": "^4.0.0",
|
||||
"escodegen": "^2.0.0",
|
||||
"form-data": "^4.0.0",
|
||||
@ -3884,18 +3852,17 @@
|
||||
"http-proxy-agent": "^5.0.0",
|
||||
"https-proxy-agent": "^5.0.1",
|
||||
"is-potential-custom-element-name": "^1.0.1",
|
||||
"nwsapi": "^2.2.0",
|
||||
"parse5": "^7.0.0",
|
||||
"nwsapi": "^2.2.2",
|
||||
"parse5": "^7.1.1",
|
||||
"saxes": "^6.0.0",
|
||||
"symbol-tree": "^3.2.4",
|
||||
"tough-cookie": "^4.0.0",
|
||||
"w3c-hr-time": "^1.0.2",
|
||||
"tough-cookie": "^4.1.2",
|
||||
"w3c-xmlserializer": "^3.0.0",
|
||||
"webidl-conversions": "^7.0.0",
|
||||
"whatwg-encoding": "^2.0.0",
|
||||
"whatwg-mimetype": "^3.0.0",
|
||||
"whatwg-url": "^11.0.0",
|
||||
"ws": "^8.8.0",
|
||||
"ws": "^8.9.0",
|
||||
"xml-name-validator": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
@ -5397,15 +5364,6 @@
|
||||
"node": ">=10.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-hr-time": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
|
||||
"integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"browser-process-hrtime": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-xmlserializer": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz",
|
||||
@ -6830,27 +6788,19 @@
|
||||
"dev": true
|
||||
},
|
||||
"acorn-globals": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
|
||||
"integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
|
||||
"integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"acorn": "^7.1.1",
|
||||
"acorn-walk": "^7.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"acorn": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||
"dev": true
|
||||
}
|
||||
"acorn": "^8.1.0",
|
||||
"acorn-walk": "^8.0.2"
|
||||
}
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
|
||||
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
|
||||
"version": "8.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
|
||||
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
|
||||
"dev": true
|
||||
},
|
||||
"agent-base": {
|
||||
@ -7049,12 +6999,6 @@
|
||||
"fill-range": "^7.0.1"
|
||||
}
|
||||
},
|
||||
"browser-process-hrtime": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
|
||||
"integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
|
||||
"dev": true
|
||||
},
|
||||
"browserslist": {
|
||||
"version": "4.21.4",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
|
||||
@ -7590,13 +7534,6 @@
|
||||
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
|
||||
"dev": true
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
@ -8609,18 +8546,18 @@
|
||||
}
|
||||
},
|
||||
"jsdom": {
|
||||
"version": "20.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.0.tgz",
|
||||
"integrity": "sha512-x4a6CKCgx00uCmP+QakBDFXwjAJ69IkkIWHmtmjd3wvXPcdOS44hfX2vqkOQrVrq8l9DhNNADZRXaCEWvgXtVA==",
|
||||
"version": "20.0.1",
|
||||
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.1.tgz",
|
||||
"integrity": "sha512-pksjj7Rqoa+wdpkKcLzQRHhJCEE42qQhl/xLMUKHgoSejaKOdaXEAnqs6uDNwMl/fciHTzKeR8Wm8cw7N+g98A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"abab": "^2.0.6",
|
||||
"acorn": "^8.7.1",
|
||||
"acorn-globals": "^6.0.0",
|
||||
"acorn": "^8.8.0",
|
||||
"acorn-globals": "^7.0.0",
|
||||
"cssom": "^0.5.0",
|
||||
"cssstyle": "^2.3.0",
|
||||
"data-urls": "^3.0.2",
|
||||
"decimal.js": "^10.3.1",
|
||||
"decimal.js": "^10.4.1",
|
||||
"domexception": "^4.0.0",
|
||||
"escodegen": "^2.0.0",
|
||||
"form-data": "^4.0.0",
|
||||
@ -8628,18 +8565,17 @@
|
||||
"http-proxy-agent": "^5.0.0",
|
||||
"https-proxy-agent": "^5.0.1",
|
||||
"is-potential-custom-element-name": "^1.0.1",
|
||||
"nwsapi": "^2.2.0",
|
||||
"parse5": "^7.0.0",
|
||||
"nwsapi": "^2.2.2",
|
||||
"parse5": "^7.1.1",
|
||||
"saxes": "^6.0.0",
|
||||
"symbol-tree": "^3.2.4",
|
||||
"tough-cookie": "^4.0.0",
|
||||
"w3c-hr-time": "^1.0.2",
|
||||
"tough-cookie": "^4.1.2",
|
||||
"w3c-xmlserializer": "^3.0.0",
|
||||
"webidl-conversions": "^7.0.0",
|
||||
"whatwg-encoding": "^2.0.0",
|
||||
"whatwg-mimetype": "^3.0.0",
|
||||
"whatwg-url": "^11.0.0",
|
||||
"ws": "^8.8.0",
|
||||
"ws": "^8.9.0",
|
||||
"xml-name-validator": "^4.0.0"
|
||||
}
|
||||
},
|
||||
@ -9724,15 +9660,6 @@
|
||||
"convert-source-map": "^1.6.0"
|
||||
}
|
||||
},
|
||||
"w3c-hr-time": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
|
||||
"integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browser-process-hrtime": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"w3c-xmlserializer": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz",
|
||||
|
||||
12
readme.md
12
readme.md
@ -423,6 +423,14 @@ You can use the `&layout=compact` option to change the card design.
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
### Donut Chart Language Card Layout
|
||||
|
||||
You can use the `&layout=donut` option to change the card design.
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
### Hide Progress Bars
|
||||
|
||||
You can use the `&hide_progress=true` option to hide the percentages and the progress bars (layout will be automatically set to `compact`).
|
||||
@ -439,6 +447,10 @@ You can use the `&hide_progress=true` option to hide the percentages and the pro
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
|
||||
- Donut Chart layout
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
|
||||
- Hidden progress bars
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
|
||||
@ -36,13 +36,134 @@ const getLongestLang = (arr) =>
|
||||
);
|
||||
|
||||
/**
|
||||
* Creates a node to display usage of a programming language in percentage
|
||||
* using text and a horizontal progress bar.
|
||||
* Convert degrees to radians.
|
||||
*
|
||||
* @param {number} angleInDegrees Angle in degrees.
|
||||
* @returns Angle in radians.
|
||||
*/
|
||||
const degreesToRadians = (angleInDegrees) => angleInDegrees * (Math.PI / 180.0);
|
||||
|
||||
/**
|
||||
* Convert radians to degrees.
|
||||
*
|
||||
* @param {number} angleInRadians Angle in radians.
|
||||
* @returns Angle in degrees.
|
||||
*/
|
||||
const radiansToDegrees = (angleInRadians) => angleInRadians / (Math.PI / 180.0);
|
||||
|
||||
/**
|
||||
* Convert polar coordinates to cartesian coordinates.
|
||||
*
|
||||
* @param {number} centerX Center x coordinate.
|
||||
* @param {number} centerY Center y coordinate.
|
||||
* @param {number} radius Radius of the circle.
|
||||
* @param {number} angleInDegrees Angle in degrees.
|
||||
* @returns {{x: number, y: number}} Cartesian coordinates.
|
||||
*/
|
||||
const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
|
||||
const rads = degreesToRadians(angleInDegrees);
|
||||
return {
|
||||
x: centerX + radius * Math.cos(rads),
|
||||
y: centerY + radius * Math.sin(rads),
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert cartesian coordinates to polar coordinates.
|
||||
*
|
||||
* @param {number} centerX Center x coordinate.
|
||||
* @param {number} centerY Center y coordinate.
|
||||
* @param {number} x Point x coordinate.
|
||||
* @param {number} y Point y coordinate.
|
||||
* @returns {{radius: number, angleInDegrees: number}} Polar coordinates.
|
||||
*/
|
||||
const cartesianToPolar = (centerX, centerY, x, y) => {
|
||||
const radius = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
|
||||
let angleInDegrees = radiansToDegrees(Math.atan2(y - centerY, x - centerX));
|
||||
if (angleInDegrees < 0) angleInDegrees += 360;
|
||||
return { radius, angleInDegrees };
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates height for the compact layout.
|
||||
*
|
||||
* @param {number} totalLangs Total number of languages.
|
||||
* @returns {number} Card height.
|
||||
*/
|
||||
const calculateCompactLayoutHeight = (totalLangs) => {
|
||||
return 90 + Math.round(totalLangs / 2) * 25;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates height for the normal layout.
|
||||
*
|
||||
* @param {number} totalLangs Total number of languages.
|
||||
* @returns {number} Card height.
|
||||
*/
|
||||
const calculateNormalLayoutHeight = (totalLangs) => {
|
||||
return 45 + (totalLangs + 1) * 40;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates height for the donut layout.
|
||||
*
|
||||
* @param {number} totalLangs Total number of languages.
|
||||
* @returns {number} Card height.
|
||||
*/
|
||||
const calculateDonutLayoutHeight = (totalLangs) => {
|
||||
return 215 + Math.max(totalLangs - 5, 0) * 32;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the center translation needed to keep the donut chart centred.
|
||||
* @param {number} totalLangs Total number of languages.
|
||||
* @returns {number} Donut center translation.
|
||||
*/
|
||||
const donutCenterTranslation = (totalLangs) => {
|
||||
return -45 + Math.max(totalLangs - 5, 0) * 16;
|
||||
};
|
||||
|
||||
/**
|
||||
* Trim top languages to lang_count while also hiding certain languages.
|
||||
*
|
||||
* @param {Record<string, Lang>} topLangs Top languages.
|
||||
* @param {string[]} hide Languages to hide.
|
||||
* @param {string} langs_count Number of languages to show.
|
||||
* @returns {{topLangs: Record<string, Lang>, totalSize: number}} Trimmed top languages and total size.
|
||||
*/
|
||||
const trimTopLanguages = (topLangs, hide, langs_count) => {
|
||||
let langs = Object.values(topLangs);
|
||||
let langsToHide = {};
|
||||
let langsCount = clampValue(parseInt(langs_count), 1, 10);
|
||||
|
||||
// populate langsToHide map for quick lookup
|
||||
// while filtering out
|
||||
if (hide) {
|
||||
hide.forEach((langName) => {
|
||||
langsToHide[lowercaseTrim(langName)] = true;
|
||||
});
|
||||
}
|
||||
|
||||
// filter out languages to be hidden
|
||||
langs = langs
|
||||
.sort((a, b) => b.size - a.size)
|
||||
.filter((lang) => {
|
||||
return !langsToHide[lowercaseTrim(lang.name)];
|
||||
})
|
||||
.slice(0, langsCount);
|
||||
|
||||
const totalLanguageSize = langs.reduce((acc, curr) => acc + curr.size, 0);
|
||||
|
||||
return { langs, totalLanguageSize };
|
||||
};
|
||||
|
||||
/**
|
||||
* Create progress bar text item for a programming language.
|
||||
*
|
||||
* @param {object} props Function properties.
|
||||
* @param {number} props.width The card width
|
||||
* @param {string} props.name Name of the programming language.
|
||||
* @param {string} props.color Color of the programming language.
|
||||
* @param {string} props.name Name of the programming language.
|
||||
* @param {string} props.progress Usage of the programming language in percentage.
|
||||
* @param {number} props.index Index of the programming language.
|
||||
* @returns {string} Programming language SVG node.
|
||||
@ -71,7 +192,7 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a text only node to display usage of a programming language in percentage.
|
||||
* Creates compact text item for a programming language.
|
||||
*
|
||||
* @param {object} props Function properties.
|
||||
* @param {Lang} props.lang Programming language object.
|
||||
@ -96,7 +217,7 @@ const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates compact layout of text only language nodes.
|
||||
* Create compact languages text items for all programming languages.
|
||||
*
|
||||
* @param {object} props Function properties.
|
||||
* @param {Lang[]} props.langs Array of programming languages.
|
||||
@ -134,7 +255,29 @@ const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders layout to display user's most frequently used programming languages.
|
||||
* Create donut languages text items for all programming languages.
|
||||
*
|
||||
* @param {object[]} props Function properties.
|
||||
* @param {Lang[]} props.langs Array of programming languages.
|
||||
* @param {number} props.totalSize Total size of all languages.
|
||||
* @returns {string} Donut layout programming language SVG node.
|
||||
*/
|
||||
const createDonutLanguagesNode = ({ langs, totalSize }) => {
|
||||
return flexLayout({
|
||||
items: langs.map((lang, index) => {
|
||||
return createCompactLangNode({
|
||||
lang,
|
||||
totalSize,
|
||||
index,
|
||||
});
|
||||
}),
|
||||
gap: 32,
|
||||
direction: "column",
|
||||
}).join("");
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the default language card layout.
|
||||
*
|
||||
* @param {Lang[]} langs Array of programming languages.
|
||||
* @param {number} width Card width.
|
||||
@ -158,7 +301,7 @@ const renderNormalLayout = (langs, width, totalLanguageSize) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders compact layout to display user's most frequently used programming languages.
|
||||
* Renders the compact language card layout.
|
||||
*
|
||||
* @param {Lang[]} langs Array of programming languages.
|
||||
* @param {number} width Card width.
|
||||
@ -218,60 +361,105 @@ const renderCompactLayout = (langs, width, totalLanguageSize, hideProgress) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates height for the compact layout.
|
||||
* Creates the SVG paths for the language donut chart.
|
||||
*
|
||||
* @param {number} totalLangs Total number of languages.
|
||||
* @returns {number} Card height.
|
||||
* @param {number} cx Donut center x-position.
|
||||
* @param {number} cy Donut center y-position.
|
||||
* @param {number} radius Donut arc Radius.
|
||||
* @param {number[]} percentages Array with donut section percentages.
|
||||
* @returns {{d: string, percent: number}[]} Array of svg path elements
|
||||
*/
|
||||
const calculateCompactLayoutHeight = (totalLangs) => {
|
||||
return 90 + Math.round(totalLangs / 2) * 25;
|
||||
};
|
||||
const createDonutPaths = (cx, cy, radius, percentages) => {
|
||||
const paths = [];
|
||||
let startAngle = 0;
|
||||
let endAngle = 0;
|
||||
|
||||
/**
|
||||
* Calculates height for the normal layout.
|
||||
*
|
||||
* @param {number} totalLangs Total number of languages.
|
||||
* @returns {number} Card height.
|
||||
*/
|
||||
const calculateNormalLayoutHeight = (totalLangs) => {
|
||||
return 45 + (totalLangs + 1) * 40;
|
||||
};
|
||||
const totalPercent = percentages.reduce((acc, curr) => acc + curr, 0);
|
||||
for (let i = 0; i < percentages.length; i++) {
|
||||
const tmpPath = {};
|
||||
|
||||
/**
|
||||
* Hides languages and trims the list to show only the top N languages.
|
||||
*
|
||||
* @param {Record<string, Lang>} topLangs Top languages.
|
||||
* @param {string[]} hide Languages to hide.
|
||||
* @param {string} langs_count Number of languages to show.
|
||||
*/
|
||||
const useLanguages = (topLangs, hide, langs_count) => {
|
||||
let langs = Object.values(topLangs);
|
||||
let langsToHide = {};
|
||||
let langsCount = clampValue(parseInt(langs_count), 1, 10);
|
||||
let percent = parseFloat(
|
||||
((percentages[i] / totalPercent) * 100).toFixed(2),
|
||||
);
|
||||
|
||||
// populate langsToHide map for quick lookup
|
||||
// while filtering out
|
||||
if (hide) {
|
||||
hide.forEach((langName) => {
|
||||
langsToHide[lowercaseTrim(langName)] = true;
|
||||
});
|
||||
endAngle = 3.6 * percent + startAngle;
|
||||
const startPoint = polarToCartesian(cx, cy, radius, endAngle - 90); // rotate donut 90 degrees counter-clockwise.
|
||||
const endPoint = polarToCartesian(cx, cy, radius, startAngle - 90); // rotate donut 90 degrees counter-clockwise.
|
||||
const largeArc = endAngle - startAngle <= 180 ? 0 : 1;
|
||||
|
||||
tmpPath.percent = percent;
|
||||
tmpPath.d = `M ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArc} 0 ${endPoint.x} ${endPoint.y}`;
|
||||
|
||||
paths.push(tmpPath);
|
||||
startAngle = endAngle;
|
||||
}
|
||||
|
||||
// filter out languages to be hidden
|
||||
langs = langs
|
||||
.sort((a, b) => b.size - a.size)
|
||||
.filter((lang) => {
|
||||
return !langsToHide[lowercaseTrim(lang.name)];
|
||||
})
|
||||
.slice(0, langsCount);
|
||||
|
||||
const totalLanguageSize = langs.reduce((acc, curr) => acc + curr.size, 0);
|
||||
|
||||
return { langs, totalLanguageSize };
|
||||
return paths;
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders card to display user's most frequently used programming languages.
|
||||
* Renders the donut language card layout.
|
||||
*
|
||||
* @param {Lang[]} langs Array of programming languages.
|
||||
* @param {number} width Card width.
|
||||
* @param {number} totalLanguageSize Total size of all languages.
|
||||
* @returns {string} Donut layout card SVG object.
|
||||
*/
|
||||
const renderDonutLayout = (langs, width, totalLanguageSize) => {
|
||||
const centerX = width / 3;
|
||||
const centerY = width / 3;
|
||||
const radius = centerX - 60;
|
||||
const strokeWidth = 12;
|
||||
|
||||
const colors = langs.map((lang) => lang.color);
|
||||
const langsPercents = langs.map((lang) =>
|
||||
parseFloat(((lang.size / totalLanguageSize) * 100).toFixed(2)),
|
||||
);
|
||||
|
||||
const langPaths = createDonutPaths(centerX, centerY, radius, langsPercents);
|
||||
|
||||
const donutPaths =
|
||||
langs.length === 1
|
||||
? `<circle cx="${centerX}" cy="${centerY}" r="${radius}" stroke="${colors[0]}" fill="none" stroke-width="${strokeWidth}" data-testid="lang-donut" size="100"/>`
|
||||
: langPaths
|
||||
.map((section, index) => {
|
||||
const staggerDelay = (index + 3) * 100;
|
||||
const delay = staggerDelay + 300;
|
||||
|
||||
const output = `
|
||||
<g class="stagger" style="animation-delay: ${delay}ms">
|
||||
<path
|
||||
data-testid="lang-donut"
|
||||
size="${section.percent}"
|
||||
d="${section.d}"
|
||||
stroke="${colors[index]}"
|
||||
fill="none"
|
||||
stroke-width="${strokeWidth}">
|
||||
</path>
|
||||
</g>
|
||||
`;
|
||||
|
||||
return output;
|
||||
})
|
||||
.join("");
|
||||
|
||||
const donut = `<svg width="${width}" height="${width}">${donutPaths}</svg>`;
|
||||
|
||||
return `
|
||||
<g transform="translate(0, 0)">
|
||||
<g transform="translate(0, 0)">
|
||||
${createDonutLanguagesNode({ langs, totalSize: totalLanguageSize })}
|
||||
</g>
|
||||
|
||||
<g transform="translate(125, ${donutCenterTranslation(langs.length)})">
|
||||
${donut}
|
||||
</g>
|
||||
</g>
|
||||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders card that display user's most frequently used programming languages.
|
||||
*
|
||||
* @param {import('../fetchers/types').TopLangData} topLangs User's most frequently used programming languages.
|
||||
* @param {Partial<import("./types").TopLangOptions>} options Card options.
|
||||
@ -302,7 +490,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
|
||||
translations: langCardLocales,
|
||||
});
|
||||
|
||||
const { langs, totalLanguageSize } = useLanguages(
|
||||
const { langs, totalLanguageSize } = trimTopLanguages(
|
||||
topLangs,
|
||||
hide,
|
||||
String(langs_count),
|
||||
@ -326,6 +514,10 @@ const renderTopLanguages = (topLangs, options = {}) => {
|
||||
totalLanguageSize,
|
||||
hide_progress,
|
||||
);
|
||||
} else if (layout?.toLowerCase() === "donut") {
|
||||
height = calculateDonutLayoutHeight(langs.length);
|
||||
width = width + 50; // padding
|
||||
finalLayout = renderDonutLayout(langs, width, totalLanguageSize);
|
||||
} else {
|
||||
finalLayout = renderNormalLayout(langs, width, totalLanguageSize);
|
||||
}
|
||||
@ -394,4 +586,17 @@ const renderTopLanguages = (topLangs, options = {}) => {
|
||||
`);
|
||||
};
|
||||
|
||||
export { renderTopLanguages, MIN_CARD_WIDTH };
|
||||
export {
|
||||
getLongestLang,
|
||||
degreesToRadians,
|
||||
radiansToDegrees,
|
||||
polarToCartesian,
|
||||
cartesianToPolar,
|
||||
calculateCompactLayoutHeight,
|
||||
calculateNormalLayoutHeight,
|
||||
calculateDonutLayoutHeight,
|
||||
donutCenterTranslation,
|
||||
trimTopLanguages,
|
||||
renderTopLanguages,
|
||||
MIN_CARD_WIDTH,
|
||||
};
|
||||
|
||||
2
src/cards/types.d.ts
vendored
2
src/cards/types.d.ts
vendored
@ -39,7 +39,7 @@ export type TopLangOptions = CommonOptions & {
|
||||
hide_border: boolean;
|
||||
card_width: number;
|
||||
hide: string[];
|
||||
layout: "compact" | "normal";
|
||||
layout: "compact" | "normal" | "donut";
|
||||
custom_title: string;
|
||||
langs_count: number;
|
||||
disable_animations: boolean;
|
||||
|
||||
@ -1,9 +1,20 @@
|
||||
import { queryAllByTestId, queryByTestId } from "@testing-library/dom";
|
||||
import { cssToObject } from "@uppercod/css-to-object";
|
||||
import {
|
||||
MIN_CARD_WIDTH,
|
||||
getLongestLang,
|
||||
degreesToRadians,
|
||||
radiansToDegrees,
|
||||
polarToCartesian,
|
||||
cartesianToPolar,
|
||||
calculateCompactLayoutHeight,
|
||||
calculateNormalLayoutHeight,
|
||||
calculateDonutLayoutHeight,
|
||||
donutCenterTranslation,
|
||||
trimTopLanguages,
|
||||
renderTopLanguages,
|
||||
MIN_CARD_WIDTH,
|
||||
} from "../src/cards/top-languages-card.js";
|
||||
|
||||
// adds special assertions like toHaveTextContent
|
||||
import "@testing-library/jest-dom";
|
||||
|
||||
@ -27,6 +38,205 @@ const langs = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieve the language percentage from the donut chart SVG.
|
||||
* @param {string} d The SVG path element.
|
||||
* @param {number} centerX The center X coordinate of the donut chart.
|
||||
* @param {number} centerY The center Y coordinate of the donut chart.
|
||||
* @returns {number} The percentage of the language.
|
||||
*/
|
||||
const langPercentFromSvg = (d, centerX, centerY) => {
|
||||
const dTmp = d
|
||||
.split(" ")
|
||||
.filter((x) => !isNaN(x))
|
||||
.map((x) => parseFloat(x));
|
||||
const endAngle =
|
||||
cartesianToPolar(centerX, centerY, dTmp[0], dTmp[1]).angleInDegrees + 90;
|
||||
let startAngle =
|
||||
cartesianToPolar(centerX, centerY, dTmp[7], dTmp[8]).angleInDegrees + 90;
|
||||
if (startAngle > endAngle) startAngle -= 360;
|
||||
return (endAngle - startAngle) / 3.6;
|
||||
};
|
||||
|
||||
describe("Test renderTopLanguages helper functions", () => {
|
||||
it("getLongestLang", () => {
|
||||
const langArray = Object.values(langs);
|
||||
expect(getLongestLang(langArray)).toBe(langs.javascript);
|
||||
});
|
||||
|
||||
it("degreesToRadians", () => {
|
||||
expect(degreesToRadians(0)).toBe(0);
|
||||
expect(degreesToRadians(90)).toBe(Math.PI / 2);
|
||||
expect(degreesToRadians(180)).toBe(Math.PI);
|
||||
expect(degreesToRadians(270)).toBe((3 * Math.PI) / 2);
|
||||
expect(degreesToRadians(360)).toBe(2 * Math.PI);
|
||||
});
|
||||
|
||||
it("radiansToDegrees", () => {
|
||||
expect(radiansToDegrees(0)).toBe(0);
|
||||
expect(radiansToDegrees(Math.PI / 2)).toBe(90);
|
||||
expect(radiansToDegrees(Math.PI)).toBe(180);
|
||||
expect(radiansToDegrees((3 * Math.PI) / 2)).toBe(270);
|
||||
expect(radiansToDegrees(2 * Math.PI)).toBe(360);
|
||||
});
|
||||
|
||||
it("polarToCartesian", () => {
|
||||
expect(polarToCartesian(100, 100, 60, 0)).toStrictEqual({ x: 160, y: 100 });
|
||||
expect(polarToCartesian(100, 100, 60, 45)).toStrictEqual({
|
||||
x: 142.42640687119285,
|
||||
y: 142.42640687119285,
|
||||
});
|
||||
expect(polarToCartesian(100, 100, 60, 90)).toStrictEqual({
|
||||
x: 100,
|
||||
y: 160,
|
||||
});
|
||||
expect(polarToCartesian(100, 100, 60, 135)).toStrictEqual({
|
||||
x: 57.573593128807154,
|
||||
y: 142.42640687119285,
|
||||
});
|
||||
expect(polarToCartesian(100, 100, 60, 180)).toStrictEqual({
|
||||
x: 40,
|
||||
y: 100.00000000000001,
|
||||
});
|
||||
expect(polarToCartesian(100, 100, 60, 225)).toStrictEqual({
|
||||
x: 57.57359312880714,
|
||||
y: 57.573593128807154,
|
||||
});
|
||||
expect(polarToCartesian(100, 100, 60, 270)).toStrictEqual({
|
||||
x: 99.99999999999999,
|
||||
y: 40,
|
||||
});
|
||||
expect(polarToCartesian(100, 100, 60, 315)).toStrictEqual({
|
||||
x: 142.42640687119285,
|
||||
y: 57.57359312880714,
|
||||
});
|
||||
expect(polarToCartesian(100, 100, 60, 360)).toStrictEqual({
|
||||
x: 160,
|
||||
y: 99.99999999999999,
|
||||
});
|
||||
});
|
||||
|
||||
it("cartesianToPolar", () => {
|
||||
expect(cartesianToPolar(100, 100, 160, 100)).toStrictEqual({
|
||||
radius: 60,
|
||||
angleInDegrees: 0,
|
||||
});
|
||||
expect(
|
||||
cartesianToPolar(100, 100, 142.42640687119285, 142.42640687119285),
|
||||
).toStrictEqual({ radius: 60.00000000000001, angleInDegrees: 45 });
|
||||
expect(cartesianToPolar(100, 100, 100, 160)).toStrictEqual({
|
||||
radius: 60,
|
||||
angleInDegrees: 90,
|
||||
});
|
||||
expect(
|
||||
cartesianToPolar(100, 100, 57.573593128807154, 142.42640687119285),
|
||||
).toStrictEqual({ radius: 60, angleInDegrees: 135 });
|
||||
expect(cartesianToPolar(100, 100, 40, 100.00000000000001)).toStrictEqual({
|
||||
radius: 60,
|
||||
angleInDegrees: 180,
|
||||
});
|
||||
expect(
|
||||
cartesianToPolar(100, 100, 57.57359312880714, 57.573593128807154),
|
||||
).toStrictEqual({ radius: 60, angleInDegrees: 225 });
|
||||
expect(cartesianToPolar(100, 100, 99.99999999999999, 40)).toStrictEqual({
|
||||
radius: 60,
|
||||
angleInDegrees: 270,
|
||||
});
|
||||
expect(
|
||||
cartesianToPolar(100, 100, 142.42640687119285, 57.57359312880714),
|
||||
).toStrictEqual({ radius: 60.00000000000001, angleInDegrees: 315 });
|
||||
expect(cartesianToPolar(100, 100, 160, 99.99999999999999)).toStrictEqual({
|
||||
radius: 60,
|
||||
angleInDegrees: 360,
|
||||
});
|
||||
});
|
||||
|
||||
it("calculateCompactLayoutHeight", () => {
|
||||
expect(calculateCompactLayoutHeight(0)).toBe(90);
|
||||
expect(calculateCompactLayoutHeight(1)).toBe(115);
|
||||
expect(calculateCompactLayoutHeight(2)).toBe(115);
|
||||
expect(calculateCompactLayoutHeight(3)).toBe(140);
|
||||
expect(calculateCompactLayoutHeight(4)).toBe(140);
|
||||
expect(calculateCompactLayoutHeight(5)).toBe(165);
|
||||
expect(calculateCompactLayoutHeight(6)).toBe(165);
|
||||
expect(calculateCompactLayoutHeight(7)).toBe(190);
|
||||
expect(calculateCompactLayoutHeight(8)).toBe(190);
|
||||
expect(calculateCompactLayoutHeight(9)).toBe(215);
|
||||
expect(calculateCompactLayoutHeight(10)).toBe(215);
|
||||
});
|
||||
|
||||
it("calculateNormalLayoutHeight", () => {
|
||||
expect(calculateNormalLayoutHeight(0)).toBe(85);
|
||||
expect(calculateNormalLayoutHeight(1)).toBe(125);
|
||||
expect(calculateNormalLayoutHeight(2)).toBe(165);
|
||||
expect(calculateNormalLayoutHeight(3)).toBe(205);
|
||||
expect(calculateNormalLayoutHeight(4)).toBe(245);
|
||||
expect(calculateNormalLayoutHeight(5)).toBe(285);
|
||||
expect(calculateNormalLayoutHeight(6)).toBe(325);
|
||||
expect(calculateNormalLayoutHeight(7)).toBe(365);
|
||||
expect(calculateNormalLayoutHeight(8)).toBe(405);
|
||||
expect(calculateNormalLayoutHeight(9)).toBe(445);
|
||||
expect(calculateNormalLayoutHeight(10)).toBe(485);
|
||||
});
|
||||
|
||||
it("calculateDonutLayoutHeight", () => {
|
||||
expect(calculateDonutLayoutHeight(0)).toBe(215);
|
||||
expect(calculateDonutLayoutHeight(1)).toBe(215);
|
||||
expect(calculateDonutLayoutHeight(2)).toBe(215);
|
||||
expect(calculateDonutLayoutHeight(3)).toBe(215);
|
||||
expect(calculateDonutLayoutHeight(4)).toBe(215);
|
||||
expect(calculateDonutLayoutHeight(5)).toBe(215);
|
||||
expect(calculateDonutLayoutHeight(6)).toBe(247);
|
||||
expect(calculateDonutLayoutHeight(7)).toBe(279);
|
||||
expect(calculateDonutLayoutHeight(8)).toBe(311);
|
||||
expect(calculateDonutLayoutHeight(9)).toBe(343);
|
||||
expect(calculateDonutLayoutHeight(10)).toBe(375);
|
||||
});
|
||||
|
||||
it("donutCenterTranslation", () => {
|
||||
expect(donutCenterTranslation(0)).toBe(-45);
|
||||
expect(donutCenterTranslation(1)).toBe(-45);
|
||||
expect(donutCenterTranslation(2)).toBe(-45);
|
||||
expect(donutCenterTranslation(3)).toBe(-45);
|
||||
expect(donutCenterTranslation(4)).toBe(-45);
|
||||
expect(donutCenterTranslation(5)).toBe(-45);
|
||||
expect(donutCenterTranslation(6)).toBe(-29);
|
||||
expect(donutCenterTranslation(7)).toBe(-13);
|
||||
expect(donutCenterTranslation(8)).toBe(3);
|
||||
expect(donutCenterTranslation(9)).toBe(19);
|
||||
expect(donutCenterTranslation(10)).toBe(35);
|
||||
});
|
||||
|
||||
it("trimTopLanguages", () => {
|
||||
expect(trimTopLanguages([])).toStrictEqual({
|
||||
langs: [],
|
||||
totalLanguageSize: 0,
|
||||
});
|
||||
expect(trimTopLanguages([langs.javascript])).toStrictEqual({
|
||||
langs: [langs.javascript],
|
||||
totalLanguageSize: 200,
|
||||
});
|
||||
expect(
|
||||
trimTopLanguages([langs.javascript, langs.HTML], [], 5),
|
||||
).toStrictEqual({
|
||||
langs: [langs.javascript, langs.HTML],
|
||||
totalLanguageSize: 400,
|
||||
});
|
||||
expect(trimTopLanguages(langs, [], 5)).toStrictEqual({
|
||||
langs: Object.values(langs),
|
||||
totalLanguageSize: 500,
|
||||
});
|
||||
expect(trimTopLanguages(langs, [], 2)).toStrictEqual({
|
||||
langs: Object.values(langs).slice(0, 2),
|
||||
totalLanguageSize: 400,
|
||||
});
|
||||
expect(trimTopLanguages(langs, ["javascript"], 5)).toStrictEqual({
|
||||
langs: [langs.HTML, langs.css],
|
||||
totalLanguageSize: 300,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Test renderTopLanguages", () => {
|
||||
it("should render correctly", () => {
|
||||
document.body.innerHTML = renderTopLanguages(langs);
|
||||
@ -236,6 +446,81 @@ describe("Test renderTopLanguages", () => {
|
||||
);
|
||||
});
|
||||
|
||||
it("should render with layout donut", () => {
|
||||
document.body.innerHTML = renderTopLanguages(langs, { layout: "donut" });
|
||||
|
||||
expect(queryByTestId(document.body, "header")).toHaveTextContent(
|
||||
"Most Used Languages",
|
||||
);
|
||||
|
||||
expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
|
||||
"HTML 40.00%",
|
||||
);
|
||||
expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
|
||||
"size",
|
||||
"40",
|
||||
);
|
||||
const d = queryAllByTestId(document.body, "lang-donut")[0]
|
||||
.getAttribute("d")
|
||||
.split(" ")
|
||||
.filter((x) => !isNaN(x))
|
||||
.map((x) => parseFloat(x));
|
||||
const center = { x: d[7], y: d[7] };
|
||||
const HTMLLangPercent = langPercentFromSvg(
|
||||
queryAllByTestId(document.body, "lang-donut")[0].getAttribute("d"),
|
||||
center.x,
|
||||
center.y,
|
||||
);
|
||||
expect(HTMLLangPercent).toBeCloseTo(40);
|
||||
|
||||
expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
|
||||
"javascript 40.00%",
|
||||
);
|
||||
expect(queryAllByTestId(document.body, "lang-donut")[1]).toHaveAttribute(
|
||||
"size",
|
||||
"40",
|
||||
);
|
||||
const javascriptLangPercent = langPercentFromSvg(
|
||||
queryAllByTestId(document.body, "lang-donut")[1].getAttribute("d"),
|
||||
center.x,
|
||||
center.y,
|
||||
);
|
||||
expect(javascriptLangPercent).toBeCloseTo(40);
|
||||
|
||||
expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
|
||||
"css 20.00%",
|
||||
);
|
||||
expect(queryAllByTestId(document.body, "lang-donut")[2]).toHaveAttribute(
|
||||
"size",
|
||||
"20",
|
||||
);
|
||||
const cssLangPercent = langPercentFromSvg(
|
||||
queryAllByTestId(document.body, "lang-donut")[2].getAttribute("d"),
|
||||
center.x,
|
||||
center.y,
|
||||
);
|
||||
expect(cssLangPercent).toBeCloseTo(20);
|
||||
|
||||
expect(HTMLLangPercent + javascriptLangPercent + cssLangPercent).toBe(100);
|
||||
|
||||
// Should render full donut (circle) if one language is 100%.
|
||||
document.body.innerHTML = renderTopLanguages(
|
||||
{ HTML: langs.HTML },
|
||||
{ layout: "donut" },
|
||||
);
|
||||
expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
|
||||
"HTML 100.00%",
|
||||
);
|
||||
expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
|
||||
"size",
|
||||
"100",
|
||||
);
|
||||
expect(queryAllByTestId(document.body, "lang-donut")).toHaveLength(1);
|
||||
expect(queryAllByTestId(document.body, "lang-donut")[0].tagName).toBe(
|
||||
"circle",
|
||||
);
|
||||
});
|
||||
|
||||
it("should render a translated title", () => {
|
||||
document.body.innerHTML = renderTopLanguages(langs, { locale: "cn" });
|
||||
expect(document.getElementsByClassName("header")[0].textContent).toBe(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user