@carto/kepler.gl 0.0.71-alpha.1 → 0.0.71-alpha.3

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

@@ -41,12 +41,17 @@ import TextLabelPanelFactory from './text-label-panel';
 
 import {capitalizeFirstLetter} from 'utils/utils';
 
-import {CHANNEL_SCALES, CHANNEL_SCALE_SUPPORTED_FIELDS, SCALE_TYPES} from 'constants/default-settings';
+import {
+  CHANNEL_SCALES,
+  CHANNEL_SCALE_SUPPORTED_FIELDS,
+  SCALE_TYPES
+} from 'constants/default-settings';
 import {LAYER_TYPES} from 'layers/types';
 import {injectIntl} from 'react-intl';
 import ColorDimensionScaleSelectorFactory from './color-dimension-scale-selector';
 import ColorSelectorFactory from './color-selector';
 import LayerAggregationResolutionFactory from './layer-aggregation-resolution';
+import {hexColorCustomPalette} from 'constants/color-ranges';
 
 const StyledLayerConfigurator = styled.div.attrs({
   className: 'layer-panel__config'
@@ -172,6 +177,8 @@ export default function LayerConfiguratorFactory(
                 channel={layer.visualChannels.color}
                 {...layerChannelConfigProps}
               />
+            </ConfigGroupCollapsibleContent>
+            <ConfigGroupCollapsibleContent>
               <VisConfigSlider {...layer.visConfigSettings.opacity} {...visConfiguratorProps} />
             </ConfigGroupCollapsibleContent>
           </LayerConfigGroup>
@@ -185,7 +192,11 @@ export default function LayerConfiguratorFactory(
               disabled={Boolean(layer.config.visConfig.customMarkers)}
             >
               {layer.config.strokeColorField ? (
-                <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
+                <LayerColorRangeSelector
+                  {...visConfiguratorProps}
+                  property="strokeColorRange"
+                  field="strokeColorField"
+                />
               ) : (
                 <LayerColorSelector
                   {...visConfiguratorProps}
@@ -701,7 +712,11 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
+              <LayerColorRangeSelector
+                {...visConfiguratorProps}
+                property="strokeColorRange"
+                field="strokeColorField"
+              />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -884,7 +899,11 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
+              <LayerColorRangeSelector
+                {...visConfiguratorProps}
+                property="strokeColorRange"
+                field="strokeColorField"
+              />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -963,7 +982,6 @@ export default function LayerConfiguratorFactory(
       const layerConfiguratorProps = getLayerConfiguratorProps(this.props);
       const layerChannelConfigProps = getLayerChannelConfigProps(this.props);
       const dataset = getLayerDataset(datasets, layer);
-      // TODO
       const renderTemplate = layer.type && `_render${capitalizeFirstLetter(layer.type)}LayerConfig`;
 
       return (
@@ -1049,13 +1067,14 @@ LayerColorSelectorFactory.deps = [ColorSelectorFactory];
 export function LayerColorSelectorFactory(ColorSelector) {
   class LayerColorSelector extends Component {
     render() {
-      const {layer, onChange, selectedColor, property = 'color', setColorUI} = this.props;
+      const {layer, onChange, selectedColor, property = 'color', setColorUI, fields} = this.props;
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.color" />
           </PanelLabel>
           <ColorSelector
+            fields={fields}
             colorSets={[
               {
                 selectedColor: selectedColor || layer.config.color,
@@ -1077,13 +1096,22 @@ ArcLayerColorSelectorFactory.deps = [ColorSelectorFactory];
 export function ArcLayerColorSelectorFactory(ColorSelector) {
   class ArcLayerColorSelector extends Component {
     render() {
-      const {layer, onChangeConfig, onChangeVisConfig, property = 'color', setColorUI} = this.props;
+      const {
+        layer,
+        onChangeConfig,
+        onChangeVisConfig,
+        property = 'color',
+        setColorUI,
+        fields
+      } = this.props;
+
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.colorRange" />
           </PanelLabel>
           <ColorSelector
+            fields={fields}
             colorSets={[
               {
                 selectedColor: layer.config.color,
@@ -1114,42 +1142,48 @@ export function LayerColorRangeSelectorFactory(ColorSelector) {
         layer,
         onChange,
         property = 'colorRange',
-        scaleProperty = 'colorScale',
-        domain = 'colorDomain',
-        setColorUI
+        field = 'colorField',
+        scale = 'colorScale',
+        setColorUI,
+        fields
       } = this.props;
-
-      const colorSets = [
-        {
-          selectedColor: layer.config.visConfig[property],
-          isRange: true,
-          setColor: colorRange => {
-            const {colorMap} = layer.config.visConfig[property];
-            const colorRangeUpdated = colorMap
-              ? layer.updateColorMap(property, colorMap, colorRange)
-              : colorRange;
-            onChange({[property]: colorRangeUpdated});
-          }
-        }
-      ];
-
-      const scale = layer.config[scaleProperty];
-      // TODO
-      if (scale === SCALE_TYPES.hexColor) {
-        colorSets[0].selectedColor = {
-          colors: layer.config[domain]
-        };
-      }
-
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.colorRange" />
           </PanelLabel>
           <ColorSelector
-            colorSets={colorSets}
+            fields={fields}
+            colorSets={[
+              {
+                selectedColor: layer.config.visConfig[property],
+                isRange: true,
+                setColor: colorRange => {
+                  layer.updateLayerConfig({
+                    [scale]: SCALE_TYPES.ordinal
+                  });
+                  const {colorMap} = layer.config.visConfig[property];
+                  const colorRangeUpdated = colorMap
+                    ? layer.updateColorMap(property, colorMap, colorRange)
+                    : colorRange;
+                  onChange({[property]: colorRangeUpdated});
+                }
+              }
+            ]}
             colorUI={layer.config.colorUI[property]}
             setColorUI={newConfig => setColorUI(property, newConfig)}
+            onSelectHexColorColumn={colorColumn => {
+              layer.updateLayerConfig({
+                [field]: {
+                  ...layer.config[field],
+                  colorColumn: colorColumn?.name,
+                  colorColumnIdx: colorColumn?.fieldIdx
+                },
+                [scale]: SCALE_TYPES.identity
+              });
+
+              onChange({[property]: hexColorCustomPalette});
+            }}
           />
         </SidePanelSection>
       );

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

@@ -144,14 +144,12 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
                     defaultMessage={label}
                   />
                 }
-                layerId={this.props.id}
                 scaleType={this.props.scaleType}
                 options={scaleOptions}
                 domain={domain}
                 range={range}
                 onSelect={this.props.updateScale}
                 onSetCustomPalette={this.props.updateCustomPalette}
-                fields={this.props.fields}
               />
             </div>
           )}

package/src/constants/color-ranges.js

@@ -61,3 +61,12 @@ export const DEFAULT_COLOR_RANGE = colorRanges.find(({name}) => name === 'Global
   category: 'Uber',
   colors: ['#5A1846', '#900C3F', '#C70039', '#E3611C', '#F1920E', '#FFC300']
 };
+
+export const hexColor = 'hexColor';
+export const hexColorCustomPalette = {
+  name: hexColor,
+  type: hexColor,
+  colors: [],
+  category: 'CARTO',
+  hexColor: true
+};

package/src/constants/default-settings.js

@@ -45,7 +45,7 @@ import {
 import {getHTMLMapModeTileUrl} from 'utils/utils';
 import {TOOLTIP_FORMAT_TYPES} from './tooltip';
 import {LAYER_TYPES} from 'layers/types';
-import {scaleHexColor} from 'utils/custom-scale';
+import {scaleIdentity} from 'utils/custom-scales';
 
 export const ACTION_PREFIX = '@@kepler.gl/';
 export const CLOUDFRONT = 'https://d1a3f4spazzrp4.cloudfront.net/kepler.gl';
@@ -312,8 +312,7 @@ export const SCALE_TYPES = keyMirror({
   custom: null,
   // UI-only type, resolving as custom
   logarithmic: null,
-  // Scale for HexColor column initiative
-  hexColor: null
+  identity: null
 });
 
 export const SCALE_FUNC = {
@@ -325,7 +324,7 @@ export const SCALE_FUNC = {
   [SCALE_TYPES.log]: scaleLog,
   [SCALE_TYPES.point]: scalePoint,
   [SCALE_TYPES.custom]: scaleThreshold,
-  [SCALE_TYPES.hexColor]: scaleHexColor
+  [SCALE_TYPES.identity]: scaleIdentity
 };
 
 export const ALL_FIELD_TYPES = keyMirror({
@@ -439,7 +438,8 @@ export const CHANNEL_SCALES = keyMirror({
   size: null,
   customMarker: null,
   colorAggr: null,
-  sizeAggr: null
+  sizeAggr: null,
+  identity: null
 });
 
 export const AGGREGATION_TYPES = {
@@ -557,10 +557,11 @@ export const linearFieldAggrScaleFunctions = {
 };
 
 export const ordinalFieldScaleFunctions = {
-  [CHANNEL_SCALES.color]: [SCALE_TYPES.ordinal, SCALE_TYPES.hexColor],
+  [CHANNEL_SCALES.color]: [SCALE_TYPES.ordinal],
   [CHANNEL_SCALES.radius]: [SCALE_TYPES.point],
   [CHANNEL_SCALES.size]: [SCALE_TYPES.point],
-  [CHANNEL_SCALES.customMarker]: [SCALE_TYPES.ordinal]
+  [CHANNEL_SCALES.customMarker]: [SCALE_TYPES.ordinal],
+  [CHANNEL_SCALES.identity]: []
 };
 
 export const ordinalFieldAggrScaleFunctions = {

package/src/layers/base-layer.js

@@ -21,7 +21,7 @@
 import {console as Console} from 'global/window';
 import keymirror from 'keymirror';
 import {CollisionFilterExtension, DataFilterExtension} from '@deck.gl/extensions';
-import {COORDINATE_SYSTEM} from '@deck.gl/core';
+import {COORDINATE_SYSTEM, Layer as DeckLayer} from '@deck.gl/core';
 import {_PointLabelLayer as PointLabelLayer} from '@deck.gl/carto';
 import DefaultLayerIcon from './default-layer-icon';
 import {diffUpdateTriggers} from './layer-update';
@@ -38,7 +38,7 @@ import {
   UNKNOWN_COLOR,
   ZOOM_LEVEL_LIMITS
 } from 'constants/default-settings';
-import {COLOR_RANGES} from 'constants/color-ranges';
+import {COLOR_RANGES, hexColor} from 'constants/color-ranges';
 import {DataVizColors} from 'constants/custom-color-ranges';
 import {
   LAYER_VIS_CONFIGS,
@@ -76,6 +76,7 @@ const collisionFilterExtension = new CollisionFilterExtension();
 
 const defaultDataAccessor = dc => d => d;
 const defaultGetFieldValue = (field, d) => field.valueAccessor(d);
+const scaleIdentity = v => v;
 
 export const OVERLAY_TYPE = keymirror({
   deckgl: null,
@@ -99,7 +100,6 @@ export const colorMaker = generateColor();
 class Layer {
   constructor(props = {}) {
     this.id = props.id || generateHashId(LAYER_ID_LENGTH);
-
     // meta
     this.meta = {};
 
@@ -608,8 +608,9 @@ class Layer {
     };
 
     this.updateLayerConfig({colorUI});
-    // if colorUI[prop] is colorRange
-    const isColorRange = visConfig[prop] && visConfig[prop].colors;
+    // if colorUI[prop] is colorRange. If type is hexColor then it's also a range
+    const isColorRange =
+      visConfig[prop] && (visConfig[prop].colors || visConfig[prop].type === hexColor);
 
     if (isColorRange) {
       this.updateColorUIByColorRange(newConfig, prop);
@@ -662,8 +663,9 @@ class Layer {
           colorRangeConfig: {
             ...colorUI[prop].colorRangeConfig,
             type: visConfig[prop].type,
-            steps: visConfig[prop].colors.length,
-            reversed: Boolean(visConfig[prop].reversed)
+            steps: visConfig[prop].colors?.length,
+            reversed: Boolean(visConfig[prop].reversed),
+            hexColumn: this.isColoredByColorColumn(prop)
           }
         }
       }
@@ -731,6 +733,12 @@ class Layer {
   updateCategoryColorMap(colorMap, domain, colorRange) {
     const colors = colorRange.colors;
     const assignedCategories = [];
+    if (colorRange.type === hexColor) {
+      return {
+        ...colorRange,
+        colorMap: []
+      };
+    }
     const newColorMap = colorMap.slice(0, colors.length).map((cMap, index) => {
       assignedCategories.push(cMap[0]);
       return [cMap[0], colors[index]];
@@ -820,7 +828,11 @@ class Layer {
   }
 
   getColorScale(colorScale, colorDomain, colorRange) {
-    if (Array.isArray(colorRange.colorMap)) {
+    if (colorRange.type === hexColor) {
+      return (_, color) => {
+        return hexToRgb(color);
+      };
+    } else if (Array.isArray(colorRange.colorMap)) {
       const cMap = new Map();
       colorRange.colorMap.forEach(([k, v]) => {
         cMap.set(k, typeof v === 'string' ? hexToRgb(v) : v);
@@ -901,7 +913,9 @@ class Layer {
         const aggregationValue = this.config.visConfig[aggregation];
 
         const scaleFunction =
-          channelScaleType === CHANNEL_SCALES.color
+          channelScaleType === CHANNEL_SCALES.identity
+            ? scaleIdentity
+            : channelScaleType === CHANNEL_SCALES.color
             ? this.getColorScale(...args)
             : channelScaleType === CHANNEL_SCALES.customMarker
             ? this.getCustomMarkersScale(
@@ -912,10 +926,12 @@ class Layer {
 
         attributeAccessors[accessor] = d =>
           this.getEncodedChannelValue({
+            channel,
+            dataContainer,
             scale: scaleFunction,
             data: dataAccessor(dataContainer)(d),
             field: fieldConfig,
-            aggregation: aggregationValue,
+            _aggregation: aggregationValue,
             nullValue
           });
       } else if (typeof getAttributeValue === 'function') {
@@ -934,7 +950,7 @@ class Layer {
   }
 
   getVisChannelScale(scale, domain, range, fixed) {
-    if (scale === SCALE_TYPES.ordinal || scale === SCALE_TYPES.hexColor) {
+    if (scale === SCALE_TYPES.ordinal) {
       // @ts-ignore d3-scale type
       return SCALE_FUNC[scale]()
         .domain(domain.slice(0, range.length))
@@ -988,16 +1004,34 @@ class Layer {
   }
 
   getEncodedChannelValue({
+    channel,
     scale,
     data,
     field,
+    dataContainer,
     // In builder we overwrite the getValue function and we use the _aggregation parameter in spatial index layers as the QuadkeyLayer.
-    aggregation,
+    _aggregation,
     nullValue = NO_VALUE_COLOR,
     getValue = defaultGetFieldValue
   }) {
+    let colorColumnValue;
     const {type} = field;
     const value = getValue(field, data);
+    const channelConfig = this.config.visConfig[this.visualChannels[channel].range];
+    const channelField = this.config[this.visualChannels[channel].field];
+
+    if (channelConfig.type === hexColor) {
+      const columnField = {
+        id: channelField.colorColumn,
+        name: channelField.colorColumn,
+        fieldIdx: channelField.colorColumnIdx,
+        valueAccessor: d => {
+          return dataContainer.valueAt(d.index, channelField.colorColumnIdx);
+        }
+      };
+
+      colorColumnValue = getValue(columnField, data);
+    }
 
     if (!notNullorUndefined(value)) {
       return nullValue;
@@ -1007,9 +1041,9 @@ class Layer {
     if (type === ALL_FIELD_TYPES.timestamp) {
       // shouldn't need to convert here
       // scale Function should take care of it
-      attributeValue = scale(new Date(value));
+      attributeValue = scale(new Date(value), colorColumnValue);
     } else {
-      attributeValue = scale(value);
+      attributeValue = scale(value, colorColumnValue);
     }
 
     if (!notNullorUndefined(attributeValue)) {
@@ -1043,13 +1077,14 @@ class Layer {
     if (!this.config.dataId) {
       return {};
     }
-    const layerDataset = datasets[this.config.dataId];
-    const {dataContainer} = layerDataset;
+    const dataset = this.getDataset(datasets);
+    const {dataContainer} = dataset;
 
-    this.updateVisualChannelFields(layerDataset);
+    this.updateVisualChannelFields(dataset);
+    this.updateHexColorDomain(dataset);
 
     const getPosition = this.getPositionAccessor(dataContainer);
-    const dataUpdateTriggers = this.getDataUpdateTriggers(layerDataset);
+    const dataUpdateTriggers = this.getDataUpdateTriggers(dataset);
     const triggerChanged = this.getChangedTriggers(dataUpdateTriggers);
 
     if (triggerChanged.getMeta) {
@@ -1062,7 +1097,7 @@ class Layer {
       // same data
       data = oldLayerData.data;
     } else {
-      data = this.calculateDataAttribute(layerDataset, getPosition);
+      data = this.calculateDataAttribute(dataset, getPosition);
     }
 
     return {data, triggerChanged};
@@ -1074,12 +1109,20 @@ class Layer {
    * @param {Object} dataset
    */
   updateVisualChannelFields(dataset) {
-    for (const {field} of Object.values(this.visualChannels)) {
+    for (const {field, range} of Object.values(this.visualChannels)) {
       const oldField = this.config[field];
+      const isUsingHexColorCode = this.config.visConfig[range].hexColor
       if (!oldField) {
         return;
       }
-      const newDataSetField = dataset.fields.find(fd => fd.name === oldField.name) || null;
+      let newDataSetField = dataset.fields.find(fd => fd.name === oldField.name) || null;
+      if (isUsingHexColorCode) {
+        newDataSetField = {
+          ...newDataSetField,
+          colorColumn: newDataSetField.colorColumn || oldField.colorColumn,
+          colorColumnIdx: newDataSetField.colorColumnIdx || oldField.colorColumnIdx
+        };
+      }
       this.updateLayerConfig({[field]: newDataSetField});
     }
   }
@@ -1100,12 +1143,12 @@ class Layer {
     Object.values(this.visualChannels).forEach(channel => {
       const {scale} = channel;
       const scaleType = this.config[scale];
+
       // ordinal domain is based on dataContainer, if only filter changed
       // no need to update ordinal domain
       if (!newFilter || scaleType !== SCALE_TYPES.ordinal) {
         const {domain} = channel;
         const updatedDomain = this.calculateLayerDomain(table, channel);
-        console.log(this.name, updatedDomain, domain);
         this.updateLayerConfig({[domain]: updatedDomain});
       }
     });
@@ -1152,7 +1195,7 @@ class Layer {
   validateScale(channel) {
     const visualChannel = this.visualChannels[channel];
     const {scale} = visualChannel;
-    if (!scale) {
+    if (!scale || this.config[scale] === SCALE_TYPES.identity) {
       // visualChannel doesn't have scale
       return;
     }
@@ -1222,6 +1265,24 @@ class Layer {
     return dataset.getColumnLayerDomain(dataSetField, scaleType) || defaultDomain;
   }
 
+  updateHexColorDomain(dataset) {
+    if (!dataset) {
+      return this;
+    }
+    Object.values(this.visualChannels).forEach(channel => {
+      const channelConfig = this.config.visConfig[channel.range];
+      const field = this.config[channel.field];
+
+      if (channelConfig?.type === hexColor) {
+        const dataSetField = dataset.fields.find(f => f.name === field.colorColumn);
+        const colors = dataset.getColumnLayerDomain(dataSetField, SCALE_TYPES.ordinal);
+        this.updateLayerVisConfig({[channel.range]: {...channelConfig, colors}});
+      }
+    });
+
+    return this;
+  }
+
   hasHoveredObject(objectInfo) {
     return this.isLayerHovered(objectInfo) && objectInfo.object ? objectInfo.object : null;
   }
@@ -1250,6 +1311,7 @@ class Layer {
     if (!radiusChannel || this.config[radiusChannel.field]) {
       return 1;
     }
+
     return this.config.visConfig.radius;
   }
 
@@ -1312,7 +1374,7 @@ class Layer {
     {getPosition, getRadius, radiusScale, updateTriggers, sharedProps},
     renderOpts
   ) {
-    const {data} = renderOpts;
+    const {data, mapState} = renderOpts;
     const {textLabel, visibilityByZoom} = this.config;
     const extensions = [...sharedProps.extensions, collisionFilterExtension];
 
@@ -1431,6 +1493,13 @@ class Layer {
     // implemented in subclasses
     return () => null;
   }
+
+  isColoredByColorColumn(range) {
+    const field = Object.values(this.visualChannels)?.find(value => value.range === range)?.field;
+    if (field) {
+      return this.config[field].colorColumn;
+    }
+  }
 }
 
 export default Layer;

package/src/layers/layer-factory.d.ts

@@ -31,6 +31,7 @@ export type ColorUI = {
     steps: number;
     reversed: boolean;
     custom: boolean;
+    hexColumn: boolean;
   };
 };
 

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

@@ -238,7 +238,7 @@ export default class PointLayer extends Layer {
   formatLayerData(datasets, oldLayerData) {
     const {textLabel} = this.config;
     const {gpuFilter, dataContainer} = datasets[this.config.dataId];
-    const {data, triggerChanged} = this.updateData(datasets, oldLayerData);
+    const {data} = this.updateData(datasets, oldLayerData);
     const getPosition = this.getPositionAccessor(dataContainer);
 
     // get all distinct characters in the text labels

package/src/localization/en.js

@@ -448,7 +448,10 @@ export default {
     customPalette: 'Custom Palette',
     steps: 'steps',
     type: 'type',
-    reversed: 'reversed'
+    reversed: 'reversed',
+    hexColumn: {
+      field: 'Color field'
+    }
   },
   customPalette: {
     apply: 'Apply',

package/src/reducers/vis-state-merger.js

@@ -423,6 +423,7 @@ export function validateSavedTextLabel(fields, [layerTextLabel], savedTextLabel)
 export function validateSavedVisualChannels(fields, newLayer, savedLayer) {
   Object.values(newLayer.visualChannels).forEach(({field, scale, key}) => {
     let foundField;
+    const colorFieldProps = {};
     if (savedLayer.config) {
       if (savedLayer.config[field]) {
         foundField = fields.find(
@@ -430,8 +431,19 @@ export function validateSavedVisualChannels(fields, newLayer, savedLayer) {
         );
       }
 
+      if (savedLayer.config[field]?.colorColumn) {
+        const colorColumnField = fields.find(
+          fd => savedLayer.config && fd.name === savedLayer.config[field].colorColumn
+        );
+
+        if (colorColumnField) {
+          colorFieldProps.colorColumn = colorColumnField.name;
+          colorFieldProps.colorColumnIdx = colorColumnField.fieldIdx;
+        }
+      }
+
       const foundChannel = {
-        ...(foundField ? {[field]: foundField} : {}),
+        ...(foundField ? {[field]: {...foundField, ...colorFieldProps}} : {}),
         ...(savedLayer.config[scale] ? {[scale]: savedLayer.config[scale]} : {})
       };
       if (Object.keys(foundChannel).length) {

package/src/schemas/vis-state-schema.js

@@ -340,7 +340,7 @@ class VisualChannelSchemaV1 extends Schema {
         (accu, key) => ({
           ...accu,
           [visualChannels[key].field]: layer.config[visualChannels[key].field]
-            ? pick(layer.config[visualChannels[key].field], ['name', 'type'])
+            ? pick(layer.config[visualChannels[key].field], ['name', 'type', 'colorColumn'])
             : null,
           [visualChannels[key].scale]: layer.config[visualChannels[key].scale]
         }),

package/src/utils/{custom-scale.js → custom-scales.js}

@@ -1,14 +1,12 @@
-import {hexToRgb} from './color-utils';
-
-export function scaleHexColor() {
+export function scaleIdentity() {
   let unknown;
   function scale(x) {
-    return x === null ? unknown : hexToRgb(x);
+    return x === null ? unknown : x;
   }
 
   scale.invert = scale;
 
-  scale.domain = scale.range = scaleHexColor;
+  scale.domain = scale.range = scaleIdentity;
 
   scale.unknown = u => {
     if (u) {

package/src/utils/table-utils/kepler-table.js

@@ -324,7 +324,6 @@ class KeplerTable {
     switch (scaleType) {
       case SCALE_TYPES.ordinal:
       case SCALE_TYPES.point:
-      case SCALE_TYPES.hexColor:
         // do not recalculate ordinal domain based on filtered data
         // don't need to update ordinal domain every time
         return getOrdinalDomain(dataContainer, valueAccessor);