fix: over memory allocation on Graph on big time range

frontend/src/components/Graph/Plugin/EmptyGraph.ts

@@ -0,0 +1,17 @@
+import { grey } from '@ant-design/colors';
+import { Chart } from 'chart.js';
+
+export const emptyGraph = {
+	id: 'emptyChart',
+	afterDraw(chart: Chart): void {
+		const { height, width, ctx } = chart;
+		chart.clear();
+		ctx.save();
+		ctx.textAlign = 'center';
+		ctx.textBaseline = 'middle';
+		ctx.font = '1.5rem sans-serif';
+		ctx.fillStyle = `${grey.primary}`;
+		ctx.fillText('No data to display', width / 2, height / 2);
+		ctx.restore();
+	},
+};

frontend/src/components/Graph/hasData.ts

@@ -0,0 +1,19 @@
+/* eslint-disable no-restricted-syntax */
+import { ChartData } from 'chart.js';
+
+export const hasData = (data: ChartData): boolean => {
+	const { datasets = [] } = data;
+	let hasData = false;
+	try {
+		for (const dataset of datasets) {
+			if (dataset.data.length > 0 && dataset.data.some((item) => item !== 0)) {
+				hasData = true;
+				break;
+			}
+		}
+	} catch (error) {
+		console.error(error);
+	}
+
+	return hasData;
+};

frontend/src/components/Graph/index.tsx

@@ -27,7 +27,9 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
 
+import { hasData } from './hasData';
 import { legend } from './Plugin';
+import { emptyGraph } from './Plugin/EmptyGraph';
 import { LegendsContainer } from './styles';
 import { useXAxisTimeUnit } from './xAxisConfig';
 import { getYAxisFormattedValue } from './yAxisConfig';
@@ -128,6 +130,7 @@ function Graph({
 						grid: {
 							display: true,
 							color: getGridColor(),
+							drawTicks: true,
 						},
 						adapters: {
 							date: chartjsAdapter,
@@ -180,12 +183,18 @@ function Graph({
 					}
 				},
 			};
-
+			const chartHasData = hasData(data);
+			const chartPlugins = [];
+			if (chartHasData) {
+				chartPlugins.push(legend(name, data.datasets.length > 3));
+			} else {
+				chartPlugins.push(emptyGraph);
+			}
 			lineChartRef.current = new Chart(chartRef.current, {
 				type,
 				data,
 				options,
-				plugins: [legend(name, data.datasets.length > 3)],
+				plugins: chartPlugins,
 			});
 		}
 	}, [

frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx

@@ -166,38 +166,6 @@ function FullView({
 		);
 	}
 
-	if (state.loading === false && state.payload.datasets.length === 0) {
-		return (
-			<>
-				{fullViewOptions && (
-					<TimeContainer>
-						<TimePreference
-							{...{
-								selectedTime,
-								setSelectedTime,
-							}}
-						/>
-						<Button onClick={onFetchDataHandler} type="primary">
-							Refresh
-						</Button>
-					</TimeContainer>
-				)}
-
-				{noDataGraph ? (
-					<EmptyGraph
-						onClickHandler={onClickHandler}
-						widget={widget}
-						selectedTime={selectedTime}
-					/>
-				) : (
-					<NotFoundContainer>
-						<Typography>No Data</Typography>
-					</NotFoundContainer>
-				)}
-			</>
-		);
-	}
-
 	return (
 		<>
 			{fullViewOptions && (