test: added tests for barpanel hooks + utils

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -23,7 +23,6 @@ export default function ChartWrapper({
 	width: containerWidth,
 	height: containerHeight,
 	showTooltip = true,
-	showLegend = true,
 	canPinTooltip = false,
 	syncMode,
 	syncKey,
@@ -37,9 +36,6 @@ export default function ChartWrapper({
 
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
-			if (!showLegend) {
-				return null;
-			}
 			return (
 				<Legend
 					config={config}
@@ -48,7 +44,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position, showLegend],
+		[config, legendConfig.position],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -64,7 +60,6 @@ export default function ChartWrapper({
 	return (
 		<PlotContextProvider>
 			<ChartLayout
-				showLegend={showLegend}
 				config={config}
 				containerWidth={containerWidth}
 				containerHeight={containerHeight}

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
-import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
-import {
-	HistogramTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-
-import { HistogramChartProps } from '../types';
-
-export default function Histogram(props: HistogramChartProps): JSX.Element {
-	const {
-		children,
-		renderTooltip: customRenderTooltip,
-		isQueriesMerged,
-		...rest
-	} = props;
-
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			if (customRenderTooltip) {
-				return customRenderTooltip(props);
-			}
-			const content = buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: rest.yAxisUnit ?? '',
-				decimalPrecision: rest.decimalPrecision,
-			});
-			const tooltipProps: HistogramTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				content,
-			};
-			return <HistogramTooltip {...tooltipProps} />;
-		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
-	);
-
-	return (
-		<ChartWrapper
-			showLegend={!isQueriesMerged}
-			{...rest}
-			renderTooltip={renderTooltip}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -7,7 +7,6 @@ interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
-	showLegend?: boolean;
 	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
@@ -18,7 +17,6 @@ interface BaseChartProps {
 interface UPlotBasedChartProps {
 	config: UPlotConfigBuilder;
 	data: uPlot.AlignedData;
-	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
@@ -28,20 +26,14 @@ interface UPlotBasedChartProps {
 }
 
 export interface TimeSeriesChartProps
-	extends BaseChartProps,
-		UPlotBasedChartProps {}
-
-export interface HistogramChartProps
 	extends BaseChartProps,
 		UPlotBasedChartProps {
-	isQueriesMerged?: boolean;
+	legendConfig: LegendConfig;
 }
 
 export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
+	legendConfig: LegendConfig;
 	isStackedBarChart?: boolean;
 }
 
-export type ChartProps =
-	| TimeSeriesChartProps
-	| BarChartProps
-	| HistogramChartProps;
+export type ChartProps = TimeSeriesChartProps | BarChartProps;

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -0,0 +1,117 @@
+import { AlignedData } from 'uplot';
+
+import { getInitialStackedBands, stack } from '../stackUtils';
+
+describe('stackUtils', () => {
+	describe('stack', () => {
+		const neverOmit = (): boolean => false;
+
+		it('preserves time axis as first row', () => {
+			const data: AlignedData = [
+				[100, 200, 300],
+				[1, 2, 3],
+				[4, 5, 6],
+			];
+			const { data: result } = stack(data, neverOmit);
+			expect(result[0]).toEqual([100, 200, 300]);
+		});
+
+		it('stacks value series cumulatively (last = raw, first = total)', () => {
+			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
+			const data: AlignedData = [
+				[0, 1, 2],
+				[1, 2, 3], // series 1
+				[4, 5, 6], // series 2
+				[7, 8, 9], // series 3
+			];
+			const { data: result } = stack(data, neverOmit);
+			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
+			expect(result[1]).toEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
+			expect(result[2]).toEqual([11, 13, 15]); // 4+7, 5+8, 6+9
+			expect(result[3]).toEqual([7, 8, 9]);
+		});
+
+		it('treats null values as 0 when stacking', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, null],
+				[null, 10],
+			];
+			const { data: result } = stack(data, neverOmit);
+			expect(result[1]).toEqual([1, 10]); // total
+			expect(result[2]).toEqual([0, 10]); // last series with null→0
+		});
+
+		it('copies omitted series as-is without accumulating', () => {
+			// Omit series 2 (index 2); series 1 and 3 are stacked.
+			const data: AlignedData = [
+				[0, 1],
+				[10, 20], // series 1
+				[100, 200], // series 2 - omitted
+				[1, 2], // series 3
+			];
+			const omitSeries2 = (i: number): boolean => i === 2;
+			const { data: result } = stack(data, omitSeries2);
+			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
+			expect(result[1]).toEqual([11, 22]); // 10+1, 20+2
+			expect(result[2]).toEqual([100, 200]); // copied, not stacked
+			expect(result[3]).toEqual([1, 2]);
+		});
+
+		it('returns bands between consecutive visible series when none omitted', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, 2],
+				[3, 4],
+				[5, 6],
+			];
+			const { bands } = stack(data, neverOmit);
+			expect(bands).toEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		});
+
+		it('returns bands only between visible series when some are omitted', () => {
+			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
+			const data: AlignedData = [[0], [1], [2], [3], [4]];
+			const omitSeries2 = (i: number): boolean => i === 2;
+			const { bands } = stack(data, omitSeries2);
+			expect(bands).toEqual([{ series: [1, 3] }, { series: [3, 4] }]);
+		});
+
+		it('returns empty bands when only one value series', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, 2],
+			];
+			const { bands } = stack(data, neverOmit);
+			expect(bands).toEqual([]);
+		});
+	});
+
+	describe('getInitialStackedBands', () => {
+		it('returns one band between each consecutive pair for seriesCount 3', () => {
+			expect(getInitialStackedBands(3)).toEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+			]);
+		});
+
+		it('returns empty array for seriesCount 0 or 1', () => {
+			expect(getInitialStackedBands(0)).toEqual([]);
+			expect(getInitialStackedBands(1)).toEqual([]);
+		});
+
+		it('returns single band for seriesCount 2', () => {
+			expect(getInitialStackedBands(2)).toEqual([{ series: [1, 2] }]);
+		});
+
+		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
+			const bands = getInitialStackedBands(5);
+			expect(bands).toEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+				{ series: [3, 4] },
+				{ series: [4, 5] },
+			]);
+		});
+	});
+});

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useBarChartStacking.test.ts

