@carto/kepler.gl 0.0.76 → 0.0.78-0

package/src/components/common/switch.tsx

@@ -0,0 +1,47 @@
+// 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, {ChangeEventHandler, FocusEventHandler, ReactNode} from 'react';
+import Checkbox from './checkbox';
+
+interface SwitchProps {
+  checked?: boolean;
+  disabled?: PropTypes.bool,
+  type?: string;
+  id: string;
+  label?: ReactNode;
+  error?: string;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  value?: string;
+  secondary?: boolean;
+}
+
+const Switch = (props: SwitchProps) => {
+  const switchProps = {
+    ...props,
+    switch: props.type !== 'checkbox'
+  };
+
+  return <Checkbox {...switchProps} />;
+};
+
+export default Switch;

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

@@ -0,0 +1,87 @@
+// 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';
+import {Minus} from 'components/common/icons';
+import {datetimeFormatter} from 'utils/data-utils';
+
+interface TimeValueWrapperProps {
+  isEnlarged?: boolean;
+}
+
+const TimeValueWrapper = styled.div<TimeValueWrapperProps>`
+  display: flex;
+  align-items: center;
+  font-size: ${props => props.theme.timeTitleFontSize};
+  justify-content: ${props => (props.isEnlarged ? 'center' : 'space-between')};
+
+  .horizontal-bar {
+    padding: 0 12px;
+    color: ${props => props.theme.textColor};
+  }
+
+  .time-value {
+    display: flex;
+    flex-direction: ${props => (props.isEnlarged ? 'row' : 'column')};
+    align-items: flex-start;
+    max-width: ${props => (!props.isEnlarged ? '40%' : 'auto')};
+    span {
+      color: ${props => props.theme.textColor};
+    }
+  }
+
+  .time-value:last-child {
+    align-items: flex-end;
+    text-align: right;
+  }
+`;
+
+const TimeValue = ({value}) => (
+  // render two lines if not enlarged
+  <div className="time-value">
+    <span>{value}</span>
+  </div>
+);
+
+interface TimeTitleProps {
+  value: number[];
+  isEnlarged?: boolean;
+  timezone?: string | null;
+  timeFormat: string;
+}
+
+function TimeRangeSliderTimeTitleFactory() {
+  const TimeTitle = ({value, isEnlarged, timezone, timeFormat}: TimeTitleProps) => (
+    <TimeValueWrapper isEnlarged={isEnlarged} className="time-range-slider__time-title">
+      <TimeValue key={0} value={datetimeFormatter(timezone)(timeFormat)(value[0])} />
+      {isEnlarged ? (
+        <div className="horizontal-bar">
+          <Minus height="12px" />
+        </div>
+      ) : null}
+      <TimeValue key={1} value={datetimeFormatter(timezone)(timeFormat)(value[1])} />
+    </TimeValueWrapper>
+  );
+
+  return TimeTitle;
+}
+
+export default TimeRangeSliderTimeTitleFactory;

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

