@carto/kepler.gl 0.0.80 → 0.1.0-alpha.1

package/src/components/common/progress-bar.js

@@ -1,49 +0,0 @@
-// 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 from 'react';
-import styled from 'styled-components';
-
-/** @typedef {import('./progress-bar').ProgressBarProps} ProgressBarProps */
-
-const StyledBar = styled.span.attrs({
-  className: 'progress-bar__bar'
-})`
-  background-color: ${props => props.barColor || props.theme.progressBarColor};
-  /* transition: width 200ms; */
-  display: block;
-`;
-const StyledTrack = styled.div.attrs({
-  className: 'progress-bar'
-})`
-  background-color: ${props => props.trackColor || props.theme.progressBarTrackColor};
-`;
-
-/** @type {React.FunctionComponent<ProgressBarProps>} */
-const ProgressBar = ({percent, height = 4, isLoading, barColor, trackColor, theme}) => (
-  <StyledTrack trackColor={trackColor} theme={theme}>
-    <StyledBar
-      barColor={barColor}
-      style={{width: percent, height: `${height}px`, opacity: isLoading ? 1 : 0}}
-    />
-  </StyledTrack>
-);
-
-export default ProgressBar;

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

@@ -1,256 +0,0 @@
-// 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 styled, {withTheme} from 'styled-components';
-import {select} from 'd3-selection';
-import {brushX} from 'd3-brush';
-import {normalizeSliderValue} from 'utils/data-utils';
-
-const StyledG = styled.g`
-  .selection {
-    stroke: none;
-    fill: ${props => (props.isRanged ? props.theme.rangeBrushBgd : props.theme.BLUE2)};
-    fill-opacity: ${props => (props.isRanged ? 0.3 : 1)};
-  }
-  .handle {
-    fill: ${props => props.theme.BLUE2};
-    fill-opacity: 0.3;
-  }
-`;
-
-function moveRight(startSel, selection) {
-  const [startSel0] = startSel;
-  const [sel0] = selection;
-
-  return Boolean(startSel0 === sel0);
-}
-// style brush resize handle
-// https://github.com/crossfilter/crossfilter/blob/gh-pages/index.html#L466
-const getHandlePath = props => {
-  return function brushResizePath(d) {
-    const e = Number(d.type === 'e');
-    const x = e ? 1 : -1;
-    const h = 39;
-    const w = 4.5;
-    const y = (props.height - h) / 2;
-    return `M${0.5 * x},${y}c${2.5 * x},0,${w * x},2,${w * x},${w}v${h - w * 2}c0,2.5,${-2 *
-      x},${w},${-w * x},${w}V${y}z`;
-  };
-};
-
-function RangeBrushFactory() {
-  class RangeBrush extends Component {
-    static propTypes = {
-      onBrush: PropTypes.func.isRequired,
-      range: PropTypes.arrayOf(PropTypes.number).isRequired,
-      value: PropTypes.arrayOf(PropTypes.number).isRequired,
-      width: PropTypes.number.isRequired,
-      isRanged: PropTypes.bool
-    };
-
-    static defaultProps = {
-      isRanged: true
-    };
-
-    componentDidMount() {
-      // We want the React app to respond to brush state and vice-versa
-      // but d3-brush fires the same events for both user-initiated brushing
-      // and programmatic brushing (brush.move). We need these flags to
-      // distinguish between the uses.
-      //
-      // We don't use state because that would trigger another `componentDidUpdate`
-      const {theme, isRanged, onMouseoverHandle, onMouseoutHandle} = this.props;
-
-      this.brushing = false;
-      this.moving = false;
-
-      this.root = select(this.rootContainer.current);
-      this.brush = brushX()
-        .handleSize(3)
-        .on('start', event => {
-          if (typeof this.props.onBrushStart === 'function') this.props.onBrushStart();
-          this._startSel = event.selection;
-        })
-        .on('brush', event => {
-          if (this.moving) {
-            return;
-          }
-          if (event.selection) {
-            this._lastSel = event.selection;
-            this.brushing = true;
-            this._brushed(event);
-          }
-        })
-        .on('end', event => {
-          if (!event.selection) {
-            if (this.brushing) {
-              // handle null selection
-              this._click(this._lastSel);
-            } else if (this._startSel) {
-              // handle click
-              this._click(this._startSel);
-            }
-          }
-
-          if (typeof this.props.onBrushEnd === 'function') this.props.onBrushEnd();
-
-          this.brushing = false;
-          this.moving = false;
-        });
-
-      this.root.call(this.brush);
-      const brushResizePath = getHandlePath(this.props);
-      this.handle = this.root
-        .selectAll('.handle--custom')
-        .data([{type: 'w'}, {type: 'e'}])
-        .enter()
-        .append('path')
-        .attr('class', 'handle--custom')
-        .attr('display', isRanged ? null : 'none')
-        .attr('fill', theme ? theme.sliderHandleColor : '#D3D8E0')
-        .attr('cursor', 'ew-resize')
-        .attr('d', brushResizePath)
-        .on('mouseover', () => {
-          if (onMouseoverHandle) onMouseoverHandle();
-        })
-        .on('mouseout', () => {
-          if (onMouseoutHandle) onMouseoutHandle();
-        });
-
-      const {
-        value: [val0, val1]
-      } = this.props;
-      this.moving = true;
-      this._move(val0, val1);
-    }
-
-    componentDidUpdate(prevProps) {
-      const {
-        value: [val0, val1],
-        width
-      } = this.props;
-      const [prevVal0, prevVal1] = prevProps.value;
-
-      if (prevProps.width !== width) {
-        // width change should not trigger this._brushed
-        this.moving = true;
-        this.root.call(this.brush);
-        this._move(val0, val1);
-      }
-
-      if (!this.brushing && !this.moving) {
-        if (prevVal0 !== val0 || prevVal1 !== val1) {
-          this.moving = true;
-          this._move(val0, val1);
-        }
-      }
-
-      if (!this.props.isRanged) {
-        this.handle.attr('display', 'none');
-      }
-    }
-
-    rootContainer = createRef();
-
-    _click(selection) {
-      // fake brush
-      this.brushing = true;
-      this._brushed({sourceEvent: {}, selection});
-    }
-
-    _move(val0, val1) {
-      const {
-        range: [min, max],
-        width,
-        isRanged
-      } = this.props;
-
-      if (width && max - min) {
-        const scale = x => ((x - min) * width) / (max - min);
-        if (!isRanged) {
-          // only draw a 1 pixel line
-          this.brush.move(this.root, [scale(val0), scale(val0) + 1]);
-        } else {
-          this.brush.move(this.root, [scale(val0), scale(val1)]);
-
-          this.handle
-            .attr('display', null)
-            .attr('transform', (d, i) => `translate(${[i === 0 ? scale(val0) : scale(val1), 0]})`);
-        }
-      }
-    }
-
-    _brushed = evt => {
-      // Ignore brush events which don't have an underlying sourceEvent
-      if (!evt.sourceEvent) return;
-      const [sel0, sel1] = evt.selection;
-      const right = moveRight(this._startSel, evt.selection);
-
-      const {
-        range: [min, max],
-        step,
-        width,
-        marks,
-        isRanged
-      } = this.props;
-      const invert = x => (x * (max - min)) / width + min;
-      let d0 = invert(sel0);
-      let d1 = invert(sel1);
-
-      d0 = normalizeSliderValue(d0, min, step, marks);
-      d1 = normalizeSliderValue(d1, min, step, marks);
-
-      if (isRanged) this._move(d0, d1);
-      else this._move(...(right ? [d1, d1] : [d0, d0]));
-
-      if (isRanged) this._onBrush(d0, d1);
-      else this._onBrush(right ? d1 : d0);
-    };
-
-    _onBrush(val0, val1) {
-      const {
-        isRanged,
-        value: [currentVal0, currentVal1]
-      } = this.props;
-
-      if (currentVal0 === val0 && currentVal1 === val1) {
-        return;
-      }
-
-      if (isRanged) {
-        this.props.onBrush(val0, val1);
-      } else {
-        this.props.onBrush(val0, val0);
-      }
-    }
-
-    render() {
-      const {isRanged} = this.props;
-      return (
-        <StyledG className="kg-range-slider__brush" isRanged={isRanged} ref={this.rootContainer} />
-      );
-    }
-  }
-  return withTheme(RangeBrush);
-}
-
-export default RangeBrushFactory;

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

