@@ -35,10 +35,10 @@ const createTextNode = ({
35
35
<g class="stagger" style="animation-delay: ${ staggerDelay } ms" transform="translate(25, 0)">
36
36
${ iconSvg }
37
37
<text class="stat bold" ${ labelOffset } y="12.5">${ label } :</text>
38
- <text
39
- class="stat"
40
- x="${ ( showIcons ? 140 : 120 ) + shiftValuePos } "
41
- y="12.5"
38
+ <text
39
+ class="stat"
40
+ x="${ ( showIcons ? 140 : 120 ) + shiftValuePos } "
41
+ y="12.5"
42
42
data-testid="${ id } "
43
43
>${ kValue } </text>
44
44
</g>
@@ -76,7 +76,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
76
76
disable_animations = false ,
77
77
} = options ;
78
78
79
-
80
79
const lheight = parseInt ( line_height , 10 ) ;
81
80
82
81
// returns theme based colors with proper overrides and defaults
@@ -186,20 +185,18 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
186
185
} ;
187
186
188
187
/*
189
- When hide_rank=true, minimum card width is max of 270 and length of title + paddings .
190
- When hide_rank=false, minimum card_width is 340.
188
+ When hide_rank=true, the minimum card width is 270 px + the title length and padding .
189
+ When hide_rank=false, the minimum card_width is 340 px + the icon width (if show_icons=true) .
191
190
Numbers are picked by looking at existing dimensions on production.
192
191
*/
192
+ const iconWidth = show_icons ? 16 : 0 ;
193
193
const minCardWidth = hide_rank
194
- ? clampValue (
195
- 50 /* padding */ + calculateTextWidth ( ) * 2 ,
196
- 270 ,
197
- Infinity )
198
- : 340
199
- const defaultCardWidth = hide_rank ? 270 : 495
200
- let width = isNaN ( card_width ) ? defaultCardWidth : card_width
194
+ ? clampValue ( 50 /* padding */ + calculateTextWidth ( ) * 2 , 270 , Infinity )
195
+ : 340 + iconWidth ;
196
+ const defaultCardWidth = hide_rank ? 270 : 495 ;
197
+ let width = isNaN ( card_width ) ? defaultCardWidth : card_width ;
201
198
if ( width < minCardWidth ) {
202
- width = minCardWidth
199
+ width = minCardWidth ;
203
200
}
204
201
205
202
const card = new Card ( {
@@ -226,7 +223,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
226
223
// Conditionally rendered elements
227
224
const rankCircle = hide_rank
228
225
? ""
229
- : `<g data-testid="rank-circle"
226
+ : `<g data-testid="rank-circle"
230
227
transform="translate(${ width - 50 } , ${ height / 2 - 50 } )">
231
228
<circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
232
229
<circle class="rank-circle" cx="-10" cy="8" r="40" />
@@ -252,7 +249,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
252
249
gap : lheight ,
253
250
direction : "column" ,
254
251
} ) . join ( "" ) }
255
- </svg>
252
+ </svg>
256
253
` ) ;
257
254
} ;
258
255
0 commit comments