@carto/kepler.gl 0.0.81 → 0.0.82

package/src/layers/h3-hexagon-layer/h3-utils.js

@@ -1,65 +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 {h3GetResolution, h3IsValid, h3ToGeo, h3ToGeoBoundary} from 'h3-js';
-import {ALL_FIELD_TYPES} from 'constants/default-settings';
-import {notNullorUndefined} from 'utils/data-utils';
-
-export {h3GetResolution, h3IsValid};
-
-// get vertices should return [lon, lat]
-export function getVertices({id}) {
-  // always reverse it
-  return h3ToGeoBoundary(id, true);
-}
-
-// get centroid should return [lon, lat]
-export function getCentroid({id}) {
-  // always reverse it to [lng, lat]
-  return h3ToGeo(id).reverse();
-}
-
-export function idToPolygonGeo(object, properties) {
-  if (!object || !object.id) {
-    return null;
-  }
-
-  const vertices = getVertices(object);
-
-  return {
-    geometry: {
-      coordinates: vertices,
-      type: 'LineString'
-    },
-    properties
-  };
-}
-
-export const isHexField = (field, fieldIdx, dataContainer) => {
-  if (field.type !== ALL_FIELD_TYPES.string) {
-    return false;
-  }
-
-  const firstDP = dataContainer.find(d => notNullorUndefined(d.valueAt(fieldIdx)), true);
-  return firstDP && h3IsValid(firstDP.valueAt(fieldIdx));
-};
-
-export const getHexFields = (fields, dataContainer) =>
-  fields.filter((f, i) => isHexField(f, i, dataContainer));

package/src/layers/heatmap-layer/heatmap-layer.js