@@ -0,0 +1,171 @@
+// 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 throttle from 'lodash.throttle';
+import styled from 'styled-components';
+
+import RangeSliderFactory from 'components/common/range-slider';
+import TimeSliderMarkerFactory from 'components/common/time-slider-marker';
+import PlaybackControlsFactory from 'components/common/animation-control/playback-controls';
+import TimeRangeSliderTimeTitleFactory from 'components/common/time-range-slider-time-title';
+import {HistogramBin, LineChart} from 'reducers';
+
+const animationControlWidth = 176;
+
+interface StyledSliderContainerProps {
+  isEnlarged?: boolean;
+}
+
+type TimeRangeSliderProps = {
+  domain?: [number, number];
+  value: [number, number];
+  isEnlarged?: boolean;
+  hideTimeTitle?: boolean;
+  isAnimating: boolean;
+  timeFormat: string;
+  timezone?: string | null;
+  histogram?: HistogramBin[];
+  plotType?: string;
+  lineChart?: LineChart;
+  step: number;
+  isAnimatable?: boolean;
+  speed: number;
+  animationWindow: string;
+  resetAnimation?: () => void;
+  toggleAnimation: () => void;
+  updateAnimationSpeed?: (val: number) => void;
+  setFilterAnimationWindow?: (id: string) => void;
+  onChange: (v: number[]) => void;
+};
+
+const StyledSliderContainer = styled.div<StyledSliderContainerProps>`
+  align-items: flex-end;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-left: ${props => (props.isEnlarged ? 24 : 0)}px;
+
+  .timeline-container .kg-slider {
+    display: none;
+  }
+
+  .playback-controls {
+    margin-left: 22px;
+  }
+`;
+
+TimeRangeSliderFactory.deps = [
+  PlaybackControlsFactory,
+  RangeSliderFactory,
+  TimeSliderMarkerFactory,
+  TimeRangeSliderTimeTitleFactory
+];
+
+export default function TimeRangeSliderFactory(
+  PlaybackControls: ReturnType<typeof PlaybackControlsFactory>,
+  RangeSlider: ReturnType<typeof RangeSliderFactory>,
+  TimeSliderMarker: ReturnType<typeof TimeSliderMarkerFactory>,
+  TimeRangeSliderTimeTitle: ReturnType<typeof TimeRangeSliderTimeTitleFactory>
+) {
+  const TimeRangeSlider: React.FC<TimeRangeSliderProps> = props => {
+    const {
+      domain,
+      value,
+      isEnlarged,
+      hideTimeTitle,
+      isAnimating,
+      resetAnimation,
+      timeFormat,
+      timezone,
+      histogram,
+      plotType,
+      lineChart,
+      step,
+      isAnimatable,
+      speed,
+      animationWindow,
+      updateAnimationSpeed,
+      setFilterAnimationWindow,
+      toggleAnimation,
+      onChange
+    } = props;
+    const throttledOnchange = useMemo(() => throttle(onChange, 20), [onChange]);
+    return (
+      <div className="time-range-slider">
+        {!hideTimeTitle ? (
+          <div
+            className="time-range-slider__title"
+            style={{
+              width: isEnlarged ? `calc(100% - ${animationControlWidth}px)` : '100%'
+            }}
+          >
+            <TimeRangeSliderTimeTitle
+              timeFormat={timeFormat}
+              timezone={timezone}
+              value={value}
+              isEnlarged={isEnlarged}
+            />
+          </div>
+        ) : null}
+        <StyledSliderContainer className="time-range-slider__container" isEnlarged={isEnlarged}>
+          <div
+            className="timeline-container"
+            style={{
+              width: isEnlarged ? `calc(100% - ${animationControlWidth}px)` : '100%'
+            }}
+          >
+            <RangeSlider
+              range={domain}
+              value0={value[0]}
+              value1={value[1]}
+              histogram={histogram}
+              lineChart={lineChart}
+              plotType={plotType}
+              isEnlarged={isEnlarged}
+              showInput={false}
+              step={step}
+              onChange={throttledOnchange}
+              xAxis={TimeSliderMarker}
+              timezone={timezone}
+              timeFormat={timeFormat}
+            />
+          </div>
+          {isEnlarged ? (
+            <PlaybackControls
+              isAnimatable={isAnimatable}
+              width={animationControlWidth}
+              speed={speed}
+              animationWindow={animationWindow}
+              updateAnimationSpeed={updateAnimationSpeed}
+              setFilterAnimationWindow={setFilterAnimationWindow}
+              pauseAnimation={toggleAnimation}
+              resetAnimation={resetAnimation}
+              isAnimating={isAnimating}
+              startAnimation={toggleAnimation}
+            />
+          ) : null}
+        </StyledSliderContainer>
+      </div>
+    );
+  };
+
+  return React.memo(TimeRangeSlider);
+}

package/src/components/common/time-slider-marker.tsx

