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

package/src/components/side-panel/layer-panel/color-selector.js

@@ -125,10 +125,6 @@ function ColorSelectorFactory(SingleColorPalette, ColorRangeSelector) {
       }
     };
 
-    _onSelectColorColumn = column => {
-      this.props.onSelectHexColorColumn(column);
-    };
-
     _showDropdown = (e, i) => {
       e.stopPropagation();
       e.preventDefault();
@@ -177,7 +173,7 @@ function ColorSelectorFactory(SingleColorPalette, ColorRangeSelector) {
                 <ColorRangeSelector
                   selectedColorRange={colorSets[editing].selectedColor}
                   onSelectColorRange={this._onSelectColor}
-                  onSelectColorColumn={this._onSelectColorColumn}
+                  onSelectColorColumn={this.props.onSelectHexColorColumn}
                   setColorPaletteUI={this.props.setColorUI}
                   fields={this.props.fields}
                   colorPaletteUI={colorUI}

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

@@ -177,8 +177,6 @@ export default function LayerConfiguratorFactory(
                 channel={layer.visualChannels.color}
                 {...layerChannelConfigProps}
               />
-            </ConfigGroupCollapsibleContent>
-            <ConfigGroupCollapsibleContent>
               <VisConfigSlider {...layer.visConfigSettings.opacity} {...visConfiguratorProps} />
             </ConfigGroupCollapsibleContent>
           </LayerConfigGroup>
@@ -192,11 +190,7 @@ export default function LayerConfiguratorFactory(
               disabled={Boolean(layer.config.visConfig.customMarkers)}
             >
               {layer.config.strokeColorField ? (
-                <LayerColorRangeSelector
-                  {...visConfiguratorProps}
-                  property="strokeColorRange"
-                  field="strokeColorField"
-                />
+                <LayerColorRangeSelector {...visConfiguratorProps} channel="strokeColor" />
               ) : (
                 <LayerColorSelector
                   {...visConfiguratorProps}
@@ -712,11 +706,7 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector
-                {...visConfiguratorProps}
-                property="strokeColorRange"
-                field="strokeColorField"
-              />
+              <LayerColorRangeSelector {...visConfiguratorProps} channel="strokeColor" />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -899,11 +889,7 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector
-                {...visConfiguratorProps}
-                property="strokeColorRange"
-                field="strokeColorField"
-              />
+              <LayerColorRangeSelector {...visConfiguratorProps} channel="strokeColor" />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -1141,12 +1127,12 @@ export function LayerColorRangeSelectorFactory(ColorSelector) {
       const {
         layer,
         onChange,
-        property = 'colorRange',
-        field = 'colorField',
-        scale = 'colorScale',
+        channel = 'color',
         setColorUI,
-        fields
+        fields,
+        handleCustomOnSelectHexColumn = () => null
       } = this.props;
+      const {range: property, field, scale} = layer.visualChannels[channel];
       return (
         <SidePanelSection>
           <PanelLabel>
@@ -1159,20 +1145,21 @@ export function LayerColorRangeSelectorFactory(ColorSelector) {
                 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});
+                  layer.validateScale(channel); // Validate scale to ensure that it changes from `identity` to the correct one.
                 }
               }
             ]}
             colorUI={layer.config.colorUI[property]}
             setColorUI={newConfig => setColorUI(property, newConfig)}
             onSelectHexColorColumn={colorColumn => {
+              // It's defined in CN: see workspace-www/src/features/builder/ui/KeplerGl/SidePanel/LayerPanel/LayerColorRangeSelector.tsx
+              handleCustomOnSelectHexColumn(layer, colorColumn);
+
               layer.updateLayerConfig({
                 [field]: {
                   ...layer.config[field],

package/src/layers/base-layer.js

@@ -103,6 +103,9 @@ class Layer {
     // meta
     this.meta = {};
 
+    // legendSettings
+    this.legendSettings = {};
+
     // visConfigSettings
     this.visConfigSettings = {};
 
@@ -665,7 +668,8 @@ class Layer {
             type: visConfig[prop].type,
             steps: visConfig[prop].colors?.length,
             reversed: Boolean(visConfig[prop].reversed),
-            hexColumn: this.isColoredByColorColumn(prop)
+            hexColumn: this.getHexColumn(prop),
+            isHexColumn: this.isColoredByColorColumn(prop)
           }
         }
       }
@@ -1057,6 +1061,10 @@ class Layer {
     this.meta = {...this.meta, ...meta};
   }
 
+  updateLayerLegend(settings) {
+    this.legendSettings = {...this.legendSettings, ...settings};
+  }
+
   getDataUpdateTriggers({filteredIndex, id, allData}) {
     const {columns} = this.config;
 
@@ -1111,7 +1119,7 @@ class Layer {
   updateVisualChannelFields(dataset) {
     for (const {field, range} of Object.values(this.visualChannels)) {
       const oldField = this.config[field];
-      const isUsingHexColorCode = this.config.visConfig[range].hexColor
+      const isUsingHexColorCode = this.config.visConfig[range].hexColor;
       if (!oldField) {
         return;
       }
@@ -1194,8 +1202,11 @@ class Layer {
    */
   validateScale(channel) {
     const visualChannel = this.visualChannels[channel];
-    const {scale} = visualChannel;
-    if (!scale || this.config[scale] === SCALE_TYPES.identity) {
+    const {scale, range} = visualChannel;
+    if (
+      !scale ||
+      (this.isColoredByColorColumn(range) && this.config[scale] === SCALE_TYPES.identity)
+    ) {
       // visualChannel doesn't have scale
       return;
     }
@@ -1283,6 +1294,27 @@ class Layer {
     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;
   }
@@ -1374,7 +1406,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];
 
@@ -1494,12 +1526,16 @@ class Layer {
     return () => null;
   }
 
-  isColoredByColorColumn(range) {
+  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/schemas/vis-state-schema.js

@@ -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/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/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,7 @@ import {
 import {ALL_FIELD_TYPES, SCALE_TYPES} from 'constants/default-settings';
 
 import {createDataContainer} from './data-container-utils';
+import {uniqueSortedPairByFrequency} from 'utils/data-utils';
 
 // Unique identifier of each field
 const FID_KEY = 'name';
@@ -342,6 +343,17 @@ class KeplerTable {
     }
   }
 
+  calculateLegend(leftField, rightField) {
+    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 => ({label: row.left, color: row.right}));
+  }
+
   /**
    * Get a sample of rows to calculate layer boundaries
    */