1 | /**
|
2 | * @fileOverview Cartesian Grid
|
3 | */
|
4 | import React, { ReactElement, SVGProps } from 'react';
|
5 | import { ChartOffset, D3Scale } from '../util/types';
|
6 | import { Props as XAxisProps } from './XAxis';
|
7 | import { Props as YAxisProps } from './YAxis';
|
8 | type XAxisWithD3Scale = Omit<XAxisProps, 'scale'> & {
|
9 | scale: D3Scale<string | number>;
|
10 | };
|
11 | type YAxisWithD3Scale = Omit<YAxisProps, 'scale'> & {
|
12 | scale: D3Scale<string | number>;
|
13 | };
|
14 | /**
|
15 | * The <CartesianGrid horizontal
|
16 | */
|
17 | export 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 | };
|
34 | type GridLineType = SVGProps<SVGLineElement> | ReactElement<SVGElement> | ((props: GridLineTypeFunctionProps) => ReactElement<SVGElement>) | boolean;
|
35 | export type HorizontalCoordinatesGenerator = (props: {
|
36 | yAxis: any;
|
37 | width: number;
|
38 | height: number;
|
39 | offset: ChartOffset;
|
40 | }, syncWithTicks: boolean) => number[];
|
41 | export type VerticalCoordinatesGenerator = (props: {
|
42 | xAxis: any;
|
43 | width: number;
|
44 | height: number;
|
45 | offset: ChartOffset;
|
46 | }, syncWithTicks: boolean) => number[];
|
47 | interface InternalCartesianGridProps {
|
48 | width?: number;
|
49 | height?: number;
|
50 | horizontalCoordinatesGenerator?: HorizontalCoordinatesGenerator;
|
51 | verticalCoordinatesGenerator?: VerticalCoordinatesGenerator;
|
52 | }
|
53 | interface 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 | }
|
117 | type AcceptedSvgProps = Omit<SVGProps<SVGRectElement>, 'offset'>;
|
118 | export type Props = AcceptedSvgProps & CartesianGridProps;
|
119 | type 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 | };
|
130 | export declare function CartesianGrid(props: Props): React.JSX.Element;
|
131 | export declare namespace CartesianGrid {
|
132 | var displayName: string;
|
133 | }
|
134 | export {};
|