@vaadin/vaadin-charts 6.2.4 → 6.3.3

package/README.md

@@ -1,22 +1,17 @@
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-charts)](https://www.npmjs.com/package/@vaadin/vaadin-charts)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-charts)](https://github.com/vaadin/vaadin-charts/releases)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-charts.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-charts)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-charts/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-charts?branch=master)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-charts)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-
-[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-element)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-charts.svg)](https://vaadin.com/directory/component/vaadinvaadin-charts)
+# Vaadin Charts
 
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-charts) monorepository.
+> This repository contains the source code and releases of `<vaadin-chart>` for the Vaadin versions 10 to 19.
 
-# Vaadin Charts
+[Vaadin Charts](https://vaadin.com/components/vaadin-charts) is a Web Component for creating high quality charts, part of the [Vaadin components](https://vaadin.com/components).
 
 [Live Demo ↗](https://vaadin.com/components/vaadin-charts/examples)
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-charts/html-api)
 
-
-[Vaadin Charts](https://vaadin.com/components/vaadin-charts) is a Web Component for creating high quality charts, part of the [Vaadin components](https://vaadin.com/components).
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-charts)](https://www.npmjs.com/package/@vaadin/vaadin-charts)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-element)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 <!--
 ```

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-charts",
   "homepage": "https://vaadin.com/charts",
   "name": "@vaadin/vaadin-charts",
-  "version": "6.2.4",
+  "version": "6.3.3",
   "main": "vaadin-chart.js",
   "author": "Vaadin Ltd",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -23,6 +23,8 @@
     "theme"
   ],
   "resolutions": {
+    "es-abstract": "1.17.6",
+    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
@@ -31,25 +33,28 @@
   "dependencies": {
     "highcharts": "6.1.4",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.2.1",
+    "@vaadin/vaadin-themable-mixin": "^1.5.2",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-element-mixin": "^2.0.0"
+    "@vaadin/vaadin-element-mixin": "^2.3.2"
   },
-  "devDependencies": {
+  "scripts": {
+  "generate-typings": "gen-typescript-declarations --outDir . --verify"
+},
+"devDependencies": {
     "@polymer/iron-component-page": "^4.0.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^3.0.0",
-    "@vaadin/vaadin-grid": "^5.1.0",
+    "@vaadin/vaadin-demo-helpers": "^3.1.0",
+    "@vaadin/vaadin-grid": "^5.6.0",
     "@polymer/app-route": "^3.0.0",
     "@polymer/iron-icon": "^3.0.0",
     "@polymer/iron-icons": "^3.0.0",
     "@polymer/iron-iconset-svg": "^3.0.0",
     "@polymer/iron-pages": "^3.0.0",
     "@polymer/paper-button": "^3.0.0",
-    "@vaadin/vaadin-split-layout": "^4.1.0",
+    "@vaadin/vaadin-split-layout": "^4.2.0",
     "@vaadin/vaadin-icons": "^4.2.0",
-    "@vaadin/vaadin-button": "^2.1.0",
-    "@vaadin/vaadin-ordered-layout": "^1.1.0"
+    "@vaadin/vaadin-button": "^2.3.0-alpha1",
+    "@vaadin/vaadin-ordered-layout": "^1.3.0"
   }
 }

package/src/vaadin-chart-series.js

@@ -58,7 +58,7 @@ import { ChartDeepMerger, ChartElement } from './vaadin-chart.js';
  * @polymer
  * @customElement
  * @extends {Polymer.Element}
- * @memberof Vaadin
+ * @extends PolymerElement
  * @demo demo/index.html
  */
 class ChartSeriesElement extends PolymerElement {

package/src/vaadin-chart.js

@@ -105,7 +105,7 @@ if (!PolymerElement) {
  * ```
  * 1. Install Vaadin Charts
  * ```
- * bower install --save vaadin-charts#6.2.4
+ * bower install --save vaadin-charts
  * ```
  * 1. Import `<vaadin-chart>` to your app
  * Edit the file `src/my-app/my-app.html` and add the following snipped before the `<dom-module>` tag
@@ -133,7 +133,7 @@ if (!PolymerElement) {
  * ```
  * 1. Install Vaadin Charts
  * ```
- * npm i @vaadin/vaadin-charts@6.2.3 --save
+ * npm i @vaadin/vaadin-charts --save
  * ```
  * 1. Import `<vaadin-chart>` to your app
  * Edit the file `src/my-app/my-app.js` and add the following snipped on the top, after the first `import` declaration
@@ -315,6 +315,33 @@ if (!PolymerElement) {
  * </dom-module>
  * ```
  *
+ * ### RTL support
+ *
+ * `vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout
+ * based on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional
+ * JSON configuration should be used.
+ * Each chart should be updated based on the specific needs, but general recommendations are:
+ *
+ *  1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).
+ *  2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).
+ *  3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).
+ *
+ * Using as a base the project created with in Quick Start and an `additionalOptions` in order to make RTL adjustments:
+ *
+ * ```html
+ *  <vaadin-chart title="۱- عنوان نمودار" subtitle="۲- عنوان فرعی نمودار"
+ *    additional-options='{"title": {"useHTML": true}, "tooltip": {"useHTML": true}, "subtitle": {"useHTML": true},
+ *    "legend": {"rtl": true}, "yAxis": [{"id": "۴- مقادیر", "title": {"text": "۴- مقادیر", "useHTML": true}}],
+ *    "xAxis": {"reversed": true}}'>
+ *    <vaadin-chart-series
+ *          type= "column"
+ *          title="۳- عنوان ردیف"
+ *          unit="۴- مقادیر"
+ *          values="[10,20,30]">
+ *    </vaadin-chart-series>
+ *  </vaadin-chart>
+ * ```
+ *
  * ### Setting colors
  *
  * Although charts can be styled as described above, there is a simpler way for setting colors.
@@ -326,7 +353,7 @@ if (!PolymerElement) {
  * After one day using Vaadin Charts in a development environment you will see a pop-up that asks you
  * to validate your license by signing in to vaadin.com.
  *
- * @memberof Vaadin
+ * @extends PolymerElement
  * @demo demo/index.html
  */
 class ChartElement extends ElementMixin(ThemableMixin(PolymerElement)) {
@@ -353,7 +380,7 @@ class ChartElement extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   static get version() {
-    return '6.2.3';
+    return '6.3.3';
   }
 
   static get properties() {
@@ -1023,11 +1050,13 @@ class ChartElement extends ElementMixin(ThemableMixin(PolymerElement)) {
         this.__setYAxisProps(yAxes, unit, {max: valueMax});
       }
 
-      const seriesConfiguration = this.__updateOrAddSeriesInstance(seriesElement.options, idxOnChildList);
+      const seriesConfiguration = this.__updateOrAddSeriesInstance(seriesElement.options, idxOnChildList, false);
 
       seriesElement.setSeries(seriesConfiguration);
     }
     this.__removeAxisIfEmpty();
+
+    this.configuration.redraw();
   }
 
   __removeSeries(seriesNodes) {
@@ -1081,6 +1110,21 @@ class ChartElement extends ElementMixin(ThemableMixin(PolymerElement)) {
     } else {
       this.configuration = Highcharts.chart(this.$.chart, options);
     }
+
+    // Workaround for https://github.com/highcharts/highcharts/issues/9978
+    const elementsToChange = [
+      ...Array.from(this.$.chart.getElementsByTagName('h4'))
+        .filter(el => el.style.left === '-9999px'),
+      this.configuration.screenReaderRegion,
+      this.configuration.tabExitAnchor
+    ];
+
+    elementsToChange.forEach(el => {
+      if (el && el.style) {
+        el.style.left = '';
+        el.style.top = '-999em';
+      }
+    });
   }
 
   /** @private */
@@ -1193,20 +1237,22 @@ class ChartElement extends ElementMixin(ThemableMixin(PolymerElement)) {
         return;
       }
 
-      this.configuration.update(this._jsonConfigurationBuffer);
+      this.configuration.update(this._jsonConfigurationBuffer, false);
       if (this._jsonConfigurationBuffer.credits) {
         this.__updateOrAddCredits(this._jsonConfigurationBuffer.credits);
       }
       if (this._jsonConfigurationBuffer.xAxis) {
-        this.__updateOrAddAxes(this._jsonConfigurationBuffer.xAxis, true);
+        this.__updateOrAddAxes(this._jsonConfigurationBuffer.xAxis, true, false);
       }
       if (this._jsonConfigurationBuffer.yAxis) {
-        this.__updateOrAddAxes(this._jsonConfigurationBuffer.yAxis, false);
+        this.__updateOrAddAxes(this._jsonConfigurationBuffer.yAxis, false, false);
       }
       if (this._jsonConfigurationBuffer.series) {
-        this.__updateOrAddSeries(this._jsonConfigurationBuffer.series);
+        this.__updateOrAddSeries(this._jsonConfigurationBuffer.series, false);
       }
       this._jsonConfigurationBuffer = null;
+
+      this.configuration.redraw();
     });
   }
 
@@ -1428,7 +1474,7 @@ class ChartElement extends ElementMixin(ThemableMixin(PolymerElement)) {
     }
   }
 
-  __updateOrAddAxes(axes, isX) {
+  __updateOrAddAxes(axes, isX, redraw) {
     if (!Array.isArray(axes)) {
       axes = [axes];
     }
@@ -1436,28 +1482,28 @@ class ChartElement extends ElementMixin(ThemableMixin(PolymerElement)) {
     for (let i = 0; i < axes.length; i++) {
       const axis = axes[i];
       if (confAxes[i]) {
-        confAxes[i].update(axis);
+        confAxes[i].update(axis, redraw);
       } else {
-        this.configuration.addAxis(axis, isX);
+        this.configuration.addAxis(axis, isX, redraw);
       }
     }
   }
 
-  __updateOrAddSeries(series) {
+  __updateOrAddSeries(series, redraw) {
     if (!Array.isArray(series)) {
       throw new Error('The type of jsonConfiguration.series should be Object[]');
     }
     for (let i = 0; i < series.length; i++) {
       const currentSeries = series[i];
-      this.__updateOrAddSeriesInstance(currentSeries, i);
+      this.__updateOrAddSeriesInstance(currentSeries, i, redraw);
     }
   }
 
-  __updateOrAddSeriesInstance(seriesOptions, position) {
+  __updateOrAddSeriesInstance(seriesOptions, position, redraw) {
     if (this.configuration.series[position]) {
-      this.configuration.series[position].update(seriesOptions);
+      this.configuration.series[position].update(seriesOptions, redraw);
     } else {
-      this.configuration.addSeries(seriesOptions);
+      this.configuration.addSeries(seriesOptions, redraw);
     }
     return this.configuration.series[position];
   }

package/theme/vaadin-chart-default-theme.js

@@ -857,6 +857,19 @@ text.highcharts-drilldown-data-label,
 }
 
 
+/* RTL styles */
+:host([dir="rtl"]) .highcharts-container {
+  text-align: right;
+}
+
+:host([dir="rtl"]) input.highcharts-range-selector {
+  left: auto;
+  right: -9em;
+}
+
+:host([dir="rtl"]) .highcharts-menu {
+  box-shadow: -3px 3px 10px #888;
+}
 
 
 /* stylelint-enable */