feat: rework metric cards to tabs

src/components/DoughnutMetrics/DoughnutMetrics.scss

@@ -1,64 +1,75 @@
 .ydb-doughnut-metrics {
     --doughnut-border: 16px;
-    --doughnut-color: var(--ydb-color-status-green);
-    --doughnut-backdrop-color: var(--g-color-base-positive-light);
+    --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);
+
     &__doughnut {
         position: relative;
 
-        width: 100px;
+        width: var(--doughnut-width);
         aspect-ratio: 1;
 
         border-radius: 50%;
+        mask: radial-gradient(circle at center, transparent 46%, #000 46.5%);
 
         transform: rotate(180deg);
-        &::before {
-            display: block;
-
-            height: calc(100% - calc(var(--doughnut-border) * 2));
+    }
 
-            content: '';
+    // Size modifiers - using visually centered values
+    &__doughnut_size_small {
+        --doughnut-border: 12px;
+        --doughnut-width: 65px;
+        --doughnut-wrapper-indent: 15px;
+    }
 
-            border-radius: 50%;
-            background-color: var(--g-color-base-background);
+    &__doughnut_size_medium {
+        --doughnut-border: 16px;
+        --doughnut-width: 100px;
+        --doughnut-wrapper-indent: calc(var(--doughnut-border) + 5px);
+    }
 
-            transform: translate(var(--doughnut-border), var(--doughnut-border));
-            aspect-ratio: 1;
-        }
+    &__doughnut_size_large {
+        --doughnut-border: 20px;
+        --doughnut-width: 130px;
+        --doughnut-wrapper-indent: 25px;
     }
-    &__doughnut_status_warning {
-        --doughnut-color: var(--ydb-color-status-yellow);
-        --doughnut-backdrop-color: var(--g-color-base-warning-light);
+
+    &_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);
     }
-    &__doughnut_status_danger {
-        --doughnut-color: var(--ydb-color-status-red);
-        --doughnut-backdrop-color: var(--g-color-base-danger-light);
+    &_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 {
-        --wrapper-indent: calc(var(--doughnut-border) + 5px);
-
         position: absolute;
-        top: var(--wrapper-indent);
-        right: var(--wrapper-indent);
+        z-index: 1;
+        top: var(--doughnut-wrapper-indent);
+        left: var(--doughnut-wrapper-indent);
 
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
 
-        width: calc(100% - calc(var(--wrapper-indent) * 2));
+        width: calc(100% - calc(var(--doughnut-wrapper-indent) * 2));
 
         text-align: center;
 
-        transform: rotate(180deg);
         aspect-ratio: 1;
     }
+
     &__value {
-        position: absolute;
-        bottom: 20px;
+        color: var(--doughnut-text-color);
     }
+
     &__legend-note {
         display: flex;
     }

src/components/DoughnutMetrics/DoughnutMetrics.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {TextProps} from '@gravity-ui/uikit';
+import type {HelpMarkProps, TextProps} from '@gravity-ui/uikit';
 import {Flex, HelpMark, Text} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
@@ -10,30 +10,53 @@ import './DoughnutMetrics.scss';
 
 const b = cn('ydb-doughnut-metrics');
 
+const SizeContext = React.createContext<'small' | 'medium' | 'large'>('medium');
+
 interface LegendProps {
     children?: React.ReactNode;
     variant?: TextProps['variant'];
     color?: TextProps['color'];
     note?: React.ReactNode;
+    noteIconSize?: HelpMarkProps['iconSize'];
 }
 
-function Legend({children, variant = 'subheader-3', color = 'primary', note}: LegendProps) {
+function Legend({
+    children,
+    variant = 'subheader-3',
+    color = 'primary',
+    note,
+    noteIconSize,
+}: LegendProps) {
     return (
         <Flex gap={1} alignItems="center">
             <Text variant={variant} color={color} className={b('legend')} as="div">
                 {children}
             </Text>
             {note && (
-                <HelpMark className={b('legend-note')} popoverProps={{placement: 'right'}}>
+                <HelpMark
+                    iconSize={noteIconSize || 'm'}
+                    className={b('legend-note')}
+                    popoverProps={{placement: 'right'}}
+                >
                     {note}
                 </HelpMark>
             )}
         </Flex>
     );
 }
-function Value({children, variant = 'subheader-2'}: LegendProps) {
+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];
+
     return (
-        <Text variant={variant} className={b('value')}>
+        <Text variant={finalVariant} className={b('value')}>
             {children}
         </Text>
     );
@@ -44,9 +67,16 @@ interface DoughnutProps {
     fillWidth: number;
     children?: React.ReactNode;
     className?: string;
+    size?: 'small' | 'medium' | 'large';
 }
 
-export function DoughnutMetrics({status, fillWidth, children, className}: DoughnutProps) {
+export function DoughnutMetrics({
+    status,
+    fillWidth,
+    children,
+    className,
+    size = 'medium',
+}: DoughnutProps) {
     let filledDegrees = fillWidth * 3.6;
     let doughnutFillVar = 'var(--doughnut-color)';
     let doughnutBackdropVar = 'var(--doughnut-backdrop-color)';
@@ -57,17 +87,17 @@ export function DoughnutMetrics({status, fillWidth, children, className}: Doughn
         doughnutFillVar = 'var(--doughnut-overlap-color)';
     }
 
+    const doughnutStyle: React.CSSProperties = {
+        background: `conic-gradient(${doughnutFillVar} 0deg ${filledDegrees}deg, ${doughnutBackdropVar} ${filledDegrees}deg 360deg)`,
+    };
+
     return (
-        <div className={b(null, className)}>
-            <div
-                style={{
-                    background: `conic-gradient(${doughnutFillVar} 0deg ${filledDegrees}deg, ${doughnutBackdropVar} ${filledDegrees}deg 360deg)`,
-                }}
-                className={b('doughnut', {status})}
-            >
+        <SizeContext.Provider value={size}>
+            <div className={b({status}, className)} style={{position: 'relative'}}>
+                <div style={doughnutStyle} className={b('doughnut', {size})}></div>
                 <div className={b('text-wrapper')}>{children}</div>
             </div>
-        </div>
+        </SizeContext.Provider>
     );
 }
 

src/components/MetricChart/MetricChart.scss

@@ -2,15 +2,13 @@
     display: flex;
     flex-direction: column;
 
-    padding: var(--g-spacing-4) var(--g-spacing-4) var(--g-spacing-2);
+    width: 100%;
+    padding: 0;
 
-    border: 1px solid var(--g-color-line-generic);
-    border-radius: 8px;
+    border: none;
 
-    &_noBorder {
-        padding: 0;
-
-        border: none;
+    &__toolbar {
+        margin-bottom: 10px;
     }
 
     &__chart {