1 | import {Chart} from "./chart";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | export interface Axis {
|
8 | |
9 |
|
10 |
|
11 | rotated?: boolean;
|
12 | x?: xAxisConfiguration;
|
13 | y?: yAxisConfiguration;
|
14 | y2?: yAxisConfigurationBase;
|
15 | }
|
16 |
|
17 | export interface AxisConfigurationBase {
|
18 | |
19 |
|
20 |
|
21 | show?: boolean;
|
22 |
|
23 | |
24 |
|
25 |
|
26 | axes?: AxesConfiguration[];
|
27 | }
|
28 |
|
29 | export interface xAxisConfiguration extends AxisConfigurationBase {
|
30 | |
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 | type?: "category" | "indexed" | "log" | "timeseries";
|
39 |
|
40 | |
41 |
|
42 |
|
43 |
|
44 | localtime?: boolean;
|
45 |
|
46 | |
47 |
|
48 |
|
49 |
|
50 |
|
51 | categories?: string[];
|
52 |
|
53 | tick?: XTickConfiguration;
|
54 |
|
55 | |
56 |
|
57 |
|
58 |
|
59 |
|
60 | max?: string | number | Date | ({
|
61 | fit?: boolean;
|
62 | value?: string | number | Date;
|
63 | });
|
64 |
|
65 | |
66 |
|
67 |
|
68 |
|
69 |
|
70 | min?: string | number | Date | ({
|
71 | fit?: boolean;
|
72 | value?: string | number | Date;
|
73 | });
|
74 |
|
75 | |
76 |
|
77 |
|
78 |
|
79 |
|
80 | padding?: {
|
81 | left?: number;
|
82 | right?: number;
|
83 | } | number;
|
84 |
|
85 | |
86 |
|
87 |
|
88 |
|
89 |
|
90 | height?: number;
|
91 |
|
92 | |
93 |
|
94 |
|
95 |
|
96 | extent?: number[] | string[] | (
|
97 | (
|
98 | this: Chart,
|
99 | domain: Date|string|number[],
|
100 | scale: (value: any) => number
|
101 | ) => number[]
|
102 | );
|
103 |
|
104 | |
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 | label?: string | { text: string; position: string };
|
114 |
|
115 | |
116 |
|
117 |
|
118 | clipPath?: boolean;
|
119 | }
|
120 |
|
121 | export interface yAxisConfigurationBase extends AxisConfigurationBase {
|
122 | |
123 |
|
124 |
|
125 | inner?: boolean;
|
126 |
|
127 | |
128 |
|
129 |
|
130 | max?: number;
|
131 |
|
132 | |
133 |
|
134 |
|
135 | min?: number;
|
136 |
|
137 | |
138 |
|
139 |
|
140 |
|
141 | inverted?: boolean;
|
142 |
|
143 | |
144 |
|
145 |
|
146 | center?: number;
|
147 |
|
148 | |
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 | label?: string | { text: string; position: string };
|
157 |
|
158 | tick?: YTickConfiguration;
|
159 |
|
160 | |
161 |
|
162 |
|
163 |
|
164 |
|
165 | padding?: {
|
166 | top?: number;
|
167 | bottom?: number;
|
168 | } | number;
|
169 |
|
170 | |
171 |
|
172 |
|
173 |
|
174 | default?: number[];
|
175 | }
|
176 |
|
177 | export interface yAxisConfiguration extends yAxisConfigurationBase {
|
178 | |
179 |
|
180 |
|
181 | clipPath?: boolean;
|
182 | }
|
183 |
|
184 | export interface XTickConfiguration {
|
185 | |
186 |
|
187 |
|
188 | centered?: boolean;
|
189 |
|
190 | |
191 |
|
192 |
|
193 | format?: string
|
194 | | ((this: Chart, x: number | Date) => string | number)
|
195 | | ((this: Chart, index: number, categoryName: string) => string);
|
196 |
|
197 | /**
|
198 | * Setting for culling ticks.
|
199 | * If true is set, the ticks will be culled, then only limitted tick text will be shown.
|
200 | * This option does not hide the tick lines. If false is set, all of ticks will be shown.
|
201 | */
|
202 | culling?: boolean | {
|
203 | /**
|
204 | * The number of tick texts will be adjusted to less than this value.
|
205 | */
|
206 | max?: number;
|
207 | };
|
208 |
|
209 | /**
|
210 | * The number of x axis ticks to show.
|
211 | * This option hides tick lines together with tick text. If this option is used on timeseries axis, the ticks position will be determined precisely and not nicely positioned (e.g. it will
|
212 | * have rough second value).
|
213 | */
|
214 | count?: number;
|
215 |
|
216 | /**
|
217 | * Fit x axis ticks.
|
218 | * - true: ticks will be positioned nicely to have same intervals.
|
219 | * - false: ticks will be positioned according to x value of the data points.
|
220 | */
|
221 | fit?: boolean;
|
222 |
|
223 | /**
|
224 | * Set the x values of ticks manually.
|
225 | * If this option is provided, the position of the ticks will be determined based on those values.
|
226 | * This option works with timeseries data and the x values will be parsed accoding to the type of the value and data.xFormat option.
|
227 | */
|
228 | values?: number[] | string[] | ((this: Chart) => number[]);
|
229 |
|
230 | /**
|
231 | * Rotate x axis tick text.
|
232 | * - If you set negative value, it will rotate to opposite direction.
|
233 | * - Applied when 'axis.rotated' option is 'false'.
|
234 | * - As long as `axis_x_tick_fit` is set to `true` it will calculate an overflow for the y2 axis and add this value to the right padding.
|
235 | */
|
236 | rotate?: number;
|
237 |
|
238 | /**
|
239 | * Rotate x axis tick text if there is not enough space for 'category' and 'timeseries' type axis.
|
240 | * - **NOTE:** The conditions where `autorotate` is enabled are:
|
241 | * - axis.x.type='category' or 'timeseries
|
242 | * - axis.x.tick.multiline=false
|
243 | * - axis.x.tick.culling=false
|
244 | * - axis.x.tick.fit=true
|
245 | * - **NOTE:** axis.x.tick.clippath=false is necessary for calculating the overflow padding between the end of x axis and the width of the SVG
|
246 | */
|
247 | autorotate?: boolean;
|
248 |
|
249 | /**
|
250 | * Show x axis outer tick.
|
251 | */
|
252 | outer?: boolean;
|
253 |
|
254 | /**
|
255 | * Set width of x axis tick.
|
256 | */
|
257 | width?: number;
|
258 |
|
259 | /**
|
260 | * Set tick text to be multiline
|
261 | * - NOTE: When x tick text contains \n, it's used as line break and 'axis.x.tick.width' option is ignored.
|
262 | */
|
263 | multiline?: boolean;
|
264 |
|
265 | /**
|
266 | * Set to display system tooltip(via 'title' attribute) for tick text
|
267 | * - NOTE: Only available for category axis type (axis.x.type='category')
|
268 | */
|
269 | tooltip?: boolean;
|
270 |
|
271 | /**
|
272 | * Show or hide tick line.
|
273 | */
|
274 | show?: boolean;
|
275 |
|
276 | text?: {
|
277 | /**
|
278 | * Set the x Axis tick text's position relatively its original position
|
279 | */
|
280 | position?: {
|
281 | x?: number;
|
282 | y?: number;
|
283 | };
|
284 |
|
285 | /**
|
286 | * Show or hide tick text
|
287 | */
|
288 | show?: boolean;
|
289 | };
|
290 |
|
291 | /**
|
292 | * Set axis type (timeseries, category, indexed, log)
|
293 | *
|
294 | * NOTE:
|
295 | * log type:
|
296 | * - the bound data values must be exclusively-positive.
|
297 | * - axis min value should be >= 0.
|
298 | * - `data.groups`(stacked data) option aren't supported.
|
299 | */
|
300 | type?: "indexed" | "log" | "timeseries";
|
301 | }
|
302 |
|
303 | export interface YTickConfiguration {
|
304 | /**
|
305 | * Show or hide outer tick.
|
306 | */
|
307 | outer?: boolean;
|
308 |
|
309 | /**
|
310 | * Set the y values of ticks manually.
|
311 | */
|
312 | values?: number[] | ((this: Chart) => number[]);
|
313 |
|
314 | /**
|
315 | * Rotate y(or y2) axis tick text.
|
316 | * - If you set negative value, it will rotate to opposite direction.
|
317 | * - Applied when 'axis.rotated' option is 'true'.
|
318 | */
|
319 | rotate?: number;
|
320 |
|
321 | /**
|
322 | * The number of y axis ticks to show.
|
323 | * The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely.
|
324 | * In the case, axis.y.tick.format or axis.y.tick.values will be helpful.
|
325 | */
|
326 | count?: number;
|
327 |
|
328 | /**
|
329 | * Set formatter for y axis tick text.
|
330 | * This option accepts d3.format object as well as a function you define.
|
331 | */
|
332 | format?(this: Chart, x: number): string;
|
333 |
|
334 | /**
|
335 | * Setting for culling ticks.
|
336 | * If true is set, the ticks will be culled, then only limitted tick text will be shown.
|
337 | * This option does not hide the tick lines. If false is set, all of ticks will be shown.
|
338 | */
|
339 | culling?: boolean | {
|
340 | /**
|
341 | * The number of tick texts will be adjusted to less than this value.
|
342 | */
|
343 | max?: number;
|
344 | };
|
345 |
|
346 | /**
|
347 | * Set axis tick step(interval) size.
|
348 | * - **NOTE:** Will be ignored if `axis[y|y2].tick.count` or `axis[y|y2].tick.values` options are set.
|
349 | */
|
350 | stepSize?: number;
|
351 |
|
352 | /**
|
353 | * Show or hide axis tick line.
|
354 | */
|
355 | show?: boolean;
|
356 |
|
357 | text?: {
|
358 | /**
|
359 | * Set the x Axis tick text's position relatively its original position
|
360 | */
|
361 | position?: {
|
362 | x?: number;
|
363 | y?: number;
|
364 | };
|
365 |
|
366 | /**
|
367 | * Show or hide axis tick text.
|
368 | */
|
369 | show?: boolean;
|
370 | };
|
371 | }
|
372 |
|
373 | export interface AxesConfiguration {
|
374 | /**
|
375 | * Set the axis domain value
|
376 | * if set, will not be correlated with the main x Axis domain value
|
377 | */
|
378 | domain?: [number, number];
|
379 |
|
380 | /**
|
381 | * Set axis tick options
|
382 | */
|
383 | tick?: {
|
384 | /**
|
385 | * Show outer tick
|
386 | */
|
387 | outer?: boolean;
|
388 |
|
389 | /**
|
390 | * Set formatter for tick text
|
391 | */
|
392 | format?: (this: Chart, x: string) => string;
|
393 |
|
394 | |
395 |
|
396 |
|
397 | count?: number;
|
398 |
|
399 | |
400 |
|
401 |
|
402 | values?: number|string|Date[];
|
403 | };
|
404 | }
|