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

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

@@ -0,0 +1,76 @@
+// 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';
+
+const TimeValueWrapper = styled.div`
+  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>
+);
+
+function TimeRangeSliderTimeTitleFactory() {
+  const TimeTitle = ({value, isEnlarged, timezone, timeFormat}) => (
+    <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.js

@@ -0,0 +1,163 @@
+// 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 PropTypes from 'prop-types';
+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';
+
+const animationControlWidth = 176;
+
+const StyledSliderContainer = styled.div`
+  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,
+  RangeSlider,
+  TimeSliderMarker,
+  TimeRangeSliderTimeTitle
+) {
+  const TimeRangeSlider = 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>
+    );
+  };
+
+  TimeRangeSlider.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    domain: PropTypes.arrayOf(PropTypes.number),
+    value: PropTypes.arrayOf(PropTypes.number).isRequired,
+    step: PropTypes.number.isRequired,
+    plotType: PropTypes.string,
+    histogram: PropTypes.arrayOf(PropTypes.any),
+    lineChart: PropTypes.object,
+    toggleAnimation: PropTypes.func.isRequired,
+    exportAnimation: PropTypes.func,
+    isAnimatable: PropTypes.bool,
+    isEnlarged: PropTypes.bool,
+    speed: PropTypes.number,
+    timeFormat: PropTypes.string,
+    timezone: PropTypes.string,
+    hideTimeTitle: PropTypes.bool
+  };
+
+  return React.memo(TimeRangeSlider);
+}

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

@@ -0,0 +1,168 @@
+// 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 {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) {
+  // 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, width, isEnlarged, timezone) {
+  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);
+}
+
+function TimeSliderMarkerFactory() {
+  const TimeSliderMarker = ({width, domain, isEnlarged = true, height = HEIGHT, timezone}) => {
+    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/toolbar-item.d.ts

@@ -0,0 +1,14 @@
+import {ComponentType, FunctionComponent, MouseEvent} from 'react';
+
+export type ToolbarItemProps = {
+  id?: string,
+  label: string,
+  className?: string,
+  active?: boolean,
+  onClose?: () => void,
+  onClick: (event: MouseEvent<HTMLDivElement>) => void,
+  icon?: ComponentType<any>
+};
+
+export const ToolbarItem: FunctionComponent<ToolbarItemProps>;
+export default ToolbarItem;

package/src/components/common/toolbar-item.js

@@ -0,0 +1,83 @@
+// 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 {FormattedMessage} from 'localization';
+
+const StyledDiv = styled.div.attrs({
+  className: 'toolbar-item'
+})`
+  color: ${props =>
+    props.active ? props.theme.toolbarItemIconHover : props.theme.panelHeaderIcon};
+  padding: 12px 20px;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 110px;
+  justify-content: space-between;
+  border: 1px solid ${props => (props.active ? props.theme.toolbarItemBorderHover : 'transparent')};
+  border-radius: ${props => props.theme.toolbarItemBorderRaddius};
+  background-color: ${props =>
+    props.active ? props.theme.toolbarItemBgdHover : props.theme.dropdownListBgd};
+
+  svg {
+    margin-bottom: 4px;
+  }
+  .toolbar-item__title {
+    white-space: nowrap;
+    color: ${props => props.theme.textColorHl};
+  }
+
+  :hover {
+    background-color: ${props => props.theme.toolbarItemBgdHover};
+    border-color: ${props => props.theme.toolbarItemBorderHover};
+    svg {
+      color: ${props => props.theme.toolbarItemIconHover};
+    }
+    cursor: pointer;
+  }
+`;
+
+/** @type {typeof import('./toolbar-item').ToolbarItem} */
+const ToolbarItem = React.memo(props => (
+  <StyledDiv
+    id={props.id}
+    className={props.className}
+    active={props.active}
+    onClick={e => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (typeof props.onClose === 'function') {
+        props.onClose();
+      }
+      props.onClick(e);
+    }}
+  >
+    {props.icon && <props.icon />}
+    <div className="toolbar-item__title">
+      <FormattedMessage id={props.label} />
+    </div>
+  </StyledDiv>
+));
+
+ToolbarItem.displayName = 'ToolbarItem';
+
+export default ToolbarItem;

package/src/components/common/toolbar.js

@@ -0,0 +1,45 @@
+// 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';
+
+const Toolbar = styled.div`
+  display: flex;
+  flex-direction: row;
+  background-color: ${props => props.theme.dropdownListBgd};
+  box-shadow: ${props => props.theme.dropdownListShadow};
+  font-size: 12px;
+  transition: ${props => props.theme.transitionSlow};
+  margin-top: ${props => (props.show ? '6px' : '20px')};
+  opacity: ${props => (props.show ? 1 : 0)};
+  transform: translateX(calc(-50% + 20px));
+  pointer-events: ${props => (props.show ? 'all' : 'none')};
+  z-index: 1000;
+
+  .panel-header-dropdown__inner {
+    box-shadow: none;
+    background-color: transparent;
+    display: flex;
+  }
+`;
+
+Toolbar.displayName = 'Toolbar';
+
+export default Toolbar;

package/src/components/common/vertical-toolbar.js

@@ -0,0 +1,35 @@
+// 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 Toolbar from './toolbar';
+
+const VerticalToolbar = styled(Toolbar)`
+  flex-direction: column;
+
+  .toolbar-item {
+    width: 78px;
+    padding: 13px 16px;
+  }
+`;
+
+VerticalToolbar.displayName = 'VerticalToolbar';
+
+export default VerticalToolbar;