@carto/kepler.gl 0.0.33-alpha1 → 0.0.34

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

@@ -40,8 +40,10 @@ import TextLabelPanelFactory from './text-label-panel';
 
 import {capitalizeFirstLetter} from 'utils/utils';
 
-import {CHANNEL_SCALE_SUPPORTED_FIELDS} from 'constants/default-settings';
+import {CHANNEL_SCALES, CHANNEL_SCALE_SUPPORTED_FIELDS} from 'constants/default-settings';
 import {LAYER_TYPES} from 'layers/types';
+import {injectIntl} from 'react-intl';
+import ColorDimensionScaleSelectorFactory from './color-dimension-scale-selector';
 
 const StyledLayerConfigurator = styled.div.attrs({
   className: 'layer-panel__config'
@@ -82,7 +84,8 @@ export const getVisConfiguratorProps = props => ({
 export const getLayerChannelConfigProps = props => ({
   layer: props.layer,
   fields: getLayerFields(props.datasets, props.layer),
-  onChange: props.updateLayerVisualChannelConfig
+  onChange: props.updateLayerVisualChannelConfig,
+  onChangeVisConfig: props.updateLayerVisConfig
 });
 
 LayerConfiguratorFactory.deps = [
@@ -93,7 +96,8 @@ LayerConfiguratorFactory.deps = [
   ChannelByValueSelectorFactory,
   LayerColumnConfigFactory,
   LayerTypeSelectorFactory,
-  VisConfigSwitchFactory
+  VisConfigSwitchFactory,
+  AggrScaleSelectorFactory
 ];
 
 export default function LayerConfiguratorFactory(
@@ -104,7 +108,8 @@ export default function LayerConfiguratorFactory(
   ChannelByValueSelector,
   LayerColumnConfig,
   LayerTypeSelector,
-  VisConfigSwitch
+  VisConfigSwitch,
+  AggrScaleSelector
 ) {
   class LayerConfigurator extends Component {
     static propTypes = {
@@ -240,7 +245,11 @@ export default function LayerConfiguratorFactory(
           <LayerConfigGroup label={'layer.color'} collapsible>
             <LayerColorRangeSelector {...visConfiguratorProps} />
             <ConfigGroupCollapsibleContent>
-              <AggrScaleSelector {...layerConfiguratorProps} channel={layer.visualChannels.color} />
+              <AggrScaleSelector
+                {...layerConfiguratorProps}
+                channel={layer.visualChannels.color}
+                onChangeVisConfig={layerChannelConfigProps.onChangeVisConfig}
+              />
               <ChannelByValueSelector
                 channel={layer.visualChannels.color}
                 {...layerChannelConfigProps}
@@ -328,7 +337,11 @@ export default function LayerConfiguratorFactory(
           <LayerConfigGroup label={'layer.color'} collapsible>
             <LayerColorRangeSelector {...visConfiguratorProps} />
             <ConfigGroupCollapsibleContent>
-              <AggrScaleSelector {...layerConfiguratorProps} channel={layer.visualChannels.color} />
+              <AggrScaleSelector
+                {...layerConfiguratorProps}
+                channel={layer.visualChannels.color}
+                onChangeVisConfig={layerChannelConfigProps.onChangeVisConfig}
+              />
               <ChannelByValueSelector
                 channel={layer.visualChannels.color}
                 {...layerChannelConfigProps}
@@ -382,6 +395,7 @@ export default function LayerConfiguratorFactory(
                 <AggrScaleSelector
                   {...layerConfiguratorProps}
                   channel={layer.visualChannels.size}
+                  onChangeVisConfig={layerChannelConfigProps.onChangeVisConfig}
                 />
                 <VisConfigSlider
                   {...layer.visConfigSettings.sizeRange}
@@ -1067,7 +1081,13 @@ export const LayerColorRangeSelector = ({layer, onChange, property = 'colorRange
         {
           selectedColor: layer.config.visConfig[property],
           isRange: true,
-          setColor: colorRange => onChange({[property]: colorRange})
+          setColor: colorRange => {
+            const {colorMap} = layer.config.visConfig[property];
+            const colorRangeUpdated = colorMap
+              ? layer.updateColorMap(property, colorMap, colorRange)
+              : colorRange;
+            onChange({[property]: colorRangeUpdated});
+          }
         }
       ]}
       colorUI={layer.config.colorUI[property]}
@@ -1078,7 +1098,15 @@ export const LayerColorRangeSelector = ({layer, onChange, property = 'colorRange
 
 ChannelByValueSelectorFactory.deps = [VisConfigByFieldSelectorFactory];
 export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
-  const ChannelByValueSelector = ({layer, channel, onChange, fields, description, isLoading}) => {
+  const ChannelByValueSelector = ({
+    layer,
+    channel,
+    onChange,
+    onChangeVisConfig,
+    fields,
+    description,
+    isLoading
+  }) => {
     const {
       channelScaleType,
       domain,
@@ -1094,8 +1122,18 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
       supportedFieldTypes || CHANNEL_SCALE_SUPPORTED_FIELDS[channelScaleType];
     const supportedFields = fields.filter(({type}) => channelSupportedFieldTypes.includes(type));
     const scaleOptions = layer.getScaleOptions(channel.key);
-    const showScale = !layer.isAggregated && layer.config[scale] && scaleOptions.length > 1;
+    const showScaleCustomizable =
+      channelScaleType === CHANNEL_SCALES.color &&
+      layer.config[scale] &&
+      Boolean(layer.config[field]) &&
+      scaleOptions.length > 0;
+    const showScale =
+      !showScaleCustomizable &&
+      !layer.isAggregated &&
+      layer.config[scale] &&
+      scaleOptions.length > 1;
     const defaultDescription = 'layerConfiguration.defaultDescription';
+    const visRange = layer.config.visConfig[range];
 
     return (
       <VisConfigByFieldSelector
@@ -1107,13 +1145,20 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
         key={`${key}-channel-selector`}
         property={property}
         placeholder={defaultMeasure || 'placeholder.selectField'}
-        range={layer.config.visConfig[range]}
+        range={visRange}
         scaleOptions={scaleOptions}
         scaleType={scale ? layer.config[scale] : null}
         selectedField={layer.config[field]}
         showScale={showScale}
-        updateField={val => onChange({[field]: val}, key)}
+        showScaleCustomizable={showScaleCustomizable}
+        updateField={val => {
+          if (visRange.colorMap) {
+            onChangeVisConfig({[range]: {...visRange, colorMap: undefined}});
+          }
+          onChange({[field]: val}, key);
+        }}
         updateScale={val => onChange({[scale]: val}, key)}
+        updateCustomPalette={colorMap => onChangeVisConfig({[range]: {...visRange, colorMap}})}
         isLoading={isLoading}
       />
     );
@@ -1122,19 +1167,52 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
   return ChannelByValueSelector;
 }
 
-export const AggrScaleSelector = ({channel, layer, onChange}) => {
-  const {scale, key} = channel;
-  const scaleOptions = layer.getScaleOptions(key);
+AggrScaleSelectorFactory.deps = [ColorDimensionScaleSelectorFactory];
 
-  return Array.isArray(scaleOptions) && scaleOptions.length > 1 ? (
-    <DimensionScaleSelector
-      label={`${key} Scale`}
-      options={scaleOptions}
-      scaleType={layer.config[scale]}
-      onSelect={val => onChange({[scale]: val}, key)}
-    />
-  ) : null;
-};
+function AggrScaleSelectorFactory(ColorDimensionScaleSelector) {
+  class AggrScaleSelector extends Component {
+    render() {
+      const {channel, layer, onChange, onChangeVisConfig} = this.props;
+      const {scale, key, channelScaleType, domain, range} = channel;
+      const scaleOptions = layer.getScaleOptions(key);
+      const visRange = layer.config.visConfig[range];
+      const showScaleCustomizable =
+        channelScaleType === CHANNEL_SCALES.colorAggr &&
+        Array.isArray(scaleOptions) &&
+        scaleOptions.length > 0;
+      const showScale = Array.isArray(scaleOptions) && scaleOptions.length > 1;
+
+      if (showScaleCustomizable) {
+        return (
+          <SidePanelSection>
+            <ColorDimensionScaleSelector
+              label={`${key} Scale`}
+              scaleType={layer.config[scale]}
+              options={scaleOptions}
+              domain={layer.config[domain]}
+              range={visRange}
+              onSelect={val => onChange({[scale]: val}, key)}
+              onSetCustomPalette={colorMap => onChangeVisConfig({[range]: {...visRange, colorMap}})}
+            />
+          </SidePanelSection>
+        );
+      }
+
+      if (showScale) {
+        return (
+          <DimensionScaleSelector
+            label={`${key} Scale`}
+            options={scaleOptions}
+            scaleType={layer.config[scale]}
+            onSelect={val => onChange({[scale]: val}, key)}
+          />
+        );
+      }
+      return null;
+    }
+  }
+  return injectIntl(AggrScaleSelector);
+}
 
 export const AggregationTypeSelector = ({layer, channel, onChange}) => {
   const {field, aggregation, key} = channel;

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

@@ -27,9 +27,14 @@ import InfoHelperFacotry from 'components/common/info-helper';
 import DimensionScaleSelector from './dimension-scale-selector';
 import {camelize} from 'utils/utils';
 import FieldSelectorFactory from '../../common/field-selector';
+import ColorDimensionScaleSelectorFactory from './color-dimension-scale-selector';
 
-VisConfigByFieldSelectorFactory.deps = [InfoHelperFacotry, FieldSelectorFactory];
-function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector) {
+VisConfigByFieldSelectorFactory.deps = [
+  InfoHelperFacotry,
+  FieldSelectorFactory,
+  ColorDimensionScaleSelectorFactory
+];
+function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensionScaleSelector) {
   class VisConfigByFieldSelector extends Component {
     static propTypes = {
       channel: PropTypes.string.isRequired,
@@ -37,8 +42,10 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector) {
       id: PropTypes.string.isRequired,
       property: PropTypes.string.isRequired,
       showScale: PropTypes.bool.isRequired,
+      showScaleCustomizable: PropTypes.bool.isRequired,
       updateField: PropTypes.func.isRequired,
       updateScale: PropTypes.func.isRequired,
+      updateCustomPalette: PropTypes.func.isRequired,
 
       // optional
       scaleType: PropTypes.string,
@@ -57,11 +64,14 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector) {
       const {
         property,
         showScale,
+        showScaleCustomizable,
         selectedField,
         description,
         label,
         intl,
-        scaleOptions = []
+        scaleOptions = [],
+        domain,
+        range
       } = this.props;
 
       return (
@@ -109,6 +119,24 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector) {
               />
             ) : null}
           </div>
+          <div>
+            {showScaleCustomizable && !this.props.isLoading && (
+              <ColorDimensionScaleSelector
+                label={
+                  <FormattedMessage
+                    id={`scale.${camelize(`${property} scale`)}`}
+                    defaultMessage={label}
+                  />
+                }
+                scaleType={this.props.scaleType}
+                options={scaleOptions}
+                domain={domain}
+                range={range}
+                onSelect={this.props.updateScale}
+                onSetCustomPalette={this.props.updateCustomPalette}
+              />
+            )}
+          </div>
         </SidePanelSection>
       );
     }

package/src/constants/default-settings.js

@@ -28,7 +28,8 @@ import {
   scaleOrdinal,
   scaleSqrt,
   scaleLog,
-  scalePoint
+  scalePoint,
+  scaleThreshold
 } from 'd3-scale';
 import {
   Layers,
@@ -306,7 +307,8 @@ export const SCALE_TYPES = keyMirror({
   log: null,
 
   // ordinal domain to linear range
-  point: null
+  point: null,
+  custom: null
 });
 
 export const SCALE_FUNC = {
@@ -316,7 +318,8 @@ export const SCALE_FUNC = {
   [SCALE_TYPES.ordinal]: scaleOrdinal,
   [SCALE_TYPES.sqrt]: scaleSqrt,
   [SCALE_TYPES.log]: scaleLog,
-  [SCALE_TYPES.point]: scalePoint
+  [SCALE_TYPES.point]: scalePoint,
+  [SCALE_TYPES.custom]: scaleThreshold
 };
 
 export const ALL_FIELD_TYPES = keyMirror({
@@ -449,20 +452,20 @@ export const AGGREGATION_TYPES = {
 };
 
 export const linearFieldScaleFunctions = {
-  [CHANNEL_SCALES.color]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
+  [CHANNEL_SCALES.color]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
   [CHANNEL_SCALES.radius]: [SCALE_TYPES.sqrt],
   [CHANNEL_SCALES.size]: [SCALE_TYPES.linear, SCALE_TYPES.sqrt, SCALE_TYPES.log]
 };
 
 export const linearFieldAggrScaleFunctions = {
   [CHANNEL_SCALES.colorAggr]: {
-    [AGGREGATION_TYPES.average]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.maximum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.minimum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.median]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.stdev]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.sum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.variance]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile]
+    [AGGREGATION_TYPES.average]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.maximum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.minimum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.median]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.stdev]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.sum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.variance]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom]
   },
 
   [CHANNEL_SCALES.sizeAggr]: {
@@ -486,7 +489,11 @@ export const ordinalFieldAggrScaleFunctions = {
   // [CHANNEL_SCALES.colorAggr]: [SCALE_TYPES.ordinal, SCALE_TYPES.linear],
   [CHANNEL_SCALES.colorAggr]: {
     [AGGREGATION_TYPES.mode]: [SCALE_TYPES.ordinal],
-    [AGGREGATION_TYPES.countUnique]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile]
+    [AGGREGATION_TYPES.countUnique]: [
+      SCALE_TYPES.quantize,
+      SCALE_TYPES.quantile,
+      SCALE_TYPES.custom
+    ]
   },
 
   // Currently doesn't support yet
@@ -509,7 +516,7 @@ export const notSupportAggrOpts = {
  */
 export const DEFAULT_AGGREGATION = {
   [CHANNEL_SCALES.colorAggr]: {
-    [AGGREGATION_TYPES.count]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile]
+    [AGGREGATION_TYPES.count]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom]
   },
   [CHANNEL_SCALES.sizeAggr]: {
     [AGGREGATION_TYPES.count]: [SCALE_TYPES.linear, SCALE_TYPES.sqrt, SCALE_TYPES.log]
@@ -629,6 +636,7 @@ export const DEFAULT_LAYER_COLOR = {
 export const DEFAULT_TOOLTIP_FIELDS = [];
 
 export const NO_VALUE_COLOR = [0, 0, 0, 0];
+export const UNKNOWN_COLOR = [134, 141, 145];
 
 export const LAYER_BLENDINGS = {
   additive: {

package/src/constants/index.js

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

package/src/deckgl-layers/layer-utils/cpu-aggregator.js

@@ -23,7 +23,12 @@ import {AGGREGATION_OPERATION, _BinSorter as BinSorter} from '@deck.gl/aggregati
 import {console as Console} from 'global/window';
 
 import {aggregate} from 'utils/aggregate-utils';
-import {AGGREGATION_TYPES, SCALE_FUNC} from 'constants/default-settings';
+import {
+  AGGREGATION_TYPES,
+  SCALE_FUNC,
+  UNKNOWN_COLOR,
+  SCALE_TYPES
+} from 'constants/default-settings';
 
 export const DECK_AGGREGATION_MAP = {
   [AGGREGATION_OPERATION.SUM]: AGGREGATION_TYPES.sum,
@@ -97,7 +102,10 @@ export function getDimensionValueDomain(step, props, dimensionUpdater) {
     [props[lowerPercentile.prop], props[upperPercentile.prop]]
   );
 
-  this._setDimensionState(key, {valueDomain});
+  this._setDimensionState(key, {
+    // By default sortedBins order by ascending frecuency  but if we've an ordinal scale we want to order by descending frecuency
+    valueDomain: props[scaleType.prop] === SCALE_TYPES.ordinal ? valueDomain.reverse() : valueDomain
+  });
 }
 
 export function getDimensionScale(step, props, dimensionUpdater) {
@@ -112,12 +120,20 @@ export function getDimensionScale(step, props, dimensionUpdater) {
   const dimensionRange = props[range.prop];
   const dimensionDomain = props[domain.prop] || this.state.dimensions[key].valueDomain;
 
-  const scaleFunctor = getScaleFunctor(scaleType && props[scaleType.prop])();
+  const scaleTypeProp = scaleType && props[scaleType.prop];
+  const scaleFunctor = getScaleFunctor(scaleTypeProp)();
 
-  const scaleFunc = scaleFunctor.domain(dimensionDomain).range(dimensionRange);
+  const scaleFunc = scaleFunctor
+    .domain(
+      scaleTypeProp === SCALE_TYPES.ordinal
+        ? dimensionDomain.slice(0, dimensionRange.length)
+        : dimensionDomain
+    )
+    .range(dimensionRange)
+    .unknown(UNKNOWN_COLOR);
 
   if (typeof onSet === 'object' && typeof props[onSet.props] === 'function') {
-    props[onSet.props](scaleFunc.domain());
+    props[onSet.props](this.state.dimensions[key].valueDomain);
   }
   this._setDimensionState(key, {scaleFunc});
 }
@@ -180,12 +196,13 @@ function getSubLayerAccessor(dimensionState, dimension, layerProps) {
     }
 
     const cv = bin && bin.value;
-    const domain = scaleFunc.domain();
+    // const domain = scaleFunc.domain();
 
-    const isValueInDomain = cv >= domain[0] && cv <= domain[domain.length - 1];
+    // const isValueInDomain = cv >= domain[0] && cv <= domain[domain.length - 1];
 
     // if cell value is outside domain, set alpha to 0
-    return isValueInDomain ? scaleFunc(cv) : dimension.nullValue;
+    // return isValueInDomain ? scaleFunc(cv) : dimension.nullValue;
+    return scaleFunc(cv);
   };
 }
 

package/src/layers/aggregation-layer.js

@@ -53,7 +53,23 @@ export const getValueAggrFunc = (field, aggregation) => {
 export const getFilterDataFunc = (filterRange, getFilterValue) => pt =>
   getFilterValue(pt).every((val, i) => val >= filterRange[i][0] && val <= filterRange[i][1]);
 
-const getLayerColorRange = colorRange => colorRange.colors.map(hexToRgb);
+const getLayerColorRange = colorRange => {
+  const {colorMap} = colorRange;
+
+  if (colorMap) {
+    return colorMap.map(cMap => hexToRgb(cMap[1]));
+  }
+  return colorRange.colors.map(hexToRgb);
+};
+
+const getLayerColorDomain = colorDomain => {
+  const {colorMap} = colorDomain;
+
+  if (colorMap) {
+    return colorMap.map(cMap => cMap[0]);
+  }
+  return null;
+};
 
 export const aggregateRequiredColumns = ['lat', 'lng'];
 
@@ -64,6 +80,7 @@ export default class AggregationLayer extends Layer {
     this.getPositionAccessor = dataContainer =>
       pointPosAccessor(this.config.columns)(dataContainer);
     this.getColorRange = memoize(getLayerColorRange);
+    this.getColorDomain = memoize(getLayerColorDomain);
   }
 
   get isAggregated() {
@@ -315,6 +332,7 @@ export default class AggregationLayer extends Layer {
 
       // color
       colorRange: this.getColorRange(visConfig.colorRange),
+      colorDomain: this.getColorDomain(visConfig.colorRange),
       colorScaleType: this.config.colorScale,
       upperPercentile: visConfig.percentile[1],
       lowerPercentile: visConfig.percentile[0],

package/src/layers/base-layer.js

@@ -35,7 +35,8 @@ import {
   FIELD_OPTS,
   SCALE_FUNC,
   CHANNEL_SCALE_SUPPORTED_FIELDS,
-  MAX_GPU_FILTERS
+  MAX_GPU_FILTERS,
+  UNKNOWN_COLOR
 } from 'constants/default-settings';
 import {COLOR_RANGES} from 'constants/color-ranges';
 import {DataVizColors} from 'constants/custom-color-ranges';
@@ -43,7 +44,6 @@ import {
   LAYER_VIS_CONFIGS,
   DEFAULT_TEXT_LABEL,
   DEFAULT_COLOR_UI,
-  UNKNOWN_COLOR_KEY,
   DEFAULT_HIGHLIGHT_COLOR,
   DEFAULT_LAYER_LABEL
 } from './layer-factory';
@@ -636,6 +636,7 @@ class Layer {
     });
   }
 
+  // eslint-disable-next-line complexity
   updateColorRangeByColorUI(newConfig, previous, prop) {
     // only update colorRange if changes in UI is made to 'reversed', 'steps' or steps
     const shouldUpdate =
@@ -664,6 +665,10 @@ class Layer {
         if (update && colorRange.reversed) {
           update = reverseColorRange(true, update);
         }
+
+        if (update && colorRange.colorMap) {
+          update = this.updateColorMap(prop, colorRange.colorMap, update);
+        }
       }
     }
 
@@ -676,6 +681,69 @@ class Layer {
     }
   }
 
+  updateColorMap(prop, colorMap, colorRange) {
+    // @ts-ignore
+    const {field, domain} = Object.values(this.visualChannels).find(value => value.range === prop);
+    const type = this.config[field]?.type;
+
+    if (type === 'string' || type === 'boolean' || type === 'date') {
+      return this.updateCategoryColorMap(colorMap, this.config[domain], colorRange);
+    }
+
+    // If no type or type is not string, boolean or date
+    return this.updateNumericColorMap(colorMap, this.config[domain], colorRange);
+  }
+
+  updateCategoryColorMap(colorMap, domain, colorRange) {
+    const colors = colorRange.colors;
+    const assignedCategories = [];
+    const newColorMap = colorMap.slice(0, colors.length).map((cMap, index) => {
+      assignedCategories.push(cMap[0]);
+      return [cMap[0], colors[index]];
+    });
+    const unassignedColors = colors.slice(newColorMap.length, colors.length);
+
+    for (const color of unassignedColors) {
+      const category = domain.find(d => !assignedCategories.includes(d));
+      if (!category) {
+        break;
+      }
+      assignedCategories.push(category);
+      newColorMap.push([category, color]);
+    }
+    return {
+      ...colorRange,
+      colorMap: newColorMap
+    };
+  }
+
+  updateNumericColorMap(colorMap, domain, update) {
+    const colors = update.colors;
+    let newColorMap = colorMap.slice(0, colors.length);
+
+    newColorMap = newColorMap.map((cMap, index) => {
+      const value = index === newColorMap.length - 1 ? null : cMap[0];
+      return [value, colors[index]];
+    });
+    const unassignedColors = colors.slice(newColorMap.length, colors.length);
+
+    if (unassignedColors.length > 0) {
+      const maxValue = domain[domain.length - 1];
+      const prevValue = newColorMap[newColorMap.length - 2][0];
+      const step = (maxValue - prevValue) / (unassignedColors.length + 1);
+      newColorMap[newColorMap.length - 1][0] = prevValue + step;
+
+      for (const [i, color] of unassignedColors.entries()) {
+        const value = i === unassignedColors.length - 1 ? null : prevValue + (step * (i + 2));
+        newColorMap.push([value, color]);
+      }
+    }
+    return {
+      ...update,
+      colorMap: newColorMap
+    };
+  }
+
   /**
    * Check whether layer has all columns
    * @returns {boolean} yes or no
@@ -724,10 +792,10 @@ class Layer {
       });
 
       // @ts-ignore d3 scale
-      const scale = SCALE_FUNC[SCALE_TYPES.ordinal]()
-        .domain(cMap.keys())
-        .range(cMap.values())
-        .unknown(cMap.get(UNKNOWN_COLOR_KEY) || NO_VALUE_COLOR);
+      const scale = SCALE_FUNC[colorScale]()
+        .domain(Array.from(cMap.keys()))
+        .range(Array.from(cMap.values()))
+        .unknown(UNKNOWN_COLOR);
       return scale;
     }
 
@@ -795,6 +863,14 @@ class Layer {
   }
 
   getVisChannelScale(scale, domain, range, fixed) {
+    if (scale === SCALE_TYPES.ordinal) {
+      // @ts-ignore d3-scale type
+      return SCALE_FUNC[scale]()
+        .domain(domain.slice(0, range.length))
+        .range(range)
+        .unknown(UNKNOWN_COLOR);
+    }
+
     // @ts-ignore d3-scale type
     return SCALE_FUNC[fixed ? 'linear' : scale]()
       .domain(domain)
@@ -1058,8 +1134,6 @@ class Layer {
       return defaultDomain;
     }
 
-    // return dataset.getColumnLayerDomain(field, scaleType) || defaultDomain;
-
     const dataSetField = dataset.fields.find(f => f.name === field.name);
     if (!dataSetField) {
       // if new dataset doesn't contain previously set field

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

@@ -93,6 +93,7 @@ export default class ClusterLayer extends AggregationLayer {
 
         // color
         colorRange: this.getColorRange(visConfig.colorRange),
+        colorDomain: this.getColorDomain(visConfig.colorRange),
         colorScaleType: this.config.colorScale,
         colorAggregation: visConfig.colorAggregation,