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

package/src/layers/base-layer.js

@@ -25,6 +25,7 @@ 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';
+import {rgb} from 'd3-color';
 
 import {
   ALL_FIELD_TYPES,
@@ -38,7 +39,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,
@@ -53,7 +54,7 @@ import {generateHashId, isPlainObject} from 'utils/utils';
 import {getLatLngBounds, notNullorUndefined} from 'utils/data-utils';
 import {getSampleData} from 'utils/table-utils/data-container-utils';
 
-import {hexToRgb, getColorGroupByName, reverseColorRange} from 'utils/color-utils';
+import {hexToRgb, getColorGroupByName, reverseColorRange, checkColorOrFallback} from 'utils/color-utils';
 import {getMaskExtensionProps} from 'utils/layer-utils';
 import {scaleOrdinal} from 'd3-scale';
 
@@ -100,10 +101,12 @@ export const colorMaker = generateColor();
 class Layer {
   constructor(props = {}) {
     this.id = props.id || generateHashId(LAYER_ID_LENGTH);
-
     // meta
     this.meta = {};
 
+    // legendSettings
+    this.legendSettings = {};
+
     // visConfigSettings
     this.visConfigSettings = {};
 
@@ -609,8 +612,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);
@@ -663,8 +667,10 @@ 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.getHexColumn(prop),
+            isHexColumn: this.isColoredByColorColumn(prop)
           }
         }
       }
