@flowmap.gl/data 8.0.0-alpha.0

package/src/getViewStateForLocations.ts

@@ -0,0 +1,64 @@
+import {BoundingBox, viewport} from '@mapbox/geo-viewport';
+import {geoBounds} from 'd3-geo';
+import {FeatureCollection, GeometryCollection, GeometryObject} from 'geojson';
+import {ViewState} from './types';
+
+export type LocationProperties = any;
+
+export function getViewStateForFeatures(
+  featureCollection:
+    | FeatureCollection<GeometryObject, LocationProperties>
+    | GeometryCollection,
+  size: [number, number],
+  opts?: {
+    pad?: number;
+    tileSize?: number;
+    minZoom?: number;
+    maxZoom?: number;
+  },
+): ViewState {
+  const {pad = 0.05, tileSize = 512, minZoom = 0, maxZoom = 100} = opts || {};
+  const [[x1, y1], [x2, y2]] = geoBounds(featureCollection as any);
+  const bounds: BoundingBox = [
+    x1 - pad * (x2 - x1),
+    y1 - pad * (y2 - y1),
+    x2 + pad * (x2 - x1),
+    y2 + pad * (y2 - y1),
+  ];
+  const {
+    center: [longitude, latitude],
+    zoom,
+  } = viewport(bounds, size, undefined, undefined, tileSize, true);
+
+  return {
+    longitude,
+    latitude,
+    zoom: Math.max(Math.min(maxZoom, zoom), minZoom),
+    bearing: 0,
+    pitch: 0,
+  };
+}
+
+export function getViewStateForLocations(
+  locations: any[],
+  getLocationCentroid: (location: any) => [number, number],
+  size: [number, number],
+  opts?: {
+    pad?: number;
+    tileSize?: number;
+    minZoom?: number;
+    maxZoom?: number;
+  },
+): ViewState {
+  return getViewStateForFeatures(
+    {
+      type: 'GeometryCollection',
+      geometries: locations.map((location) => ({
+        type: 'Point',
+        coordinates: getLocationCentroid(location),
+      })),
+    } as any,
+    size,
+    opts,
+  );
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './types';
+export * from './colors';
+export * from './FlowMapState';
+export * from './FlowMapSelectors';
+export * from './time';
+export * from './getViewStateForLocations';
+export * from './provider/FlowMapDataProvider';
+export {default as FlowMapAggregateAccessors} from './FlowMapAggregateAccessors';
+export type {default as FlowMapDataProvider} from './provider/FlowMapDataProvider';
+export {default as LocalFlowMapDataProvider} from './provider/LocalFlowMapDataProvider';

package/src/provider/FlowMapDataProvider.ts

@@ -0,0 +1,63 @@
+import {AggregateFlow, Cluster, LocationAccessors, LocationTotals} from '..';
+import {FlowMapState} from '../FlowMapState';
+import {
+  ClusterNode,
+  FlowMapData,
+  FlowMapDataAccessors,
+  LayersData,
+  ViewportProps,
+} from '../types';
+
+export default interface FlowMapDataProvider<L, F> {
+  setAccessors(accessors: FlowMapDataAccessors<L, F>): void;
+
+  setFlowMapState(flowMapState: FlowMapState): Promise<void>;
+
+  // clearData(): void;
+
+  getViewportForLocations(dims: [number, number]): Promise<ViewportProps>;
+
+  // getFlowTotals(): Promise<FlowTotals>;
+
+  getFlowByIndex(index: number): Promise<F | AggregateFlow | undefined>;
+
+  getLocationById(id: string): Promise<L | Cluster | undefined>;
+
+  getLocationByIndex(idx: number): Promise<L | ClusterNode | undefined>;
+
+  getTotalsForLocation(id: string): Promise<LocationTotals | undefined>;
+
+  // getLocationsInBbox(
+  //   bbox: [number, number, number, number],
+  // ): Promise<Array<FlowLocation | ClusterNode> | undefined>;
+
+  // getLocationsForSearchBox(): Promise<(FlowLocation | ClusterNode)[] | undefined>;
+
+  getLayersData(): Promise<LayersData | undefined>;
+}
+
+export function isFlowMapData<L, F>(
+  data: Record<string, any>,
+): data is FlowMapData<L, F> {
+  return (
+    data &&
+    data.locations &&
+    data.flows &&
+    Array.isArray(data.locations) &&
+    Array.isArray(data.flows)
+  );
+}
+
+export function isFlowMapDataProvider<L, F>(
+  dataProvider: Record<string, any>,
+): dataProvider is FlowMapDataProvider<L, F> {
+  return (
+    dataProvider &&
+    typeof dataProvider.setFlowMapState === 'function' &&
+    typeof dataProvider.getViewportForLocations === 'function' &&
+    typeof dataProvider.getFlowByIndex === 'function' &&
+    typeof dataProvider.getLocationById === 'function' &&
+    typeof dataProvider.getLocationByIndex === 'function' &&
+    typeof dataProvider.getLayersData === 'function'
+  );
+}

package/src/provider/LocalFlowMapDataProvider.ts

@@ -0,0 +1,108 @@
+import FlowMapDataProvider from './FlowMapDataProvider';
+import {
+  Cluster,
+  ClusterNode,
+  FlowAccessors,
+  FlowMapData,
+  FlowMapDataAccessors,
+  LayersData,
+  LocationAccessors,
+  LocationTotals,
+  ViewportProps,
+} from '../types';
+import {FlowMapState} from '../FlowMapState';
+import FlowMapSelectors from '../FlowMapSelectors';
+import {AggregateFlow} from '..';
+
+export default class LocalFlowMapDataProvider<L, F>
+  implements FlowMapDataProvider<L, F>
+{
+  private selectors: FlowMapSelectors<L, F>;
+  private flowMapData: FlowMapData<L, F> | undefined;
+  private flowMapState: FlowMapState | undefined;
+
+  constructor(accessors: FlowMapDataAccessors<L, F>) {
+    // scope selectors to the concrete instance of FlowMapDataProvider
+    this.selectors = new FlowMapSelectors<L, F>(accessors);
+    this.flowMapData = undefined;
+    this.flowMapState = undefined;
+  }
+
+  setAccessors(accessors: FlowMapDataAccessors<L, F>) {
+    this.selectors.setAccessors(accessors);
+  }
+
+  async setFlowMapData(flowMapData: FlowMapData<L, F>): Promise<void> {
+    this.flowMapData = flowMapData;
+  }
+
+  async setFlowMapState(flowMapState: FlowMapState): Promise<void> {
+    this.flowMapState = flowMapState;
+  }
+
+  async getFlowByIndex(idx: number): Promise<F | AggregateFlow | undefined> {
+    if (!this.flowMapState || !this.flowMapData) {
+      return undefined;
+    }
+    const flows = this.selectors.getFlowsForFlowMapLayer(
+      this.flowMapState,
+      this.flowMapData,
+    );
+    return flows?.[idx];
+  }
+
+  async getLocationByIndex(idx: number): Promise<L | ClusterNode | undefined> {
+    if (!this.flowMapState || !this.flowMapData) {
+      return undefined;
+    }
+    const locations = this.selectors.getLocationsForFlowMapLayer(
+      this.flowMapState,
+      this.flowMapData,
+    );
+    return locations?.[idx];
+  }
+
+  async getLayersData(): Promise<LayersData | undefined> {
+    if (!this.flowMapState || !this.flowMapData) {
+      return undefined;
+    }
+    return this.selectors.prepareLayersData(
+      this.flowMapState,
+      this.flowMapData,
+    );
+  }
+
+  async getLocationById(id: string): Promise<L | Cluster | undefined> {
+    if (!this.flowMapState || !this.flowMapData) {
+      return undefined;
+    }
+    const clusterIndex = this.selectors.getClusterIndex(
+      this.flowMapState,
+      this.flowMapData,
+    );
+    if (clusterIndex) {
+      const cluster = clusterIndex.getClusterById(id);
+      if (cluster) {
+        return cluster;
+      }
+    }
+    const locationsById = this.selectors.getLocationsById(
+      this.flowMapState,
+      this.flowMapData,
+    );
+    return locationsById?.get(id);
+  }
+
+  async getTotalsForLocation(id: string): Promise<LocationTotals | undefined> {
+    if (!this.flowMapState || !this.flowMapData) {
+      return undefined;
+    }
+    return this.selectors
+      .getLocationTotals(this.flowMapState, this.flowMapData)
+      ?.get(id);
+  }
+
+  getViewportForLocations(dims: [number, number]): Promise<ViewportProps> {
+    return Promise.resolve({} as ViewportProps);
+  }
+}

package/src/time.ts

@@ -0,0 +1,160 @@
+import {timeFormat, timeParse} from 'd3-time-format';
+import {
+  timeDay,
+  timeHour,
+  TimeInterval,
+  timeMinute,
+  timeMonth,
+  timeSecond,
+  timeWeek,
+  timeYear,
+} from 'd3-time';
+
+const dateParsers = [
+  timeParse('%Y-%m-%d'),
+  timeParse('%Y-%m-%d %H:%M'),
+  timeParse('%Y-%m-%d %H:%M:%S'),
+  timeParse('%Y'),
+  timeParse('%Y-%m'),
+];
+
+export function parseTime(input: string | Date | undefined): Date | undefined {
+  if (input != null) {
+    if (input instanceof Date) {
+      return input;
+    }
+    for (const parse of dateParsers) {
+      const date = parse(input);
+      if (date) {
+        return date;
+      }
+    }
+  }
+  return undefined;
+}
+
+export enum TimeGranularityKey {
+  SECOND = 'SECOND',
+  MINUTE = 'MINUTE',
+  HOUR = 'HOUR',
+  DAY = 'DAY',
+  MONTH = 'MONTH',
+  YEAR = 'YEAR',
+}
+
+export interface TimeGranularity {
+  key: TimeGranularityKey;
+  order: number;
+  interval: TimeInterval;
+  format: (date: Date) => string;
+  formatFull: (date: Date) => string;
+}
+
+// const preferredLocale = navigator.languages ? navigator.languages[0] : 'en';
+
+const formatMillisecond = timeFormat('.%L'),
+  formatSecond = timeFormat(':%S'),
+  formatMinute = timeFormat('%I:%M'),
+  // formatHour = (d: Date) => d.toLocaleString(preferredLocale, { hour: 'numeric' }),
+  formatHour = timeFormat('%I %p'),
+  formatDay = timeFormat('%a %d'),
+  formatWeek = timeFormat('%b %d'),
+  formatMonth = timeFormat('%b'),
+  formatYear = timeFormat('%Y');
+
+export function tickMultiFormat(date: Date) {
+  return (
+    timeSecond(date) < date
+      ? formatMillisecond
+      : timeMinute(date) < date
+      ? formatSecond
+      : timeHour(date) < date
+      ? formatMinute
+      : timeDay(date) < date
+      ? formatHour
+      : timeMonth(date) < date
+      ? timeWeek(date) < date
+        ? formatDay
+        : formatWeek
+      : timeYear(date) < date
+      ? formatMonth
+      : formatYear
+  )(date);
+}
+
+export const TIME_GRANULARITIES: TimeGranularity[] = [
+  {
+    order: 0,
+    key: TimeGranularityKey.SECOND,
+    interval: timeSecond,
+    format: formatSecond,
+    formatFull: timeFormat('%Y-%m-%d %H:%M:%S'),
+  },
+  {
+    order: 1,
+    key: TimeGranularityKey.MINUTE,
+    interval: timeMinute,
+    format: formatMinute,
+    formatFull: timeFormat('%Y-%m-%d %H:%M'),
+  },
+  {
+    order: 2,
+    key: TimeGranularityKey.HOUR,
+    interval: timeHour,
+    // format: (d: Date) => d.toLocaleString(preferredLocale, { hour: 'numeric', minute: '2-digit' }),
+    format: formatHour,
+    formatFull: timeFormat('%a %d %b %Y, %I %p'),
+  },
+  {
+    order: 3,
+    key: TimeGranularityKey.DAY,
+    interval: timeDay,
+    format: formatDay,
+    formatFull: timeFormat('%a %d %b %Y'),
+  },
+  {
+    order: 4,
+    key: TimeGranularityKey.MONTH,
+    interval: timeMonth,
+    format: formatMonth,
+    formatFull: timeFormat('%b %Y'),
+  },
+  {
+    order: 5,
+    key: TimeGranularityKey.YEAR,
+    interval: timeYear,
+    format: formatYear,
+    formatFull: timeFormat('%Y'),
+  },
+];
+
+export function getTimeGranularityByKey(key: TimeGranularityKey) {
+  return TIME_GRANULARITIES.find((s) => s.key === key);
+}
+
+export function getTimeGranularityByOrder(order: number) {
+  return TIME_GRANULARITIES.find((s) => s.order === order);
+}
+
+export function getTimeGranularityForDate(date: Date): TimeGranularity {
+  let prev = undefined;
+  for (const current of TIME_GRANULARITIES) {
+    const {interval} = current;
+    const floored = interval(date);
+    if (floored < date) {
+      if (!prev) return current;
+      return prev;
+    }
+    prev = current;
+  }
+  return TIME_GRANULARITIES[TIME_GRANULARITIES.length - 1];
+}
+
+export function areRangesEqual(
+  a: [Date, Date] | undefined,
+  b: [Date, Date] | undefined,
+): boolean {
+  if (!a && !b) return true;
+  if (!a || !b) return false;
+  return a[0] === b[0] && a[1] === b[1];
+}

package/src/types.ts

@@ -0,0 +1,162 @@
+export type FlowMapData<L, F> = {
+  locations: L[] | undefined;
+  flows: F[] | undefined;
+};
+
+export interface ViewState {
+  latitude: number;
+  longitude: number;
+  zoom: number;
+  bearing?: number;
+  pitch?: number;
+  altitude?: number;
+}
+
+export type FlowAccessor<F, T> = (flow: F) => T; // objectInfo?: AccessorObjectInfo,
+export type LocationAccessor<L, T> = (location: L) => T;
+
+export interface FlowAccessors<F> {
+  getFlowOriginId: FlowAccessor<F, string>;
+  getFlowDestId: FlowAccessor<F, string>;
+  getFlowMagnitude: FlowAccessor<F, number>;
+  getFlowTime?: FlowAccessor<F, Date>; // TODO: use number instead of Date
+  // getFlowColor?: FlowAccessor<string | undefined>;
+}
+
+export interface LocationAccessors<L> {
+  getLocationId: LocationAccessor<L, string>;
+  getLocationName?: LocationAccessor<L, string>;
+  getLocationCentroid: LocationAccessor<L, [number, number]>;
+  getLocationClusterName?: (locationIds: string[]) => string;
+  // getLocationTotalIn?: LocationAccessor<number>;
+  // getLocationTotalOut?: LocationAccessor<number>;
+  // getLocationTotalInternal?: LocationAccessor<number>;
+}
+
+export type FlowMapDataAccessors<L, F> = LocationAccessors<L> &
+  FlowAccessors<F>;
+
+export interface LocationTotals {
+  incomingCount: number;
+  outgoingCount: number;
+  internalCount: number;
+}
+
+// export interface LocationsTotals {
+//   incoming: {[id: string]: number};
+//   outgoing: {[id: string]: number};
+//   internal: {[id: string]: number};
+// }
+
+export interface CountByTime {
+  time: Date;
+  count: number;
+}
+
+export interface ViewportProps {
+  width: number;
+  height: number;
+  latitude: number;
+  longitude: number;
+  zoom: number;
+  bearing: number;
+  pitch: number;
+  altitude?: number;
+  maxZoom?: number;
+  minZoom?: number;
+  maxPitch?: number;
+  minPitch?: number;
+  transitionDuration?: number | 'auto';
+  transitionInterpolator?: any;
+  transitionInterruption?: any;
+  transitionEasing?: any;
+}
+
+export interface ClusterNode {
+  id: string;
+  zoom: number;
+  centroid: [number, number];
+}
+
+export interface ClusterLevel {
+  zoom: number;
+  nodes: ClusterNode[];
+}
+
+export type ClusterLevels = ClusterLevel[];
+
+// non-leaf cluster node
+export interface Cluster extends ClusterNode {
+  name?: string;
+  children: string[];
+}
+
+export function isCluster(c: ClusterNode): c is Cluster {
+  const {children} = c as Cluster;
+  return children && children.length > 0;
+}
+
+export function isLocationClusterNode<L>(l: L | ClusterNode): l is ClusterNode {
+  const {zoom} = l as ClusterNode;
+  return zoom !== undefined;
+}
+
+export interface AggregateFlow {
+  origin: string;
+  dest: string;
+  count: number;
+  aggregate: true;
+}
+
+export function isAggregateFlow(
+  flow: Record<string, any>,
+): flow is AggregateFlow {
+  return (
+    flow &&
+    flow.origin !== undefined &&
+    flow.dest !== undefined &&
+    flow.count !== undefined &&
+    (flow.aggregate ? true : false)
+  );
+}
+
+export interface FlowCountsMapReduce<F, T = any> {
+  map: (flow: F) => T;
+  reduce: (accumulated: T, val: T) => T;
+}
+
+export enum LocationFilterMode {
+  ALL = 'ALL',
+  INCOMING = 'INCOMING',
+  OUTGOING = 'OUTGOING',
+  BETWEEN = 'BETWEEN',
+}
+
+export interface FlowCirclesLayerAttributes {
+  length: number;
+  attributes: {
+    getPosition: LayersDataAttrValues<Float32Array>;
+    getColor: LayersDataAttrValues<Uint8Array>;
+    getInRadius: LayersDataAttrValues<Float32Array>;
+    getOutRadius: LayersDataAttrValues<Float32Array>;
+  };
+}
+
+export interface FlowLinesLayerAttributes {
+  length: number;
+  attributes: {
+    getSourcePosition: LayersDataAttrValues<Float32Array>;
+    getTargetPosition: LayersDataAttrValues<Float32Array>;
+    getThickness: LayersDataAttrValues<Float32Array>;
+    getColor: LayersDataAttrValues<Uint8Array>;
+    getEndpointOffsets: LayersDataAttrValues<Float32Array>;
+    getStaggering?: LayersDataAttrValues<Float32Array>;
+  };
+}
+
+export interface LayersData {
+  circleAttributes: FlowCirclesLayerAttributes;
+  lineAttributes: FlowLinesLayerAttributes;
+}
+
+export type LayersDataAttrValues<T> = {value: T; size: number};

package/src/util.ts

@@ -0,0 +1,3 @@
+export function flatMap<S, T>(xs: S[], f: (item: S) => T | T[]): T[] {
+  return xs.reduce((acc: T[], x: S) => acc.concat(f(x)), []);
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.common.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist"
+  },
+  "include": [
+    "src/**/*.ts",
+    "**/typings.d.ts"
+  ]
+}

package/typings.d.ts

@@ -0,0 +1 @@
+declare module 'kdbush';