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

package/src/layers/layer-factory.js

@@ -0,0 +1,480 @@
+// 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 keyMirror from 'keymirror';
+
+import {AGGREGATION_TYPES} from 'constants/default-settings';
+import {DEFAULT_COLOR_RANGE} from 'constants/color-ranges';
+
+export const PROPERTY_GROUPS = keyMirror({
+  color: null,
+  stroke: null,
+  customMarkers: null,
+  radius: null,
+  height: null,
+  angle: null,
+  // for heatmap aggregation
+  cell: null,
+  precision: null
+});
+
+export const DEFAULT_LAYER_OPACITY = 0.8;
+export const DEFAULT_HIGHLIGHT_COLOR = [252, 242, 26, 255];
+export const DEFAULT_LAYER_LABEL = 'new layer';
+export {DEFAULT_COLOR_RANGE};
+
+/** @type {import('./layer-factory').LayerTextLabel} */
+export const DEFAULT_TEXT_LABEL = {
+  field: null,
+  color: [44, 48, 50],
+  outlineColor: [255, 255, 255],
+  size: 12,
+  offset: [0, 0],
+  anchor: 'start',
+  alignment: 'center'
+};
+
+/** @type {import('./layer-factory').LayerTextLabel} */
+export const DEFAULT_SECONDARY_TEXT_LABEL = {
+  ...DEFAULT_TEXT_LABEL,
+  color: [128, 130, 132],
+  size: 10
+};
+
+/** @type {import('./layer-factory').ColorRange} */
+export const DEFAULT_CUSTOM_PALETTE = {
+  name: 'color.customPalette',
+  type: 'custom',
+  category: 'Custom',
+  colors: []
+};
+
+export const UNKNOWN_COLOR_KEY = '__unknownColor__';
+
+/** @type {import('./layer-factory').ColorUI} */
+export const DEFAULT_COLOR_UI = {
+  // customPalette in edit
+  customPalette: DEFAULT_CUSTOM_PALETTE,
+  // show color sketcher modal
+  showSketcher: false,
+  // show color range selection panel
+  showDropdown: false,
+  // color range selector config
+  colorRangeConfig: {
+    type: 'all',
+    steps: 6,
+    reversed: false,
+    custom: false
+  }
+};
+
+/** @type {import('./layer-factory').LayerVisConfig} */
+export const LAYER_VIS_CONFIGS = {
+  thickness: {
+    type: 'number',
+    defaultValue: 2,
+    label: 'layerVisConfigs.strokeWidth',
+    isRanged: false,
+    range: [0, 100],
+    step: 0.1,
+    group: PROPERTY_GROUPS.stroke,
+    property: 'thickness'
+  },
+  strokeWidthRange: {
+    type: 'number',
+    defaultValue: [0, 10],
+    label: 'layerVisConfigs.strokeWidthRange',
+    isRanged: true,
+    range: [0, 200],
+    step: 0.1,
+    group: PROPERTY_GROUPS.stroke,
+    property: 'sizeRange'
+  },
+  trailLength: {
+    type: 'number',
+    defaultValue: 180,
+    label: 'layerVisConfigs.strokeWidth',
+    isRanged: false,
+    range: [1, 1000],
+    step: 1,
+    group: PROPERTY_GROUPS.stroke,
+    property: 'trailLength'
+  },
+  // radius is actually radiusScale in deck.gl
+  radius: {
+    type: 'number',
+    defaultValue: 2,
+    label: 'layerVisConfigs.radius',
+    isRanged: false,
+    range: [0, 100],
+    step: 0.1,
+    group: PROPERTY_GROUPS.radius,
+    property: 'radius'
+  },
+  radiusRange: {
+    type: 'number',
+    defaultValue: [0, 50],
+    isRanged: true,
+    range: [0, 500],
+    step: 0.1,
+    label: 'layerVisConfigs.radiusRange',
+    group: PROPERTY_GROUPS.radius,
+    property: 'radiusRange'
+  },
+  clusterRadius: {
+    type: 'number',
+    label: 'layerVisConfigs.clusterRadius',
+    defaultValue: 40,
+    isRanged: false,
+    range: [1, 500],
+    step: 0.1,
+    group: PROPERTY_GROUPS.radius,
+    property: 'clusterRadius'
+  },
+  clusterRadiusRange: {
+    type: 'number',
+    label: 'layerVisConfigs.radiusRangePixels',
+    defaultValue: [1, 40],
+    isRanged: true,
+    range: [1, 150],
+    step: 0.1,
+    group: PROPERTY_GROUPS.radius,
+    property: 'radiusRange'
+  },
+  opacity: {
+    type: 'number',
+    defaultValue: DEFAULT_LAYER_OPACITY,
+    label: 'layerVisConfigs.opacity',
+    isRanged: false,
+    range: [0, 1],
+    step: 0.01,
+    group: PROPERTY_GROUPS.color,
+    property: 'opacity'
+  },
+  coverage: {
+    type: 'number',
+    defaultValue: 1,
+    label: 'layerVisConfigs.coverage',
+    isRanged: false,
+    range: [0, 1],
+    step: 0.01,
+    group: PROPERTY_GROUPS.cell,
+    property: 'coverage'
+  },
+  // used in point layer
+  outline: {
+    type: 'boolean',
+    defaultValue: false,
+    label: 'layer.outline',
+    group: PROPERTY_GROUPS.display,
+    property: 'outline'
+  },
+  colorRange: {
+    type: 'color-range-select',
+    defaultValue: DEFAULT_COLOR_RANGE,
+    label: 'layerVisConfigs.colorRange',
+    group: PROPERTY_GROUPS.color,
+    property: 'colorRange'
+  },
+  strokeColorRange: {
+    type: 'color-range-select',
+    defaultValue: DEFAULT_COLOR_RANGE,
+    label: 'layerVisConfigs.strokeColorRange',
+    group: PROPERTY_GROUPS.color,
+    property: 'strokeColorRange'
+  },
+  targetColor: {
+    type: 'color-select',
+    label: 'layerVisConfigs.targetColor',
+    defaultValue: null,
+    group: PROPERTY_GROUPS.color,
+    property: 'targetColor'
+  },
+  strokeColor: {
+    type: 'color-select',
+    label: 'layerVisConfigs.strokeColor',
+    defaultValue: null,
+    group: PROPERTY_GROUPS.color,
+    property: 'strokeColor'
+  },
+  aggregation: {
+    type: 'select',
+    defaultValue: AGGREGATION_TYPES.average,
+    label: 'layerVisConfigs.colorAggregation',
+    // aggregation options are based on color field types
+    options: Object.keys(AGGREGATION_TYPES),
+    group: PROPERTY_GROUPS.color,
+    property: 'colorAggregation',
+    condition: config => config.colorField
+  },
+  sizeAggregation: {
+    type: 'select',
+    defaultValue: AGGREGATION_TYPES.average,
+    label: 'layerVisConfigs.heightAggregation',
+    // aggregation options are based on color field types
+    options: Object.keys(AGGREGATION_TYPES),
+    group: PROPERTY_GROUPS.height,
+    property: 'sizeAggregation',
+    condition: config => config.sizeField
+  },
+  heightAggregation: {
+    type: 'select',
+    defaultValue: AGGREGATION_TYPES.average,
+    label: 'layerVisConfigs.heightAggregation',
+    options: Object.keys(AGGREGATION_TYPES),
+    group: PROPERTY_GROUPS.height,
+    property: 'heightAggregation',
+    condition: config => config.heightField
+  },
+  percentile: {
+    type: 'number',
+    defaultValue: [0, 100],
+    label: config =>
+      `Filter by ${
+        config.colorField
+          ? `${config.visConfig.colorAggregation} ${config.colorField.name}`
+          : 'count'
+      } percentile`,
+    isRanged: true,
+    range: [0, 100],
+    step: 0.01,
+    group: PROPERTY_GROUPS.color,
+    property: 'percentile',
+
+    // percentile filter only makes sense with linear aggregation
+    condition: config => config.colorScale !== 'ordinal'
+  },
+  elevationPercentile: {
+    type: 'number',
+    defaultValue: [0, 100],
+    label: config =>
+      `Filter by ${
+        config.sizeField ? `${config.visConfig.sizeAggregation} ${config.sizeField.name}` : 'count'
+      } percentile`,
+    isRanged: true,
+    range: [0, 100],
+    step: 0.01,
+    group: PROPERTY_GROUPS.height,
+    property: 'elevationPercentile',
+    // percentile filter only makes sense with linear aggregation
+    condition: config => config.visConfig.enable3d && (config.colorField || config.sizeField)
+  },
+  resolution: {
+    type: 'number',
+    defaultValue: 8,
+    label: 'layerVisConfigs.resolution',
+    isRanged: false,
+    range: [0, 13],
+    step: 1,
+    group: PROPERTY_GROUPS.cell,
+    property: 'resolution'
+  },
+  sizeScale: {
+    type: 'number',
+    defaultValue: 10,
+    label: 'layerVisConfigs.sizeScale',
+    isRanged: false,
+    range: [1, 1000],
+    step: 1,
+    group: PROPERTY_GROUPS.stroke,
+    property: 'sizeScale'
+  },
+  angle: {
+    type: 'number',
+    label: 'layerVisConfigs.angle',
+    defaultValue: 0,
+    isRanged: false,
+    range: [0, 360],
+    group: PROPERTY_GROUPS.angle,
+    step: 1,
+    property: 'angle'
+  },
+  worldUnitSize: {
+    type: 'number',
+    defaultValue: 1,
+    label: 'layerVisConfigs.worldUnitSize',
+    isRanged: false,
+    range: [0, 500],
+    step: 0.0001,
+    group: PROPERTY_GROUPS.cell,
+    property: 'worldUnitSize'
+  },
+  elevationScale: {
+    type: 'number',
+    defaultValue: 5,
+    label: 'layerVisConfigs.elevationScale',
+    isRanged: false,
+    range: [0, 5000],
+    step: 0.1,
+    group: PROPERTY_GROUPS.height,
+    property: 'elevationScale'
+  },
+  enableElevationZoomFactor: {
+    type: 'boolean',
+    defaultValue: true,
+    label: 'layerVisConfigs.enableElevationZoomFactor',
+    group: PROPERTY_GROUPS.height,
+    property: 'enableElevationZoomFactor',
+    description: 'layerVisConfigs.enableElevationZoomFactorDescription'
+  },
+  elevationRange: {
+    type: 'number',
+    defaultValue: [0, 500],
+    label: 'layerVisConfigs.heightScale',
+    isRanged: true,
+    range: [0, 1000],
+    step: 0.01,
+    group: PROPERTY_GROUPS.height,
+    property: 'sizeRange'
+  },
+  heightRange: {
+    type: 'number',
+    defaultValue: [0, 500],
+    label: 'Height Scale',
+    isRanged: true,
+    range: [0, 1000],
+    step: 0.01,
+    group: PROPERTY_GROUPS.height,
+    property: 'heightRange'
+  },
+  coverageRange: {
+    type: 'number',
+    defaultValue: [0, 1],
+    label: 'layerVisConfigs.coverageRange',
+    isRanged: true,
+    range: [0, 1],
+    step: 0.01,
+    group: PROPERTY_GROUPS.radius,
+    property: 'coverageRange'
+  },
+  // hi precision is deprecated by deck.gl
+  'hi-precision': {
+    type: 'boolean',
+    defaultValue: false,
+    label: 'layerVisConfigs.highPrecisionRendering',
+    group: PROPERTY_GROUPS.precision,
+    property: 'hi-precision',
+    description: 'layerVisConfigs.highPrecisionRenderingDescription'
+  },
+  enable3d: {
+    type: 'boolean',
+    defaultValue: false,
+    label: 'layerVisConfigs.height',
+    group: PROPERTY_GROUPS.height,
+    property: 'enable3d',
+    description: 'layerVisConfigs.heightDescription'
+  },
+  stroked: {
+    type: 'boolean',
+    label: 'layerVisConfigs.stroke',
+    defaultValue: true,
+    group: PROPERTY_GROUPS.display,
+    property: 'stroked'
+  },
+  filled: {
+    type: 'boolean',
+    label: 'layerVisConfigs.fill',
+    defaultValue: false,
+    group: PROPERTY_GROUPS.display,
+    property: 'filled'
+  },
+  extruded: {
+    type: 'boolean',
+    defaultValue: false,
+    label: 'layerVisConfigs.enablePolygonHeight',
+    group: PROPERTY_GROUPS.display,
+    property: 'extruded'
+  },
+  wireframe: {
+    type: 'boolean',
+    defaultValue: false,
+    label: 'layerVisConfigs.showWireframe',
+    group: PROPERTY_GROUPS.display,
+    property: 'wireframe'
+  },
+  // used for heatmap
+  weight: {
+    type: 'number',
+    defaultValue: 1,
+    label: 'layerVisConfigs.weightIntensity',
+    isRanged: false,
+    range: [0.01, 500],
+    step: 0.01,
+    group: PROPERTY_GROUPS.cell,
+    property: 'weight',
+    condition: config => config.weightField
+  },
+  heatmapRadius: {
+    type: 'number',
+    defaultValue: 20,
+    label: 'layerVisConfigs.radius',
+    isRanged: false,
+    range: [0, 100],
+    step: 0.1,
+    group: PROPERTY_GROUPS.cell,
+    property: 'radius'
+  },
+  customMarkers: {
+    type: 'boolean',
+    defaultValue: false,
+    label: 'layerVisConfigs.customMarkers',
+    group: PROPERTY_GROUPS.customMarkers,
+    property: 'customMarkers'
+  },
+  customMarkersUrl: {
+    type: 'text',
+    defaultValue: '',
+    label: 'layerVisConfigs.addUrl',
+    group: PROPERTY_GROUPS.customMarkers,
+    property: 'customMarkersUrl'
+  },
+  customMarkersRange: {
+    type: 'markers-range-select',
+    defaultValue: undefined,
+    label: 'layerVisConfigs.colorRange',
+    group: PROPERTY_GROUPS.customMarkers,
+    property: 'customMarkersRange'
+  }
+};
+
+/** @type {import('./layer-factory').LayerTextConfig} */
+export const LAYER_TEXT_CONFIGS = {
+  fontSize: {
+    type: 'number',
+    range: [6, 32],
+    value0: 6,
+    step: 1,
+    isRanged: false,
+    label: 'Font size',
+    showInput: true
+  },
+  textAnchor: {
+    type: 'select',
+    options: ['start', 'middle', 'end'],
+    multiSelect: false,
+    searchable: false
+  },
+  textAlignment: {
+    type: 'select',
+    options: ['top', 'center', 'bottom'],
+    multiSelect: false,
+    searchable: false
+  }
+};