@@ -732,6 +738,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]];
@@ -821,7 +833,12 @@ class Layer {
   }
 
   getColorScale(colorScale, colorDomain, colorRange) {
-    if (Array.isArray(colorRange.colorMap)) {
+    if (colorRange.type === hexColor) {
+      return (_, color) => {
+        const {r, g, b} = rgb(color);
+        return [r, g, b].some(isNaN) ? UNKNOWN_COLOR : [r, g, b];
+      };
+    } else if (Array.isArray(colorRange.colorMap)) {
       const cMap = new Map();
       colorRange.colorMap.forEach(([k, v]) => {
         cMap.set(k, typeof v === 'string' ? hexToRgb(v) : v);
@@ -914,13 +931,15 @@ class Layer {
             : this.getVisChannelScale(...args, isFixed);
 
         attributeAccessors[accessor] = d =>
-          this.getEncodedChannelValue(
-            scaleFunction,
-            dataAccessor(dataContainer)(d),
-            fieldConfig,
-            aggregationValue,
+          this.getEncodedChannelValue({
+            channel,
+            dataContainer,
+            scale: scaleFunction,
+            data: dataAccessor(dataContainer)(d),
+            field: fieldConfig,
+            _aggregation: aggregationValue,
             nullValue
-          );
+          });
       } else if (typeof getAttributeValue === 'function') {
         attributeAccessors[accessor] = getAttributeValue(this.config);
       } else {
@@ -990,17 +1009,35 @@ class Layer {
     return triggerChanged;
   }
 
-  getEncodedChannelValue(
+  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,
     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;
@@ -1010,9 +1047,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)) {
@@ -1026,6 +1063,10 @@ class Layer {
     this.meta = {...this.meta, ...meta};
   }
 
+  updateLayerLegend(settings) {
+    this.legendSettings = {...this.legendSettings, ...settings};
+  }
+
   getDataUpdateTriggers({filteredIndex, id, allData}) {
     const {columns} = this.config;
 
@@ -1046,13 +1087,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) {
@@ -1065,7 +1107,7 @@ class Layer {
       // same data
       data = oldLayerData.data;
     } else {
-      data = this.calculateDataAttribute(layerDataset, getPosition);
+      data = this.calculateDataAttribute(dataset, getPosition);
     }
 
     return {data, triggerChanged};
@@ -1077,12 +1119,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});
     }
   }
@@ -1103,6 +1153,7 @@ 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) {
@@ -1153,8 +1204,11 @@ class Layer {
    */
   validateScale(channel) {
     const visualChannel = this.visualChannels[channel];
-    const {scale} = visualChannel;
-    if (!scale) {
+    const {scale, range} = visualChannel;
+    if (
+      !scale ||
+      (this.isColoredByColorColumn(range) && this.config[scale] === SCALE_TYPES.identity)
+    ) {
       // visualChannel doesn't have scale
       return;
     }
@@ -1224,6 +1278,49 @@ 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)
+          .map(c => checkColorOrFallback(c));
+        this.updateLayerVisConfig({
+          [channel.range]: {...channelConfig, colors}
+        });
+      }
+    });
+
+    return this;
+  }
+
+  calculateHexColumnLegend(datasets) {
+    const dataset = this.getDataset(datasets);
+    if (!datasets) {
+      return;
+    }
+
+    const legendSettings = Object.keys(this.visualChannels).reduce((legends, channel) => {
+      const {range, field: channelField} = this.visualChannels[channel];
+      const channelConfig = this.config.visConfig[range];
+      const field = this.config[channelField];
+
+      if (channelConfig?.type === hexColor) {
+        const dataSetField = dataset.fields.find(f => f.name === field.colorColumn);
+        const legend = dataset.calculateLegend(field, dataSetField);
+        legends[channel] = legend;
+      }
+      return legends;
+    }, {});
+    this.updateLayerLegend(legendSettings);
+  }
+
   hasHoveredObject(objectInfo) {
     return this.isLayerHovered(objectInfo) && objectInfo.object ? objectInfo.object : null;
   }
@@ -1251,9 +1348,9 @@ class Layer {
 
     if (!radiusChannel || this.config[radiusChannel.field]) {
       return 1;
-    } else {
-      return this.config.visConfig.radius;
     }
+
+    return this.config.visConfig.radius;
   }
 
   getMaxMarkerSize() {
@@ -1315,7 +1412,7 @@ class Layer {
     {getPosition, getRadius, radiusScale, updateTriggers, sharedProps},
     renderOpts
   ) {
-    const {data, mapState} = renderOpts;
+    const {data} = renderOpts;
     const {textLabel, visibilityByZoom} = this.config;
     const extensions = [...sharedProps.extensions, collisionFilterExtension];
 
@@ -1434,6 +1531,17 @@ class Layer {
     // implemented in subclasses
     return () => null;
   }
+
+  getHexColumn(range) {
+    const field = Object.values(this.visualChannels)?.find(value => value.range === range)?.field;
+    if (field) {
+      return this.config[field].colorColumn;
+    }
+  }
+
+  isColoredByColorColumn(range) {
+    return this.config.visConfig[range]?.hexColor;
+  }
 }
 
 export default Layer;

package/src/layers/index.d.ts

@@ -92,6 +92,8 @@ export class Layer {
   hasInteractivity: boolean;
   hasAllColumns(): boolean;
   updateLayerConfig(p: Partial<LayerConfig>): Layer;
+  updateLayerMeta(p: any): Layer
+  updateLayerLegend(p: any): Layer
   updateLayerDomain(datasets: Datasets, filter?: Filter): Layer;
   updateLayerVisualChannel(dataset: KeplerTable, channel: string): Layer;
   shouldCalculateLayerData(props: string[]): boolean;
@@ -100,7 +102,7 @@ export class Layer {
   isValidToSave(): boolean;
   validateVisualChannel(channel: string);
   getVisualChannelDescription(key: string): {label: string, measure: string};
-
+  calculateHexColumnLegend(datasets: Datasets): any;
   static findDefaultLayerProps(dataset: KeplerTable, foundLayers?: any[]);
   // static findDefaultColumnField(defaultFields, allFields)
 }

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]
         }),
@@ -365,6 +365,25 @@ class VisualChannelSchemaV1 extends Schema {
     };
   }
 }
+/**
+ * V1: save [channel]: [{ label, color }, ...] for legend
+ */
+class LegendSettingsV1 extends Schema {
+  save(legendSettings, parents) {
+    return {
+      [this.key]: Object.keys(legendSettings).reduce((accu, key) => {
+        accu[key] = legendSettings[key];
+        return accu;
+      }, {})
+    };
+  }
+  load(ls, parents, accumulator) {
+    return {
+      ...accumulator,
+      [this.key]: ls
+    };
+  }
+}
 const visConfigModificationV1 = {
   point: (visConfig, parents, accumulated) => {
     const modified = {};
@@ -459,6 +478,10 @@ export const layerPropsV1 = {
       })
     }
   }),
