diff --git a/docs/sources/administration/configuration.md b/docs/sources/administration/configuration.md index 4a9091c2751..f421d8df4de 100644 --- a/docs/sources/administration/configuration.md +++ b/docs/sources/administration/configuration.md @@ -1785,6 +1785,10 @@ Set this to `true` to have date formats automatically derived from your browser Used as the default time zone for user preferences. Can be either `browser` for the browser local time zone or a time zone name from the IANA Time Zone database, such as `UTC` or `Europe/Amsterdam`. +### default_week_start + +Set the default start of the week, valid values are: `saturday`, `sunday`, `monday` or `browser` to use the browser locale to define the first day of the week. Default is `browser`. + ## [expressions] > **Note:** This feature is available in Grafana v7.4 and later versions. diff --git a/packages/grafana-data/src/datetime/moment_wrapper.ts b/packages/grafana-data/src/datetime/moment_wrapper.ts index 03910a31128..80af4900f8e 100644 --- a/packages/grafana-data/src/datetime/moment_wrapper.ts +++ b/packages/grafana-data/src/datetime/moment_wrapper.ts @@ -120,3 +120,23 @@ export const dateTimeForTimeZone = ( return dateTime(input, formatInput); }; + +export const getWeekdayIndex = (day: string) => { + return moment.weekdays().findIndex((wd) => wd.toLowerCase() === day.toLowerCase()); +}; + +export const setWeekStart = (weekStart?: string) => { + const suffix = '-weekStart'; + const language = getLocale().replace(suffix, ''); + const dow = weekStart ? getWeekdayIndex(weekStart) : -1; + if (dow !== -1) { + moment.locale(language + suffix, { + parentLocale: language, + week: { + dow, + }, + }); + } else { + setLocale(language); + } +}; diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 7267d46db99..037a7a04caa 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -219,6 +219,9 @@ export const Components = { TimeZonePicker: { container: 'Time zone picker select container', }, + WeekStartPicker: { + container: 'Choose starting day of the week', + }, TraceViewer: { spanBar: () => '[data-test-id="SpanBar--wrapper"]', }, diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx new file mode 100644 index 00000000000..85742db207e --- /dev/null +++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { action } from '@storybook/addon-actions'; + +import { WeekStartPicker } from '@grafana/ui'; +import { UseState } from '../../utils/storybook/UseState'; +import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; + +export default { + title: 'Pickers and Editors/TimePickers/WeekStartPicker', + component: WeekStartPicker, + decorators: [withCenteredStory], +}; + +export const basic = () => { + return ( + + {(value, updateValue) => { + return ( + { + if (!newValue) { + return; + } + action('on selected')(newValue); + updateValue({ value: newValue }); + }} + /> + ); + }} + + ); +}; diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx new file mode 100644 index 00000000000..d48e44e7e5c --- /dev/null +++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx @@ -0,0 +1,52 @@ +import React, { useCallback } from 'react'; +import { SelectableValue } from '@grafana/data'; +import { Select } from '../Select/Select'; +import { selectors } from '@grafana/e2e-selectors'; + +export interface Props { + onChange: (weekStart: string) => void; + value: string; + width?: number; + autoFocus?: boolean; + onBlur?: () => void; + includeInternal?: boolean; + disabled?: boolean; + inputId?: string; +} + +const weekStarts: Array> = [ + { value: '', label: 'Default' }, + { value: 'saturday', label: 'Saturday' }, + { value: 'sunday', label: 'Sunday' }, + { value: 'monday', label: 'Monday' }, +]; + +export const WeekStartPicker: React.FC = (props) => { + const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props; + + const onChangeWeekStart = useCallback( + (selectable: SelectableValue) => { + if (selectable.value !== undefined) { + onChange(selectable.value); + } + }, + [onChange] + ); + + return ( +