fix: use svg instead of mask

Author: astandrik

.gitignore

@@ -22,6 +22,7 @@ playwright-artifacts
 .env.test.local
 .env.production.local
 .vscode
+.cursor
 
 npm-debug.log*
 yarn-debug.log*

src/components/DoughnutMetrics/DoughnutMetrics.scss

@@ -1,41 +1,50 @@
 .ydb-doughnut-metrics {
-    --doughnut-border: 16px;
-    --doughnut-width: 100px;
-    --doughnut-wrapper-indent: calc(var(--doughnut-border) + 5px);
     --doughnut-color: var(--g-color-base-positive-heavy);
     --doughnut-backdrop-color: var(--g-color-base-generic);
     --doughnut-overlap-color: var(--g-color-base-positive-heavy-hover);
     --doughnut-text-color: var(--g-color-text-positive-heavy);
 
+    position: relative;
+
     &__doughnut {
         position: relative;
 
-        width: var(--doughnut-width);
-        aspect-ratio: 1;
+        display: block;
+
+        // Enable smooth rendering for SVG
+        shape-rendering: geometricPrecision;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
 
-        border-radius: 50%;
-        mask: radial-gradient(circle at center, transparent 46%, #000 46.5%);
+        // Ensure SVG renders smoothly
+        image-rendering: smooth;
+        will-change: transform;
 
-        transform: rotate(180deg);
+        // Preserve rotation origin
+        transform-origin: center;
     }
 
-    // Size modifiers - using visually centered values
+    // Size modifiers
     &__doughnut_size_small {
-        --doughnut-border: 12px;
-        --doughnut-width: 65px;
-        --doughnut-wrapper-indent: 15px;
+        width: 65px;
+        height: 65px;
     }
 
     &__doughnut_size_medium {
-        --doughnut-border: 16px;
-        --doughnut-width: 100px;
-        --doughnut-wrapper-indent: calc(var(--doughnut-border) + 5px);
+        width: 100px;
+        height: 100px;
     }
 
     &__doughnut_size_large {
-        --doughnut-border: 20px;
-        --doughnut-width: 130px;
-        --doughnut-wrapper-indent: 25px;
+        width: 130px;
+        height: 130px;
+    }
+
+    // Progress circle animation
+    &__progress-circle,
+    &__overlap-circle {
+        transition: stroke-dasharray 0.3s ease;
+        transform-origin: center;
     }
 
     &_status_warning {
@@ -51,19 +60,20 @@
     &__text-wrapper {
         position: absolute;
         z-index: 1;
-        top: var(--doughnut-wrapper-indent);
-        left: var(--doughnut-wrapper-indent);
+        top: 50%;
+        left: 50%;
 
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
 
-        width: calc(100% - calc(var(--doughnut-wrapper-indent) * 2));
+        width: 100%;
+        height: 100%;
 
         text-align: center;
 
-        aspect-ratio: 1;
+        transform: translate(-50%, -50%);
     }
 
     &__value {

src/components/DoughnutMetrics/DoughnutMetrics.tsx

@@ -77,24 +77,81 @@ export function DoughnutMetrics({
     className,
     size = 'medium',
 }: DoughnutProps) {
-    let filledDegrees = fillWidth * 3.6;
-    let doughnutFillVar = 'var(--doughnut-color)';
-    let doughnutBackdropVar = 'var(--doughnut-backdrop-color)';
-
-    if (filledDegrees > 360) {
-        filledDegrees -= 360;
-        doughnutBackdropVar = 'var(--doughnut-color)';
-        doughnutFillVar = 'var(--doughnut-overlap-color)';
+    // Size configurations
+    const sizeConfig = {
+        small: {width: 65, strokeWidth: 12},
+        medium: {width: 100, strokeWidth: 16},
+        large: {width: 130, strokeWidth: 20},
+    };
+
+    const config = sizeConfig[size];
+    const radius = (config.width - config.strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+
+    // Calculate stroke dash for filled portion
+    let strokeDasharray: string;
+    // Start from bottom (270 degrees = 0.75 of circumference)
+    const strokeDashoffset = circumference * 0.75;
+
+    if (fillWidth <= 100) {
+        const filledLength = (fillWidth / 100) * circumference;
+        // Use negative dash to go counter-clockwise
+        strokeDasharray = `0 ${circumference - filledLength} ${filledLength} 0`;
+    } else {
+        // For values over 100%, we need to show overlap
+        strokeDasharray = `0 0 ${circumference} 0`;
+        // We'll use a second circle for the overlap
     }
 
-    const doughnutStyle: React.CSSProperties = {
-        background: `conic-gradient(${doughnutFillVar} 0deg ${filledDegrees}deg, ${doughnutBackdropVar} ${filledDegrees}deg 360deg)`,
-    };
+    const needsOverlapCircle = fillWidth > 100;
+    const overlapDasharray = needsOverlapCircle
+        ? `0 ${circumference - ((fillWidth - 100) / 100) * circumference} ${((fillWidth - 100) / 100) * circumference} 0`
+        : '0 0';
 
     return (
         <SizeContext.Provider value={size}>
             <div className={b({status}, className)} style={{position: 'relative'}}>
-                <div style={doughnutStyle} className={b('doughnut', {size})}></div>
+                <svg width={config.width} height={config.width} className={b('doughnut', {size})}>
+                    {/* Background circle */}
+                    <circle
+                        cx={config.width / 2}
+                        cy={config.width / 2}
+                        r={radius}
+                        fill="none"
+                        stroke="var(--doughnut-backdrop-color)"
+                        strokeWidth={config.strokeWidth}
+                    />
+
+                    {/* Progress circle */}
+                    <circle
+                        cx={config.width / 2}
+                        cy={config.width / 2}
+                        r={radius}
+                        fill="none"
+                        stroke="var(--doughnut-color)"
+                        strokeWidth={config.strokeWidth}
+                        strokeDasharray={strokeDasharray}
+                        strokeDashoffset={strokeDashoffset}
+                        strokeLinecap="butt"
+                        className={b('progress-circle')}
+                    />
+
+                    {/* Overlap circle for values > 100% */}
+                    {needsOverlapCircle && (
+                        <circle
+                            cx={config.width / 2}
+                            cy={config.width / 2}
+                            r={radius}
+                            fill="none"
+                            stroke="var(--doughnut-overlap-color)"
+                            strokeWidth={config.strokeWidth}
+                            strokeDasharray={overlapDasharray}
+                            strokeDashoffset={strokeDashoffset}
+                            strokeLinecap="butt"
+                            className={b('overlap-circle')}
+                        />
+                    )}
+                </svg>
                 <div className={b('text-wrapper')}>{children}</div>
             </div>
         </SizeContext.Provider>