Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitc0d7493

Browse files
authored
Fix truncation of compact wakatime progress bar when langs_count is set (anuraghazra#2228)
* refactor: use default value for languages* fix: truncated compact progress bar* test: add test for truncated compact progress bar with langs_count set
1 parentf993f21 commitc0d7493

File tree

3 files changed

+180
-11
lines changed

3 files changed

+180
-11
lines changed

‎src/cards/wakatime-card.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ const recalculatePercentages = (languages) => {
159159
*@returns {string} WakaTime card SVG.
160160
*/
161161
constrenderWakatimeCard=(stats={},options={hide:[]})=>{
162-
let{ languages}=stats;
162+
let{ languages=[]}=stats;
163163
const{
164164
hide_title=false,
165165
hide_border=false,
@@ -174,20 +174,24 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
174174
custom_title,
175175
locale,
176176
layout,
177-
langs_count=languages ?languages.length :0,
177+
langs_count=languages.length,
178178
border_radius,
179179
border_color,
180180
}=options;
181181

182182
constshouldHideLangs=Array.isArray(hide)&&hide.length>0;
183-
if(shouldHideLangs&&languages!==undefined){
183+
if(shouldHideLangs){
184184
constlanguagesToHide=newSet(hide.map((lang)=>lowercaseTrim(lang)));
185185
languages=languages.filter(
186186
(lang)=>!languagesToHide.has(lowercaseTrim(lang.name)),
187187
);
188-
recalculatePercentages(languages);
189188
}
190189

190+
// Since the percentages are sorted in descending order, we can just
191+
// slice from the beginning without sorting.
192+
languages=languages.slice(0,langs_count);
193+
recalculatePercentages(languages);
194+
191195
consti18n=newI18n({
192196
locale,
193197
translations:wakatimeCardLocales,
@@ -209,10 +213,8 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
209213
});
210214

211215
constfilteredLanguages=languages
212-
?languages
213-
.filter((language)=>language.hours||language.minutes)
214-
.slice(0,langsCount)
215-
:[];
216+
.filter((language)=>language.hours||language.minutes)
217+
.slice(0,langsCount);
216218

217219
// Calculate the card height depending on how many items there are
218220
// but if rank circle is visible clamp the minimum height to `150`

‎tests/__snapshots__/renderWakatimeCard.test.js.snap‎

Lines changed: 161 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,17 +122,175 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
122122
data-testid="lang-progress"
123123
x="0"
124124
y="0"
125-
width="6.6495"
125+
width="415.61699999999996"
126126
height="8"
127127
fill="#858585"
128128
/>
129129
130130
<rect
131131
mask="url(#rect-mask)"
132132
data-testid="lang-progress"
133-
x="6.6495"
133+
x="415.61699999999996"
134134
y="0"
135-
width="0.465"
135+
width="29.0625"
136+
height="8"
137+
fill="#3178c6"
138+
/>
139+
140+
141+
<gtransform="translate(25, 25)">
142+
<circlecx="5"cy="6"r="5"fill="#858585" />
143+
<textdata-testid="lang-name"x="15"y="10"class='lang-name'>
144+
Other - 19 mins
145+
</text>
146+
</g>
147+
148+
<gtransform="translate(230, 25)">
149+
<circlecx="5"cy="6"r="5"fill="#3178c6" />
150+
<textdata-testid="lang-name"x="15"y="10"class='lang-name'>
151+
TypeScript - 1 min
152+
</text>
153+
</g>
154+
155+
156+
</svg>
157+
158+
</g>
159+
</svg>
160+
"
161+
`;
162+
163+
exports[`Test Render Wakatime Card should render correctly with compact layout when langs_count is set 1`]=`
164+
"
165+
<svg
166+
width="495"
167+
height="115"
168+
viewBox="0 0 495 115"
169+
fill="none"
170+
xmlns="http://www.w3.org/2000/svg"
171+
role="img"
172+
aria-labelledby="descId"
173+
>
174+
<titleid="titleId"></title>
175+
<descid="descId"></desc>
176+
<style>
177+
.header{
178+
font:600 18px'Segoe UI',Ubuntu,Sans-Serif;
179+
fill: #2f80ed;
180+
animation:fadeInAnimation 0.8sease-in-outforwards;
181+
}
182+
@supports(-moz-appearance: auto){
183+
/* Selector detects Firefox*/
184+
.header { font-size: 15.5px; }
185+
}
186+
187+
188+
.stat{
189+
font:600 14px'Segoe UI',Ubuntu,"Helvetica Neue",Sans-Serif;fill: #434d58;
190+
}
191+
@supports(-moz-appearance: auto){
192+
/* Selector detects Firefox*/
193+
.stat { font-size:12px; }
194+
}
195+
.stagger{
196+
opacity:0;
197+
animation:fadeInAnimation 0.3sease-in-outforwards;
198+
}
199+
.rank-text{
200+
font:800 24px'Segoe UI',Ubuntu,Sans-Serif;fill: #434d58;
201+
animation:scaleInAnimation 0.3sease-in-outforwards;
202+
}
203+
204+
.not_bold{font-weight:400}
205+
.bold{font-weight:700}
206+
.icon{
207+
fill: #4c71f2;
208+
display:none;
209+
}
210+
211+
.rank-circle-rim{
212+
stroke: #2f80ed;
213+
fill:none;
214+
stroke-width:6;
215+
opacity:0.2;
216+
}
217+
.rank-circle{
218+
stroke: #2f80ed;
219+
stroke-dasharray:250;
220+
fill:none;
221+
stroke-width:6;
222+
stroke-linecap:round;
223+
opacity:0.8;
224+
transform-origin:-10px 8px;
225+
transform:rotate(-90deg);
226+
animation:rankAnimation 1sforwardsease-in-out;
227+
}
228+
229+
230+
.lang-name{font:400 11px'Segoe UI',Ubuntu,Sans-Serif;fill: #434d58}
231+
232+
233+
234+
235+
</style>
236+
237+
238+
239+
<rect
240+
data-testid="card-bg"
241+
x="0.5"
242+
y="0.5"
243+
rx="4.5"
244+
height="99%"
245+
stroke="#e4e2e2"
246+
width="494"
247+
fill="#fffefe"
248+
stroke-opacity="1"
249+
/>
250+
251+
252+
<g
253+
data-testid="card-title"
254+
transform="translate(25, 35)"
255+
>
256+
<gtransform="translate(0, 0)">
257+
<text
258+
x="0"
259+
y="0"
260+
class="header"
261+
data-testid="header"
262+
>Wakatime Stats</text>
263+
</g>
264+
</g>
265+
266+
267+
<g
268+
data-testid="main-card-body"
269+
transform="translate(0, 55)"
270+
>
271+
272+
<svgx="0"y="0"width="100%">
273+
274+
<maskid="rect-mask">
275+
<rectx="25"y="0"width="440"height="8"fill="white"rx="5" />
276+
</mask>
277+
278+
<rect
279+
mask="url(#rect-mask)"
280+
data-testid="lang-progress"
281+
x="0"
282+
y="0"
283+
width="436.4025"
284+
height="8"
285+
fill="#858585"
286+
/>
287+
288+
<rect
289+
mask="url(#rect-mask)"
290+
data-testid="lang-progress"
291+
x="436.4025"
292+
y="0"
293+
width="30.503999999999998"
136294
height="8"
137295
fill="#3178c6"
138296
/>

‎tests/renderWakatimeCard.test.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,15 @@ describe("Test Render Wakatime Card", () => {
1616
expect(card).toMatchSnapshot();
1717
});
1818

19+
it("should render correctly with compact layout when langs_count is set",()=>{
20+
constcard=renderWakatimeCard(wakaTimeData.data,{
21+
layout:"compact",
22+
langs_count:2,
23+
});
24+
25+
expect(card).toMatchSnapshot();
26+
});
27+
1928
it("should hide languages when hide is passed",()=>{
2029
document.body.innerHTML=renderWakatimeCard(wakaTimeData.data,{
2130
hide:["YAML","Other"],

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp