import { JSX } from 'react'; declare interface AnimateDataType { duration: number; once: boolean; amount: 'some' | 'all' | number; } 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 BarGraphDataType { label: string | number; date?: string | number; size?: number | null; color?: string | null; data?: object; } 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; } declare type Color = 'azure' | 'blue' | 'green' | 'lime' | 'orange' | 'pink' | 'red' | 'teal' | 'violet' | 'yellow' | 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'background' | 'surface' | 'surface-2xs' | 'surface-xs' | 'surface-sm' | 'surface-md' | 'surface-lg' | 'surface-xl' | 'surface-2xl' | 'surface-3xl' | 'surface-4xl' | 'foreground' | 'sdg-1' | 'sdg-2' | 'sdg-3' | 'sdg-4' | 'sdg-5' | 'sdg-6' | 'sdg-7' | 'sdg-8' | 'sdg-9' | 'sdg-10' | 'sdg-11' | 'sdg-12' | 'sdg-13' | 'sdg-14' | 'sdg-15' | 'sdg-16' | 'sdg-17' | 'male' | 'female' | 'urban' | 'rural' | 'child' | 'adolescent' | 'young-adult' | 'adult' | 'older-adult'; declare interface CustomLayerDataType { position: 'before' | 'after'; layer: React.ReactNode; } declare interface GroupedBarChartProps { /** Array of data objects */ data: GroupedBarGraphDataType[]; /** Orientation of the graph */ orientation?: 'vertical' | 'horizontal'; /** Title of the graph */ graphTitle?: string | React.ReactNode; /** Description of the graph */ graphDescription?: string | React.ReactNode; /** Footnote for the graph */ footNote?: string | React.ReactNode; /** Source data for the graph */ sources?: SourcesDataType[]; /** Accessibility label */ ariaLabel?: string; /** Array of colors for different bars in the group */ colors?: string[]; /** Domain of colors for the graph */ colorDomain: string[]; /** Title for the color legend */ colorLegendTitle?: string; /** Color of value labels */ valueColor?: 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; /** Minimum height of the graph */ minHeight?: number; /** Relative height scaling factor. This overwrites the height props */ relativeHeight?: number; /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */ padding?: string; /** Left margin of the graph */ leftMargin?: number; /** Right margin of the graph */ rightMargin?: number; /** Top margin of the graph */ topMargin?: number; /** Bottom margin of the graph */ bottomMargin?: number; /** Padding between bars */ barPadding?: number; /** Maximum thickness of bars */ maxBarThickness?: number; /** Maximum value for the chart */ maxValue?: number; /** Minimum value for the chart */ minValue?: number; /** Value by which the label are truncated. Only applicable if showLabel is true */ truncateBy?: number; /** Track color (i.e. the color of the bars background) of the bar chart */ trackColor?: string; /** Toggles if data points which have all the values as undefined or null are filtered out. */ filterNA?: boolean; /** Parameter to sort the data. If a number is provided, it refers to the index of the size array to determine which value to sort by. If set to total, it sorts by the sum of all the values. */ sortParameter?: number | 'total'; /** Sorting order for data. This is overwritten by labelOrder prop. */ sortData?: 'asc' | 'desc'; /** Toggles if the graph animates in when loaded. */ animate?: boolean | AnimateDataType; /** Reference values for comparison */ refValues?: ReferenceDataType[]; /** Number of ticks on the axis */ noOfTicks?: number; showLabels?: boolean | ((_d: any) => React.ReactNode); /** Corner radius of the bars */ cornerRadius?: number; /** Toggle visibility of values */ showValues?: boolean; /** Custom order for labels */ labelOrder?: (string | number)[]; /** Toggle visibility of axis ticks */ showTicks?: boolean; /** Toggle visibility of axis line for the main axis */ hideAxisLine?: boolean; /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */ showColorScale?: boolean; /** Title for the bar axis */ barAxisTitle?: string; /** Defines how “NA” values should be displayed/labelled in the graph */ naLabel?: string; /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */ numberDisplayOptions?: NumberFormatOptions; /** Optional SVG element or function that renders custom content behind or in front of the graph. */ customLayers?: CustomLayerDataType[]; /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */ timeline?: TimelineDataType; /** Enable graph download option as png */ graphDownload?: boolean; /** Enable data download option as a csv */ dataDownload?: boolean; /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */ resetSelectionOnDoubleClick?: boolean; /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */ tooltip?: string | ((_d: any) => React.ReactNode); /** 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) => React.ReactNode); /** Callback for mouse over event */ onSeriesMouseOver?: (_d: any) => void; /** Callback for mouse click event */ onSeriesMouseClick?: (_d: any) => void; /** Language setting */ language?: Languages; /** Color theme */ theme?: 'light' | 'dark'; /** Unique ID for the graph */ graphID?: string; } export declare function GroupedBarGraph(props: GroupedBarChartProps): JSX.Element; declare interface GroupedBarGraphDataType { label: string | number; size: (number | null)[]; date?: string | number; data?: object; } declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom'; declare interface NumberFormatOptions { locale?: string; precision?: number; prefix?: string; suffix?: string; padZeros?: PadZerosTypes; } declare type PadZerosTypes = 'all' | 'decimal' | 'none'; declare interface Props { /** Array of data objects */ data: BarGraphDataType[]; /** Orientation of the graph */ orientation?: 'vertical' | 'horizontal'; /** Title of the graph */ graphTitle?: string | React.ReactNode; /** Description of the graph */ graphDescription?: string | React.ReactNode; /** Footnote for the graph */ footNote?: string | React.ReactNode; /** Source data for the graph */ sources?: SourcesDataType[]; /** Accessibility label */ ariaLabel?: string; /** Color or array of colors for bars */ colors?: string | string[]; /** Domain of colors for the graph */ colorDomain?: string[]; /** Title for the color legend */ colorLegendTitle?: string; /** Color of value labels */ valueColor?: 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; /** Minimum height of the graph */ minHeight?: number; /** Relative height scaling factor. This overwrites the height props */ relativeHeight?: number; /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */ padding?: string; /** Left margin of the graph */ leftMargin?: number; /** Right margin of the graph */ rightMargin?: number; /** Top margin of the graph */ topMargin?: number; /** Bottom margin of the graph */ bottomMargin?: number; /** Padding between bars */ barPadding?: number; /** Maximum thickness of bars */ maxBarThickness?: number; /** Minimum thickness of bars */ minBarThickness?: number; /** Maximum number of bars shown in the graph */ maxNumberOfBars?: number; /** Maximum value for the chart */ maxValue?: number; /** Minimum value for the chart */ minValue?: number; /** Value by which the label are truncated. Only applicable if showLabel is true */ truncateBy?: number; /** Reference values for comparison */ refValues?: ReferenceDataType[]; /** Number of ticks on the axis */ noOfTicks?: number; showLabels?: boolean | ((_d: any) => React.ReactNode); /** Toggle visibility of values */ showValues?: boolean; /** Custom order for labels */ labelOrder?: (string | number)[]; /** Defines how “NA” values should be displayed/labelled in the graph */ naLabel?: string; /** Toggle visibility of axis ticks */ showTicks?: boolean; /** Corner radius of the bars */ cornerRadius?: number; /** Toggle visibility of axis line for the main axis */ hideAxisLine?: boolean; /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */ showColorScale?: boolean; /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */ showNAColor?: boolean; /** Data points to highlight. Use the label value from data to highlight the data point */ highlightedDataPoints?: (string | number)[]; /** Defines the opacity of the non-highlighted data */ dimmedOpacity?: number; /** Title for the bar axis */ barAxisTitle?: string; /** Sorting order for data. This is overwritten by labelOrder prop. */ sortData?: 'asc' | 'desc'; /** Track color (i.e. the color of the bars background) of the bar chart */ trackColor?: string; /** Toggles if data point which are undefined or has value null are filtered out. */ filterNA?: boolean; /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */ numberDisplayOptions?: NumberFormatOptions; /** Toggles if the graph animates in when loaded. */ animate?: boolean | AnimateDataType; /** Optional SVG element or function that renders custom content behind or in front of the graph. */ customLayers?: CustomLayerDataType[]; /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */ timeline?: TimelineDataType; /** Enable graph download option as png */ graphDownload?: boolean; /** Enable data download option as a csv */ dataDownload?: boolean; /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */ resetSelectionOnDoubleClick?: boolean; /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */ tooltip?: string | ((_d: any) => React.ReactNode); /** 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) => React.ReactNode); /** Callback for mouse over event */ onSeriesMouseOver?: (_d: any) => void; /** Callback for mouse click event */ onSeriesMouseClick?: (_d: any) => void; /** Language setting */ language?: Languages; /** Color theme */ theme?: 'light' | 'dark'; /** Unique ID for the graph */ graphID?: string; } declare interface ReferenceDataType { value: number | null; text: string; color?: string; styles?: { line?: React.CSSProperties; text?: React.CSSProperties; }; classNames?: { line?: string; text?: string; }; } export declare function SimpleBarGraph(props: Props): JSX.Element; declare interface SourcesDataType { source: string; link?: string; } declare interface StackedBarChartProps { /** Array of data objects */ data: GroupedBarGraphDataType[]; /** Orientation of the graph */ orientation?: 'vertical' | 'horizontal'; /** Title of the graph */ graphTitle?: string | React.ReactNode; /** Description of the graph */ graphDescription?: string | React.ReactNode; /** Footnote for the graph */ footNote?: string | React.ReactNode; /** Source data for the graph */ sources?: SourcesDataType[]; /** Accessibility label */ ariaLabel?: string; /** Array of colors for different bars in the group */ colors?: string[]; /** Domain of colors for the graph */ colorDomain: string[]; /** Title for the color legend */ colorLegendTitle?: string; /** Color of value labels */ valueColor?: 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; /** Minimum height of the graph */ minHeight?: number; /** Relative height scaling factor. This overwrites the height props */ relativeHeight?: number; /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */ padding?: string; /** Left margin of the graph */ leftMargin?: number; /** Right margin of the graph */ rightMargin?: number; /** Top margin of the graph */ topMargin?: number; /** Bottom margin of the graph */ bottomMargin?: number; /** Padding between bars */ barPadding?: number; /** Maximum thickness of bars */ maxBarThickness?: number; /** Minimum thickness of bars */ minBarThickness?: number; /** Maximum number of bars shown in the graph */ maxNumberOfBars?: number; /** Maximum value for the chart */ maxValue?: number; /** Value by which the label are truncated. Only applicable if showLabels is true */ truncateBy?: number; /** Reference values for comparison */ refValues?: ReferenceDataType[]; /** Number of ticks on the axis */ noOfTicks?: number; /** Toggle visibility of labels or defines what is shown in the label */ showLabels?: boolean | ((_d: any) => React.ReactNode); /** Toggle visibility of values */ showValues?: boolean; /** Minimum size of the value to be visible. Default value depends on the orientation of the graph */ minLabelSize?: number; /** Corner radius of the bars */ cornerRadius?: number; /** Toggle visibility of the total value. If not defined it takes the value or `showValues` */ showTotalValue?: boolean; /** Custom order for labels */ labelOrder?: (string | number)[]; /** Toggle visibility of axis ticks */ showTicks?: boolean; /** Toggle visibility of axis line for the main axis */ hideAxisLine?: boolean; /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */ showColorScale?: boolean; /** Title for the bar axis */ barAxisTitle?: string; /** Defines how “NA” values should be displayed/labelled in the graph */ naLabel?: string; /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */ numberDisplayOptions?: NumberFormatOptions; /** Parameter to sort the data. If a number is provided, it refers to the index of the size array to determine which value to sort by. If set to total, it sorts by the sum of all the values. */ sortParameter?: number | 'total'; /** Sorting order for data. This is overwritten by labelOrder prop. */ sortData?: 'asc' | 'desc'; /** Toggles if data points which have all the values as undefined or null are filtered out. */ filterNA?: boolean; /** Toggles if the graph animates in when loaded. */ animate?: boolean | AnimateDataType; /** Optional SVG element or function that renders custom content behind or in front of the graph. */ customLayers?: CustomLayerDataType[]; /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */ timeline?: TimelineDataType; /** Enable graph download option as png */ graphDownload?: boolean; /** Enable data download option as a csv */ dataDownload?: boolean; /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */ resetSelectionOnDoubleClick?: boolean; /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */ tooltip?: string | ((_d: any) => React.ReactNode); /** 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) => React.ReactNode); /** Callback for mouse over event */ onSeriesMouseOver?: (_d: any) => void; /** Callback for mouse click event */ onSeriesMouseClick?: (_d: any) => void; /** Language setting */ language?: Languages; /** Color theme */ theme?: 'light' | 'dark'; /** Unique ID for the graph */ graphID?: string; } export declare function StackedBarGraph(props: StackedBarChartProps): JSX.Element; 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; } declare interface TimelineDataType { autoplay: boolean; enabled: boolean; showOnlyActiveDate: boolean; speed?: number; dateFormat?: string; color?: Exclude; } export { }