@@ -61,14 +61,14 @@ const createTextNode = ({
6161const cardProgress = hideProgress
6262 ?null
6363 :createProgressNode ( {
64- x :110 ,
65- y :4 ,
66- progress :percent ,
67- color :progressBarColor ,
68- width :220 ,
69- name :label ,
70- progressBarBackgroundColor,
71- } ) ;
64+ x :110 ,
65+ y :4 ,
66+ progress :percent ,
67+ color :progressBarColor ,
68+ width :220 ,
69+ name :label ,
70+ progressBarBackgroundColor,
71+ } ) ;
7272
7373return `
7474 <g class="stagger" style="animation-delay:${ staggerDelay } ms" transform="translate(25, 0)">
@@ -129,26 +129,15 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
129129 theme,
130130} ) ;
131131
132- const statItems = languages
132+ const filteredLanguages = languages
133133 ?languages
134- . filter ( ( language ) => language . hours || language . minutes )
135- . slice ( 0 , langsCount )
136- . map ( ( language ) => {
137- return createTextNode ( {
138- id :language . name ,
139- label :language . name ,
140- value :language . text ,
141- percent :language . percent ,
142- progressBarColor :titleColor ,
143- progressBarBackgroundColor :textColor ,
144- hideProgress :hide_progress ,
145- } ) ;
146- } )
134+ . filter ( ( language ) => language . hours || language . minutes )
135+ . slice ( 0 , langsCount )
147136 :[ ] ;
148137
149138// Calculate the card height depending on how many items there are
150139// but if rank circle is visible clamp the minimum height to `150`
151- let height = Math . max ( 45 + ( statItems . length + 1 ) * lheight , 150 ) ;
140+ let height = Math . max ( 45 + ( filteredLanguages . length + 1 ) * lheight , 150 ) ;
152141
153142const cssStyles = getStyles ( {
154143 titleColor,
@@ -163,17 +152,17 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
163152// RENDER COMPACT LAYOUT
164153if ( layout === "compact" ) {
165154width = width + 50 ;
166- height = 90 + Math . round ( languages . length / 2 ) * 25 ;
155+ height = 90 + Math . round ( filteredLanguages . length / 2 ) * 25 ;
167156
168157// progressOffset holds the previous language's width and used to offset the next language
169158// so that we can stack them one after another, like this: [--][----][---]
170159let progressOffset = 0 ;
171- const compactProgressBar = languages
172- . map ( ( lang ) => {
160+ const compactProgressBar = filteredLanguages
161+ . map ( ( language ) => {
173162// const progress = (width * lang.percent) / 100;
174- const progress = ( ( width - 25 ) * lang . percent ) / 100 ;
163+ const progress = ( ( width - 25 ) * language . percent ) / 100 ;
175164
176- const languageColor = languageColors [ lang . name ] || "#858585" ;
165+ const languageColor = languageColors [ language . name ] || "#858585" ;
177166
178167const output = `
179168 <rect
@@ -197,22 +186,33 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
197186 </mask>
198187${ compactProgressBar }
199188${ createLanguageTextNode ( {
200- x :0 ,
201- y :25 ,
202- langs :languages ,
203- totalSize :100 ,
204- } ) . join ( "" ) }
189+ x :0 ,
190+ y :25 ,
191+ langs :filteredLanguages ,
192+ totalSize :100 ,
193+ } ) . join ( "" ) }
205194 ` ;
206195} else {
207196finalLayout = flexLayout ( {
208- items :statItems . length
209- ?statItems
197+ items :filteredLanguages . length
198+ ?filteredLanguages
199+ . map ( ( language ) => {
200+ return createTextNode ( {
201+ id :language . name ,
202+ label :language . name ,
203+ value :language . text ,
204+ percent :language . percent ,
205+ progressBarColor :titleColor ,
206+ progressBarBackgroundColor :textColor ,
207+ hideProgress :hide_progress ,
208+ } ) ;
209+ } )
210210 :[
211- noCodingActivityNode ( {
212- color :textColor ,
213- text :i18n . t ( "wakatimecard.nocodingactivity" ) ,
214- } ) ,
215- ] ,
211+ noCodingActivityNode ( {
212+ color :textColor ,
213+ text :i18n . t ( "wakatimecard.nocodingactivity" ) ,
214+ } ) ,
215+ ] ,
216216gap :lheight ,
217217direction :"column" ,
218218} ) . join ( "" ) ;