feat: time range picker

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- TimeRangePicker component by [@amit-y](https://github.com/amit-y)
+
 ## [1.20.0] - 2023-12-18
 
 ### Added

README.md

@@ -67,6 +67,9 @@ Component to select time values
 ### [DateTimePicker](src/components/date-time-picker)
 Component to select date/time
 
+### [TimeRangePicker](src/components/time-range-picker)
+Component to select time range
+
 ## Utilities
 
 ### [timeRangeToNrql](src/utils/time-range-to-nrql/)

src/components/index.js

@@ -11,3 +11,4 @@ export { default as FilterBar } from './filter-bar';
 export { default as DatePicker } from './date-picker';
 export { default as TimePicker } from './time-picker';
 export { default as DateTimePicker } from './date-time-picker';
+export { default as TimeRangePicker } from './time-range-picker';

src/components/time-range-picker/README.md

@@ -0,0 +1,35 @@
+# TimeRangePicker
+
+The `TimeRangePicker` component is used to select a time period.
+
+## Usage
+
+To use the component, simply import and use:
+
+```jsx
+import React, { useState } from 'react';
+import { TimeRangePicker } from '@newrelic/nr-labs-components';
+
+function MyComponent() {
+ const [timeRange, setTimeRange] = useState(new Date());
+
+ return (
+ <div>
+ <TimeRangePicker timeRange={timeRange} onChange={setTimeRange} />
+ </div>
+ );
+}
+```
+### Props
+
+- date (date): The default time period 
+- onChange (function): A function that is called when the user selects a time range. The function is passed an abject in the following format:
+
+```javascript
+{
+ "begin_time": null, // start date/time, if custom time, or null if not
+ "duration": 1800000, // duration in milliseconds
+ "end_time": null // end date/time, if custom time, or null if not
+}
+```
+

src/components/time-range-picker/index.js

@@ -0,0 +1,238 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+ Icon,
+ Popover,
+ PopoverTrigger,
+ PopoverBody,
+ List,
+ ListItem,
+ Button,
+} from 'nr1';
+
+import DateTimePicker from '../date-time-picker';
+
+import styles from './styles.scss';
+
+const TEXTS = {
+ APPLY: 'Apply',
+ CANCEL: 'Cancel',
+ CUSTOM: 'Custom',
+ DEFAULT: 'Default',
+};
+
+const TIME_RANGES = [
+ { label: TEXTS.DEFAULT, offset: null },
+ { break: true },
+ { label: '30 minutes', offset: 1000 * 60 * 30 },
+ { label: '60 minutes', offset: 1000 * 60 * 60 },
+ { break: true },
+ { label: '3 hours', offset: 1000 * 60 * 60 * 3 },
+ { label: '6 hours', offset: 1000 * 60 * 60 * 6 },
+ { label: '24 hours', offset: 1000 * 60 * 60 * 24 },
+ { break: true },
+ { label: '3 days', offset: 1000 * 60 * 60 * 24 * 3 },
+ { label: '7 days', offset: 1000 * 60 * 60 * 24 * 7 },
+ { break: true },
+];
+
+const normalizedDateTime = (dt = new Date()) =>
+ new Date(
+ dt.getFullYear(),
+ dt.getMonth(),
+ dt.getDate(),
+ dt.getHours(),
+ dt.getMinutes()
+ );
+
+const TimeRangePicker = ({ timeRange, onChange }) => {
+ const [opened, setOpened] = useState(false);
+ const [isCustomOpen, setIsCustomOpen] = useState(false);
+ const [selected, setSelected] = useState('');
+ const [beginTime, setBeginTime] = useState();
+ const [endTime, setEndTime] = useState();
+
+ useEffect(() => {
+ if (!timeRange) {
+ setSelected(TEXTS.DEFAULT);
+ setBeginTime(null);
+ setEndTime(null);
+ } else if (timeRange.duration) {
+ setSelected(
+ TIME_RANGES.find((tr) => tr.offset === timeRange.duration)?.label ||
+ TEXTS.DEFAULT
+ );
+ setBeginTime(null);
+ setEndTime(null);
+ } else {
+ setSelected(TEXTS.CUSTOM);
+ setBeginTime(timeRange['begin_time']);
+ setEndTime(timeRange['end_time']);
+ }
+ }, [timeRange]);
+
+ const setDurationHandler = (duration) => {
+ if (onChange)
+ onChange(
+ duration
+ ? {
+ begin_time: null,
+ duration,
+ end_time: null,
+ }
+ : null
+ );
+ setOpened(false);
+ setBeginTime(null);
+ setEndTime(null);
+ setIsCustomOpen(false);
+ };
+
+ const changeHandler = useCallback((_, o) => {
+ if (!o) {
+ setBeginTime(null);
+ setEndTime(null);
+ setIsCustomOpen(false);
+ }
+ setOpened(o);
+ }, []);
+
+ const toggleCustomHandler = () => {
+ if (!isCustomOpen) {
+ if (timeRange && timeRange['begin_time'] && timeRange['end_time']) {
+ setBeginTime(timeRange['begin_time']);
+ setEndTime(timeRange['end_time']);
+ } else {
+ const thirtyMinsAgo = new Date();
+ thirtyMinsAgo.setMinutes(thirtyMinsAgo.getMinutes() - 30);
+ setEndTime(normalizedDateTime());
+ setBeginTime(normalizedDateTime(thirtyMinsAgo));
+ }
+ }
+ setIsCustomOpen((c) => !c);
+ };
+
+ const setCustomHandler = useCallback(() => {
+ if (onChange)
+ onChange({
+ begin_time: beginTime,
+ duration: null,
+ end_time: endTime,
+ });
+ setOpened(false);
+ }, [beginTime, endTime]);
+
+ const cancelCustomHandler = useCallback((e) => {
+ e.stopPropagation();
+ setIsCustomOpen(false);
+ }, []);
+
+ return (
+ <Popover opened={opened} onChange={changeHandler}>
+ <PopoverTrigger>
+ <Button
+ className={styles['time-range-picker-button']}
+ type={Button.TYPE.PLAIN}
+ sizeType={Button.SIZE_TYPE.SMALL}
+ >
+ <Icon type={Icon.TYPE.DATE_AND_TIME__DATE_AND_TIME__TIME} />
+ {selected}
+ <Icon
+ className={styles['button-chevron']}
+ type={
+ opened
+ ? Icon.TYPE.INTERFACE__CHEVRON__CHEVRON_TOP
+ : Icon.TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM
+ }
+ />
+ </Button>
+ </PopoverTrigger>
+ <PopoverBody>
+ <div className={styles['time-range-list']}>
+ <List className={styles['time-range-list-items']}>
+ {TIME_RANGES.map((tr, i) => (
+ <ListItem key={i}>
+ {tr.break ? (
+ <hr className={styles['time-range-list-break']} />
+ ) : (
+ <Button
+ className={`${styles['time-range-list-item']} ${
+ tr.label === selected ? styles.open : ''
+ }`}
+ type={Button.TYPE.PLAIN}
+ onClick={() => setDurationHandler(tr.offset)}
+ >
+ {tr.label}
+ </Button>
+ )}
+ </ListItem>
+ ))}
+ <ListItem>
+ <Button
+ className={`${styles['time-range-list-item']} ${
+ styles.custom
+ } ${
+ isCustomOpen || selected === TEXTS.CUSTOM ? styles.open : ''
+ }`}
+ type={Button.TYPE.PLAIN}
+ onClick={toggleCustomHandler}
+ >
+ {TEXTS.CUSTOM}
+ <Icon
+ className={styles['button-chevron']}
+ type={
+ isCustomOpen || selected === TEXTS.CUSTOM
+ ? Icon.TYPE.INTERFACE__CHEVRON__CHEVRON_TOP
+ : Icon.TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM
+ }
+ />
+ </Button>
+ {isCustomOpen ? (
+ <div className={styles['custom-entry']}>
+ <DateTimePicker
+ datetime={beginTime}
+ onChange={setBeginTime}
+ />
+ <DateTimePicker
+ datetime={endTime}
+ onChange={setEndTime}
+ validFrom={beginTime}
+ validTill={normalizedDateTime()}
+ />
+ <div className={styles['custom-buttons']}>
+ <Button
+ type={Button.TYPE.PRIMARY}
+ sizeType={Button.SIZE_TYPE.SMALL}
+ onClick={setCustomHandler}
+ >
+ {TEXTS.APPLY}
+ </Button>
+ <Button
+ type={Button.TYPE.PLAIN}
+ sizeType={Button.SIZE_TYPE.SMALL}
+ onClick={cancelCustomHandler}
+ >
+ {TEXTS.CANCEL}
+ </Button>
+ </div>
+ </div>
+ ) : null}
+ </ListItem>
+ </List>
+ </div>
+ </PopoverBody>
+ </Popover>
+ );
+};
+
+TimeRangePicker.propTypes = {
+ timeRange: PropTypes.shape({
+ begin_time: PropTypes.number,
+ duration: PropTypes.number,
+ end_time: PropTypes.number,
+ }),
+ onChange: PropTypes.func,
+};
+
+export default TimeRangePicker;

