@carto/kepler.gl 0.0.81 → 0.0.82

package/src/components/common/checkbox.tsx

@@ -0,0 +1,137 @@
+// 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, Component, FocusEventHandler, ReactNode} from 'react';
+import styled from 'styled-components';
+import pick from 'lodash.pick';
+import classnames from 'classnames';
+
+function noop() {}
+
+interface StyledSwitchInputProps {
+  secondary?: boolean;
+}
+
+const StyledSwitchInput = styled.label<StyledSwitchInputProps>`
+  ${props => (props.secondary ? props.theme.secondarySwitch : props.theme.inputSwitch)};
+`;
+
+const StyledCheckboxInput = styled.label`
+  ${props => props.theme.inputCheckbox};
+`;
+
+const StyledRadiuInput = styled.label`
+  ${props => props.theme.inputRadio};
+`;
+
+const HiddenInput = styled.input`
+  position: absolute;
+  display: none;
+`;
+
+interface StyledCheckboxProps {
+  type?: string;
+}
+
+const StyledCheckbox = styled.div<StyledCheckboxProps>`
+  display: flex;
+  min-height: ${props => props.theme.switchHeight}px;
+  margin-left: ${props => (props.type === 'radio' ? 0 : props.theme.switchLabelMargin)}px;
+`;
+
+interface CheckboxProps {
+  id: string;
+  type?: string;
+  label?: ReactNode;
+  className?: string;
+  value?: string | 'indeterminate';
+  checked?: boolean;
+  disabled?: boolean;
+
+  error?: string;
+  switch?: boolean;
+  activeColor?: string;
+  secondary?: boolean;
+  onBlur: FocusEventHandler<HTMLInputElement>;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onFocus: FocusEventHandler<HTMLInputElement>;
+}
+
+export default class Checkbox extends Component<CheckboxProps> {
+  static defaultProps = {
+    disabled: false,
+    checked: false,
+    onBlur: noop,
+    onChange: noop,
+    onFocus: noop,
+    label: ''
+  };
+
+  state = {
+    focused: false
+  };
+
+  handleFocus: FocusEventHandler<HTMLInputElement> = args => {
+    this.setState({focused: true});
+    this.props.onFocus(args);
+  };
+
+  handleBlur: FocusEventHandler<HTMLInputElement> = args => {
+    this.setState({focused: false});
+    this.props.onBlur(args);
+  };
+
+  render() {
+    const inputProps = {
+      ...pick(this.props, ['checked', 'disabled', 'id', 'onChange', 'value']),
+      type: 'checkbox',
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    };
+
+    const labelProps = {
+      ...pick(this.props, ['checked', 'disabled', 'secondary']),
+      htmlFor: this.props.id
+    };
+
+    const LabelElement =
+      this.props.type === 'checkbox'
+        ? StyledCheckboxInput
+        : this.props.type === 'radio'
+        ? StyledRadiuInput
+        : StyledSwitchInput;
+
+    return (
+      <StyledCheckbox
+        type={this.props.type}
+        className={classnames(
+          'kg-checkbox',
+          this.props.className,
+          `kg-checkbox--${this.props.type || 'switch'}`
+        )}
+      >
+        <HiddenInput {...inputProps} />
+        <LabelElement className="kg-checkbox__label" {...labelProps}>
+          {this.props.label}
+        </LabelElement>
+      </StyledCheckbox>
+    );
+  }
+}

package/src/components/common/color-legend.tsx

