@@ -39,41 +39,36 @@ const getLongestLang = (arr) =>
3939 * Creates a node to display usage of a programming language in percentage
4040 * using text and a horizontal progress bar.
4141 *
42- * @param {object } props Function properties.
42+ * @param {object[] } props Function properties.
4343 * @param {number } props.width The card width
4444 * @param {string } props.name Name of the programming language.
4545 * @param {string } props.color Color of the programming language.
4646 * @param {string } props.progress Usage of the programming language in percentage.
47- * @param {number } props.index Index of the programming language.
4847 * @returns {string } Programming language SVG node.
4948 */
50- const createProgressTextNode = ( { width, color, name, progress, index } ) => {
51- const staggerDelay = ( index + 3 ) * 150 ;
49+ const createProgressTextNode = ( { width, color, name, progress } ) => {
5250 const paddingRight = 95 ;
5351 const progressTextX = width - paddingRight + 10 ;
5452 const progressWidth = width - paddingRight ;
5553
5654 return `
57- <g class="stagger" style="animation-delay: ${ staggerDelay }
58- <text data-testid="lang-name" x="2" y="15" class="lang-name">${ name }
59- <text x="${ progressTextX } ${ progress }
60- ${ createProgressNode ( {
61- x : 0 ,
62- y : 25 ,
63- color,
64- width : progressWidth ,
65- progress,
66- progressBarBackgroundColor : "#ddd" ,
67- delay : staggerDelay + 300 ,
68- } ) }
69- </g>
55+ <text data-testid="lang-name" x="2" y="15" class="lang-name">${ name }
56+ <text x="${ progressTextX } ${ progress }
57+ ${ createProgressNode ( {
58+ x : 0 ,
59+ y : 25 ,
60+ color,
61+ width : progressWidth ,
62+ progress,
63+ progressBarBackgroundColor : "#ddd" ,
64+ } ) }
7065 ` ;
7166} ;
7267
7368/**
7469 * Creates a text only node to display usage of a programming language in percentage.
7570 *
76- * @param {object } props Function properties.
71+ * @param {object[] } props Function properties.
7772 * @param {Lang } props.lang Programming language object.
7873 * @param {number } props.totalSize Total size of all languages.
7974 * @param {boolean } props.hideProgress Whether to hide percentage.
@@ -82,11 +77,10 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => {
8277 */
8378const createCompactLangNode = ( { lang, totalSize, hideProgress, index } ) => {
8479 const percentage = ( ( lang . size / totalSize ) * 100 ) . toFixed ( 2 ) ;
85- const staggerDelay = ( index + 3 ) * 150 ;
8680 const color = lang . color || "#858585" ;
8781
8882 return `
89- <g class="stagger" style="animation-delay: ${ staggerDelay } ms" >
83+ <g>
9084 <circle cx="5" cy="6" r="5" fill="${ color }
9185 <text data-testid="lang-name" x="15" y="10" class='lang-name'>
9286 ${ lang . name } ${ hideProgress ? "" : percentage + "%" }
@@ -143,13 +137,12 @@ const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
143137 */
144138const renderNormalLayout = ( langs , width , totalLanguageSize ) => {
145139 return flexLayout ( {
146- items : langs . map ( ( lang , index ) => {
140+ items : langs . map ( ( lang ) => {
147141 return createProgressTextNode ( {
148- width,
142+ width : width ,
149143 name : lang . name ,
150144 color : lang . color || DEFAULT_LANG_COLOR ,
151145 progress : ( ( lang . size / totalLanguageSize ) * 100 ) . toFixed ( 2 ) ,
152- index,
153146 } ) ;
154147 } ) ,
155148 gap : 40 ,
@@ -294,7 +287,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
294287 langs_count = DEFAULT_LANGS_COUNT ,
295288 border_radius,
296289 border_color,
297- disable_animations,
298290 } = options ;
299291
300292 const i18n = new I18n ( {
@@ -348,43 +340,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
348340 colors,
349341 } ) ;
350342
351- if ( disable_animations ) card . disableAnimations ( ) ;
352-
343+ card . disableAnimations ( ) ;
353344 card . setHideBorder ( hide_border ) ;
354345 card . setHideTitle ( hide_title ) ;
355346 card . setCSS (
356- `
357- @keyframes slideInAnimation {
358- from {
359- width: 0;
360- }
361- to {
362- width: calc(100%-100px);
363- }
364- }
365- @keyframes growWidthAnimation {
366- from {
367- width: 0;
368- }
369- to {
370- width: 100%;
371- }
372- }
373- .lang-name {
374- font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
375- fill: ${ colors . textColor }
376- }
377- .stagger {
378- opacity: 0;
379- animation: fadeInAnimation 0.3s ease-in-out forwards;
380- }
381- #rect-mask rect{
382- animation: slideInAnimation 1s ease-in-out forwards;
383- }
384- .lang-progress{
385- animation: growWidthAnimation 0.6s ease-in-out forwards;
386- }
387- ` ,
347+ `.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${ colors . textColor } ,
388348 ) ;
389349
390350 return card . render ( `
0 commit comments