@@ -0,0 +1,313 @@
+import { renderHook } from '@testing-library/react';
+import uPlot from 'uplot';
+
+import type { UseBarChartStackingParams } from '../useBarChartStacking';
+import { useBarChartStacking } from '../useBarChartStacking';
+
+type MockConfig = { addHook: jest.Mock };
+
+function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
+	return (c as unknown) as UseBarChartStackingParams['config'];
+}
+
+function createMockConfig(): {
+	config: MockConfig;
+	invokeSetData: (plot: uPlot) => void;
+	invokeSetSeries: (
+		plot: uPlot,
+		seriesIndex: number | null,
+		opts: Partial<uPlot.Series> & { focus?: boolean },
+	) => void;
+	removeSetData: jest.Mock;
+	removeSetSeries: jest.Mock;
+} {
+	let setDataHandler: ((plot: uPlot) => void) | null = null;
+	let setSeriesHandler:
+		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
+		| null = null;
+
+	const removeSetData = jest.fn();
+	const removeSetSeries = jest.fn();
+
+	const addHook = jest.fn(
+		(
+			hookName: string,
+			handler: (plot: uPlot, ...args: unknown[]) => void,
+		): (() => void) => {
+			if (hookName === 'setData') {
+				setDataHandler = handler as (plot: uPlot) => void;
+				return removeSetData;
+			}
+			if (hookName === 'setSeries') {
+				setSeriesHandler = handler as (
+					plot: uPlot,
+					seriesIndex: number | null,
+					opts: uPlot.Series,
+				) => void;
+				return removeSetSeries;
+			}
+			return jest.fn();
+		},
+	);
+
+	const config: MockConfig = { addHook };
+
+	const invokeSetData = (plot: uPlot): void => {
+		setDataHandler?.(plot);
+	};
+
+	const invokeSetSeries = (
+		plot: uPlot,
+		seriesIndex: number | null,
+		opts: Partial<uPlot.Series> & { focus?: boolean },
+	): void => {
+		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
+	};
+
+	return {
+		config,
+		invokeSetData,
+		invokeSetSeries,
+		removeSetData,
+		removeSetSeries,
+	};
+}
+
+function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
+	return ({
+		data: [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+		],
+		series: [{ show: true }, { show: true }, { show: true }],
+		delBand: jest.fn(),
+		addBand: jest.fn(),
+		setData: jest.fn(),
+		...overrides,
+	} as unknown) as uPlot;
+}
+
+describe('useBarChartStacking', () => {
+	it('returns data as-is when isStackedBarChart is false', () => {
+		const data: uPlot.AlignedData = [
+			[100, 200],
+			[1, 2],
+			[3, 4],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: false,
+				config: null,
+			}),
+		);
+		expect(result.current).toBe(data);
+	});
+
+	it('returns data as-is when config is null and isStackedBarChart is true', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[4, 5],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		// Still returns stacked data (computed in useMemo); no hooks registered
+		expect(result.current[0]).toEqual([0, 1]);
+		expect(result.current[1]).toEqual([5, 7]); // stacked
+		expect(result.current[2]).toEqual([4, 5]);
+	});
+
+	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+			[7, 8, 9],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		expect(result.current[0]).toEqual([0, 1, 2]);
+		expect(result.current[1]).toEqual([12, 15, 18]); // s1+s2+s3
+		expect(result.current[2]).toEqual([11, 13, 15]); // s2+s3
+		expect(result.current[3]).toEqual([7, 8, 9]);
+	});
+
+	it('returns data as-is when only one value series (no stacking needed)', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		expect(result.current).toEqual(data);
+	});
+
+	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
+		const { config } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
+		expect(config.addHook).toHaveBeenCalledWith(
+			'setSeries',
+			expect.any(Function),
+		);
+	});
+
+	it('does not register hooks when isStackedBarChart is false', () => {
+		const { config } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: false,
+				config: asConfig(config),
+			}),
+		);
+
+		expect(config.addHook).not.toHaveBeenCalled();
+	});
+
+	it('calls cleanup when unmounted', () => {
+		const { config, removeSetData, removeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		const { unmount } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		unmount();
+
+		expect(removeSetData).toHaveBeenCalled();
+		expect(removeSetSeries).toHaveBeenCalled();
+	});
+
+	it('re-stacks and updates plot when setData hook is invoked', () => {
+		const { config, invokeSetData } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+		];
+		const plot = createMockPlot({
+			data: [
+				[0, 1, 2],
+				[5, 7, 9],
+				[4, 5, 6],
+			],
+		});
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		invokeSetData(plot);
+
+		expect(plot.delBand).toHaveBeenCalledWith(null);
+		expect(plot.addBand).toHaveBeenCalled();
+		expect(plot.setData).toHaveBeenCalledWith(
+			expect.arrayContaining([
+				[0, 1, 2],
+				expect.any(Array), // stacked row 1
+				expect.any(Array), // stacked row 2
+			]),
+		);
+	});
+
+	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
+		const { config, invokeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[10, 20],
+			[5, 10],
+		];
+		// Plot data must match unstacked length so canApplyStacking passes
+		const plot = createMockPlot({
+			data: [
+				[0, 1],
+				[15, 30],
+				[5, 10],
+			],
+		});
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		invokeSetSeries(plot, 1, { show: false });
+
+		expect(plot.setData).toHaveBeenCalled();
+	});
+
+	it('does not re-stack when setSeries is called with focus option', () => {
+		const { config, invokeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+		const plot = createMockPlot();
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		(plot.setData as jest.Mock).mockClear();
+		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
+
+		expect(plot.setData).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
-import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import './ChartLayout.styles.scss';
 
 export interface ChartLayoutProps {
-	showLegend?: boolean;
 	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
@@ -22,7 +20,6 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
-	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -33,15 +30,6 @@ export default function ChartLayout({
 }: ChartLayoutProps): JSX.Element {
 	const chartDimensions = useMemo(
 		() => {
-			if (!showLegend) {
-				return {
-					width: containerWidth,
-					height: containerHeight,
-					legendWidth: 0,
-					legendHeight: 0,
-					averageLegendWidth: MAX_LEGEND_WIDTH,
-				};
-			}
 			const legendItemsMap = config.getLegendItems();
 			const seriesLabels = Object.values(legendItemsMap)
 				.map((item) => item.label)
@@ -54,7 +42,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig, showLegend],
+		[containerWidth, containerHeight, legendConfig],
 	);
 
 	return (
@@ -72,17 +60,15 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				{showLegend && (
-					<div
-						className="chart-layout__legend-wrapper"
-						style={{
-							height: chartDimensions.legendHeight,
-							width: chartDimensions.legendWidth,
-						}}
-					>
-						{legendComponent(chartDimensions.averageLegendWidth)}
-					</div>
-				)}
+				<div
+					className="chart-layout__legend-wrapper"
+					style={{
+						height: chartDimensions.legendHeight,
+						width: chartDimensions.legendWidth,
+					}}
+				>
+					{legendComponent(chartDimensions.averageLegendWidth)}
+				</div>
 			</div>
 			{layoutChildren}
 		</div>

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -1,121 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import Histogram from '../../charts/Histogram/Histogram';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import {
-	prepareHistogramPanelConfig,
-	prepareHistogramPanelData,
-} from './utils';
-
-function HistogramPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-
-	const config = useMemo(() => {
-		return prepareHistogramPanelConfig({
-			widget,
-			isDarkMode,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			panelMode,
-		});
-	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareHistogramPanelData({
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			bucketWidth: widget?.bucketWidth,
-			bucketCount: widget?.bucketCount,
-			mergeAllActiveQueries: widget?.mergeAllActiveQueries,
-		});
-	}, [
-		queryResponse?.data?.payload,
-		widget?.bucketWidth,
-		widget?.bucketCount,
-		widget?.mergeAllActiveQueries,
-	]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<Histogram
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={(plot: uPlot | null): void => {
-						uPlotRef.current = plot;
-					}}
-					onDestroy={(): void => {
-						uPlotRef.current = null;
-					}}
-					isQueriesMerged={widget.mergeAllActiveQueries}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					syncMode={DashboardCursorSync.Crosshair}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default HistogramPanel;

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts

@@ -1,214 +0,0 @@
-import { histogramBucketSizes } from '@grafana/data';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { DrawStyle, VisibilityMode } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { incrRoundDn } from 'lib/uPlotV2/utils/scale';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { AlignedData } from 'uplot';
-
-import { PanelMode } from '../types';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
-import {
-	addNullToFirstHistogram,
-	histogram,
-	join,
-	replaceUndefinedWithNull,
-	roundDecimals,
-} from '../utils/histogram';
-
-export interface PrepareHistogramPanelDataParams {
-	apiResponse: MetricRangePayloadProps;
-	bucketWidth?: number;
-	bucketCount?: number;
-	mergeAllActiveQueries?: boolean;
-}
-
-const BUCKET_OFFSET = 0;
-const HIST_SORT = (a: number, b: number): number => a - b;
-
-function extractNumericValues(
-	result: MetricRangePayloadProps['data']['result'],
-): number[] {
-	const values: number[] = [];
-	for (const item of result) {
-		for (const [, valueStr] of item.values) {
-			values.push(Number.parseFloat(valueStr) || 0);
-		}
-	}
-	return values;
-}
-
-function computeSmallestDelta(sortedValues: number[]): number {
-	if (sortedValues.length <= 1) {
-		return 0;
-	}
-	let smallest = Infinity;
-	for (let i = 1; i < sortedValues.length; i++) {
-		const delta = sortedValues[i] - sortedValues[i - 1];
-		if (delta > 0) {
-			smallest = Math.min(smallest, delta);
-		}
-	}
-	return smallest === Infinity ? 0 : smallest;
-}
-
-function selectBucketSize({
-	range,
-	bucketCount,
-	smallestDelta,
-	bucketWidthOverride,
-}: {
-	range: number;
-	bucketCount: number;
-	smallestDelta: number;
-	bucketWidthOverride?: number;
-}): number {
-	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
-		return bucketWidthOverride;
-	}
-	const targetSize = range / bucketCount;
-	for (const candidate of histogramBucketSizes) {
-		if (targetSize < candidate && candidate >= smallestDelta) {
-			return candidate;
-		}
-	}
-	return 0;
-}
-
-function buildFrames(
-	result: MetricRangePayloadProps['data']['result'],
-	mergeAllActiveQueries: boolean,
-): number[][] {
-	const frames: number[][] = result.map((item) =>
-		item.values.map(([, valueStr]) => Number.parseFloat(valueStr) || 0),
-	);
-	if (mergeAllActiveQueries && frames.length > 1) {
-		const first = frames[0];
-		for (let i = 1; i < frames.length; i++) {
-			first.push(...frames[i]);
-			frames[i] = [];
-		}
-	}
-	return frames;
-}
-
-export function prepareHistogramPanelData({
-	apiResponse,
-	bucketWidth,
-	bucketCount: bucketCountProp = DEFAULT_BUCKET_COUNT,
-	mergeAllActiveQueries = false,
-}: PrepareHistogramPanelDataParams): AlignedData {
-	const bucketCount = bucketCountProp ?? DEFAULT_BUCKET_COUNT;
-	const result = apiResponse.data.result;
-
-	const seriesValues = extractNumericValues(result);
-	if (seriesValues.length === 0) {
-		return [[]];
-	}
-
-	const sorted = [...seriesValues].sort((a, b) => a - b);
-	const min = sorted[0];
-	const max = sorted[sorted.length - 1];
-	const range = max - min;
-	const smallestDelta = computeSmallestDelta(sorted);
-	let bucketSize = selectBucketSize({
-		range,
-		bucketCount,
-		smallestDelta,
-		bucketWidthOverride: bucketWidth,
-	});
-	if (bucketSize <= 0) {
-		bucketSize = range > 0 ? range / bucketCount : 1;
-	}
-
-	const getBucket = (v: number): number =>
-		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
-
-	const frames = buildFrames(result, mergeAllActiveQueries);
-	const histograms: AlignedData[] = frames
-		.filter((frame) => frame.length > 0)
-		.map((frame) => histogram(frame, getBucket, HIST_SORT));
-
-	if (histograms.length === 0) {
-		return [[]];
-	}
-
-	const joined = join(histograms);
-	replaceUndefinedWithNull(joined);
-	addNullToFirstHistogram(joined, bucketSize);
-	return joined;
-}
-
-export function prepareHistogramPanelConfig({
-	widget,
-	apiResponse,
-	panelMode,
-	isDarkMode,
-}: {
-	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
-	panelMode: PanelMode;
-	isDarkMode: boolean;
-}): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		apiResponse,
-		panelMode,
-		panelType: PANEL_TYPES.HISTOGRAM,
-	});
-	builder.setCursor({
-		drag: {
-			x: false,
-			y: false,
-			setScale: true,
-		},
-		focus: {
-			prox: 1e3,
-		},
-	});
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: false,
-		auto: true,
-	});
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		auto: true,
-	});
-
-	const currentQuery = widget.query;
-
-	apiResponse.data.result.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = currentQuery
-			? getLegend(series, currentQuery, baseLabelName)
-			: baseLabelName;
-
-		builder.addSeries({
-			label: label,
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.HISTOGRAM,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			barWidthFactor: 1,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
-			isDarkMode,
-		});
-	});
-
-	return builder;
-}

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -19,9 +19,9 @@ export interface BaseConfigBuilderProps {
 	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
-	onClick?: OnClickPluginOpts['onClick'];
-	onDragSelect?: (startTime: number, endTime: number) => void;
-	timezone?: Timezone;
+	onClick: OnClickPluginOpts['onClick'];
+	onDragSelect: (startTime: number, endTime: number) => void;
+	timezone: Timezone;
 	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
@@ -40,10 +40,8 @@ export function buildBaseConfig({
 	minTimeScale,
 	maxTimeScale,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = timezone
-		? (timestamp: number): Date =>
-				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
-		: undefined;
+	const tzDate = (timestamp: number): Date =>
+		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,

frontend/src/container/DashboardContainer/visualization/panels/utils/histogram.ts

@@ -1,181 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable no-param-reassign */
-import {
-	NULL_EXPAND,
-	NULL_REMOVE,
-	NULL_RETAIN,
-} from 'container/PanelWrapper/constants';
-import { AlignedData } from 'uplot';
-
-export function incrRoundDn(num: number, incr: number): number {
-	return Math.floor(num / incr) * incr;
-}
-
-export function roundDecimals(val: number, dec = 0): number {
-	if (Number.isInteger(val)) {
-		return val;
-	}
-
-	const p = 10 ** dec;
-	const n = val * p * (1 + Number.EPSILON);
-	return Math.round(n) / p;
-}
-
-function nullExpand(
-	yVals: Array<number | null>,
-	nullIdxs: number[],
-	alignedLen: number,
-): void {
-	for (let i = 0, xi, lastNullIdx = -1; i < nullIdxs.length; i++) {
-		const nullIdx = nullIdxs[i];
-
-		if (nullIdx > lastNullIdx) {
-			xi = nullIdx - 1;
-			while (xi >= 0 && yVals[xi] == null) {
-				yVals[xi--] = null;
-			}
-
-			xi = nullIdx + 1;
-			while (xi < alignedLen && yVals[xi] == null) {
-				yVals[(lastNullIdx = xi++)] = null;
-			}
-		}
-	}
-}
-
-export function join(
-	tables: AlignedData[],
-	nullModes?: number[][],
-): AlignedData {
-	let xVals: Set<number>;
-
-	// eslint-disable-next-line prefer-const
-	xVals = new Set();
-
-	for (let ti = 0; ti < tables.length; ti++) {
-		const t = tables[ti];
-		const xs = t[0];
-		const len = xs.length;
-
-		for (let i = 0; i < len; i++) {
-			xVals.add(xs[i]);
-		}
-	}
-
-	const data = [Array.from(xVals).sort((a, b) => a - b)];
-
-	const alignedLen = data[0].length;
-
-	const xIdxs = new Map();
-
-	for (let i = 0; i < alignedLen; i++) {
-		xIdxs.set(data[0][i], i);
-	}
-
-	for (let ti = 0; ti < tables.length; ti++) {
-		const t = tables[ti];
-		const xs = t[0];
-
-		for (let si = 1; si < t.length; si++) {
-			const ys = t[si];
-
-			const yVals = Array(alignedLen).fill(undefined);
-
-			const nullMode = nullModes ? nullModes[ti][si] : NULL_RETAIN;
-
-			const nullIdxs = [];
-
-			for (let i = 0; i < ys.length; i++) {
-				const yVal = ys[i];
-				const alignedIdx = xIdxs.get(xs[i]);
-
-				if (yVal === null) {
-					if (nullMode !== NULL_REMOVE) {
-						yVals[alignedIdx] = yVal;
-
-						if (nullMode === NULL_EXPAND) {
-							nullIdxs.push(alignedIdx);
-						}
-					}
-				} else {
-					yVals[alignedIdx] = yVal;
-				}
-			}
-
-			nullExpand(yVals, nullIdxs, alignedLen);
-
-			data.push(yVals);
-		}
-	}
-
-	return data as AlignedData;
-}
-
-export function histogram(
-	vals: number[],
-	getBucket: (v: number) => number,
-	sort?: ((a: number, b: number) => number) | null,
-): AlignedData {
-	const hist = new Map();
-
-	for (let i = 0; i < vals.length; i++) {
-		let v = vals[i];
-
-		if (v != null) {
-			v = getBucket(v);
-		}
-
-		const entry = hist.get(v);
-
-		if (entry) {
-			entry.count++;
-		} else {
-			hist.set(v, { value: v, count: 1 });
-		}
-	}
-
-	const bins = [...hist.values()];
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-	sort && bins.sort((a, b) => sort(a.value, b.value));
-
-	const values = Array(bins.length);
-	const counts = Array(bins.length);
-
-	for (let i = 0; i < bins.length; i++) {
-		values[i] = bins[i].value;
-		counts[i] = bins[i].count;
-	}
-
-	return [values, counts];
-}
-
-export function replaceUndefinedWithNull(data: AlignedData): AlignedData {
-	const arrays = data as (number | null | undefined)[][];
-	for (let i = 0; i < arrays.length; i++) {
-		for (let j = 0; j < arrays[i].length; j++) {
-			if (arrays[i][j] === undefined) {
-				arrays[i][j] = null;
-			}
-		}
-	}
-	return data;
-}
-
-export function addNullToFirstHistogram(
-	data: AlignedData,
-	bucketSize: number,
-): void {
-	const histograms = data as (number | null)[][];
-	if (
-		histograms.length > 0 &&
-		histograms[0].length > 0 &&
-		histograms[0][0] !== null
-	) {
-		histograms[0].unshift(histograms[0][0] - bucketSize);
-		for (let i = 1; i < histograms.length; i++) {
-			histograms[i].unshift(null);
-		}
-	}
-}

frontend/src/hooks/useCopyToClipboard.ts

@@ -1,61 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-const DEFAULT_COPIED_RESET_MS = 2000;
-
-export interface UseCopyToClipboardOptions {
-	/** How long (ms) to keep "copied" state before resetting. Default 2000. */
-	copiedResetMs?: number;
-}
-
-export type ID = number | string | null;
-
-export interface UseCopyToClipboardReturn {
-	/** Copy text to clipboard. Pass an optional id to track which item was copied (e.g. seriesIndex). */
-	copyToClipboard: (text: string, id?: ID) => void;
-	/** True when something was just copied and still within the reset threshold. */
-	isCopied: boolean;
-	/** The id passed to the last successful copy, or null after reset. Use to show "copied" state for a specific item (e.g. copiedId === item.seriesIndex). */
-	id: ID;
-}
-
-export function useCopyToClipboard(
-	options: UseCopyToClipboardOptions = {},
-): UseCopyToClipboardReturn {
-	const { copiedResetMs = DEFAULT_COPIED_RESET_MS } = options;
-	const [state, setState] = useState<{ isCopied: boolean; id: ID }>({
-		isCopied: false,
-		id: null,
-	});
-	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	useEffect(() => {
-		return (): void => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-		};
-	}, []);
-
-	const copyToClipboard = useCallback(
-		(text: string, id?: ID): void => {
-			navigator.clipboard.writeText(text).then(() => {
-				if (timeoutRef.current) {
-					clearTimeout(timeoutRef.current);
-				}
-				setState({ isCopied: true, id: id ?? null });
-				timeoutRef.current = setTimeout(() => {
-					setState({ isCopied: false, id: null });
-					timeoutRef.current = null;
-				}, copiedResetMs);
-			});
-		},
-		[copiedResetMs],
-	);
-
-	return {
-		copyToClipboard,
-		isCopied: state.isCopied,
-		id: state.id,
-	};
-}

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -128,15 +128,6 @@
 		opacity: 1;
 	}
 
-	.legend-item-label-trigger {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		flex: 1;
-		min-width: 0;
-		cursor: pointer;
-	}
-
 	.legend-marker {
 		border-width: 2px;
 		border-radius: 50%;
@@ -166,34 +157,10 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		min-width: 0;
-		user-select: none;
-	}
-
-	.legend-copy-button {
-		display: none;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		padding: 2px;
-		margin: 0;
-		border: none;
-		color: var(--bg-vanilla-400);
-		cursor: pointer;
-		border-radius: 4px;
-		opacity: 1;
-		transition: opacity 0.15s ease, color 0.15s ease;
-
-		&:hover {
-			color: var(--bg-vanilla-100);
-		}
 	}
 
 	&:hover {
 		background: rgba(255, 255, 255, 0.05);
-		.legend-copy-button {
-			display: flex;
-			opacity: 1;
-		}
 	}
 }
 