@@ -0,0 +1,187 @@
+// 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, {useRef, useEffect, useMemo} from 'react';
+import moment from 'moment-timezone';
+import PropTypes from 'prop-types';
+import {NumberValue, scaleUtc} from 'd3-scale';
+import {select} from 'd3-selection';
+import {axisBottom} from 'd3-axis';
+import styled from 'styled-components';
+import {datetimeFormatter} from 'utils/data-utils';
+
+const MIN_TICK_WIDTH_LARGE = 80;
+const MIN_TICK_WIDTH_SMALL = 50;
+const HEIGHT = 30;
+
+const TimeSliderContainer = styled.svg`
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  overflow: visible;
+  margin-top: 6px;
+
+  .axis text {
+    font-size: ${props => props.theme.axisFontSize};
+    fill: ${props => props.theme.axisFontColor};
+  }
+
+  .axis line,
+  .axis path {
+    fill: none;
+    stroke: ${props => props.theme.sliderBarBgd};
+    shape-rendering: crispEdges;
+    stroke-width: 2;
+  }
+
+  .axis .domain {
+    display: none;
+  }
+
+  .value {
+    fill: ${props => props.theme.axisFontColor};
+    font-size: ${props => props.theme.axisFontSize};
+
+    &.start {
+      text-anchor: start;
+    }
+
+    &.end {
+      text-anchor: end;
+    }
+  }
+`;
+
+const TICK_FORMATS = {
+  millisecond: '.SSS',
+  second: ':ss',
+  minute: 'HH:ss',
+  hour: 'HH A',
+  day: 'ddd DD',
+  week: 'MMM DD',
+  month: 'MMM',
+  year: 'YYYY'
+};
+
+// timezone sensitive tick formatter based on moment
+// adapted based on d3 time scale tick format https://github.com/d3/d3-scale/blob/master/src/time.js#L59
+export function getTickFormat(timezone: string) {
+  // date is js date object
+  const toMoment = timezone ? date => moment(date).tz(timezone) : moment;
+  const formatter = datetimeFormatter(timezone);
+
+  return date =>
+    (toMoment(date).startOf('second') < date
+      ? formatter(TICK_FORMATS.millisecond)
+      : toMoment(date).startOf('minute') < date
+      ? formatter(TICK_FORMATS.second)
+      : toMoment(date).startOf('hour') < date
+      ? formatter(TICK_FORMATS.minute)
+      : toMoment(date).startOf('day') < date
+      ? formatter(TICK_FORMATS.hour)
+      : toMoment(date).startOf('month') < date
+      ? toMoment(date).startOf('isoWeek') < date
+        ? formatter(TICK_FORMATS.day)
+        : formatter(TICK_FORMATS.week)
+      : toMoment(date).startOf('year') < date
+      ? formatter(TICK_FORMATS.month)
+      : formatter(TICK_FORMATS.year))(date);
+}
+
+// create a helper function so we can test it
+export function getXAxis(
+  domain: Date[] | NumberValue[],
+  width: number,
+  isEnlarged: boolean,
+  timezone: string
+) {
+  if (!Array.isArray(domain) || !domain.every(Number.isFinite)) {
+    return null;
+  }
+  const scale = scaleUtc()
+    .domain(domain)
+    .range([0, width]);
+  if (!scale) {
+    return null;
+  }
+
+  const ticks = Math.floor(width / (isEnlarged ? MIN_TICK_WIDTH_LARGE : MIN_TICK_WIDTH_SMALL));
+  const tickFormat = timezone ? getTickFormat(timezone) : null;
+  const xAxis = axisBottom(scale)
+    .ticks(ticks)
+    .tickSize(0)
+    .tickPadding(12);
+  if (tickFormat) {
+    xAxis.tickFormat(tickFormat);
+  }
+
+  return xAxis;
+}
+
+export function updateAxis(xAxisRef, xAxis) {
+  if (!xAxis) {
+    return;
+  }
+
+  select(xAxisRef.current).call(xAxis);
+}
+
+interface TimeSliderMarkerProps {
+  width: number;
+  domain: Date[] | NumberValue[];
+  isEnlarged?: boolean;
+  height?: number;
+  timezone: string;
+}
+
+function TimeSliderMarkerFactory() {
+  const TimeSliderMarker = ({
+    width,
+    domain,
+    isEnlarged = true,
+    height = HEIGHT,
+    timezone
+  }: TimeSliderMarkerProps) => {
+    const xAxisRef = useRef(null);
+    const xAxis = useMemo(() => getXAxis(domain, width, isEnlarged, timezone), [
+      domain,
+      width,
+      isEnlarged,
+      timezone
+    ]);
+    useEffect(() => {
+      updateAxis(xAxisRef, xAxis);
+    }, [xAxisRef, xAxis]);
+    return (
+      <TimeSliderContainer className="time-slider-marker" width={width} height={height}>
+        <g className="x axis" ref={xAxisRef} transform="translate(0, 0)" />
+      </TimeSliderContainer>
+    );
+  };
+
+  TimeSliderMarker.propTypes = {
+    domain: PropTypes.arrayOf(PropTypes.any).isRequired,
+    width: PropTypes.number.isRequired
+  };
+
+  return React.memo(TimeSliderMarker);
+}
+
+export default TimeSliderMarkerFactory;