@@ -0,0 +1,203 @@
+// 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} from 'react';
+import styled from 'styled-components';
+import {createSelector} from 'reselect';
+import {format} from 'd3-format';
+import moment from 'moment';
+import {SCALE_TYPES, SCALE_FUNC, ALL_FIELD_TYPES} from 'constants/default-settings';
+import {getTimeWidgetHintFormatter} from 'utils/filter-utils';
+
+const ROW_H = 10;
+const GAP = 4;
+const RECT_W = 20;
+
+const StyledLegend = styled.div`
+  ${props => props.theme.sidePanelScrollBar};
+
+  max-height: 150px;
+  overflow-y: auto;
+
+  svg {
+    text {
+      font-size: 9px;
+      fill: ${props => props.theme.textColor};
+    }
+  }
+`;
+
+const defaultFormat = d => d;
+
+const getTimeLabelFormat = domain => {
+  const formatter = getTimeWidgetHintFormatter(domain);
+  return val => moment.utc(val).format(formatter);
+};
+
+const getNumericLabelFormat = domain => {
+  const diff = domain[1] - domain[0];
+
+  if (diff < 10) {
+    return format('.2f');
+  }
+
+  return format('.1f');
+};
+
+const getQuantLabelFormat = (domain, fieldType) => {
+  // quant scale can only be assigned to linear Fields: real, timestamp, integer
+  return fieldType === ALL_FIELD_TYPES.timestamp
+    ? getTimeLabelFormat(domain)
+    : !fieldType
+    ? defaultFormat
+    : getNumericLabelFormat(domain);
+};
+
+const getOrdinalLegends = scale => {
+  const domain = scale.domain();
+  return {
+    data: domain.map(scale),
+    labels: domain
+  };
+};
+
+const getQuantLegends = (scale, labelFormat) => {
+  if (typeof scale.invertExtent !== 'function') {
+    // only quantile, quantize, threshold scale has invertExtent method
+    return {
+      data: [],
+      labels: []
+    };
+  }
+
+  const labels = scale.range().map(d => {
+    const invert = scale.invertExtent(d);
+    return `${labelFormat(invert[0])} to ${labelFormat(invert[1])}`;
+  });
+
+  return {
+    data: scale.range(),
+    labels
+  };
+};
+
+type RangeType = {
+  colorMap?: [string, string][];
+  colorLegends?: {[key: string]: string};
+  colors: string[];
+};
+
+interface ColorLegendProps {
+  width: number;
+  scaleType?: string;
+  domain?: any[] | object;
+  fieldType?: string | null;
+  range?: RangeType;
+  labelFormat?: Function;
+  displayLabel?: boolean;
+}
+
+export default class ColorLegend extends Component<ColorLegendProps> {
+  domainSelector = props => props.domain;
+  rangeSelector = props => props.range;
+  labelFormatSelector = props => props.labelFormat;
+  scaleTypeSelector = props => props.scaleType;
+  fieldTypeSelector = props => props.fieldType;
+
+  legendsSelector = createSelector(
+    this.domainSelector,
+    this.rangeSelector,
+    this.scaleTypeSelector,
+    this.labelFormatSelector,
+    this.fieldTypeSelector,
+    (domain, range, scaleType, labelFormat, fieldType) => {
+      const empty = {
+        data: [],
+        labels: []
+      };
+      if (!range) {
+        return empty;
+      }
+      if (range.colorLegends) {
+        return {
+          data: Object.keys(range.colorLegends),
+          labels: Object.values(range.colorLegends)
+        };
+      } else if (Array.isArray(range.colorMap)) {
+        return {
+          data: range.colorMap.map(cm => cm[1]),
+          labels: range.colorMap.map(cm => cm[0])
+        };
+      } else if (Array.isArray(range.colors)) {
+        if (!domain || !scaleType) {
+          return empty;
+        }
+
+        const scaleFunction = SCALE_FUNC[scaleType];
+        // color scale can only be quantize, quantile or ordinal
+        // @ts-ignore fix d3 scale
+        const scale = scaleFunction()
+          .domain(domain)
+          .range(range.colors);
+
+        if (scaleType === SCALE_TYPES.ordinal) {
+          return getOrdinalLegends(scale);
+        }
+
+        const formatLabel = labelFormat || getQuantLabelFormat(scale.domain(), fieldType);
+
+        return getQuantLegends(scale, formatLabel);
+      }
+      return empty;
+    }
+  );
+
+  render() {
+    const {width, displayLabel = true} = this.props;
+
+    const legends = this.legendsSelector(this.props);
+    const height = legends.data.length * (ROW_H + GAP);
+
+    return (
+      <StyledLegend>
+        <svg width={width} height={height}>
+          {legends.data.map((color, idx) => (
+            <LegendRow
+              key={idx}
+              label={legends.labels[idx]}
+              displayLabel={displayLabel}
+              color={color}
+              idx={idx}
+            />
+          ))}
+        </svg>
+      </StyledLegend>
+    );
+  }
+}
+
+export const LegendRow = ({label = '', displayLabel, color, idx}) => (
+  <g transform={`translate(0, ${idx * (ROW_H + GAP)})`}>
+    <rect width={RECT_W} height={ROW_H} style={{fill: color}} />
+    <text x={RECT_W + 8} y={ROW_H - 1}>
+      {displayLabel ? label.toString() : ''}
+    </text>
+  </g>
+);

