1187 horizontal shift when error bars

src/client/app/components/LineChartComponent.tsx

@@ -19,7 +19,7 @@ import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import Locales from '../types/locales';
 import { useTranslate } from '../redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
-import { setInitialXAxisRange, selectSliderRangeInterval } from '../redux/slices/graphSlice';
+import { setInitialXAxisRange } from '../redux/slices/graphSlice';
 import { fullSizeContainer } from '../styles/modalStyle';
 
 /**
@@ -34,7 +34,6 @@ export default function LineChartComponent() {
 	const { meterDeps, groupDeps } = useAppSelector(selectLineChartDeps);
 	const locale = useAppSelector(selectSelectedLanguage);
 	// initial slider range
-	const sliderRangeInterval = useAppSelector(selectSliderRangeInterval);
 
 	// Fetch data, and derive plotly points
 	const { data: meterPlotlyData, isFetching: meterIsFetching } = readingsApi.useLineQuery(meterArgs,
@@ -108,9 +107,30 @@ export default function LineChartComponent() {
 	// See https://community.plotly.com/t/replacing-an-empty-graph-with-a-message/31497 for showing text not plot.
 	if (data.length === 0) {
 		return <h1>{`${translate('select.meter.group')}`}	</h1>;
-	} else if (!enoughData) {
+	} else if (!enoughData || !data[0].x) {
 		return <h1>{`${translate('no.data.in.range')}`}</h1>;
 	} else {
+		// Adjust the min and max values for the x axis
+		// This goes through the list of groups/meters that have data to find the earliest and latest dates.
+		console.log(data);
+		let minDate = '';
+		let maxDate = '';
+		for (const trace of data) {
+			if (trace.x && trace.x.length > 0) {
+				const traceMin = trace.x[0] as string;
+				const traceMax = trace.x[trace.x.length - 1] as string;
+				// Update minX if this is the first trace or has an earlier date
+				if (minDate === '' || traceMin < minDate) {
+					minDate = traceMin;
+				}
+				// Update maxX if this is the first trace or has a later date
+				if (maxDate === '' || traceMax > maxDate) {
+					maxDate = traceMax;
+				}
+			}
+
+
+		}
 		return (
 			<Plot
 				data={data}
@@ -123,8 +143,7 @@ export default function LineChartComponent() {
 					// 'fixedrange' on the yAxis means that dragging is only allowed on the xAxis which we utilize for selecting dateRanges
 					xaxis: {
 						rangeslider: { visible: true },
-						range: [sliderRangeInterval.getStartTimestamp()?.toISOString(),
-							sliderRangeInterval.getEndTimestamp()?.toISOString()],
+						range: [minDate, maxDate],
 						showgrid: true,
 						gridcolor: '#ddd'
 					}