src/components/time-range-picker/styles.scss

@@ -0,0 +1,78 @@
+.time-range-picker-button {
+ span:first-of-type {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-weight: normal;
+ }
+ .button-chevron {
+ font-size: 8px !important;
+ }
+}
+
+.time-range-list {
+ padding: 4px 0;
+}
+
+.time-range-list-items {
+ flex: auto;
+ overflow-y: auto;
+}
+
+.time-range-list-item {
+ display: inline-flex;
+ justify-content: start;
+ height: 24px;
+ width: 100%;
+ appearance: none;
+ background: none;
+ border: none;
+ font-size: 12px;
+ font-family: inherit;
+ color: #293338;
+ text-align: left;
+ cursor: pointer;
+ padding: 0 12px;
+ white-space: nowrap;
+ font-weight: normal;
+ border-radius: 0;
+ min-height: 24px;
+
+
+ &:hover {
+ box-shadow: none;
+ }
+
+ &.custom {
+ span:first-of-type {
+ width: 100%;
+ display: inline-flex;
+ justify-content: end;
+ }
+
+ }
+
+ &.open {
+ background-color: #E8E8E8;
+ }
+}
+
+.time-range-list-break {
+ border: 0;
+ border-top: 1px solid #E7E9EA;
+ margin-top: 4px;
+ margin-bottom: 4px;
+}
+
+.custom-entry {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 8px;
+ padding: 8px 12px;
+}
+
+.custom-buttons {
+ grid-column: 1 / -1;
+ display: flex;
+ gap: 4px;
+}