Merge pull request #17344 from ngub/master

[victory]: added missing types for VictoryLegend

types/victory/index.d.ts

@@ -1156,6 +1156,17 @@ declare module "victory" {
          * 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,
@@ -1173,6 +1184,151 @@ declare module "victory" {
      */
     export class VictoryLine extends React.Component<VictoryLineProps> {}
 
+    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 <VictoryContainer/>
+         */
+        containerComponent?: React.ReactElement<any>;
+        /**
+         * 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?: {
+                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<any>;
+        /**
+         * 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 <g> tag on web, and a react-native-svg <G> tag on mobile
+         * @default <g/>
+         */
+        groupComponent?: React.ReactElement<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 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<any>;
+        /**
+         * 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 <svg> element or in a <g> 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<VictoryLegendProps, any> {}
+
     type ScatterSymbolType = "circle" | "diamond" | "plus" | "square" | "star" | "triangleDown" | "triangleUp";
     export interface VictoryScatterProps extends VictoryCommonProps, VictoryDatableProps, VictoryMultiLabeableProps {
         /**

types/victory/victory-tests.tsx

@@ -10,7 +10,9 @@ import {
     VictoryLine,
     VictoryChart,
     VictoryScatter,
-    VictoryPie
+    VictoryPie,
+    VictoryTheme,
+    VictoryLegend
 } from "victory";
 
 // VictoryAnimation test
@@ -607,3 +609,31 @@ test = (
 test = (
     <VictoryChart animate={{ duration: 2000, easing: 'bounce' }} />
 );
+
+// VictoryLegend test
+
+test = (
+    <VictoryLegend
+        data={[
+            {name: "A", symbol: { type: "circle"}},
+            {name: "B", symbol: { type: "square"}},
+            {name: "C", symbol: { type: "star"}}
+        ]}
+        gutter={10}
+        orientation="horizontal"
+        symbolSpacer={8}
+        width={100}
+        height={50}
+        x={5}
+        y={5}
+        theme={VictoryTheme.material}
+        style={{
+            data: { fill: "tomato", opacity: 0.7 },
+            labels: { fontSize: 12 },
+            parent: { border: "1px solid #ccc" }
+        }}
+        standalone
+        padding={{ top: 20, right: 40, bottom: 60, left: 20 }}
+        colorScale="heatmap"
+    />
+);