@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/utils/color-utils.js

@@ -0,0 +1,106 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+/**
+ * get r g b from hex code
+ *
+ * @param {string} hex
+ * @returns {import('reducers/types').RGBColor} array of r g bs
+ */
+export function hexToRgb(hex) {
+  const result = isHexColor(hex);
+
+  if (!result) {
+    return [0, 0, 0];
+  }
+
+  const r = parseInt(result[1], 16);
+  const g = parseInt(result[2], 16);
+  const b = parseInt(result[3], 16);
+
+  return [r, g, b];
+}
+
+export function isHexColor(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+  return result;
+}
+
+function PadNum(c) {
+  const hex = c.toString(16);
+  return hex.length === 1 ? `0${hex}` : hex;
+}
+
+/**
+ * get hex from r g b
+ *
+ * @param {array} rgb
+ * @returns {string} hex string
+ */
+export function rgbToHex([r, g, b]) {
+  return `#${[r, g, b].map(n => PadNum(n)).join('')}`.toUpperCase();
+}
+
+/**
+ * Get color group name by parsing name, discard step in the name
+ * e.g. Global Warming 6 -> Global Warming
+ *
+ * @param {Object} colorRange
+ * @return {string | null}
+ */
+export function getColorGroupByName(colorRange) {
+  if (!colorRange || typeof colorRange.name !== 'string') {
+    return null;
+  }
+
+  return colorRange.name.replace(/\b[^a-zA-Z]+$/, '');
+}
+
+/**
+ * Get a reversed colorRange
+ * @param {Boolean} reversed
+ * @param {Object} colorRange
+ */
+export function reverseColorRange(reversed, colorRange) {
+  if (!colorRange) return null;
+  // if (colorRange.reversed) return colorRange;
+  return {
+    ...colorRange,
+    reversed,
+    colors: colorRange.colors.slice().reverse()
+  };
+}
+
+/**
+ * given a list of rgb arrays it will generate a linear gradient css rule
+ * @param direction
+ * @param {Array} colors
+ * @return {string}
+ */
+export function createLinearGradient(direction, colors) {
+  const step = parseFloat((100.0 / colors.length).toFixed(2));
+  const bands = colors.map((rgb, index) => {
+    return `rgba(${rgb.join(',')}, 1) ${step * index}%, rgba(${rgb.join(',')}, 1) ${step *
+      (index + 1)}%`;
+  });
+
+  return `linear-gradient(to ${direction}, ${bands.join(',')})`;
+}

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

@@ -0,0 +1,26 @@
+import {DataContainerInterface} from './table-utils/data-container-interface';
+
+function dataValueAccessor(any): any;
+function sort(a: any, b: any): any;
+function dataContainerValueAccessor(d: {index: number}, dc: DataContainerInterface): any;
+
+export function getQuantileDomain(
+  data: any[],
+  valueAccessor?: typeof dataValueAccessor,
+  sortFunc?: typeof sort
+): number[];
+
+export function getOrdinalDomain(
+  dataContainer: DataContainerInterface,
+  valueAccessor: typeof dataContainerValueAccessor
+): string[];
+
+export function getLinearDomain(
+  data: any[],
+  valueAccessor?: typeof dataValueAccessor
+): [number, number];
+
+export function getLogDomain(
+  data: any[],
+  valueAccessor?: typeof dataValueAccessor
+): [number, number];

package/src/utils/data-scale-utils.js

