@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/common/range-slider.js

@@ -0,0 +1,299 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, createRef} from 'react';
+import {polyfill} from 'react-lifecycles-compat';
+import {createSelector} from 'reselect';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import RangePlotFactory from './range-plot';
+import Slider from 'components/common/slider/slider';
+import {Input} from 'components/common/styled-components';
+
+import {roundValToStep, clamp} from 'utils/data-utils';
+import {observeDimensions, unobserveDimensions} from '../../utils/observe-dimensions';
+
+const SliderInput = styled(Input)`
+  width: ${props => props.theme.sliderInputWidth}px;
+  margin-left: ${props => (props.flush ? 0 : props.size === 'tiny' ? 12 : 18)}px;
+  font-size: ${props => props.theme.sliderInputFontSize}; // 10px // 12px;
+  padding: ${props => props.theme.sliderInputPadding}; // 4px 6px; // 6px 12px;
+`;
+
+const SliderWrapper = styled.div`
+  display: flex;
+  position: relative;
+  align-items: ${props => (!props.isRanged && props.showInput ? 'center' : 'flex-start')};
+`;
+
+const RangeInputWrapper = styled.div`
+  margin-top: 12px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+RangeSliderFactory.deps = [RangePlotFactory];
+
+export default function RangeSliderFactory(RangePlot) {
+  class RangeSlider extends Component {
+    static propTypes = {
+      range: PropTypes.arrayOf(PropTypes.number),
+      value0: PropTypes.number.isRequired,
+      value1: PropTypes.number.isRequired,
+      onChange: PropTypes.func.isRequired,
+      histogram: PropTypes.arrayOf(PropTypes.any),
+      isRanged: PropTypes.bool,
+      isEnlarged: PropTypes.bool,
+      showInput: PropTypes.bool,
+      inputTheme: PropTypes.string,
+      inputSize: PropTypes.string,
+      step: PropTypes.number,
+      sliderHandleWidth: PropTypes.number,
+      xAxis: PropTypes.elementType,
+      min: PropTypes.number,
+      max: PropTypes.number
+    };
+
+    static defaultProps = {
+      isEnlarged: false,
+      isRanged: true,
+      showInput: true,
+      sliderHandleWidth: 12,
+      inputTheme: '',
+      inputSize: 'small',
+      onChange: () => {}
+    };
+
+    static getDerivedStateFromProps(props, state) {
+      let update = null;
+      const {value0, value1} = props;
+      if (props.value0 !== state.prevValue0 && !isNaN(value0)) {
+        update = {...(update || {}), value0, prevValue0: value0};
+      }
+      if (props.value1 !== state.prevValue1 && !isNaN(value1)) {
+        update = {...(update || {}), value1, prevValue1: value1};
+      }
+      return update;
+    }
+
+    state = {
+      value0: 0,
+      value1: 1,
+      prevValue0: 0,
+      prevValue1: 1,
+      width: 288
+    };
+
+    componentDidMount() {
+      if (this.sliderContainer instanceof Element) {
+        observeDimensions(this.sliderContainer, this._resize);
+      }
+    }
+
+    componentDidUpdate() {
+      this._resize();
+    }
+
+    componentWillUnmount() {
+      if (this.sliderContainer instanceof Element) {
+        unobserveDimensions(this.sliderContainer);
+      }
+    }
+
+    sliderContainer = null;
+    setSliderContainer = element => {
+      this.sliderContainer = element;
+      this._resize();
+    };
+    inputValue0 = createRef();
+    inputValue1 = createRef();
+    value0Selector = props => props.value0;
+    value1Selector = props => props.value1;
+    filterValueSelector = createSelector(
+      this.value0Selector,
+      this.value1Selector,
+      (value0, value1) => [value0, value1]
+    );
+
+    _roundValToStep = val => {
+      const {range, step} = this.props;
+
+      return roundValToStep(range[0], step, val);
+    };
+
+    _setRangeVal1 = val => {
+      const {value0, range, onChange} = this.props;
+      const val1 = Number(val);
+      onChange([value0, clamp([value0, range[1]], this._roundValToStep(val1))]);
+      return true;
+    };
+
+    _setRangeVal0 = val => {
+      const {value1, range, onChange} = this.props;
+      const val0 = Number(val);
+      onChange([clamp([range[0], value1], this._roundValToStep(val0)), value1]);
+      return true;
+    };
+
+    _resize = () => {
+      if (this.sliderContainer) {
+        const width = this.sliderContainer.offsetWidth;
+        if (width !== this.state.width) {
+          this.setState({width});
+        }
+      }
+    };
+
+    _onChangeInput = (key, e) => {
+      this.setState({[key]: e.target.value});
+    };
+
+    _renderInput(key) {
+      const setRange = key === 'value0' ? this._setRangeVal0 : this._setRangeVal1;
+      const ref = key === 'value0' ? this.inputValue0 : this.inputValue1;
+      const update = e => {
+        if (!setRange(e.target.value)) {
+          this.setState({[key]: this.state[key]});
+        }
+      };
+
+      const onChange = this._onChangeInput.bind(this, key);
+
+      return (
+        <SliderInput
+          className="kg-range-slider__input"
+          type="number"
+          ref={ref}
+          id={`slider-input-${key}`}
+          key={key}
+          value={this.state[key]}
+          min={this.props.min}
+          max={this.props.max}
+          onChange={onChange}
+          onKeyPress={e => {
+            if (e.key === 'Enter') {
+              update(e);
+              ref.current.blur();
+            }
+          }}
+          onBlur={update}
+          flush={key === 'value0'}
+          size={this.props.inputSize}
+          secondary={this.props.inputTheme === 'secondary'}
+        />
+      );
+    }
+
+    // eslint-disable-next-line complexity
+    render() {
+      const {
+        isRanged,
+        showInput,
+        histogram,
+        lineChart,
+        range,
+        onChange,
+        sliderHandleWidth,
+        step,
+        timezone,
+        timeFormat,
+        playbackControlWidth
+      } = this.props;
+
+      const {width} = this.state;
+      const plotWidth = Math.max(width - sliderHandleWidth, 0);
+      const renderPlot = (histogram && histogram.length) || lineChart;
+      return (
+        <div
+          className="kg-range-slider"
+          style={{width: '100%', padding: `0 ${sliderHandleWidth / 2}px`}}
+          ref={this.setSliderContainer}
+        >
+          {Array.isArray(range) && range.every(Number.isFinite) && (
+            <>
+              {renderPlot ? (
+                <RangePlot
+                  histogram={histogram}
+                  lineChart={this.props.lineChart}
+                  plotType={this.props.plotType}
+                  isEnlarged={this.props.isEnlarged}
+                  onBrush={(val0, val1) => onChange([val0, val1])}
+                  marks={this.props.marks}
+                  range={range}
+                  value={this.props.plotValue || this.filterValueSelector(this.props)}
+                  width={plotWidth}
+                  isRanged={isRanged}
+                  step={step}
+                  timezone={timezone}
+                  timeFormat={timeFormat}
+                  playbackControlWidth={playbackControlWidth}
+                />
+              ) : null}
+              <SliderWrapper
+                className="kg-range-slider__slider"
+                isRanged={isRanged}
+                showInput={showInput}
+              >
+                {this.props.xAxis ? (
+                  <div style={{height: '30px'}}>
+                    <this.props.xAxis
+                      width={plotWidth}
+                      timezone={timezone}
+                      domain={range}
+                      isEnlarged={this.props.isEnlarged}
+                    />
+                  </div>
+                ) : null}
+                <Slider
+                  marks={this.props.marks}
+                  showValues={false}
+                  isRanged={isRanged}
+                  minValue={range[0]}
+                  maxValue={range[1]}
+                  value0={this.props.value0}
+                  value1={this.props.value1}
+                  step={step}
+                  handleWidth={sliderHandleWidth}
+                  onSlider0Change={this._setRangeVal0}
+                  onSlider1Change={this._setRangeVal1}
+                  onSliderBarChange={(val0, val1) => {
+                    onChange([val0, val1]);
+                  }}
+                  enableBarDrag
+                />
+                {!isRanged && showInput ? this._renderInput('value1') : null}
+              </SliderWrapper>
+              {isRanged && showInput ? (
+                <RangeInputWrapper className="range-slider__input-group">
+                  {this._renderInput('value0')}
+                  {this._renderInput('value1')}
+                </RangeInputWrapper>
+              ) : null}
+            </>
+          )}
+        </div>
+      );
+    }
+  }
+
+  polyfill(RangeSlider);
+
+  return RangeSlider;
+}

package/src/components/common/slider/mouse-event.js

@@ -0,0 +1,97 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import document from 'global/document';
+
+function nope(...args) {}
+
+export default class MouseEventHandler {
+  constructor({
+    vertical = false,
+    valueListener = nope,
+    toggleMouseOver = nope,
+    track,
+    setAnchor = null
+  }) {
+    this._vertical = vertical;
+    this._valueListener = valueListener;
+    this._toggleMouseOver = toggleMouseOver;
+    this._track = track;
+    this._setAnchor = setAnchor;
+  }
+
+  handleMouseDown = e => {
+    document.addEventListener('mouseup', this._mouseup);
+    document.addEventListener('mousemove', this._mousemove);
+    if (this._setAnchor) {
+      const pos = this._getMousePos(e);
+      this._setAnchor(this._getDistanceToTrack(pos));
+    }
+    this._toggleMouseOver();
+  };
+
+  _getMousePos(e) {
+    return this._vertical ? e.clientY : e.clientX;
+  }
+
+  _getTouchPosition(e) {
+    return this._vertical ? e.touches[0].clientY : e.touches[0].clientX;
+  }
+
+  _mouseup = () => {
+    document.removeEventListener('mouseup', this._mouseup);
+    document.removeEventListener('mousemove', this._mousemove);
+    this._toggleMouseOver();
+  };
+
+  _getDistanceToTrack(pos) {
+    const trackRect = this._track.current.getBoundingClientRect();
+    return pos - (this._vertical ? trackRect.bottom : trackRect.left);
+  }
+
+  _mousemove = e => {
+    e.preventDefault();
+    const pos = this._getMousePos(e);
+    this._valueListener(this._getDistanceToTrack(pos));
+  };
+
+  handleTouchStart = e => {
+    // TODO: fix touch event
+    document.addEventListener('touchend', this._touchend);
+    document.addEventListener('touchmove', this._touchmove);
+    if (this._setAnchor) {
+      const pos = this._getTouchPosition(e);
+      this._setAnchor(this._getDistanceToTrack(pos));
+    }
+    this._toggleMouseOver();
+  };
+
+  _touchmove = e => {
+    // TODO: touch not tested
+    const pos = this._getTouchPosition(e);
+    this._valueListener(this._getDistanceToTrack(pos));
+  };
+
+  _touchend = () => {
+    document.removeEventListener('touchend', this._touchend);
+    document.removeEventListener('touchmove', this._touchmove);
+    this._toggleMouseOver();
+  };
+}

package/src/components/common/slider/slider-bar-handle.js

@@ -0,0 +1,97 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import MouseEventHandler from './mouse-event';
+
+const StyledSlider = styled.div`
+  position: relative;
+  background-color: ${props =>
+    props.active ? props.theme.sliderBarHoverColor : props.theme.sliderBarColor};
+  ${props => `${props.vertical ? 'width' : 'height'}: ${props.theme.sliderBarHeight}px`};
+  border-radius: ${props => props.theme.sliderBarRadius};
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+function nope() {}
+
+export default class SliderBarHandle extends Component {
+  static propTypes = {
+    width: PropTypes.number,
+    left: PropTypes.string,
+    sliderBarListener: PropTypes.func,
+    enableBarDrag: PropTypes.bool,
+    vertical: PropTypes.bool
+  };
+
+  static defaultProps = {
+    sliderBarListener: nope,
+    enableBarDrag: false,
+    vertical: false
+  };
+
+  constructor(props) {
+    super(props);
+    this.mouseEvent = new MouseEventHandler({
+      vertical: props.vertical,
+      valueListener: props.sliderBarListener,
+      toggleMouseOver: this.toggleMouseOver,
+      track: props.track,
+      setAnchor: props.setAnchor
+    });
+  }
+
+  state = {mouseOver: false};
+
+  toggleMouseOver = () => {
+    this.setState({mouseOver: !this.state.mouseOver});
+  };
+
+  render() {
+    const {width, v0Left} = this.props;
+
+    const style = this.props.vertical
+      ? {
+          height: `${width}%`,
+          bottom: `${-100 + width + v0Left}%`
+        }
+      : {
+          width: `${width}%`,
+          left: `${v0Left}%`
+        };
+
+    return (
+      <StyledSlider
+        active={this.state.mouseOver}
+        className={classnames('kg-range-slider__bar', {
+          'kg-range-slider__bar--active': this.state.mouseOver
+        })}
+        style={style}
+        onMouseDown={this.props.enableBarDrag ? this.mouseEvent.handleMouseDown : nope}
+        onTouchStart={this.props.enableBarDrag ? this.mouseEvent.handleTouchStart : nope}
+      />
+    );
+  }
+}

