///
import { BlockProps, EventCallbackInterface, EventPropTypeInterface, OrientationTypes, PaddingProps, StringOrNumberOrCallback, StringOrNumberOrList, VictoryLabelStyleObject, VictoryStyleInterface } from 'victory-core';
import { VictoryLegendProps, VictoryLegendOrientationType, VictoryLegendTTargetType } from 'victory-legend';
import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
/**
* ChartLegend renders a chart legend component.
*
* See https://github.com/FormidableLabs/victory/blob/main/packages/victory-legend/src/index.d.ts
*/
export interface ChartLegendProps extends VictoryLegendProps {
/**
* The borderComponent prop takes a component instance which will be responsible
* for rendering a border around the legend. The new element created from the passed
* borderComponent will be provided with the following properties calculated by
* ChartLegend: x, y, width, height, and style. Any of these props may be
* overridden by passing in props to the supplied component, or modified or ignored
* within the custom component itself. If a borderComponent
* is not provided, ChartLegend will use its default Border component.
* Please note that the default width and height calculated
* for the border component is based on approximated
* text measurements, and may need to be adjusted.
*/
borderComponent?: React.ReactElement;
/**
* The borderPadding specifies the amount of padding that should
* be added between the legend items and the border. This prop may be given as
* a number, or as an object with values specified for top, bottom, left, and right.
* Please note that the default width and height calculated for the border
* component is based on approximated text measurements, so padding may need to be adjusted.
*
* @propType number | { top: number, bottom: number, left: number, right: number }
*/
borderPadding?: PaddingProps;
/**
* The centerTitle boolean prop specifies whether a legend title should be centered.
*/
centerTitle?: boolean;
/**
* The colorScale prop defines a color scale to be applied to each data
* symbol in ChartLegend. This prop should be given as an array of CSS
* colors, or as a string corresponding to one of the built in color
* scales. Colors will repeat when there are more symbols than colors in the
* provided colorScale.
*/
colorScale?: string[];
/**
* The containerComponent prop takes an entire component which will be used to
* create a container element for standalone charts.
* The new element created from the passed containerComponent wil be provided with
* these props from ChartLegend: height, width, children
* (the chart itself) and style. Props that are not provided by the
* child chart component include title and desc, both of which
* are intended to add accessibility to Victory components. The more descriptive these props
* are, the more accessible your data will be for people using screen readers.
* Any of these props may be overridden by passing in props to the supplied component,
* or modified or ignored within the custom component itself. If a dataComponent is
* not provided, ChartLegend will use the default ChartContainer component.
*
* @example
*/
containerComponent?: React.ReactElement;
/**
* Specify data via the data prop. ChartLegend expects data as an
* array of objects with name (required), symbol, and labels properties.
* The data prop must be given as an array.
*/
data?: {
name?: string;
labels?: {
fill?: string;
};
symbol?: {
fill?: string;
type?: string;
};
}[];
/**
* The dataComponent prop takes a component instance which will be
* responsible for rendering a data element used to associate a symbol
* or color with each data series. The new element created from the
* passed dataComponent will be provided with the following properties
* calculated by ChartLegend: x, y, size, style, and symbol. Any of
* these props may be overridden by passing in props to the supplied
* component, or modified or ignored within the custom component itself.
* If a dataComponent is not provided, ChartLegend will use its
* default Point component.
*/
dataComponent?: React.ReactElement;
/**
* ChartLegend uses the standard eventKey prop to specify how event targets
* are addressed. This prop is not commonly used.
*
* @propType number | string | Function | string[]
*/
eventKey?: StringOrNumberOrCallback | string[];
/**
* ChartLegend uses the standard events prop.
*
* @propType object[]
*/
events?: EventPropTypeInterface[];
/**
* ChartLegend uses the standard externalEventMutations prop.
*
* @propType object[]
*/
externalEventMutations?: EventCallbackInterface[];
/**
* The groupComponent prop takes an entire component which will be used to
* create group elements for use within container elements. This prop defaults
* to a tag on web, and a react-native-svg tag on mobile
*/
groupComponent?: React.ReactElement;
/**
* The gutter prop defines the number of pixels between legend rows or
* columns, depending on orientation. When orientation is horizontal,
* gutters are between columns. When orientation is vertical, gutters
* are the space between rows.
*/
gutter?: number | {
left: number;
right: number;
};
/**
* The itemsPerRow prop determines how many items to render in each row
* of a horizontal legend, or in each column of a vertical legend. This
* prop should be given as an integer. When this prop is not given,
* legend items will be rendered in a single row or column.
*/
itemsPerRow?: number;
/**
* The labelComponent prop takes a component instance which will be used
* to render each legend label. The new element created from the passed
* labelComponent will be supplied with the following properties: x, y,
* style, and text. Any of these props may be overridden by passing in
* props to the supplied component, or modified or ignored within the
* custom component itself. If labelComponent is omitted, a new
* ChartLabel will be created with the props described above.
*/
labelComponent?: React.ReactElement;
/**
* The name prop is typically used to reference a component instance when defining shared events. However, this
* optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory
* based components output unique IDs when multiple charts appear in a page.
*/
name?: string;
/**
* The orientation prop takes a string that defines whether legend data
* are displayed in a row or column. When orientation is "horizontal",
* legend items will be displayed in a single row. When orientation is
* "vertical", legend items will be displayed in a single column. Line
* and text-wrapping is not currently supported, so "vertical"
* orientation is both the default setting and recommended for
* displaying many series of data.
*
* @propType string
*/
orientation?: VictoryLegendOrientationType;
/**
* The padding props specifies the amount of padding in number of pixels between
* the edge of the chart and any rendered child components. This prop can be given
* as a number or as an object with padding specified for top, bottom, left
* and right.
*
* @propType number | { top: number, bottom: number, left: number, right: number }
*/
padding?: PaddingProps;
/**
* The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be
* given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there
* are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.
*
* Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.
*
* @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
*/
patternScale?: string[];
/**
* The responsive prop specifies whether the rendered container should be a responsive container with a viewBox
* attribute, or a static container with absolute width and height.
*
* Useful when legend is located inside a chart -- default is false.
*
* Note: Not compatible with containerComponent prop
*/
responsive?: boolean;
/**
* The rowGutter prop defines the number of pixels between legend rows.
* This prop may be given as a number, or as an object with values
* specified for “top” and “bottom” gutters. To set spacing between columns,
* use the gutter prop.
*
* @propType number | { top: number, bottom: number }
* @example { top: 0, bottom: 10 }
*/
rowGutter?: number | Omit;
/**
* The sharedEvents prop is used internally to coordinate events between components.
*
* Note: This prop should not be set manually.
*
* @private Not intended as public API and subject to change
* @hide
*/
sharedEvents?: {
events: any[];
getEventState: Function;
};
/**
* The standalone prop determines whether the component will render a standalone svg
* or a tag that will be included in an external svg. Set standalone to false to
* compose ChartLegend with other components within an enclosing