@@ -0,0 +1,61 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {notNullorUndefined, unique} from './data-utils';
+import {extent} from 'd3-array';
+import {uniqueSortedByFrequency} from './data-utils';
+
+/**
+ * return quantile domain for an array of data
+ * @type {typeof import('./data-scale-utils').getQuantileDomain}
+ */
+export function getQuantileDomain(data, valueAccessor, sortFunc) {
+  const values = typeof valueAccessor === 'function' ? data.map(valueAccessor) : data;
+
+  return values.filter(notNullorUndefined).sort(sortFunc);
+}
+
+/**
+ * return ordinal domain for a data container
+ * @type {typeof import('./data-scale-utils').getOrdinalDomain}
+ */
+export function getOrdinalDomain(dataContainer, valueAccessor) {
+  const values = dataContainer.mapIndex(valueAccessor);
+  return uniqueSortedByFrequency(values);
+}
+
+/**
+ * return linear domain for an array of data
+ * @type {typeof import('./data-scale-utils').getLinearDomain}
+ */
+export function getLinearDomain(data, valueAccessor) {
+  const range = typeof valueAccessor === 'function' ? extent(data, valueAccessor) : extent(data);
+  // @ts-ignore
+  return range.map((d, i) => (d === undefined ? i : d));
+}
+
+/**
+ * return linear domain for an array of data. A log scale domain cannot contain 0
+ * @type {typeof import('./data-scale-utils').getLogDomain}
+ */
+export function getLogDomain(data, valueAccessor) {
+  const [d0, d1] = getLinearDomain(data, valueAccessor);
+  return [d0 === 0 ? 1e-5 : d0, d1];
+}

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

@@ -0,0 +1,45 @@
+import {Millisecond} from 'reducers/types';
+import {Layer, Field} from 'reducers/vis-state-updaters';
+import {Bounds} from 'reducers/map-state-updaters';
+import {DataRow} from './table-utils/data-row';
+import {DataContainerInterface} from './table-utils/data-container-interface';
+
+export function maybeToDate(isTime: boolean, fieldIdx: number, format: string, dc: DataContainerInterface, d: {index: number}): any;
+
+export function timeToUnixMilli(value: any, format: string): Millisecond | null;
+export function notNullorUndefined<T extends NonNullable<any>>(d: T | null | undefined): d is T;
+export function isNumber(d: any): boolean;
+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 arrayMove(array: any[], from: number, to: number);
+export function getSortingFunction(fieldType: string): numberSort | undefined;
+export function preciseRound(num: number, decimals: number): string;
+export function parseFieldValue(value: any, type: string): string;
+export function getLatLngBounds(
+  points: number[][],
+  idx: number,
+  limit: [number, number]
+): [number, number] | null;
+export function getSampleData(data: any[], sampleSize?: number, getValue?: any): any[];
+export function findMapBounds(layers: Layer[]): Bounds | null;
+function formatter(v: any): any;
+export function getFormatter(format: any, field?: Field): formatter;
+export function defaultFormatter(v: any): string;
+export function snapToMarks(value: number, marks: number[]): number;
+export function normalizeSliderValue(
+  val: number,
+  minValue: number,
+  step: number,
+  marks?: number[]
+): number;
+export function roundValToStep(minValue: number, step: number, val: number): number;
+export function clamp([min, max], val);
+
+export type FieldFormatter = (value: any) => string;
+export declare const FIELD_DISPLAY_FORMAT: {
+  [key: string]: FieldFormatter;
+};
+
+export declare function datetimeFormatter(timezone?: string | null): (format: string) => (ts: number) => string;

package/src/utils/data-utils.js

