Merge pull request #766 from c9s/feature/time-range-picker

backtest-report: add time range slider

Author: c9s

apps/backtest-report/components/TimeRangeSlider/components/Handle.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Handle = ({
+                  error,
+                  domain: [min, max],
+                  handle: { id, value, percent = 0 },
+                  disabled,
+                  getHandleProps,
+                }) => {
+  const leftPosition = `${percent}%`
+
+  return (
+    <>
+      <div className='react_time_range__handle_wrapper' style={{ left: leftPosition }} {...getHandleProps(id)} />
+      <div
+        role='slider'
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        className={`react_time_range__handle_container${disabled ? '__disabled' : ''}`}
+        style={{ left: leftPosition }}
+      >
+        <div className={`react_time_range__handle_marker${error ? '__error' : ''}`} />
+      </div>
+    </>
+  )
+}
+
+Handle.propTypes = {
+  domain: PropTypes.array.isRequired,
+  handle: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
+  }).isRequired,
+  getHandleProps: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  style: PropTypes.object,
+}
+
+Handle.defaultProps = { disabled: false }
+
+export default Handle

apps/backtest-report/components/TimeRangeSlider/components/KeyboardHandle.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const KeyboardHandle = ({ domain: [min, max], handle: { id, value, percent = 0 }, disabled, getHandleProps }) => (
+  <button
+    role='slider'
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    className='react_time_range__keyboard_handle'
+    style={{
+      left: `${percent}%`,
+      backgroundColor: disabled ? '#666' : '#ffc400'
+    }}
+    {...getHandleProps(id)}
+  />
+)
+
+KeyboardHandle.propTypes = {
+  domain: PropTypes.array.isRequired,
+  handle: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
+  }).isRequired,
+  getHandleProps: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
+}
+
+KeyboardHandle.defaultProps = { disabled: false }
+
+export default KeyboardHandle

apps/backtest-report/components/TimeRangeSlider/components/SliderRail.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export const SliderRail = ({ getRailProps }) => (
+  <>
+    <div className='react_time_range__rail__outer' {...getRailProps()} />
+    <div className='react_time_range__rail__inner' />
+  </>
+)
+
+SliderRail.propTypes = { getRailProps: PropTypes.func.isRequired }
+
+export default SliderRail

apps/backtest-report/components/TimeRangeSlider/components/Tick.js

@@ -0,0 +1,41 @@
+import { getMinutes } from 'date-fns'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Tick = ({ tick, count, format }) => {
+  const isFullHour = !getMinutes(tick.value)
+
+  const tickLabelStyle = {
+    marginLeft: `${-(100 / count) / 2}%`,
+    width: `${100 / count}%`,
+    left: `${tick.percent}%`,
+  }
+
+  return (
+    <>
+      <div
+        className={`react_time_range__tick_marker${isFullHour ? '__large' : ''}`}
+        style={{ left: `${tick.percent}%` }}
+      />
+      {isFullHour && (
+        <div className='react_time_range__tick_label' style={tickLabelStyle}>
+          {format(tick.value)}
+        </div>
+      )}
+    </>
+  )
+}
+
+Tick.propTypes = {
+  tick: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
+  }).isRequired,
+  count: PropTypes.number.isRequired,
+  format: PropTypes.func.isRequired
+}
+
+Tick.defaultProps = { format: d => d }
+
+export default Tick

apps/backtest-report/components/TimeRangeSlider/components/Track.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const getTrackConfig = ({ error, source, target, disabled }) => {
+  const basicStyle = {
+    left: `${source.percent}%`,
+    width: `calc(${target.percent - source.percent}% - 1px)`,
+  }
+
+  if (disabled) return basicStyle
+
+  const coloredTrackStyle = error
+    ? {
+      backgroundColor: 'rgba(214,0,11,0.5)',
+      borderLeft: '1px solid rgba(214,0,11,0.5)',
+      borderRight: '1px solid rgba(214,0,11,0.5)',
+    }
+    : {
+      backgroundColor: 'rgba(98, 203, 102, 0.5)',
+      borderLeft: '1px solid #62CB66',
+      borderRight: '1px solid #62CB66',
+    }
+
+  return { ...basicStyle, ...coloredTrackStyle }
+}
+
+const Track = ({ error, source, target, getTrackProps, disabled }) => (
+  <div
+    className={`react_time_range__track${disabled ? '__disabled' : ''}`}
+    style={getTrackConfig({ error, source, target, disabled })}
+    {...getTrackProps()}
+  />
+)
+
+Track.propTypes = {
+  source: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
+  }).isRequired,
+  target: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
+  }).isRequired,
+  getTrackProps: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
+}
+
+Track.defaultProps = { disabled: false }
+
+export default Track