diff --git a/frontend/src/components/Graph/Plugin/EmptyGraph.ts b/frontend/src/components/Graph/Plugin/EmptyGraph.ts new file mode 100644 index 0000000000..0f0577bb80 --- /dev/null +++ b/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(); + }, +}; diff --git a/frontend/src/components/Graph/hasData.ts b/frontend/src/components/Graph/hasData.ts new file mode 100644 index 0000000000..acaa4fac1e --- /dev/null +++ b/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; +}; diff --git a/frontend/src/components/Graph/index.tsx b/frontend/src/components/Graph/index.tsx index a8f668235d..e51ff21616 100644 --- a/frontend/src/components/Graph/index.tsx +++ b/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, }); } }, [ diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx deleted file mode 100644 index c284d83b7c..0000000000 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import Graph, { GraphOnClickHandler } from 'components/Graph'; -import { timePreferance } from 'container/NewWidget/RightContainer/timeItems'; -import GetMaxMinTime from 'lib/getMaxMinTime'; -import { colors } from 'lib/getRandomColor'; -import getStartAndEndTime from 'lib/getStartAndEndTime'; -import getTimeString from 'lib/getTimeString'; -import React, { useCallback } from 'react'; -import { useSelector } from 'react-redux'; -import { AppState } from 'store/reducers'; -import { Widgets } from 'types/api/dashboard/getAll'; -import { GlobalReducer } from 'types/reducer/globalTime'; - -function EmptyGraph({ - selectedTime, - widget, - onClickHandler, -}: EmptyGraphProps): JSX.Element { - const { minTime, maxTime, loading } = useSelector( - (state) => state.globalTime, - ); - - const maxMinTime = GetMaxMinTime({ - graphType: widget.panelTypes, - maxTime, - minTime, - }); - - const { end, start } = getStartAndEndTime({ - type: selectedTime.enum, - maxTime: maxMinTime.maxTime, - minTime: maxMinTime.minTime, - }); - - const dateFunction = useCallback(() => { - if (!loading) { - const dates: Date[] = []; - - const startString = getTimeString(start); - const endString = getTimeString(end); - - const parsedStart = parseInt(startString, 10); - const parsedEnd = parseInt(endString, 10); - - let startDate = parsedStart; - const endDate = parsedEnd; - - while (endDate >= startDate) { - const newDate = new Date(startDate); - - startDate += 20000; - - dates.push(newDate); - } - return dates; - } - return []; - }, [start, end, loading]); - - const date = dateFunction(); - - return ( - - ); -} - -interface EmptyGraphProps { - selectedTime: timePreferance; - widget: Widgets; - onClickHandler: GraphOnClickHandler | undefined; -} - -export default EmptyGraph; diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx index 0f0ce7b1fb..ba8a66a82d 100644 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx @@ -23,14 +23,12 @@ import { AppState } from 'store/reducers'; import { Widgets } from 'types/api/dashboard/getAll'; import { GlobalReducer } from 'types/reducer/globalTime'; -import EmptyGraph from './EmptyGraph'; import { NotFoundContainer, TimeContainer } from './styles'; function FullView({ widget, fullViewOptions = true, onClickHandler, - noDataGraph = false, name, yAxisUnit, }: FullViewProps): JSX.Element { @@ -166,38 +164,6 @@ function FullView({ ); } - if (state.loading === false && state.payload.datasets.length === 0) { - return ( - <> - {fullViewOptions && ( - - - - - )} - - {noDataGraph ? ( - - ) : ( - - No Data - - )} - - ); - } - return ( <> {fullViewOptions && ( @@ -243,7 +209,6 @@ interface FullViewProps { widget: Widgets; fullViewOptions?: boolean; onClickHandler?: GraphOnClickHandler; - noDataGraph?: boolean; name: string; yAxisUnit?: string; } @@ -251,7 +216,6 @@ interface FullViewProps { FullView.defaultProps = { fullViewOptions: undefined, onClickHandler: undefined, - noDataGraph: undefined, yAxisUnit: undefined, }; diff --git a/frontend/src/container/MetricsApplication/Tabs/Application.tsx b/frontend/src/container/MetricsApplication/Tabs/Application.tsx index 774d8d7118..8cf4c2c3dd 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Application.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Application.tsx @@ -179,7 +179,6 @@ function Application({ getWidget }: DashboardProps): JSX.Element { { onClickhandler(event, element, chart, data, 'Request'); @@ -214,7 +213,6 @@ function Application({ getWidget }: DashboardProps): JSX.Element { { onClickhandler(ChartEvent, activeElements, chart, data, 'Error'); diff --git a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx index 5b918338e4..20206c21d7 100644 --- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx @@ -17,7 +17,6 @@ function DBCall({ getWidget }: DBCallProps): JSX.Element { External Call duration(by Address)