fix: renderChartToolbar

Author: astandrik

src/components/MetricChart/MetricChart.scss

@@ -13,10 +13,6 @@
         border: none;
     }
 
-    &__title {
-        margin-bottom: 10px;
-    }
-
     &__chart {
         position: relative;
 

src/components/MetricChart/MetricChart.tsx

@@ -3,14 +3,11 @@ import React from 'react';
 import ChartKit, {settings} from '@gravity-ui/chartkit';
 import type {YagrWidgetData} from '@gravity-ui/chartkit/yagr';
 import {YagrPlugin} from '@gravity-ui/chartkit/yagr';
-import {Flex} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import type {TimeFrame} from '../../utils/timeframes';
 import {ResponseError} from '../Errors/ResponseError';
 import {Loader} from '../Loader';
-import {TimeFrameDropdown} from '../TimeFrameDropdown/TimeFrameDropdown';
-import {TimeFrameSelector} from '../TimeFrameSelector/TimeFrameSelector';
 
 import {colorToRGBA, colors} from './colors';
 import {getDefaultDataFormatter} from './getDefaultDataFormatter';
@@ -106,7 +103,6 @@ const emptyChartData: PreparedMetricsData = {timeline: [], metrics: []};
 interface DiagnosticsChartProps {
     database: string;
 
-    title?: string;
     metrics: MetricDescription[];
     timeFrame?: TimeFrame;
 
@@ -132,19 +128,12 @@ interface DiagnosticsChartProps {
     /** Make chart take full width of container */
     fullWidth?: boolean;
 
-    /** Show timeframe selector to the right of chart title */
-    withTimeframeSelector?: boolean;
-
-    /** Callback when timeframe is changed via the selector */
-    onTimeFrameChange?: (timeFrame: TimeFrame) => void;
-
-    /** Timeframe component to choose between 'selector' and 'dropdown' */
-    timeFrameComponent?: 'selector' | 'dropdown';
+    /** Render custom toolbar content to the right of chart title */
+    renderChartToolbar?: () => React.ReactNode;
 }
 
 export const MetricChart = ({
     database,
-    title,
     metrics,
     timeFrame = '1h',
     autorefresh,
@@ -155,9 +144,7 @@ export const MetricChart = ({
     isChartVisible,
     noBorder,
     fullWidth,
-    withTimeframeSelector,
-    onTimeFrameChange,
-    timeFrameComponent = 'selector',
+    renderChartToolbar,
 }: DiagnosticsChartProps) => {
     // Use a reasonable default for maxDataPoints when fullWidth is true
     const effectiveWidth = fullWidth ? 600 : width;
@@ -209,16 +196,7 @@ export const MetricChart = ({
                 width: fullWidth ? '100%' : width,
             }}
         >
-            <Flex className={b('title')} justifyContent="space-between" alignItems="center">
-                <div>{title}</div>
-                {withTimeframeSelector &&
-                    onTimeFrameChange &&
-                    (timeFrameComponent === 'dropdown' ? (
-                        <TimeFrameDropdown value={timeFrame} onChange={onTimeFrameChange} />
-                    ) : (
-                        <TimeFrameSelector value={timeFrame} onChange={onTimeFrameChange} />
-                    ))}
-            </Flex>
+            {renderChartToolbar?.()}
             {renderContent()}
         </div>
     );

src/components/QueriesActivityBar/QueriesActivityBar.scss

@@ -96,6 +96,10 @@
         gap: var(--g-spacing-3);
     }
 
+    &__toolbar {
+        margin-bottom: 10px;
+    }
+
     // Focus states for accessibility
     &__header:focus-visible,
     &__open-queries-button:focus-visible {

src/components/QueriesActivityBar/QueriesActivityCharts.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
+import {Flex} from '@gravity-ui/uikit';
+
 import {defaultDashboardConfig} from '../../containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig';
 import {cn} from '../../utils/cn';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import type {TimeFrame} from '../../utils/timeframes';
 import {MetricChart} from '../MetricChart/MetricChart';
 import type {ChartDataStatus} from '../MetricChart/types';
+import {TimeFrameDropdown} from '../TimeFrameDropdown/TimeFrameDropdown';
 
 const b = cn('queries-activity-bar');
 
@@ -55,6 +58,32 @@ export function QueriesActivityCharts({tenantName, expanded}: QueriesActivityCha
         setLatenciesTimeFrame(newTimeFrame);
     }, []);
 
+    const renderQueriesChartToolbar = React.useCallback(
+        () => (
+            <Flex className={b('toolbar')} justifyContent="space-between" alignItems="center">
+                <div>{queriesChartConfig.title}</div>
+                <TimeFrameDropdown
+                    value={queriesTimeFrame}
+                    onChange={handleQueriesTimeFrameChange}
+                />
+            </Flex>
+        ),
+        [queriesChartConfig.title, queriesTimeFrame],
+    );
+
+    const renderLatenciesChartToolbar = React.useCallback(
+        () => (
+            <Flex className={b('toolbar')} justifyContent="space-between" alignItems="center">
+                <div>{latenciesChartConfig.title}</div>
+                <TimeFrameDropdown
+                    value={latenciesTimeFrame}
+                    onChange={handleLatenciesTimeFrameChange}
+                />
+            </Flex>
+        ),
+        [latenciesChartConfig.title, latenciesTimeFrame],
+    );
+
     // WORKAROUND: Charts are rendered outside Disclosure component due to YAGR tooltip bug
     // Issue: https://github.com/gravity-ui/yagr/issues/262
 
@@ -72,7 +101,6 @@ export function QueriesActivityCharts({tenantName, expanded}: QueriesActivityCha
             <div className={b('chart-container')}>
                 <MetricChart
                     database={tenantName}
-                    title={queriesChartConfig.title}
                     metrics={queriesChartConfig.metrics}
                     timeFrame={queriesTimeFrame}
                     autorefresh={shouldRefresh}
@@ -82,16 +110,13 @@ export function QueriesActivityCharts({tenantName, expanded}: QueriesActivityCha
                     isChartVisible={hasChartsLoaded}
                     noBorder={true}
                     fullWidth={true}
-                    withTimeframeSelector={true}
-                    onTimeFrameChange={handleQueriesTimeFrameChange}
-                    timeFrameComponent="dropdown"
+                    renderChartToolbar={renderQueriesChartToolbar}
                 />
             </div>
 
             <div className={b('chart-container')}>
                 <MetricChart
                     database={tenantName}
-                    title={latenciesChartConfig.title}
                     metrics={latenciesChartConfig.metrics}
                     timeFrame={latenciesTimeFrame}
                     autorefresh={shouldRefresh}
@@ -101,9 +126,7 @@ export function QueriesActivityCharts({tenantName, expanded}: QueriesActivityCha
                     isChartVisible={hasChartsLoaded}
                     noBorder={true}
                     fullWidth={true}
-                    withTimeframeSelector={true}
-                    onTimeFrameChange={handleLatenciesTimeFrameChange}
-                    timeFrameComponent="dropdown"
+                    renderChartToolbar={renderLatenciesChartToolbar}
                 />
             </div>
         </div>

src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.scss

@@ -11,4 +11,8 @@
         flex-flow: row wrap;
         gap: 16px;
     }
+
+    &__toolbar {
+        margin-bottom: 10px;
+    }
 }

src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {Flex} from '@gravity-ui/uikit';
 import {StringParam, useQueryParam} from 'use-query-params';
 
 import {MetricChart} from '../../../../../components/MetricChart';
@@ -60,14 +61,22 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
     const chartWidth = charts.length === 1 ? CHART_WIDTH_FULL : CHART_WIDTH;
     const chartHeight = CHART_WIDTH / 1.5;
 
+    const renderChartToolbar = React.useCallback(
+        (chartConfig: ChartConfig) => (
+            <Flex className={b('toolbar')} justifyContent="space-between" alignItems="center">
+                <div>{chartConfig.title}</div>
+            </Flex>
+        ),
+        [],
+    );
+
     const renderContent = () => {
         return charts.map((chartConfig) => {
             const chartId = chartConfig.metrics.map(({target}) => target).join('&');
             return (
                 <MetricChart
                     key={chartId}
                     database={database}
-                    title={chartConfig.title}
                     metrics={chartConfig.metrics}
                     timeFrame={timeFrame as TimeFrame}
                     chartOptions={chartConfig.options}
@@ -76,6 +85,7 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
                     height={chartHeight}
                     onChartDataStatusChange={handleChartDataStatusChange}
                     isChartVisible={!isDashboardHidden}
+                    renderChartToolbar={() => renderChartToolbar(chartConfig)}
                 />
             );
         });