package/src/components/common/slider/slider-handle.js

@@ -0,0 +1,181 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, createRef} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import MouseEventHandler from './mouse-event';
+
+const StyledSliderHandle = styled.span.attrs({
+  className: 'kg-range-slider__handle'
+})`
+  position: absolute;
+  z-index: 10;
+  ${props => (props.vertical ? 'margin-left' : 'margin-top')}: -${props =>
+  (props.sliderHandleWidth - props.theme.sliderBarHeight) / 2}px;
+
+  height: ${props =>
+    Number.isFinite(props.sliderHandleWidth)
+      ? props.sliderHandleWidth
+      : props.theme.sliderHandleHeight}px;
+  width: ${props =>
+    Number.isFinite(props.sliderHandleWidth)
+      ? props.sliderHandleWidth
+      : props.theme.sliderHandleHeight}px;
+  box-shadow: ${props => props.theme.sliderHandleShadow};
+  background-color: ${props => props.theme.sliderHandleColor};
+  color: ${props => props.theme.sliderHandleTextColor};
+
+  border-width: 1px;
+  border-radius: ${props => props.theme.sliderBorderRadius};
+  border-style: solid;
+  border-color: ${props =>
+    props.active ? props.theme.selectBorderColor : props.theme.sliderInactiveBorderColor};
+
+  :hover {
+    background-color: ${props => props.theme.sliderHandleHoverColor};
+    cursor: pointer;
+  }
+
+  line-height: 10px;
+  font-size: 6px;
+  padding: 0 3px;
+  letter-spacing: 1px;
+  :after {
+    content: '${props => props.theme.sliderHandleAfterContent}';
+  }
+`;
+
+const StyledSliderTooltip = styled.div`
+  position: absolute;
+  border-radius: 3px;
+  display: inline-block;
+  pointer-events: none;
+  transition: opacity 0.3s ease-out;
+  z-index: 999;
+  margin-left: ${props => props.sliderHandleWidth + 12}px;
+  font-size: 9.5px;
+  font-weight: 500;
+  padding: 7px 10px;
+  background-color: ${props => props.theme.tooltipBg};
+  color: ${props => props.theme.tooltipColor};
+  margin-bottom: -6px;
+  width: 50px;
+
+  :before,
+  :after {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  :before {
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    left: -8px;
+    top: 50%;
+  }
+
+  :after {
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    left: -6px;
+    top: 50%;
+    margin-top: -4px;
+    border-right-color: ${props => props.theme.tooltipBg};
+    border-right-style: solid;
+    border-right-width: 6px;
+  }
+`;
+
+const SliderTooltip = ({value, format = val => val, style, sliderHandleWidth}) => {
+  return (
+    <StyledSliderTooltip sliderHandleWidth={sliderHandleWidth} style={style}>
+      {format(value)}
+    </StyledSliderTooltip>
+  );
+};
+
+export default class SliderHandle extends Component {
+  static propTypes = {
+    sliderHandleWidth: PropTypes.number,
+    left: PropTypes.string,
+    display: PropTypes.bool,
+    valueListener: PropTypes.func,
+    vertical: PropTypes.bool
+  };
+
+  static defaultProps = {
+    sliderHandleWidth: 12,
+    left: '50%',
+    display: true,
+    vertical: false,
+    valueListener: function valueListenerFn() {},
+    showTooltip: false
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.mouseEvent = new MouseEventHandler({
+      vertical: props.vertical,
+      valueListener: props.valueListener,
+      toggleMouseOver: this.toggleMouseOver,
+      track: props.track
+    });
+  }
+
+  state = {mouseOver: false};
+  ref = createRef();
+
+  toggleMouseOver = () => {
+    this.setState({mouseOver: !this.state.mouseOver});
+  };
+
+  render() {
+    const style = {[this.props.vertical ? 'bottom' : 'left']: this.props.left};
+
+    return (
+      <div style={{display: this.props.display ? 'block' : 'none'}}>
+        {this.props.showTooltip && this.state.mouseOver ? (
+          <SliderTooltip
+            style={style}
+            sliderHandleWidth={this.props.sliderHandleWidth}
+            value={Number.isFinite(this.props.value) ? this.props.value : null}
+          />
+        ) : null}
+        <StyledSliderHandle
+          className={classnames({
+            'kg-range-slider__handle--active': this.state.mouseOver
+          })}
+          ref={this.ref}
+          sliderHandleWidth={this.props.sliderHandleWidth}
+          active={this.state.mouseOver}
+          vertical={this.props.vertical}
+          style={style}
+          onMouseDown={this.mouseEvent.handleMouseDown}
+          onTouchStart={this.mouseEvent.handleTouchStart}
+        />
+      </div>
+    );
+  }
+}