@@ -1,139 +0,0 @@
-// 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 PropTypes from 'prop-types';
-import styled, {withTheme} from 'styled-components';
-import RangeBrushFactory from './range-brush';
-import HistogramPlotFactory from './histogram-plot';
-import LineChartFactory from './line-chart';
-import {isTest} from 'utils/utils';
-
-const StyledRangePlot = styled.div`
-  margin-bottom: ${props => props.theme.sliderBarHeight}px;
-  display: flex;
-  position: 'relative';
-`;
-
-RangePlotFactory.deps = [RangeBrushFactory, HistogramPlotFactory, LineChartFactory];
-
-export default function RangePlotFactory(RangeBrush, HistogramPlot, LineChart) {
-  const RangePlot = ({
-    onBrush,
-    range,
-    value,
-    width,
-    plotType,
-    lineChart,
-    histogram,
-    isEnlarged,
-    isRanged,
-    theme,
-    ...chartProps
-  }) => {
-    const [brushing, setBrushing] = useState(false);
-    const [hoveredDP, onMouseMove] = useState(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>
-    );
-  };
-
-  RangePlot.propTypes = {
-    value: PropTypes.arrayOf(PropTypes.number).isRequired,
-    histogram: PropTypes.arrayOf(
-      PropTypes.shape({
-        x0: PropTypes.number,
-        x1: PropTypes.number
-      })
-    ),
-    lineChart: PropTypes.object,
-    plotType: PropTypes.string,
-    isEnlarged: PropTypes.bool,
-    onBlur: PropTypes.func,
-    width: PropTypes.number.isRequired
-  };
-  return withTheme(RangePlot);
-}