Skip to content

Commit f642627

Browse files
committed
fix: add icon width to stats-card min width calculation
1 parent dc78bad commit f642627

File tree

1 file changed

+14
-17
lines changed

1 file changed

+14
-17
lines changed

src/cards/stats-card.js

+14-17
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ const createTextNode = ({
3535
<g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
3636
${iconSvg}
3737
<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"
4242
data-testid="${id}"
4343
>${kValue}</text>
4444
</g>
@@ -76,7 +76,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
7676
disable_animations = false,
7777
} = options;
7878

79-
8079
const lheight = parseInt(line_height, 10);
8180

8281
// returns theme based colors with proper overrides and defaults
@@ -186,20 +185,18 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
186185
};
187186

188187
/*
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).
191190
Numbers are picked by looking at existing dimensions on production.
192191
*/
192+
const iconWidth = show_icons ? 16 : 0;
193193
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;
201198
if (width < minCardWidth) {
202-
width = minCardWidth
199+
width = minCardWidth;
203200
}
204201

205202
const card = new Card({
@@ -226,7 +223,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
226223
// Conditionally rendered elements
227224
const rankCircle = hide_rank
228225
? ""
229-
: `<g data-testid="rank-circle"
226+
: `<g data-testid="rank-circle"
230227
transform="translate(${width - 50}, ${height / 2 - 50})">
231228
<circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
232229
<circle class="rank-circle" cx="-10" cy="8" r="40" />
@@ -252,7 +249,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
252249
gap: lheight,
253250
direction: "column",
254251
}).join("")}
255-
</svg>
252+
</svg>
256253
`);
257254
};
258255

0 commit comments

Comments
 (0)