+  legendSettings: new LegendSettingsV1({
+    version: VERSIONS.v1,
+    key: 'legendSettings'
+  }),
   visualChannels: new VisualChannelSchemaV1({
     version: VERSIONS.v1,
     key: 'visualChannels'

package/src/utils/color-utils.js

@@ -18,6 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+import {UNKNOWN_COLOR} from 'constants/default-settings';
+import {rgb as d3Rgb} from 'd3-color';
+
 /**
  * get r g b from hex code
  *
@@ -104,3 +107,9 @@ export function createLinearGradient(direction, colors) {
 
   return `linear-gradient(to ${direction}, ${bands.join(',')})`;
 }
+
+export function checkColorOrFallback(hexColor, fallback = UNKNOWN_COLOR) {
+  const color = d3Rgb(hexColor);
+  const {r, g, b} = color;
+  return [r, g, b].some(isNaN) ? d3Rgb(...fallback).formatHex() : hexColor;
+}

package/src/utils/custom-scales.js

@@ -0,0 +1,20 @@
+export function scaleIdentity() {
+  let unknown;
+  function scale(x) {
+    return x === null ? unknown : x;
+  }
+
+  scale.invert = scale;
+
+  scale.domain = scale.range = scaleIdentity;
+
+  scale.unknown = u => {
+    if (u) {
+      unknown = u;
+    }
+
+    return scale;
+  };
+
+  return scale;
+}

package/src/utils/data-utils.d.ts

@@ -13,6 +13,7 @@ export function isPlainObject(d: any): boolean;
 export function numberSort(a: any, b: any): any;
 export function unique(values: any[]): any[];
 export function uniqueSortedByFrequency(values: any[]): any[];
+export function uniqueSortedPairByFrequency(values: any[]): any[];
 export function arrayMove(array: any[], from: number, to: number);
 export function getSortingFunction(fieldType: string): numberSort | undefined;
 export function preciseRound(num: number, decimals: number): string;

package/src/utils/data-utils.js

@@ -426,3 +426,22 @@ export function datetimeFormatter(timezone) {
           .format(format)
     : format => ts => moment.utc(ts).format(format);
 }
+
+export function uniqueSortedPairByFrequency(values) {
+  const frequencies = values.reduce((res, value) => {
+    if (notNullorUndefined(value)) {
+      if (!res[value]) {
+        res[value] = {
+          key: value,
+          frequency: 1
+        };
+      }
+      res[value].frequency += 1;
+    }
+    return res;
+  }, {});
+
+  return Object.values(frequencies)
+    .sort((a, b) => b.frequency - a.frequency)
+    .map(({key: [left, right]}) => ({left, right}));
+}

package/src/utils/index.js

@@ -27,7 +27,7 @@ export {
   FIELD_DISPLAY_FORMAT
 } from './data-utils';
 export {createNewDataEntry, datasetColorMaker, findDefaultColorField} from './dataset-utils';
-export {hexToRgb} from './color-utils';
+export {hexToRgb, checkColorOrFallback} from './color-utils';
 export {errorNotification} from './notifications-utils';
 export {dataURItoBlob, downloadFile} from './export-utils';
 export {

package/src/utils/layer-utils.js

@@ -70,6 +70,7 @@ export function calculateLayerData(layer, state, oldLayerData) {
   }
 
   const layerData = layer.formatLayerData(state.datasets, oldLayerData);
+  layer.calculateHexColumnLegend(state.datasets);
   return {layerData, layer};
 }
 

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

@@ -45,6 +45,8 @@ import {
 import {ALL_FIELD_TYPES, SCALE_TYPES} from 'constants/default-settings';
 
 import {createDataContainer} from './data-container-utils';
+import {uniqueSortedPairByFrequency} from 'utils/data-utils';
+import {checkColorOrFallback} from 'utils/color-utils';
 
 // Unique identifier of each field
 const FID_KEY = 'name';
@@ -342,6 +344,26 @@ class KeplerTable {
     }
   }
 
+  calculateLegend(leftField, rightField) {
+    const limitOfNumberOfLegendEntries = 20;
+    const leftValues = this.dataContainer.mapIndex(leftField.valueAccessor);
+    const rightValues = this.dataContainer.mapIndex(rightField.valueAccessor);
+
+    const pairing = leftValues.reduce((previous, current, idx) => {
+      previous.push([current, rightValues[idx]]);
+      return previous;
+    }, []);
+
+    return uniqueSortedPairByFrequency(pairing)
+      .map(row => {
+        return {
+          label: row.left,
+          color: checkColorOrFallback(row.right)
+        };
+      })
+      .slice(0, limitOfNumberOfLegendEntries + 1); // Limit to limitOfNumberOfLegendEntries + 1, then limit to limitOfNumberOfLegendEntries in LegendManagers
+  }
+
   /**
    * Get a sample of rows to calculate layer boundaries
    */