@carto/kepler.gl 0.0.80 → 0.1.0-alpha.0

package/dist/cloud-providers/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Provider, FILE_CONFLICT_MSG } from './provider';
+export type { MapListItem, Millisecond, Thumbnail, ProviderProps } from './provider';

package/dist/cloud-providers/provider.d.ts

@@ -0,0 +1,176 @@
+import { MapData, ExportFileOptions } from 'actions/provider-actions';
+import { ComponentType } from 'react';
+export type Millisecond = number;
+export type MapListItem = {
+    id: string;
+    title: string;
+    description: string;
+    loadParams: any;
+    imageUrl?: string;
+    lastModification?: Millisecond;
+    privateMap?: boolean;
+};
+export type Thumbnail = {
+    width: number;
+    height: number;
+};
+export type ProviderProps = {
+    name?: string;
+    displayName?: string;
+    icon?: ComponentType<IconProps>;
+    thumbnail?: Thumbnail;
+};
+export interface IconProps {
+    height?: string;
+    width?: string;
+}
+export declare const FILE_CONFLICT_MSG = "file_conflict";
+/**
+ * The default provider class
+ * @param {object} props
+ * @param {string} props.name
+ * @param {string} props.displayName
+ * @param {React.Component} props.icon - React element
+ * @param {object} props.thumbnail - thumbnail size object
+ * @param {number} props.thumbnail.width - thumbnail width in pixels
+ * @param {number} props.thumbnail.height - thumbnail height in pixels
+ * @public
+ * @example
+ *
+ * const myProvider = new Provider({
+ *  name: 'foo',
+ *  displayName: 'Foo Storage'
+ *  icon: Icon,
+ *  thumbnail: {width: 300, height: 200}
+ * })
+ */
+export default class Provider {
+    name: string;
+    displayName: string;
+    icon: ComponentType<IconProps>;
+    thumbnail: Thumbnail;
+    getManagementUrl?: () => string;
+    constructor(props: ProviderProps);
+    /**
+     * Whether this provider support upload map to a private storage. If truthy, user will be displayed with the storage save icon on the top right of the side bar.
+     * @returns
+     * @public
+     */
+    hasPrivateStorage(): boolean;
+    /**
+     * Whether this provider support share map via a public url, if truthy, user will be displayed with a share map via url under the export map option on the top right of the side bar
+     * @returns
+     * @public
+     */
+    hasSharingUrl(): boolean;
+    /**
+     * This method is called after user share a map, to display the share url.
+     * @param fullUrl - Whether to return the full url with domain, or just the location
+     * @returns shareUrl
+     * @public
+     */
+    getShareUrl(fullUrl?: boolean): string;
+    /**
+     * This method is called by kepler.gl demo app to pushes a new location to history, becoming the current location.
+     * @param fullURL - Whether to return the full url with domain, or just the location
+     * @returns mapUrl
+     * @public
+     */
+    getMapUrl(fullURL?: boolean): string;
+    /**
+     * This method is called to determine whether user already logged in to this provider
+     * @public
+     * @returns true if a user already logged in
+     */
+    getAccessToken(): boolean;
+    /**
+     * This method is called to get the user name of the current user. It will be displayed in the cloud provider tile.
+     * @public
+     * @returns true if a user already logged in
+     */
+    getUserName(): string;
+    /**
+     * This return a standard error that will trigger the overwrite map modal
+     */
+    getFileConflictError(): Error;
+    /**
+     * This method will be called when user click the login button in the cloud provider tile.
+     * Upon login success, `onCloudLoginSuccess` has to be called to notify kepler.gl UI
+     * @param {function} onCloudLoginSuccess - callbacks to be called after login success
+     * @public
+     */
+    login(onCloudLoginSuccess: any): Promise<void>;
+    /**
+     * This method will be called when user click the logout button under the cloud provider tile.
+     * Upon login success, `onCloudLoginSuccess` has to be called to notify kepler.gl UI
+     * @param {function} onCloudLogoutSuccess - callbacks to be called after logout success
+     * @public
+     */
+    logout(onCloudLogoutSuccess: () => void): Promise<void>;
+    /**
+     * This method will be called to upload map for saving and sharing. Kepler.gl will package map data, config, title, description and thumbnail for upload to storage.
+     * With the option to overwrite already saved map, and upload as private or public map.
+     *
+     * @param {Object} param
+     * @param {Object} param.mapData - the map object
+     * @param {Object} param.mapData.map - {datasets. config, info: {title, description}}
+     * @param {Blob} param.mapData.thumbnail - A thumbnail of current map. thumbnail size can be defined by provider by this.thumbnail
+     * @param {object} [param.options]
+     * @param {boolean} [param.options.overwrite] - whether user choose to overwrite already saved map under the same name
+     * @param {boolean} [param.options.isPublic] - whether user wish to share the map with others. if isPublic is truthy, kepler will call this.getShareUrl() to display an URL they can share with others
+     * @public
+     */
+    uploadMap({ mapData, options }: {
+        mapData: MapData;
+        options: ExportFileOptions;
+    }): Promise<any>;
+    /**
+     * This method is called to get a list of maps saved by the current logged in user.
+     * @returns visualizations an array of Viz objects
+     * @public
+     * @example
+     *  async listMaps() {
+     *    return [
+     *      {
+     *        id: 'a',
+     *        title: 'My map',
+     *        description: 'My first kepler map',
+     *        imageUrl: 'http://',
+     *        lastModification: 1582677787000,
+     *        privateMap: false,
+     *        loadParams: {}
+     *      }
+     *    ];
+     *  }
+     */
+    listMaps(): Promise<MapListItem[]>;
+    /**
+     * This method will be called when user select a map to load from the storage map viewer
+     * @param {*} loadParams - the loadParams property of each visualization object
+     * @returns mapResponse - the map object containing dataset config info and format option
+     * @public
+     * @example
+     * async downloadMap(loadParams) {
+     *  const mockResponse = {
+     *    map: {
+     *      datasets: [],
+     *      config: {},
+     *      info: {
+     *        app: 'kepler.gl',
+     *        created_at: ''
+     *        title: 'test map',
+     *        description: 'Hello this is my test dropbox map'
+     *      }
+     *    },
+     *    // pass csv here if your provider currently only support save / load file as csv
+     *    format: 'keplergl'
+     *  };
+     *
+     *  return downloadMap;
+     * }
+     */
+    downloadMap(loadParams: any): Promise<{
+        map: MapData;
+        format: string;
+    }>;
+}

