Merge branch 'main' into test/uplot-utils-test

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

@@ -1,91 +0,0 @@
-import { useCallback, useRef } from 'react';
-import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
-import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
-import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
-import noop from 'lodash-es/noop';
-import uPlot from 'uplot';
-
-import { ChartProps } from '../types';
-
-const TOOLTIP_WIDTH_PADDING = 60;
-const TOOLTIP_MIN_WIDTH = 200;
-
-export default function ChartWrapper({
-	legendConfig = { position: LegendPosition.BOTTOM },
-	config,
-	data,
-	width: containerWidth,
-	height: containerHeight,
-	showTooltip = true,
-	canPinTooltip = false,
-	syncMode,
-	syncKey,
-	onDestroy = noop,
-	children,
-	layoutChildren,
-	renderTooltip,
-	'data-testid': testId,
-}: ChartProps): JSX.Element {
-	const plotInstanceRef = useRef<uPlot | null>(null);
-
-	const legendComponent = useCallback(
-		(averageLegendWidth: number): React.ReactNode => {
-			return (
-				<Legend
-					config={config}
-					position={legendConfig.position}
-					averageLegendWidth={averageLegendWidth}
-				/>
-			);
-		},
-		[config, legendConfig.position],
-	);
-
-	return (
-		<PlotContextProvider>
-			<ChartLayout
-				config={config}
-				containerWidth={containerWidth}
-				containerHeight={containerHeight}
-				legendConfig={legendConfig}
-				legendComponent={legendComponent}
-				layoutChildren={layoutChildren}
-			>
-				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
-					<UPlotChart
-						config={config}
-						data={data}
-						width={chartWidth}
-						height={chartHeight}
-						plotRef={(plot): void => {
-							plotInstanceRef.current = plot;
-						}}
-						onDestroy={(plot: uPlot): void => {
-							plotInstanceRef.current = null;
-							onDestroy(plot);
-						}}
-						data-testid={testId}
-					>
-						{children}
-						{showTooltip && (
-							<TooltipPlugin
-								config={config}
-								canPinTooltip={canPinTooltip}
-								syncMode={syncMode}
-								maxWidth={Math.max(
-									TOOLTIP_MIN_WIDTH,
-									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
-								)}
-								syncKey={syncKey}
-								render={renderTooltip}
-							/>
-						)}
-					</UPlotChart>
-				)}
-			</ChartLayout>
-		</PlotContextProvider>
-	);
-}

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

@@ -1,32 +1,104 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import TimeSeriesTooltip from 'lib/uPlotV2/components/Tooltip/TimeSeriesTooltip';
+import { useCallback, useRef } from 'react';
+import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
+import Legend from 'lib/uPlotV2/components/Legend/Legend';
+import Tooltip from 'lib/uPlotV2/components/Tooltip/Tooltip';
 import {
-	TimeSeriesTooltipProps,
+	LegendPosition,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
+import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
+import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
+import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
+import _noop from 'lodash-es/noop';
+import uPlot from 'uplot';
 
-import { TimeSeriesChartProps } from '../types';
+import { ChartProps } from '../types';
 
-export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, ...rest } = props;
+const TOOLTIP_WIDTH_PADDING = 60;
+const TOOLTIP_MIN_WIDTH = 200;
 
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			const tooltipProps: TimeSeriesTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-			};
-			return <TimeSeriesTooltip {...tooltipProps} />;
+export default function TimeSeries({
+	legendConfig = { position: LegendPosition.BOTTOM },
+	config,
+	data,
+	width: containerWidth,
+	height: containerHeight,
+	disableTooltip = false,
+	canPinTooltip = false,
+	timezone,
+	yAxisUnit,
+	decimalPrecision,
+	syncMode,
+	syncKey,
+	onDestroy = _noop,
+	children,
+	layoutChildren,
+	'data-testid': testId,
+}: ChartProps): JSX.Element {
+	const plotInstanceRef = useRef<uPlot | null>(null);
+
+	const legendComponent = useCallback(
+		(averageLegendWidth: number): React.ReactNode => {
+			return (
+				<Legend
+					config={config}
+					position={legendConfig.position}
+					averageLegendWidth={averageLegendWidth}
+				/>
+			);
 		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[config, legendConfig.position],
 	);
 
 	return (
-		<ChartWrapper {...rest} renderTooltip={renderTooltip}>
-			{children}
-		</ChartWrapper>
+		<PlotContextProvider>
+			<ChartLayout
+				config={config}
+				containerWidth={containerWidth}
+				containerHeight={containerHeight}
+				legendConfig={legendConfig}
+				legendComponent={legendComponent}
+				layoutChildren={layoutChildren}
+			>
+				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
+					<UPlotChart
+						config={config}
+						data={data}
+						width={chartWidth}
+						height={chartHeight}
+						plotRef={(plot): void => {
+							plotInstanceRef.current = plot;
+						}}
+						onDestroy={(plot: uPlot): void => {
+							plotInstanceRef.current = null;
+							onDestroy(plot);
+						}}
+						data-testid={testId}
+					>
+						{children}
+						{!disableTooltip && (
+							<TooltipPlugin
+								config={config}
+								canPinTooltip={canPinTooltip}
+								syncMode={syncMode}
+								maxWidth={Math.max(
+									TOOLTIP_MIN_WIDTH,
+									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
+								)}
+								syncKey={syncKey}
+								render={(props: TooltipRenderArgs): React.ReactNode => (
+									<Tooltip
+										{...props}
+										timezone={timezone}
+										yAxisUnit={yAxisUnit}
+										decimalPrecision={decimalPrecision}
+									/>
+								)}
+							/>
+						)}
+					</UPlotChart>
+				)}
+			</ChartLayout>
+		</PlotContextProvider>
 	);
 }

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