package/src/layers/layer-text-label.js

@@ -0,0 +1,62 @@
+// 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 {notNullorUndefined} from 'utils/data-utils';
+import uniq from 'lodash.uniq';
+
+export const defaultPadding = 20;
+
+export function getTextOffsetByRadius(radiusScale, getRadius) {
+  return textLabel => {
+    const xMult = textLabel.anchor === 'middle' ? 0 : textLabel.anchor === 'start' ? 1 : -1;
+    const yMult = textLabel.alignment === 'center' ? 0 : textLabel.alignment === 'bottom' ? 1 : -1;
+
+    const sizeOffset =
+      textLabel.alignment === 'center'
+        ? 0
+        : textLabel.alignment === 'bottom'
+        ? textLabel.size
+        : textLabel.size;
+
+    const padding = defaultPadding;
+
+    return typeof getRadius === 'function'
+      ? d => [
+          xMult * (getRadius(d) * radiusScale + padding),
+          yMult * (getRadius(d) * radiusScale + padding + sizeOffset)
+        ]
+      : [
+          xMult * (getRadius * radiusScale + padding),
+          yMult * (getRadius * radiusScale + padding + sizeOffset)
+        ];
+  };
+}
+
+export const textLabelAccessor = textLabel => dc => d => {
+  const val = textLabel.field.valueAccessor(d);
+  return notNullorUndefined(val) ? String(val) : '';
+};
+
+export const formatTextLabelData = ({textLabel, dataContainer}) => {
+  return textLabel.map((tl, i) => {
+    const getText = tl.field ? textLabelAccessor(tl)(dataContainer) : null;
+    return {getText};
+  });
+};

