TimeRangePicker: Use week start (#89765)

packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx

@@ -23,6 +23,18 @@ const weekStarts: Array<SelectableValue<WeekStart | ''>> = [
   { value: 'monday', label: 'Monday' },
 ];
 
+const isWeekStart = (value: string): value is WeekStart => {
+  return ['saturday', 'sunday', 'monday'].includes(value);
+};
+
+export const getWeekStart = (value: string): WeekStart => {
+  if (isWeekStart(value)) {
+    return value;
+  }
+
+  return 'monday';
+};
+
 export const WeekStartPicker = (props: Props) => {
   const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
 

packages/grafana-ui/src/components/index.ts

@@ -39,7 +39,7 @@ export { TimePickerTooltip } from './DateTimePickers/TimeRangePicker';
 export { TimeRangeLabel } from './DateTimePickers/TimeRangePicker/TimeRangeLabel';
 export { TimeOfDayPicker } from './DateTimePickers/TimeOfDayPicker';
 export { TimeZonePicker } from './DateTimePickers/TimeZonePicker';
-export { WeekStartPicker } from './DateTimePickers/WeekStartPicker';
+export { WeekStartPicker, getWeekStart, type WeekStart } from './DateTimePickers/WeekStartPicker';
 export { DatePicker, type DatePickerProps } from './DateTimePickers/DatePicker/DatePicker';
 export {
   DatePickerWithInput,

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -2,8 +2,8 @@ import { Component } from 'react';
 import { Unsubscribable } from 'rxjs';
 
 import { dateMath, TimeRange, TimeZone } from '@grafana/data';
-import { TimeRangeUpdatedEvent } from '@grafana/runtime';
+import { config, TimeRangeUpdatedEvent } from '@grafana/runtime';
-import { defaultIntervals, RefreshPicker } from '@grafana/ui';
+import { defaultIntervals, getWeekStart, RefreshPicker } from '@grafana/ui';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 import { appEvents } from 'app/core/core';
 import { t } from 'app/core/internationalization';
@@ -100,6 +100,7 @@ export class DashNavTimeControls extends Component<Props> {
     const timeZone = dashboard.getTimezone();
     const fiscalYearStartMonth = dashboard.fiscalYearStartMonth;
     const hideIntervalPicker = dashboard.panelInEdit?.isEditing;
+    const weekStart = dashboard.weekStart || getWeekStart(config.bootData.user.weekStart);
 
     let text: string | undefined = undefined;
     if (dashboard.refresh === AutoRefreshInterval) {
@@ -120,6 +121,7 @@ export class DashNavTimeControls extends Component<Props> {
           onChangeFiscalYearStartMonth={this.onChangeFiscalYearStartMonth}
           isOnCanvas={isOnCanvas}
           onToolbarTimePickerClick={this.props.onToolbarTimePickerClick}
+          weekStart={weekStart}
         />
         <RefreshPicker
           onIntervalChanged={this.onChangeRefreshInterval}

public/app/features/explore/ExploreTimeControls.tsx

@@ -1,8 +1,9 @@
 import { Component } from 'react';
 
 import { TimeRange, RawTimeRange, dateTimeForTimeZone, dateMath } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { TimeZone } from '@grafana/schema';
+import { getWeekStart } from '@grafana/ui';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePicker';
 
@@ -85,7 +86,7 @@ export class ExploreTimeControls extends Component<Props> {
       onZoom: this.onZoom,
       hideText,
     };
-
+    const weekStart = getWeekStart(config.bootData.user.weekStart);
     return (
       <TimePickerWithHistory
         isOnCanvas
@@ -96,6 +97,7 @@ export class ExploreTimeControls extends Component<Props> {
         onChange={this.onChangeTimePicker}
         onChangeTimeZone={onChangeTimeZone}
         onChangeFiscalYearStartMonth={onChangeFiscalYearStartMonth}
+        weekStart={weekStart}
       />
     );
   }