/// import * as React_2 from 'react'; import { SVGProps } from 'react'; import { TimeLocaleDefinition } from 'd3-time-format'; /** * {@docCategory ChartProps} */ export declare interface AccessibilityProps { /** * Accessibility aria-label */ ariaLabel?: string; /** * Accessibility aria-labelledBy */ ariaLabelledBy?: string; /** * Accessibility aria-describedBy */ ariaDescribedBy?: string; } export declare interface Basestate { _width?: number; _height?: number; activeLegend?: string; color?: string; dataForHoverCard?: number; isCalloutVisible: boolean; isLegendSelected?: boolean; isLegendHovered?: boolean; refSelected?: any; YValueHover?: { legend?: string; y?: number; color?: string; }[]; hoverYValue?: string | number | null; hoverXValue?: string | number | null; xCalloutValue?: string; yCalloutValue?: string; lineColor?: string; hoveredLineColor?: string; selectedLegend?: string; containerWidth?: number; containerHeight?: number; } export declare const CartesianChart: React_2.FunctionComponent; /** * Cartesian Chart properties * {@docCategory CartesianChart} */ export declare interface CartesianChartProps { /** * Below height used for resizing of the chart * Wrap chart in your container and send the updated height and width to these props. * These values decide wheather chart re render or not. Please check examples for reference */ height?: number; /** * Below width used for resizing of the chart * Wrap chart in your container and send the updated height and width to these props. * These values decide wheather chart re render or not. Please check examples for reference */ width?: number; /** * this prop takes its parent as a HTML element to define the width and height of the chart */ parentRef?: HTMLElement | null; /** * Additional CSS class(es) to apply to the Chart. */ className?: string; /** * Margins for the chart * @default `{ top: 20, bottom: 35, left: 40, right: 20 }` * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values */ margins?: Margins; /** decides wether to show/hide legends * @defaultvalue false */ hideLegend?: boolean; /** * Do not show tooltips in chart * @default false */ hideTooltip?: boolean; /** * this prop takes values that you want the chart to render on x-axis * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart */ tickValues?: number[] | Date[] | string[] | undefined; /** * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d' * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis * Only applicable for date axis. For y-axis format use yAxisTickFormat prop. */ tickFormat?: string; /** * Width of line stroke */ strokeWidth?: number; /** * x Axis labels tick padding. This defines the gap between tick labels and tick lines. * @default 10 */ xAxisTickPadding?: number; /** * the format in for the data on y-axis. For data object this can be specified to your requirement. * Eg: d3.format(".0%")(0.123),d3.format("+20")(42); * Please look at https://github.com/d3/d3-format for all the formats supported */ yAxisTickFormat?: any; /** * Secondary y-scale options * By default this is not defined, meaning there will be no secondary y-scale. */ secondaryYScaleOptions?: { /** Minimum value (0 by default) */ yMinValue?: number; /** Maximum value (100 by default) */ yMaxValue?: number; }; /** * minimum data value point in y-axis */ yMinValue?: number; /** * maximum data value point in y-axis */ yMaxValue?: number; /** * maximum data value point in x-axis */ xMaxValue?: number; /** * Number of ticks on the y-axis. * Tick count should be factor of difference between (yMinValue, yMaxValue)? * @default 4 */ yAxisTickCount?: number; /** * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count. * Does not work for string axis. * @default 6 */ xAxisTickCount?: number; /** * define the size of the tick lines on the x-axis * @default 10 */ xAxistickSize?: number; /** * defines the space between the tick line and the data label * @default 10 */ tickPadding?: number; /** * Url that the data-viz needs to redirect to upon clicking on it */ href?: string; /** * Label to apply to the whole chart. * @deprecated - Use your chart label for the chart. */ chartLabel?: string; legendsOverflowText?: any; /** * Enable the legends to wrap lines if there is not enough space to show all legends on a single line */ enabledLegendsWrapLines?: boolean; legendProps?: Partial; /** *@default false *Used for to elipse x axis labes and show tooltip on x axis labels */ showXAxisLablesTooltip?: boolean; /** * @default 4 * Used for X axis labels * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word. */ noOfCharsToTruncate?: number; /** * @default false * Used to wrap x axis labels values (whole value) */ wrapXAxisLables?: boolean; /** * @default false * Used to rotate x axis labels by 45 degrees */ rotateXAxisLables?: boolean; /** * The prop used to define the date time localization options */ dateLocalizeOptions?: Intl.DateTimeFormatOptions; /** * The prop used to define a custom locale for the date time format. */ timeFormatLocale?: TimeLocaleDefinition; /** * The prop used to define a custom datetime formatter for date axis. */ customDateTimeFormatter?: (dateTime: Date) => string; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: CartesianChartStyles; /** * Callout customization props */ calloutProps?: Partial; /** * props for the svg; use this to include aria-* or other attributes on the tag */ svgProps?: React_2.SVGProps; /** * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows * @default True for LineChart but False for other charts */ enableReflow?: boolean; /** * Prop to set the x axis title * @default undefined * Minimum bottom margin required for x axis title is 55px */ xAxisTitle?: string; /** * Prop to set the y axis title * @default undefined * Minimum left margin required for y axis title is 60px and for RTL is 40px * Minimum right margin required for y axis title is 40px and for RTL is 60px */ yAxisTitle?: string; /** * Prop to set the secondary y axis title * @default undefined * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px */ secondaryYAxistitle?: string; /** * Whether to use UTC time for axis scale, ticks, and the time display in callouts. * When set to `true`, time is displayed equally, regardless of the user's timezone settings. * @default true */ useUTC?: string | boolean; /** * Enables the chart to automatically adjust its size based on the container's dimensions. * @default true */ responsive?: boolean; /** * The function that is called when the chart is resized. * @param width - The new width of the chart. * @param height - The new height of the chart. */ onResize?: (width: number, height: number) => void; /** * Determines whether overlapping x-axis tick labels should be hidden. * @default false */ hideTickOverlap?: boolean; /** * Define a custom callout props override */ customProps?: (dataPointCalloutProps: any) => ChartPopoverProps; } /** * Cartesian Chart style properties * {@docCategory CartesianChart} */ export declare interface CartesianChartStyleProps { /** * Additional CSS class(es) to apply to the Chart. */ className?: string; /** * Width of the chart. */ width?: number; /** * Height of the chart. */ height?: number; /** * Color of the chart. */ color?: string; /** * Link to redirect if click action for graph */ href?: string; /** * prop to check if the chart is selected or hovered upon to determine opacity */ shouldHighlight?: boolean; /** * prop to check if the Page is in Rtl */ useRtl?: boolean; /** * color of the line */ lineColor?: string; /** * boolean flag which determines if shape is drawn in callout */ toDrawShape?: boolean; } /** * Cartesian Chart styles * {@docCategory CartesianChart} */ export declare interface CartesianChartStyles { /** * Style for the root element. */ root?: string; /** * Style for the element containing the x-axis. */ xAxis?: string; /** * Style for the element containing the y-axis. */ yAxis?: string; /** * Style for legend container */ legendContainer?: string; /** * line hover box css */ hover?: string; /** * styles for callout root-content */ calloutContentRoot?: string; /** * styles for callout x-content */ calloutContentX?: string; /** * styles for callout y-content */ calloutContentY?: string; /** * styles for description message */ descriptionMessage?: string; /** * styles for callout Date time container */ calloutDateTimeContainer?: string; /** * styles for callout info container */ calloutInfoContainer?: string; /** * styles for callout block container */ calloutBlockContainer?: string; /** * Styles for callout block container when toDrawShape is false */ calloutBlockContainertoDrawShapefalse?: string; /** * Styles for callout block container when toDrawShape is true */ calloutBlockContainertoDrawShapetrue?: string; /** * styles for callout legend text */ calloutlegendText?: string; /** * styles for tooltip */ tooltip?: string; /** * styles for tooltip */ axisTitle?: string; /** * Style for the chart Title. */ chartTitle?: string; /** * Style to change the opacity of bars in dataviz when we hover on a single bar or legends */ opacityChangeOnHover?: string; /** * styles for the shape object in the callout */ shapeStyles?: string; /** * Styles for the chart wrapper div */ chartWrapper?: string; } /** * Chart data mode for chart data text * default: show the datapoint.x value * fraction: show the fraction of datapoint.x/datapoint.y * percentage: show the percentage of (datapoint.x/datapoint.y)% * {@docCategory HorizontalBarChart} */ export declare type ChartDataMode = 'default' | 'fraction' | 'percentage'; /** * {@docCategory ChartData} */ export declare interface ChartDataPoint { /** * Legend text for the datapoint in the chart */ legend?: string; /** * data the datapoint in the chart */ data?: number; /** * data the datapoint in the chart */ horizontalBarChartdata?: HorizontalDataPoint; /** * onClick action for each datapoint in the chart */ onClick?: VoidFunction; /** * Color for the legend in the chart. If not provided, it will fallback on the default color palette. */ color?: string; /** * placeholder data point */ placeHolder?: boolean; /** * Callout data for x axis * This is an optional prop, If haven;t given legend will take */ xAxisCalloutData?: string; /** * Callout data for y axis * This is an optional prop, If haven't given data will take */ yAxisCalloutData?: string; /** * Accessibility data for callout */ callOutAccessibilityData?: AccessibilityProps; } export declare const ChartPopover: React_2.FunctionComponent; export declare interface ChartPopoverProps { clickPosition?: { x: number; y: number; }; isPopoverOpen?: boolean; xCalloutValue?: string; legend?: string | number | Date; yCalloutValue?: string; YValue?: string | number | Date; XValue?: string; color?: string; culture?: string; customCallout?: { customizedCallout?: JSX.Element; customCalloutProps?: ChartPopoverProps; }; isCalloutForStack?: boolean; xAxisCalloutAccessibilityData?: { ariaLabel?: string; data?: string; }; hoverXValue?: string | number; YValueHover?: YValueHover[]; descriptionMessage?: string; ratio?: [number, number]; isCartesian?: boolean; } /** * {@docCategory ChartProps} */ export declare interface ChartProps { /** * chart title for the chart */ chartTitle?: string; /** * Accessibility data for chart title */ chartTitleAccessibilityData?: AccessibilityProps; /** * data for the points in the chart */ chartData?: ChartDataPoint[]; /** * Accessibility data for chart data */ chartDataAccessibilityData?: AccessibilityProps; /** * data for the points in the line chart */ lineChartData?: LineChartPoints[]; /** * data for the points in the line chart */ pointOptions?: SVGProps; /** * data for the dotted line on hovering the point */ pointLineOptions?: SVGProps; } declare enum ChartTypes { AreaChart = 0, LineChart = 1, VerticalBarChart = 2, VerticalStackedBarChart = 3, GroupedVerticalBarChart = 4, HeatMapChart = 5, HorizontalBarChartWithAxis = 6 } export declare interface ChildProps { xScale?: any; yScale?: any; yScaleSecondary?: any; containerHeight?: number; containerWidth?: number; optimizeLargeData?: boolean; } /** * {@docCategory LineChart} */ export declare interface ColorFillBarData { startX: number | Date; endX: number | Date; } /** * {@docCategory LineChart} */ export declare interface ColorFillBarsProps { legend: string; color: string; data: ColorFillBarData[]; applyPattern?: boolean; onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined; } /** * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data, * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack. * {@docCategory ChartData} */ export declare interface CustomizedCalloutData { x: number | string | Date; values: CustomizedCalloutDataPoint[]; } /** * {@docCategory ChartData} */ export declare interface CustomizedCalloutDataPoint { legend: string; y: number; color: string; xAxisCalloutData?: string; yAxisCalloutData?: string | { [id: string]: number; }; } declare enum CustomPoints { dottedLine = 0 } /** * {@docCategory ChartData} */ export declare interface DataPoint { /** * Independent value of the data point, rendered along the x-axis. * If x is a number, then each y-coordinate is plotted at its x-coordinate. * If x is a string, then the data is evenly spaced along the x-axis. */ x: number | string; /** * Dependent value of the data point, rendered along the y-axis. */ y: number; /** * onClick action for each datapoint in the chart */ onClick?: VoidFunction; } export declare const DataVizPalette: { color1: string; color2: string; color3: string; color4: string; color5: string; color6: string; color7: string; color8: string; color9: string; color10: string; color11: string; color12: string; color13: string; color14: string; color15: string; color16: string; color17: string; color18: string; color19: string; color20: string; color21: string; color22: string; color23: string; color24: string; color25: string; color26: string; color27: string; color28: string; color29: string; color30: string; color31: string; color32: string; color33: string; color34: string; color35: string; color36: string; color37: string; color38: string; color39: string; color40: string; info: string; disabled: string; highError: string; error: string; warning: string; success: string; highSuccess: string; }; export declare const DonutChart: React_2.FunctionComponent; /** * Donut Chart properties. * {@docCategory DonutChart} */ export declare interface DonutChartProps extends CartesianChartProps { /** * Data to render in the chart. */ data?: ChartProps; /** * inner radius for donut size */ innerRadius?: number; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: DonutChartStyles; /** * props for inside donut value */ valueInsideDonut?: string | number; /** * Define a custom callout renderer for a data point */ onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSX.Element | undefined; /** * Define a custom callout props override */ customProps?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps; /** * props for the callout in the chart */ calloutProps?: ChartPopoverProps; /** * The prop used to define the culture to localized the numbers */ culture?: string; /** * Prop to show the arc labels in percentage format * @default false */ showLabelsInPercent?: boolean; /** * Prop to hide the arc labels * @default true */ hideLabels?: boolean; } /** * Donut Chart style properties * {@docCategory DonutChart} */ export declare interface DonutChartStyleProps extends CartesianChartStyleProps { } /** * Donut Chart styles * {@docCategory DonutChart} */ export declare interface DonutChartStyles { /** * Style for the root element. */ root?: string; /** * Style for the chart. */ chart?: string; /** * Style for the legend container. */ legendContainer: string; /** * Styles for the chart wrapper div */ chartWrapper?: string; } declare interface EventAnnotation { date: Date; event: string; onRenderCard?: () => React_2.ReactNode; } /** * {@docCategory LineChart} */ export declare interface EventsAnnotationProps { events: EventAnnotation[]; strokeColor?: string; labelColor?: string; labelHeight?: number; labelWidth?: number; mergedLabel: (count: number) => string; } export declare const getColorFromToken: (token: string, isDarkTheme?: boolean) => string; export declare const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string; /** * {@docCategory ChartData} */ export declare interface GroupedVerticalBarChartData { /** * Data for X axis label */ name: string; /** * Data points for Grouped vertical bar chart */ series: GVBarChartSeriesPoint[]; /** * Accessibility data for Group Bars Stack Callout */ stackCallOutAccessibilityData?: AccessibilityProps; } /** * {@docCategory ChartData} */ export declare interface GVBarChartSeriesPoint { /** * Text for // need to check use of this */ key: string; /** * Data for bar height of Grouped vertical bar chart */ data: number; /** * Color for the legend in the chart */ color: string; /** * Legend text in the chart */ legend: string; /** * Callout data for x axis * This is an optional prop, If haven;t given legend will take */ xAxisCalloutData?: string; /** * Callout data for y axis * This is an optional prop, If haven't given data will take */ yAxisCalloutData?: string; /** * onClick action for each datapoint in the chart */ onClick?: VoidFunction; /** * Accessibility data for callout */ callOutAccessibilityData?: AccessibilityProps; } export declare interface GVDataPoint { /** * This interface used for - While forming datapoints from given prop "data" in code * datapoints are used for to draw graph */ [key: string]: number | string; } export declare interface GVForBarChart { /** * While forming datapoints from given prop "data" * These datapoints are used for to draw graph. */ [key: string]: GVBarChartSeriesPoint; } export declare interface GVSingleDataPoint { /** * While forming datapoints from given prop "data" in code. * These datapoints are used for to draw graph easily. */ [key: string]: GVDataPoint; } /** * HorizontalBarChart is the context wrapper and container for all HorizontalBarChart content/controls, * It has no direct style or slot opinions. * * HorizontalBarChart also provides API interfaces for callbacks that will occur on navigation events. */ export declare const HorizontalBarChart: React_2.FunctionComponent; /** * Horizontal Bar Chart properties * {@docCategory HorizontalBarChart} */ export declare interface HorizontalBarChartProps extends React_2.RefAttributes { /** * An array of chart data points for the Horizontal bar chart */ data?: ChartProps[]; /** * Width of bar chart */ width?: number; /** * Height of bar chart * @default 15 */ barHeight?: number; /** * Additional CSS class(es) to apply to the StackedBarChart. */ className?: string; /** * This property tells whether to show ratio on top of stacked bar chart or not. */ hideRatio?: boolean[]; /** * Do not show tooltips in chart * * @default false */ hideTooltip?: boolean; /** * This property tells how to show data text on top right of bar chart. * If barChartCustomData props added, then this props will be overrided. * @default 'default' */ chartDataMode?: ChartDataMode; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: HorizontalBarChartStyles; /** * Define a custom callout renderer for a horizontal bar */ /** * props for the callout in the chart */ calloutProps?: ChartPopoverProps; /** * Custom text to the chart (right side of the chart) * IChartProps will be available as props to the method prop. * If this method not given, default values (IHorizontalDataPoint \{x,y\}) * will be used to display the data/text based on given chartModeData prop. */ /** * The prop used to define the culture to localized the numbers */ culture?: string; /** * Prop to define the variant of HorizontalBarChart to render * @default HorizontalBarChartVariant.PartToWhole */ variant?: HorizontalBarChartVariant; /** * Prop to hide the bar labels * @default false */ hideLabels?: boolean; /** * line color for callout */ color?: string; /** * prop to check if benchmark data is provided */ showTriangle?: boolean; /** * prop to render the custom callout */ onRenderCalloutPerHorizontalBar?: (props: ChartDataPoint) => JSX.Element | undefined; /** * Define a custom callout props override */ customProps?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps; } /** * Horizontal Bar Chart styles * {@docCategory HorizontalBarChart} */ export declare interface HorizontalBarChartStyles { /** * Styling for the root container */ root: string; /** * Styling for each item in the container */ items: string; /** * Style for the chart. */ chart: string; /** * Style for the chart Title. */ chartTitle: string; /** * Style for the bars. */ barWrapper: string; /** * Style for left side text of the chart title */ chartTitleLeft: string; /** * Style for right side text of the chart title */ chartTitleRight: string; /** * Style for the chart data text denominator. */ chartDataTextDenominator: string; /** * Style for the benchmark container */ benchmarkContainer: string; /** * Style for the benchmark triangle */ triangle: string; /** * Style for the bar labels */ barLabel: string; /** * Style for the div containing the chart */ chartWrapper: string; } /** * {@docCategory HorizontalBarChart} */ export declare enum HorizontalBarChartVariant { PartToWhole = "part-to-whole", AbsoluteScale = "absolute-scale" } /** * {@docCategory ChartData} */ export declare interface HorizontalBarChartWithAxisDataPoint { /** * Dependent value of the data point, rendered along the x-axis. */ x: number; /** * Independent value of the data point, rendered along the y-axis. * If y is a number, then each y-coordinate is plotted at its y-coordinate. * If y is a string, then the data is evenly spaced along the y-axis. */ y: number | string; /** * Legend text for the datapoint in the chart */ legend?: string; /** * color for the legend in the chart */ color?: string; /** * Callout data for x axis * This is an optional prop, If haven;t given legend will take */ xAxisCalloutData?: string; /** * Callout data for y axis * This is an optional prop, If haven't given data will take */ yAxisCalloutData?: string; /** * onClick action for each datapoint in the chart */ onClick?: VoidFunction; /** * Accessibility data for callout */ callOutAccessibilityData?: AccessibilityProps; } /** * {@docCategory ChartData} */ export declare interface HorizontalDataPoint { /** * Independent value of the data point, rendered along the x-axis. * If x is a number, then each y-coordinate is plotted at its x-coordinate. * If x is a string, then the data is evenly spaced along the x-axis. */ x: number; /** * Dependent value of the data point, rendered along the y-axis. */ y: number; } /** * @public * ILegend interface * {@docCategory Legends} */ export declare interface Legend { /** * Defines the title of the legend */ title: string; /** * Defines the function that is executed on clicking this legend */ action?: VoidFunction; /** * Defines the function that is executed upon hovering over the legend */ hoverAction?: VoidFunction; /** * Defines the function that is executed upon moving the mouse away from the legend */ onMouseOutAction?: (isLegendFocused?: boolean) => void; /** * The color for the legend */ color: string; /** * The opacity of the legend color */ opacity?: number; /** * The shape for the legend */ shape?: LegendShape; /** * Indicated whether or not to apply stripe pattern */ stripePattern?: boolean; /** * Indicates if the legend belongs to a line in the Bar Chart */ isLineLegendInBarChart?: boolean; nativeButtonProps?: React_2.ButtonHTMLAttributes; } export declare interface LegendDataItem { /** * Text to be displayed for legend item. */ legendText: string | number; /** * Color for the specific legend */ legendColor: string; } declare interface LegendMap { [key: string]: boolean; } export declare const Legends: React_2.FunctionComponent; /** * @public * The shape for the legend * default: show the rect legend * triangle: show the triangle legend * {@docCategory Legends} */ export declare type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints; /** * @public * Legend properties * {@docCategory Legends} */ export declare interface LegendsProps { /** * Prop that takes list of legends */ legends: Legend[]; /** * Additional CSS class(es) to apply to the legneds component. */ className?: string; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: LegendsStyles; /** * This prop makes the legends component align itself to the center in the container it is sitting in */ centerLegends?: boolean; /** * Enable the legends to wrap lines if there is not enough space to show all legends on a single line */ enabledWrapLines?: boolean; /** * style for the overflow component */ overflowStyles?: React_2.CSSProperties; /** * text for overflow legends string */ overflowText?: string; /** * prop that decides if legends are focusable * @default true */ allowFocusOnLegends?: boolean; /** * prop that decide if we can select multiple legends or single legend at a time * @default false */ canSelectMultipleLegends?: boolean; /** * Callback issued when the selected option changes. */ onChange?: (selectedLegends: string[], event: React_2.MouseEvent, currentLegend?: Legend) => void; /** * Keys (title) that will be initially used to set selected items. * This prop is used for multiSelect scenarios. * In other cases, defaultSelectedLegend should be used. */ defaultSelectedLegends?: string[]; /** * Key that will be initially used to set selected item. * This prop is used for singleSelect scenarios. */ defaultSelectedLegend?: string; /** * The shape for the legend. */ shape?: LegendShape; } /** * @public * Legends styles * {@docCategory Legends} */ export declare interface LegendsStyles { /** * Style set for the root of the legend component */ root?: string; /** * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend */ legend?: string; /** * Style set for the rectangle that represents a legend */ rect?: string; /** * styles set for the shape that represents a legend */ shape?: string; /** * Style set for the triangle that represents a legend */ triangle?: string; /** * Style for the legend text */ text?: string; /** * Style for the legend text */ hoverChange?: string; /** * Style for the area that is resizable */ resizableArea?: string; } export declare interface LegendState { activeLegend: string; /** Set of legends selected, both for multiple selection and single selection */ selectedLegends: LegendMap; } /** * @public * Legend style properties * {@docCategory Legends} */ export declare interface LegendStyleProps { className?: string; colorOnSelectedState?: string; borderColor?: string; opacity?: number; overflow?: boolean; stripePattern?: boolean; isLineLegendInBarChart?: boolean; } /** * Linechart component * {@docCategory LineChart} */ export declare const LineChart: React_2.FunctionComponent; /** * {@docCategory ChartData} */ export declare interface LineChartDataPoint { /** * Independent value of the data point, rendered along the x-axis. * If x is a number, then each y-coordinate is plotted at its x-coordinate. * If data type on x is Date, then the data is spaced evenly by d3-scale */ x: number | Date; /** * Dependent value of the data point, rendered along the y-axis. */ y: number; /** * Defines the function that is executed on clicking line */ onDataPointClick?: () => void; /** * Callout data for x axis */ xAxisCalloutData?: string; /** * Callout data for y axis */ yAxisCalloutData?: string | { [id: string]: number; }; /** * Whether to hide callout data for the point. */ hideCallout?: boolean; /** * Accessibility data for callout */ callOutAccessibilityData?: AccessibilityProps; /** * X axis Accessibility data for callout */ xAxisCalloutAccessibilityData?: AccessibilityProps; } /** * {@docCategory ChartData} */ export declare interface LineChartGap { /** * Starting index of the gap. */ startIndex: number; /** * Ending index of the gap. */ endIndex: number; } /** * {@docCategory ChartProps} */ export declare interface LineChartLineOptions extends SVGProps { /** * Width of the line/stroke. * Overrides the strokeWidth set on ICartesianChartProps level. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width */ strokeWidth?: number | string; /** * Pattern of dashes and gaps. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray */ strokeDasharray?: string | number; /** * Offset on rendering of stroke dash array. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset */ strokeDashoffset?: string | number; /** * Shape at the end of a subpath. * Default round. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap */ strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit'; /** * Width of border around the line. Default no border. */ lineBorderWidth?: string | number; /** * Color of border around the line. Default white. */ lineBorderColor?: string; } /** * {@docCategory ChartData} */ export declare interface LineChartPoints { /** * Legend text for the datapoint in the chart */ legend: string; /** * The shape for the legend * default: show the rect legend */ legendShape?: LegendShape; /** * dataPoints for the line chart */ data: LineChartDataPoint[]; /** * gaps in the line chart where a line is not drawn */ gaps?: LineChartGap[]; /** * color for the legend in the chart */ color?: string; /** * opacity for chart fill color */ opacity?: number; /** * options for the line drawn */ lineOptions?: LineChartLineOptions; /** * hide dots for points that are not active */ hideNonActiveDots?: boolean; /** * Defines the function that is executed on clicking this legend */ onLegendClick?: (selectedLegend: string | null | string[]) => void; /** * Defines the function that is executed on clicking line */ onLineClick?: () => void; } /** * Line Chart properties * {@docCategory LineChart} */ export declare interface LineChartProps extends CartesianChartProps { /** * Data to render in the chart. */ data: ChartProps; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: LineChartStyles; /** * Show event annotation */ eventAnnotationProps?: EventsAnnotationProps; /** * Define a custom callout renderer for a data point */ onRenderCalloutPerDataPoint?: RenderFunction; /** * Define a custom callout renderer for a stack; default is to render per data point */ onRenderCalloutPerStack?: RenderFunction; /** * Callback for getting callout description message */ getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined; colorFillBars?: ColorFillBarsProps[]; /** * if this is set to true, then for each line there will be a unique shape assigned to the point, * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid, * hexagon, pentagon and octagon, which will get assigned as respectively, if there are more * than 8 lines in the line chart then it will again start from cicle to octagon. * setting this flag to true will also change the behavior of the points, like for a * line, last point shape and first point shape will be visible all the times, and all * other points will get enlarge only when hovered over them * if set to false default shape will be circle, with the existing behavior * @default false */ allowMultipleShapesForPoints?: boolean; optimizeLargeData?: boolean; /** * The prop used to define the culture to localized the numbers */ culture?: string; /** * @default false * The prop used to enable the perf optimization */ enablePerfOptimization?: boolean; } /** * Line Chart style properties * {@docCategory LineChart} */ export declare interface LineChartStyleProps extends CartesianChartStyleProps { } /** * Line Chart styles * {@docCategory LineChart} */ export declare interface LineChartStyles extends CartesianChartStyles { } /** * {@docCategory ChartData} */ export declare interface LineDataInVerticalBarChart { y: VerticalBarChartDataPoint['y']; yAxisCalloutData?: string | undefined; /** * onClick action for each datapoint in the chart */ onClick?: VoidFunction; /** * Whether to use the secondary y scale or not * False by default. */ useSecondaryYScale?: boolean; } /** * {@docCategory ChartData} */ export declare interface LineDataInVerticalStackedBarChart { y: number; color: string; legend: string; /** * Data to show in callout */ data?: number; yAxisCalloutData?: string; /** * Whether to use the secondary y scale or not * False by default. */ useSecondaryYScale?: boolean; } /** * {@docCategory ChartProps} */ export declare interface Margins { /** * left margin for the chart. */ left?: number; /** * Right margin for the chart. */ right?: number; /** * Top margin for the chart. */ top?: number; /** * Bottom margin for the chart. */ bottom?: number; } export declare interface ModifiedCartesianChartProps extends CartesianChartProps { /** * Define the chart title */ chartTitle?: string; /** * Only used for Area chart * Value used to draw y axis of that chart. */ maxOfYVal?: number; /** * Data of the chart */ points: any; /** * Define type of the chart */ chartType: ChartTypes; /** X axis type */ xAxisType: XAxisTypes; /** Y axis type */ yAxisType?: YAxisType; /** * Legends of the chart. */ legendBars: JSX.Element | null; /** * Callout props */ calloutProps?: ChartPopoverProps; /** * Callback method used for to get margins to the chart. */ getmargins?: (margins: Margins) => void; /** * This is a call back method to the chart from cartesian chart. * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph. * It also contians an optional param xAxisElement - defines as x axis scale element. * This param used to enable feature word wrap of Xaxis. */ getGraphData?: any; /** * Used for bar chart graphs. * To define width of the bar */ barwidth?: number; /** * Used for tick styles of the x axis of the chart * Tick params are applicable for date axis only. */ tickParams?: { tickValues?: number[] | Date[] | string[]; tickFormat?: string; }; /** * it's padding between bar's or lines in the graph */ xAxisPadding?: number; /** * it's padding between bar's or lines in the graph */ yAxisPadding?: number; /** * Children elements specific to derived chart types. */ children(props: ChildProps): React_2.ReactNode; /** dataset values to find out domain of the String axis * Present using for only vertical stacked bar chart and grouped vertical bar chart */ datasetForXAxisDomain?: string[]; /** * if the data points for the y-axis is of type string, then we need to give this * prop to construct the y-axis */ stringDatasetForYAxisDomain?: string[]; /** * The prop used to define the culture to localize the numbers and date */ culture?: string; getAxisData?: any; /** * Callback method used when mouse leaves the chart boundary. */ onChartMouseLeave?: () => void; /** Callback method to get extra margins for domain */ getDomainMargins?: (containerWidth: number) => Margins; /** Padding between each bar/line-point */ xAxisInnerPadding?: number; /** Padding before first bar/line-point and after last bar/line-point */ xAxisOuterPadding?: number; /** *@default false *Used for to elipse y axis labes and show tooltip on x axis labels */ showYAxisLablesTooltip?: boolean; /** *@default false *Used for showing complete y axis lables */ showYAxisLables?: boolean; /** * @default false * Used to control the first render cycle Performance optimization code. */ enableFirstRenderOptimization?: boolean; } /** * we need to make sure that if we add any property to this, then * we need to also add that in pointTypes below and vise-versa */ declare enum Points { circle = 0, square = 1, triangle = 2, diamond = 3, pyramid = 4, hexagon = 5, pentagon = 6, octagon = 7 } export declare interface PopoverComponentStyles { calloutContentRoot: string; calloutDateTimeContainer: string; calloutContentX: string; calloutBlockContainer: string; calloutBlockContainertoDrawShapefalse: string; calloutBlockContainertoDrawShapetrue: string; shapeStyles: string; calloutlegendText: string; calloutContentY: string; descriptionMessage: string; ratio: string; numerator: string; denominator: string; calloutInfoContainer: string; calloutContainer: string; } export declare interface RefArrayData { index?: string; refElement?: SVGGElement; } /** * Render function interface for providing overrideable render callbacks. * * @public */ declare interface RenderFunction