@@ -1,226 +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 {createSelector} from 'reselect';
-import memoize from 'lodash/memoize';
-import {CHANNEL_SCALES, SCALE_FUNC, ALL_FIELD_TYPES} from 'constants/default-settings';
-import {hexToRgb} from 'utils/color-utils';
-import MapboxGLLayer from '../mapboxgl-layer';
-import HeatmapLayerIcon from './heatmap-layer-icon';
-
-export const MAX_ZOOM_LEVEL = 18;
-
-export const pointPosAccessor = ({lat, lng}) => dc => d => [
-  dc.valueAt(d.index, lng.fieldIdx),
-  dc.valueAt(d.index, lat.fieldIdx)
-];
-
-export const pointColResolver = ({lat, lng}) => `${lat.fieldIdx}-${lng.fieldIdx}`;
-
-export const heatmapVisConfigs = {
-  opacity: 'opacity',
-  colorRange: 'colorRange',
-  radius: 'heatmapRadius'
-};
-
-/**
- *
- * @param {Object} colorRange
- * @return {Array} [
- *  0, "rgba(33,102,172,0)",
- *  0.2, "rgb(103,169,207)",
- *  0.4, "rgb(209,229,240)",
- *  0.6, "rgb(253,219,199)",
- *  0.8, "rgb(239,138,98)",
- *  1, "rgb(178,24,43)"
- * ]
- */
-const heatmapDensity = colorRange => {
-  const scaleFunction = SCALE_FUNC.quantize;
-
-  const colors = ['#000000', ...colorRange.colors];
-
-  const scale = scaleFunction()
-    .domain([0, 1])
-    .range(colors);
-
-  const colorDensity = scale.range().reduce((bands, level) => {
-    const invert = scale.invertExtent(level);
-    return [
-      ...bands,
-      invert[0], // first value in the range
-      `rgb(${hexToRgb(level).join(',')})` // color
-    ];
-  }, []);
-  colorDensity[1] = 'rgba(0,0,0,0)';
-  return colorDensity;
-};
-
-class HeatmapLayer extends MapboxGLLayer {
-  constructor(props) {
-    super(props);
-    this.registerVisConfig(heatmapVisConfigs);
-    this.getPosition = memoize(pointPosAccessor, pointColResolver);
-  }
-
-  get type() {
-    return 'heatmap';
-  }
-
-  get visualChannels() {
-    return {
-      weight: {
-        property: 'weight',
-        field: 'weightField',
-        scale: 'weightScale',
-        domain: 'weightDomain',
-        key: 'weight',
-        // supportedFieldTypes can be determined by channelScaleType
-        // or specified here
-        defaultMeasure: 'property.density',
-        supportedFieldTypes: [ALL_FIELD_TYPES.real, ALL_FIELD_TYPES.integer],
-        channelScaleType: CHANNEL_SCALES.size
-      }
-    };
-  }
-
-  get layerIcon() {
-    return HeatmapLayerIcon;
-  }
-
-  getVisualChannelDescription(channel) {
-    return channel === 'color'
-      ? {
-          label: 'property.color',
-          measure: 'property.density'
-        }
-      : {
-          label: 'property.weight',
-          measure: this.config.weightField ? this.config.weightField.name : 'property.density'
-        };
-  }
-
-  getDefaultLayerConfig(props = {}) {
-    // mapbox heatmap layer color is always based on density
-    // no need to set colorField, colorDomain and colorScale
-    /* eslint-disable no-unused-vars */
-    const {colorField, colorDomain, colorScale, ...layerConfig} = {
-      ...super.getDefaultLayerConfig(props),
-
-      weightField: null,
-      weightDomain: [0, 1],
-      weightScale: 'linear'
-    };
-    /* eslint-enable no-unused-vars */
-
-    return layerConfig;
-  }
-
-  getPositionAccessor(dataContainer) {
-    return this.getPosition(this.config.columns)(dataContainer);
-  }
-
-  updateLayerMeta(dataContainer) {
-    const getPosition = this.getPositionAccessor(dataContainer);
-    const bounds = this.getPointsBounds(dataContainer, getPosition);
-    this.updateMeta({bounds});
-  }
-
-  columnsSelector = config => pointColResolver(config.columns);
-  visConfigSelector = config => config.visConfig;
-  weightFieldSelector = config => (config.weightField ? config.weightField.name : null);
-  weightDomainSelector = config => config.weightDomain;
-
-  paintSelector = createSelector(
-    this.visConfigSelector,
-    this.weightFieldSelector,
-    this.weightDomainSelector,
-    (visConfig, weightField, weightDomain) => ({
-      'heatmap-weight': weightField
-        ? ['interpolate', ['linear'], ['get', weightField], weightDomain[0], 0, weightDomain[1], 1]
-        : 1,
-      'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, MAX_ZOOM_LEVEL, 3],
-      'heatmap-color': [
-        'interpolate',
-        ['linear'],
-        ['heatmap-density'],
-        ...heatmapDensity(visConfig.colorRange)
-      ],
-      'heatmap-radius': [
-        'interpolate',
-        ['linear'],
-        ['zoom'],
-        0,
-        2,
-        MAX_ZOOM_LEVEL,
-        visConfig.radius // radius
-      ],
-      'heatmap-opacity': visConfig.opacity
-    })
-  );
-
-  computeHeatmapConfiguration = createSelector(
-    this.sourceSelector,
-    this.filterSelector,
-    this.paintSelector,
-    (source, filter, paint) => {
-      return {
-        type: 'heatmap',
-        id: this.id,
-        source,
-        layout: {
-          visibility: 'visible'
-        },
-        maxzoom: MAX_ZOOM_LEVEL,
-        paint,
-        ...(this.isValidFilter(filter) ? {filter} : {})
-      };
-    }
-  );
-
-  getGeometry(position) {
-    return position.every(Number.isFinite)
-      ? {
-          type: 'Point',
-          coordinates: position
-        }
-      : null;
-  }
-
-  formatLayerData(datasets, oldLayerData) {
-    const {weightField} = this.config;
-    const {dataContainer} = datasets[this.config.dataId];
-    const getPosition = this.getPositionAccessor(dataContainer);
-    const {data} = this.updateData(datasets, oldLayerData);
-
-    const newConfig = this.computeHeatmapConfiguration(this.config, datasets);
-    newConfig.id = this.id;
-
-    return {
-      columns: this.config.columns,
-      config: newConfig,
-      data,
-      weightField,
-      getPosition
-    };
-  }
-}
-
-export default HeatmapLayer;