package/src/layers/layer-update.js

@@ -0,0 +1,71 @@
+// 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.
+
+/* eslint-disable guard-for-in */
+
+/**
+ *
+ * @param {Object} updateTriggers {getPosition: {column}, getData: {filteredIndex}}
+ * @param {Object} oldUpdateTriggers
+ * @returns {boolean|object} `false` if nothing changed, or `triggerChanged` as an object
+ */
+export function diffUpdateTriggers(updateTriggers, oldUpdateTriggers = {}) {
+  const triggerChanged = {};
+  /** @type {boolean|object} */
+  let reason = false;
+
+  for (const triggerName in updateTriggers) {
+    const newTriggers = updateTriggers[triggerName] || {};
+    const oldTriggers = oldUpdateTriggers[triggerName] || {};
+    const diffReason = compareUpdateTrigger(newTriggers, oldTriggers, triggerName);
+
+    if (diffReason) {
+      triggerChanged[triggerName] = true;
+      reason = triggerChanged;
+    }
+  }
+
+  return reason;
+}
+
+function compareUpdateTrigger(newTriggers, oldTriggers, triggerName) {
+  if (typeof oldTriggers !== 'object') {
+    return oldTriggers === newTriggers ? null : `${triggerName} changed shallowly`;
+  }
+
+  for (const key in oldTriggers) {
+    if (!(key in newTriggers)) {
+      return `${triggerName}.${key} deleted`;
+    }
+
+    // shallow compare
+    if (oldTriggers[key] !== newTriggers[key]) {
+      return `${triggerName}.${key} changed shallowly`;
+    }
+  }
+
+  for (const key in newTriggers) {
+    if (!(key in oldTriggers)) {
+      return `${triggerName}.${key} added`;
+    }
+  }
+
+  return null;
+}

