@carto/api-client 0.5.16 → 0.5.18-alpha.colormapfix-1

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.16",
+  "version": "0.5.18-alpha.colormapfix-1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -71,6 +71,7 @@
     "d3-format": "^3.1.0",
     "d3-scale": "^4.0.2",
     "h3-js": "^4.1.0",
+    "jsep": "^1.4.0",
     "quadbin": "^0.4.1-alpha.0"
   },
   "devDependencies": {
@@ -131,5 +132,6 @@
   "resolutions": {
     "@carto/api-client": "portal:./",
     "rollup": "^4.20.0"
-  }
+  },
+  "stableVersion": "0.5.17"
 }

package/src/fetch-map/basemap-styles.ts

@@ -92,7 +92,7 @@ export const STYLE_LAYER_GROUPS: StyleLayerGroup[] = [
 ];
 
 export function applyLayerGroupFilters(
-  style: any,
+  style: any, // this Maplibre/Mapbox style, we don't want to add a dependency on Maplibre
   visibleLayerGroups: Record<StyleLayerGroupSlug, boolean>
 ) {
   if (!Array.isArray(style?.layers)) {

package/src/fetch-map/index.ts

@@ -1,4 +1,8 @@
-export {default as BASEMAP} from './basemap-styles.js';
+export {
+  default as BASEMAP,
+  applyLayerGroupFilters as _applyLayerGroupFilters,
+} from './basemap-styles.js';
+export {getRasterTileLayerStyleProps as _getRasterTileLayerStyleProps} from './raster-layer.js';
 export {fetchMap} from './fetch-map.js';
 export type {FetchMapOptions, FetchMapResult} from './fetch-map.js';
 export type {
@@ -11,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,9 +25,11 @@ import {
   createBinaryProxy,
   formatDate,
   formatTimestamp,
+  getLog10ScaleSteps,
   scaleIdentity,
 } from './utils.js';
 import type {
+  ColorRange,
   CustomMarkersRange,
   Dataset,
   MapLayerConfig,
@@ -38,6 +40,7 @@ import type {
 import type {ProviderType, SchemaField} from '../types.js';
 import {DEFAULT_AGGREGATION_EXP_ALIAS} from '../constants-internal.js';
 import {AggregationTypes} from '../constants.js';
+import type {Attribute, TilejsonResult} from '../sources/types.js';
 
 export type D3Scale = {
   domain: (d?: any) => any[];
@@ -72,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',
@@ -113,6 +130,13 @@ const sharedPropMap = {
   },
 };
 
+const rasterPropsMap = {
+  isVisible: 'visible',
+  visConfig: {
+    opacity: 'opacity',
+  },
+};
+
 const customMarkersPropsMap = {
   color: 'getIconColor',
   visConfig: {
@@ -174,6 +198,13 @@ export function getLayerProps(
     );
   }
 
+  if (type === 'raster') {
+    return {
+      propMap: rasterPropsMap,
+      defaultProps: {},
+    };
+  }
+
   let basePropMap: any = sharedPropMap;
   if (config.visConfig?.customMarkers) {
     basePropMap = mergePropMaps(basePropMap, customMarkersPropsMap);
@@ -195,18 +226,21 @@ export function getLayerProps(
 }
 
 function domainFromAttribute(
-  attribute: any,
+  attribute: Attribute,
   scaleType: ScaleType,
   scaleLength: number
-) {
+): number[] | string[] {
   if (scaleType === 'ordinal' || scaleType === 'point') {
+    if (!attribute.categories) {
+      return [0, 1];
+    }
     return attribute.categories
       .map((c: any) => c.category)
       .filter((c: any) => c !== undefined && c !== null);
   }
 
   if (scaleType === 'quantile' && attribute.quantiles) {
-    return attribute.quantiles.global
+    return 'global' in attribute.quantiles
       ? attribute.quantiles.global[scaleLength]
       : attribute.quantiles[scaleLength];
   }
@@ -215,7 +249,7 @@ function domainFromAttribute(
   if (scaleType === 'log' && min === 0) {
     min = 1e-5;
   }
-  return [min, attribute.max];
+  return [min ?? 0, attribute.max ?? 1];
 }
 
 function domainFromValues(values: any, scaleType: ScaleType) {
@@ -235,8 +269,8 @@ function domainFromValues(values: any, scaleType: ScaleType) {
 }
 
 function calculateDomain(
-  data: any,
-  name: any,
+  data: TilejsonResult,
+  name: string,
   scaleType: ScaleType,
   scaleLength?: number
 ) {
@@ -244,14 +278,16 @@ function calculateDomain(
     // Tileset data type
     const {attributes} = data.tilestats.layers[0];
     const attribute = attributes.find((a: any) => a.attribute === name);
-    return domainFromAttribute(attribute, scaleType, scaleLength as number);
+    if (attribute) {
+      return domainFromAttribute(attribute, scaleType, scaleLength as number);
+    }
   }
 
   return [0, 1];
 }
 
 function normalizeAccessor(accessor: any, data: any) {
-  if (data.features || data.tilestats) {
+  if (data.features || data.tilestats || data.raster_metadata) {
     return (object: any, info: any) => {
       if (object) {
         return accessor(object.properties || object.__source.object.properties);
@@ -297,61 +333,103 @@ 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: any
-): {accessor: any; scale: any} {
-  const scale = calculateLayerScale(
+  data: TilejsonResult
+): {
+  accessor: any;
+  domain: number[] | string[];
+  scaleDomain: number[] | string[];
+  range: string[];
+} {
+  const {scale, domain} = calculateLayerScale(
     colorColumn || name,
-    scaleType,
+    colorColumn ? 'identity' : scaleType,
     range,
     data
   );
   const alpha = opacityToAlpha(opacity);
 
-  let accessorKeys = getAccessorKeys(name, aggregation);
+  let accessorKeys = getAccessorKeys(colorColumn || name, aggregation);
   const accessor = (properties: any) => {
     if (!(accessorKeys[0] in properties)) {
       accessorKeys = findAccessorKey(accessorKeys, properties);
     }
     const propertyValue = properties[accessorKeys[0]];
-    const {r, g, b} = rgb(scale(propertyValue));
-    return [r, g, b, propertyValue === null ? 0 : alpha];
+    const scaled = scale(propertyValue);
+    const rgb = typeof scaled === 'string' ? hexToRGB(scaled) : scaled;
+    return [...rgb, propertyValue === null ? 0 : alpha];
+  };
+  return {
+    accessor: normalizeAccessor(accessor, data),
+    scaleDomain: scale.domain(),
+    domain,
+    range: (scale.range() || []).map(rgbToHex),
   };
-  return {accessor: normalizeAccessor(accessor, data), scale};
 }
 
-function calculateLayerScale(
-  name: any,
+export function calculateLayerScale(
+  name: string,
   scaleType: ScaleType,
-  range: any,
-  data: any
-) {
-  const scale = SCALE_FUNCS[scaleType]();
-  let domain: (string | number)[] = [];
+  range: ColorRange,
+  data: TilejsonResult
+): {scale: D3Scale; domain: string[] | number[]} {
+  let domain: string[] | number[] = [];
+  let scaleDomain: number[] | string[] | undefined;
   let scaleColor: string[] = [];
+  const {colors} = range;
 
   if (scaleType !== 'identity') {
-    const {colorMap, colors} = range;
-
-    if (Array.isArray(colorMap)) {
+    if (range.colorMap) {
+      const {colorMap} = range;
+      scaleDomain = [];
       colorMap.forEach(([value, color]) => {
-        domain.push(value);
+        (scaleDomain as any[]).push(value);
         scaleColor.push(color);
       });
+      domain = scaleDomain;
     } else {
-      domain = calculateDomain(data, name, scaleType, colors.length);
-      scaleColor = colors;
+      if (scaleType === 'custom' && range.uiCustomScaleType === 'logarithmic') {
+        domain = calculateDomain(data, name, scaleType, colors.length);
+        const [min, max] = domain as number[];
+        scaleDomain = getLog10ScaleSteps({
+          min,
+          max,
+          steps: colors.length,
+        });
+
+        scaleColor = colors;
+      } else {
+        domain = calculateDomain(data, name, scaleType, colors.length);
+        scaleColor = colors;
+      }
     }
 
     if (scaleType === 'ordinal') {
       domain = domain.slice(0, scaleColor.length);
     }
   }
+  return {
+    scale: createColorScale(
+      scaleType,
+      scaleDomain || domain,
+      scaleColor.map(hexToRGB),
+      UNKNOWN_COLOR_RGB
+    ),
+    domain,
+  };
+}
 
+export function createColorScale<T>(
+  scaleType: ScaleType,
+  domain: string[] | number[],
+  range: T[],
+  unknown: T
+) {
+  const scale = SCALE_FUNCS[scaleType]();
   scale.domain(domain);
-  scale.range(scaleColor);
-  scale.unknown!(UNKNOWN_COLOR);
+  scale.range(range);
+  scale.unknown!(unknown as any);
 
   return scale;
 }
@@ -427,13 +505,22 @@ export function getSizeAccessor(
   {name}: VisualChannelField,
   scaleType: ScaleType | undefined,
   aggregation: string | null | undefined,
-  range: Iterable<Range> | null | undefined,
-  data: any
-): {accessor: any; scale: any} {
+  range: number[] | undefined,
+  data: TilejsonResult
+): {
+  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);
   }
@@ -446,7 +533,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> = {