ydb-embedded-ui 11.2.0 → 11.4.0

package/dist/components/DoughnutMetrics/DoughnutMetrics.d.ts

@@ -1,22 +1,26 @@
 import React from 'react';
-import type { TextProps } from '@gravity-ui/uikit';
+import type { HelpMarkProps, TextProps } from '@gravity-ui/uikit';
 import type { ProgressStatus } from '../../utils/progress';
+import { SIZE_CONFIG } from './utils';
 import './DoughnutMetrics.scss';
+type Size = keyof typeof SIZE_CONFIG;
 interface LegendProps {
     children?: React.ReactNode;
     variant?: TextProps['variant'];
     color?: TextProps['color'];
     note?: React.ReactNode;
+    noteIconSize?: HelpMarkProps['iconSize'];
 }
 interface DoughnutProps {
     status: ProgressStatus;
     fillWidth: number;
     children?: React.ReactNode;
     className?: string;
+    size?: Size;
 }
-export declare function DoughnutMetrics({ status, fillWidth, children, className }: DoughnutProps): import("react/jsx-runtime").JSX.Element;
+export declare function DoughnutMetrics({ status, fillWidth, children, className, size, }: DoughnutProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DoughnutMetrics {
-    var Legend: ({ children, variant, color, note }: LegendProps) => import("react/jsx-runtime").JSX.Element;
+    var Legend: ({ children, variant, color, note, noteIconSize, }: LegendProps) => import("react/jsx-runtime").JSX.Element;
     var Value: ({ children, variant }: LegendProps) => import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/dist/components/DoughnutMetrics/DoughnutMetrics.js

@@ -1,26 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Flex, HelpMark, Text } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
+import { SvgCircle } from './SvgCircle';
+import { ROTATION_OFFSET, SIZE_CONFIG, calculateCircumference, calculateOverlapDasharray, calculateStrokeDasharray, } from './utils';
 import './DoughnutMetrics.scss';
 const b = cn('ydb-doughnut-metrics');
-function Legend({ children, variant = 'subheader-3', color = 'primary', note }) {
-    return (_jsxs(Flex, { gap: 1, alignItems: "center", children: [_jsx(Text, { variant: variant, color: color, className: b('legend'), as: "div", children: children }), note && (_jsx(HelpMark, { className: b('legend-note'), popoverProps: { placement: 'right' }, children: note }))] }));
+const SizeContext = React.createContext('medium');
+function Legend({ children, variant = 'subheader-3', color = 'primary', note, noteIconSize = 'm', }) {
+    return (_jsxs(Flex, { gap: 1, alignItems: "center", children: [_jsx(Text, { variant: variant, color: color, className: b('legend'), as: "div", children: children }), note && (_jsx(HelpMark, { iconSize: noteIconSize, className: b('legend-note'), popoverProps: { placement: 'right' }, children: note }))] }));
 }
-function Value({ children, variant = 'subheader-2' }) {
-    return (_jsx(Text, { variant: variant, className: b('value'), children: children }));
+// Value component
+function Value({ children, variant }) {
+    const size = React.useContext(SizeContext);
+    const finalVariant = variant || SIZE_CONFIG[size].textVariant;
+    return (_jsx(Text, { variant: finalVariant, className: b('value'), children: children }));
 }
-export function DoughnutMetrics({ status, fillWidth, children, className }) {
-    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)';
-    }
-    return (_jsx("div", { className: b(null, className), children: _jsx("div", { style: {
-                background: `conic-gradient(${doughnutFillVar} 0deg ${filledDegrees}deg, ${doughnutBackdropVar} ${filledDegrees}deg 360deg)`,
-            }, className: b('doughnut', { status }), children: _jsx("div", { className: b('text-wrapper'), children: children }) }) }));
+export function DoughnutMetrics({ status, fillWidth, children, className, size = 'medium', }) {
+    const config = SIZE_CONFIG[size];
+    const radius = (config.width - config.strokeWidth) / 2;
+    const circumference = calculateCircumference(radius);
+    const strokeDashoffset = circumference * ROTATION_OFFSET;
+    const centerX = config.width / 2;
+    const centerY = config.width / 2;
+    const strokeDasharray = calculateStrokeDasharray(fillWidth, circumference);
+    const overlapDasharray = calculateOverlapDasharray(fillWidth, circumference);
+    const needsOverlapCircle = fillWidth > 100;
+    return (_jsx(SizeContext.Provider, { value: size, children: _jsxs("div", { className: b({ status }, className), children: [_jsxs("svg", { width: config.width, height: config.width, className: b('doughnut'), children: [_jsx(SvgCircle, { cx: centerX, cy: centerY, r: radius, stroke: "var(--doughnut-backdrop-color)", strokeWidth: config.strokeWidth }), _jsx(SvgCircle, { cx: centerX, cy: centerY, r: radius, stroke: "var(--doughnut-color)", strokeWidth: config.strokeWidth, strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, className: b('progress-circle') }), needsOverlapCircle && (_jsx(SvgCircle, { cx: centerX, cy: centerY, r: radius, stroke: "var(--doughnut-overlap-color)", strokeWidth: config.strokeWidth, strokeDasharray: overlapDasharray, strokeDashoffset: strokeDashoffset, className: b('overlap-circle') }))] }), _jsx("div", { className: b('text-wrapper'), children: children })] }) }));
 }
 DoughnutMetrics.Legend = Legend;
 DoughnutMetrics.Value = Value;

package/dist/components/DoughnutMetrics/DoughnutMetrics.js.map

@@ -1 +1 @@
-{"version":3,"file":"DoughnutMetrics.js","sourceRoot":"","sources":["../../../src/components/DoughnutMetrics/DoughnutMetrics.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAGlC,OAAO,wBAAwB,CAAC;AAEhC,MAAM,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,CAAC;AASrC,SAAS,MAAM,CAAC,EAAC,QAAQ,EAAE,OAAO,GAAG,aAAa,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,EAAc;IACrF,OAAO,CACH,MAAC,IAAI,IAAC,GAAG,EAAE,CAAC,EAAE,UAAU,EAAC,QAAQ,aAC7B,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAC,KAAK,YACjE,QAAQ,GACN,EACN,IAAI,IAAI,CACL,KAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,YAAY,EAAE,EAAC,SAAS,EAAE,OAAO,EAAC,YACpE,IAAI,GACE,CACd,IACE,CACV,CAAC;AACN,CAAC;AACD,SAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,OAAO,GAAG,aAAa,EAAc;IAC3D,OAAO,CACH,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACxC,QAAQ,GACN,CACV,CAAC;AACN,CAAC;AASD,MAAM,UAAU,eAAe,CAAC,EAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAgB;IACnF,IAAI,aAAa,GAAG,SAAS,GAAG,GAAG,CAAC;IACpC,IAAI,eAAe,GAAG,uBAAuB,CAAC;IAC9C,IAAI,mBAAmB,GAAG,gCAAgC,CAAC;IAE3D,IAAI,aAAa,GAAG,GAAG,EAAE,CAAC;QACtB,aAAa,IAAI,GAAG,CAAC;QACrB,mBAAmB,GAAG,uBAAuB,CAAC;QAC9C,eAAe,GAAG,+BAA+B,CAAC;IACtD,CAAC;IAED,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC9B,cACI,KAAK,EAAE;gBACH,UAAU,EAAE,kBAAkB,eAAe,SAAS,aAAa,QAAQ,mBAAmB,IAAI,aAAa,aAAa;aAC/H,EACD,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,EAAC,MAAM,EAAC,CAAC,YAElC,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAAG,QAAQ,GAAO,GACjD,GACJ,CACT,CAAC;AACN,CAAC;AAED,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC;AAChC,eAAe,CAAC,KAAK,GAAG,KAAK,CAAC"}
+{"version":3,"file":"DoughnutMetrics.js","sourceRoot":"","sources":["../../../src/components/DoughnutMetrics/DoughnutMetrics.tsx"],"names":[],"mappings":"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"}

package/dist/components/DoughnutMetrics/DoughnutMetrics.scss

@@ -1,64 +1,72 @@
 .ydb-doughnut-metrics {
-    --doughnut-border: 16px;
-    --doughnut-color: var(--ydb-color-status-green);
-    --doughnut-backdrop-color: var(--g-color-base-positive-light);
+    --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 {
-        position: relative;
+    --doughnut-text-color: var(--g-color-text-positive-heavy);
 
-        width: 100px;
-        aspect-ratio: 1;
+    position: relative;
 
-        border-radius: 50%;
+    &__doughnut {
+        position: relative;
 
-        transform: rotate(180deg);
-        &::before {
-            display: block;
+        display: block;
 
-            height: calc(100% - calc(var(--doughnut-border) * 2));
+        // Enable smooth rendering for SVG
+        shape-rendering: geometricPrecision;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
 
-            content: '';
+        // Ensure SVG renders smoothly
+        image-rendering: smooth;
+        will-change: transform;
 
-            border-radius: 50%;
-            background-color: var(--g-color-base-background);
+        // Preserve rotation origin
+        transform-origin: center;
+    }
 
-            transform: translate(var(--doughnut-border), var(--doughnut-border));
-            aspect-ratio: 1;
-        }
+    // Progress circle animation
+    &__progress-circle,
+    &__overlap-circle {
+        transition: stroke-dasharray 0.3s ease;
+        transform-origin: center;
     }
-    &__doughnut_status_warning {
-        --doughnut-color: var(--ydb-color-status-yellow);
-        --doughnut-backdrop-color: var(--g-color-base-warning-light);
+
+    // 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);
     }
-    &__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);
 
+    &__text-wrapper {
         position: absolute;
-        top: var(--wrapper-indent);
-        right: var(--wrapper-indent);
+        z-index: 1;
+        top: 50%;
+        left: 50%;
 
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
 
-        width: calc(100% - calc(var(--wrapper-indent) * 2));
+        width: 100%;
+        height: 100%;
 
         text-align: center;
 
-        transform: rotate(180deg);
-        aspect-ratio: 1;
+        transform: translate(-50%, -50%);
     }
+
     &__value {
-        position: absolute;
-        bottom: 20px;
+        color: var(--doughnut-text-color);
     }
+
     &__legend-note {
         display: flex;
     }

package/dist/components/DoughnutMetrics/SvgCircle.d.ts

@@ -0,0 +1,14 @@
+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 declare function SvgCircle({ cx, cy, r, stroke, strokeWidth, strokeDasharray, strokeDashoffset, strokeLinecap, fill, className, }: SvgCircleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DoughnutMetrics/SvgCircle.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SvgCircle({ cx, cy, r, stroke, strokeWidth, strokeDasharray, strokeDashoffset, strokeLinecap = 'butt', fill = 'none', className, }) {
+    return (_jsx("circle", { cx: cx, cy: cy, r: r, fill: fill, stroke: stroke, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, strokeLinecap: strokeLinecap, className: className }));
+}
+//# sourceMappingURL=SvgCircle.js.map

package/dist/components/DoughnutMetrics/SvgCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgCircle.js","sourceRoot":"","sources":["../../../src/components/DoughnutMetrics/SvgCircle.tsx"],"names":[],"mappings":";AAaA,MAAM,UAAU,SAAS,CAAC,EACtB,EAAE,EACF,EAAE,EACF,CAAC,EACD,MAAM,EACN,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,MAAM,EACb,SAAS,GACI;IACb,OAAO,CACH,iBACI,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,CAAC,EACJ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,GACtB,CACL,CAAC;AACN,CAAC"}

package/dist/components/DoughnutMetrics/utils.d.ts

@@ -0,0 +1,36 @@
+export declare const SIZE_CONFIG: {
+    readonly small: {
+        readonly width: 65;
+        readonly strokeWidth: 12;
+        readonly textVariant: "subheader-1";
+    };
+    readonly medium: {
+        readonly width: 100;
+        readonly strokeWidth: 16;
+        readonly textVariant: "subheader-2";
+    };
+    readonly large: {
+        readonly width: 130;
+        readonly strokeWidth: 20;
+        readonly textVariant: "subheader-3";
+    };
+};
+export declare const ROTATION_OFFSET = 0.75;
+/**
+ * Calculate the circumference of a circle given its radius
+ */
+export declare function calculateCircumference(radius: number): number;
+/**
+ * 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 declare function calculateStrokeDasharray(fillWidth: number, circumference: number): string;
+/**
+ * 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 declare function calculateOverlapDasharray(fillWidth: number, circumference: number): string;

package/dist/components/DoughnutMetrics/utils.js

@@ -0,0 +1,40 @@
+// 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' },
+};
+export const ROTATION_OFFSET = 0.75; // Start from bottom (270 degrees)
+/**
+ * Calculate the circumference of a circle given its radius
+ */
+export function calculateCircumference(radius) {
+    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, circumference) {
+    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, circumference) {
+    if (fillWidth <= 100) {
+        return '0 0';
+    }
+    const overlapLength = ((fillWidth - 100) / 100) * circumference;
+    return `${overlapLength} ${circumference - overlapLength}`;
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/DoughnutMetrics/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/DoughnutMetrics/utils.ts"],"names":[],"mappings":"AAAA,YAAY;AACZ,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,KAAK,EAAE,EAAC,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,EAAE,aAAa,EAAC;IAC/D,MAAM,EAAE,EAAC,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,EAAE,aAAa,EAAC;IACjE,KAAK,EAAE,EAAC,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,EAAE,aAAa,EAAC;CAC1D,CAAC;AAEX,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC,kCAAkC;AAEvE;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAC,MAAc;IACjD,OAAO,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;AAChC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB,CAAC,SAAiB,EAAE,aAAqB;IAC7E,IAAI,SAAS,IAAI,CAAC,EAAE,CAAC;QACjB,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IACtE,OAAO,GAAG,YAAY,IAAI,aAAa,GAAG,YAAY,EAAE,CAAC;AAC7D,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,SAAiB,EAAE,aAAqB;IAC9E,IAAI,SAAS,IAAI,GAAG,EAAE,CAAC;QACnB,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,MAAM,aAAa,GAAG,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IAChE,OAAO,GAAG,aAAa,IAAI,aAAa,GAAG,aAAa,EAAE,CAAC;AAC/D,CAAC"}

package/dist/components/MetricChart/MetricChart.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import type { TimeFrame } from '../../utils/timeframes';
 import type { ChartOptions, MetricDescription, OnChartDataStatusChange } from './types';
 import './MetricChart.scss';
 interface DiagnosticsChartProps {
     database: string;
     metrics: MetricDescription[];
-    timeFrame?: TimeFrame;
+    defaultTimeFrame?: TimeFrame;
     autorefresh?: number;
     height?: number;
     width?: number;
@@ -17,12 +16,8 @@ interface DiagnosticsChartProps {
      * Pass isChartVisible prop to ensure proper chart render
      */
     isChartVisible?: boolean;
-    /** Remove border from chart */
-    noBorder?: boolean;
-    /** Make chart take full width of container */
-    fullWidth?: boolean;
-    /** Render custom toolbar content to the right of chart title */
-    renderChartToolbar?: () => React.ReactNode;
+    /** Chart title displayed in the toolbar */
+    title: string;
 }
-export declare const MetricChart: ({ database, metrics, timeFrame, autorefresh, width, height, chartOptions, onChartDataStatusChange, isChartVisible, noBorder, fullWidth, renderChartToolbar, }: DiagnosticsChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetricChart: ({ database, metrics, defaultTimeFrame, autorefresh, width, height, chartOptions, onChartDataStatusChange, isChartVisible, title, }: DiagnosticsChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MetricChart/MetricChart.js

@@ -2,14 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import ChartKit, { settings } from '@gravity-ui/chartkit';
 import { YagrPlugin } from '@gravity-ui/chartkit/yagr';
+import { Flex } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
 import { ResponseError } from '../Errors/ResponseError';
 import { Loader } from '../Loader';
+import { TimeFrameDropdown } from '../TimeFrameDropdown/TimeFrameDropdown';
 import { colorToRGBA, colors } from './colors';
 import { getDefaultDataFormatter } from './getDefaultDataFormatter';
 import { chartApi } from './reducer';
 import './MetricChart.scss';
 const b = cn('ydb-metric-chart');
+// Constants
+const DEFAULT_EFFECTIVE_WIDTH = 600; // Used for maxDataPoints calculation when using fullWidth
 settings.set({ plugins: [YagrPlugin] });
 const prepareWidgetData = (data, options = {}) => {
     const { dataType, scaleRange, showLegend } = options;
@@ -75,10 +79,10 @@ const prepareWidgetData = (data, options = {}) => {
     };
 };
 const emptyChartData = { timeline: [], metrics: [] };
-export const MetricChart = ({ database, metrics, timeFrame = '1h', autorefresh, width = 400, height = width / 1.5, chartOptions, onChartDataStatusChange, isChartVisible, noBorder, fullWidth, renderChartToolbar, }) => {
+export const MetricChart = ({ database, metrics, defaultTimeFrame = '1h', autorefresh, width = 400, height = width / 1.5, chartOptions, onChartDataStatusChange, isChartVisible, title, }) => {
+    const [timeFrame, setTimeFrame] = React.useState(defaultTimeFrame);
     // Use a reasonable default for maxDataPoints when fullWidth is true
-    const effectiveWidth = fullWidth ? 600 : width;
-    const maxDataPoints = effectiveWidth / 2;
+    const maxDataPoints = DEFAULT_EFFECTIVE_WIDTH / 2;
     const { currentData, error, isFetching, status } = chartApi.useGetChartDataQuery(
     // maxDataPoints param is calculated based on width
     // should be width > maxDataPoints to prevent points that cannot be selected
@@ -94,6 +98,7 @@ export const MetricChart = ({ database, metrics, timeFrame = '1h', autorefresh,
         return onChartDataStatusChange === null || onChartDataStatusChange === void 0 ? void 0 : onChartDataStatusChange(status === 'fulfilled' ? 'success' : 'loading');
     }, [status, onChartDataStatusChange]);
     const convertedData = prepareWidgetData(currentData || emptyChartData, chartOptions);
+    const renderToolbar = () => (_jsxs(Flex, { className: b('toolbar'), justifyContent: "space-between", alignItems: "center", children: [_jsx("div", { children: title }), _jsx(TimeFrameDropdown, { value: timeFrame, onChange: setTimeFrame })] }));
     const renderContent = () => {
         if (loading) {
             return _jsx(Loader, {});
@@ -103,9 +108,8 @@ export const MetricChart = ({ database, metrics, timeFrame = '1h', autorefresh,
         }
         return (_jsxs("div", { className: b('chart'), children: [_jsx(ChartKit, { type: "yagr", data: convertedData }), error ? _jsx(ResponseError, { className: b('error'), error: error }) : null] }));
     };
-    return (_jsxs("div", { className: b({ noBorder }), style: {
+    return (_jsxs("div", { className: b(), style: {
             height,
-            width: fullWidth ? '100%' : width,
-        }, children: [renderChartToolbar === null || renderChartToolbar === void 0 ? void 0 : renderChartToolbar(), renderContent()] }));
+        }, children: [renderToolbar(), renderContent()] }));
 };
 //# sourceMappingURL=MetricChart.js.map

package/dist/components/MetricChart/MetricChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricChart.js","sourceRoot":"","sources":["../../../src/components/MetricChart/MetricChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MetricChart.js","sourceRoot":"","sources":["../../../src/components/MetricChart/MetricChart.tsx"],"names":[],"mappings":"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"}

package/dist/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 {

package/dist/components/QueriesActivityBar/QueriesActivityBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { CirclePlay, Clock, Display, Person, Rocket } from '@gravity-ui/icons';
-import { ArrowToggle, Button, Disclosure, Flex, Icon, Label, Text } from '@gravity-ui/uikit';
+import { ArrowToggle, Button, Card, Flex, Icon, Label, Text } from '@gravity-ui/uikit';
 import { useHistory, useLocation } from 'react-router-dom';
 import { TenantTabsGroups, getTenantPath } from '../../containers/Tenant/TenantPages';
 import { parseQuery } from '../../routes';
@@ -92,6 +92,9 @@ export function QueriesActivityBar({ tenantName }) {
         });
         history.push(path);
     };
-    return (_jsxs("div", { className: b({ expanded }), style: { display: isActivityBarHidden ? 'none' : undefined }, children: [_jsxs(Disclosure, { expanded: expanded, onUpdate: setExpanded, className: b('disclosure'), children: [_jsx(Disclosure.Summary, { children: (props) => (_jsxs("div", { ...props, className: b('header'), children: [_jsxs(Flex, { justifyContent: "space-between", className: b('content-wrapper'), children: [_jsxs(Flex, { direction: "column", className: b('title-section'), children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: i18n('title_queries-activity') }), _jsx(Text, { color: "secondary", variant: "caption-2", className: b('subtitle'), children: i18n('context_monitor-changes-realtime') })] }), _jsxs("div", { className: b('metrics'), children: [_jsx(Label, { theme: runningQueriesCount > 0 ? 'success' : 'unknown', size: "s", icon: _jsx(Icon, { data: CirclePlay, size: 14 }), children: runningQueriesCount }), _jsx(Label, { theme: "clear", size: "s", icon: _jsx(Icon, { data: Rocket, size: 14 }), value: formatTrendValue(qps.trend.value), children: i18n('value_per-sec', { count: qps.value }) }), _jsx(Label, { theme: "clear", size: "s", icon: _jsx(Icon, { data: Clock, size: 14 }), value: formatTrendValue(latency.trend.value), children: i18n('value_ms', { time: latency.value }) })] })] }), _jsx(ArrowToggle, { direction: props.expanded ? 'top' : 'bottom' })] })) }), expanded ? (_jsx("div", { className: b('content'), children: _jsxs("div", { className: b('stats'), children: [_jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: CirclePlay }), size: "s", value: String(runningQueriesCount), children: i18n('field_running-queries') }), _jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: Display }), size: "s", value: String(uniqueApplications), children: i18n('field_applications') }), _jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: Person }), size: "s", value: String(uniqueUsers), children: i18n('field_users') }), _jsx(Button, { view: "outlined", size: "s", onClick: handleOpenRunningQueries, className: b('open-queries-button'), children: i18n('action_open-running-queries') })] }) })) : null] }), _jsx(QueriesActivityCharts, { tenantName: tenantName, expanded: expanded, onChartDataStatusChange: handleChartDataStatusChange })] }));
+    const handleToggleExpanded = () => {
+        setExpanded(!expanded);
+    };
+    return (_jsx("div", { className: b({ expanded }), style: { display: isActivityBarHidden ? 'none' : undefined }, children: _jsxs(Card, { className: b('card'), type: "container", view: expanded ? 'outlined' : 'raised', children: [_jsxs("div", { className: b('header'), onClick: handleToggleExpanded, children: [_jsxs(Flex, { justifyContent: "space-between", className: b('content-wrapper'), children: [_jsxs(Flex, { direction: "column", className: b('title-section'), children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: i18n('title_queries-activity') }), _jsx(Text, { color: "secondary", variant: "caption-2", className: b('subtitle'), children: i18n('context_monitor-changes-realtime') })] }), _jsxs("div", { className: b('metrics'), children: [_jsx(Label, { theme: runningQueriesCount > 0 ? 'success' : 'unknown', size: "s", icon: _jsx(Icon, { data: CirclePlay, size: 14 }), children: runningQueriesCount }), _jsx(Label, { theme: "clear", size: "s", icon: _jsx(Icon, { data: Rocket, size: 14 }), value: formatTrendValue(qps.trend.value), children: i18n('value_per-sec', { count: qps.value }) }), _jsx(Label, { theme: "clear", size: "s", icon: _jsx(Icon, { data: Clock, size: 14 }), value: formatTrendValue(latency.trend.value), children: i18n('value_ms', { time: latency.value }) })] })] }), _jsx(ArrowToggle, { direction: expanded ? 'top' : 'bottom' })] }), expanded && (_jsx("div", { className: b('content'), children: _jsxs("div", { className: b('stats'), children: [_jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: CirclePlay }), size: "s", value: String(runningQueriesCount), children: i18n('field_running-queries') }), _jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: Display }), size: "s", value: String(uniqueApplications), children: i18n('field_applications') }), _jsx(Label, { theme: "unknown", icon: _jsx(Icon, { data: Person }), size: "s", value: String(uniqueUsers), children: i18n('field_users') }), _jsx(Button, { view: "outlined", size: "s", onClick: handleOpenRunningQueries, className: b('open-queries-button'), children: i18n('action_open-running-queries') })] }) })), _jsx(QueriesActivityCharts, { tenantName: tenantName, expanded: expanded, onChartDataStatusChange: handleChartDataStatusChange })] }) }));
 }
 //# sourceMappingURL=QueriesActivityBar.js.map