@@ -1,40 +1,29 @@
 import { PrecisionOption } from 'components/Graph/types';
-import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
+import { LegendConfig } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
 	height: number;
-	showTooltip?: boolean;
+	disableTooltip?: boolean;
 	timezone: string;
+	syncMode?: DashboardCursorSync;
+	syncKey?: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	'data-testid'?: string;
 }
-interface UPlotBasedChartProps {
+
+interface TimeSeriesChartProps extends BaseChartProps {
 	config: UPlotConfigBuilder;
+	legendConfig: LegendConfig;
 	data: uPlot.AlignedData;
-	syncMode?: DashboardCursorSync;
-	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
 	onDestroy?: (plot: uPlot) => void;
 	children?: React.ReactNode;
 	layoutChildren?: React.ReactNode;
+	'data-testid'?: string;
 }
 
-export interface TimeSeriesChartProps
-	extends BaseChartProps,
-		UPlotBasedChartProps {
-	legendConfig: LegendConfig;
-}
-
-export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
-	legendConfig: LegendConfig;
-	isStackedBarChart?: boolean;
-}
-
-export type ChartProps = (TimeSeriesChartProps | BarChartProps) & {
-	renderTooltip: (props: TooltipRenderArgs) => React.ReactNode;
-};
+export type ChartProps = TimeSeriesChartProps;

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