package/dist/components/bottom-widget.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import TimeWidgetFactory from './filters/time-widget';
+import AnimationControlFactory from './common/animation-control/animation-control';
+import AnimationControllerFactory from './common/animation-control/animation-controller';
+import { AnimationConfig, TimeRangeFilter } from 'reducers';
+interface FilterAnimationControllerProps {
+    children?: Function;
+    filter: TimeRangeFilter & {
+        animationWindow?: string;
+    };
+    filterIdx: number;
+    setFilterAnimationTime: (idx: number, value: string, a: any[]) => void;
+}
+export declare function FilterAnimationControllerFactory(AnimationController: ReturnType<typeof AnimationControllerFactory>): React.FC<FilterAnimationControllerProps>;
+export declare namespace FilterAnimationControllerFactory {
+    var deps: (typeof AnimationControllerFactory)[];
+}
+interface LayerAnimationControllerProps {
+    children?: Function;
+    animationConfig: AnimationConfig & {
+        timeSteps?: number[] | null;
+    };
+    setLayerAnimationTime: (x: number) => void;
+}
+export declare function LayerAnimationControllerFactory(AnimationController: ReturnType<typeof AnimationControllerFactory>): React.FC<LayerAnimationControllerProps>;
+export declare namespace LayerAnimationControllerFactory {
+    var deps: (typeof AnimationControllerFactory)[];
+}
+declare function BottomWidgetFactory(TimeWidget: ReturnType<typeof TimeWidgetFactory>, AnimationControl: ReturnType<typeof AnimationControlFactory>, FilterAnimationController: ReturnType<typeof FilterAnimationControllerFactory>, LayerAnimationController: ReturnType<typeof LayerAnimationControllerFactory>): React.ForwardRefExoticComponent<{
+    containerW: number;
+} & {
+    filters: import("reducers").Filter[];
+    datasets: import("reducers").Datasets;
+    uiState: import("reducers").UiState;
+    layers: import("../layers/base-layer").default[];
+    animationConfig: AnimationConfig;
+    visStateActions: typeof import("../actions/vis-state-actions");
+    toggleModal: (id: string) => {
+        payload: string;
+        type: "@@kepler.gl/TOGGLE_MODAL";
+    };
+    sidePanelWidth: any;
+} & React.RefAttributes<unknown>>;
+declare namespace BottomWidgetFactory {
+    var deps: (typeof FilterAnimationControllerFactory | typeof LayerAnimationControllerFactory | typeof TimeWidgetFactory | typeof AnimationControlFactory)[];
+}
+export default BottomWidgetFactory;

