react-google-charts

const Chart: React.FC<ReactGoogleChartProps>;

type GoogleArrayToDataTable = (
    data: any[][],
    isFirstRowLabels?: boolean
) => GoogleDataTable;

type GoogleChartAction = {
    id: string;
    text: string;
    action: (chartWrapper: GoogleChartWrapper) => void;
};

type GoogleChartControl = {
    new (chartWrapperOptions: GoogleChartControlOptions): GoogleChartControl;
    getContainerId: () => string;
    getOptions: () => GoogleChartControlOptions;
    getState: () => any;
    setState: (state: any) => void;
    setOptions: (options: GoogleChartControlOptions) => void;
    setControlType: (controlType: string) => void;
};

type GoogleChartControlAndProp = {
    controlProp: GoogleChartControlProp;
    control: GoogleChartControl;
};

type GoogleChartControlOptions = any;

type GoogleChartControlProp = {
    controlType:
        | 'CategoryFilter'
        | 'ChartRangeFilter'
        | 'DateRangeFilter'
        | 'NumberRangeFilter'
        | 'StringFilter';
    options: {};
    controlWrapperParams?: {};
    controlID?: string;
    controlPosition?: 'top' | 'bottom';
    controlEvents?: ReactGoogleChartEvent[];
};

type GoogleChartDashboard = {
    draw: (data: GoogleDataTable) => void;
    bind: (
        controlWrapperOrWrappers: GoogleChartControl | GoogleChartControl[],
        chartWrapper: GoogleChartWrapper
    ) => void;
};

type GoogleChartEditor = {
    new (): GoogleChartEditor;
    openDialog: (
        chartWrapper: GoogleChartWrapper,
        chartEditorOptions?: {
            dataSourceInput?: any;
            [otherKeyMaybe: string]: any;
        }
    ) => null;
    getChartWrapper: () => GoogleChartWrapper;
    setChartWrapper: (chartWrapper: GoogleChartWrapper) => GoogleChartWrapper;
    closeDialog: () => null;
};

type GoogleChartFormatter = {
    column: number | number[];
    type:
        | 'ArrowFormat'
        | 'BarFormat'
        | 'ColorFormat'
        | 'DateFormat'
        | 'NumberFormat'
        | 'PatternFormat';
    options?: {};
    ranges?: [any, any, string, string][];
};

type GoogleChartLoader = {
    load: (
        version: GoogleChartVersion,
        googleChartOptions: GoogleChartLoaderOptions
    ) => void;
    setOnLoadCallback: (callback: () => void) => void;
};

type GoogleChartLoaderOptions = {
    packages?: GoogleChartPackages[];
    language?: string;
    mapsApiKey?: string;
};

type GoogleChartOptions = {
    width?: number;
    height?: number;
    is3D?: boolean;
    backgroundColor: string;
    title?: string;
    hAxis?: {
        minValue?: any;
        maxValue?: any;
        ticks?: GoogleChartTicks;
        title?: string;
        viewWindow?: {
            max?: any;
            min?: any;
            [otherOptionKey: string]: any;
        };
        [otherOptionKey: string]: any;
    };
    vAxis?: {
        minValue?: any;
        maxValue?: any;
        ticks?: GoogleChartTicks;
        title?: string;
        viewWindow?: {
            max?: any;
            min?: any;
            [otherOptionKey: string]: any;
        };
        [otherOptionKey: string]: any;
    };
    bubble?: {};
    pieHole?: number;
    redColor?: string;
    redFrom?: number;
    redTo?: number;
    yellowColor?: string;
    yellowFrom?: number;
    yellowTo?: number;
    greenColor?: string;
    greenFrom?: number;
    greenTo?: number;
    minorTicks?: number;
    majorTicks?: string[];
    legend?:
        | string
        | {
              position?: string;
              maxLines?: number;
              [otherOptionKey: string]: any;
          };
    curveType?: string;
    showTooltip?: boolean;
    showInfoWindow?: boolean;
    allowHtml?: boolean;
    isStacked?: string | boolean;
    minColor?: string;
    midColor?: string;
    maxColor?: string;
    headerHeight?: number;
    fontColor?: string;
    showScale?: boolean;
    bar?: {
        groupWidth?: string;
    };
    candlestick?: {
        fallingColor?: {
            strokeWidth?: number;
            fill?: string;
        };
        risingColor?: {
            strokeWidth?: number;
            fill?: string;
        };
        [otherOptionKey: string]: any;
    };
    wordtree?: {
        format?: string;
        word?: string;
        [otherOptionKey: string]: any;
    };
    [otherOptionKey: string]: any;
};

