@carto/kepler.gl 0.0.77 → 0.0.78-0

package/src/components/common/range-plot.tsx

@@ -0,0 +1,145 @@
+// 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, {useState, useCallback} from 'react';
+import styled, {withTheme} from 'styled-components';
+import RangeBrushFactory, {OnBrush, RangeBrushProps} from './range-brush';
+import HistogramPlotFactory from './histogram-plot';
+import LineChartFactory, {HoverDP} from './line-chart';
+import {isTest} from 'utils/utils';
+import {LineChart} from 'reducers';
+
+const StyledRangePlot = styled.div`
+  margin-bottom: ${props => props.theme.sliderBarHeight}px;
+  display: flex;
+  position: 'relative';
+`;
+
+interface RangePlotProps {
+  onBrush: OnBrush;
+  range: number[];
+  value: number[];
+  width: number;
+  plotType?: string;
+  lineChart?: LineChart;
+  histogram?: {x0: number; x1: number}[];
+  isEnlarged?: boolean;
+  isRanged?: boolean;
+  theme: any;
+  timeFormat?: string;
+  timezone?: string | null;
+  playbackControlWidth?: number;
+}
+
+RangePlotFactory.deps = [RangeBrushFactory, HistogramPlotFactory, LineChartFactory];
+
+export default function RangePlotFactory(
+  RangeBrush: ReturnType<typeof RangeBrushFactory>,
+  HistogramPlot: ReturnType<typeof HistogramPlotFactory>,
+  LineChart: ReturnType<typeof LineChartFactory>
+) {
+  const RangePlot = ({
+    onBrush,
+    range,
+    value,
+    width,
+    plotType,
+    lineChart,
+    histogram,
+    isEnlarged,
+    isRanged,
+    theme,
+    ...chartProps
+  }: RangePlotProps & Partial<RangeBrushProps>) => {
+    const [brushing, setBrushing] = useState(false);
+    const [hoveredDP, onMouseMove] = useState<HoverDP | null>(null);
+    const [enableChartHover, setEnableChartHover] = useState(false);
+    const height = isEnlarged ? theme.rangePlotHLarge : theme.rangePlotH;
+
+    const onBrushStart = useCallback(() => {
+      setBrushing(true);
+      onMouseMove(null);
+      setEnableChartHover(false);
+    }, [setBrushing, onMouseMove, setEnableChartHover]);
+
+    const onBrushEnd = useCallback(() => {
+      setBrushing(false);
+      setEnableChartHover(true);
+    }, [setBrushing, setEnableChartHover]);
+
+    const onMouseoverHandle = useCallback(() => {
+      onMouseMove(null);
+      setEnableChartHover(false);
+    }, [onMouseMove, setEnableChartHover]);
+
+    const onMouseoutHandle = useCallback(() => {
+      setEnableChartHover(true);
+    }, [setEnableChartHover]);
+
+    // JsDom have limited support for SVG, d3 will fail
+    const brushComponent = isTest() ? null : (
+      <RangeBrush
+        onBrush={onBrush}
+        onBrushStart={onBrushStart}
+        onBrushEnd={onBrushEnd}
+        range={range}
+        value={value}
+        width={width}
+        height={height}
+        isRanged={isRanged}
+        onMouseoverHandle={onMouseoverHandle}
+        onMouseoutHandle={onMouseoutHandle}
+        {...chartProps}
+      />
+    );
+
+    const commonProps = {
+      width,
+      value,
+      height,
+      margin: isEnlarged ? theme.rangePlotMarginLarge : theme.rangePlotMargin,
+      brushComponent,
+      brushing,
+      isEnlarged,
+      enableChartHover,
+      onMouseMove,
+      hoveredDP,
+      isRanged,
+      ...chartProps
+    };
+
+    return (
+      <StyledRangePlot
+        style={{
+          height: `${isEnlarged ? theme.rangePlotContainerHLarge : theme.rangePlotContainerH}px`
+        }}
+        className="kg-range-slider__plot"
+      >
+        {plotType === 'lineChart' && lineChart ? (
+          <LineChart lineChart={lineChart} {...commonProps} />
+        ) : (
+          <HistogramPlot histogram={histogram} {...commonProps} />
+        )}
+      </StyledRangePlot>
+    );
+  };
+
+  return withTheme(RangePlot);
+}

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

