@vaadin/charts 24.0.0-alpha6 → 24.0.0-alpha7

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.
Files changed (4) hide show
  1. package/package.json +6 -6
  2. package/src/vaadin-chart.js +11 -11
  3. package/web-types.json +1 -446
  4. package/web-types.lit.json +1 -330
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/charts",
3
- "version": "24.0.0-alpha6",
3
+ "version": "24.0.0-alpha7",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,10 +36,10 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/component-base": "24.0.0-alpha6",
40
- "@vaadin/vaadin-lumo-styles": "24.0.0-alpha6",
41
- "@vaadin/vaadin-material-styles": "24.0.0-alpha6",
42
- "@vaadin/vaadin-themable-mixin": "24.0.0-alpha6",
39
+ "@vaadin/component-base": "24.0.0-alpha7",
40
+ "@vaadin/vaadin-lumo-styles": "24.0.0-alpha7",
41
+ "@vaadin/vaadin-material-styles": "24.0.0-alpha7",
42
+ "@vaadin/vaadin-themable-mixin": "24.0.0-alpha7",
43
43
  "highcharts": "9.2.2"
44
44
  },
45
45
  "devDependencies": {
@@ -52,5 +52,5 @@
52
52
  "web-types.json",
53
53
  "web-types.lit.json"
54
54
  ],
55
- "gitHead": "0004ac92b6e5f415b5fa949e0582d1d11e527b1f"
55
+ "gitHead": "aeb4535336813636736759e0a5de148b26bfc3b6"
56
56
  }
package/src/vaadin-chart.js CHANGED
@@ -549,12 +549,12 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
549
549
  deepMerge(options, this.additionalOptions);
550
550
 
551
551
  if (this.type) {
552
- options.chart = options.chart || {};
552
+ options.chart ||= {};
553
553
  options.chart.type = this.type;
554
554
  }
555
555
 
556
556
  if (this.polar) {
557
- options.chart = options.chart || {};
557
+ options.chart ||= {};
558
558
  options.chart.polar = true;
559
559
  }
560
560
 
@@ -579,7 +579,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
579
579
  }
580
580
 