type GoogleChartPackages =
    | 'corechart'
    | 'charteditor'
    | 'controls'
    | 'calendar'
    | 'gantt'
    | 'gauge'
    | 'geochart'
    | 'map'
    | 'orgchart'
    | 'sankey'
    | 'table'
    | 'timeline'
    | 'treemap'
    | 'wordtree';

type GoogleChartTicks = (number | Date)[];

type GoogleChartToolbarItem = {
    type: 'igoogle' | 'html' | 'csv' | 'htmlcode';
    datasource: string;
    gadget?: string;
    userPrefs?: {
        '3d': number;
        [otherKeyMaybe: string]: any;
    };
};

type GoogleChartVersion = 'current' | 'upcoming' | string;

type GoogleChartWrapper = {
    new (chartWrapperOptions: Partial<ChartWrapperOptions>): GoogleChartWrapper;
    draw: (chartArgs?: ChartWrapperProps) => any;
    toJSON: () => string;
    clone: () => GoogleChartWrapper;
    getDataSourceUrl: () => string;
    getDataTable: () => GoogleDataTable | null;
    getChartType: () => GoogleChartWrapperChartType;
    getChartName: () => string;
    getChart: () => {
        removeAction: (actionID: string) => void;
        getSelection: () => {
            row?: any;
            column?: any;
        }[];
        setAction: (ChartAction: GoogleChartAction) => void;
        getImageURI: () => void;
        clearChart: () => void;
    };
    getContainerId: () => string;
    getQuery: () => string;
    getRefreshInterval: () => number;
    getOption: (key: string, opt_default_value?: any) => any;
    getOptions: () => {};
    getSelection: () => {
        row?: any;
        column?: any;
    }[];
    getView: () => {} | any[];
    setDataSourceUrl: (url: string) => void;
    setDataTable: (table: any) => void;
    setChartType: (chartType: GoogleChartWrapperChartType) => void;
    setChartName: (name: string) => void;
    setContainerId: (id: string) => void;
    setQuery: (query_string: string) => void;
    setRefreshInterval: (interval: number) => void;
    setOption: (key: string, value: any) => void;
    setOptions: (options_obj: Partial<ChartWrapperOptions['options']>) => void;
};

type GoogleChartWrapperChartType =
    | 'AnnotationChart'
    | 'AreaChart'
    | 'BarChart'
    | 'BubbleChart'
    | 'Calendar'
    | 'CandlestickChart'
    | 'ColumnChart'
    | 'ComboChart'
    | 'DiffChart'
    | 'DonutChart'
    | 'Gantt'
    | 'Gauge'
    | 'GeoChart'
    | 'Histogram'
    | 'LineChart'
    | 'Line'
    | 'Bar'
    | 'Map'
    | 'OrgChart'
    | 'PieChart'
    | 'Sankey'
    | 'ScatterChart'
    | 'Scatter'
    | 'SteppedAreaChart'
    | 'Table'
    | 'Timeline'
    | 'TreeMap'
    | 'WaterfallChart'
    | 'WordTree';

