1 |
|
2 |
|
3 |
|
4 |
|
5 | import {Axis} from "./axis";
|
6 | import {ChartTypes, d3Selection, DataItem, GaugeTypes, PrimitiveArray} from "./types";
|
7 | import Bubblecompare from "./plugin/bubblecompare/index";
|
8 | import Stanford from "./plugin/stanford/index";
|
9 | import TextOverlap from "./plugin/textoverlap/index";
|
10 | import {Chart} from "./chart";
|
11 | import {IData} from "../src/ChartInternal/data/IData";
|
12 |
|
13 | export interface ChartOptions {
|
14 | |
15 |
|
16 |
|
17 |
|
18 |
|
19 | bindto?: string | HTMLElement | d3Selection | null | {
|
20 | |
21 |
|
22 |
|
23 | element?: string | HTMLElement | d3Selection;
|
24 |
|
25 | |
26 |
|
27 |
|
28 |
|
29 | classname?: string;
|
30 | };
|
31 |
|
32 | |
33 |
|
34 |
|
35 | background?: {
|
36 | |
37 |
|
38 |
|
39 | class?: string;
|
40 |
|
41 | |
42 |
|
43 |
|
44 | color?: string;
|
45 |
|
46 | |
47 |
|
48 |
|
49 | imgUrl?: string;
|
50 | };
|
51 |
|
52 | size?: {
|
53 | |
54 |
|
55 |
|
56 |
|
57 |
|
58 | width?: number;
|
59 |
|
60 | |
61 |
|
62 |
|
63 |
|
64 | height?: number;
|
65 | };
|
66 |
|
67 | padding?: {
|
68 | |
69 |
|
70 |
|
71 | top?: number;
|
72 |
|
73 | |
74 |
|
75 |
|
76 | right?: number;
|
77 |
|
78 | |
79 |
|
80 |
|
81 |
|
82 | bottom?: number;
|
83 |
|
84 | |
85 |
|
86 |
|
87 | left?: number;
|
88 | };
|
89 |
|
90 | resize?: {
|
91 | |
92 |
|
93 |
|
94 | auto?: boolean;
|
95 | };
|
96 |
|
97 | color?: {
|
98 | |
99 |
|
100 |
|
101 |
|
102 |
|
103 | pattern?: Array<(string|null)>;
|
104 |
|
105 | |
106 |
|
107 |
|
108 | threshold?: {
|
109 | |
110 |
|
111 |
|
112 |
|
113 | unit?: string;
|
114 |
|
115 | |
116 |
|
117 |
|
118 | values?: number[];
|
119 |
|
120 | |
121 |
|
122 |
|
123 |
|
124 | max?: number;
|
125 | };
|
126 |
|
127 | |
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 | tiles?: (this: Chart) => SVGPathElement[];
|
135 |
|
136 | |
137 |
|
138 |
|
139 | onover?: string | { [key: string]: string } | ((this: Chart, d: DataItem) => string);
|
140 | };
|
141 |
|
142 | interaction?: {
|
143 | /**
|
144 | * Indicate if the chart should have interactions.
|
145 | * If false is set, all of interactions (showing/hiding tooltip, selection, mouse events, etc) will be disabled.
|
146 | */
|
147 | enabled?: boolean;
|
148 |
|
149 | /**
|
150 | * Make brighter for the selected area (ex. 'pie' type data selected area)
|
151 | */
|
152 | brighten?: boolean;
|
153 |
|
154 | inputType?: {
|
155 | /**
|
156 | * enable or disable mouse interaction
|
157 | */
|
158 | mouse?: boolean;
|
159 |
|
160 | /**
|
161 | * enable or disable touch interaction
|
162 | */
|
163 | touch?: boolean | {
|
164 | /**
|
165 | * enable or disable to call event.preventDefault on touchstart & touchmove event.
|
166 | * It's usually used to prevent document scrolling.
|
167 | */
|
168 | preventDefault?: boolean | number;
|
169 | };
|
170 | }
|
171 | };
|
172 |
|
173 | transition?: {
|
174 | /**
|
175 | * Set duration of transition (in milliseconds) for chart animation.
|
176 | * Note: If 0 or null set, transition will be skipped. So, this makes initial rendering faster especially in case you have a lot of data.
|
177 | */
|
178 | duration?: number;
|
179 | };
|
180 |
|
181 | data?: Data;
|
182 |
|
183 | axis?: Axis;
|
184 |
|
185 | grid?: Grid;
|
186 |
|
187 | /**
|
188 | * Show rectangles inside the chart.
|
189 | * This option accepts array including object that has axis, start, end and class. The keys start, end and class are optional.
|
190 | * axis must be x, y or y2. start and end should be the value where regions start and end. If not specified, the edge values will be used.
|
191 | * If timeseries x axis, date string, Date object and unixtime integer can be used. If class is set, the region element will have it as class.
|
192 | */
|
193 | regions?: RegionOptions[];
|
194 |
|
195 | legend?: LegendOptions;
|
196 |
|
197 | tooltip?: TooltipOptions;
|
198 |
|
199 | subchart?: SubchartOptions;
|
200 |
|
201 | zoom?: ZoomOptions;
|
202 |
|
203 | point?: PointOptions;
|
204 |
|
205 | line?: {
|
206 | /**
|
207 | * Set if null data point will be connected or not.
|
208 | * If true set, the region of null data will be connected without any data point.
|
209 | * If false set, the region of null data will not be connected and get empty.
|
210 | */
|
211 | connectNull?: boolean;
|
212 |
|
213 | /**
|
214 | * Change step type for step chart.
|
215 | * 'step', 'step-before' and 'step-after' can be used.
|
216 | */
|
217 | step?: {
|
218 | type?: "step" | "step-before" | "step-after";
|
219 | };
|
220 |
|
221 | /**
|
222 | * Set if min or max value will be 0 on line chart.
|
223 | */
|
224 | zerobased?: boolean;
|
225 |
|
226 | /**
|
227 | * If set, used to set a css class on each line.
|
228 | */
|
229 | classes?: string[];
|
230 |
|
231 | /**
|
232 | * Set to false to not draw points on linecharts. Or pass an array of line ids to draw points for.
|
233 | */
|
234 | point?: boolean | string[];
|
235 | };
|
236 |
|
237 | scatter?: {
|
238 | /**
|
239 | * Set if min or max value will be 0 on scatter chart.
|
240 | */
|
241 | zerobased?: boolean;
|
242 | };
|
243 |
|
244 | area?: {
|
245 | /**
|
246 | * Set background area above the data chart line.
|
247 | */
|
248 | above?: boolean;
|
249 |
|
250 | /**
|
251 | * Set area node to be positioned over line node.
|
252 | */
|
253 | front?: boolean;
|
254 |
|
255 | /**
|
256 | * Set the linear gradient on area.<br><br>
|
257 | * Or customize by giving below object value:
|
258 | * - x {Array}: `x1`, `x2` value
|
259 | * - y {Array}: `y1`, `y2` value
|
260 | * - stops {Array}: Each item should be having `[offset, stop-color, stop-opacity]` values.
|
261 | */
|
262 | linearGradient?: boolean | AreaLinearGradientOptions;
|
263 |
|
264 | /**
|
265 | * Set if min or max value will be 0 on area chart.
|
266 | */
|
267 | zerobased?: boolean;
|
268 | };
|
269 |
|
270 | bar?: {
|
271 | /**
|
272 | * Change the width of bar chart. If ratio is specified, change the width of bar chart by ratio.
|
273 | */
|
274 | width?: number | {
|
275 | /**
|
276 | * Set the width of each bar by ratio
|
277 | */
|
278 | ratio: number;
|
279 |
|
280 | /**
|
281 | * Set max width of each bar
|
282 | */
|
283 | max?: number;
|
284 | } | {
|
285 | /**
|
286 | * Set the width option for specific dataset
|
287 | */
|
288 | [key: string]: {
|
289 | ratio: number;
|
290 | max: number;
|
291 | }
|
292 | };
|
293 |
|
294 | headers?: Array<{ [key: string]: string; }>;
|
295 |
|
296 | /**
|
297 | * Set threshold ratio to show/hide labels.
|
298 | */
|
299 | label?: {
|
300 | threshold?: number;
|
301 | }
|
302 |
|
303 | /**
|
304 | * Set if min or max value will be 0 on bar chart.
|
305 | */
|
306 | zerobased?: boolean;
|
307 |
|
308 | /**
|
309 | * Set space between bars in bar charts
|
310 | */
|
311 | space?: number;
|
312 |
|
313 | /**
|
314 | * The padding pixel value between each bar.
|
315 | */
|
316 | padding?: number;
|
317 |
|
318 | /**
|
319 | * Set the radius of bar edge in pixel.
|
320 | * - NOTE: Only for non-stacking bars.
|
321 | */
|
322 | radius?: number | {
|
323 | /**
|
324 | * Set the radius ratio of bar edge in relative the bar's width.
|
325 | */
|
326 | ratio?: number;
|
327 | };
|
328 |
|
329 | /**
|
330 | * The senstivity offset value for interaction boundary.
|
331 | */
|
332 | sensitivity?: number;
|
333 | };
|
334 |
|
335 | bubble?: {
|
336 | /**
|
337 | * Set the max bubble radius value
|
338 | */
|
339 | maxR?: ((this: Chart, d: {}) => number) | number;
|
340 |
|
341 | /**
|
342 | * Set if min or max value will be 0 on bubble chart.
|
343 | */
|
344 | zerobased?: boolean;
|
345 | };
|
346 |
|
347 | candlestick?: {
|
348 | /**
|
349 | * Change the width of bar chart. If ratio is specified, change the width of bar chart by ratio.
|
350 | */
|
351 | width?: number | {
|
352 | /**
|
353 | * Set the width of each bar by ratio
|
354 | */
|
355 | ratio: number;
|
356 |
|
357 | /**
|
358 | * Set max width of each bar
|
359 | */
|
360 | max?: number;
|
361 | } | {
|
362 | /**
|
363 | * Set the width option for specific dataset
|
364 | */
|
365 | [key: string]: {
|
366 | ratio: number;
|
367 | max: number;
|
368 | }
|
369 | };
|
370 |
|
371 | color?: {
|
372 | /**
|
373 | * Change down value color.
|
374 | */
|
375 | down: string | {
|
376 | /**
|
377 | * Change down value color for indicated dataset only.
|
378 | */
|
379 | [key: string]: string;
|
380 | }
|
381 | }
|
382 | };
|
383 |
|
384 | radar?: {
|
385 | axis?: {
|
386 | /**
|
387 | * The max value of axis. If not given, it'll take the max value from the given data.
|
388 | */
|
389 | max?: number;
|
390 |
|
391 | line?: {
|
392 | /**
|
393 | * Show or hide axis line.
|
394 | */
|
395 | show?: boolean;
|
396 | };
|
397 |
|
398 | text?: {
|
399 | position?: {
|
400 | /**
|
401 | * x coordinate position, relative the original
|
402 | */
|
403 | x?: number;
|
404 |
|
405 | /**
|
406 | * y coordinate position, relative the original
|
407 | */
|
408 | y?: number;
|
409 | };
|
410 |
|
411 | /**
|
412 | * Show or hide axis text.
|
413 | */
|
414 | show?: boolean;
|
415 | };
|
416 | };
|
417 |
|
418 | direction?: {
|
419 | /**
|
420 | * Set the direction to be drawn.
|
421 | */
|
422 | clockwise?: boolean;
|
423 | };
|
424 |
|
425 | level?: {
|
426 | /**
|
427 | * Set the level depth.
|
428 | */
|
429 | depth?: number;
|
430 |
|
431 | /**
|
432 | * Show or hide level.
|
433 | */
|
434 | show?: boolean;
|
435 |
|
436 | text?: {
|
437 | /**
|
438 | * Set format function for the level value.
|
439 | */
|
440 | format?: (this: Chart, x: string) => string;
|
441 |
|
442 | |
443 |
|
444 |
|
445 | show?: boolean;
|
446 | };
|
447 | }
|
448 |
|
449 | size?: {
|
450 | |
451 |
|
452 |
|
453 | ratio?: number;
|
454 | }
|
455 | };
|
456 |
|
457 | pie?: {
|
458 | label?: {
|
459 | |
460 |
|
461 |
|
462 | show?: boolean;
|
463 |
|
464 | |
465 |
|
466 |
|
467 | threshold?: number;
|
468 |
|
469 | |
470 |
|
471 |
|
472 | format?(this: Chart, value: number, ratio: number, id: string): string;
|
473 |
|
474 | |
475 |
|
476 |
|
477 | ratio?: ((this: Chart, d: DataItem, radius: number, h: number) => void) | number
|
478 | };
|
479 |
|
480 | /**
|
481 | * Enable or disable expanding pie pieces.
|
482 | */
|
483 | expand?: boolean | {
|
484 | /**
|
485 | * Set expand transition time in ms.
|
486 | */
|
487 | duration?: number;
|
488 |
|
489 | /**
|
490 | * Set expand rate.
|
491 | */
|
492 | rate?: number;
|
493 | };
|
494 |
|
495 | /**
|
496 | * Sets the inner radius of pie arc.
|
497 | */
|
498 | innerRadius?: number | {
|
499 | [key: string]: number
|
500 | };
|
501 |
|
502 | /**
|
503 | * Sets the outer radius of pie arc.
|
504 | */
|
505 | outerRadius?: number | {
|
506 | [key: string]: number
|
507 | };
|
508 |
|
509 | /**
|
510 | * Set padding between data.
|
511 | */
|
512 | padAngle?: number;
|
513 |
|
514 | /**
|
515 | * Sets the gap between pie arcs.
|
516 | */
|
517 | padding?: number;
|
518 |
|
519 | /**
|
520 | * Set starting angle where data draws.
|
521 | */
|
522 | startingAngle?: number;
|
523 | };
|
524 |
|
525 | donut?: {
|
526 | label?: {
|
527 | /**
|
528 | * Show or hide label on each donut piece.
|
529 | */
|
530 | show?: boolean;
|
531 |
|
532 | /**
|
533 | * Set formatter for the label on each donut piece.
|
534 | */
|
535 | format?: (this: Chart, value: number, ratio: number, id: string) => string;
|
536 |
|
537 | |
538 |
|
539 |
|
540 | ratio?: number | ((this: Chart, d: DataItem, radius: number, h: number) => number)
|
541 |
|
542 | /**
|
543 | * Set threshold ratio to show/hide labels.
|
544 | */
|
545 | threshold?: number;
|
546 | };
|
547 |
|
548 | /**
|
549 | * Enable or disable expanding donut pieces.
|
550 | */
|
551 | expand?: boolean | {
|
552 | /**
|
553 | * Set expand transition time in ms.
|
554 | */
|
555 | duration?: number;
|
556 |
|
557 | /**
|
558 | * Set expand rate.
|
559 | */
|
560 | rate?: number;
|
561 | };
|
562 |
|
563 | /**
|
564 | * Set padding between data.
|
565 | */
|
566 | padAngle?: number;
|
567 |
|
568 | /**
|
569 | * Set starting angle where data draws.
|
570 | */
|
571 | startingAngle?: number;
|
572 |
|
573 | /**
|
574 | * Set width of donut chart.
|
575 | */
|
576 | width?: number;
|
577 |
|
578 | /**
|
579 | * Set title of donut chart.
|
580 | */
|
581 | title?: string;
|
582 | };
|
583 |
|
584 | gauge?: {
|
585 | /**
|
586 | * Set background color. (The `.bb-chart-arcs-background` element)
|
587 | */
|
588 | background?: string;
|
589 |
|
590 | /**
|
591 | * Whether this should be displayed
|
592 | * as a full circle instead of a
|
593 | * half circle.
|
594 | */
|
595 | fullCircle?: boolean;
|
596 |
|
597 | label?: {
|
598 | /**
|
599 | * Show or hide label on gauge.
|
600 | */
|
601 | show?: boolean;
|
602 |
|
603 | /**
|
604 | * Set formatter for the label on gauge.
|
605 | */
|
606 | format?(this: Chart, value: any, ratio: number): string;
|
607 |
|
608 | /**
|
609 | * Set customized min/max label text.
|
610 | */
|
611 | extents?(this: Chart, value: number, isMax: boolean): string | number;
|
612 |
|
613 | /**
|
614 | * Set threshold ratio to show/hide labels.
|
615 | */
|
616 | threshold?: number;
|
617 | };
|
618 |
|
619 | /**
|
620 | * Enable or disable expanding gauge pieces.
|
621 | */
|
622 | expand?: boolean | {
|
623 | /**
|
624 | * Set expand transition time in ms.
|
625 | */
|
626 | duration?: number;
|
627 |
|
628 | /**
|
629 | * Set expand rate.
|
630 | */
|
631 | rate?: number;
|
632 | };
|
633 |
|
634 | /**
|
635 | * Set type of the gauge.
|
636 | */
|
637 | type?: GaugeTypes;
|
638 |
|
639 | /**
|
640 | * Set min value of the gauge.
|
641 | */
|
642 | min?: number;
|
643 |
|
644 | /**
|
645 | * Set max value of the gauge.
|
646 | */
|
647 | max?: number;
|
648 |
|
649 | /**
|
650 | * Set starting angle where data draws.
|
651 | */
|
652 | startingAngle?: number;
|
653 |
|
654 | /**
|
655 | * Set title of gauge chart. Use `\n` character to enter line break.
|
656 | */
|
657 | title?: string;
|
658 |
|
659 | /**
|
660 | * Set units of the gauge.
|
661 | */
|
662 | units?: string;
|
663 |
|
664 | /**
|
665 | * Set width of gauge chart.
|
666 | */
|
667 | width?: number;
|
668 |
|
669 | /**
|
670 | * Set minimal width of gauge arcs until the innerRadius disappears.
|
671 | */
|
672 | arcs?: {
|
673 | minWidth?: number;
|
674 | };
|
675 |
|
676 | /**
|
677 | * Set the length of the arc to be drawn in percent from -100 to 100.
|
678 | * Negative value will draw the arc **counterclockwise**.
|
679 | */
|
680 | arcLength?: number;
|
681 | };
|
682 |
|
683 | spline?: {
|
684 | interpolation?: {
|
685 | /**
|
686 | * Set custom spline interpolation
|
687 | */
|
688 | type?: "basis"
|
689 | | "basis-open"
|
690 | | "bundle"
|
691 | | "cardinal"
|
692 | | "cardinal-closed"
|
693 | | "cardinal-open"
|
694 | | "catmull-rom"
|
695 | | "catmull-rom-closed"
|
696 | | "catmull-rom-open"
|
697 | | "monotone-x"
|
698 | | "monotone-y"
|
699 | | "natural"
|
700 | | "linear-closed"
|
701 | | "linear"
|
702 | | "step"
|
703 | | "step-after"
|
704 | | "step-before"
|
705 | };
|
706 | };
|
707 |
|
708 | /**
|
709 | * Set a callback to execute when the chart is initialized.
|
710 | */
|
711 | oninit?(this: Chart): void;
|
712 |
|
713 | /**
|
714 | * Set a callback to execute after the chart is initialized
|
715 | */
|
716 | onafterinit?(this: Chart): void;
|
717 |
|
718 | /**
|
719 | * Set a callback to execute before the chart is initialized
|
720 | */
|
721 | onbeforeinit?(this: Chart): void;
|
722 |
|
723 | /**
|
724 | * Set a callback which is executed when the chart is rendered. Basically, this callback will be called in each time when the chart is redrawed.
|
725 | */
|
726 | onrendered?(this: Chart): void;
|
727 |
|
728 | /**
|
729 | * Set a callback to execute when mouse/touch enters the chart.
|
730 | */
|
731 | onover?(this: Chart): void;
|
732 |
|
733 | /**
|
734 | * Set a callback to execute when mouse/touch leaves the chart.
|
735 | */
|
736 | onout?(this: Chart): void;
|
737 |
|
738 | /**
|
739 | * Set a callback to execute when user resizes the screen.
|
740 | */
|
741 | onresize?(this: Chart): void;
|
742 |
|
743 | /**
|
744 | * Set a callback to execute when screen resize finished.
|
745 | */
|
746 | onresized?(this: Chart): void;
|
747 |
|
748 | /**
|
749 | * Set 'clip-path' attribute for chart element.
|
750 | * When is false, chart node element is positioned after the axis node in DOM tree hierarchy.
|
751 | * Is to make chart element positioned over axis element.
|
752 | */
|
753 | clipPath?: boolean;
|
754 |
|
755 | /**
|
756 | * Set plugins
|
757 | */
|
758 | plugins?: Array<(Bubblecompare | Stanford | TextOverlap)>;
|
759 |
|
760 | /**
|
761 | * Control the render timing
|
762 | */
|
763 | render?: {
|
764 | /**
|
765 | * Make to not render at initialization (enabled by default when bind element's visibility is hidden).
|
766 | */
|
767 | lazy?: boolean;
|
768 |
|
769 | /**
|
770 | * Observe bind element's visibility(`display` or `visiblity` inline css property or class value) & render when is visible automatically (for IEs, only works IE11+).
|
771 | * When set to **false**, call [`.flush()`](./Chart.html#flush) to render.
|
772 | */
|
773 | observe?: boolean;
|
774 | };
|
775 |
|
776 | title?: {
|
777 | /**
|
778 | * Set the title text.
|
779 | * If contains \n, it's used as line break allowing multiline title.
|
780 | */
|
781 | text?: string;
|
782 |
|
783 | padding?: {
|
784 | /**
|
785 | * Top padding value.
|
786 | */
|
787 | top?: number;
|
788 |
|
789 | /**
|
790 | * Bottom padding value.
|
791 | */
|
792 | bottom?: number;
|
793 |
|
794 | /**
|
795 | * Right padding value.
|
796 | */
|
797 | right?: number;
|
798 |
|
799 | /**
|
800 | * Left padding value.
|
801 | */
|
802 | left?: number;
|
803 | };
|
804 |
|
805 | /**
|
806 | * Set the position. Default value is 'center'
|
807 | */
|
808 | position?: "center" | "right" | "left";
|
809 | };
|
810 | }
|
811 |
|
812 | export interface AreaLinearGradientOptions {
|
813 | /**
|
814 | * x1, x2 attributes
|
815 | */
|
816 | x?: [number, number];
|
817 |
|
818 | /**
|
819 | * y1, y2 attributes
|
820 | */
|
821 | y?: [number, number];
|
822 |
|
823 | /**
|
824 | * The ramp of colors to use on a gradient
|
825 | *
|
826 | * offset, stop-color, stop-opacity
|
827 | * - setting 'null' for stop-color, will set its original data color
|
828 | * - setting 'function' for stop-color, will pass data id as argument. It should return color string or null value
|
829 | */
|
830 | stops?: Array<[number, string | null | ((this: Chart, id: string) => string), number]>;
|
831 | }
|
832 |
|
833 | export interface RegionOptions {
|
834 | axis?: string;
|
835 | start?: string | number | Date;
|
836 | end?: string | number | Date;
|
837 | class?: string;
|
838 | }
|
839 |
|
840 | export interface LegendOptions {
|
841 | /**
|
842 | * Show or hide legend.
|
843 | */
|
844 | show?: boolean;
|
845 |
|
846 | /**
|
847 | * Hide legend
|
848 | * If true given, all legend will be hidden. If string or array given, only the legend that has the id will be hidden.
|
849 | */
|
850 | hide?: boolean | string[] | string;
|
851 |
|
852 | /**
|
853 | * Change the position of legend.
|
854 | * Currently bottom, right and inset are supported.
|
855 | */
|
856 | position?: string;
|
857 |
|
858 | /**
|
859 | * Change inset legend attributes.
|
860 | * This option accepts object that has the keys anchor, x, y and step.
|
861 | * - anchor: decides the position of the legend. These anchors are available: top-left, top-right, bottom-left, bottom-right
|
862 | * - x and y: set the position of the legend based on the anchor.
|
863 | * - step: defines the max step the lagend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns).
|
864 | */
|
865 | inset?: {
|
866 | anchor?: string;
|
867 | x?: number;
|
868 | y?: number;
|
869 | step?: number;
|
870 | };
|
871 | /**
|
872 | * Padding between legend elements.
|
873 | */
|
874 | padding?: number;
|
875 |
|
876 | item?: {
|
877 | /**
|
878 | * Tile settings for legend color display.
|
879 | */
|
880 | tile?: {
|
881 | /**
|
882 | * Tile width.
|
883 | */
|
884 | width?: number;
|
885 |
|
886 | /**
|
887 | * Tile height
|
888 | */
|
889 | height?: number;
|
890 | };
|
891 | /**
|
892 | * Set click event handler to the legend item.
|
893 | */
|
894 | onclick?(this: Chart, id: DataItem): void;
|
895 |
|
896 | /**
|
897 | * Set mouseover event handler to the legend item.
|
898 | */
|
899 | onover?(this: Chart, id: DataItem): void;
|
900 |
|
901 | /**
|
902 | * Set mouseout event handler to the legend item.
|
903 | */
|
904 | onout?(this: Chart, id: DataItem): void;
|
905 | };
|
906 |
|
907 | /**
|
908 | * Set legend templates
|
909 | */
|
910 | contents?: {
|
911 | /**
|
912 | * Set CSS selector or element reference to bind legend items.
|
913 | */
|
914 | bindto?: string | HTMLElement;
|
915 |
|
916 | /**
|
917 | * Set item's template.
|
918 | * If set string value, within template the 'color' and 'title' can be replaced using template-like syntax string:
|
919 | * {=COLOR}: data color value
|
920 | * {=TITLE}: data title value
|
921 | * If set function value, will pass following arguments to the given function:
|
922 | * title {String}: data's id value
|
923 | * color {String}: color string
|
924 | * data {Array}: data array
|
925 | */
|
926 | template?: ((this: Chart, title: string, color: string, data: DataItem[]) => void) | string;
|
927 | };
|
928 |
|
929 | /**
|
930 | * Whether to use custom points in legend.
|
931 | */
|
932 | usePoint?: boolean;
|
933 | }
|
934 |
|
935 | export interface TooltipOptions {
|
936 | /**
|
937 | * Show or hide tooltip.
|
938 | */
|
939 | show?: boolean;
|
940 |
|
941 | /**
|
942 | * Make tooltip keep showing not hiding on interaction.
|
943 | */
|
944 | doNotHide?: boolean;
|
945 |
|
946 | /**
|
947 | * Set if tooltip is grouped or not for the data points.
|
948 | */
|
949 | grouped?: boolean;
|
950 | format?: {
|
951 | /**
|
952 | * Set format for the title of tooltip. Specified function receives x of the data point to show.
|
953 | */
|
954 | title?(this: Chart, x: any): string;
|
955 |
|
956 | /**
|
957 | * Set format for the name of each data in tooltip.
|
958 | * Specified function receives name, ratio, id and index of the data point to show.
|
959 | * ratio will be undefined if the chart is not donut/pie/gauge.
|
960 | */
|
961 | name?(this: Chart, name: string, ratio: number, id: string, index: number): string;
|
962 |
|
963 | /**
|
964 | * Set format for the value of each data in tooltip.
|
965 | * Specified function receives name, ratio, id and index of the data point to show.
|
966 | * ratio will be undefined if the chart is not donut/pie/gauge.
|
967 | * If undefined returned, the row of that value will be skipped.
|
968 | */
|
969 | value?(this: Chart, value: any, ratio: number, id: string, index: number): string;
|
970 | };
|
971 | /**
|
972 | * Set tooltip values order
|
973 | * Available Values: desc, asc, any[], function (data1, data2) { ... }, null
|
974 | */
|
975 | order?: string | any[] | ((this: Chart, data1: any, data2: any) => number) | null;
|
976 |
|
977 | /**
|
978 | * Set custom position function for the tooltip.
|
979 | * This option can be used to modify the tooltip position by returning object that has top and left.
|
980 | */
|
981 | position?: ((
|
982 | this: Chart,
|
983 | data: any,
|
984 | width: number,
|
985 | height: number,
|
986 | element: any
|
987 | ) => { top: number; left: number });
|
988 |
|
989 | /**
|
990 | * Set custom HTML for the tooltip.
|
991 | * Specified function receives data, defaultTitleFormat, defaultValueFormat and color of the data point to show.
|
992 | * If tooltip.grouped is true, data includes multiple data points.
|
993 | */
|
994 | contents?: ((
|
995 | this: Chart,
|
996 | data: any,
|
997 | defaultTitleFormat: string,
|
998 | defaultValueFormat: string,
|
999 | color: any
|
1000 | ) => string) | {
|
1001 | /**
|
1002 | * Set CSS selector or element reference to bind tooltip.
|
1003 | */
|
1004 | bindto?: string | HTMLElement;
|
1005 |
|
1006 | /**
|
1007 | * Within template, below syntax will be replaced using template-like syntax string:
|
1008 | * - {{ ... }}: the doubly curly brackets indicate loop block for data rows
|
1009 | * - {=CLASS_TOOLTIP}: default tooltip class name `bb-tooltip`.
|
1010 | * - {=CLASS_TOOLTIP_NAME}: default tooltip data class name (ex. `bb-tooltip-name-data1`)
|
1011 | * - {=TITLE}: title value
|
1012 | * - {=COLOR}: data color
|
1013 | * - {=VALUE}: data value
|
1014 | */
|
1015 | template?: string;
|
1016 |
|
1017 | /**
|
1018 | * Set additional text content within data loop, using template syntax.
|
1019 | * - NOTE: It should contain `{ key: Array, ... }` value
|
1020 | * - 'key' name is used as substitution within template as '{=KEY}'
|
1021 | * - The value array length should match with the data length
|
1022 | */
|
1023 | text?: { [key: string]: string[] | number[] }
|
1024 | };
|
1025 |
|
1026 | init?: {
|
1027 | /**
|
1028 | * Show tooltip at the initialization.
|
1029 | */
|
1030 | show?: boolean;
|
1031 |
|
1032 | /**
|
1033 | * Set x Axis index to be shown at the initialization.
|
1034 | */
|
1035 | x?: number;
|
1036 |
|
1037 | /**
|
1038 | * Set the position of tooltip at the initialization.
|
1039 | */
|
1040 | position?: {
|
1041 | top?: string;
|
1042 | left?: string;
|
1043 | }
|
1044 | };
|
1045 |
|
1046 | /**
|
1047 | * Set a callback that will be invoked before the tooltip is shown.
|
1048 | */
|
1049 | onshow?(this: Chart, selectedData: DataItem): void;
|
1050 |
|
1051 | /**
|
1052 | * Set a callback that will be invoked after the tooltip is shown
|
1053 | */
|
1054 | onshown?(this: Chart, selectedData: DataItem): void;
|
1055 |
|
1056 | /**
|
1057 | * Set a callback that will be invoked before the tooltip is hidden.
|
1058 | */
|
1059 | onhide?(this: Chart, selectedData: DataItem): void;
|
1060 |
|
1061 | /**
|
1062 | * Set a callback that will be invoked after the tooltip is hidden.
|
1063 | */
|
1064 | onhidden?(this: Chart, selectedData: DataItem): void;
|
1065 |
|
1066 | /**
|
1067 | * Set if tooltips on all visible charts with like x points are shown together when one is shown.
|
1068 | */
|
1069 | linked?: boolean | {
|
1070 | /**
|
1071 | * Groping name for linked tooltip.
|
1072 | * If specified, linked tooltip will be groped interacting to be worked only with the same name.
|
1073 | */
|
1074 | name?: string;
|
1075 | };
|
1076 | }
|
1077 |
|
1078 | export interface SubchartOptions {
|
1079 | /**
|
1080 | * Show sub chart on the bottom of the chart.
|
1081 | */
|
1082 | show?: boolean;
|
1083 | size?: {
|
1084 | /**
|
1085 | * Change the height of the subchart.
|
1086 | */
|
1087 | height: number;
|
1088 | };
|
1089 |
|
1090 | axis?: {
|
1091 | x?: {
|
1092 | /**
|
1093 | * Show or hide x axis.
|
1094 | */
|
1095 | show?: boolean;
|
1096 | tick?: {
|
1097 | /**
|
1098 | * Show or hide x axis tick line.
|
1099 | */
|
1100 | show?: boolean;
|
1101 | text?: {
|
1102 | /**
|
1103 | * Show or hide x axis tick text.
|
1104 | */
|
1105 | show?: boolean;
|
1106 | };
|
1107 | };
|
1108 | };
|
1109 | };
|
1110 |
|
1111 | /**
|
1112 | * Set callback for brush event.
|
1113 | * Specified function receives the current zoomed x domain.
|
1114 | */
|
1115 | onbrush?(this: Chart, domain: any): void;
|
1116 | }
|
1117 |
|
1118 | export interface ZoomOptions {
|
1119 | /**
|
1120 | * Enable zooming.
|
1121 | */
|
1122 | enabled?: boolean;
|
1123 |
|
1124 | /**
|
1125 | * Set zoom interaction type.
|
1126 | */
|
1127 | type?: "wheel" | "drag";
|
1128 |
|
1129 | /**
|
1130 | * Enable to rescale after zooming.
|
1131 | * If true set, y domain will be updated according to the zoomed region.
|
1132 | */
|
1133 | rescale?: boolean;
|
1134 |
|
1135 | /**
|
1136 | * Change zoom extent.
|
1137 | */
|
1138 | extent?: [number, number];
|
1139 |
|
1140 | x?: {
|
1141 | /**
|
1142 | * Set x Axis minimum zoom range
|
1143 | */
|
1144 | min?: number | Date;
|
1145 |
|
1146 | /**
|
1147 | * Set x Axis maximum zoom range
|
1148 | */
|
1149 | max?: number | Date;
|
1150 | };
|
1151 |
|
1152 | /**
|
1153 | * Set callback that is called when zooming starts.
|
1154 | * Specified function receives the zoom event.
|
1155 | */
|
1156 | onzoomstart?(this: Chart, event: Event): void;
|
1157 |
|
1158 | /**
|
1159 | * Set callback that is called when the chart is zooming.
|
1160 | * Specified function receives the zoomed domain.
|
1161 | */
|
1162 | onzoom?(this: Chart, domain: any): void;
|
1163 |
|
1164 | /**
|
1165 | * Set callback that is called when zooming ends.
|
1166 | * Specified function receives the zoomed domain.
|
1167 | */
|
1168 | onzoomend?(this: Chart, domain: any): void;
|
1169 |
|
1170 | /**
|
1171 | * Set to display zoom reset button for 'drag' type zoom
|
1172 | */
|
1173 | resetButton?: boolean | {
|
1174 | /**
|
1175 | * Set callback when clicks the reset button. The callback will receive reset button element reference as argument.
|
1176 | */
|
1177 | onclick?(this: Chart, button: HTMLElement): void;
|
1178 |
|
1179 | /**
|
1180 | * Text value for zoom reset button.
|
1181 | */
|
1182 | text?: string;
|
1183 | };
|
1184 | }
|
1185 |
|
1186 | export interface PointOptions {
|
1187 | /**
|
1188 | * Whether to show each point in line.
|
1189 | */
|
1190 | show?: boolean;
|
1191 |
|
1192 | /**
|
1193 | * The radius size of each point.
|
1194 | */
|
1195 | r?: number | ((this: Chart, d: DataItem) => number);
|
1196 |
|
1197 | focus?: {
|
1198 | expand?: {
|
1199 | /**
|
1200 | * Whether to expand each point on focus.
|
1201 | */
|
1202 | enabled?: boolean;
|
1203 |
|
1204 | /**
|
1205 | * The radius size of each point on focus.
|
1206 | */
|
1207 | r?: number;
|
1208 | };
|
1209 |
|
1210 | /**
|
1211 | * Show point only when is focused.
|
1212 | */
|
1213 | only?: boolean;
|
1214 | };
|
1215 |
|
1216 | /**
|
1217 | * Set point opacity value.
|
1218 | */
|
1219 | opacity?: number | null;
|
1220 |
|
1221 | select?: {
|
1222 | /**
|
1223 | * The radius size of each point on selected.
|
1224 | */
|
1225 | r?: number;
|
1226 | };
|
1227 |
|
1228 | /**
|
1229 | * The senstivity value for interaction boundary.
|
1230 | */
|
1231 | sensitivity?: number;
|
1232 |
|
1233 | /**
|
1234 | * The type of point to be drawn
|
1235 | * - NOTE: If chart has 'bubble' type, only circle can be used.
|
1236 | * For IE, non circle point expansions are not supported due to lack of transform support.
|
1237 | *
|
1238 | * - Available Values:
|
1239 | * - circle
|
1240 | * - rectangle
|
1241 | */
|
1242 | type?: string;
|
1243 |
|
1244 | /**
|
1245 | * The type of point or svg shape as string, to be drawn for each line
|
1246 | * - NOTE:
|
1247 | * This is an experimental feature and can have some unexpected behaviors.
|
1248 | * If chart has 'bubble' type, only circle can be used.
|
1249 | * For IE, non circle point expansions are not supported due to lack of transform support.
|
1250 | *
|
1251 | * - Available Values:
|
1252 | * - circle
|
1253 | * - rectangle
|
1254 | * - svg shape tag interpreted as string (ex. <polygon points='2.5 0 0 5 5 5'></polygon>)
|
1255 | */
|
1256 | pattern?: string[];
|
1257 | }
|
1258 |
|
1259 | export interface Grid {
|
1260 | /**
|
1261 | * Set 'grid & focus lines' to be positioned over grid lines and chart elements.
|
1262 | */
|
1263 | front?: boolean;
|
1264 |
|
1265 | focus?: {
|
1266 | /**
|
1267 | * Show edged focus grid line.
|
1268 | * **NOTE:** Available when [`tooltip.grouped=false`](#.tooltip) option is set.
|
1269 | */
|
1270 | edge?: boolean;
|
1271 |
|
1272 | /**
|
1273 | * Show grids when focus.
|
1274 | */
|
1275 | show?: boolean;
|
1276 |
|
1277 | /**
|
1278 | * Show y coordinate focus grid line.
|
1279 | * **NOTE:** Available when [`tooltip.grouped=false`](#.tooltip) option is set.
|
1280 | */
|
1281 | y?: boolean;
|
1282 | };
|
1283 |
|
1284 | lines?: {
|
1285 | /**
|
1286 | * Set grid lines to be positioned over chart elements.
|
1287 | */
|
1288 | front?: boolean;
|
1289 | };
|
1290 |
|
1291 | x?: {
|
1292 | /**
|
1293 | * Show grids along x axis.
|
1294 | */
|
1295 | show?: boolean;
|
1296 |
|
1297 | /**
|
1298 | * Show additional grid lines along x axis.
|
1299 | * This option accepts array including object that has value, text, position and class.
|
1300 | * text, position and class are optional. For position, start, middle and end (default) are available.
|
1301 | * If x axis is category axis, value can be category name.
|
1302 | * If x axis is timeseries axis, value can be date string, Date object and unixtime integer.
|
1303 | */
|
1304 | lines?: LineOptions[];
|
1305 | };
|
1306 |
|
1307 | y?: {
|
1308 | /**
|
1309 | * Show grids along y axis.
|
1310 | */
|
1311 | show?: boolean;
|
1312 |
|
1313 | /**
|
1314 | * Show additional grid lines along y axis.
|
1315 | * This option accepts array including object that has value, text, position and class.
|
1316 | */
|
1317 | lines?: LineOptions[];
|
1318 |
|
1319 | /**
|
1320 | * Number of y grids to be shown.
|
1321 | */
|
1322 | ticks?: number;
|
1323 | };
|
1324 | }
|
1325 |
|
1326 | export interface LineOptions {
|
1327 | value: string | number | Date;
|
1328 | text?: string;
|
1329 | axis?: string;
|
1330 | position?: string;
|
1331 | class?: string;
|
1332 | }
|
1333 |
|
1334 | export interface Data {
|
1335 | /**
|
1336 | * Load a CSV or JSON file from a URL.
|
1337 | * Note that this will not work if loading via the "file://" protocol as most browsers with block XMLHTTPRequests.
|
1338 | */
|
1339 | url?: string;
|
1340 |
|
1341 | /**
|
1342 | * Load data from a multidimensional array, with the first element containing the data names, the following containing related data in that order.
|
1343 | */
|
1344 | rows?: PrimitiveArray[];
|
1345 |
|
1346 | /*
|
1347 | * Load data from a multidimensional array, with each element containing an array consisting of a datum name and associated data values.
|
1348 | */
|
1349 | columns?: PrimitiveArray[];
|
1350 |
|
1351 | /**
|
1352 | * XHR header value
|
1353 | * - NOTE: Should be used with data.url option
|
1354 | */
|
1355 | headers?: Array<{ [key: string]: string; }>;
|
1356 |
|
1357 | /**
|
1358 | * Hide each data when the chart appears.
|
1359 | * If true specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden.
|
1360 | */
|
1361 | hide?: boolean | string[];
|
1362 |
|
1363 | /**
|
1364 | * Converts data id value
|
1365 | */
|
1366 | idConverter?: (this: Chart, d: string) => string;
|
1367 |
|
1368 | |
1369 |
|
1370 |
|
1371 | json?: {};
|
1372 |
|
1373 | |
1374 |
|
1375 |
|
1376 | mimeType?: string;
|
1377 |
|
1378 | |
1379 |
|
1380 |
|
1381 | keys?: { x?: string; value: string[] };
|
1382 |
|
1383 | |
1384 |
|
1385 |
|
1386 |
|
1387 |
|
1388 |
|
1389 | x?: string;
|
1390 |
|
1391 | |
1392 |
|
1393 |
|
1394 |
|
1395 | xs?: { [key: string]: string };
|
1396 |
|
1397 | |
1398 |
|
1399 |
|
1400 |
|
1401 | xFormat?: string;
|
1402 | |
1403 |
|
1404 |
|
1405 | xLocaltime?: boolean;
|
1406 |
|
1407 | |
1408 |
|
1409 |
|
1410 | xSort?: boolean;
|
1411 |
|
1412 | |
1413 |
|
1414 |
|
1415 | names?: { [key: string]: string };
|
1416 | |
1417 |
|
1418 |
|
1419 |
|
1420 | classes?: { [key: string]: string };
|
1421 |
|
1422 | |
1423 |
|
1424 |
|
1425 | groups?: string[][];
|
1426 |
|
1427 | |
1428 |
|
1429 |
|
1430 |
|
1431 | axes?: { [key: string]: string };
|
1432 |
|
1433 | |
1434 |
|
1435 |
|
1436 |
|
1437 |
|
1438 | type?: ChartTypes;
|
1439 |
|
1440 | |
1441 |
|
1442 |
|
1443 |
|
1444 | types?: { [key: string]: ChartTypes };
|
1445 |
|
1446 | |
1447 |
|
1448 |
|
1449 |
|
1450 |
|
1451 |
|
1452 |
|
1453 |
|
1454 | labels?: boolean | {
|
1455 | |
1456 |
|
1457 |
|
1458 | centered?: boolean;
|
1459 |
|
1460 | |
1461 |
|
1462 |
|
1463 | colors?: string |
|
1464 | { [key: string]: string } |
|
1465 | ((this: Chart, color: string, d: DataItem) => string);
|
1466 |
|
1467 | |
1468 |
|
1469 |
|
1470 |
|
1471 |
|
1472 |
|
1473 |
|
1474 |
|
1475 |
|
1476 | format?: FormatFunction | { [key: string]: FormatFunction };
|
1477 |
|
1478 | position?: {
|
1479 | |
1480 |
|
1481 |
|
1482 | [key: string]: {
|
1483 | |
1484 |
|
1485 |
|
1486 | x?: number;
|
1487 |
|
1488 | |
1489 |
|
1490 |
|
1491 | y?: number;
|
1492 | } | {
|
1493 | |
1494 |
|
1495 |
|
1496 | x?: number;
|
1497 |
|
1498 | |
1499 |
|
1500 |
|
1501 | y?: number;
|
1502 | };
|
1503 | }
|
1504 | };
|
1505 |
|
1506 | |
1507 |
|
1508 |
|
1509 |
|
1510 |
|
1511 |
|
1512 |
|
1513 |
|
1514 | order?: "asc" | "desc" | ((this: Chart, a: IData, b: IData) => number) | null;
|
1515 |
|
1516 | /**
|
1517 | * Define regions for each data.
|
1518 | * The values must be an array for each data and it should include an object that has start, end, style.
|
1519 | * If start is not set, the start will be the first data point. If end is not set, the end will be the last data point.
|
1520 | * Currently this option supports only line chart and dashed style. If this option specified, the line will be dashed only in the regions.
|
1521 | */
|
1522 | regions?: {
|
1523 | [key: string]: Array<{
|
1524 | start?: number;
|
1525 | end?: number;
|
1526 | style?: {
|
1527 | dasharray?: string;
|
1528 | };
|
1529 | }>
|
1530 | };
|
1531 |
|
1532 | /**
|
1533 | * Set color converter function.
|
1534 | * This option should a function and the specified function receives color (e.g. '#ff0000') and d that has data parameters like id, value, index, etc.
|
1535 | * And it must return a string that represents color (e.g. '#00ff00').
|
1536 | */
|
1537 | color?(this: Chart, color: string, d: DataItem): string;
|
1538 |
|
1539 | /**
|
1540 | * Set color for each data.
|
1541 | */
|
1542 | colors?: {
|
1543 | [key: string]: string | ((this: Chart, d: DataItem) => string);
|
1544 | };
|
1545 |
|
1546 | /**
|
1547 | * Set text label to be displayed when there's no data to show.
|
1548 | * - ex. Toggling all visible data to not be shown, unloading all current data, etc.
|
1549 | */
|
1550 | empty?: { label: { text: string } };
|
1551 |
|
1552 | selection?: {
|
1553 | /**
|
1554 | * Set data selection enabled
|
1555 | * If this option is set true, we can select the data points and get/set its state of selection by API (e.g. select, unselect, selected).
|
1556 | */
|
1557 | enabled?: boolean;
|
1558 |
|
1559 | /**
|
1560 | * Set grouped selection enabled.
|
1561 | * If this option set true, multiple data points that have same x value will be selected by one selection.
|
1562 | */
|
1563 | grouped?: boolean;
|
1564 |
|
1565 | /**
|
1566 | * Set multiple data points selection enabled.
|
1567 | * If this option set true, multile data points can have the selected state at the same time.
|
1568 | * If false set, only one data point can have the selected state and the others will be unselected when the new data point is selected.
|
1569 | */
|
1570 | multiple?: boolean;
|
1571 |
|
1572 | /**
|
1573 | * Enable to select data points by dragging. If this option set true, data points can be selected by dragging.
|
1574 | * NOTE: If this option set true, scrolling on the chart will be disabled because dragging event will handle the event.
|
1575 | */
|
1576 | draggable?: boolean;
|
1577 |
|
1578 | /**
|
1579 | * Set a callback for each data point to determine if it's selectable or not.
|
1580 | * The callback will receive d as an argument and it has some parameters like id, value, index. This callback should return boolean.
|
1581 | * @param d Data object
|
1582 | */
|
1583 | isselectable?(this: Chart, d?: any): boolean;
|
1584 | };
|
1585 |
|
1586 | filter?: (this: Chart,
|
1587 | v: Array<{
|
1588 | id: string;
|
1589 | id_org: string;
|
1590 | values: Array<{
|
1591 | x: number;
|
1592 | value: number;
|
1593 | id: string;
|
1594 | index: number;
|
1595 | }>
|
1596 | }>) => boolean;
|
1597 |
|
1598 | stack?: {
|
1599 | |
1600 |
|
1601 |
|
1602 |
|
1603 |
|
1604 |
|
1605 | normalize?: boolean;
|
1606 | };
|
1607 |
|
1608 | |
1609 |
|
1610 |
|
1611 |
|
1612 |
|
1613 | onclick?(this: Chart, d: DataItem, element: SVGElement): void;
|
1614 |
|
1615 | |
1616 |
|
1617 |
|
1618 |
|
1619 |
|
1620 | onover?(this: Chart, d: DataItem, element?: SVGElement): void;
|
1621 |
|
1622 | |
1623 |
|
1624 |
|
1625 |
|
1626 |
|
1627 | onout?(this: Chart, d: DataItem, element?: SVGElement): void;
|
1628 |
|
1629 | |
1630 |
|
1631 |
|
1632 | onselected?(this: Chart, d: DataItem, element?: SVGElement): void;
|
1633 |
|
1634 | |
1635 |
|
1636 |
|
1637 | onunselected?(this: Chart, d: DataItem, element?: SVGElement): void;
|
1638 |
|
1639 | |
1640 |
|
1641 |
|
1642 |
|
1643 | onmin?(this: Chart, d: DataItem[]): void;
|
1644 |
|
1645 | |
1646 |
|
1647 |
|
1648 |
|
1649 | onmax?(this: Chart, d: DataItem[]): void;
|
1650 | }
|
1651 |
|
1652 | export type FormatFunction = (
|
1653 | this: Chart,
|
1654 | v: any,
|
1655 | id: string,
|
1656 | i: number,
|
1657 | j: number
|
1658 | ) => void;
|