github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/thanos/pages/blocks/TimeRange.tsx (about)

     1  import React, { FC, useMemo } from 'react';
     2  import Slider from 'rc-slider';
     3  import 'rc-slider/assets/index.css';
     4  import moment from 'moment';
     5  import styles from './blocks.module.css';
     6  
     7  const Range = Slider.Range;
     8  
     9  interface TimeRangeProps {
    10    viewMinTime: number;
    11    viewMaxTime: number;
    12    gridMinTime: number;
    13    gridMaxTime: number;
    14    onChange: (times: number[]) => void;
    15  }
    16  
    17  const NUM_MARKS = 10;
    18  
    19  const TimeRange: FC<TimeRangeProps> = ({ viewMinTime, viewMaxTime, gridMinTime, gridMaxTime, onChange }) => {
    20    const marks = useMemo(() => {
    21      const step = Math.ceil((gridMaxTime - gridMinTime) / NUM_MARKS);
    22  
    23      const marks: { [num: string]: string } = {};
    24      for (let i = gridMinTime + step; i < gridMaxTime; i += step) {
    25        marks[i] = moment.unix(i / 1000).format('ll');
    26      }
    27  
    28      return marks;
    29    }, [gridMinTime, gridMaxTime]);
    30  
    31    return (
    32      <div className={styles.timeRangeDiv}>
    33        <Range
    34          allowCross={false}
    35          min={gridMinTime}
    36          max={gridMaxTime}
    37          marks={marks}
    38          defaultValue={[viewMinTime, viewMaxTime]}
    39          onChange={onChange}
    40        />
    41        <div className={styles.timeRange}>
    42          <span>{moment.unix(viewMinTime / 1000).format('ll')}</span>
    43          <span>{moment.unix(viewMaxTime / 1000).format('ll')}</span>
    44        </div>
    45      </div>
    46    );
    47  };
    48  
    49  export default TimeRange;