@carto/api-client 0.5.15-alpha.raster-2 → 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-2",
+  "version": "0.5.15-alpha.raster-3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

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

@@ -75,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',
@@ -213,20 +227,9 @@ export function getLayerProps(
 
 function domainFromAttribute(
   attribute: Attribute,
-  scaleType: ScaleType | 'log10steps',
+  scaleType: ScaleType,
   scaleLength: number
 ): number[] | string[] {
-  if (
-    scaleType === 'log10steps' &&
-    attribute.min !== undefined &&
-    attribute.max !== undefined
-  ) {
-    return getLog10ScaleSteps({
-      min: attribute.min,
-      max: attribute.max,
-      steps: scaleLength,
-    });
-  }
   if (scaleType === 'ordinal' || scaleType === 'point') {
     if (!attribute.categories) {
       return [0, 1];
@@ -268,7 +271,7 @@ function domainFromValues(values: any, scaleType: ScaleType) {
 function calculateDomain(
   data: TilejsonResult,
   name: string,
-  scaleType: ScaleType | 'log10steps',
+  scaleType: ScaleType,
   scaleLength?: number
 ) {
   if (data.tilestats) {
@@ -330,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,
@@ -348,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(
@@ -359,14 +372,22 @@ 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 === 'custom') {
     if (range.uiCustomScaleType === 'logarithmic') {
-      domain = calculateDomain(data, name, 'log10steps', colors.length);
+      domain = calculateDomain(data, name, scaleType, colors.length);
+      const [min, max] = domain as number[];
+      scaleDomain = getLog10ScaleSteps({
+        min,
+        max,
+        steps: colors.length,
+      });
+
       scaleColor = colors;
     } else if (range.colorMap) {
       const {colorMap} = range;
@@ -384,7 +405,15 @@ export function calculateLayerScale(
     }
   }
 
-  return createColorScale(scaleType, domain, scaleColor, UNKNOWN_COLOR);
+  return {
+    scale: createColorScale(
+      scaleType,
+      scaleDomain || domain,
+      scaleColor.map(hexToRGB),
+      UNKNOWN_COLOR_RGB
+    ),
+    domain,
+  };
 }
 
 export function createColorScale<T>(
@@ -472,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);
   }
@@ -491,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/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;