package/src/layers/hexagon-layer/hexagon-layer.js

@@ -1,95 +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 {GeoJsonLayer} from '@deck.gl/layers';
-import AggregationLayer from '../aggregation-layer';
-import EnhancedHexagonLayer from 'deckgl-layers/hexagon-layer/enhanced-hexagon-layer';
-import {hexagonToPolygonGeo} from './hexagon-utils';
-import HexagonLayerIcon from './hexagon-layer-icon';
-import {clamp} from 'utils/data-utils';
-
-export const hexagonVisConfigs = {
-  opacity: 'opacity',
-  worldUnitSize: 'worldUnitSize',
-  resolution: 'resolution',
-  colorRange: 'colorRange',
-  coverage: 'coverage',
-  sizeRange: 'elevationRange',
-  percentile: 'percentile',
-  elevationPercentile: 'elevationPercentile',
-  elevationScale: 'elevationScale',
-  enableElevationZoomFactor: 'enableElevationZoomFactor',
-  colorAggregation: 'aggregation',
-  sizeAggregation: 'sizeAggregation',
-  enable3d: 'enable3d'
-};
-
-export default class HexagonLayer extends AggregationLayer {
-  constructor(props) {
-    super(props);
-
-    this.registerVisConfig(hexagonVisConfigs);
-    this.visConfigSettings.worldUnitSize.label = 'columns.hexagon.worldUnitSize';
-  }
-
-  get type() {
-    return 'hexagon';
-  }
-
-  get name() {
-    return 'Hexbin';
-  }
-
-  get layerIcon() {
-    return HexagonLayerIcon;
-  }
-
-  renderLayer(opts) {
-    const {data, objectHovered, mapState} = opts;
-    const zoomFactor = this.getZoomFactor(mapState);
-    const {visConfig} = this.config;
-    const radius = visConfig.worldUnitSize * 1000;
-    const hoveredObject = this.hasHoveredObject(objectHovered);
-
-    return [
-      new EnhancedHexagonLayer({
-        ...this.getDefaultAggregationLayerProp(opts),
-        ...data,
-        wrapLongitude: false,
-        radius
-      }),
-
-      // render an outline of each hexagon if not extruded
-      ...(hoveredObject && !visConfig.enable3d
-        ? [
-            new GeoJsonLayer({
-              ...this.getDefaultHoverLayerProps(),
-              wrapLongitude: false,
-              data: [
-                hexagonToPolygonGeo(hoveredObject, {}, radius * visConfig.coverage, mapState)
-              ].filter(d => d),
-              getLineColor: this.config.highlightColor,
-              lineWidthScale: clamp([1, 100], radius * 0.1 * zoomFactor)
-            })
-          ]
-        : [])
-    ];
-  }
-}

package/src/layers/hexagon-layer/hexagon-utils.js

@@ -1,63 +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 {WebMercatorViewport} from '@deck.gl/core';
-import Console from 'global/console';
-
-export function hexagonToPolygonGeo(object, properties, radius, mapState) {
-  const viewport = new WebMercatorViewport(mapState);
-  if (!Array.isArray(object.position)) {
-    return null;
-  }
-
-  const screenCenter = viewport.projectFlat(object.position);
-  const {unitsPerMeter} = viewport.getDistanceScales(object.position);
-
-  if (!Array.isArray(unitsPerMeter)) {
-    Console.warn(`unitsPerMeter is undefined`);
-    return null;
-  }
-
-  const pixRadius = radius * unitsPerMeter[0];
-
-  const coordinates = [];
-
-  for (let i = 0; i < 6; i++) {
-    const vertex = hex_corner(screenCenter, pixRadius, i);
-    coordinates.push(viewport.unprojectFlat(vertex));
-  }
-
-  coordinates.push(coordinates[0]);
-
-  return {
-    geometry: {
-      coordinates,
-      type: 'LineString'
-    },
-    properties
-  };
-}
-
-function hex_corner(center, radius, i) {
-  const angle_deg = 60 * i + 30;
-  const angle_rad = (Math.PI / 180) * angle_deg;
-
-  return [center[0] + radius * Math.cos(angle_rad), center[1] + radius * Math.sin(angle_rad)];
-}

