From ab4aa16e85e13003fdf5f369525ff81e4c1ec8ed Mon Sep 17 00:00:00 2001 From: alreadyExisted Date: Sat, 2 Mar 2019 22:43:58 +0200 Subject: [PATCH] #30562 Updated VictoryLegendProps --- types/victory/index.d.ts | 2008 ++++++++++++++++--------------- types/victory/victory-tests.tsx | 28 +- 2 files changed, 1036 insertions(+), 1000 deletions(-) diff --git a/types/victory/index.d.ts b/types/victory/index.d.ts index f5c67995da..b34b192a65 100644 --- a/types/victory/index.d.ts +++ b/types/victory/index.d.ts @@ -3,7 +3,7 @@ // Definitions by: Alexey Svetliakov // snerks // Krzysztof Cebula -// Vitaliy Polyanskiy +// Vitaliy Polyanskiy // James Lismore // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -16,7 +16,7 @@ declare module "victory" { /** * Single animation object to interpolate */ - export type AnimationStyle = { [key: string ]: string | number }; + export type AnimationStyle = { [key: string]: string | number }; /** * Animation styles to interpolate @@ -32,6 +32,20 @@ declare module "victory" { "expIn" | "expOut" | "expInOut" | "poly" | "polyIn" | "polyOut" | "polyInOut" | "quad" | "quadIn" | "quadOut" | "quadInOut" | "sin" | "sinIn" | "sinOut" | "sinInOut"; + /** + * @see https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html + */ + type Omit = Pick>; + + type BlockProps = { + top?: number; + bottom?: number; + left?: number; + right?: number; + }; + + type PaddingProps = number | BlockProps; + // Many victory components accept string or number or callback which returns string or number type StringOrNumberOrCallback = | string @@ -44,9 +58,9 @@ declare module "victory" { * Style interface used in components/themeing */ export interface VictoryStyleInterface { - parent?: VictoryStyleObject; - data?: VictoryStyleObject; - labels?: VictoryStyleObject; + parent?: VictoryStyleObject; + data?: VictoryStyleObject; + labels?: VictoryStyleObject; } export interface VictoryAnimationProps { @@ -774,8 +788,10 @@ declare module "victory" { */ eventHandlers: { [key: string]: { - (event: React.SyntheticEvent): EventCallbackInterface } | - { (event: React.SyntheticEvent): EventCallbackInterface[] + (event: React.SyntheticEvent): EventCallbackInterface + } | + { + (event: React.SyntheticEvent): EventCallbackInterface[] } }; } @@ -791,8 +807,8 @@ declare module "victory" { * Domain padding */ type DomainPaddingPropType = number | { - x?: number | [ number, number]; - y?: number | [ number, number]; + x?: number | [number, number]; + y?: number | [number, number]; }; /** @@ -858,12 +874,7 @@ declare module "victory" { * and right. * @default 50 */ - padding?: number | { - top?: number; - bottom?: number; - left?: number; - right?: number; - }; + padding?: PaddingProps; /** * The scale prop determines which scales your chart should use. This prop can be * given as a string specifying a supported scale ("linear", "time", "log", "sqrt"), @@ -1030,66 +1041,66 @@ declare module "victory" { } export interface VictoryAreaProps - extends VictoryCommonProps, - VictoryDatableProps, - VictorySingleLabableProps { - /** - * The event prop take an array of event objects. Event objects are composed of - * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace - * for a given component, so "data" and "labels" are all valid targets for VictoryArea events. - * Since VictoryArea only renders a single element, the eventKey property is not used. - * The eventHandlers object should be given as an object whose keys are standard - * event names (i.e. onClick) and whose values are event callbacks. The return value - * of an event handler is used to modify elemnts. The return value should be given - * as an object or an array of objects with optional target and eventKey keys, - * and a mutation key whose value is a function. The target and eventKey keys - * will default to those corresponding to the element the event handler was attached to. - * The mutation function will be called with the calculated props for the individual selected - * element (i.e. an area), and the object returned from the mutation function - * will override the props of the selected element via object assignment. - * @example - * events={[ - * { - * target: "data", - * eventHandlers: { - * onClick: () => { - * return [ - * { - * mutation: (props) => { - * return {style: merge({}, props.style, {fill: "orange"})}; - * } - * }, { - * target: "labels", - * mutation: () => { - * return {text: "hey"}; - * } - * } - * ]; - * } - * } - * } - * ]} - */ - events?: EventPropTypeInterface<"data" | "labels" | "parent", "all">[]; - /** - * The interpolation prop determines how data points should be connected when plotting a line - * @default "linear" - */ - interpolation?: InterpolationPropType; - /** - * The samples prop specifies how many individual points to plot when plotting - * y as a function of x. Samples is ignored if x props are provided instead. - * @default 50 - */ - samples?: number; - /** - * The style prop specifies styles for your VictoryArea. Any valid inline style properties - * will be applied. Height, width, and padding should be specified via the height, - * width, and padding props, as they are used to calculate the alignment of - * components within chart. - * @example {data: {fill: "red"}, labels: {fontSize: 12}} - */ - style?: VictoryStyleInterface; + extends VictoryCommonProps, + VictoryDatableProps, + VictorySingleLabableProps { + /** + * The event prop take an array of event objects. Event objects are composed of + * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace + * for a given component, so "data" and "labels" are all valid targets for VictoryArea events. + * Since VictoryArea only renders a single element, the eventKey property is not used. + * The eventHandlers object should be given as an object whose keys are standard + * event names (i.e. onClick) and whose values are event callbacks. The return value + * of an event handler is used to modify elemnts. The return value should be given + * as an object or an array of objects with optional target and eventKey keys, + * and a mutation key whose value is a function. The target and eventKey keys + * will default to those corresponding to the element the event handler was attached to. + * The mutation function will be called with the calculated props for the individual selected + * element (i.e. an area), and the object returned from the mutation function + * will override the props of the selected element via object assignment. + * @example + * events={[ + * { + * target: "data", + * eventHandlers: { + * onClick: () => { + * return [ + * { + * mutation: (props) => { + * return {style: merge({}, props.style, {fill: "orange"})}; + * } + * }, { + * target: "labels", + * mutation: () => { + * return {text: "hey"}; + * } + * } + * ]; + * } + * } + * } + * ]} + */ + events?: EventPropTypeInterface<"data" | "labels" | "parent", "all">[]; + /** + * The interpolation prop determines how data points should be connected when plotting a line + * @default "linear" + */ + interpolation?: InterpolationPropType; + /** + * The samples prop specifies how many individual points to plot when plotting + * y as a function of x. Samples is ignored if x props are provided instead. + * @default 50 + */ + samples?: number; + /** + * The style prop specifies styles for your VictoryArea. Any valid inline style properties + * will be applied. Height, width, and padding should be specified via the height, + * width, and padding props, as they are used to calculate the alignment of + * components within chart. + * @example {data: {fill: "red"}, labels: {fontSize: 12}} + */ + style?: VictoryStyleInterface; } /** @@ -1341,13 +1352,13 @@ declare module "victory" { */ cornerRadius?: NumberOrCallback | { - top?: number | (NumberOrCallback), - topLeft?: number | (NumberOrCallback), - topRight?: number | (NumberOrCallback), - bottom?: number | (NumberOrCallback), - bottomLeft?: number | (NumberOrCallback), - bottomRight?: number | (NumberOrCallback) - }; + top?: number | (NumberOrCallback), + topLeft?: number | (NumberOrCallback), + topRight?: number | (NumberOrCallback), + bottom?: number | (NumberOrCallback), + bottomLeft?: number | (NumberOrCallback), + bottomRight?: number | (NumberOrCallback) + }; /** * The event prop take an array of event objects. Event objects are composed of * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace @@ -1418,917 +1429,924 @@ declare module "victory" { */ export class VictoryBar extends React.Component {} - export interface VictoryBoxPlotStyleInterface - extends VictoryStyleInterface { - max?: VictoryStyleObject; - maxLabels?: VictoryStyleObject; - min?: VictoryStyleObject; - minLabels?: VictoryStyleObject; - median?: VictoryStyleObject; - medianLabels?: VictoryStyleObject; - q1?: VictoryStyleObject; - q1Labels?: VictoryStyleObject; - q3?: VictoryStyleObject; - q3Labels?: VictoryStyleObject; - } - - export interface VictoryBoxPlotProps - extends VictoryCommonProps, - VictoryDatableProps { - /** - * The boxWidth prop specifies how wide each box should be. If the whiskerWidth - * prop is not set, this prop will also determine the width of the whisker crosshair. - */ - boxWidth?: number; - /** - * The domain prop describes the range of values your chart will include. This prop can be - * given as a array of the minimum and maximum expected values for your chart, - * or as an object that specifies separate arrays for x and y. - * If this prop is not provided, a domain will be calculated from data, or other - * available information. - * @example: [-1, 1], {x: [0, 100], y: [0, 1]} - */ - domain?: DomainPropType; - /** - * The domainPadding prop specifies a number of pixels of padding to add to the - * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther - * from the origin to prevent crowding. This prop should be given as an object with - * numbers specified for x and y. - */ - domainPadding?: DomainPaddingPropType; - /** - * The event prop take an array of event objects. Event objects are composed of - * a childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace - * for a given component, (i.e. "data" and "labels"). The childName will refer to an - * individual child of VictoryChart, either by its name prop, or by index. The eventKey - * may optionally be used to select a single element by index or eventKey rather than - * an entire set. The eventHandlers object should be given as an object whose keys are standard - * event names (i.e. onClick) and whose values are event callbacks. The return value - * of an event handler is used to modify elemnts. The return value should be given - * as an object or an array of objects with optional target and eventKey and childName keys, - * and a mutation key whose value is a function. The target and eventKey and childName keys - * will default to those corresponding to the element the event handler was attached to. - * The mutation function will be called with the calculated props for the individual selected - * element (i.e. a single bar), and the object returned from the mutation function - * will override the props of the selected element via object assignment. - * @examples - * events={[ - * { - * target: "data", - * childName: "firstBar", - * eventHandlers: { - * onClick: () => { - * return [ - * { - * childName: "secondBar", - * mutation: (props) => { - * return {style: merge({}, props.style, {fill: "orange"})}; - * } - * }, { - * childName: "secondBar", - * target: "labels", - * mutation: () => { - * return {text: "hey"}; - * } - * } - * ]; - * } - * } - * } - * ]} - */ - events?: EventPropTypeInterface[]; - /** - * Similar to data accessor props `x` and `y`, this prop may be used to functionally - * assign eventKeys to data - */ - eventKey?: StringOrNumberOrCallback; - /** - * The horizontal prop determines whether the bars will be laid vertically or - * horizontally. The bars will be vertical if this prop is false or unspecified, - * or horizontal if the prop is set to true. - */ - horizontal?: boolean; - /** - * The labelOrientation prop determines where labels are placed relative to their - * corresponding data. If this prop is not set, it will be set to “top” for - * horizontal charts, and “right” for vertical charts. - */ - labelOrientation?: "top" | "bottom" | "left" | "right"; - /** - * When the boolean labels prop is set to true, the values for min, max, median, - * q1, and q3 will be displayed for each box. For more granular label control, use - * the individual minLabels, maxLabels, medianLabels, q1Labels, and q3Labels props. - */ - labels?: boolean; - /** - * Use the max data accessor prop to define the max value of a box plot. - */ - max?: StringOrNumberOrCallback; - /** - * Use the median data accessor prop to define the median value of a box plot. - */ - median?: StringOrNumberOrCallback; - /** - * Use the min data accessor prop to define the min value of a box plot. - */ - min?: StringOrNumberOrCallback; - /** - * Use the q1 data accessor prop to define the q1 value of a box plot. - */ - q1?: StringOrNumberOrCallback; - /** - * Use the q3 data accessor prop to define the q1 value of a box plot. - */ - q3?: StringOrNumberOrCallback; - /** - * The style prop defines the style of the component. The style prop - * should be given as an object with styles defined for parent, max, - * maxLabels, min, minLabels,median, medianLabels,q1, q1Labels,q3, - * q3Labels. Any valid svg styles are supported, but width, height, a - * nd padding should be specified via props as they determine relative - * layout for components in VictoryChart. Functional styles may be - * defined for style properties, and they will be evaluated with each datum. - */ - style?: VictoryBoxPlotStyleInterface; - /** - * The whiskerWidth prop specifies how wide each whisker crosshair should be. If the - * whiskerWidth prop is not set, the width of the whisker crosshair will match - * the width of the box. - */ - whiskerWidth?: number; - } - - /** - * VictoryBoxPlot renders a box plot to describe the distribution of a set of data. Data for - * VictoryBoxPlot may be given with summary statistics pre-calculated (min, median, max, q1, q3), - * or as an array of raw data. VictoryBoxPlot can be composed with VictoryChart to create box plot charts. - */ - export class VictoryBoxPlot extends React.Component< - VictoryBoxPlotProps, - any - > {} - - export interface VictoryChartProps extends VictoryCommonProps { - /** - * The domain prop describes the range of values your chart will include. This prop can be - * given as a array of the minimum and maximum expected values for your chart, - * or as an object that specifies separate arrays for x and y. - * If this prop is not provided, a domain will be calculated from data, or other - * available information. - * @example: [-1, 1], {x: [0, 100], y: [0, 1]} - */ - domain?: DomainPropType; - /** - * The domainPadding prop specifies a number of pixels of padding to add to the - * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther - * from the origin to prevent crowding. This prop should be given as an object with - * numbers specified for x and y. - */ - domainPadding?: DomainPaddingPropType; - /** - * The event prop take an array of event objects. Event objects are composed of - * a childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace - * for a given component, (i.e. "data" and "labels"). The childName will refer to an - * individual child of VictoryChart, either by its name prop, or by index. The eventKey - * may optionally be used to select a single element by index or eventKey rather than - * an entire set. The eventHandlers object should be given as an object whose keys are standard - * event names (i.e. onClick) and whose values are event callbacks. The return value - * of an event handler is used to modify elemnts. The return value should be given - * as an object or an array of objects with optional target and eventKey and childName keys, - * and a mutation key whose value is a function. The target and eventKey and childName keys - * will default to those corresponding to the element the event handler was attached to. - * The mutation function will be called with the calculated props for the individual selected - * element (i.e. a single bar), and the object returned from the mutation function - * will override the props of the selected element via object assignment. - * @examples - * events={[ - * { - * target: "data", - * childName: "firstBar", - * eventHandlers: { - * onClick: () => { - * return [ - * { - * childName: "secondBar", - * mutation: (props) => { - * return {style: merge({}, props.style, {fill: "orange"})}; - * } - * }, { - * childName: "secondBar", - * target: "labels", - * mutation: () => { - * return {text: "hey"}; - * } - * } - * ]; - * } - * } - * } - * ]} - */ - events?: EventPropTypeInterface[]; - /** - * Similar to data accessor props `x` and `y`, this prop may be used to functionally - * assign eventKeys to data - */ - eventKey?: StringOrNumberOrCallback; - /** - * The style prop specifies styles for your chart. Any valid inline style properties - * will be applied. Height, width, and padding should be specified via the height, - * width, and padding props, as they are used to calculate the alignment of - * components within chart. - * @example {border: "1px solid #ccc", margin: "2%", maxWidth: "40%"} - */ - style?: Pick; - } - - /** - * A flexible charting component for React. - * VictoryChart composes other Victory components into reusable charts. - * Acting as a coordinator rather than a stand-alone component, VictoryChart reconciles props such as domain and scale for child components, - * and provides a set of sensible defaults. This component works with: - * - VictoryAxis - * - VictoryLine - * - VictoryScatter - * - VictoryBar - */ - export class VictoryChart extends React.Component {} - - export interface VictoryGroupProps extends VictoryCommonProps, VictoryMultiLabeableProps { - /** - * The categories prop specifies how categorical data for a chart should be ordered. - * This prop should be given as an array of string values, or an object with - * these values for x and y. When categories are not given as an object - * When this prop is set on a wrapper component, it will dictate the categories of - * its the children. If this prop is not set, any categories on child component - * or categorical data, will be merged to create a shared set of categories. - * @example ["dogs", "cats", "mice"] - */ - categories?: CategoryPropType; - /** - * The colorScale prop is an optional prop that defines the color scale the chart's bars - * will be created on. This prop should be given as an array of CSS colors, or as a string - * corresponding to one of the built in color scales. VictoryBar will automatically assign - * values from this color scale to the bars unless colors are explicitly provided in the - * `dataAttributes` prop. - */ - colorScale?: ColorScalePropType; - /** - * The domain prop describes the range of values your chart will include. This prop can be - * given as a array of the minimum and maximum expected values for your chart, - * or as an object that specifies separate arrays for x and y. - * If this prop is not provided, a domain will be calculated from data, or other - * available information. - * @examples: [-1, 1], {x: [0, 100], y: [0, 1]} - */ - domain?: DomainPropType; - /** - * The domainPadding prop specifies a number of pixels of padding to add to the - * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther - * from the origin to prevent crowding. This prop should be given as an object with - * numbers specified for x and y. - */ - domainPadding?: DomainPaddingPropType; - /** - * The event prop take an array of event objects. Event objects are composed of - * a childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace - * for a given component, (i.e. "data" and "labels"). The childName will refer to an - * individual child of VictoryGroup, either by its name prop, or by index. The eventKey - * may optionally be used to select a single element by index or eventKey rather than - * an entire set. The eventHandlers object should be given as an object whose keys are standard - * event names (i.e. onClick) and whose values are event callbacks. The return value - * of an event handler is used to modify elemnts. The return value should be given - * as an object or an array of objects with optional target and eventKey and childName keys, - * and a mutation key whose value is a function. The target and eventKey and childName keys - * will default to those corresponding to the element the event handler was attached to. - * The mutation function will be called with the calculated props for the individual selected - * element (i.e. a single bar), and the object returned from the mutation function - * will override the props of the selected element via object assignment. - * @examples - * events={[ - * { - * target: "data", - * childName: "firstBar", - * eventHandlers: { - * onClick: () => { - * return [ - * { - * childName: "secondBar", - * mutation: (props) => { - * return {style: merge({}, props.style, {fill: "orange"})}; - * } - * }, { - * childName: "secondBar", - * target: "labels", - * mutation: () => { - * return {text: "hey"}; - * } - * } - * ]; - * } - * } - * } - * ]} - */ - events?: EventPropTypeInterface<"data" | "labels" | "parent", StringOrNumberOrCallback>[]; - /** - * Similar to data accessor props `x` and `y`, this prop may be used to functionally - * assign eventKeys to data - */ - eventKey?: StringOrNumberOrCallback; - /** - * The horizontal prop determines whether the bars will be laid vertically or - * horizontally. The bars will be vertical if this prop is false or unspecified, - * or horizontal if the prop is set to true. - */ - horizontal?: boolean; - /** - * The offset prop determines the number of pixels each element in a group should - * be offset from its original position of the on the independent axis. In the - * case of groups of bars, this number should be equal to the width of the bar - * plus the desired spacing between bars. - */ - offset?: number; - /** - * The style prop specifies styles for your grouped chart. These styles will be - * applied to all grouped children - */ - style?: VictoryStyleInterface; - } - - export class VictoryGroup extends React.Component {} - - export interface VictoryLineProps extends VictoryCommonProps, VictoryDatableProps, VictorySingleLabableProps { - /** - * The event prop take an array of event objects. Event objects are composed of - * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace - * for a given component, so "data" and "labels" are all valid targets for VictoryLine events. - * Since VictoryLine only renders a single element, the eventKey property is not used. - * The eventHandlers object should be given as an object whose keys are standard - * event names (i.e. onClick) and whose values are event callbacks. The return value - * of an event handler is used to modify elemnts. The return value should be given - * as an object or an array of objects with optional target and eventKey keys, - * and a mutation key whose value is a function. The target and eventKey keys - * will default to those corresponding to the element the event handler was attached to. - * The mutation function will be called with the calculated props for the individual selected - * element (i.e. a line), and the object returned from the mutation function - * will override the props of the selected element via object assignment. - * @examples - * events={[ - * { - * target: "data", - * eventHandlers: { - * onClick: () => { - * return [ - * { - * mutation: (props) => { - * return {style: merge({}, props.style, {stroke: "orange"})}; - * } - * }, { - * target: "labels", - * mutation: () => { - * return {text: "hey"}; - * } - * } - * ]; - * } - * } - * } - * ]} - */ - events?: EventPropTypeInterface<"data" | "labels" | "parent", number | string>[]; - /** - * The interpolation prop determines how data points should be connected - * when plotting a line - */ - interpolation?: InterpolationPropType; - /** - * The samples prop specifies how many individual points to plot when plotting - * y as a function of x. Samples is ignored if x props are provided instead. - */ - samples?: number; - /** - * The labels prop defines the labels that will appear above each point. - * This prop should be given as an array or as a function of data. - */ - labels?: string[]|number[]|Function; - /** - * Use the sortKey prop to indicate how data should be sorted. This prop - * is given directly to the lodash sortBy function to be executed on the - * final dataset. - */ - sortKey?: string|string[]|Function; - /** - * The style prop specifies styles for your VictoryLine. Any valid inline style properties - * will be applied. Height, width, and padding should be specified via the height, - * width, and padding props, as they are used to calculate the alignment of - * components within chart. in addition to normal style properties, angle and verticalAnchor - * may also be specified via the labels object, and they will be passed as props to - * VictoryLabel, or any custom labelComponent. - * @examples{data: {stroke: "red"}, labels: {fontSize: 12}} - */ - style?: VictoryStyleInterface; - } - - /** - * VictoryLine creates a line based on data. VictoryLine is a composable component, so it does not include an axis. - * Check out VictoryChart for easy to use line charts and more. - */ - export class VictoryLine extends React.Component {} - - export interface VictoryLegendProps extends VictoryCommonProps, VictoryDatableProps, VictorySingleLabableProps { - /** - * The colorScale prop defines a color scale to be applied to each data - * symbol in VictoryLegend. This prop should be given as an array of CSS - * colors, or as a string corresponding to one of the built in color - * scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", - * "green", "blue". VictoryLegend will assign a color to each symbol by - * index, unless they are explicitly specified in the data object. - * Colors will repeat when there are more symbols than colors in the - * provided colorScale. - */ - colorScale?: ColorScalePropType; - /** - * The style prop defines the style of the VictoryLegend component. - * The style prop should be given as an object with styles defined for data, labels and - * parent. Any valid svg styles are supported, but width, height, and - * padding should be specified via props as they determine relative - * layout for components in VictoryLegend. - */ - style?: VictoryStyleInterface; - /** - * The containerComponent prop takes a component instance which will be - * used to create a container element for standalone legends. The new - * element created from the passed containerComponent will be provided - * with the following props: height, width, children (the legend itself) - * and style. If a containerComponent is not provided, the default - * VictoryContainer component will be used. VictoryContainer supports - * title and desc props, 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. These - * props may be set by passing them directly to the supplied component. - * By default, VictoryContainer renders a responsive svg using the - * viewBox attribute. To render a static container, set - * responsive={false} directly on the instance of VictoryContainer - * supplied via the containerComponent prop. VictoryContainer also - * renders a Portal element that may be used in conjunction with - * VictoryPortal to force components to render above other children. - * @default - */ - containerComponent?: React.ReactElement; - /** - * Specify data via the data prop. VictoryLegend expects data as an - * array of objects with name (required), symbol, and labels properties. - * The data prop must be given as an array. - */ - data?: Array<{ - name?: string; - symbol?: { - fill?: string; - type?: string; - }; - }>; - /** - * 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 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 VictoryLegend: 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, VictoryLegend will use its - * default Point component. - */ - dataComponent?: React.ReactElement; - /** - * 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 - * @default - */ - 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; - /** - * 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 - * VictoryLabel will be created with the props described above. - */ - labelComponent?: React.ReactElement; - /** - * 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. - * @default 'vertical' - */ - orientation?: 'horizontal'|'vertical'; - /** - * The padding prop specifies the amount of padding in pixels between - * the edge of the legend 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. As with width and height, the absolute - * padding will depend on whether the component is rendered in a - * responsive container. When a component is nested within - * VictoryLegend, setting padding on the child component will have no - * effect. - */ - padding?: number | { - top?: number; - bottom?: number; - left?: number; - right?: number; - }; - /** - * The standalone props specifies whether the component should be - * rendered in an independent element or in a tag. This prop - * defaults to true, and renders an svg. - */ - standalone?: boolean; - /** - * The symbolSpacer prop defines the number of pixels between data - * components and label components. - */ - symbolSpacer?: number; - /** - * The width and height props define the width and height of the legend. - * These props may be given as positive numbers or functions of data. If - * these props are not set, width and height will be determined based on - * an approximate text size calculated from the text and style props - * provided to VictoryLegend. - */ - width?: number; - height?: number; - /** - * The x and y props define the base position of the legend element. - */ - x?: number; - y?: number; - } - - /** - * VictoryLegend renders a chart legend component. - */ - export class VictoryLegend extends React.Component {} - - type ScatterSymbolType = "circle" | "diamond" | "plus" | "square" | "star" | "triangleDown" | "triangleUp"; - - export interface VictoryScatterProps extends VictoryCommonProps, VictoryDatableProps, VictoryMultiLabeableProps { - /** - * The bubbleProperty prop indicates which property of the data object should be used - * to scale data points in a bubble chart - */ - bubbleProperty?: string; - /** - * The event prop take an array of event objects. Event objects are composed of - * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace - * for a given component, so "data" and "labels" are all valid targets for VictoryScatter - * events. The eventKey may optionally be used to select a single element by index rather than - * an entire set. The eventHandlers object should be given as an object whose keys are standard - * event names (i.e. onClick) and whose values are event callbacks. The return value - * of an event handler is used to modify elemnts. The return value should be given - * as an object or an array of objects with optional target and eventKey keys, - * and a mutation key whose value is a function. The target and eventKey keys - * will default to those corresponding to the element the event handler was attached to. - * The mutation function will be called with the calculated props for the individual selected - * element (i.e. a single bar), and the object returned from the mutation function - * will override the props of the selected element via object assignment. - * @examples - * events={[ - * { - * target: "data", - * eventKey: "thisOne", - * eventHandlers: { - * onClick: () => { - * return [ - * { - * eventKey: "theOtherOne", - * mutation: (props) => { - * return {style: merge({}, props.style, {fill: "orange"})}; - * } - * }, { - * eventKey: "theOtherOne", - * target: "labels", - * mutation: () => { - * return {text: "hey"}; - * } - * } - * ]; - * } - * } - * } - * ]} - */ - events?: EventPropTypeInterface<"data" | "labels" | "parent", StringOrNumberOrCallback>[]; - /** - * Similar to data accessor props `x` and `y`, this prop may be used to functionally - * assign eventKeys to data - */ - eventKey?: StringOrNumberOrCallback; - /** - * The maxBubbleSize prop sets an upper limit for scaling data points in a bubble chart - */ - maxBubbleSize?: number; - /** - * The samples prop specifies how many individual points to plot when plotting - * y as a function of x. Samples is ignored if x props are provided instead. - */ - samples?: number; - /** - * The size prop determines how to scale each data point - */ - size?: number | { (data: any): number }; - /** - * The style prop specifies styles for your VictoryScatter. Any valid inline style properties - * will be applied. Height, width, and padding should be specified via the height, - * width, and padding props, as they are used to calculate the alignment of - * components within chart. In addition to normal style properties, angle and verticalAnchor - * may also be specified via the labels object, and they will be passed as props to - * VictoryLabel, or any custom labelComponent. - * @example {data: {fill: "red"}, labels: {fontSize: 12}} - */ - style?: VictoryStyleInterface; - /** - * The symbol prop determines which symbol should be drawn to represent data points. - */ - symbol?: ScatterSymbolType | { (data: any): ScatterSymbolType }; - } - - /** - * VictoryScatter creates a scatter of points from data. VictoryScatter is a composable component, so it does not include an axis. - * Check out VictoryChart for easy to use scatter plots and more. - */ - export class VictoryScatter extends React.Component {} - - export interface VictoryStackProps extends VictoryCommonProps, VictoryMultiLabeableProps { - /** - * The categories prop specifies how categorical data for a chart should be ordered. - * This prop should be given as an array of string values, or an object with - * these values for x and y. When categories are not given as an object - * When this prop is set on a wrapper component, it will dictate the categories of - * its the children. If this prop is not set, any categories on child component - * or catigorical data, will be merged to create a shared set of categories. - * @example ["dogs", "cats", "mice"] - */ - categories?: CategoryPropType; - /** - * The colorScale prop is an optional prop that defines the color scale the chart's bars - * will be created on. This prop should be given as an array of CSS colors, or as a string - * corresponding to one of the built in color scales. VictoryBar will automatically assign - * values from this color scale to the bars unless colors are explicitly provided in the - * `dataAttributes` prop. - */ - colorScale?: ColorScalePropType; - /** - * The domain prop describes the range of values your chart will include. This prop can be - * given as a array of the minimum and maximum expected values for your chart, - * or as an object that specifies separate arrays for x and y. - * If this prop is not provided, a domain will be calculated from data, or other - * available information. - * @example: [-1, 1], {x: [0, 100], y: [0, 1]} - */ - domain?: DomainPropType; - /** - * The domainPadding prop specifies a number of pixels of padding to add to the - * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther - * from the origin to prevent crowding. This prop should be given as an object with - * numbers specified for x and y. - */ - domainPadding?: DomainPaddingPropType; - /** - * The event prop take an array of event objects. Event objects are composed of - * a childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace - * for a given component, (i.e. "data" and "labels"). The childName will refer to an - * individual child of VictoryStack, either by its name prop, or by index. The eventKey - * may optionally be used to select a single element by index or eventKey rather than - * an entire set. The eventHandlers object should be given as an object whose keys are standard - * event names (i.e. onClick) and whose values are event callbacks. The return value - * of an event handler is used to modify elemnts. The return value should be given - * as an object or an array of objects with optional target and eventKey and childName keys, - * and a mutation key whose value is a function. The target and eventKey and childName keys - * will default to those corresponding to the element the event handler was attached to. - * The mutation function will be called with the calculated props for the individual selected - * element (i.e. a single bar), and the object returned from the mutation function - * will override the props of the selected element via object assignment. - * @examples - * events={[ - * { - * target: "data", - * childName: "firstBar", - * eventHandlers: { - * onClick: () => { - * return [ - * { - * childName: "secondBar", - * mutation: (props) => { - * return {style: merge({}, props.style, {fill: "orange"})}; - * } - * }, { - * childName: "secondBar", - * target: "labels", - * mutation: () => { - * return {text: "hey"}; - * } - * } - * ]; - * } - * } - * } - * ]} - */ - events?: EventPropTypeInterface<"data" | "labels" | "parent", StringOrNumberOrCallback>[]; - /** - * Similar to data accessor props `x` and `y`, this prop may be used to functionally - * assign eventKeys to data - */ - eventKey?: StringOrNumberOrCallback; - /** - * The horizontal prop determines whether the bars will be laid vertically or - * horizontally. The bars will be vertical if this prop is false or unspecified, - * or horizontal if the prop is set to true. - */ - horizontal?: boolean; - /** - * The style prop specifies styles for your grouped chart. These styles will be - * applied to all grouped children - */ - style?: VictoryStyleInterface; - /** - * The xOffset prop is used for grouping stacks of bars. This prop will be set - * by the VictoryGroup component wrapper, or can be set manually. - */ - xOffset?: number; - } - - export class VictoryStack extends React.Component {} - - export interface VictoryPieProps extends VictoryCommonProps, VictoryMultiLabeableProps { - /** - * The colorScale prop is an optional prop that defines the color scale the pie - * will be created on. This prop should be given as an array of CSS colors, or as a string - * corresponding to one of the built in color scales. VictoryPie will automatically assign - * values from this color scale to the pie slices unless colors are explicitly provided in the - * data object - */ - colorScale?: ColorScalePropType; - /** - * The data prop specifies the data to be plotted, - * where data X-value is the slice label (string or number), - * and Y-value is the corresponding number value represented by the slice - * Data should be in the form of an array of data points. - * Each data point may be any format you wish (depending on the `x` and `y` accessor props), - * but by default, an object with x and y properties is expected. - * @example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]], - * [[{x: "a", y: 1}, {x: "b", y: 2}], [{x: "a", y: 2}, {x: "b", y: 3}]] - */ - data?: any[]; - /** - * The dataComponent prop takes an entire, HTML-complete data component which will be used to - * create slices for each datum in the pie chart. The new element created from the passed - * dataComponent will have the property datum set by the pie chart for the point it renders; - * properties style and pathFunction calculated by VictoryPie; an index property set - * corresponding to the location of the datum in the data provided to the pie; events bound to - * the VictoryPie; and the d3 compatible slice object. - * If a dataComponent is not provided, VictoryPie's Slice component will be used. - */ - dataComponent?: React.ReactElement; - /** - * The labelRadius prop defines the radius of the arc that will be used for positioning each slice label. - * If this prop is not set, the label radius will default to the radius of the pie + label padding. - */ - labelRadius?: number; - /** - * The overall end angle of the pie in degrees. This prop is used in conjunction with - * startAngle to create a pie that spans only a segment of a circle. - */ - endAngle?: number; - /** - * The event prop takes an array of event objects. Event objects are composed of - * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace - * for a given component, so "data" and "labels" are all valid targets for VictoryPie - * events. The eventKey may optionally be used to select a single element by index rather than - * an entire set. The eventHandlers object should be given as an object whose keys are standard - * event names (i.e. onClick) and whose values are event callbacks. The return value - * of an event handler is used to modify elemnts. The return value should be given - * as an object or an array of objects with optional target and eventKey keys, - * and a mutation key whose value is a function. The target and eventKey keys - * will default to those corresponding to the element the event handler was attached to. - * The mutation function will be called with the calculated props for the individual selected - * element (i.e. a single bar), and the object returned from the mutation function - * will override the props of the selected element via object assignment. - * @examples - * events={[ - * { - * target: "data", - * eventKey: 1, - * eventHandlers: { - * onClick: () => { - * return [ - * { - * eventKey: 2, - * mutation: (props) => { - * return {style: merge({}, props.style, {fill: "orange"})}; - * } - * }, { - * eventKey: 2, - * target: "labels", - * mutation: () => { - * return {text: "hey"}; - * } - * } - * ]; - * } - * } - * } - * ]} - */ - events?: EventPropTypeInterface<"data" | "labels" | "parent", StringOrNumberOrCallback | string[] | number[]>[]; - /** - * Similar to data accessor props `x` and `y`, this prop may be used to functionally - * assign eventKeys to data - */ - eventKey?: StringOrNumberOrCallback; - /** - * Specifies the radius of the chart. If this property is not provided it is computed - * from width, height, and padding props - * - */ - radius?: number; - /** - * When creating a donut chart, this prop determines the number of pixels between - * the center of the chart and the inner edge of a donut. When this prop is set to zero - * a regular pie chart is rendered. - */ - innerRadius?: number; - /** - * Set the cornerRadius for every dataComponent (Slice by default) within VictoryPie - */ - cornerRadius?: number; - /** - * The padAngle prop determines the amount of separation between adjacent data slices - * in number of degrees - */ - padAngle?: number; - /** - * The overall start angle of the pie in degrees. This prop is used in conjunction with - * endAngle to create a pie that spans only a segment of a circle. - */ - startAngle?: number; - /** - * The style prop specifies styles for your pie. VictoryPie relies on Radium, - * so valid Radium style objects should work for this prop. Height, width, and - * padding should be specified via the height, width, and padding props. - * @example {data: {stroke: "black"}, label: {fontSize: 10}} - */ - style?: VictoryStyleInterface; - /** - * The x prop specifies how to access the X value of each data point. - * If given as a function, it will be run on each data point, and returned value will be used. - * If given as an integer, it will be used as an array index for array-type data points. - * If given as a string, it will be used as a property key for object-type data points. - * If given as an array of strings, or a string containing dots or brackets, - * it will be used as a nested object property path (for details see Lodash docs for _.get). - * If `null` or `undefined`, the data value will be used as is (identity function/pass-through). - * @example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d) - */ - x?: DataGetterPropType; - /** - * The y prop specifies how to access the Y value of each data point. - * If given as a function, it will be run on each data point, and returned value will be used. - * If given as an integer, it will be used as an array index for array-type data points. - * If given as a string, it will be used as a property key for object-type data points. - * If given as an array of strings, or a string containing dots or brackets, - * it will be used as a nested object property path (for details see Lodash docs for _.get). - * If `null` or `undefined`, the data value will be used as is (identity function/pass-through). - * @example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d) - */ - y?: DataGetterPropType; - } - - /** - * victory-pie draws an SVG pie or donut chart with React. - * Styles and data can be customized by passing in your own values as properties to the component. - * Data changes are animated with VictoryAnimation. - */ - export class VictoryPie extends React.Component {} + export interface VictoryBoxPlotStyleInterface extends VictoryStyleInterface { + max?: VictoryStyleObject; + maxLabels?: VictoryStyleObject; + min?: VictoryStyleObject; + minLabels?: VictoryStyleObject; + median?: VictoryStyleObject; + medianLabels?: VictoryStyleObject; + q1?: VictoryStyleObject; + q1Labels?: VictoryStyleObject; + q3?: VictoryStyleObject; + q3Labels?: VictoryStyleObject; } + + export interface VictoryBoxPlotProps extends VictoryCommonProps, VictoryDatableProps { + /** + * The boxWidth prop specifies how wide each box should be. If the whiskerWidth + * prop is not set, this prop will also determine the width of the whisker crosshair. + */ + boxWidth?: number; + /** + * The domain prop describes the range of values your chart will include. This prop can be + * given as a array of the minimum and maximum expected values for your chart, + * or as an object that specifies separate arrays for x and y. + * If this prop is not provided, a domain will be calculated from data, or other + * available information. + * @example: [-1, 1], {x: [0, 100], y: [0, 1]} + */ + domain?: DomainPropType; + /** + * The domainPadding prop specifies a number of pixels of padding to add to the + * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther + * from the origin to prevent crowding. This prop should be given as an object with + * numbers specified for x and y. + */ + domainPadding?: DomainPaddingPropType; + /** + * The event prop take an array of event objects. Event objects are composed of + * a childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace + * for a given component, (i.e. "data" and "labels"). The childName will refer to an + * individual child of VictoryChart, either by its name prop, or by index. The eventKey + * may optionally be used to select a single element by index or eventKey rather than + * an entire set. The eventHandlers object should be given as an object whose keys are standard + * event names (i.e. onClick) and whose values are event callbacks. The return value + * of an event handler is used to modify elemnts. The return value should be given + * as an object or an array of objects with optional target and eventKey and childName keys, + * and a mutation key whose value is a function. The target and eventKey and childName keys + * will default to those corresponding to the element the event handler was attached to. + * The mutation function will be called with the calculated props for the individual selected + * element (i.e. a single bar), and the object returned from the mutation function + * will override the props of the selected element via object assignment. + * @examples + * events={[ + * { + * target: "data", + * childName: "firstBar", + * eventHandlers: { + * onClick: () => { + * return [ + * { + * childName: "secondBar", + * mutation: (props) => { + * return {style: merge({}, props.style, {fill: "orange"})}; + * } + * }, { + * childName: "secondBar", + * target: "labels", + * mutation: () => { + * return {text: "hey"}; + * } + * } + * ]; + * } + * } + * } + * ]} + */ + events?: EventPropTypeInterface[]; + /** + * Similar to data accessor props `x` and `y`, this prop may be used to functionally + * assign eventKeys to data + */ + eventKey?: StringOrNumberOrCallback; + /** + * The horizontal prop determines whether the bars will be laid vertically or + * horizontally. The bars will be vertical if this prop is false or unspecified, + * or horizontal if the prop is set to true. + */ + horizontal?: boolean; + /** + * The labelOrientation prop determines where labels are placed relative to their + * corresponding data. If this prop is not set, it will be set to “top” for + * horizontal charts, and “right” for vertical charts. + */ + labelOrientation?: "top" | "bottom" | "left" | "right"; + /** + * When the boolean labels prop is set to true, the values for min, max, median, + * q1, and q3 will be displayed for each box. For more granular label control, use + * the individual minLabels, maxLabels, medianLabels, q1Labels, and q3Labels props. + */ + labels?: boolean; + /** + * Use the max data accessor prop to define the max value of a box plot. + */ + max?: StringOrNumberOrCallback; + /** + * Use the median data accessor prop to define the median value of a box plot. + */ + median?: StringOrNumberOrCallback; + /** + * Use the min data accessor prop to define the min value of a box plot. + */ + min?: StringOrNumberOrCallback; + /** + * Use the q1 data accessor prop to define the q1 value of a box plot. + */ + q1?: StringOrNumberOrCallback; + /** + * Use the q3 data accessor prop to define the q1 value of a box plot. + */ + q3?: StringOrNumberOrCallback; + /** + * The style prop defines the style of the component. The style prop + * should be given as an object with styles defined for parent, max, + * maxLabels, min, minLabels,median, medianLabels,q1, q1Labels,q3, + * q3Labels. Any valid svg styles are supported, but width, height, a + * nd padding should be specified via props as they determine relative + * layout for components in VictoryChart. Functional styles may be + * defined for style properties, and they will be evaluated with each datum. + */ + style?: VictoryBoxPlotStyleInterface; + /** + * The whiskerWidth prop specifies how wide each whisker crosshair should be. If the + * whiskerWidth prop is not set, the width of the whisker crosshair will match + * the width of the box. + */ + whiskerWidth?: number; + } + + /** + * VictoryBoxPlot renders a box plot to describe the distribution of a set of data. Data for + * VictoryBoxPlot may be given with summary statistics pre-calculated (min, median, max, q1, q3), + * or as an array of raw data. VictoryBoxPlot can be composed with VictoryChart to create box plot charts. + */ + export class VictoryBoxPlot extends React.Component< + VictoryBoxPlotProps, + any + > {} + + export interface VictoryChartProps extends VictoryCommonProps { + /** + * The domain prop describes the range of values your chart will include. This prop can be + * given as a array of the minimum and maximum expected values for your chart, + * or as an object that specifies separate arrays for x and y. + * If this prop is not provided, a domain will be calculated from data, or other + * available information. + * @example: [-1, 1], {x: [0, 100], y: [0, 1]} + */ + domain?: DomainPropType; + /** + * The domainPadding prop specifies a number of pixels of padding to add to the + * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther + * from the origin to prevent crowding. This prop should be given as an object with + * numbers specified for x and y. + */ + domainPadding?: DomainPaddingPropType; + /** + * The event prop take an array of event objects. Event objects are composed of + * a childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace + * for a given component, (i.e. "data" and "labels"). The childName will refer to an + * individual child of VictoryChart, either by its name prop, or by index. The eventKey + * may optionally be used to select a single element by index or eventKey rather than + * an entire set. The eventHandlers object should be given as an object whose keys are standard + * event names (i.e. onClick) and whose values are event callbacks. The return value + * of an event handler is used to modify elemnts. The return value should be given + * as an object or an array of objects with optional target and eventKey and childName keys, + * and a mutation key whose value is a function. The target and eventKey and childName keys + * will default to those corresponding to the element the event handler was attached to. + * The mutation function will be called with the calculated props for the individual selected + * element (i.e. a single bar), and the object returned from the mutation function + * will override the props of the selected element via object assignment. + * @examples + * events={[ + * { + * target: "data", + * childName: "firstBar", + * eventHandlers: { + * onClick: () => { + * return [ + * { + * childName: "secondBar", + * mutation: (props) => { + * return {style: merge({}, props.style, {fill: "orange"})}; + * } + * }, { + * childName: "secondBar", + * target: "labels", + * mutation: () => { + * return {text: "hey"}; + * } + * } + * ]; + * } + * } + * } + * ]} + */ + events?: EventPropTypeInterface[]; + /** + * Similar to data accessor props `x` and `y`, this prop may be used to functionally + * assign eventKeys to data + */ + eventKey?: StringOrNumberOrCallback; + /** + * The style prop specifies styles for your chart. Any valid inline style properties + * will be applied. Height, width, and padding should be specified via the height, + * width, and padding props, as they are used to calculate the alignment of + * components within chart. + * @example {border: "1px solid #ccc", margin: "2%", maxWidth: "40%"} + */ + style?: Pick; + } + + /** + * A flexible charting component for React. + * VictoryChart composes other Victory components into reusable charts. + * Acting as a coordinator rather than a stand-alone component, VictoryChart reconciles props such as domain and scale for child components, + * and provides a set of sensible defaults. This component works with: + * - VictoryAxis + * - VictoryLine + * - VictoryScatter + * - VictoryBar + */ + export class VictoryChart extends React.Component {} + + export interface VictoryGroupProps extends VictoryCommonProps, VictoryMultiLabeableProps { + /** + * The categories prop specifies how categorical data for a chart should be ordered. + * This prop should be given as an array of string values, or an object with + * these values for x and y. When categories are not given as an object + * When this prop is set on a wrapper component, it will dictate the categories of + * its the children. If this prop is not set, any categories on child component + * or categorical data, will be merged to create a shared set of categories. + * @example ["dogs", "cats", "mice"] + */ + categories?: CategoryPropType; + /** + * The colorScale prop is an optional prop that defines the color scale the chart's bars + * will be created on. This prop should be given as an array of CSS colors, or as a string + * corresponding to one of the built in color scales. VictoryBar will automatically assign + * values from this color scale to the bars unless colors are explicitly provided in the + * `dataAttributes` prop. + */ + colorScale?: ColorScalePropType; + /** + * The domain prop describes the range of values your chart will include. This prop can be + * given as a array of the minimum and maximum expected values for your chart, + * or as an object that specifies separate arrays for x and y. + * If this prop is not provided, a domain will be calculated from data, or other + * available information. + * @examples: [-1, 1], {x: [0, 100], y: [0, 1]} + */ + domain?: DomainPropType; + /** + * The domainPadding prop specifies a number of pixels of padding to add to the + * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther + * from the origin to prevent crowding. This prop should be given as an object with + * numbers specified for x and y. + */ + domainPadding?: DomainPaddingPropType; + /** + * The event prop take an array of event objects. Event objects are composed of + * a childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace + * for a given component, (i.e. "data" and "labels"). The childName will refer to an + * individual child of VictoryGroup, either by its name prop, or by index. The eventKey + * may optionally be used to select a single element by index or eventKey rather than + * an entire set. The eventHandlers object should be given as an object whose keys are standard + * event names (i.e. onClick) and whose values are event callbacks. The return value + * of an event handler is used to modify elemnts. The return value should be given + * as an object or an array of objects with optional target and eventKey and childName keys, + * and a mutation key whose value is a function. The target and eventKey and childName keys + * will default to those corresponding to the element the event handler was attached to. + * The mutation function will be called with the calculated props for the individual selected + * element (i.e. a single bar), and the object returned from the mutation function + * will override the props of the selected element via object assignment. + * @examples + * events={[ + * { + * target: "data", + * childName: "firstBar", + * eventHandlers: { + * onClick: () => { + * return [ + * { + * childName: "secondBar", + * mutation: (props) => { + * return {style: merge({}, props.style, {fill: "orange"})}; + * } + * }, { + * childName: "secondBar", + * target: "labels", + * mutation: () => { + * return {text: "hey"}; + * } + * } + * ]; + * } + * } + * } + * ]} + */ + events?: EventPropTypeInterface<"data" | "labels" | "parent", StringOrNumberOrCallback>[]; + /** + * Similar to data accessor props `x` and `y`, this prop may be used to functionally + * assign eventKeys to data + */ + eventKey?: StringOrNumberOrCallback; + /** + * The horizontal prop determines whether the bars will be laid vertically or + * horizontally. The bars will be vertical if this prop is false or unspecified, + * or horizontal if the prop is set to true. + */ + horizontal?: boolean; + /** + * The offset prop determines the number of pixels each element in a group should + * be offset from its original position of the on the independent axis. In the + * case of groups of bars, this number should be equal to the width of the bar + * plus the desired spacing between bars. + */ + offset?: number; + /** + * The style prop specifies styles for your grouped chart. These styles will be + * applied to all grouped children + */ + style?: VictoryStyleInterface; + } + + export class VictoryGroup extends React.Component {} + + export interface VictoryLineProps extends VictoryCommonProps, VictoryDatableProps, VictorySingleLabableProps { + /** + * The event prop take an array of event objects. Event objects are composed of + * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace + * for a given component, so "data" and "labels" are all valid targets for VictoryLine events. + * Since VictoryLine only renders a single element, the eventKey property is not used. + * The eventHandlers object should be given as an object whose keys are standard + * event names (i.e. onClick) and whose values are event callbacks. The return value + * of an event handler is used to modify elemnts. The return value should be given + * as an object or an array of objects with optional target and eventKey keys, + * and a mutation key whose value is a function. The target and eventKey keys + * will default to those corresponding to the element the event handler was attached to. + * The mutation function will be called with the calculated props for the individual selected + * element (i.e. a line), and the object returned from the mutation function + * will override the props of the selected element via object assignment. + * @examples + * events={[ + * { + * target: "data", + * eventHandlers: { + * onClick: () => { + * return [ + * { + * mutation: (props) => { + * return {style: merge({}, props.style, {stroke: "orange"})}; + * } + * }, { + * target: "labels", + * mutation: () => { + * return {text: "hey"}; + * } + * } + * ]; + * } + * } + * } + * ]} + */ + events?: EventPropTypeInterface<"data" | "labels" | "parent", number | string>[]; + /** + * The interpolation prop determines how data points should be connected + * when plotting a line + */ + interpolation?: InterpolationPropType; + /** + * The samples prop specifies how many individual points to plot when plotting + * y as a function of x. Samples is ignored if x props are provided instead. + */ + samples?: number; + /** + * The labels prop defines the labels that will appear above each point. + * This prop should be given as an array or as a function of data. + */ + labels?: string[] | number[] | Function; + /** + * Use the sortKey prop to indicate how data should be sorted. This prop + * is given directly to the lodash sortBy function to be executed on the + * final dataset. + */ + sortKey?: string | string[] | Function; + /** + * The style prop specifies styles for your VictoryLine. Any valid inline style properties + * will be applied. Height, width, and padding should be specified via the height, + * width, and padding props, as they are used to calculate the alignment of + * components within chart. in addition to normal style properties, angle and verticalAnchor + * may also be specified via the labels object, and they will be passed as props to + * VictoryLabel, or any custom labelComponent. + * @examples{data: {stroke: "red"}, labels: {fontSize: 12}} + */ + style?: VictoryStyleInterface; + } + + /** + * VictoryLine creates a line based on data. VictoryLine is a composable component, so it does not include an axis. + * Check out VictoryChart for easy to use line charts and more. + */ + export class VictoryLine extends React.Component {} + + export interface VictoryLegendProps extends VictoryCommonProps, VictoryDatableProps, VictorySingleLabableProps { + /** + * 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 + * VictoryLegend: 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, VictoryLegend 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. + * @default + */ + 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 asanobject 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. + */ + 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 VictoryLegend. This prop should be given as an array of CSS + * colors, or as a string corresponding to one of the built in color + * scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", + * "green", "blue". VictoryLegend will assign a color to each symbol by + * index, unless they are explicitly specified in the data object. + * Colors will repeat when there are more symbols than colors in the + * provided colorScale. + */ + colorScale?: ColorScalePropType; + /** + * Specify data via the data prop. VictoryLegend expects data as an + * array of objects with name (required), symbol, and labels properties. + * The data prop must be given as an array. + */ + data?: Array<{ + name?: 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 VictoryLegend: 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, VictoryLegend will use its + * default Point component. + */ + dataComponent?: React.ReactElement; + /** + * VictoryLegend uses the standard eventKey prop to specify how event targets + * are addressed. This prop is not commonly used. + */ + eventKey?: StringOrNumberOrCallback | string[]; + /** + * VictoryLegend uses the standard events prop. + */ + events?: EventPropTypeInterface<"data" | "labels" | "parent", StringOrNumberOrCallback>[]; + /** + * VictoryLegend uses the standard externalEventMutations prop. + */ + externalEventMutations?: any[]; + /** + * 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; + /** + * 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 + * VictoryLabel will be created with the props described above. + */ + labelComponent?: React.ReactElement; + /** + * 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. + * @default 'vertical' + */ + orientation?: 'horizontal' | 'vertical'; + /** + * 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. + */ + rowGutter?: number | Omit; + /** + * The style prop defines the style of the VictoryLegend component. + * The style prop should be given as an object with styles defined for data, labels and + * parent. Any valid svg styles are supported, but width, height, and + * padding should be specified via props as they determine relative + * layout for components in VictoryLegend. + */ + style?: VictoryStyleInterface; + /** + * The symbolSpacer prop defines the number of pixels between data + * components and label components. + */ + symbolSpacer?: number; + /** + * The title prop specifies a title to render with the legend. + * This prop should be given as a string, or an array of strings for multi-line titles. + */ + title?: string | string[]; + /** + * The titleComponent prop takes a component instance which will be used to render + * a title for the component. The new element created from the passed + * labelComponent will be supplied with the following properties: x, y, index, data, + * datum, verticalAnchor, textAnchor, style, text, and events. 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 VictoryLabel will be created with the props described above. + */ + titleComponent?: React.ReactElement; + /** + * The titleOrientation prop specifies where the a title should be rendered + * in relation to the rest of the legend. Possible values + * for this prop are “top”, “bottom”, “left”, and “right”. + * @default (provided by default theme): titleOrientation="top" + */ + titleOrientation?: OrientationTypes; + /** + * The x and y props define the base position of the legend element. + */ + x?: number; + y?: number; + } + + /** + * VictoryLegend renders a chart legend component. + */ + export class VictoryLegend extends React.Component {} + + type ScatterSymbolType = "circle" | "diamond" | "plus" | "square" | "star" | "triangleDown" | "triangleUp"; + + export interface VictoryScatterProps extends VictoryCommonProps, VictoryDatableProps, VictoryMultiLabeableProps { + /** + * The bubbleProperty prop indicates which property of the data object should be used + * to scale data points in a bubble chart + */ + bubbleProperty?: string; + /** + * The event prop take an array of event objects. Event objects are composed of + * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace + * for a given component, so "data" and "labels" are all valid targets for VictoryScatter + * events. The eventKey may optionally be used to select a single element by index rather than + * an entire set. The eventHandlers object should be given as an object whose keys are standard + * event names (i.e. onClick) and whose values are event callbacks. The return value + * of an event handler is used to modify elemnts. The return value should be given + * as an object or an array of objects with optional target and eventKey keys, + * and a mutation key whose value is a function. The target and eventKey keys + * will default to those corresponding to the element the event handler was attached to. + * The mutation function will be called with the calculated props for the individual selected + * element (i.e. a single bar), and the object returned from the mutation function + * will override the props of the selected element via object assignment. + * @examples + * events={[ + * { + * target: "data", + * eventKey: "thisOne", + * eventHandlers: { + * onClick: () => { + * return [ + * { + * eventKey: "theOtherOne", + * mutation: (props) => { + * return {style: merge({}, props.style, {fill: "orange"})}; + * } + * }, { + * eventKey: "theOtherOne", + * target: "labels", + * mutation: () => { + * return {text: "hey"}; + * } + * } + * ]; + * } + * } + * } + * ]} + */ + events?: EventPropTypeInterface<"data" | "labels" | "parent", StringOrNumberOrCallback>[]; + /** + * Similar to data accessor props `x` and `y`, this prop may be used to functionally + * assign eventKeys to data + */ + eventKey?: StringOrNumberOrCallback; + /** + * The maxBubbleSize prop sets an upper limit for scaling data points in a bubble chart + */ + maxBubbleSize?: number; + /** + * The samples prop specifies how many individual points to plot when plotting + * y as a function of x. Samples is ignored if x props are provided instead. + */ + samples?: number; + /** + * The size prop determines how to scale each data point + */ + size?: number | { (data: any): number }; + /** + * The style prop specifies styles for your VictoryScatter. Any valid inline style properties + * will be applied. Height, width, and padding should be specified via the height, + * width, and padding props, as they are used to calculate the alignment of + * components within chart. In addition to normal style properties, angle and verticalAnchor + * may also be specified via the labels object, and they will be passed as props to + * VictoryLabel, or any custom labelComponent. + * @example {data: {fill: "red"}, labels: {fontSize: 12}} + */ + style?: VictoryStyleInterface; + /** + * The symbol prop determines which symbol should be drawn to represent data points. + */ + symbol?: ScatterSymbolType | { (data: any): ScatterSymbolType }; + } + + /** + * VictoryScatter creates a scatter of points from data. VictoryScatter is a composable component, so it does not include an axis. + * Check out VictoryChart for easy to use scatter plots and more. + */ + export class VictoryScatter extends React.Component {} + + export interface VictoryStackProps extends VictoryCommonProps, VictoryMultiLabeableProps { + /** + * The categories prop specifies how categorical data for a chart should be ordered. + * This prop should be given as an array of string values, or an object with + * these values for x and y. When categories are not given as an object + * When this prop is set on a wrapper component, it will dictate the categories of + * its the children. If this prop is not set, any categories on child component + * or catigorical data, will be merged to create a shared set of categories. + * @example ["dogs", "cats", "mice"] + */ + categories?: CategoryPropType; + /** + * The colorScale prop is an optional prop that defines the color scale the chart's bars + * will be created on. This prop should be given as an array of CSS colors, or as a string + * corresponding to one of the built in color scales. VictoryBar will automatically assign + * values from this color scale to the bars unless colors are explicitly provided in the + * `dataAttributes` prop. + */ + colorScale?: ColorScalePropType; + /** + * The domain prop describes the range of values your chart will include. This prop can be + * given as a array of the minimum and maximum expected values for your chart, + * or as an object that specifies separate arrays for x and y. + * If this prop is not provided, a domain will be calculated from data, or other + * available information. + * @example: [-1, 1], {x: [0, 100], y: [0, 1]} + */ + domain?: DomainPropType; + /** + * The domainPadding prop specifies a number of pixels of padding to add to the + * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther + * from the origin to prevent crowding. This prop should be given as an object with + * numbers specified for x and y. + */ + domainPadding?: DomainPaddingPropType; + /** + * The event prop take an array of event objects. Event objects are composed of + * a childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace + * for a given component, (i.e. "data" and "labels"). The childName will refer to an + * individual child of VictoryStack, either by its name prop, or by index. The eventKey + * may optionally be used to select a single element by index or eventKey rather than + * an entire set. The eventHandlers object should be given as an object whose keys are standard + * event names (i.e. onClick) and whose values are event callbacks. The return value + * of an event handler is used to modify elemnts. The return value should be given + * as an object or an array of objects with optional target and eventKey and childName keys, + * and a mutation key whose value is a function. The target and eventKey and childName keys + * will default to those corresponding to the element the event handler was attached to. + * The mutation function will be called with the calculated props for the individual selected + * element (i.e. a single bar), and the object returned from the mutation function + * will override the props of the selected element via object assignment. + * @examples + * events={[ + * { + * target: "data", + * childName: "firstBar", + * eventHandlers: { + * onClick: () => { + * return [ + * { + * childName: "secondBar", + * mutation: (props) => { + * return {style: merge({}, props.style, {fill: "orange"})}; + * } + * }, { + * childName: "secondBar", + * target: "labels", + * mutation: () => { + * return {text: "hey"}; + * } + * } + * ]; + * } + * } + * } + * ]} + */ + events?: EventPropTypeInterface<"data" | "labels" | "parent", StringOrNumberOrCallback>[]; + /** + * Similar to data accessor props `x` and `y`, this prop may be used to functionally + * assign eventKeys to data + */ + eventKey?: StringOrNumberOrCallback; + /** + * The horizontal prop determines whether the bars will be laid vertically or + * horizontally. The bars will be vertical if this prop is false or unspecified, + * or horizontal if the prop is set to true. + */ + horizontal?: boolean; + /** + * The style prop specifies styles for your grouped chart. These styles will be + * applied to all grouped children + */ + style?: VictoryStyleInterface; + /** + * The xOffset prop is used for grouping stacks of bars. This prop will be set + * by the VictoryGroup component wrapper, or can be set manually. + */ + xOffset?: number; + } + + export class VictoryStack extends React.Component {} + + export interface VictoryPieProps extends VictoryCommonProps, VictoryMultiLabeableProps { + /** + * The colorScale prop is an optional prop that defines the color scale the pie + * will be created on. This prop should be given as an array of CSS colors, or as a string + * corresponding to one of the built in color scales. VictoryPie will automatically assign + * values from this color scale to the pie slices unless colors are explicitly provided in the + * data object + */ + colorScale?: ColorScalePropType; + /** + * The data prop specifies the data to be plotted, + * where data X-value is the slice label (string or number), + * and Y-value is the corresponding number value represented by the slice + * Data should be in the form of an array of data points. + * Each data point may be any format you wish (depending on the `x` and `y` accessor props), + * but by default, an object with x and y properties is expected. + * @example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]], + * [[{x: "a", y: 1}, {x: "b", y: 2}], [{x: "a", y: 2}, {x: "b", y: 3}]] + */ + data?: any[]; + /** + * The dataComponent prop takes an entire, HTML-complete data component which will be used to + * create slices for each datum in the pie chart. The new element created from the passed + * dataComponent will have the property datum set by the pie chart for the point it renders; + * properties style and pathFunction calculated by VictoryPie; an index property set + * corresponding to the location of the datum in the data provided to the pie; events bound to + * the VictoryPie; and the d3 compatible slice object. + * If a dataComponent is not provided, VictoryPie's Slice component will be used. + */ + dataComponent?: React.ReactElement; + /** + * The labelRadius prop defines the radius of the arc that will be used for positioning each slice label. + * If this prop is not set, the label radius will default to the radius of the pie + label padding. + */ + labelRadius?: number; + /** + * The overall end angle of the pie in degrees. This prop is used in conjunction with + * startAngle to create a pie that spans only a segment of a circle. + */ + endAngle?: number; + /** + * The event prop takes an array of event objects. Event objects are composed of + * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace + * for a given component, so "data" and "labels" are all valid targets for VictoryPie + * events. The eventKey may optionally be used to select a single element by index rather than + * an entire set. The eventHandlers object should be given as an object whose keys are standard + * event names (i.e. onClick) and whose values are event callbacks. The return value + * of an event handler is used to modify elemnts. The return value should be given + * as an object or an array of objects with optional target and eventKey keys, + * and a mutation key whose value is a function. The target and eventKey keys + * will default to those corresponding to the element the event handler was attached to. + * The mutation function will be called with the calculated props for the individual selected + * element (i.e. a single bar), and the object returned from the mutation function + * will override the props of the selected element via object assignment. + * @examples + * events={[ + * { + * target: "data", + * eventKey: 1, + * eventHandlers: { + * onClick: () => { + * return [ + * { + * eventKey: 2, + * mutation: (props) => { + * return {style: merge({}, props.style, {fill: "orange"})}; + * } + * }, { + * eventKey: 2, + * target: "labels", + * mutation: () => { + * return {text: "hey"}; + * } + * } + * ]; + * } + * } + * } + * ]} + */ + events?: EventPropTypeInterface<"data" | "labels" | "parent", StringOrNumberOrCallback | string[] | number[]>[]; + /** + * Similar to data accessor props `x` and `y`, this prop may be used to functionally + * assign eventKeys to data + */ + eventKey?: StringOrNumberOrCallback; + /** + * Specifies the radius of the chart. If this property is not provided it is computed + * from width, height, and padding props + * + */ + radius?: number; + /** + * When creating a donut chart, this prop determines the number of pixels between + * the center of the chart and the inner edge of a donut. When this prop is set to zero + * a regular pie chart is rendered. + */ + innerRadius?: number; + /** + * Set the cornerRadius for every dataComponent (Slice by default) within VictoryPie + */ + cornerRadius?: number; + /** + * The padAngle prop determines the amount of separation between adjacent data slices + * in number of degrees + */ + padAngle?: number; + /** + * The overall start angle of the pie in degrees. This prop is used in conjunction with + * endAngle to create a pie that spans only a segment of a circle. + */ + startAngle?: number; + /** + * The style prop specifies styles for your pie. VictoryPie relies on Radium, + * so valid Radium style objects should work for this prop. Height, width, and + * padding should be specified via the height, width, and padding props. + * @example {data: {stroke: "black"}, label: {fontSize: 10}} + */ + style?: VictoryStyleInterface; + /** + * The x prop specifies how to access the X value of each data point. + * If given as a function, it will be run on each data point, and returned value will be used. + * If given as an integer, it will be used as an array index for array-type data points. + * If given as a string, it will be used as a property key for object-type data points. + * If given as an array of strings, or a string containing dots or brackets, + * it will be used as a nested object property path (for details see Lodash docs for _.get). + * If `null` or `undefined`, the data value will be used as is (identity function/pass-through). + * @example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d) + */ + x?: DataGetterPropType; + /** + * The y prop specifies how to access the Y value of each data point. + * If given as a function, it will be run on each data point, and returned value will be used. + * If given as an integer, it will be used as an array index for array-type data points. + * If given as a string, it will be used as a property key for object-type data points. + * If given as an array of strings, or a string containing dots or brackets, + * it will be used as a nested object property path (for details see Lodash docs for _.get). + * If `null` or `undefined`, the data value will be used as is (identity function/pass-through). + * @example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d) + */ + y?: DataGetterPropType; + } + + /** + * victory-pie draws an SVG pie or donut chart with React. + * Styles and data can be customized by passing in your own values as properties to the component. + * Data changes are animated with VictoryAnimation. + */ + export class VictoryPie extends React.Component {} +} diff --git a/types/victory/victory-tests.tsx b/types/victory/victory-tests.tsx index fcd18571e3..682b8c30d8 100644 --- a/types/victory/victory-tests.tsx +++ b/types/victory/victory-tests.tsx @@ -197,9 +197,9 @@ test = ( tick.x }, - ticks: { stroke: tick => tick.color }, - tickLabels: { fontSize: tick => tick.y }, + grid: { strokeWidth: (tick: any) => tick.x }, + ticks: { stroke: (tick: any) => tick.color }, + tickLabels: { fontSize: (tick: any) => tick.y }, }} tickValues={[ new Date(1980, 1, 1), @@ -611,8 +611,8 @@ test = ( ]} style={{ data: { - fill: d => d.x, - stroke: (datum, active) => active ? datum.x : datum.y, + fill: (d: any) => d.x, + stroke: (datum: any, active: boolean) => active ? datum.x : datum.y, strokeWidth: 3 } }} @@ -757,6 +757,7 @@ test = ( ]} gutter={10} orientation="horizontal" + title="Title" symbolSpacer={8} width={100} height={50} @@ -771,5 +772,22 @@ test = ( standalone padding={{ top: 20, right: 40, bottom: 60, left: 20 }} colorScale="heatmap" + events={[{ + target: "data", + eventKey: "thisOne", + eventHandlers: { + onClick: () => ([ + { + eventKey: "theOtherOne", + mutation: props => ({ style: { ...props.style, fill: "orange" } }) + }, + { + eventKey: "theOtherOne", + target: "labels", + mutation: () => ({ text: "hey" }) + } + ]) + } + }]} /> );