type GoogleDataTable = {
    new (dataParam: any): GoogleDataTable;
    addColumn: (column: GoogleDataTableColumn) => number;
    addRow: (row?: GoogleDataTableRow) => number;
    addRows: (rows?: GoogleDataTableRow[] | number[] | any[]) => number;
    clone: () => GoogleDataTable;
    getColumnId: (columnIndex: number) => string;
    getColumnLabel: (columnIndex: number) => string;
    getColumnPattern: (columnIndex: number) => string;
    getColumnProperties: (columnIndex: number) => {};
    getColumnProperty: (columnIndex: number, name: string) => any;
    getColumnRange: (columnIndex: number) => {
        min: number | null;
        max: number | null;
    };
    getColumnRole: (columnIndex: number) => GoogleDataTableColumnRoleType;
    getColumnType: (columnIndex: number) => GoogleDataTableColumnType;
    getDistinctValues: (columnIndex: number) => any[];
    getFilteredRows: (filters: GoogleDataTableRowFilter[]) => number[];
    getFormattedValue: (rowIndex: number, columnIndex: number) => string;
    getNumberOfColumns: () => number;
    getNumberOfRows: () => number;
    getProperties: (rowIndex: number, columnIndex: number) => {};
    getProperty: (rowIndex: number, columnIndex: number, name: string) => any;
    getRowProperties: (rowIndex: number) => {};
    getRowProperty: (rowIndex: number, name: string) => any;
    getSortedRows: (sortColumns: GoogleDataTableSortColumns) => number[];
    getTableProperties: () => {};
    getTableProperty: (name: string) => any;
    getValue: (
        rowIndex: number,
        columnIndex: number
    ) => boolean | string | number | Date | number[] | null;
    insertColumn: (
        columnIndex: number,
        type: GoogleDataTableColumnType,
        label?: string,
        id?: string
    ) => void;
    insertRows: (
        rowIndex: number,
        numberOrArray: GoogleDataTableRow[] | number
    ) => void;
    removeColumn: (columnIndex: number) => void;
    removeColumns: (columnIndex: number, numberOfColumns: number) => void;
    removeRow: (rowIndex: number) => void;
    removeRows: (rowIndex: number, numberOfColumns: number) => void;
    setCell: (
        rowIndex: number,
        columnIndex: number,
        value?: any,
        formattedValue?: string,
        properties?: {}
    ) => {};
    setColumnLabel: (columnIndex: number, label: string) => void;
    setColumnProperty: (columnIndex: number, name: string, value: any) => void;
    setColumnProperties: (columnIndex: number, properties: {} | null) => void;
    setFormattedValue: (
        rowIndex: number,
        columnIndex: number,
        formattedValue: string
    ) => void;
    setProperty: (
        rowIndex: number,
        columnIndex: number,
        name: string,
        value: any
    ) => void;
    setProperties: (
        rowIndex: number,
        columnIndex: number,
        properties: {} | null
    ) => void;
    setRowProperty: (rowIndex: number, name: string, value: any) => void;
    setRowProperties: (rowIndex: number, properties: {} | null) => void;
    setTableProperties: (properties: {} | null) => void;
    setValue: (
        rowIndex: number,
        columnIndex: number,
        value: boolean | string | number | Date | number[] | null
    ) => void;
    sort: (sortColumns: GoogleDataTableSortColumns) => void;
    toJSON: () => string;
};

type GoogleDataTableCell =
    | {
          v?: any;
          f?: string;
          p?: {};
      }
    | string
    | number
    | boolean
    | Date
    | null;

type GoogleDataTableColumn =
    | {
          type: GoogleDataTableColumnType;
          label?: string;
          role?: GoogleDataTableColumnRoleType;
          pattern?: string;
          p?: {};
          id?: string;
      }
    | string;

type GoogleDataTableColumnType =
    | 'string'
    | 'number'
    | 'boolean'
    | 'date'
    | 'datetime'
    | 'timeofday';

type GoogleDataTableJS = {
    cols: GoogleDataTableColumn[];
    rows: {
        c: GoogleDataTableRow;
    }[];
    p?: {};
};

type GoogleDataTableRow = GoogleDataTableCell[];

type GoogleDataTableRowFilter = {
    column: number;
    value: any;
    minValue?: any;
    maxValue?: any;
};

type GoogleDataTableSortColumns =
    | number
    | {
          column: number;
          desc: boolean;
      }
    | number[]
    | {
          column: number;
          desc: boolean;
      }[];

type GoogleViz = {
    charts: GoogleChartLoader;
    visualization: {
        ChartWrapper: GoogleChartWrapper;
        ControlWrapper: GoogleChartControl;
        ChartEditor: GoogleChartEditor;
        DataTable: GoogleDataTable;
        events: GoogleVizEvents;
        arrayToDataTable: GoogleArrayToDataTable;
        drawToolbar: GoogleVizDrawToolbar;
        [otherKeys: string]: any;
    };
};

type GoogleVizDrawToolbar = (
    toolbarContainer: HTMLDivElement,
    components: GoogleChartToolbarItem[]
) => any;

type GoogleVizEventListener = {
    key: Record<string, unknown>;
};

type GoogleVizEventName =
    | 'ready'
    | 'error'
    | 'select'
    | 'animationfinish'
    | 'statechange'
    | 'ok'
    | 'cancel'
    | 'animationstart';

type GoogleVizEvents = {
    addListener: (
        chartWrapper: GoogleChartWrapper | GoogleChartControl | GoogleChartEditor,
        name: GoogleVizEventName,
        onEvent: (chartWrapper: GoogleChartWrapper) => any
    ) => GoogleVizEventListener;
    removeListener: (eventListener: GoogleVizEventListener) => any;
    removeAllListeners: (chartWrapper: GoogleChartWrapper) => any;
};