package/src/components/common/data-table/button.tsx

@@ -0,0 +1,54 @@
+// 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, {MouseEventHandler} from 'react';
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  color: ${props => props.theme.optionButtonColor};
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  transition: ${props => props.theme.transition};
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  padding: 0;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+type ButtonProps = {
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+  text?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const noop = () => {};
+const Button = ({onClick = noop, disabled = false, text = '', children, ...props}: ButtonProps) => (
+  <StyledButton {...props} onClick={disabled ? undefined : onClick}>
+    {text || children}
+  </StyledButton>
+);
+
+export default Button;

package/src/components/common/data-table/cell-size.ts

@@ -0,0 +1,185 @@
+// 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 document from 'global/document';
+import {parseFieldValue} from 'utils/data-utils';
+
+const MIN_GHOST_CELL_SIZE = 200;
+
+/**
+ * Measure rows and column content to determine min width for each column
+ * @param {*} param0
+ */
+export function renderedSize({
+  text: {dataContainer, column},
+  type = 'string',
+  colIdx,
+  numRowsToCalculate = 10,
+  fontSize = 12,
+  font = 'Lato',
+  cellPadding = 40,
+  maxCellSize = 400,
+  maxHeaderSize = 150,
+  minCellSize = 45,
+  optionsButton = 30
+}) {
+  if (!document) {
+    return {
+      row: 0,
+      header: 0
+    };
+  }
+  const textCanvas = document.createElement('canvas');
+  document.body.appendChild(textCanvas);
+  const context = textCanvas.getContext('2d');
+  context.font = [fontSize, font].join('px ');
+
+  let rowsToSample = [...Array(numRowsToCalculate)].map(() =>
+    Math.floor(Math.random() * (dataContainer.numRows() - 1))
+  );
+
+  // If we have less than 10 rows, lets measure all of them
+  if (dataContainer.numRows() <= numRowsToCalculate) {
+    rowsToSample = Array.from(Array(dataContainer.numRows()).keys());
+  }
+  const rowWidth = Math.max(
+    ...rowsToSample.map(
+      rowIdx =>
+        Math.ceil(
+          context.measureText(parseFieldValue(dataContainer.valueAt(rowIdx, colIdx), type)).width
+        ) + cellPadding
+    )
+  );
+  // header cell only has left padding
+  const headerWidth =
+    Math.ceil(context.measureText(column).width) + cellPadding / 2 + optionsButton;
+
+  const minRowWidth = minCellSize + cellPadding;
+  const minHeaderWidth = minCellSize + cellPadding / 2 + optionsButton;
+
+  const clampedRowWidth = clamp(minRowWidth, maxCellSize, rowWidth);
+  const clampedHeaderWidth = clamp(minHeaderWidth, maxHeaderSize, headerWidth);
+
+  // cleanup
+  textCanvas.parentElement.removeChild(textCanvas);
+
+  return {
+    row: clampedRowWidth,
+    header: clampedHeaderWidth
+  };
+}
+
+function clamp(min, max, value) {
+  return Math.max(Math.min(max, value), min);
+}
+
+function getColumnOrder(pinnedColumns: string[] = [], unpinnedColumns: string[] = []) {
+  return [...pinnedColumns, ...unpinnedColumns];
+}
+
+function getMinCellSize(cellSizeCache) {
+  return Object.keys(cellSizeCache).reduce(
+    (accu, col) => ({
+      ...accu,
+      [col]: cellSizeCache[col].row
+    }),
+    {}
+  );
+}
+
+function getSizeSum(sizeCache, key) {
+  return Object.keys(sizeCache).reduce(
+    (acc, val) => acc + (key ? sizeCache[val][key] : sizeCache[val]),
+    0
+  );
+}
+
+/**
+ * Expand cell to fit both row and header, if there is still room left,
+ * expand last cell to fit the entire width of the container
+ * @param {object} cellSizeCache
+ * @param {string[]} columnOrder
+ * @param {number} containerWidth
+ * @param {number} roomToFill
+ */
+function expandCellSize(
+  cellSizeCache: object,
+  columnOrder: string[],
+  containerWidth: number,
+  roomToFill: number
+) {
+  let remaining = roomToFill;
+
+  const expandedCellSize = columnOrder.reduce((accu, col) => {
+    let size = cellSizeCache[col].row;
+    if (cellSizeCache[col].row < cellSizeCache[col].header && remaining > 0) {
+      // if we are cutting off the header, expand to fit it
+      size =
+        cellSizeCache[col].header - cellSizeCache[col].row < remaining
+          ? cellSizeCache[col].header
+          : cellSizeCache[col].row + remaining;
+      remaining -= size - cellSizeCache[col].row;
+    }
+
+    return {
+      ...accu,
+      [col]: size
+    };
+  }, {});
+
+  let ghost: number | null = null;
+  if (remaining > 0 && remaining < MIN_GHOST_CELL_SIZE) {
+    // expand last cell
+    const lastCell = columnOrder[columnOrder.length - 1];
+    expandedCellSize[lastCell] += remaining;
+  } else if (remaining >= MIN_GHOST_CELL_SIZE) {
+    // if too much left add a ghost cell
+    ghost = remaining;
+  }
+
+  return {
+    cellSizeCache: expandedCellSize,
+    ghost
+  };
+}
+
+/**
+ * Adjust cell size based on container width
+ * @param {number} containerWidth
+ * @param {Object} cellSizeCache
+ * @param {string[]} pinnedColumns
+ * @param {string[]} unpinnedColumns
+ */
+export function adjustCellsToContainer(
+  containerWidth: number,
+  cellSizeCache: object,
+  pinnedColumns: string[],
+  unpinnedColumns: string[]
+) {
+  const minRowSum = getSizeSum(cellSizeCache, 'row');
+  if (minRowSum >= containerWidth) {
+    // we apply the min Width to all cells
+    return {cellSizeCache: getMinCellSize(cellSizeCache)};
+  }
+
+  // if we have some room to expand
+  const columnOrder = getColumnOrder(pinnedColumns, unpinnedColumns);
+  return expandCellSize(cellSizeCache, columnOrder, containerWidth, containerWidth - minRowSum);
+}

package/src/components/common/data-table/grid.tsx

@@ -0,0 +1,57 @@
+// 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, {PureComponent} from 'react';
+import {Grid, GridProps} from 'react-virtualized';
+import isEqual from 'lodash.isequal';
+
+export default class GridHack extends PureComponent<GridProps> {
+  grid: Grid | null = null;
+
+  componentDidUpdate(preProps) {
+    /*
+     * This hack exists because in react-virtualized the
+     * _columnWidthGetter is only called in the constructor
+     * even though it is reassigned with new props resulting in
+     * a new width for cells not being calculated so we must
+     * force trigger a resize.
+     *
+     * https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/Grid.js#L322
+     *
+     */
+    if (!isEqual(preProps.cellSizeCache, this.props.cellSizeCache)) {
+      this.grid?.recomputeGridSize();
+    }
+  }
+
+  render() {
+    const {setGridRef, ...rest} = this.props;
+    return (
+      <Grid
+        ref={x => {
+          if (setGridRef) setGridRef(x);
+          this.grid = x;
+        }}
+        key="grid-hack"
+        {...rest}
+      />
+    );
+  }
+}