@carto/kepler.gl 0.0.77 → 0.0.78-0

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

@@ -0,0 +1,533 @@
+// 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, ElementType, KeyboardEventHandler} from 'react';
+import {polyfill} from 'react-lifecycles-compat';
+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.
+ */
+
+interface TypeaheadWrapperProps {
+  light?: boolean;
+}
+
+const TypeaheadWrapper = styled.div<TypeaheadWrapperProps>`
+  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<TypeaheadWrapperProps>`
+  ${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: TypeaheadProps) {
+  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;
+}
+
+interface TypeaheadProps {
+  name?: string;
+  customClasses?: any;
+  maxVisible?: number;
+  resultsTruncatedMessage?: string;
+  options?: ReadonlyArray<string | number | boolean | object>;
+  fixedOptions?: ReadonlyArray<string | number | boolean | object> | null;
+  allowCustomValues?: number;
+  initialValue?: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  textarea?: boolean;
+  inputProps?: object;
+  onOptionSelected?: (option: any, event: any) => any;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+  onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
+  onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  filterOption?: string | Function;
+  searchOptions?: Function;
+  displayOption?: string | Function;
+  inputDisplayOption?: string | Function;
+  formInputOption?: string | Function;
+  defaultClassNames?: boolean;
+  customListComponent?: ElementType;
+  customListItemComponent?: ElementType | Function;
+  customListHeaderComponent?: ElementType | Function | null;
+  showOptionsWhenEmpty?: boolean;
+  searchable?: boolean;
+  light?: boolean;
+  inputIcon: ElementType;
+  className?: string;
+  selectedItems?: any[] | null;
+  withSubOptions?: boolean;
+};
+
+interface TypeaheadState {
+  /** @type {ReadonlyArray<string>} */
+  searchResults: (string | undefined)[];
+
+  // This should be called something else, 'entryValue'
+  entryValue?: string;
+
+  // A valid typeahead value
+  selection?: string;
+
+  // 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: boolean;
+}
+
+class Typeahead extends Component<TypeaheadProps, TypeaheadState> {
+  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<HTMLDivElement>();
+  entry = createRef<HTMLInputElement>();
+
+  focus = () => {
+    if (this.entry.current) {
+      this.entry.current.focus();
+    }
+  };
+
+  _hasCustomValue = () => {
+    return (
+      Number(this.props.allowCustomValues) > 0 &&
+      Number(this.state.entryValue?.length) >= Number(this.props.allowCustomValues) &&
+      this.state.searchResults.indexOf(this.state.entryValue) < 0
+    );
+  };
+
+  _getCustomValue = () => {
+    return this._hasCustomValue() ? this.state.entryValue : null;
+  };
+
+  _renderIncrementalSearchResults() {
+    const {customListComponent: CustomListComponent = DropdownList} = this.props;
+    return (
+      <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 = Number(this.state.selectionIndex);
+
+    if (this._hasCustomValue()) {
+      if (index === 0) {
+        return this.state.entryValue;
+      }
+      index--;
+    }
+    if (this._hasFixedOptions()) {
+      return index < Number(this.props.fixedOptions?.length)
+        ? this.props.fixedOptions?.[index]
+        : this.state.searchResults[index - Number(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 = () => {
+    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: React.ChangeEventHandler<HTMLInputElement> = event => {
+    if (this.props.onChange) {
+      this.props.onChange(event);
+    }
+
+    this._onTextEntryUpdated();
+  };
+
+  _onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = 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: React.FocusEventHandler<HTMLDivElement> = event => {
+    this.setState({isFocused: true});
+    if (this.props.onFocus) {
+      return this.props.onFocus(event);
+    }
+  };
+
+  _onBlur: React.FocusEventHandler<HTMLInputElement> = 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 ? 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.tsx

@@ -0,0 +1,170 @@
+// 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,
+  LineSeriesPoint,
+  RVNearestXData
+} from 'react-vis';
+import {LineChart} from 'reducers';
+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;
+`;
+
+interface HintContentProps {
+  x: number;
+  y: number;
+  format: (ts: number) => string;
+}
+
+const HintContent = ({x, y, format}: HintContentProps) => (
+  <StyledHint>
+    <div className="hint--x">{format(x)}</div>
+    <div className="row">{y}</div>
+  </StyledHint>
+);
+
+export interface HoverDP {
+  x: number;
+  y: number;
+  color?: string | number;
+  opacity?: string | number;
+  stroke?: string | number;
+  fill?: string | number;
+  size?: string | number;
+}
+
+interface LineChartProps {
+  brushComponent?: any;
+  brushing?: boolean;
+  color?: string;
+  enableChartHover?: boolean;
+  height: number;
+  hoveredDP?: HoverDP | null;
+  isEnlarged?: boolean;
+  lineChart?: LineChart;
+  margin: {top?: number; bottom?: number; left?: number; right?: number};
+  onMouseMove: (datapoint: LineSeriesPoint | null, data?: RVNearestXData<LineSeriesPoint>) => void;
+  width: number;
+  timezone?: string | null;
+  timeFormat?: string;
+}
+
+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
+  }: LineChartProps) => {
+    const {series, yDomain} = lineChart || {};
+
+    const brushData = useMemo(() => {
+      return series && series[0] && series[0].x && yDomain && yDomain[1]
+        ? [{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'}}
+            color={color}
+            data={series}
+            onNearestX={enableChartHover ? onMouseMove : undefined}
+          />
+          <MarkSeries data={hoveredDP ? [hoveredDP] : []} color={color} />
+          <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;