@vaadin/charts 25.2.0-alpha1 → 25.2.0-alpha10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +7 -9
- package/package.json +8 -8
- package/src/vaadin-chart-mixin.js +6 -238
- package/src/vaadin-chart-series-mixin.js +1 -1
- package/src/vaadin-chart.d.ts +1 -1
- package/src/vaadin-chart.js +1 -1
- package/web-types.json +48 -124
- package/web-types.lit.json +40 -40
package/custom-elements.json
CHANGED
|
@@ -134,10 +134,9 @@
|
|
|
134
134
|
{
|
|
135
135
|
"kind": "field",
|
|
136
136
|
"name": "options",
|
|
137
|
-
"
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
137
|
+
"description": "Highcharts configuration object derived from the chart's reactive\nproperties, base config, and `additionalOptions`.",
|
|
138
|
+
"type": {
|
|
139
|
+
"text": "!Options"
|
|
141
140
|
},
|
|
142
141
|
"readonly": true
|
|
143
142
|
},
|
|
@@ -1162,10 +1161,9 @@
|
|
|
1162
1161
|
{
|
|
1163
1162
|
"kind": "field",
|
|
1164
1163
|
"name": "options",
|
|
1165
|
-
"
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
}
|
|
1164
|
+
"description": "Highcharts configuration object derived from the chart's reactive\nproperties, base config, and `additionalOptions`.",
|
|
1165
|
+
"type": {
|
|
1166
|
+
"text": "!Options"
|
|
1169
1167
|
},
|
|
1170
1168
|
"readonly": true,
|
|
1171
1169
|
"inheritedFrom": {
|
|
@@ -1379,7 +1377,7 @@
|
|
|
1379
1377
|
"type": {
|
|
1380
1378
|
"text": "CustomEvent"
|
|
1381
1379
|
},
|
|
1382
|
-
"description": "Fired
|
|
1380
|
+
"description": "Fired when the chart is redrawn: after `Chart.configuration.redraw()`, or after an axis, series, or point is modified with the `redraw` option set to true.",
|
|
1383
1381
|
"name": "chart-redraw"
|
|
1384
1382
|
},
|
|
1385
1383
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/charts",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,17 +35,17 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/component-base": "25.2.0-
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
38
|
+
"@vaadin/component-base": "25.2.0-alpha10",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
|
|
40
40
|
"highcharts": "12.2.0",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "25.2.0-
|
|
45
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
46
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
44
|
+
"@vaadin/aura": "25.2.0-alpha10",
|
|
45
|
+
"@vaadin/chai-plugins": "25.2.0-alpha10",
|
|
46
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha10",
|
|
47
47
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
|
|
49
49
|
"sinon": "^21.0.2"
|
|
50
50
|
},
|
|
51
51
|
"cvdlName": "vaadin-chart",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
|
|
58
58
|
}
|
|
@@ -85,8 +85,8 @@ KeyboardNavigation.prototype.onMouseUp = function (e) {
|
|
|
85
85
|
const chart = this.chart;
|
|
86
86
|
const target = e.composedPath()[0];
|
|
87
87
|
if (!target || !chart.container.contains(target)) {
|
|
88
|
-
const curMod = this.modules
|
|
89
|
-
if (curMod
|
|
88
|
+
const curMod = this.modules?.[this.currentModuleIx || 0];
|
|
89
|
+
if (curMod?.terminate) {
|
|
90
90
|
curMod.terminate();
|
|
91
91
|
}
|
|
92
92
|
this.currentModuleIx = 0;
|
|
@@ -380,7 +380,9 @@ export const ChartMixin = (superClass) =>
|
|
|
380
380
|
}
|
|
381
381
|
|
|
382
382
|
/**
|
|
383
|
-
*
|
|
383
|
+
* Highcharts configuration object derived from the chart's reactive
|
|
384
|
+
* properties, base config, and `additionalOptions`.
|
|
385
|
+
* @type {!Options}
|
|
384
386
|
*/
|
|
385
387
|
get options() {
|
|
386
388
|
const options = { ...this._baseConfig };
|
|
@@ -489,109 +491,18 @@ export const ChartMixin = (superClass) =>
|
|
|
489
491
|
*/
|
|
490
492
|
get __chartEventNames() {
|
|
491
493
|
return {
|
|
492
|
-
/**
|
|
493
|
-
* Fired when a new series is added.
|
|
494
|
-
* @event chart-add-series
|
|
495
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
496
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
497
|
-
*/
|
|
498
494
|
addSeries: 'chart-add-series',
|
|
499
|
-
|
|
500
|
-
/**
|
|
501
|
-
* Fired after a chart is exported.
|
|
502
|
-
* @event chart-after-export
|
|
503
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
504
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
505
|
-
*/
|
|
506
495
|
afterExport: 'chart-after-export',
|
|
507
|
-
|
|
508
|
-
/**
|
|
509
|
-
* Fired after a chart is printed.
|
|
510
|
-
* @event chart-after-print
|
|
511
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
512
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
513
|
-
*/
|
|
514
496
|
afterPrint: 'chart-after-print',
|
|
515
|
-
|
|
516
|
-
/**
|
|
517
|
-
* Fired before a chart is exported.
|
|
518
|
-
* @event chart-before-export
|
|
519
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
520
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
521
|
-
*/
|
|
522
497
|
beforeExport: 'chart-before-export',
|
|
523
|
-
|
|
524
|
-
/**
|
|
525
|
-
* Fired before a chart is printed.
|
|
526
|
-
* @event chart-before-print
|
|
527
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
528
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
529
|
-
*/
|
|
530
498
|
beforePrint: 'chart-before-print',
|
|
531
|
-
|
|
532
|
-
/**
|
|
533
|
-
* Fired when clicking on the plot background.
|
|
534
|
-
* @event chart-click
|
|
535
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
536
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
537
|
-
*/
|
|
538
499
|
click: 'chart-click',
|
|
539
|
-
|
|
540
|
-
/**
|
|
541
|
-
* Fired when drilldown point is clicked.
|
|
542
|
-
* @event chart-drilldown
|
|
543
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
544
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
545
|
-
*/
|
|
546
500
|
drilldown: 'chart-drilldown',
|
|
547
|
-
|
|
548
|
-
/**
|
|
549
|
-
* Fired when drilling up from a drilldown series.
|
|
550
|
-
* @event chart-drillup
|
|
551
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
552
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
553
|
-
*/
|
|
554
501
|
drillup: 'chart-drillup',
|
|
555
|
-
|
|
556
|
-
/**
|
|
557
|
-
* Fired after all the series has been drilled up if chart has multiple drilldown series.
|
|
558
|
-
* @event chart-drillupall
|
|
559
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
560
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
561
|
-
*/
|
|
562
502
|
drillupall: 'chart-drillupall',
|
|
563
|
-
|
|
564
|
-
/**
|
|
565
|
-
* Fired when the chart is finished loading.
|
|
566
|
-
* @event chart-load
|
|
567
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
568
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
569
|
-
*/
|
|
570
503
|
load: 'chart-load',
|
|
571
|
-
|
|
572
|
-
/**
|
|
573
|
-
* Fired when the chart is redraw. Can be called after a `Chart.configuration.redraw()`
|
|
574
|
-
* or after an axis, series or point is modified with the `redraw` option set to `true`.
|
|
575
|
-
* @event chart-redraw
|
|
576
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
577
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
578
|
-
*/
|
|
579
504
|
redraw: 'chart-redraw',
|
|
580
|
-
|
|
581
|
-
/**
|
|
582
|
-
* Fired when an area of the chart has been selected.
|
|
583
|
-
* @event chart-selection
|
|
584
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
585
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
586
|
-
*/
|
|
587
505
|
selection: 'chart-selection',
|
|
588
|
-
|
|
589
|
-
/**
|
|
590
|
-
* Fired when the chart finishes resizing.
|
|
591
|
-
* @event chart-end-resize
|
|
592
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
593
|
-
* @param {Object} chart Chart object where the event was sent from
|
|
594
|
-
*/
|
|
595
506
|
endResize: 'chart-end-resize',
|
|
596
507
|
};
|
|
597
508
|
}
|
|
@@ -602,67 +513,12 @@ export const ChartMixin = (superClass) =>
|
|
|
602
513
|
*/
|
|
603
514
|
get __seriesEventNames() {
|
|
604
515
|
return {
|
|
605
|
-
/**
|
|
606
|
-
* Fired when the series has finished its initial animation.
|
|
607
|
-
* @event series-after-animate
|
|
608
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
609
|
-
* @param {Object} series Series object where the event was sent from
|
|
610
|
-
*/
|
|
611
516
|
afterAnimate: 'series-after-animate',
|
|
612
|
-
|
|
613
|
-
/**
|
|
614
|
-
* Fired when the checkbox next to the series' name in the legend is clicked.
|
|
615
|
-
* @event series-checkbox-click
|
|
616
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
617
|
-
* @param {Object} series Series object where the event was sent from
|
|
618
|
-
*/
|
|
619
517
|
checkboxClick: 'series-checkbox-click',
|
|
620
|
-
|
|
621
|
-
/**
|
|
622
|
-
* Fired when the series is clicked.
|
|
623
|
-
* @event series-click
|
|
624
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
625
|
-
* @param {Object} series Series object where the event was sent from
|
|
626
|
-
*/
|
|
627
518
|
click: 'series-click',
|
|
628
|
-
|
|
629
|
-
/**
|
|
630
|
-
* Fired when the series is hidden after chart generation time.
|
|
631
|
-
* @event series-hide
|
|
632
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
633
|
-
* @param {Object} series Series object where the event was sent from
|
|
634
|
-
*/
|
|
635
519
|
hide: 'series-hide',
|
|
636
|
-
|
|
637
|
-
/**
|
|
638
|
-
* Fired when the legend item belonging to the series is clicked.
|
|
639
|
-
* @event series-legend-item-click
|
|
640
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
641
|
-
* @param {Object} series Series object where the event was sent from
|
|
642
|
-
*/
|
|
643
|
-
|
|
644
|
-
/**
|
|
645
|
-
* Fired when the mouses leave the graph.
|
|
646
|
-
* @event series-mouse-out
|
|
647
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
648
|
-
* @param {Object} series Series object where the event was sent from
|
|
649
|
-
*/
|
|
650
520
|
mouseOut: 'series-mouse-out',
|
|
651
|
-
|
|
652
|
-
/**
|
|
653
|
-
* Fired when the mouse enters the graph.
|
|
654
|
-
* @event series-mouse-over
|
|
655
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
656
|
-
* @param {Object} series Series object where the event was sent from
|
|
657
|
-
*/
|
|
658
521
|
mouseOver: 'series-mouse-over',
|
|
659
|
-
|
|
660
|
-
/**
|
|
661
|
-
* Fired when the series is show after chart generation time.
|
|
662
|
-
* @event series-show
|
|
663
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
664
|
-
* @param {Object} series Series object where the event was sent from
|
|
665
|
-
*/
|
|
666
522
|
show: 'series-show',
|
|
667
523
|
};
|
|
668
524
|
}
|
|
@@ -673,91 +529,15 @@ export const ChartMixin = (superClass) =>
|
|
|
673
529
|
*/
|
|
674
530
|
get __pointEventNames() {
|
|
675
531
|
return {
|
|
676
|
-
/**
|
|
677
|
-
* Fired when the point is clicked.
|
|
678
|
-
* @event point-click
|
|
679
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
680
|
-
* @param {Object} point Point object where the event was sent from
|
|
681
|
-
*/
|
|
682
532
|
click: 'point-click',
|
|
683
|
-
|
|
684
|
-
/**
|
|
685
|
-
* Fired when the legend item belonging to the point is clicked.
|
|
686
|
-
* @event point-legend-item-click
|
|
687
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
688
|
-
* @param {Object} point Point object where the event was sent from
|
|
689
|
-
*/
|
|
690
|
-
|
|
691
|
-
/**
|
|
692
|
-
* Fired when the mouse leaves the area close to the point.
|
|
693
|
-
* @event point-mouse-out
|
|
694
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
695
|
-
* @param {Object} point Point object where the event was sent from
|
|
696
|
-
*/
|
|
697
533
|
mouseOut: 'point-mouse-out',
|
|
698
|
-
|
|
699
|
-
/**
|
|
700
|
-
* Fired when the mouse enters the area close to the point.
|
|
701
|
-
* @event point-mouse-over
|
|
702
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
703
|
-
* @param {Object} point Point object where the event was sent from
|
|
704
|
-
*/
|
|
705
534
|
mouseOver: 'point-mouse-over',
|
|
706
|
-
|
|
707
|
-
/**
|
|
708
|
-
* Fired when the point is removed from the series.
|
|
709
|
-
* @event point-remove
|
|
710
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
711
|
-
* @param {Object} point Point object where the event was sent from
|
|
712
|
-
*/
|
|
713
535
|
remove: 'point-remove',
|
|
714
|
-
|
|
715
|
-
/**
|
|
716
|
-
* Fired when the point is selected either programmatically or by clicking on the point.
|
|
717
|
-
* @event point-select
|
|
718
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
719
|
-
* @param {Object} point Point object where the event was sent from
|
|
720
|
-
*/
|
|
721
536
|
select: 'point-select',
|
|
722
|
-
|
|
723
|
-
/**
|
|
724
|
-
* Fired when the point is unselected either programmatically or by clicking on the point
|
|
725
|
-
* @event point-unselect
|
|
726
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
727
|
-
* @param {Object} point Point object where the event was sent from
|
|
728
|
-
*/
|
|
729
537
|
unselect: 'point-unselect',
|
|
730
|
-
|
|
731
|
-
/**
|
|
732
|
-
* Fired when the point is updated programmatically through `.updateConfiguration()` method.
|
|
733
|
-
* @event point-update
|
|
734
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
735
|
-
* @param {Object} point Point object where the event was sent from
|
|
736
|
-
*/
|
|
737
538
|
update: 'point-update',
|
|
738
|
-
|
|
739
|
-
/**
|
|
740
|
-
* Fired when starting to drag a point.
|
|
741
|
-
* @event point-drag-start
|
|
742
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
743
|
-
* @param {Object} point Point object where the event was sent from
|
|
744
|
-
*/
|
|
745
539
|
dragStart: 'point-drag-start',
|
|
746
|
-
|
|
747
|
-
/**
|
|
748
|
-
* Fired when the point is dropped.
|
|
749
|
-
* @event point-drop
|
|
750
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
751
|
-
* @param {Object} point Point object where the event was sent from
|
|
752
|
-
*/
|
|
753
540
|
drop: 'point-drop',
|
|
754
|
-
|
|
755
|
-
/**
|
|
756
|
-
* Fired while dragging a point.
|
|
757
|
-
* @event point-drag
|
|
758
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
759
|
-
* @param {Object} point Point object where the event was sent from
|
|
760
|
-
*/
|
|
761
541
|
drag: 'point-drag',
|
|
762
542
|
};
|
|
763
543
|
}
|
|
@@ -765,12 +545,6 @@ export const ChartMixin = (superClass) =>
|
|
|
765
545
|
/** @private */
|
|
766
546
|
get __xAxesEventNames() {
|
|
767
547
|
return {
|
|
768
|
-
/**
|
|
769
|
-
* Fired when the minimum and maximum is set for the x axis.
|
|
770
|
-
* @event xaxes-extremes-set
|
|
771
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
772
|
-
* @param {Object} axis Point object where the event was sent from
|
|
773
|
-
*/
|
|
774
548
|
afterSetExtremes: 'xaxes-extremes-set',
|
|
775
549
|
};
|
|
776
550
|
}
|
|
@@ -778,12 +552,6 @@ export const ChartMixin = (superClass) =>
|
|
|
778
552
|
/** @private */
|
|
779
553
|
get __yAxesEventNames() {
|
|
780
554
|
return {
|
|
781
|
-
/**
|
|
782
|
-
* Fired when the minimum and maximum is set for the y axis.
|
|
783
|
-
* @event yaxes-extremes-set
|
|
784
|
-
* @param {Object} detail.originalEvent object with details about the event sent
|
|
785
|
-
* @param {Object} axis Point object where the event was sent from
|
|
786
|
-
*/
|
|
787
555
|
afterSetExtremes: 'yaxes-extremes-set',
|
|
788
556
|
};
|
|
789
557
|
}
|
|
@@ -1658,7 +1426,7 @@ export const ChartMixin = (superClass) =>
|
|
|
1658
1426
|
default:
|
|
1659
1427
|
break;
|
|
1660
1428
|
}
|
|
1661
|
-
if (axes
|
|
1429
|
+
if (axes?.[axisIndex]) {
|
|
1662
1430
|
const axis = axes[axisIndex];
|
|
1663
1431
|
const functionToCall = axis[functionName];
|
|
1664
1432
|
if (functionToCall && typeof functionToCall === 'function') {
|
package/src/vaadin-chart.d.ts
CHANGED
|
@@ -120,7 +120,7 @@ export * from './vaadin-chart-mixin.js';
|
|
|
120
120
|
* @fires {CustomEvent} chart-drilldown - Fired when drilldown point is clicked.
|
|
121
121
|
* @fires {CustomEvent} chart-drillup - Fired when drilling up from a drilldown series.
|
|
122
122
|
* @fires {CustomEvent} chart-drillupall - Fired after all the drilldown series has been drilled up.
|
|
123
|
-
* @fires {CustomEvent} chart-redraw - Fired
|
|
123
|
+
* @fires {CustomEvent} chart-redraw - Fired when the chart is redrawn: after `Chart.configuration.redraw()`, or after an axis, series, or point is modified with the `redraw` option set to true.
|
|
124
124
|
* @fires {CustomEvent} chart-selection - Fired when an area of the chart has been selected.
|
|
125
125
|
* @fires {CustomEvent} chart-end-resize - Fired when the chart finishes resizing.
|
|
126
126
|
* @fires {CustomEvent} series-after-animate - Fired when the series has finished its initial animation.
|
package/src/vaadin-chart.js
CHANGED
|
@@ -125,7 +125,7 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
|
|
|
125
125
|
* @fires {CustomEvent} chart-drilldown - Fired when drilldown point is clicked.
|
|
126
126
|
* @fires {CustomEvent} chart-drillup - Fired when drilling up from a drilldown series.
|
|
127
127
|
* @fires {CustomEvent} chart-drillupall - Fired after all the drilldown series has been drilled up.
|
|
128
|
-
* @fires {CustomEvent} chart-redraw - Fired
|
|
128
|
+
* @fires {CustomEvent} chart-redraw - Fired when the chart is redrawn: after `Chart.configuration.redraw()`, or after an axis, series, or point is modified with the `redraw` option set to true.
|
|
129
129
|
* @fires {CustomEvent} chart-selection - Fired when an area of the chart has been selected.
|
|
130
130
|
* @fires {CustomEvent} chart-end-resize - Fired when the chart finishes resizing.
|
|
131
131
|
* @fires {CustomEvent} series-after-animate - Fired when the series has finished its initial animation.
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/charts",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,9 +15,7 @@
|
|
|
15
15
|
"description": "Shows/hides data-point markers for line-like series.\nAcceptable input are:\n - `shown`: markers are always visible\n - `hidden`: markers are always hidden\n - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"string"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"string"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -67,9 +65,7 @@
|
|
|
67
65
|
"description": "The name of the series as shown in the legend, tooltip etc.",
|
|
68
66
|
"value": {
|
|
69
67
|
"type": [
|
|
70
|
-
"string"
|
|
71
|
-
"null",
|
|
72
|
-
"undefined"
|
|
68
|
+
"string"
|
|
73
69
|
]
|
|
74
70
|
}
|
|
75
71
|
},
|
|
@@ -78,9 +74,7 @@
|
|
|
78
74
|
"description": "A string with the type of the series.\nDefaults to `'line'` in case no type is set for the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.",
|
|
79
75
|
"value": {
|
|
80
76
|
"type": [
|
|
81
|
-
"string"
|
|
82
|
-
"null",
|
|
83
|
-
"undefined"
|
|
77
|
+
"string"
|
|
84
78
|
]
|
|
85
79
|
}
|
|
86
80
|
},
|
|
@@ -89,9 +83,7 @@
|
|
|
89
83
|
"description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
|
|
90
84
|
"value": {
|
|
91
85
|
"type": [
|
|
92
|
-
"string"
|
|
93
|
-
"null",
|
|
94
|
-
"undefined"
|
|
86
|
+
"string"
|
|
95
87
|
]
|
|
96
88
|
}
|
|
97
89
|
},
|
|
@@ -100,9 +92,7 @@
|
|
|
100
92
|
"description": "Value-axis maximum-value.\nSee the 'valueMin'",
|
|
101
93
|
"value": {
|
|
102
94
|
"type": [
|
|
103
|
-
"number"
|
|
104
|
-
"null",
|
|
105
|
-
"undefined"
|
|
95
|
+
"number"
|
|
106
96
|
]
|
|
107
97
|
}
|
|
108
98
|
},
|
|
@@ -111,9 +101,7 @@
|
|
|
111
101
|
"description": "Value-axis minimum-value.\nSets the value to a series bound by 'unit' property.\nOtherwise sets the value to the first series.\nUndefined by default (determined from data).",
|
|
112
102
|
"value": {
|
|
113
103
|
"type": [
|
|
114
|
-
"number"
|
|
115
|
-
"null",
|
|
116
|
-
"undefined"
|
|
104
|
+
"number"
|
|
117
105
|
]
|
|
118
106
|
}
|
|
119
107
|
}
|
|
@@ -135,9 +123,7 @@
|
|
|
135
123
|
"description": "Shows/hides data-point markers for line-like series.\nAcceptable input are:\n - `shown`: markers are always visible\n - `hidden`: markers are always hidden\n - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*",
|
|
136
124
|
"value": {
|
|
137
125
|
"type": [
|
|
138
|
-
"string"
|
|
139
|
-
"null",
|
|
140
|
-
"undefined"
|
|
126
|
+
"string"
|
|
141
127
|
]
|
|
142
128
|
}
|
|
143
129
|
},
|
|
@@ -176,9 +162,7 @@
|
|
|
176
162
|
"description": "The name of the series as shown in the legend, tooltip etc.",
|
|
177
163
|
"value": {
|
|
178
164
|
"type": [
|
|
179
|
-
"string"
|
|
180
|
-
"null",
|
|
181
|
-
"undefined"
|
|
165
|
+
"string"
|
|
182
166
|
]
|
|
183
167
|
}
|
|
184
168
|
},
|
|
@@ -187,9 +171,7 @@
|
|
|
187
171
|
"description": "A string with the type of the series.\nDefaults to `'line'` in case no type is set for the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.",
|
|
188
172
|
"value": {
|
|
189
173
|
"type": [
|
|
190
|
-
"string"
|
|
191
|
-
"null",
|
|
192
|
-
"undefined"
|
|
174
|
+
"string"
|
|
193
175
|
]
|
|
194
176
|
}
|
|
195
177
|
},
|
|
@@ -198,9 +180,7 @@
|
|
|
198
180
|
"description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
|
|
199
181
|
"value": {
|
|
200
182
|
"type": [
|
|
201
|
-
"string"
|
|
202
|
-
"null",
|
|
203
|
-
"undefined"
|
|
183
|
+
"string"
|
|
204
184
|
]
|
|
205
185
|
}
|
|
206
186
|
},
|
|
@@ -209,9 +189,7 @@
|
|
|
209
189
|
"description": "Value-axis maximum-value.\nSee the 'valueMin'",
|
|
210
190
|
"value": {
|
|
211
191
|
"type": [
|
|
212
|
-
"number"
|
|
213
|
-
"null",
|
|
214
|
-
"undefined"
|
|
192
|
+
"number"
|
|
215
193
|
]
|
|
216
194
|
}
|
|
217
195
|
},
|
|
@@ -220,9 +198,7 @@
|
|
|
220
198
|
"description": "Value-axis minimum-value.\nSets the value to a series bound by 'unit' property.\nOtherwise sets the value to the first series.\nUndefined by default (determined from data).",
|
|
221
199
|
"value": {
|
|
222
200
|
"type": [
|
|
223
|
-
"number"
|
|
224
|
-
"null",
|
|
225
|
-
"undefined"
|
|
201
|
+
"number"
|
|
226
202
|
]
|
|
227
203
|
}
|
|
228
204
|
},
|
|
@@ -241,16 +217,14 @@
|
|
|
241
217
|
},
|
|
242
218
|
{
|
|
243
219
|
"name": "vaadin-chart",
|
|
244
|
-
"description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n <vaadin-chart-series\n type=\"column\"\n title=\"The series title\"\n values=\"[10, 20, 30]\"\n ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
220
|
+
"description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n <vaadin-chart-series\n type=\"column\"\n title=\"The series title\"\n values=\"[10, 20, 30]\"\n ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\n\n// Wait for default configuration to be ready\nrequestAnimationFrame(() => {\n const configuration = chart.configuration;\n configuration.setTitle({ text: 'The chart title' });\n // By default there is one X axis, it is referenced by configuration.xAxis[0].\n configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n configuration.addSeries({\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n });\n});\n```\n\n#### Using JS JSON API\n\nUse [`updateConfiguration`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nchart.updateConfiguration({\n title: {\n text: 'The chart title'\n },\n subtitle: {\n text: 'Subtitle'\n },\n xAxis: {\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n },\n series: [{\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n }]\n});\n```\n\n**Note:** chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
|
|
245
221
|
"attributes": [
|
|
246
222
|
{
|
|
247
223
|
"name": "category-max",
|
|
248
224
|
"description": "Category-axis maximum value. Defaults to `undefined`.",
|
|
249
225
|
"value": {
|
|
250
226
|
"type": [
|
|
251
|
-
"number"
|
|
252
|
-
"null",
|
|
253
|
-
"undefined"
|
|
227
|
+
"number"
|
|
254
228
|
]
|
|
255
229
|
}
|
|
256
230
|
},
|
|
@@ -259,9 +233,7 @@
|
|
|
259
233
|
"description": "Category-axis minimum value. Defaults to `undefined`.",
|
|
260
234
|
"value": {
|
|
261
235
|
"type": [
|
|
262
|
-
"number"
|
|
263
|
-
"null",
|
|
264
|
-
"undefined"
|
|
236
|
+
"number"
|
|
265
237
|
]
|
|
266
238
|
}
|
|
267
239
|
},
|
|
@@ -270,9 +242,7 @@
|
|
|
270
242
|
"description": "The position of the category axis. Acceptable values are `left`, `right`, `top` and `bottom`\nexcept for bar charts which only accept `left` and `right`.\nWith the default value, charts appear as though they have `category-position=\"bottom\"`\nexcept for bar charts that appear as though they have `category-position=\"left\"`.\n\nDefaults to `undefined`",
|
|
271
243
|
"value": {
|
|
272
244
|
"type": [
|
|
273
|
-
"string"
|
|
274
|
-
"null",
|
|
275
|
-
"undefined"
|
|
245
|
+
"string"
|
|
276
246
|
]
|
|
277
247
|
}
|
|
278
248
|
},
|
|
@@ -281,9 +251,7 @@
|
|
|
281
251
|
"description": "Specifies whether to show chart in 3 or in 2 dimensions.\nSome display angles are added by default to the \"chart.options3d\" (`{alpha: 15, beta: 15, depth: 50}`).\n3D display options can be modified via `additionalOptions`.\nThe thickness of a Pie chart can be set on `additionalOptions` through `plotOptions.pie.depth`.\n3D is supported by Bar, Column, Pie and Scatter3D charts.\nMore info available at [Highcharts](https://www.highcharts.com/docs/chart-concepts/3d-charts).",
|
|
282
252
|
"value": {
|
|
283
253
|
"type": [
|
|
284
|
-
"boolean"
|
|
285
|
-
"null",
|
|
286
|
-
"undefined"
|
|
254
|
+
"boolean"
|
|
287
255
|
]
|
|
288
256
|
}
|
|
289
257
|
},
|
|
@@ -292,9 +260,7 @@
|
|
|
292
260
|
"description": "Specifies the message displayed on a chart without displayable data.",
|
|
293
261
|
"value": {
|
|
294
262
|
"type": [
|
|
295
|
-
"string"
|
|
296
|
-
"null",
|
|
297
|
-
"undefined"
|
|
263
|
+
"string"
|
|
298
264
|
]
|
|
299
265
|
}
|
|
300
266
|
},
|
|
@@ -303,9 +269,7 @@
|
|
|
303
269
|
"description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
|
|
304
270
|
"value": {
|
|
305
271
|
"type": [
|
|
306
|
-
"boolean"
|
|
307
|
-
"null",
|
|
308
|
-
"undefined"
|
|
272
|
+
"boolean"
|
|
309
273
|
]
|
|
310
274
|
}
|
|
311
275
|
},
|
|
@@ -314,9 +278,7 @@
|
|
|
314
278
|
"description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
|
|
315
279
|
"value": {
|
|
316
280
|
"type": [
|
|
317
|
-
"boolean"
|
|
318
|
-
"null",
|
|
319
|
-
"undefined"
|
|
281
|
+
"boolean"
|
|
320
282
|
]
|
|
321
283
|
}
|
|
322
284
|
},
|
|
@@ -325,9 +287,7 @@
|
|
|
325
287
|
"description": "Specifies how series are stacked on top of each other.\nPossible values are null, \"normal\" or \"percent\".\nIf \"stack\" property is not defined on the vaadin-chart-series elements, then series will be put into\nthe default stack.",
|
|
326
288
|
"value": {
|
|
327
289
|
"type": [
|
|
328
|
-
"string"
|
|
329
|
-
"null",
|
|
330
|
-
"undefined"
|
|
290
|
+
"string"
|
|
331
291
|
]
|
|
332
292
|
}
|
|
333
293
|
},
|
|
@@ -336,9 +296,7 @@
|
|
|
336
296
|
"description": "Represents the subtitle of the chart.",
|
|
337
297
|
"value": {
|
|
338
298
|
"type": [
|
|
339
|
-
"string"
|
|
340
|
-
"null",
|
|
341
|
-
"undefined"
|
|
299
|
+
"string"
|
|
342
300
|
]
|
|
343
301
|
}
|
|
344
302
|
},
|
|
@@ -358,9 +316,7 @@
|
|
|
358
316
|
"description": "Specifies whether the chart is a normal chart or a timeline chart.\nValue of this property is ignored for Gantt charts (type=\"gantt\").",
|
|
359
317
|
"value": {
|
|
360
318
|
"type": [
|
|
361
|
-
"boolean"
|
|
362
|
-
"null",
|
|
363
|
-
"undefined"
|
|
319
|
+
"boolean"
|
|
364
320
|
]
|
|
365
321
|
}
|
|
366
322
|
},
|
|
@@ -369,9 +325,7 @@
|
|
|
369
325
|
"description": "Represents the title of the chart.",
|
|
370
326
|
"value": {
|
|
371
327
|
"type": [
|
|
372
|
-
"string"
|
|
373
|
-
"null",
|
|
374
|
-
"undefined"
|
|
328
|
+
"string"
|
|
375
329
|
]
|
|
376
330
|
}
|
|
377
331
|
},
|
|
@@ -380,9 +334,7 @@
|
|
|
380
334
|
"description": "Whether or not to show tooltip when hovering data points.",
|
|
381
335
|
"value": {
|
|
382
336
|
"type": [
|
|
383
|
-
"boolean"
|
|
384
|
-
"null",
|
|
385
|
-
"undefined"
|
|
337
|
+
"boolean"
|
|
386
338
|
]
|
|
387
339
|
}
|
|
388
340
|
},
|
|
@@ -391,9 +343,7 @@
|
|
|
391
343
|
"description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
|
|
392
344
|
"value": {
|
|
393
345
|
"type": [
|
|
394
|
-
"string"
|
|
395
|
-
"null",
|
|
396
|
-
"undefined"
|
|
346
|
+
"string"
|
|
397
347
|
]
|
|
398
348
|
}
|
|
399
349
|
}
|
|
@@ -425,9 +375,7 @@
|
|
|
425
375
|
"description": "Category-axis maximum value. Defaults to `undefined`.",
|
|
426
376
|
"value": {
|
|
427
377
|
"type": [
|
|
428
|
-
"number"
|
|
429
|
-
"null",
|
|
430
|
-
"undefined"
|
|
378
|
+
"number"
|
|
431
379
|
]
|
|
432
380
|
}
|
|
433
381
|
},
|
|
@@ -436,9 +384,7 @@
|
|
|
436
384
|
"description": "Category-axis minimum value. Defaults to `undefined`.",
|
|
437
385
|
"value": {
|
|
438
386
|
"type": [
|
|
439
|
-
"number"
|
|
440
|
-
"null",
|
|
441
|
-
"undefined"
|
|
387
|
+
"number"
|
|
442
388
|
]
|
|
443
389
|
}
|
|
444
390
|
},
|
|
@@ -447,9 +393,7 @@
|
|
|
447
393
|
"description": "The position of the category axis. Acceptable values are `left`, `right`, `top` and `bottom`\nexcept for bar charts which only accept `left` and `right`.\nWith the default value, charts appear as though they have `category-position=\"bottom\"`\nexcept for bar charts that appear as though they have `category-position=\"left\"`.\n\nDefaults to `undefined`",
|
|
448
394
|
"value": {
|
|
449
395
|
"type": [
|
|
450
|
-
"string"
|
|
451
|
-
"null",
|
|
452
|
-
"undefined"
|
|
396
|
+
"string"
|
|
453
397
|
]
|
|
454
398
|
}
|
|
455
399
|
},
|
|
@@ -458,9 +402,7 @@
|
|
|
458
402
|
"description": "Specifies whether to show chart in 3 or in 2 dimensions.\nSome display angles are added by default to the \"chart.options3d\" (`{alpha: 15, beta: 15, depth: 50}`).\n3D display options can be modified via `additionalOptions`.\nThe thickness of a Pie chart can be set on `additionalOptions` through `plotOptions.pie.depth`.\n3D is supported by Bar, Column, Pie and Scatter3D charts.\nMore info available at [Highcharts](https://www.highcharts.com/docs/chart-concepts/3d-charts).",
|
|
459
403
|
"value": {
|
|
460
404
|
"type": [
|
|
461
|
-
"boolean"
|
|
462
|
-
"null",
|
|
463
|
-
"undefined"
|
|
405
|
+
"boolean"
|
|
464
406
|
]
|
|
465
407
|
}
|
|
466
408
|
},
|
|
@@ -479,9 +421,7 @@
|
|
|
479
421
|
"description": "Specifies the message displayed on a chart without displayable data.",
|
|
480
422
|
"value": {
|
|
481
423
|
"type": [
|
|
482
|
-
"string"
|
|
483
|
-
"null",
|
|
484
|
-
"undefined"
|
|
424
|
+
"string"
|
|
485
425
|
]
|
|
486
426
|
}
|
|
487
427
|
},
|
|
@@ -490,9 +430,7 @@
|
|
|
490
430
|
"description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
|
|
491
431
|
"value": {
|
|
492
432
|
"type": [
|
|
493
|
-
"boolean"
|
|
494
|
-
"null",
|
|
495
|
-
"undefined"
|
|
433
|
+
"boolean"
|
|
496
434
|
]
|
|
497
435
|
}
|
|
498
436
|
},
|
|
@@ -501,9 +439,7 @@
|
|
|
501
439
|
"description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
|
|
502
440
|
"value": {
|
|
503
441
|
"type": [
|
|
504
|
-
"boolean"
|
|
505
|
-
"null",
|
|
506
|
-
"undefined"
|
|
442
|
+
"boolean"
|
|
507
443
|
]
|
|
508
444
|
}
|
|
509
445
|
},
|
|
@@ -512,9 +448,7 @@
|
|
|
512
448
|
"description": "Specifies how series are stacked on top of each other.\nPossible values are null, \"normal\" or \"percent\".\nIf \"stack\" property is not defined on the vaadin-chart-series elements, then series will be put into\nthe default stack.",
|
|
513
449
|
"value": {
|
|
514
450
|
"type": [
|
|
515
|
-
"string"
|
|
516
|
-
"null",
|
|
517
|
-
"undefined"
|
|
451
|
+
"string"
|
|
518
452
|
]
|
|
519
453
|
}
|
|
520
454
|
},
|
|
@@ -523,9 +457,7 @@
|
|
|
523
457
|
"description": "Represents the subtitle of the chart.",
|
|
524
458
|
"value": {
|
|
525
459
|
"type": [
|
|
526
|
-
"string"
|
|
527
|
-
"null",
|
|
528
|
-
"undefined"
|
|
460
|
+
"string"
|
|
529
461
|
]
|
|
530
462
|
}
|
|
531
463
|
},
|
|
@@ -534,9 +466,7 @@
|
|
|
534
466
|
"description": "Specifies whether the chart is a normal chart or a timeline chart.\nValue of this property is ignored for Gantt charts (type=\"gantt\").",
|
|
535
467
|
"value": {
|
|
536
468
|
"type": [
|
|
537
|
-
"boolean"
|
|
538
|
-
"null",
|
|
539
|
-
"undefined"
|
|
469
|
+
"boolean"
|
|
540
470
|
]
|
|
541
471
|
}
|
|
542
472
|
},
|
|
@@ -545,9 +475,7 @@
|
|
|
545
475
|
"description": "Represents the title of the chart.",
|
|
546
476
|
"value": {
|
|
547
477
|
"type": [
|
|
548
|
-
"string"
|
|
549
|
-
"null",
|
|
550
|
-
"undefined"
|
|
478
|
+
"string"
|
|
551
479
|
]
|
|
552
480
|
}
|
|
553
481
|
},
|
|
@@ -556,9 +484,7 @@
|
|
|
556
484
|
"description": "Whether or not to show tooltip when hovering data points.",
|
|
557
485
|
"value": {
|
|
558
486
|
"type": [
|
|
559
|
-
"boolean"
|
|
560
|
-
"null",
|
|
561
|
-
"undefined"
|
|
487
|
+
"boolean"
|
|
562
488
|
]
|
|
563
489
|
}
|
|
564
490
|
},
|
|
@@ -567,9 +493,7 @@
|
|
|
567
493
|
"description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
|
|
568
494
|
"value": {
|
|
569
495
|
"type": [
|
|
570
|
-
"string"
|
|
571
|
-
"null",
|
|
572
|
-
"undefined"
|
|
496
|
+
"string"
|
|
573
497
|
]
|
|
574
498
|
}
|
|
575
499
|
}
|
|
@@ -609,7 +533,7 @@
|
|
|
609
533
|
},
|
|
610
534
|
{
|
|
611
535
|
"name": "chart-drillupall",
|
|
612
|
-
"description": "Fired after all the series has been drilled up
|
|
536
|
+
"description": "Fired after all the drilldown series has been drilled up."
|
|
613
537
|
},
|
|
614
538
|
{
|
|
615
539
|
"name": "chart-end-resize",
|
|
@@ -617,11 +541,11 @@
|
|
|
617
541
|
},
|
|
618
542
|
{
|
|
619
543
|
"name": "chart-load",
|
|
620
|
-
"description": "Fired when the chart
|
|
544
|
+
"description": "Fired when the chart has finished loading."
|
|
621
545
|
},
|
|
622
546
|
{
|
|
623
547
|
"name": "chart-redraw",
|
|
624
|
-
"description": "Fired when the chart is
|
|
548
|
+
"description": "Fired when the chart is redrawn: after `Chart.configuration.redraw()`, or after an axis, series, or point is modified with the `redraw` option set to true."
|
|
625
549
|
},
|
|
626
550
|
{
|
|
627
551
|
"name": "chart-selection",
|
|
@@ -665,7 +589,7 @@
|
|
|
665
589
|
},
|
|
666
590
|
{
|
|
667
591
|
"name": "point-unselect",
|
|
668
|
-
"description": "Fired when the point is unselected either programmatically or by clicking on the point"
|
|
592
|
+
"description": "Fired when the point is unselected either programmatically or by clicking on the point."
|
|
669
593
|
},
|
|
670
594
|
{
|
|
671
595
|
"name": "point-update",
|
|
@@ -693,7 +617,7 @@
|
|
|
693
617
|
},
|
|
694
618
|
{
|
|
695
619
|
"name": "series-mouse-out",
|
|
696
|
-
"description": "Fired when the
|
|
620
|
+
"description": "Fired when the mouse leaves the graph."
|
|
697
621
|
},
|
|
698
622
|
{
|
|
699
623
|
"name": "series-mouse-over",
|
|
@@ -701,15 +625,15 @@
|
|
|
701
625
|
},
|
|
702
626
|
{
|
|
703
627
|
"name": "series-show",
|
|
704
|
-
"description": "Fired when the series is
|
|
628
|
+
"description": "Fired when the series is shown after chart generation time."
|
|
705
629
|
},
|
|
706
630
|
{
|
|
707
631
|
"name": "xaxes-extremes-set",
|
|
708
|
-
"description": "Fired when the minimum and maximum is set for the
|
|
632
|
+
"description": "Fired when the minimum and maximum is set for the X axis."
|
|
709
633
|
},
|
|
710
634
|
{
|
|
711
635
|
"name": "yaxes-extremes-set",
|
|
712
|
-
"description": "Fired when the minimum and maximum is set for the
|
|
636
|
+
"description": "Fired when the minimum and maximum is set for the Y axis."
|
|
713
637
|
}
|
|
714
638
|
]
|
|
715
639
|
}
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/charts",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -100,110 +100,110 @@
|
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
102
|
"name": "vaadin-chart",
|
|
103
|
-
"description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n <vaadin-chart-series\n type=\"column\"\n title=\"The series title\"\n values=\"[10, 20, 30]\"\n ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
103
|
+
"description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n <vaadin-chart-series\n type=\"column\"\n title=\"The series title\"\n values=\"[10, 20, 30]\"\n ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\n\n// Wait for default configuration to be ready\nrequestAnimationFrame(() => {\n const configuration = chart.configuration;\n configuration.setTitle({ text: 'The chart title' });\n // By default there is one X axis, it is referenced by configuration.xAxis[0].\n configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n configuration.addSeries({\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n });\n});\n```\n\n#### Using JS JSON API\n\nUse [`updateConfiguration`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nchart.updateConfiguration({\n title: {\n text: 'The chart title'\n },\n subtitle: {\n text: 'Subtitle'\n },\n xAxis: {\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n },\n series: [{\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n }]\n});\n```\n\n**Note:** chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
|
|
104
104
|
"extension": true,
|
|
105
105
|
"attributes": [
|
|
106
106
|
{
|
|
107
|
-
"name": "
|
|
108
|
-
"description": "
|
|
107
|
+
"name": ".additionalOptions",
|
|
108
|
+
"description": "Represents additional JSON configuration.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"name": "
|
|
115
|
-
"description": "
|
|
114
|
+
"name": ".categories",
|
|
115
|
+
"description": "If categories are present names are used instead of numbers for the category axis.\nThe format of categories can be an `Array` with a list of categories, such as `['2010', '2011', '2012']`\nor a mapping `Object`, like `{0:'1',9:'Target (10)', 15: 'Max'}`.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
|
-
"name": "
|
|
122
|
-
"description": "
|
|
121
|
+
"name": ".categoryMax",
|
|
122
|
+
"description": "Category-axis maximum value. Defaults to `undefined`.",
|
|
123
123
|
"value": {
|
|
124
124
|
"kind": "expression"
|
|
125
125
|
}
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
"name": "
|
|
129
|
-
"description": "
|
|
128
|
+
"name": ".categoryMin",
|
|
129
|
+
"description": "Category-axis minimum value. Defaults to `undefined`.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": "
|
|
136
|
-
"description": "
|
|
135
|
+
"name": ".categoryPosition",
|
|
136
|
+
"description": "The position of the category axis. Acceptable values are `left`, `right`, `top` and `bottom`\nexcept for bar charts which only accept `left` and `right`.\nWith the default value, charts appear as though they have `category-position=\"bottom\"`\nexcept for bar charts that appear as though they have `category-position=\"left\"`.\n\nDefaults to `undefined`",
|
|
137
137
|
"value": {
|
|
138
138
|
"kind": "expression"
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
{
|
|
142
|
-
"name": "
|
|
143
|
-
"description": "
|
|
142
|
+
"name": "?chart3d",
|
|
143
|
+
"description": "Specifies whether to show chart in 3 or in 2 dimensions.\nSome display angles are added by default to the \"chart.options3d\" (`{alpha: 15, beta: 15, depth: 50}`).\n3D display options can be modified via `additionalOptions`.\nThe thickness of a Pie chart can be set on `additionalOptions` through `plotOptions.pie.depth`.\n3D is supported by Bar, Column, Pie and Scatter3D charts.\nMore info available at [Highcharts](https://www.highcharts.com/docs/chart-concepts/3d-charts).",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
|
-
"name": ".
|
|
150
|
-
"description": "
|
|
149
|
+
"name": ".configuration",
|
|
150
|
+
"description": "Configuration object that exposes the JS Api to configure the chart.\n\nMost important methods are:\n- `addSeries (Object options, [Boolean redraw], [Mixed animation])`\n- `addAxis (Object options, [Boolean isX], [Boolean redraw], [Mixed animation])`\n- `setTitle (Object title, object subtitle, Boolean redraw)`\n\nMost important properties are:\n- `configuration.series`: An array of the chart's series. Detailed API for Series object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Series)\n- `configuration.xAxis`: An array of the chart's x axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.yAxis`: An array of the chart's y axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.title`: The chart title.\n\nFor detailed documentation of available API check the [API site](http://api.highcharts.com/class-reference/classes.list)",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
|
-
"name": ".
|
|
157
|
-
"description": "
|
|
156
|
+
"name": ".emptyText",
|
|
157
|
+
"description": "Specifies the message displayed on a chart without displayable data.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
|
-
"name": "
|
|
164
|
-
"description": "
|
|
163
|
+
"name": "?noLegend",
|
|
164
|
+
"description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
|
-
"name": "
|
|
171
|
-
"description": "
|
|
170
|
+
"name": "?polar",
|
|
171
|
+
"description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
176
|
{
|
|
177
|
-
"name": ".
|
|
178
|
-
"description": "
|
|
177
|
+
"name": ".stacking",
|
|
178
|
+
"description": "Specifies how series are stacked on top of each other.\nPossible values are null, \"normal\" or \"percent\".\nIf \"stack\" property is not defined on the vaadin-chart-series elements, then series will be put into\nthe default stack.",
|
|
179
179
|
"value": {
|
|
180
180
|
"kind": "expression"
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
183
|
{
|
|
184
|
-
"name": ".
|
|
185
|
-
"description": "
|
|
184
|
+
"name": ".subtitle",
|
|
185
|
+
"description": "Represents the subtitle of the chart.",
|
|
186
186
|
"value": {
|
|
187
187
|
"kind": "expression"
|
|
188
188
|
}
|
|
189
189
|
},
|
|
190
190
|
{
|
|
191
|
-
"name": "
|
|
192
|
-
"description": "Specifies
|
|
191
|
+
"name": "?timeline",
|
|
192
|
+
"description": "Specifies whether the chart is a normal chart or a timeline chart.\nValue of this property is ignored for Gantt charts (type=\"gantt\").",
|
|
193
193
|
"value": {
|
|
194
194
|
"kind": "expression"
|
|
195
195
|
}
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
|
-
"name": ".
|
|
199
|
-
"description": "Represents the
|
|
198
|
+
"name": ".title",
|
|
199
|
+
"description": "Represents the title of the chart.",
|
|
200
200
|
"value": {
|
|
201
201
|
"kind": "expression"
|
|
202
202
|
}
|
|
203
203
|
},
|
|
204
204
|
{
|
|
205
|
-
"name": "
|
|
206
|
-
"description": "
|
|
205
|
+
"name": "?tooltip",
|
|
206
|
+
"description": "Whether or not to show tooltip when hovering data points.",
|
|
207
207
|
"value": {
|
|
208
208
|
"kind": "expression"
|
|
209
209
|
}
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
},
|
|
274
274
|
{
|
|
275
275
|
"name": "@chart-drillupall",
|
|
276
|
-
"description": "Fired after all the series has been drilled up
|
|
276
|
+
"description": "Fired after all the drilldown series has been drilled up.",
|
|
277
277
|
"value": {
|
|
278
278
|
"kind": "expression"
|
|
279
279
|
}
|
|
@@ -287,14 +287,14 @@
|
|
|
287
287
|
},
|
|
288
288
|
{
|
|
289
289
|
"name": "@chart-load",
|
|
290
|
-
"description": "Fired when the chart
|
|
290
|
+
"description": "Fired when the chart has finished loading.",
|
|
291
291
|
"value": {
|
|
292
292
|
"kind": "expression"
|
|
293
293
|
}
|
|
294
294
|
},
|
|
295
295
|
{
|
|
296
296
|
"name": "@chart-redraw",
|
|
297
|
-
"description": "Fired when the chart is
|
|
297
|
+
"description": "Fired when the chart is redrawn: after `Chart.configuration.redraw()`, or after an axis, series, or point is modified with the `redraw` option set to true.",
|
|
298
298
|
"value": {
|
|
299
299
|
"kind": "expression"
|
|
300
300
|
}
|
|
@@ -371,7 +371,7 @@
|
|
|
371
371
|
},
|
|
372
372
|
{
|
|
373
373
|
"name": "@point-unselect",
|
|
374
|
-
"description": "Fired when the point is unselected either programmatically or by clicking on the point",
|
|
374
|
+
"description": "Fired when the point is unselected either programmatically or by clicking on the point.",
|
|
375
375
|
"value": {
|
|
376
376
|
"kind": "expression"
|
|
377
377
|
}
|
|
@@ -420,7 +420,7 @@
|
|
|
420
420
|
},
|
|
421
421
|
{
|
|
422
422
|
"name": "@series-mouse-out",
|
|
423
|
-
"description": "Fired when the
|
|
423
|
+
"description": "Fired when the mouse leaves the graph.",
|
|
424
424
|
"value": {
|
|
425
425
|
"kind": "expression"
|
|
426
426
|
}
|
|
@@ -434,21 +434,21 @@
|
|
|
434
434
|
},
|
|
435
435
|
{
|
|
436
436
|
"name": "@series-show",
|
|
437
|
-
"description": "Fired when the series is
|
|
437
|
+
"description": "Fired when the series is shown after chart generation time.",
|
|
438
438
|
"value": {
|
|
439
439
|
"kind": "expression"
|
|
440
440
|
}
|
|
441
441
|
},
|
|
442
442
|
{
|
|
443
443
|
"name": "@xaxes-extremes-set",
|
|
444
|
-
"description": "Fired when the minimum and maximum is set for the
|
|
444
|
+
"description": "Fired when the minimum and maximum is set for the X axis.",
|
|
445
445
|
"value": {
|
|
446
446
|
"kind": "expression"
|
|
447
447
|
}
|
|
448
448
|
},
|
|
449
449
|
{
|
|
450
450
|
"name": "@yaxes-extremes-set",
|
|
451
|
-
"description": "Fired when the minimum and maximum is set for the
|
|
451
|
+
"description": "Fired when the minimum and maximum is set for the Y axis.",
|
|
452
452
|
"value": {
|
|
453
453
|
"kind": "expression"
|
|
454
454
|
}
|