5.11 kBTypeScriptView Raw
1/**
2 * @fileOverview Cartesian Grid
3 */
4import React, { ReactElement, SVGProps } from 'react';
5import { ChartOffset, D3Scale } from '../util/types';
6import { Props as XAxisProps } from './XAxis';
7import { Props as YAxisProps } from './YAxis';
8type XAxisWithD3Scale = Omit<XAxisProps, 'scale'> & {
9 scale: D3Scale<string | number>;
10};
11type YAxisWithD3Scale = Omit<YAxisProps, 'scale'> & {
12 scale: D3Scale<string | number>;
13};
14/**
15 * The <CartesianGrid horizontal
16 */
17export type GridLineTypeFunctionProps = Omit<LineItemProps, 'key'> & {
18 key: LineItemProps['key'] | undefined;
19 offset: ChartOffset;
20 /**
21 * The first available xAxis. This is rather arbitrary - if there's one XAxis then it's the first one,
22 * if there are multiple then it's a random one.
23 *
24 * If there are no XAxis present then this will be null.
25 */
26 xAxis: null | XAxisWithD3Scale;
27 /**
28 * The first available yAxis. The axes with finite domain will be preferred.
29 *
30 * If there are no YAxis present then this will be null.
31 */
32 yAxis: null | YAxisWithD3Scale;
33};
34type GridLineType = SVGProps<SVGLineElement> | ReactElement<SVGElement> | ((props: GridLineTypeFunctionProps) => ReactElement<SVGElement>) | boolean;
35export type HorizontalCoordinatesGenerator = (props: {
36 yAxis: any;
37 width: number;
38 height: number;
39 offset: ChartOffset;
40}, syncWithTicks: boolean) => number[];
41export type VerticalCoordinatesGenerator = (props: {
42 xAxis: any;
43 width: number;
44 height: number;
45 offset: ChartOffset;
46}, syncWithTicks: boolean) => number[];
47interface InternalCartesianGridProps {
48 width?: number;
49 height?: number;
50 horizontalCoordinatesGenerator?: HorizontalCoordinatesGenerator;
51 verticalCoordinatesGenerator?: VerticalCoordinatesGenerator;
52}
53interface CartesianGridProps extends InternalCartesianGridProps {
54 /**
55 * The x-coordinate of grid.
56 * If left undefined, it will be computed from the chart's offset and margins.
57 */
58 x?: number;
59 /**
60 * The y-coordinate of grid.
61 * If left undefined, it will be computed from the chart's offset and margins.
62 */
63 y?: number;
64 horizontal?: GridLineType;
65 vertical?: GridLineType;
66 /**
67 * Array of coordinates in pixels where to draw horizontal grid lines.
68 * Has priority over syncWithTicks and horizontalValues.
69 */
70 horizontalPoints?: number[];
71 /**
72 * Array of coordinates in pixels where to draw vertical grid lines.
73 * Has priority over syncWithTicks and horizontalValues.
74 */
75 verticalPoints?: number[];
76 /**
77 * Defines background color of stripes.
78 *
79 * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
80 * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
81 *
82 * In case there are more stripes than colors, the colors will start from beginning
83 * So for example: verticalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
84 *
85 * If this is undefined, or an empty array, then there is no background fill.
86 */
87 verticalFill?: string[];
88 /**
89 * Defines background color of stripes.
90 *
91 * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
92 * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
93 *
94 * In case there are more stripes than colors, the colors will start from beginning
95 * So for example: horizontalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
96 *
97 * If this is undefined, or an empty array, then there is no background fill.
98 */
99 horizontalFill?: string[];
100 /**
101 * If true, only the lines that correspond to the axes ticks values will be drawn.
102 * If false, extra lines could be added for each axis (at min and max coordinates), if there will not such ticks.
103 * horizontalPoints, verticalPoints, horizontalValues, verticalValues have priority over syncWithTicks.
104 */
105 syncWithTicks?: boolean;
106 /**
107 * Array of values, where horizontal lines will be drawn. Numbers or strings, in dependence on axis type.
108 * Has priority over syncWithTicks but not over horizontalValues.
109 */
110 horizontalValues?: number[] | string[];
111 /**
112 * Array of values, where vertical lines will be drawn. Numbers or strings, in dependence on axis type.
113 * Has priority over syncWithTicks but not over verticalValues.
114 */
115 verticalValues?: number[] | string[];
116}
117type AcceptedSvgProps = Omit<SVGProps<SVGRectElement>, 'offset'>;
118export type Props = AcceptedSvgProps & CartesianGridProps;
119type LineItemProps = Props & {
120 offset: ChartOffset;
121 xAxis: null | XAxisWithD3Scale;
122 yAxis: null | YAxisWithD3Scale;
123 x1: number;
124 y1: number;
125 x2: number;
126 y2: number;
127 key: string;
128 index: number;
129};
130export declare function CartesianGrid(props: Props): React.JSX.Element;
131export declare namespace CartesianGrid {
132 var displayName: string;
133}
134export {};