{ (props?: P, defaultRender?: (props?: P) => JSX.Element | null): JSX.Element | null; } export declare const Shape: React_2.FunctionComponent; export declare interface ShapeProps { svgProps: React_2.SVGAttributes; pathProps: React_2.SVGAttributes; shape: LegendShape; classNameForNonSvg?: string; style?: React_2.CSSProperties | undefined; } /** * Sparkline is the context wrapper and container for all Sparkline content/controls, * It has no direct style or slot opinions. * * Sparkline also provides API interfaces for callbacks that will occur on navigation events. */ export declare const Sparkline: React_2.FunctionComponent; /** * Sparkline properties * {@docCategory SparklineChart} */ export declare interface SparklineProps extends React.RefAttributes { /** * An array of chart data points for the Sparkline chart */ data?: ChartProps; /** * Width of chart * * @default 80 */ width?: number; /** * Height of chart * @default 20 */ height?: number; /** * Width of value text * * @default 80 */ valueTextWidth?: number; /** * Additional CSS class(es) to apply to the SparklineChart. */ className?: string; /** * The prop used to define the culture to localized the numbers */ culture?: string; /** * Prop used to determine whether to show the legend or not */ showLegend?: boolean; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: SparklineStyles; } export declare interface SparklineStyleProps extends CartesianChartStyleProps { } /** * Sparkline styles * {@docCategory SparklineChart} */ export declare interface SparklineStyles { inlineBlock?: string; valueText?: string; } export declare const Textbox: React_2.FunctionComponent; declare interface TextboxProps { text: string; width: number; x: number; y: number; lineHeight: number; textAnchor?: 'start' | 'middle' | 'end'; fontSize?: string; fill?: string; } /** * VerticalBarchart component * {@docCategory VerticalBarChart} */ export declare const VerticalBarChart: React_2.FunctionComponent; /** * {@docCategory ChartData} */ export declare interface VerticalBarChartDataPoint { /** * Independent value of the data point, rendered along the x-axis. * If x is a number, then each y-coordinate is plotted at its x-coordinate. * If x is a string, then the data is evenly spaced along the x-axis. */ x: number | string | Date; /** * Dependent value of the data point, rendered along the y-axis. */ y: number; /** * Legend text for the datapoint in the chart */ legend?: string; /** * color for the legend in the chart */ color?: string; /** * Callout data for x axis * This is an optional prop, If haven;t given legend will take */ xAxisCalloutData?: string; /** * Callout data for y axis * This is an optional prop, If haven't given data will take */ yAxisCalloutData?: string; /** * data to render the line along with bars */ lineData?: LineDataInVerticalBarChart; /** * onClick action for each datapoint in the chart */ onClick?: VoidFunction; /** * Accessibility data for callout */ callOutAccessibilityData?: AccessibilityProps; } /** * Vertical Bar Chart properties * {@docCategory VerticalBarChart} */ export declare interface VerticalBarChartProps extends CartesianChartProps { /** * Data to render in the chart. */ data?: VerticalBarChartDataPoint[]; /** * Define a custom callout renderer for a data point. */ onRenderCalloutPerDataPoint?: RenderFunction; /** * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px, * which may decrease to prevent overlap. When set to `'auto'`, the bar width is calculated from padding values. * @default 16 */ barWidth?: number | 'default' | 'auto'; /** * Colors from which to select the color of each bar. */ colors?: string[]; /** * chart title for the chart */ chartTitle?: string; /** * Legend text for the line datapoint in the chart */ lineLegendText?: string; /** * color for the legend of the line in the chart * @default theme.yellow */ lineLegendColor?: string; /** * This prop makes sure that all the bars are of same color. * it will take the first color from the array of colors in * prop `colors` or if `colors` prop is not given then default color is palette.blueLight * @default false */ useSingleColor?: boolean; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: VerticalBarChartStyles; /** * The prop used to define the culture to localized the numbers */ culture?: string; /** * it's padding between bar's or lines in the graph */ xAxisPadding?: number; /** * options for the line drawn */ lineOptions?: LineChartLineOptions; /** * Prop to hide the bar labels * @default false */ hideLabels?: boolean; /** * Maximum width of a bar, in pixels. * @default 24 */ maxBarWidth?: number; /** * Padding between bars as a fraction of the [step](https://d3js.org/d3-scale/band#band_step). * Takes a number in the range [0, 1]. Only applicable to string x-axis. * @default 2/3 */ xAxisInnerPadding?: number; /** * Padding before the first bar and after the last bar as a fraction of * the [step](https://d3js.org/d3-scale/band#band_step). Takes a number in the range [0, 1]. * Only applicable to string x-axis. */ xAxisOuterPadding?: number; } /** * Vertical Bar Chart style properties * {@docCategory VerticalBarChart} */ export declare interface VerticalBarChartStyleProps extends CartesianChartStyleProps { /** * color of the datapoint legend */ legendColor?: string; } /** * Vertical Bar Chart styles * {@docCategory VerticalBarChart} */ export declare interface VerticalBarChartStyles extends CartesianChartStyles { /** * Style for the lines representing the ticks along the x-axis. * @deprecated This style cannot be customized anymore */ xAxisTicks?: string; /** * Style for the line representing the domain of the y-axis. * @deprecated This style cannot be customized anymore */ yAxisDomain?: string; /** * Style for the lines representing the ticks along the y-axis. * @deprecated This style cannot be customized anymore */ yAxisTicks?: string; /** * Style for the bar labels */ barLabel: string; } /** * {@docCategory ChartData} */ export declare interface VerticalStackedBarDataPoint extends Omit { /** * Independent value of the data point, rendered along the x-axis. * If x is a number, then each y-coordinate is plotted at its x-coordinate. * If x is a string, then the data is evenly spaced along the x-axis. * If data type on x is Date, then the data is spaced evenly by d3-scale. */ x: number | string | Date; } /** * {@docCategory ChartProps} */ export declare interface VerticalStackedChartProps { /** * data for the points in the chart */ chartData: VSChartDataPoint[]; /** * Data for x axis label for multistacked Vertical bar chart */ xAxisPoint: number | string | Date; /** * Callout data for x axis * This is an optional prop, If haven't given, legend will take */ xAxisCalloutData?: string; /** * line data to render lines on stacked bar chart */ lineData?: LineDataInVerticalStackedBarChart[]; /** * Accessibility data for Whole stack callout */ stackCallOutAccessibilityData?: AccessibilityProps; } /** * {@docCategory ChartData} */ export declare interface VSChartDataPoint { /** * data the datapoint in the chart */ data: number; /** * Legend text for the datapoint in the chart */ legend: string; /** * color for the legend in the chart */ color?: string; /** * Callout data for x axis * This is an optional prop, If haven;t given legend will take */ xAxisCalloutData?: string; /** * Callout data for y axis * This is an optional prop, If haven't given data will take */ yAxisCalloutData?: string; /** * Accessibility data for callout */ callOutAccessibilityData?: AccessibilityProps; } declare enum XAxisTypes { NumericAxis = 0, DateAxis = 1, StringAxis = 2 } declare enum YAxisType { NumericAxis = 0, DateAxis = 1, StringAxis = 2 } export declare interface YValueHover { legend?: string; y?: number; color?: string; data?: string | number; shouldDrawBorderBottom?: boolean; yAxisCalloutData?: string | { [id: string]: number; }; index?: number; callOutAccessibilityData?: AccessibilityProps; } export { }