581
581
  if (this.categories) {
582
- options.xAxis = options.xAxis || {};
582
+ options.xAxis ||= {};
583
583
  if (Array.isArray(options.xAxis)) {
584
584
  // Set categories on first X axis
585
585
  options.xAxis[0].categories = this.categories;
@@ -589,7 +589,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
589
589
  }
590
590
 
591
591
  if (isFinite(this.categoryMin)) {
592
- options.xAxis = options.xAxis || {};
592
+ options.xAxis ||= {};
593
593
  if (Array.isArray(options.xAxis)) {
594
594
  // Set category-min on first X axis
595
595
  options.xAxis[0].min = this.categoryMin;
@@ -599,7 +599,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
599
599
  }
600
600
 
601
601
  if (isFinite(this.categoryMax)) {
602
- options.xAxis = options.xAxis || {};
602
+ options.xAxis ||= {};
603
603
  if (Array.isArray(options.xAxis)) {
604
604
  // Set category-max on first x axis
605
605
  options.xAxis[0].max = this.categoryMax;
@@ -615,12 +615,12 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
615
615
  }
616
616
 
617
617
  if (this.emptyText) {
618
- options.lang = options.lang || {};
618
+ options.lang ||= {};
619
619
  options.lang.noData = this.emptyText;
620
620
  }
621
621
 
622
622
  if (this.categoryPosition) {
623
- options.chart = options.chart || {};
623
+ options.chart ||= {};
624
624
 
625
625
  options.chart.inverted = this.__shouldInvert();
626
626
 
@@ -634,13 +634,13 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
634
634
  }
635
635
 
636
636
  if (this.stacking) {
637
- options.plotOptions = options.plotOptions || {};
638
- options.plotOptions.series = options.plotOptions.series || {};
637
+ options.plotOptions ||= {};
638
+ options.plotOptions.series ||= {};
639
639
  options.plotOptions.series.stacking = this.stacking;
640
640
  }
641
641
 
642
642
  if (this.chart3d) {
643
- options.chart = options.chart || {};
643
+ options.chart ||= {};
644
644
 
645
645
  options.chart.options3d = { ...this._baseChart3d, ...options.chart.options3d };
646
646
  }
@@ -1372,7 +1372,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
1372
1372
 
1373
1373
  path = path.split('.');
1374
1374
  return path.reduce((obj, key) => {
1375
- obj[key] = obj[key] || {};
1375
+ obj[key] ||= {};
1376
1376
  return obj[key];
1377
1377
  }, object);
1378
1378
  }
package/web-types.json CHANGED
@@ -1,456 +1,11 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/charts",
4
- "version": "24.0.0-alpha6",
4
+ "version": "24.0.0-alpha7",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
- {
10
- "name": "vaadin-chart",
11
- "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#### Configuring your chart 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#### Configuring your chart using JS API\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data\n```js\ninitChartWithJSApi() {\n requestAnimationFrame(() => {\n const configuration = this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n super.connectedCallback();\n this.initChartWithJSApi();\n}\n```\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data\n```js\ninitChartWithJSJSONApi() {\n this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n super.connectedCallback();\n this.initChartWithJSJSONApi();\n}\n```\n\nIt should be noted that 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\nUsing as a base the project created with in Quick Start and an `additionalOptions` in order to make RTL adjustments:\n\n```html\n <vaadin-chart title=\"۱- عنوان نمودار\" subtitle=\"۲- عنوان فرعی نمودار\"\n additional-options='{\"title\": {\"useHTML\": true}, \"tooltip\": {\"useHTML\": true}, \"subtitle\": {\"useHTML\": true},\n \"legend\": {\"rtl\": true}, \"yAxis\": [{\"id\": \"۴- مقادیر\", \"title\": {\"text\": \"۴- مقادیر\", \"useHTML\": true}}],\n \"xAxis\": {\"reversed\": true}}'>\n <vaadin-chart-series\n type= \"column\"\n title=\"۳- عنوان ردیف\"\n unit=\"۴- مقادیر\"\n values=\"[10,20,30]\">\n </vaadin-chart-series>\n </vaadin-chart>\n```\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.\n\n### Validating your License\n\nWhen using Vaadin Charts in a development environment, you will see a pop-up that asks you\nto validate your license by signing in to vaadin.com.",
12
- "attributes": [
13
- {
14
- "name": "category-max",
15
- "description": "Category-axis maximum value. Defaults to `undefined`.",
16
- "value": {
17
- "type": [
18
- "number",
19
- "null",
20
- "undefined"
21
- ]
22
- }
23
- },
24
- {
25
- "name": "category-min",
26
- "description": "Category-axis minimum value. Defaults to `undefined`.",
27
- "value": {
28
- "type": [
29
- "number",
30
- "null",
31
- "undefined"
32
- ]
33
- }
34
- },
35
- {
36
- "name": "category-position",
37
- "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`",
38
- "value": {
39
- "type": [
40
- "ChartCategoryPosition",
41
- "undefined"
42
- ]
43
- }
44
- },
45
- {
46
- "name": "no-legend",
47
- "description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
48
- "value": {
49
- "type": [
50
- "boolean",
51
- "null",
52
- "undefined"
53
- ]
54
- }
55
- },
56
- {
57
- "name": "stacking",
58
- "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.",
59
- "value": {
60
- "type": [
61
- "ChartStacking",
62
- "undefined"
63
- ]
64
- }
65
- },
66
- {
67
- "name": "timeline",
68
- "description": "Specifies whether the chart is a normal chart or a timeline chart.",
69
- "value": {
70
- "type": [
71
- "boolean",
72
- "null",
73
- "undefined"
74
- ]
75
- }
76
- },
77
- {
78
- "name": "title",
79
- "description": "Represents the title of the chart.",
80
- "value": {
81
- "type": [
82
- "string"
83
- ]
84
- }
85
- },
86
- {
87
- "name": "tooltip",
88
- "description": "Whether or not to show tooltip when hovering data points.",
89
- "value": {
90
- "type": [
91
- "boolean",
92
- "null",
93
- "undefined"
94
- ]
95
- }
96
- },
97
- {
98
- "name": "type",
99
- "description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
100
- "value": {
101
- "type": [
102
- "string",
103
- "null",
104
- "undefined"
105
- ]
106
- }
107
- },
108
- {
109
- "name": "subtitle",
110
- "description": "Represents the subtitle of the chart.",
111
- "value": {
112
- "type": [
113
- "string",
114
- "undefined"
115
- ]
116
- }
117
- },
118
- {
119
- "name": "chart3d",
120
- "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).",
121
- "value": {
122
- "type": [
123
- "boolean",
124
- "null",
125
- "undefined"
126
- ]
127
- }
128
- },
129
- {
130
- "name": "empty-text",
131
- "description": "Specifies the message displayed on a chart without displayable data.",
132
- "value": {
133
- "type": [
134
- "string"
135
- ]
136
- }
137
- },
138
- {
139
- "name": "polar",
140
- "description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
141
- "value": {
142
- "type": [
143
- "boolean",
144
- "null",
145
- "undefined"
146
- ]
147
- }
148
- },
149
- {
150
- "name": "theme",
151
- "description": "The theme variants to apply to the component.",
152
- "value": {
153
- "type": [
154
- "string",
155
- "null",
156
- "undefined"
157
- ]
158
- }
159
- }
160
- ],
161
- "js": {
162
- "properties": [
163
- {
164
- "name": "configuration",
165
- "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)",
166
- "value": {
167
- "type": [
168
- "Highcharts.Chart",
169
- "undefined"
170
- ]
171
- }
172
- },
173
- {
174
- "name": "categories",
175
- "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'}`.",
176
- "value": {
177
- "type": [
178
- "ChartCategories",
179
- "undefined"
180
- ]
181
- }
182
- },
183
- {
184
- "name": "categoryMax",
185
- "description": "Category-axis maximum value. Defaults to `undefined`.",
186
- "value": {
187
- "type": [
188
- "number",
189
- "null",
190
- "undefined"
191
- ]
192
- }
193
- },
194
- {
195
- "name": "categoryMin",
196
- "description": "Category-axis minimum value. Defaults to `undefined`.",
197
- "value": {
198
- "type": [
199
- "number",
200
- "null",
201
- "undefined"
202
- ]
203
- }
204
- },
205
- {
206
- "name": "categoryPosition",
207
- "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`",
208
- "value": {
209
- "type": [
210
- "ChartCategoryPosition",
211
- "undefined"
212
- ]
213
- }
214
- },
215
- {
216
- "name": "noLegend",
217
- "description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
218
- "value": {
219
- "type": [
220
- "boolean",
221
- "null",
222
- "undefined"
223
- ]
224
- }
225
- },
226
- {
227
- "name": "stacking",
228
- "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.",
229
- "value": {
230
- "type": [
231
- "ChartStacking",
232
- "undefined"
233
- ]
234
- }
235
- },
236
- {
237
- "name": "timeline",
238
- "description": "Specifies whether the chart is a normal chart or a timeline chart.",
239
- "value": {
240
- "type": [
241
- "boolean",
242
- "null",
243
- "undefined"
244
- ]
245
- }
246
- },
247
- {
248
- "name": "title",
249
- "description": "Represents the title of the chart.",
250
- "value": {
251
- "type": [
252
- "string"
253
- ]
254
- }
255
- },
256
- {
257
- "name": "tooltip",
258
- "description": "Whether or not to show tooltip when hovering data points.",
259
- "value": {
260
- "type": [
261
- "boolean",
262
- "null",
263
- "undefined"
264
- ]
265
- }
266
- },
267
- {
268
- "name": "type",
269
- "description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
270
- "value": {
271
- "type": [
272
- "string",
273
- "null",
274
- "undefined"
275
- ]
276
- }
277
- },
278
- {
279
- "name": "subtitle",
280
- "description": "Represents the subtitle of the chart.",
281
- "value": {
282
- "type": [
283
- "string",
284
- "undefined"
285
- ]
286
- }
287
- },
288
- {
289
- "name": "chart3d",
290
- "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).",
291
- "value": {
292
- "type": [
293
- "boolean",
294
- "null",
295
- "undefined"
296
- ]
297
- }
298
- },
299
- {
300
- "name": "emptyText",
301
- "description": "Specifies the message displayed on a chart without displayable data.",
302
- "value": {
303
- "type": [
304
- "string"
305
- ]
306
- }
307
- },
308
- {
309
- "name": "additionalOptions",
310
- "description": "Represents additional JSON configuration.",
311
- "value": {
312
- "type": [
313
- "Options",
314
- "undefined"
315
- ]
316
- }
317
- },
318
- {
319
- "name": "polar",
320
- "description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
321
- "value": {
322
- "type": [
323
- "boolean",
324
- "null",
325
- "undefined"
326
- ]
327
- }
328
- }
329
- ],
330
- "events": [
331
- {
332
- "name": "chart-add-series",
333
- "description": "Fired when a new series is added."
334
- },
335
- {
336
- "name": "chart-after-export",
337
- "description": "Fired after a chart is exported."
338
- },
339
- {
340
- "name": "chart-after-print",
341
- "description": "Fired after a chart is printed."
342
- },
343
- {
344
- "name": "chart-before-export",
345
- "description": "Fired before a chart is exported."
346
- },
347
- {
348
- "name": "chart-before-print",
349
- "description": "Fired before a chart is printed."
350
- },
351
- {
352
- "name": "chart-click",
353
- "description": "Fired when clicking on the plot background."
354
- },
355
- {
356
- "name": "chart-drilldown",
357
- "description": "Fired when drilldown point is clicked."
358
- },
359
- {
360
- "name": "chart-drillup",
361
- "description": "Fired when drilling up from a drilldown series."
362
- },
363
- {
364
- "name": "chart-drillupall",
365
- "description": "Fired after all the series has been drilled up if chart has multiple drilldown series."
366
- },
367
- {
368
- "name": "chart-load",
369
- "description": "Fired when the chart is finished loading."
370
- },
371
- {
372
- "name": "chart-redraw",
373
- "description": "Fired when the chart is redraw. Can be called after a `Chart.configuration.redraw()`\nor after an axis, series or point is modified with the `redraw` option set to `true`."
374
- },
375
- {
376
- "name": "chart-selection",
377
- "description": "Fired when an area of the chart has been selected."
378
- },
379
- {
380
- "name": "point-click",
381
- "description": "Fired when the point is clicked."
382
- },
383
- {
384
- "name": "point-legend-item-click",
385
- "description": "Fired when the legend item belonging to the point is clicked."
386
- },
387
- {
388
- "name": "point-mouse-out",
389
- "description": "Fired when the mouse leaves the area close to the point."
390
- },
391
- {
392
- "name": "point-mouse-over",
393
- "description": "Fired when the mouse enters the area close to the point."
394
- },
395
- {
396
- "name": "point-remove",
397
- "description": "Fired when the point is removed from the series."
398
- },
399
- {
400
- "name": "point-select",
401
- "description": "Fired when the point is selected either programmatically or by clicking on the point."
402
- },
403
- {
404
- "name": "point-unselect",
405
- "description": "Fired when the point is unselected either programmatically or by clicking on the point"
406
- },
407
- {
408
- "name": "point-update",
409
- "description": "Fired when the point is updated programmatically through `.updateConfiguration()` method."
410
- },
411
- {
412
- "name": "series-after-animate",
413
- "description": "Fired when the series has finished its initial animation."
414
- },
415
- {
416
- "name": "series-checkbox-click",
417
- "description": "Fired when the checkbox next to the series' name in the legend is clicked."
418
- },
419
- {
420
- "name": "series-click",
421
- "description": "Fired when the series is clicked."
422
- },
423
- {
424
- "name": "series-hide",
425
- "description": "Fired when the series is hidden after chart generation time."
426
- },
427
- {
428
- "name": "series-legend-item-click",
429
- "description": "Fired when the legend item belonging to the series is clicked."
430
- },
431
- {
432
- "name": "series-mouse-out",
433
- "description": "Fired when the mouses leave the graph."
434
- },
435
- {
436
- "name": "series-mouse-over",
437
- "description": "Fired when the mouse enters the graph."
438
- },
439
- {
440
- "name": "series-show",
441
- "description": "Fired when the series is show after chart generation time."
442
- },
443
- {
444
- "name": "xaxes-extremes-set",
445
- "description": "Fired when when the minimum and maximum is set for the x axis."
446
- },
447
- {
448
- "name": "yaxes-extremes-set",
449
- "description": "Fired when when the minimum and maximum is set for the y axis."
450
- }
451
- ]
452
- }
453
- },
454
9
  {
455
10
  "name": "vaadin-chart-series",
456
11
  "description": "`<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.\n\n### Basic use\n\nTo use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:\n\n```html\n <vaadin-chart>\n <vaadin-chart-series></vaadin-chart-series>\n </vaadin-chart>\n```\n\n`<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:\n\n```html\n <vaadin-chart-series values=\"[10,20,30,40,50]\"></vaadin-chart-series>\n```\n\nwhich will add a new line series, where each value will be a data point.\nLook for the Properties session to see all available attributes.\n\n### Dynamically adding and removing series\n\nYou are also able to add and remove series by using DOM API.\n\nTo create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:\n\n```js\n const chart = \\* a <vaadin-chart> reference *\\\n const newSeries = document.createElement('vaadin-chart-series');\n newSeries.values = [10,20,30,40,50];\n chart.appendChild(newSeries);\n```\n\nIn order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:\n\n```js\n const chart = \\* a <vaadin-chart> reference *\\\n const seriesToBeRemoved = \\* a <vaadin-chart-series> reference to remove*\\\n chart.removeChild(seriesToBeRemoved);\n```",
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": "24.0.0-alpha6",
4
+ "version": "24.0.0-alpha7",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -14,335 +14,6 @@
14
14
  "contributions": {
15
15
  "html": {
16
16
  "elements": [
17
- {
18
- "name": "vaadin-chart",
19
- "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#### Configuring your chart 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#### Configuring your chart using JS API\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data\n```js\ninitChartWithJSApi() {\n requestAnimationFrame(() => {\n const configuration = this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n super.connectedCallback();\n this.initChartWithJSApi();\n}\n```\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data\n```js\ninitChartWithJSJSONApi() {\n this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n super.connectedCallback();\n this.initChartWithJSJSONApi();\n}\n```\n\nIt should be noted that 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\nUsing as a base the project created with in Quick Start and an `additionalOptions` in order to make RTL adjustments:\n\n```html\n <vaadin-chart title=\"۱- عنوان نمودار\" subtitle=\"۲- عنوان فرعی نمودار\"\n additional-options='{\"title\": {\"useHTML\": true}, \"tooltip\": {\"useHTML\": true}, \"subtitle\": {\"useHTML\": true},\n \"legend\": {\"rtl\": true}, \"yAxis\": [{\"id\": \"۴- مقادیر\", \"title\": {\"text\": \"۴- مقادیر\", \"useHTML\": true}}],\n \"xAxis\": {\"reversed\": true}}'>\n <vaadin-chart-series\n type= \"column\"\n title=\"۳- عنوان ردیف\"\n unit=\"۴- مقادیر\"\n values=\"[10,20,30]\">\n </vaadin-chart-series>\n </vaadin-chart>\n```\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.\n\n### Validating your License\n\nWhen using Vaadin Charts in a development environment, you will see a pop-up that asks you\nto validate your license by signing in to vaadin.com.",
20
- "extension": true,
21
- "attributes": [
22
- {
23
- "name": "?noLegend",
24
- "description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
25
- "value": {
26
- "kind": "expression"
27
- }
28
- },
29
- {
30
- "name": "?timeline",
31
- "description": "Specifies whether the chart is a normal chart or a timeline chart.",
32
- "value": {
33
- "kind": "expression"
34
- }
35
- },
36
- {
37
- "name": "?tooltip",
38
- "description": "Whether or not to show tooltip when hovering data points.",
39
- "value": {
40
- "kind": "expression"
41
- }
42
- },
43
- {
44
- "name": "?chart3d",
45
- "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).",
46
- "value": {
47
- "kind": "expression"
48
- }
49
- },
50
- {
51
- "name": "?polar",
52
- "description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
53
- "value": {
54
- "kind": "expression"
55
- }
56
- },
57
- {
58
- "name": ".configuration",
59
- "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)",
60
- "value": {
61
- "kind": "expression"
62
- }
63
- },
64
- {
65
- "name": ".categories",
66
- "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'}`.",
67
- "value": {
68
- "kind": "expression"
69
- }
70
- },
71
- {
72
- "name": ".categoryMax",
73
- "description": "Category-axis maximum value. Defaults to `undefined`.",
74
- "value": {
75
- "kind": "expression"
76
- }
77
- },
78
- {
79
- "name": ".categoryMin",
80
- "description": "Category-axis minimum value. Defaults to `undefined`.",
81
- "value": {
82
- "kind": "expression"
83
- }
84
- },
85
- {
86
- "name": ".categoryPosition",
87
- "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`",
88
- "value": {
89
- "kind": "expression"
90
- }
91
- },
92
- {
93
- "name": ".stacking",
94
- "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.",
95
- "value": {
96
- "kind": "expression"
97
- }
98
- },
99
- {
100
- "name": ".title",
101
- "description": "Represents the title of the chart.",
102
- "value": {
103
- "kind": "expression"
104
- }
105
- },
106
- {
107
- "name": ".type",
108
- "description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
109
- "value": {
110
- "kind": "expression"
111
- }
112
- },
113
- {
114
- "name": ".subtitle",
115
- "description": "Represents the subtitle of the chart.",
116
- "value": {
117
- "kind": "expression"
118
- }
119
- },
120
- {
121
- "name": ".emptyText",
122
- "description": "Specifies the message displayed on a chart without displayable data.",
123
- "value": {
124
- "kind": "expression"
125
- }
126
- },
127
- {
128
- "name": ".additionalOptions",
129
- "description": "Represents additional JSON configuration.",
130
- "value": {
131
- "kind": "expression"
132
- }
133
- },
134
- {
135
- "name": "@chart-add-series",
136
- "description": "Fired when a new series is added.",
137
- "value": {
138
- "kind": "expression"
139
- }
140
- },
141
- {
142
- "name": "@chart-after-export",
143
- "description": "Fired after a chart is exported.",
144
- "value": {
145
- "kind": "expression"
146
- }
147
- },
148
- {
149
- "name": "@chart-after-print",
150
- "description": "Fired after a chart is printed.",
151
- "value": {
152
- "kind": "expression"
153
- }
154
- },
155
- {
156
- "name": "@chart-before-export",
157
- "description": "Fired before a chart is exported.",
158
- "value": {
159
- "kind": "expression"
160
- }
161
- },
162
- {
163
- "name": "@chart-before-print",
164
- "description": "Fired before a chart is printed.",
165
- "value": {
166
- "kind": "expression"
167
- }
168
- },
169
- {
170
- "name": "@chart-click",
171
- "description": "Fired when clicking on the plot background.",
172
- "value": {
173
- "kind": "expression"
174
- }
175
- },
176
- {
177
- "name": "@chart-drilldown",
178
- "description": "Fired when drilldown point is clicked.",
179
- "value": {
180
- "kind": "expression"
181
- }
182
- },
183
- {
184
- "name": "@chart-drillup",
185
- "description": "Fired when drilling up from a drilldown series.",
186
- "value": {
187
- "kind": "expression"
188
- }
189
- },
190
- {
191
- "name": "@chart-drillupall",
192
- "description": "Fired after all the series has been drilled up if chart has multiple drilldown series.",
193
- "value": {
194
- "kind": "expression"
195
- }
196
- },
197
- {
198
- "name": "@chart-load",
199
- "description": "Fired when the chart is finished loading.",
200
- "value": {
201
- "kind": "expression"
202
- }
203
- },
204
- {
205
- "name": "@chart-redraw",
206
- "description": "Fired when the chart is redraw. Can be called after a `Chart.configuration.redraw()`\nor after an axis, series or point is modified with the `redraw` option set to `true`.",
207
- "value": {
208
- "kind": "expression"
209
- }
210
- },
211
- {
212
- "name": "@chart-selection",
213
- "description": "Fired when an area of the chart has been selected.",
214
- "value": {
215
- "kind": "expression"
216
- }
217
- },
218
- {
219
- "name": "@point-click",
220
- "description": "Fired when the point is clicked.",
221
- "value": {
222
- "kind": "expression"
223
- }
224
- },
225
- {
226
- "name": "@point-legend-item-click",
227
- "description": "Fired when the legend item belonging to the point is clicked.",
228
- "value": {
229
- "kind": "expression"
230
- }
231
- },
232
- {
233
- "name": "@point-mouse-out",
234
- "description": "Fired when the mouse leaves the area close to the point.",
235
- "value": {
236
- "kind": "expression"
237
- }
238
- },
239
- {
240
- "name": "@point-mouse-over",
241
- "description": "Fired when the mouse enters the area close to the point.",
242
- "value": {
243
- "kind": "expression"
244
- }
245
- },
246
- {
247
- "name": "@point-remove",
248
- "description": "Fired when the point is removed from the series.",
249
- "value": {
250
- "kind": "expression"
251
- }
252
- },
253
- {
254
- "name": "@point-select",
255
- "description": "Fired when the point is selected either programmatically or by clicking on the point.",
256
- "value": {
257
- "kind": "expression"
258
- }
259
- },
260
- {
261
- "name": "@point-unselect",
262
- "description": "Fired when the point is unselected either programmatically or by clicking on the point",
263
- "value": {
264
- "kind": "expression"
265
- }
266
- },
267
- {
268
- "name": "@point-update",
269
- "description": "Fired when the point is updated programmatically through `.updateConfiguration()` method.",
270
- "value": {
271
- "kind": "expression"
272
- }
273
- },
274
- {
275
- "name": "@series-after-animate",
276
- "description": "Fired when the series has finished its initial animation.",
277
- "value": {
278
- "kind": "expression"
279
- }
280
- },
281
- {
282
- "name": "@series-checkbox-click",
283
- "description": "Fired when the checkbox next to the series' name in the legend is clicked.",
284
- "value": {
285
- "kind": "expression"
286
- }
287
- },
288
- {
289
- "name": "@series-click",
290
- "description": "Fired when the series is clicked.",
291
- "value": {
292
- "kind": "expression"
293
- }
294
- },
295
- {
296
- "name": "@series-hide",
297
- "description": "Fired when the series is hidden after chart generation time.",
298
- "value": {
299
- "kind": "expression"
300
- }
301
- },
302
- {
303
- "name": "@series-legend-item-click",
304
- "description": "Fired when the legend item belonging to the series is clicked.",
305
- "value": {
306
- "kind": "expression"
307
- }
308
- },
309
- {
310
- "name": "@series-mouse-out",
311
- "description": "Fired when the mouses leave the graph.",
312
- "value": {
313
- "kind": "expression"
314
- }
315
- },
316
- {
317
- "name": "@series-mouse-over",
318
- "description": "Fired when the mouse enters the graph.",
319
- "value": {
320
- "kind": "expression"
321
- }
322
- },
323
- {
324
- "name": "@series-show",
325
- "description": "Fired when the series is show after chart generation time.",
326
- "value": {
327
- "kind": "expression"
328
- }
329
- },
330
- {
331
- "name": "@xaxes-extremes-set",
332
- "description": "Fired when when the minimum and maximum is set for the x axis.",
333
- "value": {
334
- "kind": "expression"
335
- }
336
- },
337
- {
338
- "name": "@yaxes-extremes-set",
339
- "description": "Fired when when the minimum and maximum is set for the y axis.",
340
- "value": {
341
- "kind": "expression"
342
- }
343
- }
344
- ]
345
- },
346
17
  {
347
18
  "name": "vaadin-chart-series",
348
19
  "description": "`<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.\n\n### Basic use\n\nTo use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:\n\n```html\n <vaadin-chart>\n <vaadin-chart-series></vaadin-chart-series>\n </vaadin-chart>\n```\n\n`<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:\n\n```html\n <vaadin-chart-series values=\"[10,20,30,40,50]\"></vaadin-chart-series>\n```\n\nwhich will add a new line series, where each value will be a data point.\nLook for the Properties session to see all available attributes.\n\n### Dynamically adding and removing series\n\nYou are also able to add and remove series by using DOM API.\n\nTo create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:\n\n```js\n const chart = \\* a <vaadin-chart> reference *\\\n const newSeries = document.createElement('vaadin-chart-series');\n newSeries.values = [10,20,30,40,50];\n chart.appendChild(newSeries);\n```\n\nIn order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:\n\n```js\n const chart = \\* a <vaadin-chart> reference *\\\n const seriesToBeRemoved = \\* a <vaadin-chart-series> reference to remove*\\\n chart.removeChild(seriesToBeRemoved);\n```",