/// <reference types="react" />
import { ChartData, ChartOptions } from "chart.js/auto";
import { ComponentWithGraphAndDatePicker, CustomCurrencyNumberFormat, GraphType, MeterAggregation } from "../../../types";
import { DataTableCol, DataTableRow } from "../../molecules/DataTable/types";
interface DropdownOption {
    label: string;
    value: string;
}
export interface CostAndBilledUsageVisualProps extends ComponentWithGraphAndDatePicker {
    aggregation?: MeterAggregation;
    allowedGraphs?: GraphType[];
    columns: DataTableCol[];
    creditsShortName: string;
    customCurrencyNumberFormat?: CustomCurrencyNumberFormat;
    dateRangeOptions?: DropdownOption[];
    description?: string | JSX.Element;
    graphData?: ChartData<"bar">;
    graphOptions: ChartOptions<any>;
    handleCsvExport?: () => void;
    hasExportAction?: boolean;
    hasInitialProductItem?: boolean;
    initialInterval: string;
    initialProductItem: string;
    onGraphTypeChange?: (graphType: string) => void;
    onIntervalChange?: (interval: string) => void;
    onProductItemChange?: (productItem: string) => void;
    productItemOptions?: DropdownOption[];
    rows: DataTableRow[];
    showOnlyCurrentBillingPeriod?: boolean;
    viewOption: string;
    withPercentage?: boolean;
    withTable?: boolean;
}
export declare const CostAndBilledUsageVisual: ({ hasInitialProductItem, showOnlyCurrentBillingPeriod, allowedGraphs, graphData, rows, columns, withTable, productItemOptions, handleCsvExport, dateRangeOptions, graphOptions, hasExportAction, initialProductItem, initialInterval, onDateChange, onPeriodChange, onProductItemChange, onIntervalChange, onGraphTypeChange, periodValue, startDate, endDate, viewOption, withDatePicker, withTitle, withContainer, title, callToAction, creditsShortName, graphTextColor, customCurrencyNumberFormat, description, withPercentage, aggregation, }: CostAndBilledUsageVisualProps) => import("react/jsx-runtime").JSX.Element;
export {};