@vaadin/charts 25.1.0-beta2 → 25.1.0-beta4
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 +21 -21
- package/package.json +9 -9
- package/src/vaadin-chart-mixin.js +0 -3
- package/src/vaadin-chart-series-mixin.js +0 -1
- package/src/vaadin-chart.d.ts +2 -2
- package/src/vaadin-chart.js +2 -2
- package/web-types.json +16 -8
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"name": "categoryPosition",
|
|
87
87
|
"privacy": "public",
|
|
88
88
|
"type": {
|
|
89
|
-
"text": "
|
|
89
|
+
"text": "string"
|
|
90
90
|
},
|
|
91
91
|
"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`",
|
|
92
92
|
"attribute": "category-position"
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
"name": "stacking",
|
|
157
157
|
"privacy": "public",
|
|
158
158
|
"type": {
|
|
159
|
-
"text": "
|
|
159
|
+
"text": "string"
|
|
160
160
|
},
|
|
161
161
|
"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.",
|
|
162
162
|
"attribute": "stacking"
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
"name": "subtitle",
|
|
167
167
|
"privacy": "public",
|
|
168
168
|
"type": {
|
|
169
|
-
"text": "string
|
|
169
|
+
"text": "string"
|
|
170
170
|
},
|
|
171
171
|
"description": "Represents the subtitle of the chart.",
|
|
172
172
|
"attribute": "subtitle"
|
|
@@ -270,7 +270,7 @@
|
|
|
270
270
|
{
|
|
271
271
|
"name": "category-position",
|
|
272
272
|
"type": {
|
|
273
|
-
"text": "
|
|
273
|
+
"text": "string"
|
|
274
274
|
},
|
|
275
275
|
"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`",
|
|
276
276
|
"fieldName": "categoryPosition"
|
|
@@ -318,7 +318,7 @@
|
|
|
318
318
|
{
|
|
319
319
|
"name": "stacking",
|
|
320
320
|
"type": {
|
|
321
|
-
"text": "
|
|
321
|
+
"text": "string"
|
|
322
322
|
},
|
|
323
323
|
"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.",
|
|
324
324
|
"fieldName": "stacking"
|
|
@@ -326,7 +326,7 @@
|
|
|
326
326
|
{
|
|
327
327
|
"name": "subtitle",
|
|
328
328
|
"type": {
|
|
329
|
-
"text": "string
|
|
329
|
+
"text": "string"
|
|
330
330
|
},
|
|
331
331
|
"description": "Represents the subtitle of the chart.",
|
|
332
332
|
"fieldName": "subtitle"
|
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
"name": "markers",
|
|
413
413
|
"privacy": "public",
|
|
414
414
|
"type": {
|
|
415
|
-
"text": "
|
|
415
|
+
"text": "string"
|
|
416
416
|
},
|
|
417
417
|
"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)*",
|
|
418
418
|
"attribute": "markers"
|
|
@@ -545,7 +545,7 @@
|
|
|
545
545
|
{
|
|
546
546
|
"name": "markers",
|
|
547
547
|
"type": {
|
|
548
|
-
"text": "
|
|
548
|
+
"text": "string"
|
|
549
549
|
},
|
|
550
550
|
"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)*",
|
|
551
551
|
"fieldName": "markers"
|
|
@@ -678,7 +678,7 @@
|
|
|
678
678
|
"name": "markers",
|
|
679
679
|
"privacy": "public",
|
|
680
680
|
"type": {
|
|
681
|
-
"text": "
|
|
681
|
+
"text": "string"
|
|
682
682
|
},
|
|
683
683
|
"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)*",
|
|
684
684
|
"attribute": "markers",
|
|
@@ -879,7 +879,7 @@
|
|
|
879
879
|
{
|
|
880
880
|
"name": "markers",
|
|
881
881
|
"type": {
|
|
882
|
-
"text": "
|
|
882
|
+
"text": "string"
|
|
883
883
|
},
|
|
884
884
|
"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)*",
|
|
885
885
|
"fieldName": "markers",
|
|
@@ -1094,7 +1094,7 @@
|
|
|
1094
1094
|
"name": "categoryPosition",
|
|
1095
1095
|
"privacy": "public",
|
|
1096
1096
|
"type": {
|
|
1097
|
-
"text": "
|
|
1097
|
+
"text": "string"
|
|
1098
1098
|
},
|
|
1099
1099
|
"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`",
|
|
1100
1100
|
"attribute": "category-position",
|
|
@@ -1192,7 +1192,7 @@
|
|
|
1192
1192
|
"name": "stacking",
|
|
1193
1193
|
"privacy": "public",
|
|
1194
1194
|
"type": {
|
|
1195
|
-
"text": "
|
|
1195
|
+
"text": "string"
|
|
1196
1196
|
},
|
|
1197
1197
|
"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.",
|
|
1198
1198
|
"attribute": "stacking",
|
|
@@ -1206,7 +1206,7 @@
|
|
|
1206
1206
|
"name": "subtitle",
|
|
1207
1207
|
"privacy": "public",
|
|
1208
1208
|
"type": {
|
|
1209
|
-
"text": "string
|
|
1209
|
+
"text": "string"
|
|
1210
1210
|
},
|
|
1211
1211
|
"description": "Represents the subtitle of the chart.",
|
|
1212
1212
|
"attribute": "subtitle",
|
|
@@ -1449,7 +1449,7 @@
|
|
|
1449
1449
|
"type": {
|
|
1450
1450
|
"text": "CustomEvent"
|
|
1451
1451
|
},
|
|
1452
|
-
"description": "
|
|
1452
|
+
"description": "Fired when the point is selected either programmatically or by clicking on the point.",
|
|
1453
1453
|
"name": "point-select"
|
|
1454
1454
|
},
|
|
1455
1455
|
{
|
|
@@ -1505,15 +1505,15 @@
|
|
|
1505
1505
|
"type": {
|
|
1506
1506
|
"text": "CustomEvent"
|
|
1507
1507
|
},
|
|
1508
|
-
"description": "Fired when the mouse
|
|
1509
|
-
"name": "series-mouse-
|
|
1508
|
+
"description": "Fired when the mouse leaves the graph.",
|
|
1509
|
+
"name": "series-mouse-out"
|
|
1510
1510
|
},
|
|
1511
1511
|
{
|
|
1512
1512
|
"type": {
|
|
1513
1513
|
"text": "CustomEvent"
|
|
1514
1514
|
},
|
|
1515
|
-
"description": "Fired when the mouse
|
|
1516
|
-
"name": "series-mouse-
|
|
1515
|
+
"description": "Fired when the mouse enters the graph.",
|
|
1516
|
+
"name": "series-mouse-over"
|
|
1517
1517
|
},
|
|
1518
1518
|
{
|
|
1519
1519
|
"type": {
|
|
@@ -1617,7 +1617,7 @@
|
|
|
1617
1617
|
{
|
|
1618
1618
|
"name": "category-position",
|
|
1619
1619
|
"type": {
|
|
1620
|
-
"text": "
|
|
1620
|
+
"text": "string"
|
|
1621
1621
|
},
|
|
1622
1622
|
"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`",
|
|
1623
1623
|
"fieldName": "categoryPosition",
|
|
@@ -1689,7 +1689,7 @@
|
|
|
1689
1689
|
{
|
|
1690
1690
|
"name": "stacking",
|
|
1691
1691
|
"type": {
|
|
1692
|
-
"text": "
|
|
1692
|
+
"text": "string"
|
|
1693
1693
|
},
|
|
1694
1694
|
"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.",
|
|
1695
1695
|
"fieldName": "stacking",
|
|
@@ -1701,7 +1701,7 @@
|
|
|
1701
1701
|
{
|
|
1702
1702
|
"name": "subtitle",
|
|
1703
1703
|
"type": {
|
|
1704
|
-
"text": "string
|
|
1704
|
+
"text": "string"
|
|
1705
1705
|
},
|
|
1706
1706
|
"description": "Represents the subtitle of the chart.",
|
|
1707
1707
|
"fieldName": "subtitle",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/charts",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-beta4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/component-base": "25.1.0-
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
38
|
+
"@vaadin/component-base": "25.1.0-beta4",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta4",
|
|
40
40
|
"highcharts": "12.2.0",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "25.1.0-
|
|
45
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
46
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
44
|
+
"@vaadin/aura": "25.1.0-beta4",
|
|
45
|
+
"@vaadin/chai-plugins": "25.1.0-beta4",
|
|
46
|
+
"@vaadin/test-runner-commands": "25.1.0-beta4",
|
|
47
47
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
49
|
-
"sinon": "^21.0.
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta4",
|
|
49
|
+
"sinon": "^21.0.2"
|
|
50
50
|
},
|
|
51
51
|
"cvdlName": "vaadin-chart",
|
|
52
52
|
"customElements": "custom-elements.json",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "b27f6706a2b5c07cedec353fccbdecee95d53024"
|
|
58
58
|
}
|
|
@@ -177,7 +177,6 @@ export const ChartMixin = (superClass) =>
|
|
|
177
177
|
* Defaults to `undefined`
|
|
178
178
|
*
|
|
179
179
|
* @attr {left|right|top|bottom} category-position
|
|
180
|
-
* @type {ChartCategoryPosition | undefined}
|
|
181
180
|
*/
|
|
182
181
|
categoryPosition: {
|
|
183
182
|
type: String,
|
|
@@ -202,7 +201,6 @@ export const ChartMixin = (superClass) =>
|
|
|
202
201
|
* If "stack" property is not defined on the vaadin-chart-series elements, then series will be put into
|
|
203
202
|
* the default stack.
|
|
204
203
|
* @attr {normal|percent} stacking
|
|
205
|
-
* @type {ChartStacking | undefined}
|
|
206
204
|
*/
|
|
207
205
|
stacking: {
|
|
208
206
|
type: String,
|
|
@@ -250,7 +248,6 @@ export const ChartMixin = (superClass) =>
|
|
|
250
248
|
|
|
251
249
|
/**
|
|
252
250
|
* Represents the subtitle of the chart.
|
|
253
|
-
* @type {string | undefined}
|
|
254
251
|
*/
|
|
255
252
|
subtitle: {
|
|
256
253
|
type: String,
|
|
@@ -84,7 +84,6 @@ export const ChartSeriesMixin = (superClass) =>
|
|
|
84
84
|
* - `shown`: markers are always visible
|
|
85
85
|
* - `hidden`: markers are always hidden
|
|
86
86
|
* - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*
|
|
87
|
-
* @type {ChartSeriesMarkers | undefined}
|
|
88
87
|
*/
|
|
89
88
|
markers: {
|
|
90
89
|
type: String,
|
package/src/vaadin-chart.d.ts
CHANGED
|
@@ -129,14 +129,14 @@ export * from './vaadin-chart-mixin.js';
|
|
|
129
129
|
* @fires {CustomEvent} series-hide - Fired when the series is hidden after chart generation time.
|
|
130
130
|
* @fires {CustomEvent} series-legend-item-click - Fired when the legend item belonging to the series is clicked.
|
|
131
131
|
* @fires {CustomEvent} series-mouse-out - Fired when the mouse leaves the graph.
|
|
132
|
-
* @fires {CustomEvent} series-mouse-
|
|
132
|
+
* @fires {CustomEvent} series-mouse-over - Fired when the mouse enters the graph.
|
|
133
133
|
* @fires {CustomEvent} series-show - Fired when the series is shown after chart generation time.
|
|
134
134
|
* @fires {CustomEvent} point-click - Fired when the point is clicked.
|
|
135
135
|
* @fires {CustomEvent} point-legend-item-click - Fired when the legend item belonging to the point is clicked.
|
|
136
136
|
* @fires {CustomEvent} point-mouse-out - Fired when the mouse leaves the area close to the point.
|
|
137
137
|
* @fires {CustomEvent} point-mouse-over - Fired when the mouse enters the area close to the point.
|
|
138
138
|
* @fires {CustomEvent} point-remove - Fired when the point is removed from the series.
|
|
139
|
-
* @fires {CustomEvent} point-select -Fired when the point is selected either programmatically or by clicking on the point.
|
|
139
|
+
* @fires {CustomEvent} point-select - Fired when the point is selected either programmatically or by clicking on the point.
|
|
140
140
|
* @fires {CustomEvent} point-unselect - Fired when the point is unselected either programmatically or by clicking on the point.
|
|
141
141
|
* @fires {CustomEvent} point-update - Fired when the point is updated programmatically through `.updateConfiguration()` method.
|
|
142
142
|
* @fires {CustomEvent} point-drag-start - Fired when starting to drag a point.
|
package/src/vaadin-chart.js
CHANGED
|
@@ -134,14 +134,14 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
|
|
|
134
134
|
* @fires {CustomEvent} series-hide - Fired when the series is hidden after chart generation time.
|
|
135
135
|
* @fires {CustomEvent} series-legend-item-click - Fired when the legend item belonging to the series is clicked.
|
|
136
136
|
* @fires {CustomEvent} series-mouse-out - Fired when the mouse leaves the graph.
|
|
137
|
-
* @fires {CustomEvent} series-mouse-
|
|
137
|
+
* @fires {CustomEvent} series-mouse-over - Fired when the mouse enters the graph.
|
|
138
138
|
* @fires {CustomEvent} series-show - Fired when the series is shown after chart generation time.
|
|
139
139
|
* @fires {CustomEvent} point-click - Fired when the point is clicked.
|
|
140
140
|
* @fires {CustomEvent} point-legend-item-click - Fired when the legend item belonging to the point is clicked.
|
|
141
141
|
* @fires {CustomEvent} point-mouse-out - Fired when the mouse leaves the area close to the point.
|
|
142
142
|
* @fires {CustomEvent} point-mouse-over - Fired when the mouse enters the area close to the point.
|
|
143
143
|
* @fires {CustomEvent} point-remove - Fired when the point is removed from the series.
|
|
144
|
-
* @fires {CustomEvent} point-select -Fired when the point is selected either programmatically or by clicking on the point.
|
|
144
|
+
* @fires {CustomEvent} point-select - Fired when the point is selected either programmatically or by clicking on the point.
|
|
145
145
|
* @fires {CustomEvent} point-unselect - Fired when the point is unselected either programmatically or by clicking on the point.
|
|
146
146
|
* @fires {CustomEvent} point-update - Fired when the point is updated programmatically through `.updateConfiguration()` method.
|
|
147
147
|
* @fires {CustomEvent} point-drag-start - Fired when starting to drag a point.
|
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.1.0-
|
|
4
|
+
"version": "25.1.0-beta4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,7 +15,8 @@
|
|
|
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
|
-
"
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
19
20
|
"undefined"
|
|
20
21
|
]
|
|
21
22
|
}
|
|
@@ -134,7 +135,8 @@
|
|
|
134
135
|
"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)*",
|
|
135
136
|
"value": {
|
|
136
137
|
"type": [
|
|
137
|
-
"
|
|
138
|
+
"string",
|
|
139
|
+
"null",
|
|
138
140
|
"undefined"
|
|
139
141
|
]
|
|
140
142
|
}
|
|
@@ -239,7 +241,7 @@
|
|
|
239
241
|
},
|
|
240
242
|
{
|
|
241
243
|
"name": "vaadin-chart",
|
|
242
|
-
"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.1.0-
|
|
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.1.0-beta4/#/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.1.0-beta4/#/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.",
|
|
243
245
|
"attributes": [
|
|
244
246
|
{
|
|
245
247
|
"name": "category-max",
|
|
@@ -268,7 +270,8 @@
|
|
|
268
270
|
"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`",
|
|
269
271
|
"value": {
|
|
270
272
|
"type": [
|
|
271
|
-
"
|
|
273
|
+
"string",
|
|
274
|
+
"null",
|
|
272
275
|
"undefined"
|
|
273
276
|
]
|
|
274
277
|
}
|
|
@@ -322,7 +325,8 @@
|
|
|
322
325
|
"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.",
|
|
323
326
|
"value": {
|
|
324
327
|
"type": [
|
|
325
|
-
"
|
|
328
|
+
"string",
|
|
329
|
+
"null",
|
|
326
330
|
"undefined"
|
|
327
331
|
]
|
|
328
332
|
}
|
|
@@ -333,6 +337,7 @@
|
|
|
333
337
|
"value": {
|
|
334
338
|
"type": [
|
|
335
339
|
"string",
|
|
340
|
+
"null",
|
|
336
341
|
"undefined"
|
|
337
342
|
]
|
|
338
343
|
}
|
|
@@ -442,7 +447,8 @@
|
|
|
442
447
|
"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`",
|
|
443
448
|
"value": {
|
|
444
449
|
"type": [
|
|
445
|
-
"
|
|
450
|
+
"string",
|
|
451
|
+
"null",
|
|
446
452
|
"undefined"
|
|
447
453
|
]
|
|
448
454
|
}
|
|
@@ -506,7 +512,8 @@
|
|
|
506
512
|
"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.",
|
|
507
513
|
"value": {
|
|
508
514
|
"type": [
|
|
509
|
-
"
|
|
515
|
+
"string",
|
|
516
|
+
"null",
|
|
510
517
|
"undefined"
|
|
511
518
|
]
|
|
512
519
|
}
|
|
@@ -517,6 +524,7 @@
|
|
|
517
524
|
"value": {
|
|
518
525
|
"type": [
|
|
519
526
|
"string",
|
|
527
|
+
"null",
|
|
520
528
|
"undefined"
|
|
521
529
|
]
|
|
522
530
|
}
|
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.1.0-
|
|
4
|
+
"version": "25.1.0-beta4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -100,7 +100,7 @@
|
|
|
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.1.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.1.0-beta4/#/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.1.0-beta4/#/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
|
{
|