v6.0.0-beta2 (#291)

README.md

@@ -15,7 +15,7 @@
 
 ### Install Vaadin Charts
 ```
-$ bower install --save vaadin-charts#6.0.0-beta1
+$ bower install --save vaadin-charts#6.0.0-beta2
 ```
 
 ### Import Vaadin Charts

analysis.json

@@ -201,7 +201,7 @@
           "tagname": "vaadin-chart-series"
         },
         {
-          "description": "`<vaadin-chart>` is a Polymer 2 element for creating high quality charts.\n\n### Quick Start\n\n1. Create a Polymer application using [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli)\n```\nmkdir my-app\ncd my-app\npolymer init\nselect `polymer-2-application`\n```\n1. Install Vaadin Charts\n```\nbower install --save vaadin-charts#6.0.0-beta1\n```\n1. Import `<vaadin-chart>` to your app\nEdit the file `src/my-app/my-app.html` and add the following snipped before the `<dom-module>` tag\n```html\n<link rel=\"import\" href=\"../../bower_components/vaadin-charts/vaadin-chart.html\">\n```\n1. Add your first `<vaadin-chart>`\nAlso in `my-app.html` add the following snippet before the `</template>` closing tag\n```html\n<vaadin-chart></vaadin-chart>\n```\n1. Run your app with:\n```\npolymer serve --open\n```\nCongratulations! You have your first Vaadin Chart setup.\n\n### Basic use\n\nNow that we covered the basic steps to create an empty chart, let us show how you can configure it.\n\nThere are two ways of configuring your `<vaadin-chart>` element: **JS API** and **JSON API**.\nNote that you can make use of both APIs in your element.\n\n#### Configuring your chart using JS API\n\nUsing as a base the project created with in Quick Start\n\nDo the following changes in `my-app.html`\n\n1. Set and 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```\ninitChartWithJSApi() {\n    Polymer.RenderStatus.beforeNextRender(this, () => {\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```\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSApi();\n}\n```\n1. And finally run your app with:\n```\npolymer serve --open\n```\n\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\nUsing as a base the project created with in Quick Start\n\nDo the following changes in `my-app.html`\n\n1. Set and id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `update` method (JS JSON Api) to set chart title, categories and data\n```\ninitChartWithJSJSONApi() {\n    this.$.mychart.update({\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```\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSJSONApi();\n}\n```\n1. And finally run your app with:\n```\npolymer serve --open\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\n### CSS Styling\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\n\n### Steps for styling a chart\n\n1. Create a theme file (for example `shared-styles.html`). The theme's dom-module must declare `theme-for=vaadin-chart`.\n2. Import `vaadin-chart-default-theme.html` and declare `include=\"vaadin-chart-default-theme\"`\non the theme module's style tag to customize Chart's default theme. If there are multiple theme\nmodules *only one* of them should declare this `include`.\n3. Specify the desired CSS rules in the theme file.\n4. If multiple charts are present, each one can be specifically targeted using the host selector e.g `:host(.my-chart-class)`.\n5. Import the theme file.\n\n\n### Example: Two Charts with a Red Title but only one with a Blue Subtitle\n\n```\n<link rel=\"import\" href=\"shared-styles.html\">\n...\n<vaadin-chart title=\"Red Title\" subtitle=\"Not Styled\">\n  <vaadin-chart-series values=\"[19,12,9,24,5]\"></vaadin-chart-series>\n</vaadin-chart>\n\n<vaadin-chart class=\"blue-subtitle\" title=\"Red Title\" subtitle=\"Blue Subtitle\">\n  <vaadin-chart-series values=\"[19,12,9,24,5]\"></vaadin-chart-series>\n</vaadin-chart>\n```\n\nshared-styles.html\n\n```\n<link rel=\"import\" href=\"../bower_components/vaadin-charts/vaadin-chart-default-theme.html\">\n\n<dom-module id=\"css-style-example\" theme-for=\"vaadin-chart\">\n   <template>\n     <style include=\"vaadin-chart-default-theme\">\n       .highcharts-title {\n         fill: red;\n         font-size: xx-large;\n       }\n\n       :host(.blue-subtitle) .highcharts-subtitle {\n         fill: blue;\n       }\n     </style>\n   </template>\n</dom-module>\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\nAfter one day 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.",
+          "description": "`<vaadin-chart>` is a Polymer 2 element for creating high quality charts.\n\n### Quick Start\n\n1. Create a Polymer application using [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli)\n```\nmkdir my-app\ncd my-app\npolymer init\nselect `polymer-2-application`\n```\n1. Install Vaadin Charts\n```\nbower install --save vaadin-charts#6.0.0-beta2\n```\n1. Import `<vaadin-chart>` to your app\nEdit the file `src/my-app/my-app.html` and add the following snipped before the `<dom-module>` tag\n```html\n<link rel=\"import\" href=\"../../bower_components/vaadin-charts/vaadin-chart.html\">\n```\n1. Add your first `<vaadin-chart>`\nAlso in `my-app.html` add the following snippet before the `</template>` closing tag\n```html\n<vaadin-chart></vaadin-chart>\n```\n1. Run your app with:\n```\npolymer serve --open\n```\nCongratulations! You have your first Vaadin Chart setup.\n\n### Basic use\n\nNow that we covered the basic steps to create an empty chart, let us show how you can configure it.\n\nThere are two ways of configuring your `<vaadin-chart>` element: **JS API** and **JSON API**.\nNote that you can make use of both APIs in your element.\n\n#### Configuring your chart using JS API\n\nUsing as a base the project created with in Quick Start\n\nDo the following changes in `my-app.html`\n\n1. Set and 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```\ninitChartWithJSApi() {\n    Polymer.RenderStatus.beforeNextRender(this, () => {\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```\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSApi();\n}\n```\n1. And finally run your app with:\n```\npolymer serve --open\n```\n\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\nUsing as a base the project created with in Quick Start\n\nDo the following changes in `my-app.html`\n\n1. Set and id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `update` method (JS JSON Api) to set chart title, categories and data\n```\ninitChartWithJSJSONApi() {\n    this.$.mychart.update({\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```\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSJSONApi();\n}\n```\n1. And finally run your app with:\n```\npolymer serve --open\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\n### CSS Styling\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\n\n### Steps for styling a chart\n\n1. Create a theme file (for example `shared-styles.html`). The theme's dom-module must declare `theme-for=vaadin-chart`.\n2. Import `vaadin-chart-default-theme.html` and declare `include=\"vaadin-chart-default-theme\"`\non the theme module's style tag to customize Chart's default theme. If there are multiple theme\nmodules *only one* of them should declare this `include`.\n3. Specify the desired CSS rules in the theme file.\n4. If multiple charts are present, each one can be specifically targeted using the host selector e.g `:host(.my-chart-class)`.\n5. Import the theme file.\n\n\n### Example: Two Charts with a Red Title but only one with a Blue Subtitle\n\n```\n<link rel=\"import\" href=\"shared-styles.html\">\n...\n<vaadin-chart title=\"Red Title\" subtitle=\"Not Styled\">\n  <vaadin-chart-series values=\"[19,12,9,24,5]\"></vaadin-chart-series>\n</vaadin-chart>\n\n<vaadin-chart class=\"blue-subtitle\" title=\"Red Title\" subtitle=\"Blue Subtitle\">\n  <vaadin-chart-series values=\"[19,12,9,24,5]\"></vaadin-chart-series>\n</vaadin-chart>\n```\n\nshared-styles.html\n\n```\n<link rel=\"import\" href=\"../bower_components/vaadin-charts/vaadin-chart-default-theme.html\">\n\n<dom-module id=\"css-style-example\" theme-for=\"vaadin-chart\">\n   <template>\n     <style include=\"vaadin-chart-default-theme\">\n       .highcharts-title {\n         fill: red;\n         font-size: xx-large;\n       }\n\n       :host(.blue-subtitle) .highcharts-subtitle {\n         fill: blue;\n       }\n     </style>\n   </template>\n</dom-module>\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\nAfter one day 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.",
           "summary": "",
           "path": "vaadin-chart.html",
           "properties": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaadin-charts",
-  "version": "6.0.0-beta1",
+  "version": "6.0.0-beta2",
   "description": "vaadin-charts",
   "main": "vaadin-chart.html",
   "repository": "vaadin/vaadin-charts",

vaadin-chart.html

@@ -69,7 +69,7 @@
        * ```
        * 1. Install Vaadin Charts
        * ```
-       * bower install --save vaadin-charts#6.0.0-beta1
+       * bower install --save vaadin-charts#6.0.0-beta2
        * ```
        * 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
@@ -252,7 +252,7 @@
         }
 
         static get version() {
-          return '6.0.0-beta1';
+          return '6.0.0-beta2';
         }
 
         static get properties() {