@@ -6,6 +6,7 @@ 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 { LineInterpolation } from 'lib/uPlotV2/config/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
@@ -72,28 +73,55 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	}, [queryResponse?.data?.payload]);
 
 	const config = useMemo(() => {
+		const tzDate = (timestamp: number): Date =>
+			uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+
 		return prepareUPlotConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
+			widgetId: widget.id || '',
 			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
+			tzDate,
 			minTimeScale: minTimeScale,
 			maxTimeScale: maxTimeScale,
+			isLogScale: widget?.isLogScale ?? false,
+			thresholds: {
+				scaleKey: 'y',
+				thresholds: (widget.thresholds || []).map((threshold) => ({
+					thresholdValue: threshold.thresholdValue ?? 0,
+					thresholdColor: threshold.thresholdColor,
+					thresholdUnit: threshold.thresholdUnit,
+					thresholdLabel: threshold.thresholdLabel,
+				})),
+				yAxisUnit: widget.yAxisUnit,
+			},
+			yAxisUnit: widget.yAxisUnit || '',
+			softMin: widget.softMin === undefined ? null : widget.softMin,
+			softMax: widget.softMax === undefined ? null : widget.softMax,
+			spanGaps: false,
+			colorMapping: widget.customLegendColors ?? {},
+			lineInterpolation: LineInterpolation.Spline,
+			isDarkMode,
+			onClick: clickHandlerWithContextMenu,
+			onDragSelect,
+			currentQuery: widget.query,
+			panelMode,
 		});
 	}, [
-		widget,
+		widget.id,
+		maxTimeScale,
+		minTimeScale,
+		timezone.value,
+		widget.customLegendColors,
+		widget.isLogScale,
+		widget.softMax,
+		widget.softMin,
 		isDarkMode,
+		queryResponse?.data?.payload,
+		widget.query,
+		widget.thresholds,
+		widget.yAxisUnit,
+		panelMode,
 		clickHandlerWithContextMenu,
 		onDragSelect,
-		queryResponse?.data?.payload,
-		panelMode,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
 	]);
 
 	const layoutChildren = useMemo(() => {

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

@@ -1,4 +1,3 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	fillMissingXAxisTimestamps,
@@ -6,20 +5,23 @@ import {
 } from 'container/DashboardContainer/visualization/panels/utils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import onClickPlugin, {
+	OnClickPluginOpts,
+} from 'lib/uPlotLib/plugins/onClickPlugin';
 import {
+	DistributionType,
 	DrawStyle,
 	LineInterpolation,
 	LineStyle,
+	SelectionPreferencesSource,
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { PanelMode } from '../types';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
 
 export const prepareChartData = (
 	apiResponse: MetricRangePayloadProps,
@@ -32,39 +34,112 @@ export const prepareChartData = (
 };
 
 export const prepareUPlotConfig = ({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
+	widgetId,
 	apiResponse,
-	timezone,
-	panelMode,
+	tzDate,
 	minTimeScale,
 	maxTimeScale,
+	isLogScale,
+	thresholds,
+	softMin,
+	softMax,
+	spanGaps,
+	colorMapping,
+	lineInterpolation,
+	isDarkMode,
+	currentQuery,
+	onDragSelect,
+	onClick,
+	yAxisUnit,
+	panelMode,
 }: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
+	widgetId: string;
 	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
+	tzDate: uPlot.LocalDateFromUnix;
+	minTimeScale: number | undefined;
+	maxTimeScale: number | undefined;
+	isLogScale: boolean;
+	softMin: number | null;
+	softMax: number | null;
+	spanGaps: boolean;
+	colorMapping: Record<string, string>;
+	lineInterpolation: LineInterpolation;
+	isDarkMode: boolean;
+	thresholds: ThresholdsDrawHookOptions;
+	currentQuery: Query;
+	yAxisUnit: string;
+	onDragSelect: (startTime: number, endTime: number) => void;
+	onClick?: OnClickPluginOpts['onClick'];
 	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
 }): UPlotConfigBuilder => {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
+	const builder = new UPlotConfigBuilder({
 		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
+		widgetId,
+		tzDate,
+		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
+		selectionPreferencesSource: [
+			PanelMode.DASHBOARD_VIEW,
+			PanelMode.STANDALONE_VIEW,
+		].includes(panelMode)
+			? SelectionPreferencesSource.LOCAL_STORAGE
+			: SelectionPreferencesSource.IN_MEMORY,
+	});
+
+	// X scale – time axis
+	builder.addScale({
+		scaleKey: 'x',
+		time: true,
+		min: minTimeScale,
+		max: maxTimeScale,
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	// Y scale – value axis, driven primarily by softMin/softMax and data
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		min: undefined,
+		max: undefined,
+		softMin: softMin ?? undefined,
+		softMax: softMax ?? undefined,
+		thresholds,
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	builder.addThresholds(thresholds);
+
+	if (typeof onClick === 'function') {
+		builder.addPlugin(
+			onClickPlugin({
+				onClick,
+				apiResponse,
+			}),
+		);
+	}
+
+	builder.addAxis({
+		scaleKey: 'x',
+		show: true,
+		side: 2,
+		isDarkMode,
+		isLogScale: false,
+		panelType: PANEL_TYPES.TIME_SERIES,
+	});
+
+	builder.addAxis({
+		scaleKey: 'y',
+		show: true,
+		side: 3,
+		isDarkMode,
+		isLogScale: false,
+		yAxisUnit,
 		panelType: PANEL_TYPES.TIME_SERIES,
-		minTimeScale,
-		maxTimeScale,
 	});
 
 	apiResponse.data?.result?.forEach((series) => {
@@ -82,16 +157,14 @@ export const prepareUPlotConfig = ({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Line,
 			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
+			colorMapping,
+			spanGaps,
 			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
+			lineInterpolation,
 			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
-			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
-
 	return builder;
 };

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

@@ -1,127 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DistributionType,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import { PanelMode } from '../types';
-
-export interface BaseConfigBuilderProps {
-	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
-	isDarkMode: boolean;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	panelType: PANEL_TYPES;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}
-
-export function buildBaseConfig({
-	widget,
-	isDarkMode,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	panelType,
-	minTimeScale,
-	maxTimeScale,
-}: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-
-	const builder = new UPlotConfigBuilder({
-		onDragSelect,
-		widgetId: widget.id,
-		tzDate,
-		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
-			: SelectionPreferencesSource.IN_MEMORY,
-	});
-
-	const thresholdOptions: ThresholdsDrawHookOptions = {
-		scaleKey: 'y',
-		thresholds: (widget.thresholds || []).map((threshold) => ({
-			thresholdValue: threshold.thresholdValue ?? 0,
-			thresholdColor: threshold.thresholdColor,
-			thresholdUnit: threshold.thresholdUnit,
-			thresholdLabel: threshold.thresholdLabel,
-		})),
-		yAxisUnit: widget.yAxisUnit,
-	};
-
-	builder.addThresholds(thresholdOptions);
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	// Y scale – value axis, driven primarily by softMin/softMax and data
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		min: undefined,
-		max: undefined,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		// thresholds,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	if (typeof onClick === 'function') {
-		builder.addPlugin(
-			onClickPlugin({
-				onClick,
-				apiResponse,
-			}),
-		);
-	}
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		isLogScale: widget.isLogScale,
-		panelType,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		isLogScale: widget.isLogScale,
-		yAxisUnit: widget.yAxisUnit,
-		panelType,
-	});
-
-	return builder;
-}

frontend/src/container/MeterExplorer/Breakdown/graphs.ts

@@ -103,7 +103,7 @@ export const getTotalLogSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.SUM,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -140,7 +140,7 @@ export const getTotalTraceSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.SUM,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -177,7 +177,7 @@ export const getTotalMetricDatapointCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.SUM,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -214,7 +214,7 @@ export const getLogCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -251,7 +251,7 @@ export const getLogSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -288,7 +288,7 @@ export const getSpanCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -325,7 +325,7 @@ export const getSpanSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -362,7 +362,7 @@ export const getMetricCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],

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

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-
-import { TimeSeriesTooltipProps, TooltipContentItem } from '../types';
-import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
-
-export default function TimeSeriesTooltip(
-	props: TimeSeriesTooltipProps,
-): JSX.Element {
-	const content = useMemo(
-		(): TooltipContentItem[] =>
-			buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: props.yAxisUnit ?? '',
-				decimalPrecision: props.decimalPrecision,
-			}),
-		[
-			props.uPlotInstance,
-			props.seriesIndex,
-			props.dataIndexes,
-			props.yAxisUnit,
-			props.decimalPrecision,
-		],
-	);
-
-	return <Tooltip {...props} content={content} />;
-}

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

@@ -3,25 +3,25 @@ import { Virtuoso } from 'react-virtuoso';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
-import { TooltipProps } from '../types';
+import { TooltipContentItem, TooltipProps } from '../types';
+import { buildTooltipContent } from './utils';
 
 import './Tooltip.styles.scss';
 
 const TOOLTIP_LIST_MAX_HEIGHT = 330;
 const TOOLTIP_ITEM_HEIGHT = 38;
 
-dayjs.extend(customParseFormat);
-
 export default function Tooltip({
+	seriesIndex,
+	dataIndexes,
 	uPlotInstance,
 	timezone,
-	content,
+	yAxisUnit = '',
+	decimalPrecision,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-
 	const headerTitle = useMemo(() => {
 		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
@@ -33,6 +33,20 @@ export default function Tooltip({
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
 
+	const content = useMemo(
+		(): TooltipContentItem[] =>
+			buildTooltipContent({
+				data: uPlotInstance.data,
+				series: uPlotInstance.series,
+				dataIndexes,
+				activeSeriesIndex: seriesIndex,
+				uPlotInstance,
+				yAxisUnit,
+				decimalPrecision,
+			}),
+		[uPlotInstance, seriesIndex, dataIndexes, yAxisUnit, decimalPrecision],
+	);
+
 	return (
 		<div
 			className={cx(

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -20,27 +20,6 @@ export function resolveSeriesColor(
 	return FALLBACK_SERIES_COLOR;
 }
 
-export function getTooltipBaseValue({
-	data,
-	index,
-	dataIndex,
-	isStackedBarChart,
-}: {
-	data: AlignedData;
-	index: number;
-	dataIndex: number;
-	isStackedBarChart?: boolean;
-}): number | null {
-	let baseValue = data[index][dataIndex] ?? null;
-	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
-		const nextValue = data[index + 1][dataIndex] ?? null;
-		if (nextValue !== null) {
-			baseValue = baseValue - nextValue;
-		}
-	}
-	return baseValue;
-}
-
 export function buildTooltipContent({
 	data,
 	series,
@@ -49,7 +28,6 @@ export function buildTooltipContent({
 	uPlotInstance,
 	yAxisUnit,
 	decimalPrecision,
-	isStackedBarChart,
 }: {
 	data: AlignedData;
 	series: Series[];
@@ -58,7 +36,6 @@ export function buildTooltipContent({
 	uPlotInstance: uPlot;
 	yAxisUnit: string;
 	decimalPrecision?: PrecisionOption;
-	isStackedBarChart?: boolean;
 }): TooltipContentItem[] {
 	const active: TooltipContentItem[] = [];
 	const rest: TooltipContentItem[] = [];
@@ -75,29 +52,23 @@ export function buildTooltipContent({
 			continue;
 		}
 
-		const baseValue = getTooltipBaseValue({
-			data,
-			index,
-			dataIndex,
-			isStackedBarChart,
-		});
-
+		const raw = data[index]?.[dataIndex];
+		const value = Number(raw);
+		const displayValue = Number.isNaN(value) ? 0 : value;
 		const isActive = index === activeSeriesIndex;
 
-		if (Number.isFinite(baseValue) && baseValue !== null) {
-			const item: TooltipContentItem = {
-				label: String(s.label ?? ''),
-				value: baseValue,
-				tooltipValue: getToolTipValue(baseValue, yAxisUnit, decimalPrecision),
-				color: resolveSeriesColor(s.stroke, uPlotInstance, index),
-				isActive,
-			};
+		const item: TooltipContentItem = {
+			label: String(s.label ?? ''),
+			value: displayValue,
+			tooltipValue: getToolTipValue(displayValue, yAxisUnit, decimalPrecision),
+			color: resolveSeriesColor(s.stroke, uPlotInstance, index),
+			isActive,
+		};
 
-			if (isActive) {
-				active.push(item);
-			} else {
-				rest.push(item);
-			}
+		if (isActive) {
+			active.push(item);
+		} else {
+			rest.push(item);
 		}
 	}
 

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

@@ -59,22 +59,10 @@ export interface TooltipRenderArgs {
 	viaSync: boolean;
 }
 
-export interface BaseTooltipProps {
+export type TooltipProps = TooltipRenderArgs & {
 	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-}
-
-export interface TimeSeriesTooltipProps
-	extends BaseTooltipProps,
-		TooltipRenderArgs {}
-
-export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
-	isStackedBarChart?: boolean;
-}
-
-export type TooltipProps = (TimeSeriesTooltipProps | BarTooltipProps) & {
-	content: TooltipContentItem[];
 };
 
 export enum LegendPosition {

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

@@ -110,7 +110,6 @@ export enum LineStyle {
 export enum DrawStyle {
 	Line = 'line',
 	Points = 'points',
-	Bar = 'bar',
 }
 
 export enum LineInterpolation {
@@ -129,7 +128,7 @@ export enum VisibilityMode {
 export interface SeriesProps {
 	scaleKey: string;
 	label?: string;
-	panelType: PANEL_TYPES;
+
 	colorMapping: Record<string, string>;
 	drawStyle: DrawStyle;
 	pathBuilder?: Series.PathBuilder;

frontend/src/lib/uPlotV2/utils/__tests__/dataUtils.test.ts

@@ -0,0 +1,62 @@
+import { isInvalidPlotValue, normalizePlotValue } from '../dataUtils';
+
+describe('dataUtils', () => {
+	describe('isInvalidPlotValue', () => {
+		it('treats null and undefined as invalid', () => {
+			expect(isInvalidPlotValue(null)).toBe(true);
+			expect(isInvalidPlotValue(undefined)).toBe(true);
+		});
+
+		it('treats finite numbers as valid and non-finite as invalid', () => {
+			expect(isInvalidPlotValue(0)).toBe(false);
+			expect(isInvalidPlotValue(123.45)).toBe(false);
+			expect(isInvalidPlotValue(Number.NaN)).toBe(true);
+			expect(isInvalidPlotValue(Infinity)).toBe(true);
+			expect(isInvalidPlotValue(-Infinity)).toBe(true);
+		});
+
+		it('treats well-formed numeric strings as valid', () => {
+			expect(isInvalidPlotValue('0')).toBe(false);
+			expect(isInvalidPlotValue('123.45')).toBe(false);
+			expect(isInvalidPlotValue('-1')).toBe(false);
+		});
+
+		it('treats Infinity/NaN string variants and non-numeric strings as invalid', () => {
+			expect(isInvalidPlotValue('+Inf')).toBe(true);
+			expect(isInvalidPlotValue('-Inf')).toBe(true);
+			expect(isInvalidPlotValue('Infinity')).toBe(true);
+			expect(isInvalidPlotValue('-Infinity')).toBe(true);
+			expect(isInvalidPlotValue('NaN')).toBe(true);
+			expect(isInvalidPlotValue('not-a-number')).toBe(true);
+		});
+
+		it('treats non-number, non-string values as valid (left to caller)', () => {
+			expect(isInvalidPlotValue({})).toBe(false);
+			expect(isInvalidPlotValue([])).toBe(false);
+			expect(isInvalidPlotValue(true)).toBe(false);
+		});
+	});
+
+	describe('normalizePlotValue', () => {
+		it('returns null for invalid values detected by isInvalidPlotValue', () => {
+			expect(normalizePlotValue(null)).toBeNull();
+			expect(normalizePlotValue(undefined)).toBeNull();
+			expect(normalizePlotValue(NaN)).toBeNull();
+			expect(normalizePlotValue(Infinity)).toBeNull();
+			expect(normalizePlotValue('-Infinity')).toBeNull();
+			expect(normalizePlotValue('not-a-number')).toBeNull();
+		});
+
+		it('parses valid numeric strings into numbers', () => {
+			expect(normalizePlotValue('0')).toBe(0);
+			expect(normalizePlotValue('123.45')).toBe(123.45);
+			expect(normalizePlotValue('-1')).toBe(-1);
+		});
+
+		it('passes through valid numbers unchanged', () => {
+			expect(normalizePlotValue(0)).toBe(0);
+			expect(normalizePlotValue(123)).toBe(123);
+			expect(normalizePlotValue(42.5)).toBe(42.5);
+		});
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/scale.test.ts

@@ -0,0 +1,201 @@
+import uPlot from 'uplot';
+
+import { DistributionType } from '../../config/types';
+import * as scaleUtils from '../scale';
+
+describe('scale utils', () => {
+	describe('normalizeLogScaleLimits', () => {
+		it('returns limits unchanged when distribution is not logarithmic', () => {
+			const limits = {
+				min: 1,
+				max: 100,
+				softMin: 5,
+				softMax: 50,
+			};
+
+			const result = scaleUtils.normalizeLogScaleLimits({
+				distr: DistributionType.Linear,
+				logBase: 10,
+				limits,
+			});
+
+			expect(result).toEqual(limits);
+		});
+
+		it('snaps positive limits to powers of the log base when distribution is logarithmic', () => {
+			const result = scaleUtils.normalizeLogScaleLimits({
+				distr: DistributionType.Logarithmic,
+				logBase: 10,
+				limits: {
+					min: 3,
+					max: 900,
+					softMin: 12,
+					softMax: 85,
+				},
+			});
+
+			expect(result.min).toBe(1); // 10^0
+			expect(result.max).toBe(1000); // 10^3
+			expect(result.softMin).toBe(10); // 10^1
+			expect(result.softMax).toBe(100); // 10^2
+		});
+	});
+
+	describe('getDistributionConfig', () => {
+		it('returns empty config for time scales', () => {
+			const config = scaleUtils.getDistributionConfig({
+				time: true,
+				distr: DistributionType.Linear,
+				logBase: 2,
+			});
+
+			expect(config).toEqual({});
+		});
+
+		it('returns linear distribution settings for non-time scales', () => {
+			const config = scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.Linear,
+				logBase: 2,
+			});
+
+			expect(config.distr).toBe(1);
+			expect(config.log).toBe(2);
+		});
+
+		it('returns log distribution settings for non-time scales', () => {
+			const config = scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.Logarithmic,
+				logBase: 10,
+			});
+
+			expect(config.distr).toBe(3);
+			expect(config.log).toBe(10);
+		});
+	});
+
+	describe('getRangeConfig', () => {
+		it('computes range config and fixed range flags correctly', () => {
+			const {
+				rangeConfig,
+				hardMinOnly,
+				hardMaxOnly,
+				hasFixedRange,
+			} = scaleUtils.getRangeConfig(0, 100, null, null, 0.1, 0.2);
+
+			expect(rangeConfig.min).toEqual({
+				pad: 0.1,
+				hard: 0,
+				soft: undefined,
+				mode: 3,
+			});
+			expect(rangeConfig.max).toEqual({
+				pad: 0.2,
+				hard: 100,
+				soft: undefined,
+				mode: 3,
+			});
+			expect(hardMinOnly).toBe(true);
+			expect(hardMaxOnly).toBe(true);
+			expect(hasFixedRange).toBe(true);
+		});
+	});
+
+	describe('createRangeFunction', () => {
+		it('returns [dataMin, dataMax] when no fixed range and no data', () => {
+			const params = {
+				rangeConfig: {} as uPlot.Range.Config,
+				hardMinOnly: false,
+				hardMaxOnly: false,
+				hasFixedRange: false,
+				min: null,
+				max: null,
+			};
+
+			const rangeFn = scaleUtils.createRangeFunction(params);
+
+			const u = ({
+				scales: {
+					y: {
+						distr: 1,
+						log: 10,
+					},
+				},
+			} as unknown) as uPlot;
+
+			const result = rangeFn(
+				u,
+				(null as unknown) as number,
+				(null as unknown) as number,
+				'y',
+			);
+
+			expect(result).toEqual([null, null]);
+		});
+
+		it('applies hard min/max for linear scale when only hard limits are set', () => {
+			const params = {
+				rangeConfig: {} as uPlot.Range.Config,
+				hardMinOnly: true,
+				hardMaxOnly: true,
+				hasFixedRange: true,
+				min: 0,
+				max: 100,
+			};
+
+			const rangeFn = scaleUtils.createRangeFunction(params);
+
+			// Use an undefined distr so the range function skips calling uPlot.rangeNum
+			// and we can focus on the behavior of applyHardLimits.
+			const u = ({
+				scales: {
+					y: {
+						distr: undefined,
+						log: 10,
+					},
+				},
+			} as unknown) as uPlot;
+
+			const result = rangeFn(u, 10, 20, 'y');
+
+			// After applyHardLimits, the returned range should respect configured min/max
+			expect(result).toEqual([0, 100]);
+		});
+	});
+
+	describe('adjustSoftLimitsWithThresholds', () => {
+		it('returns original soft limits when there are no thresholds', () => {
+			const result = scaleUtils.adjustSoftLimitsWithThresholds(1, 5, [], 'ms');
+
+			expect(result).toEqual({ softMin: 1, softMax: 5 });
+		});
+
+		it('expands soft limits to include threshold min/max values', () => {
+			const result = scaleUtils.adjustSoftLimitsWithThresholds(
+				3,
+				6,
+				[{ thresholdValue: 2 }, { thresholdValue: 8 }],
+				'ms',
+			);
+
+			// min should be pulled down to the smallest threshold value
+			expect(result.softMin).toBe(2);
+			// max should be pushed up to the largest threshold value
+			expect(result.softMax).toBe(8);
+		});
+	});
+
+	describe('getFallbackMinMaxTimeStamp', () => {
+		it('returns a 24-hour window ending at approximately now', () => {
+			const { fallbackMin, fallbackMax } = scaleUtils.getFallbackMinMaxTimeStamp();
+
+			// Difference should be exactly one day in seconds
+			expect(fallbackMax - fallbackMin).toBe(86400);
+
+			// Both should be reasonable timestamps (not NaN or negative)
+			expect(fallbackMin).toBeGreaterThan(0);
+			expect(fallbackMax).toBeGreaterThan(fallbackMin);
+		});
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/threshold.test.ts

@@ -0,0 +1,36 @@
+import { findMinMaxThresholdValues } from '../threshold';
+
+describe('findMinMaxThresholdValues', () => {
+	it('returns [null, null] when thresholds array is empty or missing', () => {
+		expect(findMinMaxThresholdValues([], 'ms')).toEqual([null, null]);
+		// @ts-expect-error intentional undefined to cover defensive branch
+		expect(findMinMaxThresholdValues(undefined, 'ms')).toEqual([null, null]);
+	});
+
+	it('returns min and max from thresholdValue when units are not provided', () => {
+		const thresholds = [
+			{ thresholdValue: 5 },
+			{ thresholdValue: 1 },
+			{ thresholdValue: 10 },
+		];
+
+		const [min, max] = findMinMaxThresholdValues(thresholds);
+
+		expect(min).toBe(1);
+		expect(max).toBe(10);
+	});
+
+	it('ignores thresholds without a value or with unconvertible units', () => {
+		const thresholds = [
+			// Should be ignored: convertValue returns null for unknown unit
+			{ thresholdValue: 100, thresholdUnit: 'unknown-unit' },
+			// Should be used
+			{ thresholdValue: 4 },
+		];
+
+		const [min, max] = findMinMaxThresholdValues(thresholds, 'ms');
+
+		expect(min).toBe(4);
+		expect(max).toBe(4);
+	});
+});

pkg/querier/querier.go

@@ -208,16 +208,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 				event.GroupByApplied = len(spec.GroupBy) > 0
 
 				if spec.Source == telemetrytypes.SourceMeter {
-					if spec.StepInterval.Seconds() == 0 {
-						spec.StepInterval = qbtypes.Step{Duration: time.Second * time.Duration(querybuilder.RecommendedStepIntervalForMeter(req.Start, req.End))}
-					}
-
-					if spec.StepInterval.Seconds() < float64(querybuilder.MinAllowedStepIntervalForMeter(req.Start, req.End)) {
-						newStep := qbtypes.Step{
-							Duration: time.Second * time.Duration(querybuilder.MinAllowedStepIntervalForMeter(req.Start, req.End)),
-						}
-						spec.StepInterval = newStep
-					}
+					spec.StepInterval = qbtypes.Step{Duration: time.Second * time.Duration(querybuilder.RecommendedStepIntervalForMeter(req.Start, req.End))}
 				} else {
 					if spec.StepInterval.Seconds() == 0 {
 						spec.StepInterval = qbtypes.Step{

pkg/querybuilder/time.go

@@ -89,23 +89,6 @@ func RecommendedStepIntervalForMeter(start, end uint64) uint64 {
 	return recommended
 }
 
-func MinAllowedStepIntervalForMeter(start, end uint64) uint64 {
-	start = ToNanoSecs(start)
-	end = ToNanoSecs(end)
-
-	step := (end - start) / RecommendedNumberOfPoints / 1e9
-
-	// for meter queries the minimum step interval allowed is 1 hour as this is our granularity
-	if step < 3600 {
-		return 3600
-	}
-
-	// return the nearest lower multiple of 3600 ( 1 hour )
-	minAllowed := step - step%3600
-
-	return minAllowed
-}
-
 func RecommendedStepIntervalForMetric(start, end uint64) uint64 {
 	start = ToNanoSecs(start)
 	end = ToNanoSecs(end)