package/dist/components/QueriesActivityBar/QueriesActivityBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueriesActivityBar.js","sourceRoot":"","sources":["../../../src/components/QueriesActivityBar/QueriesActivityBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"QueriesActivityBar.js","sourceRoot":"","sources":["../../../src/components/QueriesActivityBar/QueriesActivityBar.tsx"],"names":[],"mappings":"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"}

package/dist/components/QueriesActivityBar/QueriesActivityBar.scss

@@ -3,22 +3,15 @@
 .queries-activity-bar {
     $b: &;
 
-    margin-bottom: var(--diagnostics-section-title-margin);
+    border-radius: var(--g-border-radius-s);
 
-    border: 1px solid transparent;
-    border-radius: var(--g-border-radius-m);
+    &__card {
+        width: 100%;
 
-    // Collapsed state (default)
-    background-color: var(--g-color-base-float);
+        // Override Card's default padding for custom content layout
+        padding: 0;
 
-    &_expanded {
-        border: 1px solid var(--g-color-base-generic);
-        border-radius: var(--g-border-radius-m);
-        background-color: transparent;
-    }
-
-    &__disclosure {
-        width: 100%;
+        border-radius: var(--g-border-radius-s);
     }
 
     &__header {
@@ -31,15 +24,21 @@
 
         cursor: pointer;
 
-        border-radius: var(--g-border-radius-m);
+        border: 1px solid transparent;
+        border-radius: var(--g-border-radius-s);
 
         transition: background-color 0.15s ease;
 
         &:hover {
-            background-color: var(--g-color-base-simple-hover);
+            background-color: var(--g-color-base-float-hover);
+        }
+
+        #{$b}_expanded & {
+            border: none;
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
         }
 
-        // When expanded, only round top corners
         #{$b}_expanded &:hover {
             background-color: transparent;
         }
@@ -62,6 +61,9 @@
         display: flex;
         flex-direction: column;
         gap: var(--g-spacing-4);
+
+        padding-top: var(--g-spacing-3);
+        padding-bottom: var(--g-spacing-3);
     }
 
     &__stats {
@@ -82,7 +84,6 @@
         gap: var(--g-spacing-4);
 
         padding: 0 var(--g-spacing-4);
-        padding-top: var(--g-spacing-4);
 
         @media (max-width: 1200px) {
             flex-direction: column;
@@ -96,10 +97,6 @@
         gap: var(--g-spacing-3);
     }
 
-    &__toolbar {
-        margin-bottom: 10px;
-    }
-
     // Focus states for accessibility
     &__header:focus-visible,
     &__open-queries-button:focus-visible {