package/src/layers/icon-layer/icon-info-modal.js

@@ -1,155 +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';
-import {line} from 'd3-shape';
-import {Table, CenterFlexbox} from 'components/common/styled-components';
-import {FormattedMessage} from 'localization';
-
-const lineFunction = line()
-  .x(d => d[0] * 10)
-  .y(d => d[1] * 10);
-
-const IconShape = ({mesh}) => (
-  <svg width="20px" height="20px">
-    <g transform="translate(10, 10)">
-      {mesh.cells.map((cell, i) => (
-        <path key={i} fill="#000000" d={lineFunction(cell.map(idx => mesh.positions[idx]))} />
-      ))}
-    </g>
-  </svg>
-);
-
-const StyledIconItem = styled(CenterFlexbox)`
-  padding-left: 6px;
-  width: 180px;
-  height: 48px;
-  margin-right: 12px;
-
-  .icon-table_item__name {
-    margin-left: 12px;
-  }
-`;
-
-const StyledCode = styled.code`
-  color: ${props => props.theme.titleColorLT};
-`;
-
-const StyledTitle = styled.div`
-  font-size: 20px;
-  letter-spacing: 1.25px;
-  margin: 18px 0 14px 0;
-  color: ${props => props.theme.titleColorLT};
-`;
-
-const IconItem = ({icon: {id, mesh}}) => (
-  <StyledIconItem className="icon-table__item">
-    <IconShape className="icon-table__item__shape" mesh={mesh} />
-    <div className="icon-table_item__name">
-      <StyledCode>{id}</StyledCode>
-    </div>
-  </StyledIconItem>
-);
-
-const ExampleTable = () => (
-  <Table className="icon-example-table">
-    <thead>
-      <tr>
-        <th>point_lat</th>
-        <th>point_lng</th>
-        <th>icon</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>37.769897</td>
-        <td>-122.41168</td>
-        <td>
-          <StyledCode>android</StyledCode>
-        </td>
-      </tr>
-      <tr>
-        <td>37.806928</td>
-        <td>-122.40218</td>
-        <td />
-      </tr>
-      <tr>
-        <td>37.778564</td>
-        <td>-122.39096</td>
-        <td>
-          <StyledCode>calendar</StyledCode>
-        </td>
-      </tr>
-      <tr>
-        <td>37.745995</td>
-        <td>-122.30220</td>
-        <td />
-      </tr>
-      <tr>
-        <td>37.329841</td>
-        <td>-122.103847</td>
-        <td>
-          <StyledCode>control-off</StyledCode>
-        </td>
-      </tr>
-    </tbody>
-  </Table>
-);
-
-const IconTable = styled.div`
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-`;
-
-const IconInfoModalFactory = (svgIcons = []) => {
-  const IconInfoModal = () => (
-    <div className="icon-info-modal">
-      <div className="icon-info-modal__description">
-        <FormattedMessage id={'modal.iconInfo.description1'} />{' '}
-        <code>
-          <FormattedMessage id={'modal.iconInfo.code'} />
-        </code>
-        <FormattedMessage id={'modal.iconInfo.description2'} />
-      </div>
-      <div className="icon-info-modal__example">
-        <StyledTitle>
-          <FormattedMessage id={'modal.iconInfo.example'} />
-        </StyledTitle>
-        <ExampleTable />
-      </div>
-      <div className="icon-info-modal__icons">
-        <StyledTitle>
-          <FormattedMessage id={'modal.iconInfo.icons'} />
-        </StyledTitle>
-        <IconTable className="icon-info-modal__icons__table">
-          {svgIcons.map(icon => (
-            <IconItem key={icon.id} icon={icon} />
-          ))}
-        </IconTable>
-      </div>
-    </div>
-  );
-
-  return IconInfoModal;
-};
-
-export default IconInfoModalFactory;