package/dist/components/common/action-panel.d.ts

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren, ElementType, CSSProperties } from 'react';
+export type ActionPanelProps = PropsWithChildren<{
+    color?: string;
+    className?: string;
+    direction?: string;
+}>;
+export type ActionPanelItemProps = PropsWithChildren<{
+    color?: string;
+    className?: string;
+    Icon?: ElementType;
+    label: string;
+    onClick?: () => void;
+    isSelection?: boolean;
+    isActive?: boolean;
+    style?: CSSProperties;
+}>;
+export interface DirectionProp {
+    direction: string;
+}
+/** @type {typeof import('./action-panel').ActionPanelItem} */
+export declare const ActionPanelItem: React.MemoExoticComponent<({ children, color, className, Icon, label, onClick, isSelection, isActive, style }: ActionPanelItemProps) => React.JSX.Element>;
+/** @type {typeof import('./action-panel').ActionPanel} */
+declare const ActionPanel: {
+    ({ children, className, direction }: ActionPanelProps): React.JSX.Element;
+    displayName: string;
+};
+export default ActionPanel;

package/dist/components/common/animation-control/animation-control.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import PlaybackControlsFactory from './playback-controls';
+import FloatingTimeDisplayFactory from './floating-time-display';
+declare function AnimationControlFactory(PlaybackControls: ReturnType<typeof PlaybackControlsFactory>, FloatingTimeDisplay: ReturnType<typeof FloatingTimeDisplayFactory>): {
+    ({ isAnimatable, isAnimating, resetAnimation, toggleAnimation, setLayerAnimationTime, updateAnimationSpeed, animationConfig }: {
+        isAnimatable: any;
+        isAnimating: any;
+        resetAnimation: any;
+        toggleAnimation: any;
+        setLayerAnimationTime: any;
+        updateAnimationSpeed: any;
+        animationConfig: any;
+    }): React.JSX.Element;
+    defaultProps: {
+        toggleAnimation: () => void;
+        updateAnimationSpeed: () => void;
+        animationControlProps: {};
+        animationConfig: {};
+    };
+};
+declare namespace AnimationControlFactory {
+    var deps: (typeof PlaybackControlsFactory | typeof FloatingTimeDisplayFactory)[];
+}
+export default AnimationControlFactory;

package/dist/components/common/animation-control/animation-controller.d.ts

@@ -0,0 +1,16 @@
+import { Component } from 'react';
+interface AnimationControllerProps<T extends number | number[]> {
+    children: Function;
+    isAnimating?: boolean;
+    speed?: number;
+    updateAnimation: (x: T) => void;
+    animationWindow?: string;
+    steps?: number[] | null;
+    domain: number[] | null;
+    value: T;
+    baseSpeed?: number;
+}
+declare class AnimationControllerType<T extends number | number[]> extends Component<AnimationControllerProps<T>> {
+}
+declare function AnimationControllerFactory(): typeof AnimationControllerType;
+export default AnimationControllerFactory;

package/dist/components/common/animation-control/animation-speed-slider.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from 'react';
+import RangeSliderFactory from 'components/common/range-slider';
+interface AnimationSpeedSliderProps {
+    onHide: () => void;
+    speed: number;
+    updateAnimationSpeed: (val: number) => void;
+}
+declare function AnimationSpeedSliderFactory(RangeSlider: ReturnType<typeof RangeSliderFactory>): ComponentType<AnimationSpeedSliderProps>;
+declare namespace AnimationSpeedSliderFactory {
+    var deps: (typeof RangeSliderFactory)[];
+}
+export default AnimationSpeedSliderFactory;

