UNPKG

12.4 kBTypeScriptView Raw
1// Last module patch version validated against: 3.0.0
2
3import { Selection, TransitionLike } from "d3-selection";
4
5// --------------------------------------------------------------------------
6// Shared Types and Interfaces
7// --------------------------------------------------------------------------
8
9/**
10 * A helper type to alias elements which can serve as a domain for an axis.
11 */
12export type AxisDomain = number | string | Date | { valueOf(): number };
13
14/**
15 * A helper interface to describe the minimal contract to be met by a time interval
16 * which can be passed into the Axis.ticks(...) or Axis.tickArguments(...) methods when
17 * creating time series axes. Under normal circumstances the argument will be of type
18 * TimeInterval or CountableTimeInterval as defined in d3-time.
19 * NB: This helper interface has been created to avoid tight coupling of d3-axis to
20 * d3-time at the level of definition files. I.e. d3-time is not a
21 * dependency of d3-axis in the D3 Javascript implementation. This minimal contract
22 * is based on an analysis of how d3-axis passes a time interval argument into a time scale,
23 * if a time scale was set using Axis.scale(...). And in turn on how a time scale uses
24 * the time interval when creating ticks from it.
25 */
26export interface AxisTimeInterval {
27 range(start: Date, stop: Date, step?: number): Date[];
28}
29
30/**
31 * A helper interface to which a scale passed into axis must conform (at a minimum)
32 * for axis to use the scale without error.
33 */
34export interface AxisScale<Domain> {
35 (x: Domain): number | undefined;
36 domain(): Domain[];
37 range(): number[];
38 copy(): this;
39 bandwidth?(): number;
40 // TODO: Reconsider the below, note that the compiler does not differentiate the overloads w.r.t. optionality
41 // ticks?(count?: number): Domain[];
42 // ticks?(count?: AxisTimeInterval): Date[];
43 // tickFormat?(count?: number, specifier?: string): ((d: number) => string);
44 // tickFormat?(count?: number | AxisTimeInterval, specifier?: string): ((d: Date) => string);
45}
46
47/**
48 * A helper type to alias elements which can serve as a container for an axis.
49 */
50export type AxisContainerElement = SVGSVGElement | SVGGElement;
51
52/**
53 * Interface defining an axis generator. The generic <Domain> is the type of the axis domain.
54 */
55export interface Axis<Domain> {
56 /**
57 * Render the axis to the given context.
58 *
59 * @param context A selection of or a transition defined on SVG containers (either SVG or G elements).
60 */
61 (
62 context:
63 | Selection<SVGSVGElement, any, any, any>
64 | Selection<SVGGElement, any, any, any>
65 | TransitionLike<SVGSVGElement, any>
66 | TransitionLike<SVGGElement, any>,
67 ): void;
68
69 /**
70 * Gets the current scale underlying the axis.
71 */
72 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
73 scale<A extends AxisScale<Domain>>(): A;
74
75 /**
76 * Sets the scale and returns the axis.
77 *
78 * @param scale The scale to be used for axis generation.
79 */
80 scale(scale: AxisScale<Domain>): this;
81
82 /**
83 * Sets the arguments that will be passed to scale.ticks and scale.tickFormat when the axis is rendered, and returns the axis generator.
84 *
85 * This method has no effect if the scale does not implement scale.ticks, as with band and point scales.
86 *
87 * This method is also a convenience function for axis.tickArguments.
88 *
89 * @param count Number of ticks that should be rendered.
90 * @param specifier An optional format specifier to customize how the tick values are formatted.
91 */
92 ticks(count: number, specifier?: string): this;
93
94 /**
95 * Sets the arguments that will be passed to scale.ticks and scale.tickFormat when the axis is rendered, and returns the axis generator.
96 * Use with a TIME SCALE ONLY.
97 *
98 * This method is also a convenience function for axis.tickArguments.
99 *
100 * @param interval A time interval used to generate date-based ticks. This is typically a TimeInterval/CountableTimeInterval as defined
101 * in d3-time. E.g. as obtained by passing in d3.timeMinute.every(15).
102 * @param specifier An optional format specifier to customize how the tick values are formatted.
103 */
104 // tslint:disable-next-line:unified-signatures
105 ticks(interval: AxisTimeInterval, specifier?: string): this;
106
107 /**
108 * Sets the arguments that will be passed to scale.ticks and scale.tickFormat when the axis is rendered, and returns the axis generator.
109 *
110 * The meaning of the arguments depends on the axis’ scale type: most commonly, the arguments are a suggested count for the number of ticks
111 * (or a time interval for time scales), and an optional format specifier to customize how the tick values are formatted.
112 *
113 * This method has no effect if the scale does not implement scale.ticks, as with band and point scales.
114 *
115 * To set the tick values explicitly, use axis.tickValues. To set the tick format explicitly, use axis.tickFormat.
116 *
117 * This method is also a convenience function for axis.tickArguments.
118 */
119 ticks(arg0: any, ...args: any[]): this;
120
121 /**
122 * Get an array containing the currently set arguments to be passed into scale.ticks and scale.tickFormat, which defaults to the empty array.
123 */
124 tickArguments(): any[];
125
126 /**
127 * Sets the arguments that will be passed to scale.ticks and scale.tickFormat when the axis is rendered, and returns the axis generator.
128 *
129 * This method has no effect if the scale does not implement scale.ticks, as with band and point scales.
130 * To set the tick values explicitly, use axis.tickValues. To set the tick format explicitly, use axis.tickFormat.
131 *
132 * See also axis.ticks.
133 *
134 * @param args The meaning of the arguments depends on the axis’ scale type: most commonly, the arguments are a
135 * suggested count for the number of ticks (or a time interval for time scales), and an optional format specifier to
136 * customize how the tick values are formatted.
137 */
138 tickArguments(args: any[]): this;
139
140 /**
141 * Returns the current tick values, which defaults to null.
142 */
143 tickValues(): Domain[] | null;
144
145 /**
146 * Specified values to be used for ticks rather than using the scale’s automatic tick generator.
147 * The explicit tick values take precedent over the tick arguments set by axis.tickArguments.
148 * However, any tick arguments will still be passed to the scale’s tickFormat function if a
149 * tick format is not also set.
150 *
151 * @param values An iterable with values from the Domain of the scale underlying the axis.
152 */
153 tickValues(values: Iterable<Domain>): this;
154
155 /**
156 * Clears any previously-set explicit tick values and reverts back to the scale’s tick generator.
157 *
158 * @param values null
159 */
160 tickValues(values: null): this;
161
162 /**
163 * Returns the currently set tick format function, which defaults to null.
164 */
165 tickFormat(): ((domainValue: Domain, index: number) => string) | null;
166
167 /**
168 * Sets the tick format function and returns the axis.
169 *
170 * @param format A function mapping a value from the axis Domain to a formatted string
171 * for display purposes. When invoked, the format function is also passed a second argument representing the zero-based index
172 * of the tick label in the array of generated tick labels.
173 */
174 tickFormat(format: (domainValue: Domain, index: number) => string): this;
175
176 /**
177 * Reset the tick format function. A null format indicates that the scales
178 * default formatter should be used, which is generated by calling scale.tickFormat.
179 * In this case, the arguments specified by axis.tickArguments
180 * are likewise passed to scale.tickFormat.
181 *
182 * @param format null
183 */
184 tickFormat(format: null): this;
185
186 /**
187 * Get the current inner tick size, which defaults to 6.
188 */
189 tickSize(): number;
190 /**
191 * Set the inner and outer tick size to the specified value and return the axis.
192 *
193 * @param size Tick size in pixels (Default is 6).
194 */
195 tickSize(size: number): this;
196
197 /**
198 * Get the current inner tick size, which defaults to 6.
199 * The inner tick size controls the length of the tick lines,
200 * offset from the native position of the axis.
201 */
202 tickSizeInner(): number;
203
204 /**
205 * Set the inner tick size to the specified value and return the axis.
206 * The inner tick size controls the length of the tick lines,
207 * offset from the native position of the axis.
208 *
209 * @param size Tick size in pixels (Default is 6).
210 */
211 tickSizeInner(size: number): this;
212
213 /**
214 * Get the current outer tick size, which defaults to 6.
215 * The outer tick size controls the length of the square ends of the domain path,
216 * offset from the native position of the axis. Thus, theouter ticksare not actually
217 * ticks but part of the domain path, and their position is determined by the associated
218 * scales domain extent. Thus, outer ticks may overlap with the first or last inner tick.
219 * An outer tick size of 0 suppresses the square ends of the domain path,
220 * instead producing a straight line.
221 */
222 tickSizeOuter(): number;
223
224 /**
225 * Set the current outer tick size and return the axis.
226 * The outer tick size controls the length of the square ends of the domain path,
227 * offset from the native position of the axis. Thus, theouter ticksare not actually
228 * ticks but part of the domain path, and their position is determined by the associated
229 * scales domain extent. Thus, outer ticks may overlap with the first or last inner tick.
230 * An outer tick size of 0 suppresses the square ends of the domain path,
231 * instead producing a straight line.
232 *
233 * @param size Tick size in pixels (Default is 6).
234 */
235 tickSizeOuter(size: number): this;
236
237 /**
238 * Get the current padding, which defaults to 3.
239 */
240 tickPadding(): number;
241
242 /**
243 * Set the current padding and return the axis.
244 *
245 * @param padding Padding in pixels (Default is 3).
246 */
247 tickPadding(padding: number): this;
248
249 /**
250 * Returns the current offset which defaults to 0 on devices with a devicePixelRatio greater than 1, and 0.5px otherwise.
251 * This default offset ensures crisp edges on low-resolution devices.
252 */
253 offset(): number;
254
255 /**
256 * Sets the offset to the specified value in pixels and returns the axis.
257 * Defaults to 0 on devices with a devicePixelRatio greater than 1, and 0.5px otherwise.
258 * This default offset ensures crisp edges on low-resolution devices.
259 */
260 offset(offset: number): this;
261}
262
263/**
264 * Constructs a new top-oriented axis generator for the given scale, with empty tick arguments,
265 * a tick size of 6 and padding of 3. In this orientation, ticks are drawn above the horizontal domain path.
266 *
267 * @param scale The scale to be used for axis generation.
268 */
269export function axisTop<Domain extends AxisDomain>(scale: AxisScale<Domain>): Axis<Domain>;
270
271/**
272 * Constructs a new right-oriented axis generator for the given scale, with empty tick arguments,
273 * a tick size of 6 and padding of 3. In this orientation, ticks are drawn to the right of the vertical domain path.
274 *
275 * @param scale The scale to be used for axis generation.
276 */
277export function axisRight<Domain extends AxisDomain>(scale: AxisScale<Domain>): Axis<Domain>;
278
279/**
280 * Constructs a new bottom-oriented axis generator for the given scale, with empty tick arguments,
281 * a tick size of 6 and padding of 3. In this orientation, ticks are drawn below the horizontal domain path.
282 *
283 * @param scale The scale to be used for axis generation.
284 */
285export function axisBottom<Domain extends AxisDomain>(scale: AxisScale<Domain>): Axis<Domain>;
286
287/**
288 * Constructs a new left-oriented axis generator for the given scale, with empty tick arguments,
289 * a tick size of 6 and padding of 3. In this orientation, ticks are drawn to the left of the vertical domain path.
290 *
291 * @param scale The scale to be used for axis generation.
292 */
293export function axisLeft<Domain extends AxisDomain>(scale: AxisScale<Domain>): Axis<Domain>;
294
\No newline at end of file