@@ -0,0 +1,320 @@
+// 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, ComponentType, createRef, ElementType} from 'react';
+import {polyfill} from 'react-lifecycles-compat';
+import {createSelector} from 'reselect';
+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';
+import {LineChart} from 'reducers';
+
+interface SliderInputProps {
+  flush?: boolean;
+  inputSize?: string;
+}
+
+const SliderInput = styled(Input)<SliderInputProps>`
+  width: ${props => props.theme.sliderInputWidth}px;
+  margin-left: ${props => (props.flush ? 0 : props.inputSize === 'tiny' ? 12 : 18)}px;
+  font-size: ${props => props.theme.sliderInputFontSize}; // 10px // 12px;
+  padding: ${props => props.theme.sliderInputPadding}; // 4px 6px; // 6px 12px;
+`;
+
+interface SliderWrapperProps {
+  isRanged?: boolean;
+  showInput?: boolean;
+}
+
+const SliderWrapper = styled.div<SliderWrapperProps>`
+  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;
+`;
+
+interface RangeSliderProps {
+  range?: number[];
+  value0: number;
+  value1: number;
+  onChange?: (val: number[]) => void; //TODO
+  histogram?: any[];
+  isRanged?: boolean;
+  isEnlarged?: boolean;
+  showInput?: boolean;
+  inputTheme?: string;
+  inputSize?: string;
+  step?: number;
+  sliderHandleWidth?: number;
+  xAxis?: ElementType;
+  timezone?: string | null;
+  timeFormat?: string;
+  playbackControlWidth?: number;
+  lineChart?: LineChart;
+  marks?: number[];
+  plotType?: string;
+  plotValue?: number[];
+  min?: number;
+  max?: number;
+}
+
+RangeSliderFactory.deps = [RangePlotFactory];
+
+export default function RangeSliderFactory(
+  RangePlot: ReturnType<typeof RangePlotFactory>
+): ComponentType<RangeSliderProps> {
+  class RangeSlider extends Component<RangeSliderProps> {
+    static defaultProps = {
+      isEnlarged: false,
+      isRanged: true,
+      showInput: true,
+      sliderHandleWidth: 12,
+      inputTheme: '',
+      inputSize: 'small',
+      onChange: () => {}
+    };
+
+    static getDerivedStateFromProps(props, state) {
+      let update: {value1?: any; prevValue1?: any; value0?: any; prevValue0?: any} | null = 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
+    };
+
+    sliderContainer: HTMLDivElement | null = null;
+
+    componentDidMount() {
+      if (this.sliderContainer instanceof Element) {
+        observeDimensions(this.sliderContainer, this._resize);
+      }
+    }
+
+    componentDidUpdate() {
+      this._resize();
+    }
+
+    componentWillUnmount() {
+      if (this.sliderContainer instanceof Element) {
+        unobserveDimensions(this.sliderContainer);
+      }
+    }
+
+    setSliderContainer: React.LegacyRef<HTMLDivElement> = element => {
+      this.sliderContainer = element;
+      this._resize();
+    };
+    inputValue0 = createRef<HTMLInputElement>();
+    inputValue1 = createRef<HTMLInputElement>();
+    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;
+      if (!range || !step) return;
+      return roundValToStep(range[0], step, val);
+    };
+
+    _setRangeVal1 = val => {
+      const {value0, range, onChange = () => {}} = this.props;
+      if (!range) return;
+      const val1 = Number(val);
+      onChange([value0, clamp([value0, range[1]], this._roundValToStep(val1))]);
+      return true;
+    };
+
+    _setRangeVal0 = val => {
+      const {value1, range, onChange = () => {}} = this.props;
+      if (!range) return;
+      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 as any).blur();
+            }
+          }}
+          onBlur={update}
+          flush={key === 'value0'}
+          inputSize={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 - Number(sliderHandleWidth), 0);
+      const renderPlot = (histogram && histogram.length) || lineChart;
+      return (
+        <div
+          className="kg-range-slider"
+          style={{width: '100%', padding: `0 ${Number(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}
+                  isRanged={isRanged}
+                  minValue={range[0]}
+                  maxValue={range[1]}
+                  value0={this.props.value0}
+                  value1={this.props.value1}
+                  step={step}
+                  sliderHandleWidth={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.ts

@@ -0,0 +1,122 @@
+// 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';
+import {
+  RefObject,
+  TouchEvent,
+  TouchEventHandler,
+  MouseEventHandler as ReactMouseEventHandler,
+  MouseEvent
+} from 'react';
+import {StyleRangeSliderType} from './slider';
+
+function nope(...args) {}
+
+type MouseEventHandlerProps = {
+  vertical: boolean;
+  valueListener: (distance: number) => void;
+  toggleMouseOver: () => void;
+  track: RefObject<StyleRangeSliderType>;
+  setAnchor?: null | ((distance: number) => void);
+};
+
+export default class MouseEventHandler {
+  private vertical: boolean;
+  private valueListener: (distance: number) => void;
+  private toggleMouseOver: () => void;
+  private track: RefObject<StyleRangeSliderType>; // Set correct type
+  private setAnchor: null | ((distance: number) => void); // Set correct type
+
+  constructor({
+    vertical = false,
+    valueListener = nope,
+    toggleMouseOver = nope,
+    track,
+    setAnchor = null
+  }: MouseEventHandlerProps) {
+    this.vertical = vertical;
+    this.valueListener = valueListener;
+    this.toggleMouseOver = toggleMouseOver;
+    this.track = track;
+    this.setAnchor = setAnchor;
+  }
+
+  handleMouseDown: ReactMouseEventHandler = (e: MouseEvent) => {
+    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();
+  };
+
+  private getMousePos(e: MouseEvent) {
+    return this.vertical ? e.clientY : e.clientX;
+  }
+
+  private getTouchPosition(e: TouchEvent) {
+    return this.vertical ? e.touches[0].clientY : e.touches[0].clientX;
+  }
+
+  private mouseup = () => {
+    document.removeEventListener('mouseup', this.mouseup);
+    document.removeEventListener('mousemove', this.mousemove);
+    this.toggleMouseOver();
+  };
+
+  private getDistanceToTrack(pos: number) {
+    if (!this.track.current) {
+      return 0;
+    }
+    const trackRect = this.track.current.getBoundingClientRect();
+    return pos - (this.vertical ? trackRect.bottom : trackRect.left);
+  }
+
+  private mousemove = (e: MouseEvent) => {
+    e.preventDefault();
+    const pos = this.getMousePos(e);
+    this.valueListener(this.getDistanceToTrack(pos));
+  };
+
+  handleTouchStart: TouchEventHandler = (e: TouchEvent) => {
+    // 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();
+  };
+
+  private touchmove = (e: TouchEvent) => {
+    // TODO: touch not tested
+    const pos = this.getTouchPosition(e);
+    this.valueListener(this.getDistanceToTrack(pos));
+  };
+
+  private touchend = () => {
+    document.removeEventListener('touchend', this.touchend);
+    document.removeEventListener('touchmove', this.touchmove);
+    this.toggleMouseOver();
+  };
+}

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

@@ -0,0 +1,106 @@
+// 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, RefObject} from 'react';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import MouseEventHandler from './mouse-event';
+import {StyleRangeSliderType} from './slider';
+
+interface StyledSliderProps {
+  active?: boolean;
+  vertical?: boolean;
+}
+
+const StyledSlider = styled.div<StyledSliderProps>`
+  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() {}
+
+type SliderBarHandleProps = {
+  width: number;
+  v0Left: number;
+  sliderBarListener: (distance: number) => void;
+  enableBarDrag: boolean;
+  vertical: boolean;
+  track: RefObject<StyleRangeSliderType>;
+  setAnchor: (distance: number) => void;
+};
+
+export default class SliderBarHandle extends Component {
+  static defaultProps = {
+    sliderBarListener: nope,
+    enableBarDrag: false,
+    vertical: false
+  };
+
+  public mouseEvent: MouseEventHandler;
+
+  constructor(public props: SliderBarHandleProps) {
+    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}
+      />
+    );
+  }
+}