@carto/api-client 0.5.15-alpha.raster-1 → 0.5.15-alpha.raster-3

package/package.json

@@ -8,7 +8,7 @@
   "homepage": "https://github.com/CartoDB/carto-api-client#readme",
   "author": "Don McCurdy <donmccurdy@carto.com>",
   "packageManager": "yarn@4.3.1",
-  "version": "0.5.15-alpha.raster-1",
+  "version": "0.5.15-alpha.raster-3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/fetch-map/index.ts

@@ -15,3 +15,4 @@ export type {
 export * from './basemap.js';
 export * from './layer-map.js';
 export * from './parse-map.js';
+export {getLog10ScaleSteps as _getLog10ScaleSteps} from './utils.js';

package/src/fetch-map/layer-map.ts

@@ -25,6 +25,7 @@ import {
   createBinaryProxy,
   formatDate,
   formatTimestamp,
+  getLog10ScaleSteps,
   scaleIdentity,
 } from './utils.js';
 import type {
@@ -74,7 +75,21 @@ function identity<T>(v: T): T {
   return v;
 }
 
+const hexToRGB = (c: any) => {
+  const {r, g, b} = rgb(c);
+  return [r, g, b];
+};
+
+const rgbToHex = (c: number[]) => {
+  const [r, g, b] = c;
+  const rStr = r.toString(16).padStart(2, '0');
+  const gStr = g.toString(16).padStart(2, '0');
+  const bStr = b.toString(16).padStart(2, '0');
+  return `#${rStr}${gStr}${bStr}`.toUpperCase();
+};
+
 const UNKNOWN_COLOR = '#868d91';
+const UNKNOWN_COLOR_RGB = hexToRGB(UNKNOWN_COLOR);
 
 export const OPACITY_MAP: Record<string, string> = {
   getFillColor: 'opacity',
@@ -318,11 +333,16 @@ function findAccessorKey(keys: string[], properties: any): string[] {
 export function getColorAccessor(
   {name, colorColumn}: VisualChannelField,
   scaleType: ScaleType,
-  {aggregation, range}: {aggregation: string; range: any},
+  {aggregation, range}: {aggregation?: string; range: ColorRange},
   opacity: number | undefined,
   data: TilejsonResult
-): {accessor: any; scale: any} {
-  const scale = calculateLayerScale(
+): {
+  accessor: any;
+  domain: number[] | string[];
+  scaleDomain: number[] | string[];
+  range: string[];
+} {
+  const {scale, domain} = calculateLayerScale(
     colorColumn || name,
     scaleType,
     range,
@@ -336,10 +356,15 @@ export function getColorAccessor(
       accessorKeys = findAccessorKey(accessorKeys, properties);
     }
     const propertyValue = properties[accessorKeys[0]];
-    const {r, g, b} = rgb(scale(propertyValue));
+    const [r, g, b] = scale(propertyValue);
     return [r, g, b, propertyValue === null ? 0 : alpha];
   };
-  return {accessor: normalizeAccessor(accessor, data), scale};
+  return {
+    accessor: normalizeAccessor(accessor, data),
+    scaleDomain: scale.domain(),
+    domain,
+    range: scale.range().map(rgbToHex),
+  };
 }
 
 export function calculateLayerScale(
@@ -347,29 +372,48 @@ export function calculateLayerScale(
   scaleType: ScaleType,
   range: ColorRange,
   data: TilejsonResult
-) {
+): {scale: D3Scale; domain: string[] | number[]} {
   let domain: string[] | number[] = [];
+  let scaleDomain: number[] | undefined;
   let scaleColor: string[] = [];
+  const {colors} = range;
 
-  if (scaleType !== 'identity') {
-    const {colorMap, colors} = range;
+  if (scaleType === 'custom') {
+    if (range.uiCustomScaleType === 'logarithmic') {
+      domain = calculateDomain(data, name, scaleType, colors.length);
+      const [min, max] = domain as number[];
+      scaleDomain = getLog10ScaleSteps({
+        min,
+        max,
+        steps: colors.length,
+      });
 
-    if (Array.isArray(colorMap)) {
+      scaleColor = colors;
+    } else if (range.colorMap) {
+      const {colorMap} = range;
       colorMap.forEach(([value, color]) => {
         (domain as string[]).push(value);
         scaleColor.push(color);
       });
-    } else {
-      domain = calculateDomain(data, name, scaleType, colors.length);
-      scaleColor = colors;
     }
+  } else if (scaleType !== 'identity') {
+    domain = calculateDomain(data, name, scaleType, colors.length);
+    scaleColor = colors;
 
     if (scaleType === 'ordinal') {
       domain = domain.slice(0, scaleColor.length);
     }
   }
 
-  return createColorScale(scaleType, domain, scaleColor, UNKNOWN_COLOR);
+  return {
+    scale: createColorScale(
+      scaleType,
+      scaleDomain || domain,
+      scaleColor.map(hexToRGB),
+      UNKNOWN_COLOR_RGB
+    ),
+    domain,
+  };
 }
 
 export function createColorScale<T>(
@@ -457,13 +501,22 @@ export function getSizeAccessor(
   {name}: VisualChannelField,
   scaleType: ScaleType | undefined,
   aggregation: string | null | undefined,
-  range: Iterable<Range> | null | undefined,
+  range: number[] | undefined,
   data: TilejsonResult
-): {accessor: any; scale: any} {
+): {
+  accessor: any;
+  domain: number[];
+  scaleDomain: number[];
+  range: number[] | undefined;
+} {
   const scale = scaleType ? SCALE_FUNCS[scaleType]() : identity;
-  if (scaleType) {
+  let domain: number[] = [];
+  if (scaleType && range) {
     if (aggregation !== AggregationTypes.Count) {
-      (scale as D3Scale).domain(calculateDomain(data, name, scaleType));
+      domain = calculateDomain(data, name, scaleType) as number[];
+      (scale as D3Scale).domain(domain);
+    } else {
+      domain = (scale as D3Scale).domain();
     }
     (scale as D3Scale).range(range);
   }
@@ -476,7 +529,12 @@ export function getSizeAccessor(
     const propertyValue = properties[accessorKeys[0]];
     return scale(propertyValue);
   };
-  return {accessor: normalizeAccessor(accessor, data), scale};
+  return {
+    accessor: normalizeAccessor(accessor, data),
+    domain,
+    scaleDomain: domain,
+    range,
+  };
 }
 
 const FORMATS: Record<string, (value: any) => string> = {

package/src/fetch-map/parse-map.ts

@@ -16,7 +16,6 @@ import {
   TEXT_NUMBER_FORMATTER,
   TEXT_LABEL_INDEX,
   TEXT_OUTLINE_OPACITY,
-  type D3Scale,
   type ScaleType,
 } from './layer-map.js';
 
@@ -39,10 +38,15 @@ import {
 import type {TilejsonResult} from '../sources/types.js';
 
 export type Scale = {
+  type: ScaleType;
   field: VisualChannelField;
+
+  /** Natural domain of the scale, as defined by the data  */
   domain: string[] | number[];
-  range: string[] | number[];
-  type: ScaleType;
+
+  /** Domain of the user to construct d3 scale */
+  scaleDomain?: string[] | number[];
+  range?: string[] | number[];
 };
 
 export type ScaleKey =
@@ -52,11 +56,13 @@ export type ScaleKey =
   | 'elevation'
   | 'weight';
 
+export type Scales = Partial<Record<ScaleKey, Scale>>;
+
 export type LayerDescriptor = {
   type: LayerType;
   props: Record<string, any>;
   filters?: Filters;
-  scales: Partial<Record<ScaleKey, Scale>>;
+  scales: Scales;
 };
 
 export type ParseMapResult = {
@@ -232,7 +238,7 @@ function createStyleProps(config: MapLayerConfig, mapping: any) {
     if (Array.isArray(result[colorAccessor])) {
       const color = [...result[colorAccessor]];
       const opacityKey = OPACITY_MAP[colorAccessor];
-      const opacity = config.visConfig[opacityKey as keyof VisConfig];
+      const opacity = config.visConfig[opacityKey as keyof VisConfig] as number;
       color[3] = opacityToAlpha(opacity);
       result[colorAccessor] = color;
     }
@@ -244,15 +250,6 @@ function createStyleProps(config: MapLayerConfig, mapping: any) {
   return result;
 }
 
-function domainAndRangeFromScale(
-  scale: D3Scale
-): Pick<Scale, 'domain' | 'range'> {
-  return {
-    domain: scale.domain(),
-    range: scale.range(),
-  };
-}
-
 function createChannelProps(
   id: string,
   layerType: LayerType,
@@ -264,17 +261,6 @@ function createChannelProps(
   channelProps: Record<string, any>;
   scales: Partial<Record<ScaleKey, Scale>>;
 } {
-  const {
-    colorField,
-    colorScale,
-    radiusField,
-    radiusScale,
-    strokeColorField,
-    strokeColorScale,
-    sizeField: strokeWidthField,
-    sizeScale: strokeWidthScale,
-    weightField,
-  } = visualChannels;
   if (layerType === 'raster') {
     const rasterMetadata = data.raster_metadata;
     if (!rasterMetadata) {
@@ -291,7 +277,7 @@ function createChannelProps(
           rasterMetadata,
           visualChannels,
         }),
-        scales: {},
+        scales: {}, // TODO
       };
     } else {
       return {
@@ -301,42 +287,38 @@ function createChannelProps(
           rasterMetadata,
         }),
         scales: {
-          ...(colorField && {
-            fillColor: {
-              field: colorField,
-              type: 'ordinal',
-              domain: [],
-              range: [],
-            },
-          }),
+          // TODO
         },
       };
     }
   }
-  const {heightField, heightScale} = visualChannels;
   const {textLabel, visConfig} = config;
   const result: Record<string, any> = {};
   const updateTriggers: Record<string, any> = {};
 
   const scales: Record<string, Scale> = {};
 
-  if (colorField) {
-    const {colorAggregation: aggregation, colorRange: range} = visConfig;
-    const {accessor, scale} = getColorAccessor(
-      colorField,
-      colorScale!,
-      {aggregation, range},
-      visConfig.opacity,
-      data
-    );
-    result.getFillColor = accessor;
-    scales.fillColor = updateTriggers.getFillColor = {
-      field: colorField,
-      type: colorScale!,
-      ...domainAndRangeFromScale(scale),
-    };
-  } else if (visConfig.filled) {
-    scales.fillColor = {} as any;
+  // fill color
+  {
+    const {colorField, colorScale} = visualChannels;
+    const {colorRange, colorAggregation} = visConfig;
+    if (colorField && colorScale && colorRange) {
+      const {accessor, ...scaleProps} = getColorAccessor(
+        colorField,
+        colorScale,
+        {aggregation: colorAggregation, range: colorRange},
+        visConfig.opacity,
+        data
+      );
+      result.getFillColor = accessor;
+      scales.fillColor = updateTriggers.getFillColor = {
+        field: colorField,
+        type: colorScale,
+        ...scaleProps,
+      };
+    } else {
+      scales.fillColor = {} as any;
+    }
   }
 
   if (layerType === 'clusterTile') {
@@ -402,87 +384,115 @@ function createChannelProps(
     };
   }
 
-  if (radiusField) {
-    const {accessor, scale} = getSizeAccessor(
-      radiusField,
-      radiusScale,
-      visConfig.sizeAggregation,
-      visConfig.radiusRange || visConfig.sizeRange,
-      data
-    );
-    result.getPointRadius = accessor;
-    scales.pointRadius = updateTriggers.getPointRadius = {
-      field: radiusField,
-      type: radiusScale || 'identity',
-      ...domainAndRangeFromScale(scale),
-    };
+  // point radius
+  {
+    const radiusRange = visConfig.radiusRange;
+    const {radiusField, radiusScale} = visualChannels;
+    if (radiusField && radiusRange && radiusScale) {
+      const {accessor, ...scaleProps} = getSizeAccessor(
+        radiusField,
+        radiusScale,
+        visConfig.sizeAggregation,
+        radiusRange,
+        data
+      );
+      result.getPointRadius = accessor;
+      scales.pointRadius = updateTriggers.getPointRadius = {
+        field: radiusField,
+        type: radiusScale,
+        ...scaleProps,
+      };
+    }
   }
 
-  if (strokeColorField) {
-    const opacity =
-      visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity : 1;
-    const {strokeColorAggregation: aggregation, strokeColorRange: range} =
-      visConfig;
-    const {accessor, scale} = getColorAccessor(
-      strokeColorField,
-      strokeColorScale!,
-      {aggregation, range},
-      opacity,
-      data
-    );
-    result.getLineColor = accessor;
-    scales.lineColor = updateTriggers.getLineColor = {
-      field: strokeColorField,
-      type: strokeColorScale!,
-      ...domainAndRangeFromScale(scale),
-    };
+  // stroke/ouline color
+  {
+    const strokeColorRange = visConfig.strokeColorRange;
+    const {strokeColorScale, strokeColorField} = visualChannels;
+    if (strokeColorField && strokeColorRange && strokeColorScale) {
+      const {strokeColorAggregation: aggregation} = visConfig;
+      const opacity =
+        visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity : 1;
+
+      const {accessor, ...scaleProps} = getColorAccessor(
+        strokeColorField,
+        strokeColorScale,
+        {aggregation, range: strokeColorRange},
+        opacity,
+        data
+      );
+      result.getLineColor = accessor;
+      scales.lineColor = updateTriggers.getLineColor = {
+        field: strokeColorField,
+        type: strokeColorScale,
+        ...scaleProps,
+      };
+    }
   }
-  if (strokeWidthField) {
-    const {accessor, scale} = getSizeAccessor(
-      strokeWidthField,
-      strokeWidthScale,
-      visConfig.sizeAggregation,
-      visConfig.sizeRange,
-      data
-    );
-    result.getLineWidth = accessor;
-    scales.lineWidth = updateTriggers.getLineWidth = {
-      field: strokeWidthField,
-      type: strokeWidthScale || 'identity',
-      ...domainAndRangeFromScale(scale),
-    };
+
+  // stroke/line width
+  {
+    const {sizeField: strokeWidthField, sizeScale: strokeWidthScale} =
+      visualChannels;
+    const {sizeRange, sizeAggregation} = visConfig;
+
+    if (strokeWidthField && sizeRange) {
+      const {accessor, ...scaleProps} = getSizeAccessor(
+        strokeWidthField,
+        strokeWidthScale,
+        sizeAggregation,
+        sizeRange,
+        data
+      );
+      result.getLineWidth = accessor;
+      scales.lineWidth = updateTriggers.getLineWidth = {
+        field: strokeWidthField,
+        type: strokeWidthScale || 'identity',
+        ...scaleProps,
+      };
+    }
   }
 
-  if (heightField && visConfig.enable3d) {
-    const {accessor, scale} = getSizeAccessor(
-      heightField,
-      heightScale,
-      visConfig.heightAggregation,
-      visConfig.heightRange || visConfig.sizeRange,
-      data
-    );
-    result.getElevation = accessor;
-    scales.elevation = updateTriggers.getElevation = {
-      field: heightField,
-      type: heightScale || 'identity',
-      ...domainAndRangeFromScale(scale),
-    };
+  // height / elevation
+  {
+    const {enable3d, heightRange} = visConfig;
+    const {heightField, heightScale} = visualChannels;
+    if (heightField && heightRange && enable3d) {
+      const {accessor, ...scaleProps} = getSizeAccessor(
+        heightField,
+        heightScale,
+        visConfig.heightAggregation,
+        heightRange,
+        data
+      );
+      result.getElevation = accessor;
+      scales.elevation = updateTriggers.getElevation = {
+        field: heightField,
+        type: heightScale || 'identity',
+        ...scaleProps,
+      };
+    }
   }
 
-  if (weightField) {
-    const {accessor, scale} = getSizeAccessor(
-      weightField,
-      undefined,
-      visConfig.weightAggregation,
-      undefined,
-      data
-    );
-    result.getWeight = accessor;
-    scales.weight = updateTriggers.getWeight = {
-      field: weightField,
-      type: 'identity' as ScaleType,
-      ...domainAndRangeFromScale(scale),
-    };
+  // weight
+  {
+    const {weightField} = visualChannels;
+    const {weightAggregation} = visConfig;
+    if (weightField && weightAggregation) {
+      const {accessor, ...scaleProps} = getSizeAccessor(
+        weightField,
+        undefined,
+        weightAggregation,
+        undefined,
+        data
+      );
+      result.getWeight = accessor;
+      scales.weight = updateTriggers.getWeight = {
+        field: weightField,
+        type: 'identity' as ScaleType,
+        ...scaleProps,
+      };
+    }
   }
 
   if (visConfig.customMarkers) {

package/src/fetch-map/raster-layer.ts

@@ -13,6 +13,7 @@ import type {
   VisualChannels,
 } from './types.js';
 import {createColorScale, type ScaleType} from './layer-map.js';
+import {getLog10ScaleSteps} from './utils.js';
 
 const UNKNOWN_COLOR = [134, 141, 145];
 
@@ -377,10 +378,11 @@ export function domainFromRasterMetadataBand(
   }
   if (scaleType === 'custom') {
     if (colorRange.uiCustomScaleType === 'logarithmic') {
-      if (colorRange.colorMap) {
-        return colorRange.colorMap?.map(([value]) => value) || [];
-      }
-      return [band.stats.min, band.stats.max];
+      return getLog10ScaleSteps({
+        min: band.stats.min,
+        max: band.stats.max,
+        steps: colorRange.colors.length,
+      });
     } else {
       // actually custom, read colorMap
       return colorRange.colorMap?.map(([value]) => value) || [];

package/src/fetch-map/types.ts

@@ -63,7 +63,7 @@ export type VisConfig = {
   opacity?: number;
   enable3d?: boolean;
 
-  colorAggregation?: any;
+  colorAggregation?: string;
   colorRange: ColorRange;
 
   customMarkers?: boolean;
@@ -73,17 +73,17 @@ export type VisConfig = {
   radius: number;
   radiusRange?: number[];
 
-  sizeAggregation?: any;
-  sizeRange?: any;
+  sizeAggregation?: string;
+  sizeRange?: number[];
 
-  strokeColorAggregation?: any;
+  strokeColorAggregation?: string;
   strokeOpacity?: number;
   strokeColorRange?: ColorRange;
 
-  heightRange?: any;
-  heightAggregation?: any;
+  heightRange?: number[];
+  heightAggregation?: string;
 
-  weightAggregation?: any;
+  weightAggregation?: string;
 
   // type = clusterTile
   clusterLevel?: number;

package/src/fetch-map/utils.ts

@@ -85,3 +85,59 @@ export function formatDate(value: string | number | Date): string {
 export function formatTimestamp(value: string | number | Date): string {
   return String(Math.floor(new Date(value).getTime() / 1000));
 }
+
+function roundedPow10(exp: number) {
+  // Math.pow(10, less than 4) generates "0.0...009999999999999999" instead of "0.0...01"
+  // round it ...
+  const raw = Math.pow(10, exp);
+  if (exp < 0) {
+    const shift = Math.pow(10, -exp);
+    return Math.round(raw * shift) / shift;
+  }
+  return raw;
+}
+
+/**
+ * Create domain for D3 threshold scale with logarithmic steps.
+ *
+ * If min is 0, it starts with max and goes down to fill color scale.
+ * If max is Infinity, it starts with 10 and goes up to fill color scale.
+ * Othersise it starts on first power of 10 that is greater than min.
+ *
+ * Generates `steps-1` entries, as this is what d3 threshold scale expects
+ *
+ * @see https://d3js.org/d3-scale/threshold
+ */
+export function getLog10ScaleSteps({
+  min,
+  max,
+  steps,
+}: {
+  min: number;
+  max: number;
+  steps: number;
+}): number[] {
+  if (min === 0) {
+    if (max === Infinity) {
+      // count aggregations have [0, Infinity]
+      // that will yield [10, 100, 1000, ...]
+      return [...Array(steps - 1)].map((_v, i) => roundedPow10(i + 1));
+    }
+    // if stats.min = 0, we only can attempt to start from max and decrease powers until
+    // we use all color buckets ...
+    const maxLog = Math.log10(max);
+    const endExponent = Math.ceil(maxLog);
+    const startExponent = endExponent - steps + 1;
+    return [...Array(steps - 1)].map((_v, i) =>
+      roundedPow10(startExponent + i)
+    );
+  } else {
+    const minLog = Math.log10(min);
+    const startExponent =
+      Math.ceil(minLog) === minLog ? minLog + 1 : Math.ceil(minLog);
+
+    return [...Array(steps - 1)].map((_v, i) =>
+      roundedPow10(startExponent + i)
+    );
+  }
+}

package/src/fetch-map/vec-expr-evaluator.ts

@@ -66,18 +66,6 @@ export function validateVecExprSyntax(
   return validate(parsed, context);
 }
 
-export function createValidationContext(
-  validSymbols: string[]
-): Record<string, unknown> {
-  return validSymbols.reduce(
-    (acc, symbol) => {
-      acc[symbol] = 1;
-      return acc;
-    },
-    {} as Record<string, unknown>
-  );
-}
-
 export type VecExprVecLike =
   | number[]
   | Float32Array