fix: use svg instead of mask for doughnuts (#2600)

astandrik · web-flow · commit dcbefa1fba14 · 2025-07-23T11:05:42.000Z
diff --git a/.gitignore b/.gitignore
@@ -22,6 +22,7 @@ playwright-artifacts
 .env.test.local
 .env.production.local
 .vscode
+.cursor
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/src/components/DoughnutMetrics/DoughnutMetrics.scss b/src/components/DoughnutMetrics/DoughnutMetrics.scss
@@ -1,69 +1,66 @@
 .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;
-
-        border-radius: 50%;
-        mask: radial-gradient(circle at center, transparent 46%, #000 46.5%);
+        display: block;
 
-        transform: rotate(180deg);
-    }
+        // Enable smooth rendering for SVG
+        shape-rendering: geometricPrecision;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
 
-    // Size modifiers - using visually centered values
-    &__doughnut_size_small {
-        --doughnut-border: 12px;
-        --doughnut-width: 65px;
-        --doughnut-wrapper-indent: 15px;
-    }
+        // Ensure SVG renders smoothly
+        image-rendering: smooth;
+        will-change: transform;
 
-    &__doughnut_size_medium {
-        --doughnut-border: 16px;
-        --doughnut-width: 100px;
-        --doughnut-wrapper-indent: calc(var(--doughnut-border) + 5px);
+        // Preserve rotation origin
+        transform-origin: center;
     }
 
-    &__doughnut_size_large {
-        --doughnut-border: 20px;
-        --doughnut-width: 130px;
-        --doughnut-wrapper-indent: 25px;
+    // Progress circle animation
+    &__progress-circle,
+    &__overlap-circle {
+        transition: stroke-dasharray 0.3s ease;
+        transform-origin: center;
     }
 
+    // Status modifiers
     &_status_warning {
         --doughnut-color: var(--g-color-base-warning-heavy);
         --doughnut-overlap-color: var(--g-color-base-warning-heavy-hover);
         --doughnut-text-color: var(--g-color-text-warning);
     }
+
     &_status_danger {
         --doughnut-color: var(--g-color-base-danger-heavy);
         --doughnut-overlap-color: var(--g-color-base-danger-heavy-hover);
         --doughnut-text-color: var(--g-color-base-danger-heavy);
     }
+
     &__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 {
diff --git a/src/components/DoughnutMetrics/DoughnutMetrics.tsx b/src/components/DoughnutMetrics/DoughnutMetrics.tsx
@@ -6,12 +6,24 @@ import {Flex, HelpMark, Text} from '@gravity-ui/uikit';
 import {cn} from '../../utils/cn';
 import type {ProgressStatus} from '../../utils/progress';
 
+import {SvgCircle} from './SvgCircle';
+import {
+    ROTATION_OFFSET,
+    SIZE_CONFIG,
+    calculateCircumference,
+    calculateOverlapDasharray,
+    calculateStrokeDasharray,
+} from './utils';
+
 import './DoughnutMetrics.scss';
 
 const b = cn('ydb-doughnut-metrics');
 
-const SizeContext = React.createContext<'small' | 'medium' | 'large'>('medium');
+type Size = keyof typeof SIZE_CONFIG;
+
+const SizeContext = React.createContext<Size>('medium');
 
+// Legend component
 interface LegendProps {
     children?: React.ReactNode;
     variant?: TextProps['variant'];
@@ -25,7 +37,7 @@ function Legend({
     variant = 'subheader-3',
     color = 'primary',
     note,
-    noteIconSize,
+    noteIconSize = 'm',
 }: LegendProps) {
     return (
         <Flex gap={1} alignItems="center">
@@ -34,7 +46,7 @@ function Legend({
             </Text>
             {note && (
                 <HelpMark
-                    iconSize={noteIconSize || 'm'}
+                    iconSize={noteIconSize}
                     className={b('legend-note')}
                     popoverProps={{placement: 'right'}}
                 >
@@ -44,16 +56,11 @@ function Legend({
         </Flex>
     );
 }
+
+// Value component
 function Value({children, variant}: LegendProps) {
     const size = React.useContext(SizeContext);
-
-    const sizeVariantMap = {
-        small: 'subheader-1',
-        medium: 'subheader-2',
-        large: 'subheader-3',
-    } as const;
-
-    const finalVariant = variant || sizeVariantMap[size];
+    const finalVariant = variant || SIZE_CONFIG[size].textVariant;
 
     return (
         <Text variant={finalVariant} className={b('value')}>
@@ -62,12 +69,13 @@ function Value({children, variant}: LegendProps) {
     );
 }
 
+// Main component
 interface DoughnutProps {
     status: ProgressStatus;
     fillWidth: number;
     children?: React.ReactNode;
     className?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
 }
 
 export function DoughnutMetrics({
@@ -77,24 +85,57 @@ export function DoughnutMetrics({
     className,
     size = 'medium',
 }: DoughnutProps) {
-    let filledDegrees = fillWidth * 3.6;
-    let doughnutFillVar = 'var(--doughnut-color)';
-    let doughnutBackdropVar = 'var(--doughnut-backdrop-color)';
+    const config = SIZE_CONFIG[size];
+    const radius = (config.width - config.strokeWidth) / 2;
+    const circumference = calculateCircumference(radius);
+    const strokeDashoffset = circumference * ROTATION_OFFSET;
 
-    if (filledDegrees > 360) {
-        filledDegrees -= 360;
-        doughnutBackdropVar = 'var(--doughnut-color)';
-        doughnutFillVar = 'var(--doughnut-overlap-color)';
-    }
+    const centerX = config.width / 2;
+    const centerY = config.width / 2;
 
-    const doughnutStyle: React.CSSProperties = {
-        background: `conic-gradient(${doughnutFillVar} 0deg ${filledDegrees}deg, ${doughnutBackdropVar} ${filledDegrees}deg 360deg)`,
-    };
+    const strokeDasharray = calculateStrokeDasharray(fillWidth, circumference);
+    const overlapDasharray = calculateOverlapDasharray(fillWidth, circumference);
+    const needsOverlapCircle = fillWidth > 100;
 
     return (
         <SizeContext.Provider value={size}>
-            <div className={b({status}, className)} style={{position: 'relative'}}>
-                <div style={doughnutStyle} className={b('doughnut', {size})}></div>
+            <div className={b({status}, className)}>
+                <svg width={config.width} height={config.width} className={b('doughnut')}>
+                    {/* Background circle */}
+                    <SvgCircle
+                        cx={centerX}
+                        cy={centerY}
+                        r={radius}
+                        stroke="var(--doughnut-backdrop-color)"
+                        strokeWidth={config.strokeWidth}
+                    />
+
+                    {/* Progress circle */}
+                    <SvgCircle
+                        cx={centerX}
+                        cy={centerY}
+                        r={radius}
+                        stroke="var(--doughnut-color)"
+                        strokeWidth={config.strokeWidth}
+                        strokeDasharray={strokeDasharray}
+                        strokeDashoffset={strokeDashoffset}
+                        className={b('progress-circle')}
+                    />
+
+                    {/* Overlap circle for values > 100% */}
+                    {needsOverlapCircle && (
+                        <SvgCircle
+                            cx={centerX}
+                            cy={centerY}
+                            r={radius}
+                            stroke="var(--doughnut-overlap-color)"
+                            strokeWidth={config.strokeWidth}
+                            strokeDasharray={overlapDasharray}
+                            strokeDashoffset={strokeDashoffset}
+                            className={b('overlap-circle')}
+                        />
+                    )}
+                </svg>
                 <div className={b('text-wrapper')}>{children}</div>
             </div>
         </SizeContext.Provider>
diff --git a/src/components/DoughnutMetrics/SvgCircle.tsx b/src/components/DoughnutMetrics/SvgCircle.tsx
@@ -0,0 +1,40 @@
+interface SvgCircleProps {
+    cx: number;
+    cy: number;
+    r: number;
+    stroke: string;
+    strokeWidth: number;
+    strokeDasharray?: string;
+    strokeDashoffset?: number;
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    fill?: string;
+    className?: string;
+}
+
+export function SvgCircle({
+    cx,
+    cy,
+    r,
+    stroke,
+    strokeWidth,
+    strokeDasharray,
+    strokeDashoffset,
+    strokeLinecap = 'butt',
+    fill = 'none',
+    className,
+}: SvgCircleProps) {
+    return (
+        <circle
+            cx={cx}
+            cy={cy}
+            r={r}
+            fill={fill}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            strokeDasharray={strokeDasharray}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap={strokeLinecap}
+            className={className}
+        />
+    );
+}
diff --git a/src/components/DoughnutMetrics/utils.ts b/src/components/DoughnutMetrics/utils.ts
@@ -0,0 +1,45 @@
+// Constants
+export const SIZE_CONFIG = {
+    small: {width: 65, strokeWidth: 12, textVariant: 'subheader-1'},
+    medium: {width: 100, strokeWidth: 16, textVariant: 'subheader-2'},
+    large: {width: 130, strokeWidth: 20, textVariant: 'subheader-3'},
+} as const;
+
+export const ROTATION_OFFSET = 0.75; // Start from bottom (270 degrees)
+
+/**
+ * Calculate the circumference of a circle given its radius
+ */
+export function calculateCircumference(radius: number): number {
+    return 2 * Math.PI * radius;
+}
+
+/**
+ * Calculate stroke-dasharray for SVG circle progress fill
+ * @param fillWidth - Progress percentage (0-100+)
+ * @param circumference - Circle circumference
+ * @returns Stroke-dasharray string for filled portion
+ */
+export function calculateStrokeDasharray(fillWidth: number, circumference: number): string {
+    if (fillWidth <= 0) {
+        return '0 0';
+    }
+
+    const filledLength = (Math.min(fillWidth, 100) / 100) * circumference;
+    return `${filledLength} ${circumference - filledLength}`;
+}
+
+/**
+ * Calculate stroke-dasharray for overlap portion when progress exceeds 100%
+ * @param fillWidth - Progress percentage (0-100+)
+ * @param circumference - Circle circumference
+ * @returns Stroke-dasharray string for overlap portion
+ */
+export function calculateOverlapDasharray(fillWidth: number, circumference: number): string {
+    if (fillWidth <= 100) {
+        return '0 0';
+    }
+
+    const overlapLength = ((fillWidth - 100) / 100) * circumference;
+    return `${overlapLength} ${circumference - overlapLength}`;
+}