package/src/layers/line-layer/line-layer-icon.js

@@ -0,0 +1,69 @@
+// 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 Base from 'components/common/icons/base';
+
+export default class LineLayerIcon extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string,
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'line-layer-icon',
+    totalColor: 5
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <path
+          d="M57.8,58.3c-0.4,0-0.8-0.2-1.1-0.5L33.1,32.1c-0.6-0.6-0.5-1.6,0.1-2.1c0.6-0.6,1.6-0.5,2.1,0.1l23.7,25.8
+          c0.6,0.6,0.5,1.6-0.1,2.1C58.5,58.2,58.2,58.3,57.8,58.3z"
+          className="cr1"
+        />
+        <path
+          d="M34.2,33.6c-0.6,0-1.2-0.2-1.7-0.6c-1-0.9-1.1-2.5-0.2-3.5l18.5-21c0.9-1,2.5-1.1,3.5-0.2c1,0.9,1.1,2.5,0.2,3.5L36,32.7
+          C35.5,33.3,34.9,33.6,34.2,33.6z"
+          className="cr2"
+        />
+        <path
+          d="M34.2,32.6c-0.5,0-1-0.3-1.3-0.8L20.7,10.2c-0.4-0.7-0.1-1.6,0.6-2c0.7-0.4,1.6-0.1,2,0.6l12.1,21.6c0.4,0.7,0.1,1.6-0.6,2
+          C34.7,32.5,34.4,32.6,34.2,32.6z"
+          className="cr3"
+        />
+        <path
+          d="M15.8,58.4c-0.3,0-0.6-0.1-0.9-0.3c-0.7-0.5-0.8-1.4-0.4-2.1l18.3-25.8c0.5-0.7,1.4-0.8,2.1-0.4s0.8,1.4,0.4,2.1L17.1,57.7
+          C16.8,58.2,16.3,58.4,15.8,58.4z"
+          className="cr4"
+        />
+        <path
+          d="M34.2,32.1c-0.1,0-0.3,0-0.4-0.1l-28.5-14c-0.5-0.2-0.7-0.8-0.5-1.3c0.2-0.5,0.8-0.7,1.3-0.5l28.5,14
+          c0.5,0.2,0.7,0.8,0.5,1.3C34.9,31.9,34.5,32.1,34.2,32.1z"
+          className="cr5"
+        />
+      </Base>
+    );
+  }
+}