@vaadin/charts 25.3.0-beta2 → 25.3.0-beta3
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/charts",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-beta3",
|
|
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-beta3",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-beta3",
|
|
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-beta3",
|
|
45
|
+
"@vaadin/chai-plugins": "25.3.0-beta3",
|
|
46
|
+
"@vaadin/test-runner-commands": "25.3.0-beta3",
|
|
47
47
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-beta3",
|
|
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": "1ea43188e1297f6898cbf9d3610b85a7a2cca6f0"
|
|
58
58
|
}
|
|
@@ -55,6 +55,12 @@ const tooltipStyles = (scope) => css`
|
|
|
55
55
|
filter: drop-shadow(var(--vaadin-charts-tooltip-shadow, 0 4px 8px rgba(0, 0, 0, 0.2))) !important;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
/* Marked by the mixin for stickOnContact, which Highcharts itself only honours
|
|
59
|
+
outside styled mode. See highcharts/highcharts#25310. */
|
|
60
|
+
${unsafeCSS(scope)} .highcharts-tooltip.vaadin-chart-sticky-tooltip {
|
|
61
|
+
pointer-events: auto;
|
|
62
|
+
}
|
|
63
|
+
|
|
58
64
|
${unsafeCSS(scope)} .highcharts-tooltip text,
|
|
59
65
|
${unsafeCSS(scope)} .highcharts-tooltip foreignObject span {
|
|
60
66
|
fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-data-label, var(--vaadin-text-color)));
|
|
@@ -28,7 +28,6 @@ import 'highcharts/es-modules/masters/modules/bullet.src.js';
|
|
|
28
28
|
import 'highcharts/es-modules/masters/modules/gantt.src.js';
|
|
29
29
|
import 'highcharts/es-modules/masters/modules/draggable-points.src.js';
|
|
30
30
|
import KeyboardNavigation from 'highcharts/es-modules/Accessibility/KeyboardNavigation.js';
|
|
31
|
-
import HTMLUtilities from 'highcharts/es-modules/Accessibility/Utils/HTMLUtilities.js';
|
|
32
31
|
import Pointer from 'highcharts/es-modules/Core/Pointer.js';
|
|
33
32
|
import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
|
|
34
33
|
import { deepMerge } from '@vaadin/component-base/src/object-utils.js';
|
|
@@ -51,56 +50,28 @@ Highcharts.wrap(Highcharts.Chart.prototype, 'getSVG', function (proceed, ...args
|
|
|
51
50
|
});
|
|
52
51
|
/* eslint-enable @typescript-eslint/no-invalid-this, prefer-arrow-callback */
|
|
53
52
|
|
|
54
|
-
//
|
|
55
|
-
//
|
|
56
|
-
//
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
// If we're outside, hide the tooltip
|
|
63
|
-
if (
|
|
64
|
-
chartPosition &&
|
|
65
|
-
(!tooltip || !tooltip.isSticky) &&
|
|
66
|
-
!chart.isInsidePlot(pEvt.chartX - chart.plotLeft, pEvt.chartY - chart.plotTop, {
|
|
67
|
-
visiblePlotOnly: true,
|
|
68
|
-
}) &&
|
|
69
|
-
// Use the first element from the composed path instead of the actual target
|
|
70
|
-
!this.inClass(pEvt.composedPath()[0], 'highcharts-tracker')
|
|
71
|
-
) {
|
|
72
|
-
this.reset();
|
|
53
|
+
// Document-level handlers see <vaadin-chart> as the target inside a shadow root, so retarget
|
|
54
|
+
// to the composed path. Remove when fixed: vaadin/web-components#7107 (onDocumentMouseMove)
|
|
55
|
+
// and highcharts/highcharts#23490 (onMouseUp).
|
|
56
|
+
/* eslint-disable @typescript-eslint/no-invalid-this */
|
|
57
|
+
function withComposedTarget(proceed, e, ...args) {
|
|
58
|
+
// Only a shadow host can be a retargeted event target.
|
|
59
|
+
if (!e.target?.shadowRoot) {
|
|
60
|
+
return proceed.call(this, e, ...args);
|
|
73
61
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
// Workaround for https://github.com/highcharts/highcharts/issues/23490
|
|
82
|
-
//
|
|
83
|
-
// TODO: Remove this monkeypatch once the referenced issue is fixed
|
|
84
|
-
const { simulatedEventTarget } = HTMLUtilities;
|
|
85
|
-
KeyboardNavigation.prototype.onMouseUp = function (e) {
|
|
86
|
-
delete this.isClickingChart;
|
|
87
|
-
if (!this.keyboardReset && e.relatedTarget !== simulatedEventTarget) {
|
|
88
|
-
const chart = this.chart;
|
|
89
|
-
const target = e.composedPath()[0];
|
|
90
|
-
if (!target || !chart.container.contains(target)) {
|
|
91
|
-
const curMod = this.modules?.[this.currentModuleIx || 0];
|
|
92
|
-
if (curMod?.terminate) {
|
|
93
|
-
curMod.terminate();
|
|
94
|
-
}
|
|
95
|
-
this.currentModuleIx = 0;
|
|
96
|
-
}
|
|
97
|
-
if (chart.focusElement) {
|
|
98
|
-
chart.focusElement.removeFocusBorder();
|
|
99
|
-
delete chart.focusElement;
|
|
100
|
-
}
|
|
101
|
-
this.keyboardReset = true;
|
|
62
|
+
|
|
63
|
+
// `delete` restores the inherited Event.prototype.target accessor.
|
|
64
|
+
Object.defineProperty(e, 'target', { value: e.composedPath()[0], configurable: true });
|
|
65
|
+
try {
|
|
66
|
+
return proceed.call(this, e, ...args);
|
|
67
|
+
} finally {
|
|
68
|
+
delete e.target;
|
|
102
69
|
}
|
|
103
|
-
}
|
|
70
|
+
}
|
|
71
|
+
/* eslint-enable @typescript-eslint/no-invalid-this */
|
|
72
|
+
|
|
73
|
+
Highcharts.wrap(Pointer.prototype, 'onDocumentMouseMove', withComposedTarget);
|
|
74
|
+
Highcharts.wrap(KeyboardNavigation.prototype, 'onMouseUp', withComposedTarget);
|
|
104
75
|
|
|
105
76
|
// Init Highcharts global language defaults
|
|
106
77
|
// No data message should be empty by default
|
|
@@ -725,6 +696,7 @@ export const ChartMixin = (superClass) =>
|
|
|
725
696
|
}
|
|
726
697
|
|
|
727
698
|
this.__syncOutsideTooltipColors();
|
|
699
|
+
this.__markStickyTooltip();
|
|
728
700
|
this.__redrawOrganizationDataLabels();
|
|
729
701
|
}
|
|
730
702
|
|
|
@@ -754,6 +726,22 @@ export const ChartMixin = (superClass) =>
|
|
|
754
726
|
});
|
|
755
727
|
}
|
|
756
728
|
|
|
729
|
+
/**
|
|
730
|
+
* Marks the tooltip so the stylesheet can make it reachable by the pointer. CSS
|
|
731
|
+
* cannot see the `stickOnContact` option, and Highcharts only applies it itself
|
|
732
|
+
* when styled mode is off. See highcharts/highcharts#25310.
|
|
733
|
+
*
|
|
734
|
+
* @private
|
|
735
|
+
*/
|
|
736
|
+
__markStickyTooltip() {
|
|
737
|
+
const { tooltip } = this.configuration;
|
|
738
|
+
|
|
739
|
+
Highcharts.addEvent(tooltip, 'refresh', () => {
|
|
740
|
+
// `refresh` also fires when a formatter returns false, before any label exists.
|
|
741
|
+
tooltip.label?.element.classList.toggle('vaadin-chart-sticky-tooltip', tooltip.shouldStickOnContact());
|
|
742
|
+
});
|
|
743
|
+
}
|
|
744
|
+
|
|
757
745
|
/** @protected */
|
|
758
746
|
disconnectedCallback() {
|
|
759
747
|
super.disconnectedCallback();
|
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-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
},
|
|
207
207
|
{
|
|
208
208
|
"name": "vaadin-chart",
|
|
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-
|
|
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-beta3/#/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-beta3/#/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.",
|
|
210
210
|
"attributes": [
|
|
211
211
|
{
|
|
212
212
|
"name": "category-max",
|
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-beta3",
|
|
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-beta3/#/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-beta3/#/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
|
{
|