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

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

@@ -0,0 +1,198 @@
+// 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

@@ -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 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/canvas.js

@@ -0,0 +1,43 @@
+// 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';
+
+/*
+    ScrollSync works by getting a callback about the dom elements scroll amount
+    and then using that to pass into how much to scroll all child components,
+    it works great!
+
+    Except... Because scrolling is managed by a separate thread, and JavaScript
+    is only periodically notified of the updated position, there's some latency
+    issues with this.
+
+    We can hack around this by using a niche property of canvas that removes the
+    delay in scroll event firing! Easiest way to reproduce: enable "Trace React updates"
+    in React DevTools (it works by overlaying a viewport-wide canvas over the document).
+  */
+export default styled.canvas`
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+`;

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

@@ -0,0 +1,180 @@
+// 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

@@ -0,0 +1,55 @@
+// 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}
+      />
+    );
+  }
+}