@carto/kepler.gl 0.0.40-alpha.1 → 0.0.40-alpha.aggregation-selector

package/src/components/common/item-selector/typeahead.js

@@ -43,7 +43,7 @@ const TypeaheadWrapper = styled.div`
   display: flex;
   flex-direction: column;
   background-color: ${props =>
-    props.light ? props.theme.dropdownListBgdLT : props.theme.dropdownListBgd};
+    props.light ? props.theme.dropdownListBgdLT : props.theme.inputBgd};
   box-shadow: ${props => props.theme.dropdownListShadow};
 
   :focus {
@@ -51,27 +51,29 @@ const TypeaheadWrapper = styled.div`
   }
 `;
 
-const InputBox = styled.div.attrs({
-  className: 'typeahead__input_box'
-})`
-  padding: 8px;
-`;
+const InputBox = styled.div`
+  position: relative;
+  margin: 8px;
+`
 
 const TypeaheadInput = styled.input`
-  ${props => (props.light ? props.theme.inputLT : props.theme.secondaryInput)} :hover {
-    cursor: pointer;
-    background-color: ${props =>
-      props.light ? props.theme.selectBackgroundLT : props.theme.secondaryInputBgd};
-  }
+  ${props => (props.light ? props.theme.inputLT : props.theme.secondaryInput)};
+  width: 100%;
+  padding-left: 35px;
+  background-color: ${props => props.light ? props.theme.inputBgd : '#eee'};
+  border: none;
 `;
 
-const InputIcon = styled.div.attrs({
-  className: 'typeahead__input_icon'
-})`
+const InputIcon = styled.div`
   position: absolute;
-  right: 15px;
-  top: 14px;
+  left: 10px;
+  top: 50%;
+  z-index: 2;
+  transform: translateY(-50%);
   color: ${props => props.theme.inputPlaceholderColor};
+  svg {
+    display: block;
+  }
 `;
 
 function generateSearchFunction(props) {
@@ -151,7 +153,8 @@ class Typeahead extends Component {
     customListItemComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
     customListHeaderComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
     showOptionsWhenEmpty: PropTypes.bool,
-    searchable: PropTypes.bool
+    searchable: PropTypes.bool,
+    withSubOptions: PropTypes.bool
   };
 
   static defaultProps = {
@@ -181,7 +184,8 @@ class Typeahead extends Component {
     customListHeaderComponent: null,
     showOptionsWhenEmpty: true,
     searchable: true,
-    resultsTruncatedMessage: null
+    resultsTruncatedMessage: null,
+    withSubOptions: false
   };
 
   static getDerivedStateFromProps(props, state) {
@@ -247,6 +251,7 @@ class Typeahead extends Component {
     return (
       <this.props.customListComponent
         fixedOptions={this.props.fixedOptions}
+        searchEntryValue={this.state.entryValue}
         options={
           this.props.maxVisible
             ? this.state.searchResults.slice(0, this.props.maxVisible)
@@ -267,6 +272,7 @@ class Typeahead extends Component {
         displayOption={this.props.displayOption}
         selectedItems={this.props.selectedItems}
         light={this.props.light}
+        withSubOptions={this.props.withSubOptions}
       />
     );
   }
@@ -473,6 +479,9 @@ class Typeahead extends Component {
         {this._renderHiddenInput()}
         {this.props.searchable ? (
           <InputBox>
+            <InputIcon>
+              <this.props.inputIcon height="18px" />
+            </InputIcon>
             <TypeaheadInput
               ref={this.entry}
               type="text"
@@ -485,9 +494,6 @@ class Typeahead extends Component {
               onBlur={this._onBlur}
               light={this.props.light}
             />
-            <InputIcon>
-              <this.props.inputIcon height="18px" />
-            </InputIcon>
           </InputBox>
         ) : null}
         {this._renderIncrementalSearchResults()}

package/src/components/side-panel/layer-panel/layer-configurator.js

@@ -1104,6 +1104,7 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
     onChange,
     onChangeVisConfig,
     fields,
+    fieldsAggregated,
     description,
     isLoading
   }) => {
@@ -1111,6 +1112,7 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
       channelScaleType,
       domain,
       field,
+      aggregation,
       key,
       property,
       range,
@@ -1134,6 +1136,7 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
       scaleOptions.length > 1;
     const defaultDescription = 'layerConfiguration.defaultDescription';
     const visRange = layer.config.visConfig[range];
+    const aggregator = layer.config.visConfig[aggregation];
 
     return (
       <VisConfigByFieldSelector
@@ -1141,6 +1144,8 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
         description={description || defaultDescription}
         domain={layer.config[domain]}
         fields={supportedFields}
+        aggregator={aggregator}
+        fieldsAggregated={fieldsAggregated}
         id={layer.id}
         key={`${key}-channel-selector`}
         property={property}
@@ -1155,7 +1160,18 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
           if (visRange?.colorMap) {
             onChangeVisConfig({[range]: {...visRange, colorMap: undefined}});
           }
-          onChange({[field]: val}, key);
+          onChange(
+            {
+              [field]: val,
+              ...(fieldsAggregated && {
+                visConfig: {
+                  ...layer.config.visConfig,
+                  [aggregation]: val?.selectedAggregator
+                }
+              })
+            },
+            key
+          );
         }}
         updateScale={val => onChange({[scale]: val}, key)}
         updateCustomPalette={colorMap => onChangeVisConfig({[range]: {...visRange, colorMap}})}

package/src/components/side-panel/layer-panel/vis-config-by-field-selector.js

@@ -53,7 +53,9 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
       description: PropTypes.string,
       label: PropTypes.string,
       placeholder: PropTypes.string,
-      isLoading: PropTypes.bool
+      isLoading: PropTypes.bool,
+      fieldsAggregated: PropTypes.bool,
+      aggregator: PropTypes.string
     };
 
     _updateVisByField = val => {
@@ -106,6 +108,8 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
               onSelect={this._updateVisByField}
               erasable
               isLoading={this.props.isLoading}
+              withAggregator={this.props.fieldsAggregated}
+              aggregator={this.props.fieldsAggregated && this.props.aggregator}
             />
           </SidePanelSection>
           <div>

package/src/constants/default-settings.js

@@ -451,6 +451,57 @@ export const AGGREGATION_TYPES = {
   countUnique: 'count unique'
 };
 
+export const FIELD_TYPES_AGGREGATORS = {
+  date: null,
+  geojson: null,
+  integer: [
+    AGGREGATION_TYPES.average,
+    AGGREGATION_TYPES.maximum,
+    AGGREGATION_TYPES.minimum,
+    AGGREGATION_TYPES.stdev,
+    AGGREGATION_TYPES.sum,
+    AGGREGATION_TYPES.variance
+  ],
+  real: [
+    AGGREGATION_TYPES.average,
+    AGGREGATION_TYPES.maximum,
+    AGGREGATION_TYPES.minimum,
+    AGGREGATION_TYPES.stdev,
+    AGGREGATION_TYPES.sum,
+    AGGREGATION_TYPES.variance
+  ],
+  string: null,
+  timestamp: null,
+  point: null
+};
+
+export const FIELD_AGGREGATORS = [
+  {
+    id: AGGREGATION_TYPES.average,
+    displayName: 'AVG'
+  },
+  {
+    id: AGGREGATION_TYPES.maximum,
+    displayName: 'MAX'
+  },
+  {
+    id: AGGREGATION_TYPES.minimum,
+    displayName: 'MIN'
+  },
+  {
+    id: AGGREGATION_TYPES.stdev,
+    displayName: 'STDEV'
+  },
+  {
+    id: AGGREGATION_TYPES.sum,
+    displayName: 'SUM'
+  },
+  {
+    id: AGGREGATION_TYPES.variance,
+    displayName: 'VARIANCE'
+  }
+];
+
 export const linearFieldScaleFunctions = {
   [CHANNEL_SCALES.color]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
   [CHANNEL_SCALES.radius]: [SCALE_TYPES.sqrt],

package/src/constants/index.js

@@ -67,7 +67,8 @@ export {
   RESOLUTIONS,
   SORT_ORDER,
   MAP_CONTROLS,
-  UNKNOWN_COLOR
+  UNKNOWN_COLOR,
+  FIELD_AGGREGATORS
 } from './default-settings';
 
 export {BUG_REPORT_LINK, USER_GUIDE_DOC} from './user-guides';

package/src/styles/base.js

@@ -896,6 +896,7 @@ const dropdownList = css`
 
   .list__item {
     ${props => props.theme.dropdownListItem};
+    ${dropdownListItem};
   }
 
   .list__item__anchor {