import { default as default_2 } from 'react';

declare interface AxesClassNameObject {
    gridLines?: string;
    labels?: string;
    title?: string;
    axis?: string;
}

declare interface AxesStyleObject {
    gridLines?: React.CSSProperties;
    labels?: React.CSSProperties;
    title?: React.CSSProperties;
    axis?: React.CSSProperties;
}

declare interface ClassNameObject {
    title?: string;
    footnote?: string;
    source?: string;
    description?: string;
    tooltip?: string;
    xAxis?: AxesClassNameObject;
    yAxis?: AxesClassNameObject;
    legend?: string;
    graphContainer?: string;
    graphObjectValues?: string;
    dataConnectors?: string;
    mouseOverLine?: string;
    regLine?: string;
    dataCards?: string;
    colorLegend?: string;
    modal?: string;
    area?: string;
}

export declare function DataCards(props: Props): default_2.JSX.Element;

export declare type FilterDataType = {
    column: string;
    label?: string;
    defaultValue?: string;
    excludeValues?: string[];
    width?: string;
};

declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';

declare interface Props {
    /** Array of data objects */
    data: object[];
    /** Title of the graph */
    graphTitle?: string | default_2.ReactNode;
    /** Description of the graph */
    graphDescription?: string | default_2.ReactNode;
    /** Footnote for the graph */
    footNote?: string | default_2.ReactNode;
    /** Source data for the graph */
    sources?: SourcesDataType[];
    /** Accessibility label */
    ariaLabel?: string;
    /** Background color of each of the card */
    cardBackgroundColor?: string;
    /** Background color of the graph */
    backgroundColor?: string | boolean;
    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
    styles?: StyleObject;
    /** Custom class names */
    classNames?: ClassNameObject;
    /** Width of the graph */
    width?: number;
    /** Height of the graph */
    height?: number;
    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
    padding?: string;
    /** Html for each card. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data. */
    cardTemplate: string | ((_d: any) => default_2.ReactNode);
    /** Allows users to add a dropdown menus, that can be used as filters in the graph. Each filter is an object that specifies the column to filter by, and the default value. All the filters are single select only.  */
    cardFilters?: FilterDataType[];
    /** Allows users to add a dropdown menus, that can be used to sort the cards based on different columns. */
    cardSortingOptions?: {
        defaultValue?: string;
        options: {
            value: string;
            label: string;
            type: 'asc' | 'desc';
        }[];
        width?: string;
    };
    /** Adds a search bar to search the cards list. The array defines all the columns from the data where text is used to search from. */
    cardSearchColumns?: string[];
    /** Min width of the cards for responsiveness. */
    cardMinWidth?: number;
    /** Add a button to download data object when viewing details. If true, data can be downloaded; if a string is provided, it specifies the button label. */
    allowDataDownloadOnDetail?: string | boolean;
    /** Defines the number of items displayed per page. */
    noOfItemsInAPage?: number;
    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
    detailsOnClick?: string | ((_d: any) => default_2.ReactNode);
    /** Callback for mouse click event */
    onSeriesMouseClick?: (_d: any) => void;
    /** Language setting  */
    language?: Languages;
    /** Color theme */
    theme?: 'light' | 'dark';
    /** Theme for the UI elements */
    uiMode?: 'light' | 'normal';
    /** Unique ID for the graph */
    graphID?: string;
}

declare interface SourcesDataType {
    source: string;
    link?: string;
}

declare interface StyleObject {
    title?: React.CSSProperties;
    footnote?: React.CSSProperties;
    source?: React.CSSProperties;
    description?: React.CSSProperties;
    graphContainer?: React.CSSProperties;
    tooltip?: React.CSSProperties;
    xAxis?: AxesStyleObject;
    yAxis?: AxesStyleObject;
    graphObjectValues?: React.CSSProperties;
    dataConnectors?: React.CSSProperties;
    mouseOverLine?: React.CSSProperties;
    regLine?: React.CSSProperties;
    dataCards?: React.CSSProperties;
    modal?: React.CSSProperties;
    area?: React.CSSProperties;
}

export { }