github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

feat: add NoDataMessage component and integrate it into AreaChart, BarChart, and LineChart for improved no data handling

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-04-01 12:14:27 +01:00
parent ac6c53ad85
commit 678e9614bf
4 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Common/UI/Components/Charts/Area/AreaChart.tsx
View File

@@ -7,6 +7,7 @@ import ChartCurve from "../Types/ChartCurve";
import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
import DataPointUtil from "../Utils/DataPoint";
import ChartReferenceLineProps from "../Types/ReferenceLineProps";
import NoDataMessage from "../ChartGroup/NoDataMessage";
export interface ComponentProps {
data: Array<SeriesPoint>;
@@ -83,11 +84,7 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
onValueChange={() => {}}
referenceLines={props.referenceLines}
/>
{hasNoData && (
<div className="absolute inset-0 flex items-center justify-center">
<p className="text-sm text-gray-400">No data available</p>
</div>
)}
{hasNoData && <NoDataMessage />}
</div>
);
};

7
Common/UI/Components/Charts/Bar/BarChart.tsx
View File

@@ -6,6 +6,7 @@ import YAxis from "../Types/YAxis/YAxis";
import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
import DataPointUtil from "../Utils/DataPoint";
import ChartReferenceLineProps from "../Types/ReferenceLineProps";
import NoDataMessage from "../ChartGroup/NoDataMessage";
export interface ComponentProps {
data: Array<SeriesPoint>;
@@ -78,11 +79,7 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
onValueChange={() => {}}
referenceLines={props.referenceLines}
/>
{hasNoData && (
<div className="absolute inset-0 flex items-center justify-center">
<p className="text-sm text-gray-400">No data available</p>
</div>
)}
{hasNoData && <NoDataMessage />}
</div>
);
};

13
Common/UI/Components/Charts/ChartGroup/NoDataMessage.tsx Normal file
View File

@@ -0,0 +1,13 @@
import React, { FunctionComponent, ReactElement } from "react";
const NoDataMessage: FunctionComponent = (): ReactElement => {
return (
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<span className="text-sm text-gray-400 bg-white/90 border border-gray-100 rounded-full px-4 py-1.5 shadow-sm">
No data available
</span>
</div>
);
};
export default NoDataMessage;

7
Common/UI/Components/Charts/Line/LineChart.tsx
View File

@@ -7,6 +7,7 @@ import ChartCurve from "../Types/ChartCurve";
import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
import DataPointUtil from "../Utils/DataPoint";
import ChartReferenceLineProps from "../Types/ReferenceLineProps";
import NoDataMessage from "../ChartGroup/NoDataMessage";
export interface ComponentProps {
data: Array<SeriesPoint>;
@@ -82,11 +83,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
onValueChange={() => {}}
referenceLines={props.referenceLines}
/>
{hasNoData && (
<div className="absolute inset-0 flex items-center justify-center">
<p className="text-sm text-gray-400">No data available</p>
</div>
)}
{hasNoData && <NoDataMessage />}
</div>
);
};