package/dist/components/common/animation-control/floating-time-display.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FloatingTimeDisplayProps {
+    currentTime: number | number[];
+    defaultTimeFormat?: string | null;
+    timeFormat?: string | null;
+    timezone?: string | null;
+}
+export default function FloatingTimeDisplayFactory(): ({ currentTime, defaultTimeFormat, timeFormat, timezone }: FloatingTimeDisplayProps) => React.JSX.Element;
+export {};

package/dist/components/common/animation-control/playback-controls.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ButtonProps } from 'components/common/styled-components';
+import AnimationSpeedSliderFactory from './animation-speed-slider';
+import { Rocket } from 'components/common/icons';
+import { ReactComponentLike } from 'prop-types';
+interface IconButtonProps extends ButtonProps {
+    collapsed?: boolean;
+}
+export declare const IconButton: import("styled-components").StyledComponent<"div", any, {
+    className: string;
+} & ButtonProps & IconButtonProps, "className">;
+declare const DEFAULT_ICONS: {
+    reset: (_: any) => React.JSX.Element;
+    play: (_: any) => React.JSX.Element;
+    pause: (_: any) => React.JSX.Element;
+    speed: typeof Rocket;
+    animationFree: {
+        (props: Partial<import("../icons/base").BaseProps>): React.JSX.Element;
+        defaultProps: {
+            height: string;
+            viewBox: string;
+            predefinedClassName: string;
+        };
+    };
+    animationIncremental: {
+        (props: Partial<import("../icons/base").BaseProps>): React.JSX.Element;
+        defaultProps: {
+            height: string;
+            viewBox: string;
+            predefinedClassName: string;
+        };
+    };
+};
+interface AnimationItem {
+    id: string;
+    icon: ReactComponentLike;
+    tooltip: string;
+}
+interface AnimationWindowControlProps {
+    onClick?: (id: string) => void;
+    selected?: string;
+    onHide: () => void;
+    height?: string;
+    animationItems: {
+        [key: string]: AnimationItem;
+    };
+    btnStyle: any;
+}
+export declare const AnimationWindowControl: ({ onClick, selected, onHide, height, animationItems, btnStyle }: AnimationWindowControlProps) => React.JSX.Element;
+interface PlaybackControls {
+    isAnimatable?: boolean;
+    isAnimating?: boolean;
+    width?: number | string;
+    speed: number;
+    animationWindow?: string;
+    setFilterAnimationWindow?: (id: string) => void;
+    updateAnimationSpeed?: (val: number) => void;
+    pauseAnimation?: () => void;
+    resetAnimation?: () => void;
+    startAnimation: () => void;
+    playbackIcons?: typeof DEFAULT_ICONS;
+    animationItems?: {
+        [key: string]: AnimationItem;
+    };
+    buttonStyle?: string;
+    buttonHeight?: string;
+}
+declare function PlaybackControlsFactory(AnimationSpeedSlider: ReturnType<typeof AnimationSpeedSliderFactory>): ({ isAnimatable, isAnimating, width, speed, animationWindow, setFilterAnimationWindow, updateAnimationSpeed, pauseAnimation, resetAnimation, startAnimation, playbackIcons, animationItems, buttonStyle, buttonHeight }: PlaybackControls) => React.JSX.Element;
+declare namespace PlaybackControlsFactory {
+    var deps: (typeof AnimationSpeedSliderFactory)[];
+}
+export default PlaybackControlsFactory;

package/dist/components/common/animation-control/speed-control.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import AnimationSpeedSliderFactory from './animation-speed-slider';
+declare function SpeedControlFactory(AnimationSpeedSlider: ReturnType<typeof AnimationSpeedSliderFactory>): ({ onClick, updateAnimationSpeed, speed, showSpeedControl, buttonHeight }: {
+    onClick: any;
+    updateAnimationSpeed: any;
+    speed: any;
+    showSpeedControl: any;
+    buttonHeight?: string;
+}) => React.JSX.Element;
+declare namespace SpeedControlFactory {
+    var deps: (typeof AnimationSpeedSliderFactory)[];
+}
+export default SpeedControlFactory;

package/dist/components/common/checkbox.d.ts