package/src/components/common/tippy-tooltip.tsx

@@ -0,0 +1,130 @@
+// 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 styled from 'styled-components';
+import React, {useState} from 'react';
+import Tippy, {TippyProps} from '@tippyjs/react';
+
+const TippyArrow = styled.div`
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  fill: ${props => props.theme.tooltipBg};
+  text-align: initial;
+
+  > svg {
+    position: absolute;
+  }
+`;
+
+const TippyTooltipContent = styled(({children, ...props}) => (
+  <div {...props}>
+    {children}
+    <TippyArrow className="svg-arrow" data-popper-arrow="">
+      <svg width={15} height={15}>
+        <path d="M2,7.5 7.5,2 13,7.5Z" />
+      </svg>
+    </TippyArrow>
+  </div>
+))`
+  font-family: ${props => props.theme.fontFamily};
+  font-size: ${props => props.theme.tooltipFontSize};
+  font-weight: 400;
+  padding: 7px 18px;
+  box-shadow: ${props => props.theme.tooltipBoxShadow};
+  background-color: ${props => props.theme.tooltipBg};
+  color: ${props => props.theme.tooltipColor};
+  border-radius: ${props => props.theme.primaryBtnRadius};
+  &[data-placement^='top'] > .svg-arrow {
+    bottom: 0;
+    &::after,
+    > svg {
+      top: 7px;
+      transform: rotate(180deg);
+    }
+  }
+
+  &[data-placement^='bottom'] > .svg-arrow {
+    top: 0;
+    > svg {
+      bottom: 7px;
+    }
+  }
+
+  &[data-placement^='left'] > .svg-arrow {
+    right: 0;
+    &::after,
+    > svg {
+      transform: rotate(90deg);
+      left: 7px;
+    }
+  }
+
+  &[data-placement^='right'] > .svg-arrow {
+    left: 0;
+    &::after,
+    > svg {
+      transform: rotate(-90deg);
+      right: 7px;
+    }
+  }
+`;
+
+const TippyTooltip = ({children, render, duration = 200, ...rest}: TippyProps) => {
+  const [opacity, setOpacity] = useState(0);
+  const [timer, setTimer] = useState(null);
+  function onMount() {
+    setOpacity(1);
+    if (timer) {
+      // @ts-ignore
+      clearTimeout(timer);
+    }
+  }
+
+  function onHide(instance) {
+    const {unmount} = instance;
+    const timeout = setTimeout(() => {
+      if (!instance.state?.isDestroyed) {
+        unmount();
+      }
+    }, duration[0] || duration);
+    // @ts-ignore
+    setTimer(timeout);
+    setOpacity(0);
+  }
+
+  return (
+    <Tippy
+      {...rest}
+      animation={true}
+      render={attrs => (
+        <TippyTooltipContent {...attrs} style={{opacity, transition: `opacity ${duration}ms`}}>
+          {render?.(attrs)}
+        </TippyTooltipContent>
+      )}
+      onMount={onMount}
+      onHide={onHide}
+    >
+      {children}
+    </Tippy>
+  );
+};
+
+export default TippyTooltip;