type ReactGoogleChartContext = {
    data: ReactGoogleChartProps['data'];
    rows: ReactGoogleChartProps['rows'] | null;
    columns: ReactGoogleChartProps['columns'] | null;
    diffdata: ReactGoogleChartProps['diffdata'] | null;
    options: ReactGoogleChartProps['options'] | null;
    legend_toggle: ReactGoogleChartProps['legend_toggle'] | null;
    legendToggle: ReactGoogleChartProps['legendToggle'] | null;
    chartType: ReactGoogleChartProps['chartType'] | null;
    formatters: ReactGoogleChartProps['formatters'] | null;
    spreadSheetUrl: ReactGoogleChartProps['spreadSheetUrl'] | null;
    spreadSheetQueryParameters:
        | ReactGoogleChartProps['spreadSheetQueryParameters']
        | null;
};

type ReactGoogleChartDashboardRender = ({
    renderControl,
    renderChart,
    renderToolbar,
}: {
    renderControl: (
        filter: ({
            control,
            controlProp,
        }: {
            control: GoogleChartControl;
            controlProp: GoogleChartControlProp;
        }) => boolean
    ) => any;
    renderChart: () => any;
    renderToolbar: () => any;
}) => any;

type ReactGoogleChartEvent = {
    eventName: GoogleVizEventName;
    callback: (eventCallbackArgs: {
        chartWrapper: GoogleChartWrapper | null;
        controlWrapper?: GoogleChartControl;
        props: ReactGoogleChartProps;
        google: GoogleViz;
        eventArgs: any;
    }) => void;
};

type ReactGoogleChartProps = {
    height?: string | number;
    width?: string | number;
    graphID?: string;
    chartType: GoogleChartWrapperChartType;
    diffdata?: {
        old: any;
        new: any;
    };
    options?: ChartWrapperOptions['options'];
    loader?: JSX.Element;
    errorElement?: JSX.Element;
    data?: any[] | {};
    rows?: GoogleDataTableRow[];
    columns?: GoogleDataTableColumn[];
    chartActions?: GoogleChartAction[];
    chartEvents?: ReactGoogleChartEvent[];
    chartVersion?: GoogleChartVersion;
    chartPackages?: GoogleChartPackages[];
    chartLanguage?: string;
    mapsApiKey?: string;
    graph_id?: string;
    legendToggle?: boolean;
    legend_toggle?: boolean;
    onLoad?: (
        google: GoogleViz,
        paramsV2: {
            google: GoogleViz;
            chartWrapper: GoogleChartWrapper;
            chartDashboard: GoogleChartDashboard;
            chartEditor?: GoogleChartEditor | null;
        }
    ) => void;
    getChartWrapper?: (chartWrapper: GoogleChartWrapper, google: GoogleViz) => void;
    getChartEditor?: (args: {
        chartEditor: GoogleChartEditor;
        chartWrapper: GoogleChartWrapper;
        google: GoogleViz;
    }) => void;
    className?: string;
    style?: React.CSSProperties;
    formatters?: GoogleChartFormatter[];
    spreadSheetUrl?: string;
    spreadSheetQueryParameters?: {
        headers: number;
        gid?: number | string;
        sheet?: string;
        query?: string;
        access_token?: string;
    };
    rootProps?: any;
    controls?: GoogleChartControlProp[];
    render?: ReactGoogleChartDashboardRender;
    toolbarItems?: GoogleChartToolbarItem[];
    toolbarID?: string;
    chartWrapperParams?: any;
    chartLoaderScriptUrl?: string;
};

type ReactGoogleChartState = {
    loadingStatus: 'loading' | 'errored' | 'ready';
    google: null | GoogleViz;
};

type UseChartControlsParams = ReactGoogleChartProps & {
    google: GoogleViz;
    chartWrapper: GoogleChartWrapper | null;
    chartDashboard: GoogleChartDashboard | null;
};

type VizEventsProps = {
    chartWrapper: GoogleChartWrapper;
    onReady?: (chartWrapper: GoogleChartWrapper) => any;
    onError?: (chartWrapper: GoogleChartWrapper) => any;
    onSelect?: (
        selection: Array<{
            row?: any;
            column?: any;
        }>
    ) => any;
    render?: (props: VizEventsProps, chartWrapper: GoogleChartWrapper) => any;
    children?: (props: VizEventsProps, chartWrapper: GoogleChartWrapper) => any;
};

type WindowWithMaybeGoogle = Window & {
    google?: any;
};