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

package/src/components/common/item-selector/typeahead.js

@@ -0,0 +1,507 @@
+// 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 PropTypes from 'prop-types';
+import fuzzy from 'fuzzy';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import {console as Console} from 'global/window';
+
+import Accessor from './accessor';
+import DropdownList, {ListItem} from './dropdown-list';
+import {Search} from 'components/common/icons';
+import KeyEvent from 'constants/keyevent';
+
+const DEFAULT_CLASS = 'typeahead';
+/**
+ * Copied mostly from 'react-typeahead', an auto-completing text input
+ *
+ * Renders an text input that shows options nearby that you can use the
+ * keyboard or mouse to select.
+ */
+
+const TypeaheadWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${props =>
+    props.light ? props.theme.dropdownListBgdLT : props.theme.inputBgd};
+  box-shadow: ${props => props.theme.dropdownListShadow};
+
+  :focus {
+    outline: 0;
+  }
+`;
+
+const InputBox = styled.div`
+  position: relative;
+  margin: 8px;
+`
+
+const TypeaheadInput = styled.input`
+  ${props => (props.light ? props.theme.inputLT : props.theme.secondaryInput)};
+  width: 100%;
+  padding-left: 35px;
+  background-color: ${props => props.light ? props.theme.inputBgd : '#eee'};
+  border: none;
+`;
+
+const InputIcon = styled.div`
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  z-index: 2;
+  transform: translateY(-50%);
+  color: ${props => props.theme.inputPlaceholderColor};
+  svg {
+    display: block;
+  }
+`;
+
+function generateSearchFunction(props) {
+  const {searchOptions, filterOption} = props;
+  if (typeof searchOptions === 'function') {
+    if (filterOption !== null) {
+      Console.warn('searchOptions prop is being used, filterOption prop will be ignored');
+    }
+    return searchOptions;
+  } else if (typeof filterOption === 'function') {
+    // use custom filter option
+    return (value, options) => options.filter(o => filterOption(value, o));
+  }
+
+  const mapper =
+    typeof filterOption === 'string'
+      ? Accessor.generateAccessor(filterOption)
+      : Accessor.IDENTITY_FN;
+
+  return (value, options) =>
+    fuzzy.filter(value, options, {extract: mapper}).map(res => options[res.index]);
+}
+
+function getOptionsForValue(value, props, state) {
+  const {options, showOptionsWhenEmpty} = props;
+
+  if (!props.searchable) {
+    // directly pass through options if can not be searched
+    return options;
+  }
+  if (shouldSkipSearch(value, state, showOptionsWhenEmpty)) {
+    return options;
+  }
+
+  const searchOptions = generateSearchFunction(props);
+  return searchOptions(value, options);
+}
+
+function shouldSkipSearch(input, state, showOptionsWhenEmpty) {
+  const emptyValue = !input || input.trim().length === 0;
+
+  // this.state must be checked because it may not be defined yet if this function
+  // is called from within getInitialState
+  const isFocused = state && state.isFocused;
+  return !(showOptionsWhenEmpty && isFocused) && emptyValue;
+}
+
+class Typeahead extends Component {
+  static propTypes = {
+    name: PropTypes.string,
+    customClasses: PropTypes.object,
+    maxVisible: PropTypes.number,
+    resultsTruncatedMessage: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.any),
+    fixedOptions: PropTypes.arrayOf(PropTypes.any),
+    allowCustomValues: PropTypes.number,
+    initialValue: PropTypes.string,
+    value: PropTypes.string,
+    placeholder: PropTypes.string,
+    disabled: PropTypes.bool,
+    textarea: PropTypes.bool,
+    inputProps: PropTypes.object,
+    onOptionSelected: PropTypes.func,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    onKeyPress: PropTypes.func,
+    onKeyUp: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    filterOption: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    searchOptions: PropTypes.func,
+    displayOption: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    inputDisplayOption: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    formInputOption: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    defaultClassNames: PropTypes.bool,
+    customListComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    customListItemComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    customListHeaderComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    showOptionsWhenEmpty: PropTypes.bool,
+    searchable: PropTypes.bool,
+    withSubOptions: PropTypes.bool
+  };
+
+  static defaultProps = {
+    options: [],
+    customClasses: {},
+    allowCustomValues: 0,
+    initialValue: '',
+    value: '',
+    placeholder: '',
+    disabled: false,
+    textarea: false,
+    inputProps: {},
+    onOptionSelected(option) {},
+    onChange(event) {},
+    onKeyDown(event) {},
+    onKeyPress(event) {},
+    onKeyUp(event) {},
+    onFocus(event) {},
+    onBlur(event) {},
+    filterOption: null,
+    searchOptions: null,
+    inputDisplayOption: null,
+    defaultClassNames: true,
+    customListComponent: DropdownList,
+    customListItemComponent: ListItem,
+    inputIcon: Search,
+    customListHeaderComponent: null,
+    showOptionsWhenEmpty: true,
+    searchable: true,
+    resultsTruncatedMessage: null,
+    withSubOptions: false
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    //  invoked after a component is instantiated as well as before it is re-rendered
+    const searchResults = getOptionsForValue(state.entryValue, props, state);
+
+    return {searchResults};
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      /** @type {ReadonlyArray<string>} */
+      searchResults: [],
+
+      // This should be called something else, 'entryValue'
+      entryValue: this.props.value || this.props.initialValue,
+
+      // A valid typeahead value
+      selection: this.props.value,
+
+      // Index of the selection
+      selectionIndex: null,
+
+      // Keep track of the focus state of the input element, to determine
+      // whether to show options when empty (if showOptionsWhenEmpty is true)
+      isFocused: false
+    };
+  }
+
+  componentDidMount() {
+    // call focus on entry or div to trigger key events listener
+    if (this.entry.current) {
+      this.entry.current.focus();
+    } else {
+      this.root.current.focus();
+    }
+  }
+
+  root = createRef();
+  entry = createRef();
+
+  focus = () => {
+    if (this.entry.current) {
+      this.entry.current.focus();
+    }
+  };
+
+  _hasCustomValue = () => {
+    return (
+      this.props.allowCustomValues > 0 &&
+      this.state.entryValue.length >= this.props.allowCustomValues &&
+      this.state.searchResults.indexOf(this.state.entryValue) < 0
+    );
+  };
+
+  _getCustomValue = () => {
+    return this._hasCustomValue() ? this.state.entryValue : null;
+  };
+
+  _renderIncrementalSearchResults() {
+    return (
+      <this.props.customListComponent
+        fixedOptions={this.props.fixedOptions}
+        searchEntryValue={this.state.entryValue}
+        options={
+          this.props.maxVisible
+            ? this.state.searchResults.slice(0, this.props.maxVisible)
+            : this.state.searchResults
+        }
+        areResultsTruncated={
+          this.props.maxVisible && this.state.searchResults.length > this.props.maxVisible
+        }
+        resultsTruncatedMessage={this.props.resultsTruncatedMessage}
+        onOptionSelected={this._onOptionSelected}
+        allowCustomValues={this.props.allowCustomValues}
+        customValue={this._getCustomValue()}
+        customClasses={this.props.customClasses}
+        customListItemComponent={this.props.customListItemComponent}
+        customListHeaderComponent={this.props.customListHeaderComponent}
+        selectionIndex={this.state.selectionIndex}
+        defaultClassNames={this.props.defaultClassNames}
+        displayOption={this.props.displayOption}
+        selectedItems={this.props.selectedItems}
+        light={this.props.light}
+        withSubOptions={this.props.withSubOptions}
+      />
+    );
+  }
+
+  getSelection() {
+    let index = this.state.selectionIndex;
+
+    if (this._hasCustomValue()) {
+      if (index === 0) {
+        return this.state.entryValue;
+      }
+      index--;
+    }
+    if (this._hasFixedOptions()) {
+      return index < this.props.fixedOptions.length
+        ? this.props.fixedOptions[index]
+        : this.state.searchResults[index - this.props.fixedOptions.length];
+    }
+    return this.state.searchResults[index];
+  }
+
+  _onOptionSelected = (option, event) => {
+    if (this.props.searchable) {
+      // reset entry input
+      this.setState({
+        searchResults: getOptionsForValue('', this.props, this.state),
+        selection: '',
+        entryValue: ''
+      });
+    }
+
+    return this.props.onOptionSelected(option, event);
+  };
+
+  // use () => {} to avoid binding 'this'
+  _onTextEntryUpdated = () => {
+    if (this.props.searchable) {
+      const value = this.entry.current.value;
+
+      this.setState({
+        searchResults: getOptionsForValue(value, this.props, this.state),
+        selection: '',
+        entryValue: value
+      });
+    }
+  };
+
+  _onEnter = event => {
+    const selection = this.getSelection();
+    if (!selection) {
+      return this.props.onKeyDown(event);
+    }
+    return this._onOptionSelected(selection, event);
+  };
+
+  _onEscape = () => {
+    this.setState({
+      selectionIndex: null
+    });
+  };
+
+  _onTab = event => {
+    const selection = this.getSelection();
+    let option = selection
+      ? selection
+      : this.state.searchResults.length > 0
+      ? this.state.searchResults[0]
+      : null;
+
+    if (option === null && this._hasCustomValue()) {
+      option = this._getCustomValue();
+    }
+
+    if (option !== null) {
+      return this._onOptionSelected(option, event);
+    }
+  };
+
+  eventMap = event => {
+    const events = {};
+
+    events[KeyEvent.DOM_VK_UP] = this.navUp;
+    events[KeyEvent.DOM_VK_DOWN] = this.navDown;
+    events[KeyEvent.DOM_VK_RETURN] = events[KeyEvent.DOM_VK_ENTER] = this._onEnter;
+    events[KeyEvent.DOM_VK_ESCAPE] = this._onEscape;
+    events[KeyEvent.DOM_VK_TAB] = this._onTab;
+
+    return events;
+  };
+
+  _nav = delta => {
+    if (!this._hasHint()) {
+      return;
+    }
+    let newIndex =
+      this.state.selectionIndex === null
+        ? delta === 1
+          ? 0
+          : delta
+        : this.state.selectionIndex + delta;
+    let length = this.props.maxVisible
+      ? this.state.searchResults.slice(0, this.props.maxVisible).length
+      : this.state.searchResults.length;
+    if (this._hasCustomValue()) {
+      length += 1;
+    }
+
+    if (newIndex < 0) {
+      newIndex += length;
+    } else if (newIndex >= length) {
+      newIndex -= length;
+    }
+
+    this.setState({selectionIndex: newIndex});
+  };
+
+  navDown = () => {
+    this._nav(1);
+  };
+
+  navUp = () => {
+    this._nav(-1);
+  };
+
+  _onChange = event => {
+    if (this.props.onChange) {
+      this.props.onChange(event);
+    }
+
+    this._onTextEntryUpdated();
+  };
+
+  _onKeyDown = event => {
+    // If there are no visible elements, don't perform selector navigation.
+    // Just pass this up to the upstream onKeydown handler.
+    // Also skip if the user is pressing the shift key, since none of our handlers are looking for shift
+    if (!this._hasHint() || event.shiftKey) {
+      return this.props.onKeyDown(event);
+    }
+
+    const handler = this.eventMap()[event.keyCode];
+
+    if (handler) {
+      handler(event);
+    } else {
+      return this.props.onKeyDown(event);
+    }
+    // Don't propagate the keystroke back to the DOM/browser
+    event.preventDefault();
+  };
+
+  _onFocus = event => {
+    this.setState({isFocused: true});
+    if (this.props.onFocus) {
+      return this.props.onFocus(event);
+    }
+  };
+
+  _onBlur = event => {
+    this.setState({isFocused: false});
+    if (this.props.onBlur) {
+      return this.props.onBlur(event);
+    }
+  };
+
+  _renderHiddenInput() {
+    if (!this.props.name) {
+      return null;
+    }
+
+    return <input type="hidden" name={this.props.name} value={this.state.selection} />;
+  }
+
+  _hasHint() {
+    return this.state.searchResults.length > 0 || this._hasCustomValue();
+  }
+
+  _hasFixedOptions() {
+    return Array.isArray(this.props.fixedOptions) && this.props.fixedOptions.length;
+  }
+
+  render() {
+    const inputClasses = {};
+    inputClasses[this.props.customClasses.input] = Boolean(this.props.customClasses.input);
+    const inputClassList = classNames(inputClasses);
+
+    const classes = {
+      [DEFAULT_CLASS]: this.props.defaultClassNames
+    };
+    classes[this.props.className] = Boolean(this.props.className);
+    const classList = classNames(classes);
+
+    return (
+      <TypeaheadWrapper
+        className={classList}
+        ref={this.root}
+        tabIndex="0"
+        onKeyDown={this._onKeyDown}
+        onKeyPress={this.props.onKeyPress}
+        onKeyUp={this.props.onKeyUp}
+        onFocus={this._onFocus}
+        light={this.props.light}
+      >
+        {this._renderHiddenInput()}
+        {this.props.searchable ? (
+          <InputBox>
+            <InputIcon>
+              <this.props.inputIcon height="18px" />
+            </InputIcon>
+            <TypeaheadInput
+              ref={this.entry}
+              type="text"
+              disabled={this.props.disabled}
+              {...this.props.inputProps}
+              placeholder={this.props.placeholder}
+              className={inputClassList}
+              value={this.state.entryValue}
+              onChange={this._onChange}
+              onBlur={this._onBlur}
+              light={this.props.light}
+            />
+          </InputBox>
+        ) : null}
+        {this._renderIncrementalSearchResults()}
+      </TypeaheadWrapper>
+    );
+  }
+}
+
+polyfill(Typeahead);
+
+export default Typeahead;

package/src/components/common/line-chart.js

@@ -0,0 +1,134 @@
+// 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, {useMemo} from 'react';
+import {
+  HorizontalGridLines,
+  LineSeries,
+  XYPlot,
+  CustomSVGSeries,
+  Hint,
+  YAxis,
+  MarkSeries
+} from 'react-vis';
+import styled from 'styled-components';
+import {datetimeFormatter} from 'utils/data-utils';
+
+const LineChartWrapper = styled.div`
+  .rv-xy-plot {
+    /* important for rendering hint */
+    position: relative;
+  }
+  .rv-xy-plot__inner {
+    /* important to show axis */
+    overflow: visible;
+  }
+
+  .rv-xy-plot__grid-lines__line {
+    stroke: ${props => props.theme.histogramFillOutRange};
+    stroke-dasharray: 1px 4px;
+  }
+
+  .rv-xy-plot__axis__tick__text {
+    font-size: 9px;
+    fill: ${props => props.theme.textColor};
+  }
+`;
+
+const StyledHint = styled.div`
+  background-color: #d3d8e0;
+  border-radius: 2px;
+  color: ${props => props.theme.textColorLT};
+  font-size: 9px;
+  margin: 4px;
+  padding: 3px 6px;
+  pointer-events: none;
+  user-select: none;
+`;
+
+const HintContent = ({x, y, format}) => (
+  <StyledHint>
+    <div className="hint--x">{format(x)}</div>
+    <div className="row">{y}</div>
+  </StyledHint>
+);
+
+const MARGIN = {top: 0, bottom: 0, left: 0, right: 0};
+function LineChartFactory() {
+  const LineChart = ({
+    brushComponent,
+    brushing,
+    color,
+    enableChartHover,
+    height,
+    hoveredDP,
+    isEnlarged,
+    lineChart,
+    margin,
+    onMouseMove,
+    width,
+    timezone,
+    timeFormat
+  }) => {
+    const {series, yDomain} = lineChart;
+
+    const brushData = useMemo(() => {
+      return [{x: series[0].x, y: yDomain[1], customComponent: () => brushComponent}];
+    }, [series, yDomain, brushComponent]);
+    const hintFormatter = useMemo(() => datetimeFormatter(timezone)(timeFormat), [
+      timezone,
+      timeFormat
+    ]);
+
+    return (
+      <LineChartWrapper style={{marginTop: `${margin.top}px`}}>
+        <XYPlot
+          xType="time"
+          width={width}
+          height={height}
+          margin={MARGIN}
+          onMouseLeave={() => {
+            onMouseMove(null);
+          }}
+        >
+          <HorizontalGridLines tickTotal={3} />
+          <LineSeries
+            style={{fill: 'none'}}
+            strokeWidth={2}
+            color={color}
+            data={series}
+            onNearestX={enableChartHover ? onMouseMove : null}
+          />
+          <MarkSeries data={hoveredDP ? [hoveredDP] : []} color={color} size={3} />
+          <CustomSVGSeries data={brushData} />
+          {isEnlarged && <YAxis tickTotal={3} />}
+          {hoveredDP && enableChartHover && !brushing ? (
+            <Hint value={hoveredDP}>
+              <HintContent {...hoveredDP} format={hintFormatter} />
+            </Hint>
+          ) : null}
+        </XYPlot>
+      </LineChartWrapper>
+    );
+  };
+  return LineChart;
+}
+
+export default LineChartFactory;

package/src/components/common/loading-spinner.js

@@ -0,0 +1,64 @@
+// 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, {keyframes} from 'styled-components';
+
+const animationName = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+const Loader = styled.span`
+    border-left-color: ${props => props.color || props.theme.primaryBtnBgd};
+    animation: _preloader_spin_ 500ms linear infinite;
+    border-radius: 50%;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-right-color: transparent;
+    cursor: wait;
+    border-style: solid;
+    display: block;
+    animation-name: ${animationName};
+}`;
+
+const LoadingWrapper = styled.div`
+  border-radius: 50%;
+  border: 3px solid ${props => props.borderColor || props.theme.borderColorLT};
+  padding: 2px;
+`;
+
+const LoadingSpinner = ({size = 32, color = '', borderColor = '', strokeWidth = 3, gap = 2}) => (
+  <LoadingWrapper style={{width: `${size}px`, height: `${size}px`, padding: `${gap}px`}}>
+    <Loader
+      color={color}
+      style={{
+        width: `${size - strokeWidth * 2 - gap * 2}px`,
+        height: `${size - strokeWidth * 2 - gap * 2}px`
+      }}
+    />
+  </LoadingWrapper>
+);
+
+export default LoadingSpinner;