Uplot time range (#4144)

* feat: show range bound chart based on the selected time range

* feat: handle no data

* feat: show bigger point if only data point exists

* feat: show bigger point if only data point exists

* feat: widget ui fixes

* feat: no data - full view fix

* fix: show closed point on hover

* feat: handle widget time preference in case of dashboard, edit view, full view and chart preview

frontend/.eslintrc.js

@@ -86,6 +86,7 @@ module.exports = {
 			},
 		],
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+		'no-plusplus': 'off',
 		'jsx-a11y/label-has-associated-control': [
 			'error',
 			{
@@ -109,7 +110,6 @@ module.exports = {
 		// eslint rules need to remove
 		'@typescript-eslint/no-shadow': 'off',
 		'import/no-cycle': 'off',
-
 		'prettier/prettier': [
 			'error',
 			{},

frontend/src/components/Uplot/Uplot.styles.scss

@@ -13,3 +13,11 @@
 	height: 100%;
 	width: 100%;
 }
+
+.uplot-no-data {
+	position: relative;
+	display: flex;
+	width: 100%;
+	flex-direction: column;
+	gap: 8px;
+}

frontend/src/components/Uplot/Uplot.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import './uplot.scss';
+import './Uplot.styles.scss';
 
 import { Typography } from 'antd';
 import { ToggleGraphProps } from 'components/Graph/types';
+import { LineChart } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import {
 	forwardRef,
@@ -127,6 +128,16 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
 			}
 		}, [data, resetScales, create]);
 
+		if (data && data[0] && data[0]?.length === 0) {
+			return (
+				<div className="uplot-no-data not-found">
+					<LineChart size={48} strokeWidth={0.5} />
+
+					<Typography>No Data</Typography>
+				</div>
+			);
+		}
+
 		return (
 			<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
 				<div className="uplot-graph-container" ref={targetRef}>

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -10,7 +10,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -18,6 +18,7 @@ import { AlertDef } from 'types/api/alerts/def';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { getTimeRange } from 'utils/getTimeRange';
 
 import { ChartContainer, FailedMessageContainer } from './styles';
 import { getThresholdLabel } from './utils';
@@ -49,9 +50,13 @@ function ChartPreview({
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const threshold = alertDef?.condition.target || 0;
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+
+	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const canQuery = useMemo((): boolean => {
 		if (!query || query == null) {
@@ -101,6 +106,13 @@ function ChartPreview({
 
 	const graphRef = useRef<HTMLDivElement>(null);
 
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange(queryResponse);
+
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [maxTime, minTime, globalSelectedInterval, queryResponse]);
+
 	const chartData = getUPlotChartData(queryResponse?.data?.payload);
 
 	const containerDimensions = useResizeObserver(graphRef);
@@ -117,6 +129,8 @@ function ChartPreview({
 				yAxisUnit,
 				apiResponse: queryResponse?.data?.payload,
 				dimensions: containerDimensions,
+				minTimeScale,
+				maxTimeScale,
 				isDarkMode,
 				thresholds: [
 					{
@@ -141,6 +155,8 @@ function ChartPreview({
 			yAxisUnit,
 			queryResponse?.data?.payload,
 			containerDimensions,
+			minTimeScale,
+			maxTimeScale,
 			isDarkMode,
 			threshold,
 			t,

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -23,6 +23,7 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import uPlot from 'uplot';
+import { getTimeRange } from 'utils/getTimeRange';
 
 import { PANEL_TYPES_VS_FULL_VIEW_TABLE } from './contants';
 import GraphManager from './GraphManager';
@@ -92,6 +93,21 @@ function FullView({
 
 	const isDarkMode = useIsDarkMode();
 
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+
+	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange(response);
+
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [maxTime, minTime, globalSelectedInterval, response]);
+
 	useEffect(() => {
 		if (!response.isFetching && fullViewRef.current) {
 			const width = fullViewRef.current?.clientWidth
@@ -114,6 +130,8 @@ function FullView({
 				graphsVisibilityStates,
 				setGraphsVisibilityStates,
 				thresholds: widget.thresholds,
+				minTimeScale,
+				maxTimeScale,
 			});
 
 			setChartOptions(newChartOptions);

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -1,4 +1,5 @@
 import { Skeleton, Typography } from 'antd';
+import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
@@ -298,7 +299,10 @@ function WidgetGraphComponent({
 			</div>
 			{queryResponse.isLoading && <Skeleton />}
 			{queryResponse.isSuccess && (
-				<div style={{ height: '90%' }} ref={graphRef}>
+				<div
+					className={cx('widget-graph-container', widget.panelTypes)}
+					ref={graphRef}
+				>
 					<GridPanelSwitch
 						panelType={widget.panelTypes}
 						data={data}

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -15,6 +15,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { getTimeRange } from 'utils/getTimeRange';
 
 import EmptyWidget from '../EmptyWidget';
 import { MenuItemKeys } from '../WidgetHeader/contants';
@@ -34,6 +35,8 @@ function GridCardGraph({
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
 	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
 
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
@@ -62,16 +65,16 @@ function GridCardGraph({
 		}
 	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
 
-	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-
 	const updatedQuery = useStepInterval(widget?.query);
 
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
+	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
 	const queryResponse = useGetQueryRange(
 		{
 			selectedTime: widget?.timePreferance,
@@ -103,6 +106,13 @@ function GridCardGraph({
 
 	const containerDimensions = useResizeObserver(graphRef);
 
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange(queryResponse);
+
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [maxTime, minTime, globalSelectedInterval, queryResponse]);
+
 	const chartData = getUPlotChartData(queryResponse?.data?.payload, fillSpans);
 
 	const isDarkMode = useIsDarkMode();
@@ -123,6 +133,8 @@ function GridCardGraph({
 				yAxisUnit: widget?.yAxisUnit,
 				onClickHandler,
 				thresholds: widget.thresholds,
+				minTimeScale,
+				maxTimeScale,
 			}),
 		[
 			widget?.id,
@@ -133,6 +145,8 @@ function GridCardGraph({
 			isDarkMode,
 			onDragSelect,
 			onClickHandler,
+			minTimeScale,
+			maxTimeScale,
 		],
 	);
 

frontend/src/container/GridCardLayout/GridCardLayout.styles.scss

@@ -5,3 +5,11 @@
 		border: none !important;
 	}
 }
+
+.widget-graph-container {
+	height: 100%;
+
+	&.graph {
+		height: calc(100% - 30px);
+	}
+}

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -2,9 +2,12 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	height: 30px;
+	height: 40px;
 	width: 100%;
 	padding: 0.5rem;
+	box-sizing: border-box;
+	font-size: 14px;
+	font-weight: 600;
 }
 
 .widget-header-title {
@@ -19,6 +22,10 @@
 	visibility: hidden;
 	border: none;
 	box-shadow: none;
+	cursor: pointer;
+	font: 14px;
+	font-weight: 600;
+	padding: 8px;
 }
 
 .widget-header-hover {

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -10,7 +10,7 @@ import {
 	MoreOutlined,
 	WarningOutlined,
 } from '@ant-design/icons';
-import { Button, Dropdown, MenuProps, Tooltip, Typography } from 'antd';
+import { Dropdown, MenuProps, Tooltip, Typography } from 'antd';
 import Spinner from 'components/Spinner';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -199,9 +199,7 @@ function WidgetHeader({
 					</Tooltip>
 				)}
 				<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
-					<Button
-						type="default"
-						icon={<MoreOutlined />}
+					<MoreOutlined
 						className={`widget-header-more-options ${
 							parentHover ? 'widget-header-hover' : ''
 						}`}

frontend/src/container/GridCardLayout/styles.ts

@@ -2,7 +2,7 @@ import { Button as ButtonComponent, Card as CardComponent, Space } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { StyledCSS } from 'container/GantChart/Trace/styles';
 import RGL, { WidthProvider } from 'react-grid-layout';
-import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const ReactGridLayoutComponent = WidthProvider(RGL);
 
@@ -17,14 +17,8 @@ export const Card = styled(CardComponent)<CardProps>`
 	}
 
 	.ant-card-body {
-		height: 90%;
+		height: calc(100% - 40px);
 		padding: 0;
-		${({ $panelType }): FlattenSimpleInterpolation =>
-			$panelType === PANEL_TYPES.TABLE
-				? css`
-						padding-top: 1.8rem;
-				  `
-				: css``}
 	}
 `;
 

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx

@@ -6,13 +6,16 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { getTimeRange } from 'utils/getTimeRange';
 
 function WidgetGraph({
 	getWidgetQueryRange,
@@ -23,6 +26,21 @@ function WidgetGraph({
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
 
+	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange(getWidgetQueryRange);
+
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [getWidgetQueryRange, maxTime, minTime, globalSelectedInterval]);
+
 	const graphRef = useRef<HTMLDivElement>(null);
 
 	const containerDimensions = useResizeObserver(graphRef);
@@ -63,6 +81,8 @@ function WidgetGraph({
 				onDragSelect,
 				thresholds,
 				fillSpans,
+				minTimeScale,
+				maxTimeScale,
 			}),
 		[
 			widgetId,
@@ -73,6 +93,8 @@ function WidgetGraph({
 			onDragSelect,
 			thresholds,
 			fillSpans,
+			minTimeScale,
+			maxTimeScale,
 		],
 	);
 

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts

@@ -12,8 +12,7 @@ export const Container = styled(Card)<Props>`
 	}
 
 	.ant-card-body {
-		padding: ${({ $panelType }): string =>
-			$panelType === PANEL_TYPES.TABLE ? '0 0' : '1.5rem 0'};
+		padding: 8px;
 		height: 57vh;
 		overflow: auto;
 		display: flex;

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -3,9 +3,13 @@ import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { getTimeRange } from 'utils/getTimeRange';
 
 import { Container, ErrorText } from './styles';
 
@@ -31,6 +35,21 @@ function TimeSeriesView({
 		? graphRef.current.clientHeight
 		: 300;
 
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+
+	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange();
+
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [maxTime, minTime, globalSelectedInterval, data]);
+
 	const chartOptions = getUPlotChartOptions({
 		yAxisUnit: yAxisUnit || '',
 		apiResponse: data?.payload,
@@ -39,6 +58,8 @@ function TimeSeriesView({
 			height,
 		},
 		isDarkMode,
+		minTimeScale,
+		maxTimeScale,
 	});
 
 	return (

frontend/src/lib/uPlotLib/getUplotChartOptions.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 /* eslint-disable sonarjs/cognitive-complexity */
@@ -15,6 +16,7 @@ import onClickPlugin, { OnClickPluginOpts } from './plugins/onClickPlugin';
 import tooltipPlugin from './plugins/tooltipPlugin';
 import getAxes from './utils/getAxes';
 import getSeries from './utils/getSeriesData';
+import { getXAxisScale } from './utils/getXAxisScale';
 import { getYAxisScale } from './utils/getYAxisScale';
 
 interface GetUPlotChartOptions {
@@ -31,6 +33,8 @@ interface GetUPlotChartOptions {
 	thresholdValue?: number;
 	thresholdText?: string;
 	fillSpans?: boolean;
+	minTimeScale?: number;
+	maxTimeScale?: number;
 }
 
 export const getUPlotChartOptions = ({
@@ -40,18 +44,20 @@ export const getUPlotChartOptions = ({
 	apiResponse,
 	onDragSelect,
 	yAxisUnit,
+	minTimeScale,
+	maxTimeScale,
 	onClickHandler = _noop,
 	graphsVisibilityStates,
 	setGraphsVisibilityStates,
 	thresholds,
 	fillSpans,
 }: GetUPlotChartOptions): uPlot.Options => {
-	// eslint-disable-next-line sonarjs/prefer-immediate-return
-	const chartOptions = {
+	const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale);
+
+	return {
 		id,
 		width: dimensions.width,
-		height: dimensions.height - 45,
-		// tzDate: (ts) => uPlot.tzDate(new Date(ts * 1e3), ''), //  Pass timezone for 2nd param
+		height: dimensions.height - 30,
 		legend: {
 			show: true,
 			live: false,
@@ -67,18 +73,18 @@ export const getUPlotChartOptions = ({
 				bias: 1,
 			},
 			points: {
-				size: (u, seriesIdx): number => u.series[seriesIdx].points.size * 2.5,
+				size: (u, seriesIdx): number => u.series[seriesIdx].points.size * 3,
 				width: (u, seriesIdx, size): number => size / 4,
 				stroke: (u, seriesIdx): string =>
 					`${u.series[seriesIdx].points.stroke(u, seriesIdx)}90`,
 				fill: (): string => '#fff',
 			},
 		},
-		padding: [16, 16, 16, 16],
+		padding: [16, 16, 8, 8],
 		scales: {
 			x: {
-				time: true,
-				auto: true, // Automatically adjust scale range
+				spanGaps: true,
+				...timeScaleProps,
 			},
 			y: {
 				...getYAxisScale(
@@ -194,6 +200,4 @@ export const getUPlotChartOptions = ({
 		),
 		axes: getAxes(isDarkMode, yAxisUnit),
 	};
-
-	return chartOptions;
 };

frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts

@@ -54,7 +54,7 @@ const generateTooltipContent = (
 				const value = data[index][idx];
 				const label = getLabelName(metric, queryName || '', legend || '');
 
-				if (value) {
+				if (Number.isFinite(value)) {
 					const tooltipValue = getToolTipValue(value, yAxisUnit);
 
 					const dataObj = {
@@ -191,7 +191,8 @@ const tooltipPlugin = (
 				if (overlay) {
 					overlay.textContent = '';
 					const { left, top, idx } = u.cursor;
-					if (idx) {
+
+					if (Number.isInteger(idx)) {
 						const anchor = { left: left + bLeft, top: top + bTop };
 						const content = generateTooltipContent(
 							apiResult,

frontend/src/lib/uPlotLib/utils/getAxes.ts

@@ -9,8 +9,7 @@ const getAxes = (isDarkMode: boolean, yAxisUnit?: string): any => [
 		stroke: isDarkMode ? 'white' : 'black', // Color of the axis line
 		grid: {
 			stroke: getGridColor(isDarkMode), // Color of the grid lines
-			dash: [10, 10], // Dash pattern for grid lines,
-			width: 0.5, // Width of the grid lines,
+			width: 0.2, // Width of the grid lines,
 			show: true,
 		},
 		ticks: {
@@ -24,8 +23,7 @@ const getAxes = (isDarkMode: boolean, yAxisUnit?: string): any => [
 		stroke: isDarkMode ? 'white' : 'black', // Color of the axis line
 		grid: {
 			stroke: getGridColor(isDarkMode), // Color of the grid lines
-			dash: [10, 10], // Dash pattern for grid lines,
-			width: 0.3, // Width of the grid lines
+			width: 0.2, // Width of the grid lines
 		},
 		ticks: {
 			// stroke: isDarkMode ? 'white' : 'black', // Color of the tick lines

frontend/src/lib/uPlotLib/utils/getGridColor.ts

@@ -1,8 +1,8 @@
 const getGridColor = (isDarkMode: boolean): string => {
 	if (isDarkMode) {
-		return 'rgba(231,233,237,0.2)';
+		return 'rgba(231,233,237,0.3)';
 	}
-	return 'rgba(231,233,237,0.8)';
+	return 'rgba(0,0,0,0.5)';
 };
 
 export default getGridColor;

frontend/src/lib/uPlotLib/utils/getSeriesData.ts

@@ -46,17 +46,22 @@ const getSeries = (
 			legend || '',
 		);
 
+		const pointSize = seriesList[i].values.length > 1 ? 5 : 10;
+		const showPoints = !(seriesList[i].values.length > 1);
+
 		const seriesObj: any = {
-			width: 1.4,
 			paths,
 			drawStyle: drawStyles.line,
 			lineInterpolation: lineInterpolations.spline,
 			show: newGraphVisibilityStates ? newGraphVisibilityStates[i] : true,
 			label,
 			stroke: color,
+			width: 2,
 			spanGaps: true,
 			points: {
-				show: false,
+				size: pointSize,
+				show: showPoints,
+				stroke: color,
 			},
 		};
 

frontend/src/lib/uPlotLib/utils/getXAxisScale.ts

@@ -0,0 +1,40 @@
+function getFallbackMinMaxTimeStamp(): {
+	fallbackMin: number;
+	fallbackMax: number;
+} {
+	const currentDate = new Date();
+	// Get the Unix timestamp (milliseconds since January 1, 1970)
+	const currentTime = currentDate.getTime();
+	const currentUnixTimestamp = Math.floor(currentTime / 1000);
+
+	// Calculate the date and time one day ago
+	const oneDayAgoUnixTimestamp = Math.floor(
+		(currentDate.getTime() - 86400000) / 1000,
+	); // 86400000 milliseconds in a day
+
+	return {
+		fallbackMin: oneDayAgoUnixTimestamp,
+		fallbackMax: currentUnixTimestamp,
+	};
+}
+
+export const getXAxisScale = (
+	minTimeScale: number,
+	maxTimeScale: number,
+): {
+	time: boolean;
+	auto: boolean;
+	range?: [number, number];
+} => {
+	let minTime = minTimeScale;
+	let maxTime = maxTimeScale;
+
+	if (!minTimeScale || !maxTimeScale) {
+		const { fallbackMin, fallbackMax } = getFallbackMinMaxTimeStamp();
+
+		minTime = fallbackMin;
+		maxTime = fallbackMax;
+	}
+
+	return { time: true, auto: false, range: [minTime, maxTime] };
+};

frontend/src/lib/uPlotLib/utils/getYAxisScale.ts

@@ -54,7 +54,12 @@ function getRange(
 	const [minSeriesValue, maxSeriesValue] = findMinMaxValues(series);
 
 	const min = Math.min(minThresholdValue, minSeriesValue);
-	const max = Math.max(maxThresholdValue, maxSeriesValue);
+	let max = Math.max(maxThresholdValue, maxSeriesValue);
+
+	// this is a temp change, we need to figure out a generic way to better handle ranges based on yAxisUnit
+	if (yAxisUnit === 'percentunit' && max < 1) {
+		max = 1;
+	}
 
 	return [min, max];
 }

frontend/src/utils/getTimeRange.ts

@@ -0,0 +1,36 @@
+import getStartEndRangeTime from 'lib/getStartEndRangeTime';
+import { UseQueryResult } from 'react-query';
+import store from 'store';
+import { SuccessResponse } from 'types/api';
+import {
+	MetricRangePayloadProps,
+	QueryRangePayload,
+} from 'types/api/metrics/getQueryRange';
+
+export const getTimeRange = (
+	widgetQueryRange?: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>,
+): Record<string, number> => {
+	const widgetParams =
+		(widgetQueryRange?.data?.params as QueryRangePayload) || null;
+
+	if (widgetParams && widgetParams?.start && widgetParams?.end) {
+		return {
+			startTime: widgetParams.start / 1000,
+			endTime: widgetParams.end / 1000,
+		};
+	}
+	const { globalTime } = store.getState();
+
+	const { start: globalStartTime, end: globalEndTime } = getStartEndRangeTime({
+		type: 'GLOBAL_TIME',
+		interval: globalTime.selectedTime,
+	});
+
+	return {
+		startTime: (parseInt(globalStartTime, 10) * 1e3) / 1000,
+		endTime: (parseInt(globalEndTime, 10) * 1e3) / 1000,
+	};
+};