@@ -0,0 +1,35 @@
+import React, { ChangeEventHandler, Component, FocusEventHandler, ReactNode } from 'react';
+declare function noop(): void;
+interface CheckboxProps {
+    id: string;
+    type?: string;
+    label?: ReactNode;
+    className?: string;
+    value?: string | 'indeterminate';
+    checked?: boolean;
+    disabled?: boolean;
+    error?: string;
+    switch?: boolean;
+    activeColor?: string;
+    secondary?: boolean;
+    onBlur: FocusEventHandler<HTMLInputElement>;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onFocus: FocusEventHandler<HTMLInputElement>;
+}
+export default class Checkbox extends Component<CheckboxProps> {
+    static defaultProps: {
+        disabled: boolean;
+        checked: boolean;
+        onBlur: typeof noop;
+        onChange: typeof noop;
+        onFocus: typeof noop;
+        label: string;
+    };
+    state: {
+        focused: boolean;
+    };
+    handleFocus: FocusEventHandler<HTMLInputElement>;
+    handleBlur: FocusEventHandler<HTMLInputElement>;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/components/common/color-legend.d.ts

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+type RangeType = {
+    colorMap?: [string, string][];
+    colorLegends?: {
+        [key: string]: string;
+    };
+    colors: string[];
+};
+interface ColorLegendProps {
+    width: number;
+    scaleType?: string;
+    domain?: any[] | object;
+    fieldType?: string | null;
+    range?: RangeType;
+    labelFormat?: Function;
+    displayLabel?: boolean;
+}
+export default class ColorLegend extends Component<ColorLegendProps> {
+    domainSelector: (props: any) => any;
+    rangeSelector: (props: any) => any;
+    labelFormatSelector: (props: any) => any;
+    scaleTypeSelector: (props: any) => any;
+    fieldTypeSelector: (props: any) => any;
+    legendsSelector: ((state: any) => {
+        data: any;
+        labels: any;
+    }) & import("reselect").OutputSelectorFields<(args_0: any, args_1: any, args_2: any, args_3: any, args_4: any) => {
+        data: any;
+        labels: any;
+    }, {
+        clearCache: () => void;
+    }> & {
+        clearCache: () => void;
+    };
+    render(): React.JSX.Element;
+}
+export declare const LegendRow: ({ label, displayLabel, color, idx }: {
+    label?: string;
+    displayLabel: any;
+    color: any;
+    idx: any;
+}) => React.JSX.Element;
+export {};

package/dist/components/common/data-table/button.d.ts

@@ -0,0 +1,8 @@
+import React, { MouseEventHandler } from 'react';
+type ButtonProps = {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+    text?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const Button: ({ onClick, disabled, text, children, ...props }: ButtonProps) => React.JSX.Element;
+export default Button;

package/dist/components/common/data-table/canvas.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").StyledComponent<"canvas", any, {}, never>;
+export default _default;

package/dist/components/common/data-table/cell-size.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Measure rows and column content to determine min width for each column
+ * @param {*} param0
+ */
+export declare function renderedSize({ text: { dataContainer, column }, type, colIdx, numRowsToCalculate, fontSize, font, cellPadding, maxCellSize, maxHeaderSize, minCellSize, optionsButton }: {
+    text: {
+        dataContainer: any;
+        column: any;
+    };
+    type?: string;
+    colIdx: any;
+    numRowsToCalculate?: number;
+    fontSize?: number;
+    font?: string;
+    cellPadding?: number;
+    maxCellSize?: number;
+    maxHeaderSize?: number;
+    minCellSize?: number;
+    optionsButton?: number;
+}): {
+    row: number;
+    header: number;
+};
+/**
+ * Adjust cell size based on container width
+ * @param {number} containerWidth
+ * @param {Object} cellSizeCache
+ * @param {string[]} pinnedColumns
+ * @param {string[]} unpinnedColumns
+ */
+export declare function adjustCellsToContainer(containerWidth: number, cellSizeCache: object, pinnedColumns: string[], unpinnedColumns: string[]): {
+    cellSizeCache: {};
+    ghost: number;
+} | {
+    cellSizeCache: {};
+};

package/dist/components/common/data-table/grid.d.ts

@@ -0,0 +1,7 @@
+import React, { PureComponent } from 'react';
+import { Grid, GridProps } from 'react-virtualized';
+export default class GridHack extends PureComponent<GridProps> {
+    grid: Grid | null;
+    componentDidUpdate(preProps: any): void;
+    render(): React.JSX.Element;
+}