@vaadin/charts 25.3.0-alpha7 → 25.3.0-alpha8
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 +36 -29
- package/package.json +8 -8
- package/src/vaadin-chart.js +1 -0
- package/web-types.json +3 -16
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -1535,34 +1535,6 @@
|
|
|
1535
1535
|
"name": "yaxes-extremes-set"
|
|
1536
1536
|
}
|
|
1537
1537
|
],
|
|
1538
|
-
"mixins": [
|
|
1539
|
-
{
|
|
1540
|
-
"name": "ChartMixin",
|
|
1541
|
-
"module": "src/vaadin-chart-mixin.js"
|
|
1542
|
-
},
|
|
1543
|
-
{
|
|
1544
|
-
"name": "ThemableMixin",
|
|
1545
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1546
|
-
},
|
|
1547
|
-
{
|
|
1548
|
-
"name": "ElementMixin",
|
|
1549
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1550
|
-
},
|
|
1551
|
-
{
|
|
1552
|
-
"name": "PolylitMixin",
|
|
1553
|
-
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1554
|
-
},
|
|
1555
|
-
{
|
|
1556
|
-
"name": "LumoInjectionMixin",
|
|
1557
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1558
|
-
}
|
|
1559
|
-
],
|
|
1560
|
-
"superclass": {
|
|
1561
|
-
"name": "LitElement",
|
|
1562
|
-
"package": "lit"
|
|
1563
|
-
},
|
|
1564
|
-
"tagName": "vaadin-chart",
|
|
1565
|
-
"customElement": true,
|
|
1566
1538
|
"attributes": [
|
|
1567
1539
|
{
|
|
1568
1540
|
"name": "additional-options",
|
|
@@ -1708,6 +1680,13 @@
|
|
|
1708
1680
|
"module": "src/vaadin-chart-mixin.js"
|
|
1709
1681
|
}
|
|
1710
1682
|
},
|
|
1683
|
+
{
|
|
1684
|
+
"type": {
|
|
1685
|
+
"text": "string"
|
|
1686
|
+
},
|
|
1687
|
+
"description": "The theme variants to apply to the component.",
|
|
1688
|
+
"name": "theme"
|
|
1689
|
+
},
|
|
1711
1690
|
{
|
|
1712
1691
|
"name": "timeline",
|
|
1713
1692
|
"type": {
|
|
@@ -1756,7 +1735,35 @@
|
|
|
1756
1735
|
"module": "src/vaadin-chart-mixin.js"
|
|
1757
1736
|
}
|
|
1758
1737
|
}
|
|
1759
|
-
]
|
|
1738
|
+
],
|
|
1739
|
+
"mixins": [
|
|
1740
|
+
{
|
|
1741
|
+
"name": "ChartMixin",
|
|
1742
|
+
"module": "src/vaadin-chart-mixin.js"
|
|
1743
|
+
},
|
|
1744
|
+
{
|
|
1745
|
+
"name": "ThemableMixin",
|
|
1746
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1747
|
+
},
|
|
1748
|
+
{
|
|
1749
|
+
"name": "ElementMixin",
|
|
1750
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1751
|
+
},
|
|
1752
|
+
{
|
|
1753
|
+
"name": "PolylitMixin",
|
|
1754
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1755
|
+
},
|
|
1756
|
+
{
|
|
1757
|
+
"name": "LumoInjectionMixin",
|
|
1758
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1759
|
+
}
|
|
1760
|
+
],
|
|
1761
|
+
"superclass": {
|
|
1762
|
+
"name": "LitElement",
|
|
1763
|
+
"package": "lit"
|
|
1764
|
+
},
|
|
1765
|
+
"tagName": "vaadin-chart",
|
|
1766
|
+
"customElement": true
|
|
1760
1767
|
}
|
|
1761
1768
|
],
|
|
1762
1769
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/charts",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-alpha8",
|
|
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.3.0-
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/component-base": "25.3.0-alpha8",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha8",
|
|
40
40
|
"highcharts": "12.2.0",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "25.3.0-
|
|
45
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
46
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
44
|
+
"@vaadin/aura": "25.3.0-alpha8",
|
|
45
|
+
"@vaadin/chai-plugins": "25.3.0-alpha8",
|
|
46
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha8",
|
|
47
47
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha8",
|
|
49
49
|
"sinon": "^22.0.0"
|
|
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": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
|
|
58
58
|
}
|
package/src/vaadin-chart.js
CHANGED
|
@@ -149,6 +149,7 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
|
|
|
149
149
|
* @fires {CustomEvent} xaxes-extremes-set - Fired when the minimum and maximum is set for the X axis.
|
|
150
150
|
* @fires {CustomEvent} yaxes-extremes-set - Fired when the minimum and maximum is set for the Y axis.
|
|
151
151
|
*
|
|
152
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
152
153
|
* @customElement vaadin-chart
|
|
153
154
|
* @extends HTMLElement
|
|
154
155
|
*/
|
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.3.0-
|
|
4
|
+
"version": "25.3.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -49,17 +49,6 @@
|
|
|
49
49
|
]
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
|
-
{
|
|
53
|
-
"name": "theme",
|
|
54
|
-
"description": "The theme variants to apply to the component.",
|
|
55
|
-
"value": {
|
|
56
|
-
"type": [
|
|
57
|
-
"string",
|
|
58
|
-
"null",
|
|
59
|
-
"undefined"
|
|
60
|
-
]
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
52
|
{
|
|
64
53
|
"name": "title",
|
|
65
54
|
"description": "The name of the series as shown in the legend, tooltip etc.",
|
|
@@ -217,7 +206,7 @@
|
|
|
217
206
|
},
|
|
218
207
|
{
|
|
219
208
|
"name": "vaadin-chart",
|
|
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.3.0-
|
|
209
|
+
"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.3.0-alpha8/#/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.3.0-alpha8/#/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.",
|
|
221
210
|
"attributes": [
|
|
222
211
|
{
|
|
223
212
|
"name": "category-max",
|
|
@@ -305,9 +294,7 @@
|
|
|
305
294
|
"description": "The theme variants to apply to the component.",
|
|
306
295
|
"value": {
|
|
307
296
|
"type": [
|
|
308
|
-
"string"
|
|
309
|
-
"null",
|
|
310
|
-
"undefined"
|
|
297
|
+
"string"
|
|
311
298
|
]
|
|
312
299
|
}
|
|
313
300
|
},
|
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.3.0-
|
|
4
|
+
"version": "25.3.0-alpha8",
|
|
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.3.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.3.0-alpha8/#/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.3.0-alpha8/#/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
|
{
|