@carto/kepler.gl 0.0.80 → 0.1.0-alpha.0

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

@@ -1,198 +0,0 @@
-// 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 PropTypes from 'prop-types';
-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';
-import {isObject} from 'utils/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
-  };
-};
-
-export default class ColorLegend extends Component {
-  static propTypes = {
-    width: PropTypes.number.isRequired,
-    scaleType: PropTypes.string,
-    domain: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-    fieldType: PropTypes.string,
-    range: PropTypes.object,
-    labelFormat: PropTypes.func
-  };
-
-  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 (isObject(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.js

@@ -1,47 +0,0 @@
-// 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';
-
-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;
-  }
-`;
-const noop = () => {};
-const Button = ({onClick = noop, disabled = false, text = '', children, ...props}) => (
-  <StyledButton {...props} onClick={disabled ? null : onClick}>
-    {text || children}
-  </StyledButton>
-);
-
-export default Button;

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

@@ -1,180 +0,0 @@
-// 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 = [], unpinnedColumns = []) {
-  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, columnOrder, containerWidth, roomToFill) {
-  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 = 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,
-  cellSizeCache,
-  pinnedColumns,
-  unpinnedColumns
-) {
-  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.js

@@ -1,55 +0,0 @@
-// 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} from 'react-virtualized';
-import isEqual from 'lodash/isEqual';
-
-export default class GridHack extends PureComponent {
-  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}
-      />
-    );
-  }
-}