@@ -205,17 +172,4 @@
 			}
 		}
 	}
-
-	.legend-item {
-		&:hover {
-			background: rgba(0, 0, 0, 0.05);
-		}
-		.legend-copy-button {
-			color: var(--bg-ink-400);
-
-			&:hover {
-				color: var(--bg-ink-500);
-			}
-		}
-	}
 }

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -2,10 +2,8 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
 import { Input, Tooltip as AntdTooltip } from 'antd';
 import cx from 'classnames';
-import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-import { Check, Copy } from 'lucide-react';
 
 import { useLegendActions } from '../../hooks/useLegendActions';
 import { LegendPosition, LegendProps } from '../types';
@@ -34,7 +32,6 @@ export default function Legend({
 	});
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
 	const [legendSearchQuery, setLegendSearchQuery] = useState('');
-	const { copyToClipboard, id: copiedId } = useCopyToClipboard();
 
 	const legendItems = useMemo(() => Object.values(legendItemsMap), [
 		legendItemsMap,
@@ -62,53 +59,26 @@ export default function Legend({
 		);
 	}, [position, legendSearchQuery, legendItems]);
 
-	const handleCopyLegendItem = useCallback(
-		(e: React.MouseEvent, seriesIndex: number, label: string): void => {
-			e.stopPropagation();
-			copyToClipboard(label, seriesIndex);
-		},
-		[copyToClipboard],
-	);
-
 	const renderLegendItem = useCallback(
-		(item: LegendItem): JSX.Element => {
-			const isCopied = copiedId === item.seriesIndex;
-			return (
+		(item: LegendItem): JSX.Element => (
+			<AntdTooltip key={item.seriesIndex} title={item.label}>
 				<div
-					key={item.seriesIndex}
 					data-legend-item-id={item.seriesIndex}
 					className={cx('legend-item', `legend-item-${position.toLowerCase()}`, {
 						'legend-item-off': !item.show,
 						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
 					})}
 				>
-					<AntdTooltip title={item.label}>
-						<div className="legend-item-label-trigger">
-							<div
-								className="legend-marker"
-								style={{ borderColor: String(item.color) }}
-								data-is-legend-marker={true}
-							/>
-							<span className="legend-label">{item.label}</span>
-						</div>
-					</AntdTooltip>
-					<AntdTooltip title={isCopied ? 'Copied' : 'Copy'}>
-						<button
-							type="button"
-							className="legend-copy-button"
-							onClick={(e): void =>
-								handleCopyLegendItem(e, item.seriesIndex, item.label ?? '')
-							}
-							aria-label={`Copy ${item.label}`}
-							data-testid="legend-copy"
-						>
-							{isCopied ? <Check size={12} /> : <Copy size={12} />}
-						</button>
-					</AntdTooltip>
+					<div
+						className="legend-marker"
+						style={{ borderColor: String(item.color) }}
+						data-is-legend-marker={true}
+					/>
+					<span className="legend-label">{item.label}</span>
 				</div>
-			);
-		},
-		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position],
+			</AntdTooltip>
+		),
+		[focusedSeriesIndex, position],
 	);
 
 	const isEmptyState = useMemo(() => {

frontend/src/lib/uPlotV2/components/Tooltip/HistogramTooltip.tsx

@@ -1,8 +0,0 @@
-import { HistogramTooltipProps } from '../types';
-import Tooltip from './Tooltip';
-
-export default function HistogramTooltip(
-	props: HistogramTooltipProps,
-): JSX.Element {
-	return <Tooltip {...props} showTooltipHeader={false} />;
-}

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -16,16 +16,12 @@ export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
-	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
 	const tooltipContent = content ?? [];
 
 	const headerTitle = useMemo(() => {
-		if (!showTooltipHeader) {
-			return null;
-		}
 		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
@@ -34,12 +30,7 @@ export default function Tooltip({
 		return dayjs(data[0][cursorIdx] * 1000)
 			.tz(timezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-	}, [
-		timezone,
-		uPlotInstance.data,
-		uPlotInstance.cursor.idx,
-		showTooltipHeader,
-	]);
+	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
 
 	return (
 		<div
@@ -48,11 +39,9 @@ export default function Tooltip({
 				isDarkMode ? 'darkMode' : 'lightMode',
 			)}
 		>
-			{showTooltipHeader && (
-				<div className="uplot-tooltip-header">
-					<span>{headerTitle}</span>
-				</div>
-			)}
+			<div className="uplot-tooltip-header">
+				<span>{headerTitle}</span>
+			</div>
 			<div
 				style={{
 					height: Math.min(

frontend/src/lib/uPlotV2/components/__tests__/Legend.test.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-	fireEvent,
-	render,
-	RenderResult,
-	screen,
-	within,
-} from '@testing-library/react';
+import { render, RenderResult, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
@@ -14,9 +8,6 @@ import { useLegendActions } from '../../hooks/useLegendActions';
 import Legend from '../Legend/Legend';
 import { LegendPosition } from '../types';
 
-const mockWriteText = jest.fn().mockResolvedValue(undefined);
-let clipboardSpy: jest.SpyInstance | undefined;
-
 jest.mock('react-virtuoso', () => ({
 	VirtuosoGrid: ({
 		data,
@@ -48,15 +39,6 @@ const mockUseLegendActions = useLegendActions as jest.MockedFunction<
 >;
 
 describe('Legend', () => {
-	beforeAll(() => {
-		// JSDOM does not define navigator.clipboard; add it so we can spy on writeText
-		Object.defineProperty(navigator, 'clipboard', {
-			value: { writeText: () => Promise.resolve() },
-			writable: true,
-			configurable: true,
-		});
-	});
-
 	const baseLegendItemsMap = {
 		0: {
 			seriesIndex: 0,
@@ -88,11 +70,6 @@ describe('Legend', () => {
 		onLegendMouseMove = jest.fn();
 		onLegendMouseLeave = jest.fn();
 		onFocusSeries = jest.fn();
-		mockWriteText.mockClear();
-
-		clipboardSpy = jest
-			.spyOn(navigator.clipboard, 'writeText')
-			.mockImplementation(mockWriteText);
 
 		mockUseLegendsSync.mockReturnValue({
 			legendItemsMap: baseLegendItemsMap,
@@ -109,7 +86,6 @@ describe('Legend', () => {
 	});
 
 	afterEach(() => {
-		clipboardSpy?.mockRestore();
 		jest.clearAllMocks();
 	});
 
@@ -234,47 +210,4 @@ describe('Legend', () => {
 			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
 		});
 	});
-
-	describe('copy action', () => {
-		it('copies the legend label to clipboard when copy button is clicked', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const firstLegendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-			const copyButton = within(firstLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(mockWriteText).toHaveBeenCalledTimes(1);
-			expect(mockWriteText).toHaveBeenCalledWith('A');
-		});
-
-		it('copies the correct label when copy is clicked on a different legend item', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const thirdLegendItem = document.querySelector(
-				'[data-legend-item-id="2"]',
-			) as HTMLElement;
-			const copyButton = within(thirdLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(mockWriteText).toHaveBeenCalledTimes(1);
-			expect(mockWriteText).toHaveBeenCalledWith('C');
-		});
-
-		it('does not call onLegendClick when copy button is clicked', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const firstLegendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-			const copyButton = within(firstLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(onLegendClick).not.toHaveBeenCalled();
-		});
-	});
 });

frontend/src/lib/uPlotV2/components/types.ts

@@ -60,7 +60,6 @@ export interface TooltipRenderArgs {
 }
 
 export interface BaseTooltipProps {
-	showTooltipHeader?: boolean;
 	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
@@ -75,14 +74,7 @@ export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
 	isStackedBarChart?: boolean;
 }
 
-export interface HistogramTooltipProps
-	extends BaseTooltipProps,
-		TooltipRenderArgs {}
-
-export type TooltipProps =
-	| TimeSeriesTooltipProps
-	| BarTooltipProps
-	| HistogramTooltipProps;
+export type TooltipProps = TimeSeriesTooltipProps | BarTooltipProps;
 
 export enum LegendPosition {
 	BOTTOM = 'bottom',

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -65,8 +65,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 
 		if (this.props.panelType === PANEL_TYPES.BAR) {
 			lineConfig.fill = lineColor;
-		} else if (this.props.panelType === PANEL_TYPES.HISTOGRAM) {
-			lineConfig.fill = `${lineColor}40`;
 		}
 
 		return lineConfig;