@@ -0,0 +1,428 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import assert from 'assert';
+import {ALL_FIELD_TYPES} from 'constants/default-settings';
+import {TOOLTIP_FORMATS, TOOLTIP_FORMAT_TYPES, TOOLTIP_KEY} from 'constants/tooltip';
+import {format as d3Format} from 'd3-format';
+import {bisectLeft} from 'd3-array';
+import moment from 'moment-timezone';
+
+const MAX_LATITUDE = 90;
+const MIN_LATITUDE = -90;
+const MAX_LONGITUDE = 180;
+const MIN_LONGITUDE = -180;
+
+/**
+ * simple getting unique values of an array
+ *
+ * @param {array} values
+ * @returns {array} unique values
+ */
+export function unique(values) {
+  const results = [];
+  const uniqueSet = new Set(values);
+  uniqueSet.forEach(v => {
+    if (notNullorUndefined(v)) {
+      results.push(v);
+    }
+  });
+  return results;
+}
+
+export function uniqueSortedByFrequency(values) {
+  const frequency = values.reduce((res, value) => {
+    if (notNullorUndefined(value)) {
+      if (!res[value]) {
+        res[value] = 0;
+      }
+      res[value] += 1;
+    }
+    return res;
+  }, {});
+
+  return Object.keys(frequency).sort((a, b) => frequency[b] - frequency[a]);
+}
+
+/* eslint-disable max-statements */
+/**
+ * return center of map from given points
+ * @param {array} layers
+ * @returns {object} coordinates of map center, empty if not found
+ */
+export function findMapBounds(layers) {
+  // find bounds in formatted layerData
+  // take ALL layers into account when finding map bounds
+  const availableLayerBounds = layers.reduce((res, l) => {
+    if (l.meta && l.meta.bounds) {
+      res.push(l.meta.bounds);
+    }
+    return res;
+  }, []);
+  // return null if no layer is available
+  if (availableLayerBounds.length === 0) {
+    return null;
+  }
+  // merge bounds in each layer
+  const newBounds = availableLayerBounds.reduce(
+    (res, b) => {
+      return [
+        Math.min(res[0], b[0]),
+        Math.min(res[1], b[1]),
+        Math.max(res[2], b[2]),
+        Math.max(res[3], b[3])
+      ];
+    },
+    [MAX_LONGITUDE, MAX_LATITUDE, MIN_LONGITUDE, MIN_LATITUDE]
+  );
+  return newBounds;
+}
+/* eslint-enable max-statements */
+
+export function getLatLngBounds(points, idx, limit) {
+  const lats = points
+    .map(d => Array.isArray(d) && d[idx])
+    .filter(Number.isFinite)
+    .sort(numberSort);
+
+  if (!lats.length) {
+    return null;
+  }
+
+  // clamp to limit
+  return [Math.max(lats[0], limit[0]), Math.min(lats[lats.length - 1], limit[1])];
+}
+
+export function clamp([min, max], val) {
+  return val <= min ? min : val >= max ? max : val;
+}
+
+export function getSampleData(data, sampleSize = 500, getValue = d => d) {
+  const sampleStep = Math.max(Math.floor(data.length / sampleSize), 1);
+  const output = [];
+  for (let i = 0; i < data.length; i += sampleStep) {
+    output.push(getValue(data[i]));
+  }
+
+  return output;
+}
+
+/**
+ * Convert different time format to unix milliseconds
+ * @type {typeof import('./data-utils').timeToUnixMilli}
+ */
+export function timeToUnixMilli(value, format) {
+  if (notNullorUndefined(value)) {
+    return typeof value === 'string'
+      ? moment.utc(value, format).valueOf()
+      : format === 'x'
+      ? value * 1000
+      : value;
+  }
+  return null;
+}
+
+/**
+ *
+ * @type {typeof import('./data-utils').maybeToDate}
+ */
+export function maybeToDate(isTime, fieldIdx, format, dc, d) {
+  if (isTime) {
+    return timeToUnixMilli(dc.valueAt(d.index, fieldIdx), format);
+  }
+
+  return dc.valueAt(d.index, fieldIdx);
+}
+
+/**
+ * whether null or undefined
+ * @type {typeof import('./data-utils').notNullorUndefined}
+ */
+export function notNullorUndefined(d) {
+  return d !== undefined && d !== null;
+}
+
+/**
+ * Whether d is a number, this filtered out NaN as well
+ * @type {typeof import('./data-utils').notNullorUndefined}
+ */
+export function isNumber(d) {
+  return Number.isFinite(d);
+}
+/**
+ * whether null or undefined
+ */
+export function isPlainObject(obj) {
+  return obj === Object(obj) && typeof obj !== 'function' && !Array.isArray(obj);
+}
+
+/**
+ * @type {typeof import('./data-utils').numberSort}
+ */
+export function numberSort(a, b) {
+  return a - b;
+}
+
+/**
+ * @type {typeof import('./data-utils').getSortingFunction}
+ */
+export function getSortingFunction(fieldType) {
+  switch (fieldType) {
+    case ALL_FIELD_TYPES.real:
+    case ALL_FIELD_TYPES.integer:
+    case ALL_FIELD_TYPES.timestamp:
+      return numberSort;
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * round number with exact number of decimals
+ * return as a string
+ * @type {typeof import('./data-utils').preciseRound}
+ */
+export function preciseRound(num, decimals) {
+  const t = Math.pow(10, decimals);
+  return (
+    Math.round(
+      num * t + (decimals > 0 ? 1 : 0) * (Math.sign(num) * (10 / Math.pow(100, decimals)))
+    ) / t
+  ).toFixed(decimals);
+}
+
+/**
+ * get number of decimals to round to for slider from step
+ * @param {number} step
+ * @returns {number} - number of decimal
+ */
+export function getRoundingDecimalFromStep(step) {
+  if (isNaN(step)) {
+    assert('step is not a number');
+    assert(step);
+  }
+
+  const splitZero = step.toString().split('.');
+  if (splitZero.length === 1) {
+    return 0;
+  }
+  return splitZero[1].length;
+}
+
+/**
+ * Use in slider, given a number and an array of numbers, return the nears number from the array
+ * @type {typeof import('./data-utils').snapToMarks}
+ * @param value
+ * @param marks
+ */
+export function snapToMarks(value, marks) {
+  // always use bin x0
+  const i = bisectLeft(marks, value);
+  if (i === 0) {
+    return marks[i];
+  } else if (i === marks.length) {
+    return marks[i - 1];
+  }
+  const idx = marks[i] - value < value - marks[i - 1] ? i : i - 1;
+  return marks[idx];
+}
+
+/**
+ * If marks is provided, snap to marks, if not normalize to step
+ * @type {typeof import('./data-utils').normalizeSliderValue}
+ * @param val
+ * @param minValue
+ * @param step
+ * @param marks
+ */
+export function normalizeSliderValue(val, minValue, step, marks) {
+  if (marks && marks.length) {
+    return snapToMarks(val, marks);
+  }
+
+  return roundValToStep(minValue, step, val);
+}
+
+/**
+ * round the value to step for the slider
+ * @type {typeof import('./data-utils').roundValToStep}
+ * @param minValue
+ * @param step
+ * @param val
+ * @returns - rounded number
+ */
+export function roundValToStep(minValue, step, val) {
+  if (!isNumber(step) || !isNumber(minValue)) {
+    return val;
+  }
+
+  const decimal = getRoundingDecimalFromStep(step);
+  const steps = Math.floor((val - minValue) / step);
+  let remain = val - (steps * step + minValue);
+
+  // has to round because javascript turns 0.1 into 0.9999999999999987
+  remain = Number(preciseRound(remain, 8));
+
+  let closest;
+  if (remain === 0) {
+    closest = val;
+  } else if (remain < step / 2) {
+    closest = steps * step + minValue;
+  } else {
+    closest = (steps + 1) * step + minValue;
+  }
+
+  // precise round return a string rounded to the defined decimal
+  const rounded = preciseRound(closest, decimal);
+
+  return Number(rounded);
+}
+
+/**
+ * Get the value format based on field and format options
+ * Used in render tooltip value
+ * @type {typeof import('./data-utils').defaultFormatter}
+ */
+export const defaultFormatter = v => (notNullorUndefined(v) ? String(v) : '');
+
+export const FIELD_DISPLAY_FORMAT = {
+  [ALL_FIELD_TYPES.string]: defaultFormatter,
+  [ALL_FIELD_TYPES.timestamp]: defaultFormatter,
+  [ALL_FIELD_TYPES.integer]: defaultFormatter,
+  [ALL_FIELD_TYPES.real]: defaultFormatter,
+  [ALL_FIELD_TYPES.boolean]: defaultFormatter,
+  [ALL_FIELD_TYPES.date]: defaultFormatter,
+  [ALL_FIELD_TYPES.geojson]: d =>
+    typeof d === 'string'
+      ? d
+      : isPlainObject(d)
+      ? JSON.stringify(d)
+      : Array.isArray(d)
+      ? `[${String(d)}]`
+      : ''
+};
+
+/**
+ * Parse field value and type and return a string representation
+ * @type {typeof import('./data-utils').parseFieldValue}
+ */
+export const parseFieldValue = (value, type) => {
+  if (!notNullorUndefined(value)) {
+    return '';
+  }
+
+  return FIELD_DISPLAY_FORMAT[type] ? FIELD_DISPLAY_FORMAT[type](value) : String(value);
+};
+
+const arrayMoveMutate = (array, from, to) => {
+  array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
+};
+
+/**
+ *
+ * @param {*} array
+ * @param {*} from
+ * @param {*} to
+ */
+export const arrayMove = (array, from, to) => {
+  array = array.slice();
+  arrayMoveMutate(array, from, to);
+  return array;
+};
+
+/**
+ * Get the value format based on field and format options
+ * Used in render tooltip value
+ * @type {typeof import('./data-utils').getFormatter}
+ * @param format
+ * @param field
+ */
+export function getFormatter(format, field) {
+  if (!format) {
+    return defaultFormatter;
+  }
+  const tooltipFormat = Object.values(TOOLTIP_FORMATS).find(f => f[TOOLTIP_KEY] === format);
+
+  if (tooltipFormat) {
+    return applyDefaultFormat(tooltipFormat);
+  } else if (typeof format === 'string' && field) {
+    return applyCustomFormat(format, field);
+  }
+
+  return defaultFormatter;
+}
+
+export function applyDefaultFormat(tooltipFormat) {
+  if (!tooltipFormat || !tooltipFormat.format) {
+    return defaultFormatter;
+  }
+
+  switch (tooltipFormat.type) {
+    case TOOLTIP_FORMAT_TYPES.DECIMAL:
+      return d3Format(tooltipFormat.format);
+    case TOOLTIP_FORMAT_TYPES.DATE:
+    case TOOLTIP_FORMAT_TYPES.DATE_TIME:
+      return datetimeFormatter(null)(tooltipFormat.format);
+    case TOOLTIP_FORMAT_TYPES.PERCENTAGE:
+      return v => `${d3Format(TOOLTIP_FORMATS.DECIMAL_DECIMAL_FIXED_2.format)(v)}%`;
+    case TOOLTIP_FORMAT_TYPES.BOOLEAN:
+      return getBooleanFormatter(tooltipFormat.format);
+    default:
+      return defaultFormatter;
+  }
+}
+
+export function getBooleanFormatter(format) {
+  switch (format) {
+    case '01':
+      return v => (v ? '1' : '0');
+    case 'yn':
+      return v => (v ? 'yes' : 'no');
+    default:
+      return defaultFormatter;
+  }
+}
+// Allow user to specify custom tooltip format via config
+export function applyCustomFormat(format, field) {
+  switch (field.type) {
+    case ALL_FIELD_TYPES.real:
+    case ALL_FIELD_TYPES.integer:
+      return d3Format(format);
+    case ALL_FIELD_TYPES.date:
+    case ALL_FIELD_TYPES.timestamp:
+      return datetimeFormatter(null)(format);
+    default:
+      return v => v;
+  }
+}
+
+/**
+ * Format epoch milliseconds with a format string
+ * @type {typeof import('./data-utils').datetimeFormatter} timezone
+ */
+export function datetimeFormatter(timezone) {
+  return timezone
+    ? format => ts =>
+        moment
+          .utc(ts)
+          .tz(timezone)
+          .format(format)
+    : format => ts => moment.utc(ts).format(format);
+}

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

@@ -0,0 +1,10 @@
+import {Datasets, Field} from '../reducers/vis-state-updaters';
+import {ProtoDataset} from '../actions';
+import {RGBColor} from 'reducers/types';
+
+export function createNewDataEntry(data: ProtoDataset, datasets?: Datasets): Datasets;
+
+export function getNewDatasetColor(ds: Datasets): RGBColor;
+
+export const datasetColorMaker: Generator<RGBColor>;
+export function findDefaultColorField(dataset: Dataset): false | Field;