├── nvd3-elements.png
├── .gitignore
├── nvd3-import.html
├── .travis.yml
├── nvd3-elements.html
├── test
    ├── simple-chart.html
    ├── basic-nvd3-behavior.html
    ├── index.html
    ├── basic-nvd3-bullet.html
    ├── basic-nvd3-sunburst.html
    ├── basic-nvd3-discrete-bar.html
    ├── basic-nvd3-scatter.html
    ├── basic-nvd3-multi-bar.html
    ├── basic-nvd3-multi-bar-horizontal.html
    ├── basic-nvd3-line-with-focus.html
    ├── basic-nvd3-line.html
    ├── basic-nvd3-stacked-area.html
    ├── basic-nvd3-cumulative-line.html
    ├── basic-nvd3-donut.html
    └── basic-nvd3-pie.html
├── demo
    ├── nvd3-bullet.html
    ├── nvd3-discrete-bar.html
    ├── nvd3-pie.html
    ├── nvd3-donut.html
    ├── nvd3-multi-bar-horizontal.html
    ├── nvd3-cumulative-line.html
    ├── nvd3-multi-bar.html
    ├── nvd3-stacked-area.html
    ├── nvd3-line-with-focus.html
    ├── nvd3-scatter.html
    └── nvd3-sunburst.html
├── LICENSE
├── README.md
├── index.html
├── nvd3-bullet.html
├── bower.json
├── nvd3-scatter.html
├── nvd3-multi-bar.html
├── nvd3-multi-bar-horizontal.html
├── nvd3-discrete-bar.html
├── nvd3-tooltip-styles.html
├── nvd3-stacked-area.html
├── nvd3-cumulative-line.html
├── nvd3-sunburst.html
├── nvd3-line-with-focus.html
├── nvd3-line.html
├── nvd3-pie.html
├── nvd3-donut.html
├── nvd3-behavior.html
└── nvd3-shared-styles.html


/nvd3-elements.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saeidzebardast/nvd3-elements/HEAD/nvd3-elements.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components/
2 | bower_components-1.x/
3 | bower-1.x.json
4 | .idea/
5 | node_modules/


--------------------------------------------------------------------------------
/nvd3-import.html:
--------------------------------------------------------------------------------
1 | <link rel="import" href="nvd3-shared-styles.html">
2 | <link rel="import" href="nvd3-tooltip-styles.html">
3 | 
4 | <script src="../d3/d3.min.js"></script>
5 | <script src="../nvd3/build/nv.d3.min.js"></script>
6 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | sudo: required
 3 | dist: trusty
 4 | node_js: stable
 5 | addons:
 6 |   firefox: latest
 7 |   apt:
 8 |     sources:
 9 |       - google-chrome
10 |     packages:
11 |       - google-chrome-stable
12 | before_script:
13 |   - npm install polymer-cli
14 |   - export PATH=$PWD/node_modules/.bin:$PATH
15 |   - polymer install --variants
16 | script:
17 |   - xvfb-run polymer test
18 | 


--------------------------------------------------------------------------------
/nvd3-elements.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="nvd3-line.html">
 2 | <link rel="import" href="nvd3-line-with-focus.html">
 3 | <link rel="import" href="nvd3-pie.html">
 4 | <link rel="import" href="nvd3-donut.html">
 5 | <link rel="import" href="nvd3-scatter.html">
 6 | <link rel="import" href="nvd3-bullet.html">
 7 | <link rel="import" href="nvd3-discrete-bar.html">
 8 | <link rel="import" href="nvd3-stacked-area.html">
 9 | <link rel="import" href="nvd3-multi-bar.html">
10 | <link rel="import" href="nvd3-multi-bar-horizontal.html">
11 | <link rel="import" href="nvd3-cumulative-line.html">
12 | <link rel="import" href="nvd3-sunburst.html">
13 | 


--------------------------------------------------------------------------------
/test/simple-chart.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../polymer/polymer.html">
 2 | <link rel="import" href="../nvd3-behavior.html">
 3 | 
 4 | <!--
 5 |   NVD3.ChartBehavior requires an element with id="svg" to scope CSS
 6 |   when using shady DOM
 7 | -->
 8 | <dom-module id="simple-chart">
 9 |   <template>
10 |     <div>
11 |       <svg id="svg"></svg>
12 |     </div>
13 |   </template>
14 | </dom-module>
15 | <script>
16 | 
17 |   Polymer({
18 | 
19 |     is: 'simple-chart',
20 | 
21 |     properties: {
22 |       _chart: {
23 |         type: Object,
24 |         value: function() {
25 |           return nv.models.line();
26 |         }
27 |       }
28 |     },
29 |     behaviors: [
30 |       NVD3.ChartBehavior
31 |     ],
32 | 
33 |   });
34 | 
35 | </script>
36 | 


--------------------------------------------------------------------------------
/demo/nvd3-bullet.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |   <meta charset="utf-8">
 7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 8 |   <title>nvd3-bullet Demo</title>
 9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |   <link rel="import" href="../nvd3-bullet.html">
11 | </head>
12 | 
13 | <body unresolved>
14 | 
15 |   <p>An example of
16 |     <code>&lt;nvd3-bullet&gt;</code>:</p>
17 | 
18 |   <nvd3-bullet auto-resize>
19 | 
20 |   </nvd3-bullet>
21 | 
22 |   <script>
23 |     var el = document.querySelector('nvd3-bullet');
24 |     el.data = {
25 |       "title": "Revenue",
26 |       "subtitle": "US$, in thousands",
27 |       "ranges": [150, 225, 300],
28 |       "measures": [220],
29 |       "markers": [250]
30 |     };
31 |   </script>
32 | 
33 | </body>
34 | 
35 | </html>
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Saeid Zebardast
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nvd3-elements [![Build Status](https://travis-ci.org/saeidzebardast/nvd3-elements.svg?branch=master)](https://travis-ci.org/saeidzebardast/nvd3-elements) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/saeidzebardast/nvd3-elements)
 2 | 
 3 | NVD3 charts as web components for Polymer.
 4 | 
 5 | [![nvd3-elements](https://raw.githubusercontent.com/saeidzebardast/nvd3-elements/master/nvd3-elements.png "nvd3-elements")](http://saeidzebardast.github.io/nvd3-elements)
 6 | 
 7 | ## Install
 8 | ```
 9 | bower install nvd3-elements
10 | ```
11 | 
12 | 
13 | ## Available charts elements
14 | * &lt;nvd3-line&gt;
15 | * &lt;nvd3-line-with-focus&gt;
16 | * &lt;nvd3-pie&gt;
17 | * &lt;nvd3-donut&gt;
18 | * &lt;nvd3-scatter&gt;
19 | * &lt;nvd3-bullet&gt;
20 | * &lt;nvd3-discrete-bar&gt;
21 | * &lt;nvd3-stacked-area&gt;
22 | * &lt;nvd3-multi-bar&gt;
23 | * &lt;nvd3-multi-bar-horizontal&gt;
24 | * &lt;nvd3-cumulative-line&gt;
25 | * &lt;nvd3-sunburst&gt;
26 | 
27 | ## Demo and Options
28 | See the [component page](http://saeidzebardast.github.io/nvd3-elements) for demo and options.
29 | 
30 | ## Events
31 | You could create listeners for all NVD3 events. Please check [NVD3 documentation](http://nvd3-community.github.io/nvd3/examples/documentation.html) for events list of each chart.
32 | 
33 | ## License
34 | 
35 | MIT © [Saeid Zebardast](http://zebardast.com)
36 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | <head>
13 | 
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 | 
17 |   <script src="../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <link rel="import" href="../iron-component-page/iron-component-page.html">
19 |   <link rel="import" href="../github-fork-ribbon/github-fork-ribbon.html">
20 | 
21 | </head>
22 | <body unresolved>
23 |   <github-fork-ribbon username="saeidzebardast" repository="nvd3-elements" position="right-bottom"></github-fork-ribbon>
24 |   <!-- Note: if the main element for this repository doesn't
25 |        match the folder name, add a src="&lt;main-component&gt;.html" attribute,
26 |        where &lt;main-component&gt;.html" is a file that imports all of the
27 |        components you want documented. -->
28 |   <iron-component-page src="nvd3-elements.html"></iron-component-page>
29 | 
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/demo/nvd3-discrete-bar.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |   <meta charset="utf-8">
 7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 8 |   <title>nvd3-discrete-bar Demo</title>
 9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |   <link rel="import" href="../nvd3-discrete-bar.html">
11 | </head>
12 | 
13 | <body unresolved>
14 | 
15 |   <p>An example of
16 |     <code>&lt;nvd3-discrete-bar&gt;</code>:</p>
17 | 
18 |   <nvd3-discrete-bar height="400" auto-resize>
19 | 
20 |   </nvd3-discrete-bar>
21 | 
22 |   <script>
23 |     var el = document.querySelector('nvd3-discrete-bar');
24 |     el.data = [{
25 |         key: "Cumulative Return",
26 |         values: [{
27 |           "label": "A",
28 |           "value": -29.765957771107
29 |         }, {
30 |           "label": "B",
31 |           "value": 0
32 |         }, {
33 |           "label": "C",
34 |           "value": 32.807804682612
35 |         }, {
36 |           "label": "D",
37 |           "value": 196.45946739256
38 |         }, {
39 |           "label": "E",
40 |           "value": 0.19434030906893
41 |         }, {
42 |           "label": "F",
43 |           "value": -98.079782601442
44 |         }, {
45 |           "label": "G",
46 |           "value": -13.925743130903
47 |         }, {
48 |           "label": "H",
49 |           "value": -5.1387322875705
50 |         }]
51 |       }];
52 |   </script>
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/nvd3-bullet.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../polymer/polymer.html">
 2 | <link rel="import" href="nvd3-behavior.html">
 3 | 
 4 | <!--
 5 | An element to create bullet chart using nvd3.
 6 | 
 7 | Example:
 8 | 
 9 |     <nvd3-bullet data="[[data]]" auto-resize></nvd3-bullet>
10 | 
11 | Data Format:
12 | 
13 | ```
14 | {
15 |   "title": "Revenue",
16 |   "subtitle": "US$, in thousands",
17 |   "ranges": [150,225,300],
18 |   "measures": [220],
19 |   "markers": [250]
20 | }
21 | ```
22 | 
23 | @group NVD3 Elements
24 | @element nvd3-bullet
25 | @demo demo/nvd3-bullet.html
26 | @hero hero.svg
27 | -->
28 | 
29 | <dom-module id="nvd3-bullet">
30 |   <template>
31 |     <style include="nvd3-shared-styles"></style>
32 |     <!-- We need to put svg tag inside a div to set correct margins -->
33 |     <div>
34 |       <svg id="svg"></svg>
35 |     </div>
36 |   </template>
37 | 
38 |   <script>
39 |     Polymer({
40 |       is: 'nvd3-bullet',
41 |       behaviors: [NVD3.ChartBehavior],
42 |       properties: {
43 |         /**
44 |          * NVD3 chart object.
45 |          */
46 |         _chart: {
47 |           type: Object,
48 |           value: function() {
49 |             return nv.models.bulletChart();
50 |           }
51 |         },
52 | 
53 |         /**
54 |          * NVD3 components which are used in this chart.
55 |          * It's required for binding events.
56 |          */
57 |         _components: {
58 |           type: Array,
59 |           value: ['bullet', 'tooltip']
60 |         }
61 |       }
62 |     });
63 |   </script>
64 | </dom-module>
65 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-behavior.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 | 
 7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 8 |   <script src="../../web-component-tester/browser.js"></script>
 9 | 
10 |   <!-- Step 1: import the element to test -->
11 |   <link rel="import" href="../nvd3-behavior.html">
12 |   <link rel="import" href="simple-chart.html">
13 | </head>
14 | 
15 | <body>
16 | 
17 |   <test-fixture id="simple-chart-fixture">
18 |     <template>
19 |       <simple-chart></simple-chart>
20 |     </template>
21 |   </test-fixture>
22 | 
23 |   <script>
24 |     suite('nvd3-behavior', function() {
25 |       var myEl;
26 |       setup(function() {
27 |         myEl = fixture('simple-chart-fixture');
28 |       });
29 | 
30 |       test('stopAutoDrawing is false by default', function() {
31 |         assert.isFalse(myEl.autoResize);
32 |       });
33 | 
34 |       test('set stopAutoDrawing true', function() {
35 |         assert.isFalse(myEl.stopAutoDrawing);
36 |         myEl.stopAutoDrawing = true;
37 |         assert.isTrue(myEl.stopAutoDrawing);
38 |       });
39 | 
40 |       test('autoResize is false by default', function() {
41 |         assert.isFalse(myEl.autoResize);
42 |       });
43 | 
44 |       test('set autoResize true', function() {
45 |         assert.isFalse(myEl.autoResize);
46 |         myEl.autoResize = true;
47 |         assert.isTrue(myEl.autoResize);
48 |       });
49 |     });
50 |   </script>
51 | 
52 | </body>
53 | 
54 | </html>
55 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 |   <head>
13 |     <meta charset="utf-8">
14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 | 
16 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17 |     <script src="../../web-component-tester/browser.js"></script>
18 |   </head>
19 |   <body>
20 |     <script>
21 |       var pages = [
22 |           'basic-nvd3-behavior.html',
23 |           'basic-nvd3-bullet.html',
24 |           'basic-nvd3-cumulative-line.html',
25 |           'basic-nvd3-discrete-bar.html',
26 |           'basic-nvd3-donut.html',
27 |           'basic-nvd3-line.html',
28 |           'basic-nvd3-line-with-focus.html',
29 |           'basic-nvd3-multi-bar-horizontal.html',
30 |           'basic-nvd3-multi-bar.html',
31 |           'basic-nvd3-pie.html',
32 |           'basic-nvd3-scatter.html',
33 |           'basic-nvd3-stacked-area.html',
34 |           'basic-nvd3-sunburst.html'
35 |         ],
36 |         suites = [],
37 |         i;
38 | 
39 |       for (i = 0; i < pages.length; i++) {
40 |         suites.push(pages[i] + '?dom=shadow');
41 |         suites.push(pages[i] + '?wc-shadydom=true&wc-ce=true');
42 |       }
43 | 
44 |       WCT.loadSuites(suites);
45 |     </script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/demo/nvd3-pie.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |   <meta charset="utf-8">
 7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 8 |   <title>nvd3-pie Demo</title>
 9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |   <link rel="import" href="../nvd3-pie.html">
11 | </head>
12 | 
13 | <body unresolved>
14 | 
15 |   <p>An example of
16 |     <code>&lt;nvd3-pie&gt;</code>:</p>
17 | 
18 |   <nvd3-pie height="400" auto-resize show-legend show-labels grow-on-hover>
19 | 
20 |   </nvd3-pie>
21 | 
22 |   <nvd3-pie id="pie2" height="400" auto-resize show-labels grow-on-hover multi-selection labels-outside>
23 | 
24 |   </nvd3-pie>
25 | 
26 |   <script>
27 |     var el = document.querySelector('nvd3-pie');
28 |     var el2 = document.querySelector('#pie2');
29 | 
30 |     el.data = [{
31 |       "label": "One",
32 |       "value": 29.765957771107
33 |     }, {
34 |       "label": "Two",
35 |       "value": 0
36 |     }, {
37 |       "label": "Three",
38 |       "value": 32.807804682612
39 |     }, {
40 |       "label": "Four",
41 |       "value": 196.45946739256
42 |     }, {
43 |       "label": "Five",
44 |       "value": 0.19434030906893
45 |     }, {
46 |       "label": "Six",
47 |       "value": 98.079782601442
48 |     }, {
49 |       "label": "Seven",
50 |       "value": 13.925743130903
51 |     }, {
52 |       "label": "Eight",
53 |       "value": 5.1387322875705
54 |     }];
55 | 
56 |     el2.data = [{
57 |       "label": "One",
58 |       "value": 29.765957771107
59 |     }, {
60 |       "label": "Two",
61 |       "value": 50
62 |     }, {
63 |       "label": "Three",
64 |       "value": 32.807804682612
65 |     }, {
66 |       "label": "Four",
67 |       "value": 196.45946739256
68 |     }];
69 | 
70 |     el2.addEventListener('slice-selected', function (e) {
71 |       console.log(e);
72 |     });
73 |   </script>
74 | 
75 | </body>
76 | 
77 | </html>
78 | 


--------------------------------------------------------------------------------
/demo/nvd3-donut.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |   <meta charset="utf-8">
 7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 8 |   <title>nvd3-donut Demo</title>
 9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |   <link rel="import" href="../../iron-flex-layout/iron-flex-layout-classes.html">
11 |   <link rel="import" href="../nvd3-donut.html">
12 | </head>
13 | 
14 | <body unresolved>
15 | 
16 |   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
17 | 
18 |   <p>An example of
19 |     <code>&lt;nvd3-donut&gt;</code>:</p>
20 | 
21 |   <nvd3-donut title="My Donut!" height="400" auto-resize show-labels show-legend donut-ratio="0.25" grow-on-hover labels-outside>
22 |   </nvd3-donut>
23 | 
24 |   <div style="width: 100%">
25 |     <div class="horizontal layout flex center-center">
26 |       <nvd3-donut class="flex" flex-size title="My flex Donut!" auto-resize show-labels show-legend grow-on-hover labels-outside>
27 |       </nvd3-donut>
28 |     </div>
29 |   </div>
30 | 
31 |   <script>
32 |     var el = document.querySelectorAll('nvd3-donut');
33 |     el[0].data = [{
34 |       "label": "One",
35 |       "value": 29.765957771107
36 |     }, {
37 |       "label": "Two",
38 |       "value": 0
39 |     }, {
40 |       "label": "Three",
41 |       "value": 32.807804682612
42 |     }, {
43 |       "label": "Four",
44 |       "value": 196.45946739256
45 |     }, {
46 |       "label": "Five",
47 |       "value": 0.19434030906893
48 |     }, {
49 |       "label": "Six",
50 |       "value": 98.079782601442
51 |     }, {
52 |       "label": "Seven",
53 |       "value": 13.925743130903
54 |     }, {
55 |       "label": "Eight",
56 |       "value": 5.1387322875705
57 |     }];
58 | 
59 |     el[1].data = el[0].data;
60 | 
61 |     el[0].addEventListener('slice-selected', function (e) {
62 |       console.log('slice-selected');
63 |     });
64 |   </script>
65 | 
66 | </body>
67 | 
68 | </html>
69 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nvd3-elements",
 3 |   "version": "0.21.0",
 4 |   "homepage": "https://github.com/saeidzebardast/nvd3-elements",
 5 |   "authors": [
 6 |     "Saeid Zebardast <saeid.zebardast@gmail.com>"
 7 |   ],
 8 |   "description": "NVD3 charts elements for Polymer.",
 9 |   "main": "nvd3-elements.html",
10 |   "moduleType": [],
11 |   "keywords": [
12 |     "web-component",
13 |     "web-components",
14 |     "polymer",
15 |     "nvd3",
16 |     "d3",
17 |     "chart",
18 |     "graph"
19 |   ],
20 |   "license": "MIT",
21 |   "ignore": [
22 |     "**/.*",
23 |     "node_modules",
24 |     "bower_components",
25 |     "test",
26 |     "tests"
27 |   ],
28 |   "dependencies": {
29 |     "polymer": "Polymer/polymer#1.9 - 2",
30 |     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#1 - 2",
31 |     "nvd3": "~1.8.1"
32 |   },
33 |   "devDependencies": {
34 |     "iron-component-page": "PolymerElements/iron-component-page#1 - 3",
35 | 		"iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
36 | 		"iron-test-helpers": "PolymerElements/iron-test-helpers#1 - 2",
37 | 		"web-component-tester": "^6.0.0",
38 | 		"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
39 |   },
40 |   "variants": {
41 |     "1.x": {
42 |       "dependencies":{
43 |         "polymer": "Polymer/polymer#^1.9",
44 |         "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.6",
45 |         "nvd3": "~1.8.1"
46 |       },
47 |       "devDependencies": {
48 |         "github-fork-ribbon": "^0.2.3",
49 |         "iron-component-page": "PolymerElements/iron-component-page#^1.1.9",
50 | 				"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.5",
51 | 				"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
52 | 				"web-component-tester": "^4.0.0",
53 |         "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
54 |       },
55 |       "resolutions":{
56 |         "webcomponentsjs": "^0.7"
57 |       }
58 |     }
59 |   },
60 |   "resolutions": {
61 |     "webcomponentsjs": "^1.0.0"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/nvd3-scatter.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../polymer/polymer.html">
 2 | <link rel="import" href="nvd3-behavior.html">
 3 | 
 4 | <!--
 5 | An element to create scatter chart using nvd3.
 6 | 
 7 | Example:
 8 | 
 9 |     <nvd3-scatter data="[[data]]" auto-resize></nvd3-scatter>
10 | 
11 | Data Format:
12 | 
13 | ```
14 | [
15 |   {
16 |     "key": "Group One",
17 |     "values": [
18 |       {
19 |         "x": 10,
20 |         "y": 20,
21 |         "size": 69
22 |       }, {
23 |         "x": 15,
24 |         "y": 19,
25 |         "size": 85
26 |       }
27 |     ]
28 |   },
29 |   {
30 |     "key": "Group Two",
31 |     "values": [
32 |       {
33 |         "x": 14,
34 |         "y": 17,
35 |         "size": 85
36 |       }, {
37 |         "x": 33,
38 |         "y": 12,
39 |         "size": 69
40 |       }
41 |     ]
42 |   }
43 | ]
44 | ```
45 | @group NVD3 Elements
46 | @element nvd3-scatter
47 | @demo demo/nvd3-scatter.html
48 | @hero hero.svg
49 | -->
50 | 
51 | <dom-module id="nvd3-scatter">
52 |   <template>
53 |      <style include="nvd3-shared-styles">
54 |      </style>
55 |     <!-- We need to put svg tag inside a div to set correct margins -->
56 |     <div>
57 |       <svg id="svg"></svg>
58 |     </div>
59 |   </template>
60 | 
61 |   <script>
62 |     Polymer({
63 |       is: 'nvd3-scatter',
64 |       behaviors: [NVD3.ChartBehavior],
65 |       properties: {
66 |         /**
67 |          * NVD3 chart object.
68 |          */
69 |         _chart: {
70 |           type: Object,
71 |           value: function() {
72 |             return nv.models.scatterChart();
73 |           }
74 |         },
75 | 
76 |         /**
77 |          * Whether to display the legend or not
78 |          */
79 |         showLegend: {
80 |           type: Boolean,
81 |           value: false
82 |         },
83 | 
84 |         /**
85 |          * NVD3 components which are used in this chart.
86 |          * It's required for binding events.
87 |          */
88 |         _components: {
89 |           type: Array,
90 |           value: ['scatter', 'legend', 'xAxis', 'yAxis', 'tooltip']
91 |         }
92 |       }
93 |     });
94 |   </script>
95 | </dom-module>
96 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-bullet.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-bullet.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-bullet-fixture">
28 |     <template>
29 |       <nvd3-bullet stop-auto-drawing></nvd3-bullet>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-bullet>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-bullet-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('marging is set', function() {
51 |         myEl.set('margin', {
52 |           "top": 10,
53 |           "right": 20,
54 |           "bottom": 30,
55 |           "left": 40
56 |         });
57 | 
58 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
59 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
60 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
61 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
62 |       });
63 | 
64 |       test('distributed children', function() {
65 |         var els = myEl.getContentChildren();
66 |         assert.equal(els.length, 0, 'no distributed node');
67 |       });
68 |     });
69 |   </script>
70 | 
71 | </body>
72 | 
73 | </html>
74 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-sunburst.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-sunburst.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-sunburst-fixture">
28 |     <template>
29 |       <nvd3-sunburst stop-auto-drawing></nvd3-sunburst>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-sunburst>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-sunburst-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('marging is set', function() {
51 |         myEl.set('margin', {
52 |           "top": 10,
53 |           "right": 20,
54 |           "bottom": 30,
55 |           "left": 40
56 |         });
57 | 
58 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
59 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
60 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
61 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
62 |       });
63 | 
64 |       test('distributed children', function() {
65 |         var els = myEl.getContentChildren();
66 |         assert.equal(els.length, 0, 'no distributed node');
67 |       });
68 |     });
69 |   </script>
70 | 
71 | </body>
72 | 
73 | </html>
74 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-discrete-bar.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-discrete-bar.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-discrete-bar-fixture">
28 |     <template>
29 |       <nvd3-discrete-bar stop-auto-drawing></nvd3-discrete-bar>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-discrete-bar>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-discrete-bar-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('marging is set', function() {
51 |         myEl.set('margin', {
52 |           "top": 10,
53 |           "right": 20,
54 |           "bottom": 30,
55 |           "left": 40
56 |         });
57 | 
58 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
59 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
60 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
61 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
62 |       });
63 | 
64 |       test('distributed children', function() {
65 |         var els = myEl.getContentChildren();
66 |         assert.equal(els.length, 0, 'no distributed node');
67 |       });
68 |     });
69 |   </script>
70 | 
71 | </body>
72 | 
73 | </html>
74 | 


--------------------------------------------------------------------------------
/demo/nvd3-multi-bar-horizontal.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |   <meta charset="utf-8">
 7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 8 |   <title>nvd3-multi-bar-horizontal Demo</title>
 9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |   <link rel="import" href="../nvd3-multi-bar-horizontal.html">
11 |   <style>
12 |     /*nvd3-multi-bar-horizontal div {*/
13 |       /*display: flex;*/
14 |       /*height: 70vh;*/
15 |     /*}*/
16 |   </style>
17 | </head>
18 | 
19 | <body unresolved>
20 | 
21 |   <p>An example of
22 |     <code>&lt;nvd3-multi-bar-horizontal&gt;</code>:</p>
23 | 
24 |   <nvd3-multi-bar-horizontal height="300" auto-resize show-legend>
25 | 
26 |   </nvd3-multi-bar-horizontal>
27 | 
28 |   <script>
29 |     var el = document.querySelector('nvd3-multi-bar-horizontal');
30 |     el.data = [{
31 |       "key": "Series1",
32 |       "color": "#d62728",
33 |       "values": [{
34 |         "label": "Group A",
35 |         "value": -1.8746444827653
36 |       }, {
37 |         "label": "Group B",
38 |         "value": -8.0961543492239
39 |       }, {
40 |         "label": "Group C",
41 |         "value": -0.57072943117674
42 |       }, {
43 |         "label": "Group D",
44 |         "value": -2.4174010336624
45 |       }, {
46 |         "label": "Group E",
47 |         "value": -0.72009071426284
48 |       }, {
49 |         "label": "Group F",
50 |         "value": -0.77154485523777
51 |       }, {
52 |         "label": "Group G",
53 |         "value": -0.90152097798131
54 |       }, {
55 |         "label": "Group H",
56 |         "value": -0.91445417330854
57 |       }, {
58 |         "label": "Group I",
59 |         "value": -0.055746319141851
60 |       }]
61 |     }, {
62 |       "key": "Series2",
63 |       "color": "#1f77b4",
64 |       "values": [{
65 |         "label": "Group A",
66 |         "value": 25.307646510375
67 |       }, {
68 |         "label": "Group B",
69 |         "value": 16.756779544553
70 |       }, {
71 |         "label": "Group C",
72 |         "value": 18.451534877007
73 |       }, {
74 |         "label": "Group D",
75 |         "value": 8.6142352811805
76 |       }, {
77 |         "label": "Group E",
78 |         "value": 7.8082472075876
79 |       }, {
80 |         "label": "Group F",
81 |         "value": 5.259101026956
82 |       }, {
83 |         "label": "Group G",
84 |         "value": 0.30947953487127
85 |       }, {
86 |         "label": "Group H",
87 |         "value": 0
88 |       }, {
89 |         "label": "Group I",
90 |         "value": 0
91 |       }]
92 |     }];
93 |   </script>
94 | </body>
95 | 
96 | </html>
97 | 


--------------------------------------------------------------------------------
/nvd3-multi-bar.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create multi bar chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-multi-bar
 10 |     data="[[data]]"
 11 |     height="100"
 12 |     width="400"
 13 |     auto-resize
 14 |     show-legend></nvd3-multi-bar>
 15 | 
 16 | Data Format:
 17 | ```
 18 | [{
 19 |   "key": "Stream0",
 20 |   "values": [{
 21 |     "x": 0,
 22 |     "y": 0.17657645842991837
 23 |   }, {
 24 |     "x": 1,
 25 |     "y": 0.17056295930152043
 26 |   }, {
 27 |     "x": 2,
 28 |     "y": 0.1673443365488047
 29 |   }, {
 30 |     "x": 3,
 31 |     "y": 0.11723298445616456
 32 |   }]
 33 | }, {
 34 |   "key": "Stream1",
 35 |   "values": [{
 36 |     "x": 0,
 37 |     "y": 1.2743446048854001
 38 |   }, {
 39 |     "x": 1,
 40 |     "y": 0.22290307978708743
 41 |   }, {
 42 |     "x": 2,
 43 |     "y": 0.11314237776897834
 44 |   }, {
 45 |     "x": 3,
 46 |     "y": 0.13269772172547029
 47 |   }]
 48 | }, {
 49 |   "key": "Stream2",
 50 |   "values": [{
 51 |     "x": 0,
 52 |     "y": 4.56961163175497
 53 |   }, {
 54 |     "x": 1,
 55 |     "y": 0.6716892057759072
 56 |   }, {
 57 |     "x": 2,
 58 |     "y": 0.1281580516020834
 59 |   }, {
 60 |     "x": 3,
 61 |     "y": 0.1961314488771337
 62 |   }]
 63 | }]
 64 | ```
 65 | 
 66 | @group NVD3 Elements
 67 | @element nvd3-multi-bar
 68 | @demo demo/nvd3-multi-bar.html
 69 | @hero hero.svg
 70 | -->
 71 | 
 72 | <dom-module id="nvd3-multi-bar">
 73 |   <template>
 74 |     <style include="nvd3-shared-styles"></style>
 75 |     <!-- We need to put svg tag inside a div to set correct margins -->
 76 |     <div>
 77 |       <svg id="svg"></svg>
 78 |     </div>
 79 |   </template>
 80 | 
 81 |   <script>
 82 |     Polymer({
 83 |       is: 'nvd3-multi-bar',
 84 |       behaviors: [NVD3.ChartBehavior],
 85 |       properties: {
 86 |         /**
 87 |          * NVD3 chart object.
 88 |          */
 89 |         _chart: {
 90 |           type: Object,
 91 |           value: function() {
 92 |             return nv.models.multiBarChart();
 93 |           }
 94 |         },
 95 | 
 96 |         /**
 97 |          * Whether to display the legend or not
 98 |          */
 99 |         showLegend: {
100 |           type: Boolean,
101 |           value: false
102 |         },
103 | 
104 |         /**
105 |          * NVD3 components which are used in this chart.
106 |          * It's required for binding events.
107 |          */
108 |         _components: {
109 |           type: Array,
110 |           value: ['multibar', 'legend', 'controls', 'xAxis', 'yAxis', 'tooltip']
111 |         }
112 |       }
113 |     });
114 |   </script>
115 | </dom-module>
116 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-scatter.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-scatter.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-scatter-fixture">
28 |     <template>
29 |       <nvd3-scatter stop-auto-drawing></nvd3-scatter>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-scatter>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-scatter-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('show legend is false', function() {
51 |         myEl.set('showLegend', false);
52 |         assert.isFalse(myEl._chart.showLegend());
53 |       });
54 | 
55 |       test('show legend is true', function() {
56 |         myEl.set('showLegend', true);
57 |         assert.isTrue(myEl._chart.showLegend());
58 |       });
59 | 
60 |       test('marging is set', function() {
61 |         myEl.set('margin', {
62 |           "top": 10,
63 |           "right": 20,
64 |           "bottom": 30,
65 |           "left": 40
66 |         });
67 | 
68 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
69 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
70 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
71 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
72 |       });
73 | 
74 |       test('distributed children', function() {
75 |         var els = myEl.getContentChildren();
76 |         assert.equal(els.length, 0, 'no distributed node');
77 |       });
78 |     });
79 |   </script>
80 | 
81 | </body>
82 | 
83 | </html>
84 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-multi-bar.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-multi-bar.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-multi-bar-fixture">
28 |     <template>
29 |       <nvd3-multi-bar stop-auto-drawing></nvd3-multi-bar>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-multi-bar>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-multi-bar-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('show legend is false', function() {
51 |         myEl.set('showLegend', false);
52 |         assert.isFalse(myEl._chart.showLegend());
53 |       });
54 | 
55 |       test('show legend is true', function() {
56 |         myEl.set('showLegend', true);
57 |         assert.isTrue(myEl._chart.showLegend());
58 |       });
59 | 
60 |       test('marging is set', function() {
61 |         myEl.set('margin', {
62 |           "top": 10,
63 |           "right": 20,
64 |           "bottom": 30,
65 |           "left": 40
66 |         });
67 | 
68 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
69 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
70 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
71 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
72 |       });
73 | 
74 |       test('distributed children', function() {
75 |         var els = myEl.getContentChildren();
76 |         assert.equal(els.length, 0, 'no distributed node');
77 |       });
78 |     });
79 |   </script>
80 | 
81 | </body>
82 | 
83 | </html>
84 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-multi-bar-horizontal.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-multi-bar-horizontal.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-multi-bar-horizontal-fixture">
28 |     <template>
29 |       <nvd3-multi-bar-horizontal stop-auto-drawing></nvd3-multi-bar-horizontal>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-multi-bar-horizontal>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-multi-bar-horizontal-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('show legend is false', function() {
51 |         myEl.set('showLegend', false);
52 |         assert.isFalse(myEl._chart.showLegend());
53 |       });
54 | 
55 |       test('show legend is true', function() {
56 |         myEl.set('showLegend', true);
57 |         assert.isTrue(myEl._chart.showLegend());
58 |       });
59 | 
60 |       test('marging is set', function() {
61 |         myEl.set('margin', {
62 |           "top": 10,
63 |           "right": 20,
64 |           "bottom": 30,
65 |           "left": 40
66 |         });
67 | 
68 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
69 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
70 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
71 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
72 |       });
73 | 
74 |       test('distributed children', function() {
75 |         var els = myEl.getContentChildren();
76 |         assert.equal(els.length, 0, 'no distributed node');
77 |       });
78 |     });
79 |   </script>
80 | 
81 | </body>
82 | 
83 | </html>
84 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-line-with-focus.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 7 | 
 8 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 9 |   <script src="../../web-component-tester/browser.js"></script>
10 | 
11 |   <!-- Step 1: import the element to test -->
12 |   <link rel="import" href="../nvd3-line-with-focus.html">
13 | </head>
14 | 
15 | <body>
16 | 
17 |   <!-- You can use the document as a place to set up your fixtures. -->
18 |   <test-fixture id="nvd3-line-with-focus-fixture">
19 |     <template>
20 |       <nvd3-line-with-focus stop-auto-drawing></nvd3-line-with-focus>
21 |     </template>
22 |   </test-fixture>
23 | 
24 |   <script>
25 |     suite('<nvd3-line-with-focus>', function() {
26 |       var myEl;
27 |       setup(function() {
28 |         myEl = fixture('nvd3-line-with-focus-fixture');
29 |       });
30 | 
31 |       test('height is set', function() {
32 |         myEl.set('height', 300);
33 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
34 |       });
35 | 
36 |       test('width is set', function() {
37 |         myEl.set('width', 400);
38 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
39 |       });
40 | 
41 |       test('show legend is false', function() {
42 |         myEl.set('showLegend', false);
43 |         assert.isFalse(myEl._chart.showLegend());
44 |       });
45 | 
46 |       test('show legend is true', function() {
47 |         myEl.set('showLegend', true);
48 |         assert.isTrue(myEl._chart.showLegend());
49 |       });
50 | 
51 |       test('useInteractiveGuideline is false', function() {
52 |         myEl.set('useInteractiveGuideline', false);
53 |         assert.isFalse(myEl._chart.useInteractiveGuideline());
54 |       });
55 | 
56 |       test('useInteractiveGuideline is true', function() {
57 |         myEl.set('useInteractiveGuideline', true);
58 |         assert.isTrue(myEl._chart.useInteractiveGuideline());
59 |       });
60 | 
61 |       test('marging is set', function() {
62 |         myEl.set('margin', {
63 |           "top": 10,
64 |           "right": 20,
65 |           "bottom": 30,
66 |           "left": 40
67 |         });
68 | 
69 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
70 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
71 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
72 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
73 |       });
74 | 
75 |       test('brush extent is set', function() {
76 |         myEl.set('brushExtent', [30, 50]);
77 |         assert.equal(myEl._chart.brushExtent(), myEl.brushExtent);
78 |       });
79 | 
80 |       test('distributed children', function() {
81 |         var els = myEl.getContentChildren();
82 |         assert.equal(els.length, 0, 'no distributed node');
83 |       });
84 |     });
85 |   </script>
86 | 
87 | </body>
88 | 
89 | </html>
90 | 


--------------------------------------------------------------------------------
/nvd3-multi-bar-horizontal.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create multi bar horizontal chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-multi-bar-horizontal
 10 |     data="[[data]]"
 11 |     height="100"
 12 |     width="400"
 13 |     auto-resize
 14 |     show-legend></nvd3-multi-bar-horizontal>
 15 | 
 16 | Data Format:
 17 | ```
 18 |     [{
 19 |       "key": "Series1",
 20 |       "color": "#d62728",
 21 |       "values": [{
 22 |         "label": "Group A",
 23 |         "value": -1.8746444827653
 24 |       }, {
 25 |         "label": "Group B",
 26 |         "value": -8.0961543492239
 27 |       }, {
 28 |         "label": "Group C",
 29 |         "value": -0.57072943117674
 30 |       }]
 31 |     }, {
 32 |       "key": "Series2",
 33 |       "color": "#1f77b4",
 34 |       "values": [{
 35 |         "label": "Group A",
 36 |         "value": 25.307646510375
 37 |       }, {
 38 |         "label": "Group B",
 39 |         "value": 16.756779544553
 40 |       }, {
 41 |         "label": "Group C",
 42 |         "value": 18.451534877007
 43 |       }]
 44 |     }]
 45 | ```
 46 | 
 47 | @group NVD3 Elements
 48 | @element nvd3-multi-bar-horizontal
 49 | @demo demo/nvd3-multi-bar-horizontal.html
 50 | @hero hero.svg
 51 | -->
 52 | 
 53 | <dom-module id="nvd3-multi-bar-horizontal">
 54 |   <template>
 55 |     <style include="nvd3-shared-styles"></style>
 56 |     <!-- We need to put svg tag inside a div to set correct margins -->
 57 |     <div>
 58 |       <svg id="svg"></svg>
 59 |     </div>
 60 |   </template>
 61 | 
 62 |   <script>
 63 |     Polymer({
 64 |       is: 'nvd3-multi-bar-horizontal',
 65 |       behaviors: [NVD3.ChartBehavior],
 66 |       properties: {
 67 |         /**
 68 |          * NVD3 chart object.
 69 |          */
 70 |         _chart: {
 71 |           type: Object,
 72 |           value: function() {
 73 |             var that = this;
 74 |             return nv.models.multiBarHorizontalChart()
 75 |               .x(function(d) {
 76 |                 return d[that.xProp];
 77 |               })
 78 |               .y(function(d) {
 79 |                 return d[that.yProp];
 80 |               });
 81 |           }
 82 |         },
 83 | 
 84 |         /**
 85 |          * Configurable x-axis property key
 86 |          */
 87 |         xProp: {
 88 |           type: String,
 89 |           value: 'label'
 90 |         },
 91 | 
 92 |         /**
 93 |          * Configurable y-axis property key
 94 |          */
 95 |         yProp: {
 96 |           type: String,
 97 |           value: 'value'
 98 |         },
 99 | 
100 |         /**
101 |          * Whether to display the legend or not
102 |          */
103 |         showLegend: {
104 |           type: Boolean,
105 |           value: false
106 |         },
107 | 
108 |         /**
109 |          * NVD3 components which are used in this chart.
110 |          * It's required for binding events.
111 |          */
112 |         _components: {
113 |           type: Array,
114 |           value: ['multibar', 'legend', 'controls', 'xAxis', 'yAxis', 'tooltip']
115 |         }
116 |       }
117 |     });
118 |   </script>
119 | </dom-module>
120 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-line.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-line.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-line-fixture">
28 |     <template>
29 |       <nvd3-line stop-auto-drawing></nvd3-line>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-line>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-line-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('show legend is false', function() {
51 |         myEl.set('showLegend', false);
52 |         assert.isFalse(myEl._chart.showLegend());
53 |       });
54 | 
55 |       test('show legend is true', function() {
56 |         myEl.set('showLegend', true);
57 |         assert.isTrue(myEl._chart.showLegend());
58 |       });
59 | 
60 |       test('useInteractiveGuideline is false', function() {
61 |         myEl.set('useInteractiveGuideline', false);
62 |         assert.isFalse(myEl._chart.useInteractiveGuideline());
63 |       });
64 | 
65 |       test('useInteractiveGuideline is true', function() {
66 |         myEl.set('useInteractiveGuideline', true);
67 |         assert.isTrue(myEl._chart.useInteractiveGuideline());
68 |       });
69 | 
70 |       test('marging is set', function() {
71 |         myEl.set('margin', {
72 |           "top": 10,
73 |           "right": 20,
74 |           "bottom": 30,
75 |           "left": 40
76 |         });
77 | 
78 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
79 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
80 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
81 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
82 |       });
83 | 
84 |       test('distributed children', function() {
85 |         var els = myEl.getContentChildren();
86 |         assert.equal(els.length, 0, 'no distributed node');
87 |       });
88 |     });
89 |   </script>
90 | 
91 | </body>
92 | 
93 | </html>
94 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-stacked-area.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-stacked-area.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-stacked-area-fixture">
28 |     <template>
29 |       <nvd3-stacked-area stop-auto-drawing></nvd3-stacked-area>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-stacked-area>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-stacked-area-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('show legend is false', function() {
51 |         myEl.set('showLegend', false);
52 |         assert.isFalse(myEl._chart.showLegend());
53 |       });
54 | 
55 |       test('show legend is true', function() {
56 |         myEl.set('showLegend', true);
57 |         assert.isTrue(myEl._chart.showLegend());
58 |       });
59 | 
60 |       test('useInteractiveGuideline is false', function() {
61 |         myEl.set('useInteractiveGuideline', false);
62 |         assert.isFalse(myEl._chart.useInteractiveGuideline());
63 |       });
64 | 
65 |       test('useInteractiveGuideline is true', function() {
66 |         myEl.set('useInteractiveGuideline', true);
67 |         assert.isTrue(myEl._chart.useInteractiveGuideline());
68 |       });
69 | 
70 |       test('marging is set', function() {
71 |         myEl.set('margin', {
72 |           "top": 10,
73 |           "right": 20,
74 |           "bottom": 30,
75 |           "left": 40
76 |         });
77 | 
78 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
79 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
80 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
81 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
82 |       });
83 | 
84 |       test('distributed children', function() {
85 |         var els = myEl.getContentChildren();
86 |         assert.equal(els.length, 0, 'no distributed node');
87 |       });
88 |     });
89 |   </script>
90 | 
91 | </body>
92 | 
93 | </html>
94 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-cumulative-line.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-cumulative-line.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-cumulative-line-fixture">
28 |     <template>
29 |       <nvd3-cumulative-line stop-auto-drawing></nvd3-cumulative-line>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-cumulative-line>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-cumulative-line-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('marging is set', function() {
51 |         myEl.set('margin', {
52 |           "top": 10,
53 |           "right": 20,
54 |           "bottom": 30,
55 |           "left": 40
56 |         });
57 | 
58 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
59 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
60 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
61 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
62 |       });
63 | 
64 |       test('show legend is false', function() {
65 |         myEl.set('showLegend', false);
66 |         assert.isFalse(myEl._chart.showLegend());
67 |       });
68 | 
69 |       test('show legend is true', function() {
70 |         myEl.set('showLegend', true);
71 |         assert.isTrue(myEl._chart.showLegend());
72 |       });
73 | 
74 |       test('useInteractiveGuideline is false', function() {
75 |         myEl.set('useInteractiveGuideline', false);
76 |         assert.isFalse(myEl._chart.useInteractiveGuideline());
77 |       });
78 | 
79 |       test('useInteractiveGuideline is true', function() {
80 |         myEl.set('useInteractiveGuideline', true);
81 |         assert.isTrue(myEl._chart.useInteractiveGuideline());
82 |       });
83 | 
84 |       test('distributed children', function() {
85 |         var els = myEl.getContentChildren();
86 |         assert.equal(els.length, 0, 'no distributed node');
87 |       });
88 |     });
89 |   </script>
90 | 
91 | </body>
92 | 
93 | </html>
94 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-donut.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | 
13 | <head>
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Step 1: import the element to test -->
21 |   <link rel="import" href="../nvd3-donut.html">
22 | </head>
23 | 
24 | <body>
25 | 
26 |   <!-- You can use the document as a place to set up your fixtures. -->
27 |   <test-fixture id="nvd3-donut-fixture">
28 |     <template>
29 |       <nvd3-donut stop-auto-drawing></nvd3-donut>
30 |     </template>
31 |   </test-fixture>
32 | 
33 |   <script>
34 |     suite('<nvd3-donut>', function() {
35 |       var myEl;
36 |       setup(function() {
37 |         myEl = fixture('nvd3-donut-fixture');
38 |       });
39 | 
40 |       test('height is set', function() {
41 |         myEl.set('height', 300);
42 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
43 |       });
44 | 
45 |       test('width is set', function() {
46 |         myEl.set('width', 400);
47 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
48 |       });
49 | 
50 |       test('show legend is false', function() {
51 |         myEl.set('showLegend', false);
52 |         assert.isFalse(myEl._chart.showLegend());
53 |       });
54 | 
55 |       test('show legend is true', function() {
56 |         myEl.set('showLegend', true);
57 |         assert.isTrue(myEl._chart.showLegend());
58 |       });
59 | 
60 |       test('marging is set', function() {
61 |         myEl.set('margin', {
62 |           "top": 10,
63 |           "right": 20,
64 |           "bottom": 30,
65 |           "left": 40
66 |         });
67 | 
68 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
69 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
70 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
71 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
72 |       });
73 | 
74 |       test('Donut ratio is set', function() {
75 |         myEl.set('donutRatio', 0.6);
76 |         assert.equal(myEl._chart.donutRatio(), myEl.donutRatio);
77 |       });
78 | 
79 |       test('distributed children', function() {
80 |         var els = myEl.getContentChildren();
81 |         assert.equal(els.length, 0, 'no distributed node');
82 |       });
83 | 
84 |       test('disableTooltip is false', function() {
85 |         myEl.set('disableTooltip', false);
86 |         assert.isTrue(myEl._chart.tooltip.enabled());
87 |       });
88 | 
89 |       test('disableTooltip is true', function() {
90 |         myEl.set('disableTooltip', true);
91 |         assert.isFalse(myEl._chart.tooltip.enabled());
92 |       });
93 |     });
94 |   </script>
95 | 
96 | </body>
97 | 
98 | </html>
99 | 


--------------------------------------------------------------------------------
/nvd3-discrete-bar.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create discrete bar chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-discrete-bar
 10 |       data="[[data]]"
 11 |       height="100"
 12 |       width="400"
 13 |       auto-resize>
 14 |     </nvd3-discrete-bar>
 15 | 
 16 | Data Format:
 17 | ```
 18 | [
 19 |   {
 20 |     key: "Cumulative Return",
 21 |     values: [
 22 |       {
 23 |         "label" : "A" ,
 24 |         "value" : -29.765957771107
 25 |       } ,
 26 |       {
 27 |         "label" : "B" ,
 28 |         "value" : 0
 29 |       } ,
 30 |       {
 31 |         "label" : "C" ,
 32 |         "value" : 32.807804682612
 33 |       }
 34 |     ]
 35 |   }
 36 | ]
 37 | ```
 38 | 
 39 | @group NVD3 Elements
 40 | @element nvd3-discrete-bar
 41 | @demo demo/nvd3-discrete-bar.html
 42 | @hero hero.svg
 43 | -->
 44 | 
 45 | <dom-module id="nvd3-discrete-bar">
 46 |   <template>
 47 |     <style include="nvd3-shared-styles"></style>
 48 |     <!-- We need to put svg tag inside a div to set correct margins -->
 49 |     <div>
 50 |       <svg id="svg"></svg>
 51 |     </div>
 52 |   </template>
 53 | 
 54 |   <script>
 55 |     Polymer({
 56 |       is: 'nvd3-discrete-bar',
 57 |       behaviors: [NVD3.ChartBehavior],
 58 |       properties: {
 59 |         /**
 60 |          * NVD3 chart object.
 61 |          */
 62 |         _chart: {
 63 |           type: Object,
 64 |           value: function() {
 65 |             var that = this;
 66 |             return  nv.models.discreteBarChart()
 67 |               .x(function(d) {
 68 |                 return d[that.xProp];
 69 |               })
 70 |               .y(function(d) {
 71 |                 return d[that.yProp];
 72 |               });
 73 |           }
 74 |         },
 75 | 
 76 |         /**
 77 |          * Configurable x-axis property key
 78 |          */
 79 |         xProp: {
 80 |           type: String,
 81 |           value: 'label'
 82 |         },
 83 | 
 84 |         /**
 85 |          * Configurable y-axis property key
 86 |          */
 87 |         yProp: {
 88 |           type: String,
 89 |           value: 'value'
 90 |         },
 91 | 
 92 |         /**
 93 |          * NVD3 components which are used in this chart.
 94 |          * It's required for binding events.
 95 |          */
 96 |         _components: {
 97 |           type: Array,
 98 |           value: ['discretebar', 'legend', 'xAxis', 'yAxis', 'tooltip']
 99 |         },
100 | 
101 |         /**
102 |         * Display or hide the X axis
103 |         */
104 |         showXAxis: {
105 |           type: Boolean,
106 |           value: true,
107 |           observer: '_showXAxis'
108 |         },
109 | 
110 |         /**
111 |         * Display or hide the Y axis
112 |         */
113 |         showYAxis: {
114 |           type: Boolean,
115 |           value: true,
116 |           observer: '_showYAxis'
117 |         }
118 |       },
119 | 
120 |       /**
121 |       * Observer for showXAxis will change this option on the chart
122 |       * @private
123 |       * @param {Boolean} showXAxis
124 |       */
125 |       _showXAxis: function (newValue) {
126 |         if (newValue !== undefined) {
127 |           this._chart.showXAxis(newValue);
128 |         }
129 |       },
130 | 
131 |       /**
132 |       * Observer for showYAxis will change this option on the chart
133 |       * @private
134 |       * @param {Boolean} showYAxis
135 |       */
136 |       _showYAxis: function (newValue) {
137 |         if (newValue !== undefined) {
138 |           this._chart.showYAxis(newValue);
139 |         }
140 |       }
141 |     });
142 |   </script>
143 | </dom-module>


--------------------------------------------------------------------------------
/nvd3-tooltip-styles.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   /* nvd3 version 1.8.1 (https://github.com/novus/nvd3) 2015-06-15 */
  3 | 
  4 |   /********************
  5 |     Box shadow and border radius styling
  6 |   */
  7 | 
  8 |   .nvtooltip.with-3d-shadow,
  9 |   .with-3d-shadow .nvtooltip {
 10 |     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
 11 |     -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
 12 |     box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
 13 |     -webkit-border-radius: 5px;
 14 |     -moz-border-radius: 5px;
 15 |     border-radius: 5px;
 16 |   }
 17 |   
 18 |   .nvtooltip {
 19 |     position: absolute;
 20 |     background-color: rgba(255, 255, 255, 1.0);
 21 |     color: rgba(0, 0, 0, 1.0);
 22 |     padding: 1px;
 23 |     border: 1px solid rgba(0, 0, 0, .2);
 24 |     z-index: 10000;
 25 |     display: block;
 26 |     font-family: Arial;
 27 |     font-size: 13px;
 28 |     text-align: left;
 29 |     pointer-events: none;
 30 |     white-space: nowrap;
 31 |     -webkit-touch-callout: none;
 32 |     -webkit-user-select: none;
 33 |     -khtml-user-select: none;
 34 |     -moz-user-select: none;
 35 |     -ms-user-select: none;
 36 |     user-select: none;
 37 |   }
 38 | 
 39 |   .nvtooltip {
 40 |     background: rgba(255, 255, 255, 0.8);
 41 |     border: 1px solid rgba(0, 0, 0, 0.5);
 42 |     border-radius: 4px;
 43 |   }
 44 |   /* 
 45 |     Give tooltips that old fade in transition by
 46 |     putting a "with-transitions" class on the container div.
 47 |   */
 48 | 
 49 |   .nvtooltip.with-transitions,
 50 |   .with-transitions .nvtooltip {
 51 |     transition: opacity 50ms linear;
 52 |     -moz-transition: opacity 50ms linear;
 53 |     -webkit-transition: opacity 50ms linear;
 54 |     transition-delay: 200ms;
 55 |     -moz-transition-delay: 200ms;
 56 |     -webkit-transition-delay: 200ms;
 57 |   }
 58 | 
 59 |   nvtooltip.x-nvtooltip,
 60 |   .nvtooltip.y-nvtooltip {
 61 |     padding: 8px;
 62 |   }
 63 | 
 64 |   .nvtooltip h3 {
 65 |     margin: 0;
 66 |     padding: 4px 14px;
 67 |     line-height: 18px;
 68 |     font-weight: normal;
 69 |     background-color: rgba(247, 247, 247, 0.75);
 70 |     color: rgba(0, 0, 0, 1.0);
 71 |     text-align: center;
 72 |     border-bottom: 1px solid #ebebeb;
 73 |     -webkit-border-radius: 5px 5px 0 0;
 74 |     -moz-border-radius: 5px 5px 0 0;
 75 |     border-radius: 5px 5px 0 0;
 76 |   }
 77 | 
 78 |   .nvtooltip p {
 79 |     margin: 0;
 80 |     padding: 5px 14px;
 81 |     text-align: center;
 82 |   }
 83 | 
 84 |   .nvtooltip span {
 85 |     display: inline-block;
 86 |     margin: 2px 0;
 87 |   }
 88 | 
 89 |   .nvtooltip table {
 90 |     margin: 6px;
 91 |     border-spacing: 0;
 92 |   }
 93 | 
 94 |   .nvtooltip table td {
 95 |     padding: 2px 9px 2px 0;
 96 |     vertical-align: middle;
 97 |   }
 98 | 
 99 |   .nvtooltip table td.key {
100 |     font-weight: normal;
101 |   }
102 | 
103 |   .nvtooltip table td.value {
104 |     text-align: right;
105 |     font-weight: bold;
106 |   }
107 | 
108 |   .nvtooltip table tr.highlight td {
109 |     padding: 1px 9px 1px 0;
110 |     border-bottom-style: solid;
111 |     border-bottom-width: 1px;
112 |     border-top-style: solid;
113 |     border-top-width: 1px;
114 |   }
115 | 
116 |   .nvtooltip table td.legend-color-guide div {
117 |     width: 8px;
118 |     height: 8px;
119 |     vertical-align: middle;
120 |   }
121 | 
122 |   .nvtooltip table td.legend-color-guide div {
123 |     width: 12px;
124 |     height: 12px;
125 |     border: 1px solid #999;
126 |   }
127 | 
128 |   .nvtooltip .footer {
129 |     padding: 3px;
130 |     text-align: center;
131 |   }
132 | 
133 |   .nvtooltip-pending-removal {
134 |     pointer-events: none;
135 |     display: none;
136 |   }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/nvd3-stacked-area.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create stacked area chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-stacked-area
 10 |     data="[[data]]"
 11 |     height="100"
 12 |     width="400"
 13 |     auto-resize
 14 |     show-legend
 15 |     use-interactive-guideline></nvd3-stacked-area>
 16 | 
 17 | Data Format:
 18 | ```
 19 | [
 20 |   {
 21 |     "key": "North America",
 22 |     "values": [
 23 |       [1, 23.041422681023],
 24 |       [2, 19.854291255832],
 25 |       [3, 21.02286281168],
 26 |       [4, 22.093608385173]
 27 |     ]
 28 |   },
 29 | 
 30 |   {
 31 |     "key": "Africa",
 32 |     "values": [
 33 |       [1, 7.9356392949025],
 34 |       [2, 7.4514668527298],
 35 |       [3, 7.9085410566608],
 36 |       [4, 5.8996782364764]
 37 |     ]
 38 |   },
 39 | 
 40 |   {
 41 |     "key": "South America",
 42 |     "values": [
 43 |       [1, 7.9149900245423],
 44 |       [2, 7.0899888751059],
 45 |       [3, 7.5996132380614],
 46 |       [4, 8.2741174301034]
 47 |     ]
 48 |   }
 49 | ]
 50 | ```
 51 | 
 52 | @group NVD3 Elements
 53 | @element nvd3-stacked-area
 54 | @demo demo/nvd3-stacked-area.html
 55 | @hero hero.svg
 56 | -->
 57 | 
 58 | <dom-module id="nvd3-stacked-area">
 59 |   <template>
 60 |      <style include="nvd3-shared-styles">
 61 |      </style>
 62 |     <!-- We need to put svg tag inside a div to set correct margins -->
 63 |     <div>
 64 |       <svg id="svg"></svg>
 65 |     </div>
 66 |   </template>
 67 | 
 68 |   <script>
 69 |     Polymer({
 70 |       is: 'nvd3-stacked-area',
 71 |       behaviors: [NVD3.ChartBehavior],
 72 |       properties: {
 73 |         /**
 74 |          * NVD3 chart object.
 75 |          */
 76 |         _chart: {
 77 |           type: Object,
 78 |           value: function() {
 79 |             return nv.models.stackedAreaChart()
 80 |               .x(function(d) {
 81 |                 return d[0]
 82 |               })
 83 |               .y(function(d) {
 84 |                 return d[1]
 85 |               });
 86 |           }
 87 |         },
 88 | 
 89 |         /**
 90 |          * Whether to display the legend or not
 91 |          */
 92 |         showLegend: {
 93 |           type: Boolean,
 94 |           value: false
 95 |         },
 96 | 
 97 |         /**
 98 |          * Sets the chart to use a guideline and floating tooltip instead of
 99 |          * requiring the user to hover over specific hotspots.
100 |          */
101 |         useInteractiveGuideline: {
102 |           type: Boolean,
103 |           value: false
104 |         },
105 | 
106 |         /**
107 |          * Custom Labels for x axis.
108 |          * e.g. {
109 |          *     "0": "Label 0",
110 |          *     "1": "Label 1",
111 |          *     "2": "Label 2",
112 |          *     "3": "Label 3",
113 |          *     "4": "Label 4"
114 |          *   }
115 |          */
116 |         xAxisLabels: {
117 |           type: Object,
118 |           value: {},
119 |           observer: '_xAxisLabelsChanged'
120 |         },
121 | 
122 |         /**
123 |          * NVD3 components which are used in this chart.
124 |          * It's required for binding events.
125 |          */
126 |         _components: {
127 |           type: Array,
128 |           value: ['stacked', 'legend', 'controls', 'xAxis', 'x2Axis', 'yAxis', 'y2Axis', 'tooltip', 'focus']
129 |         }
130 |       },
131 | 
132 |       /**
133 |        * Check if custom labels is set and update tickFormat of x axis.
134 |        *
135 |        * @private
136 |        */
137 |       _xAxisLabelsChanged: function() {
138 |         var xAxisLabels = this.xAxisLabels;
139 | 
140 |         this._chart.xAxis.tickFormat(function(d) {
141 |           if (xAxisLabels.hasOwnProperty(d)) {
142 |             return xAxisLabels[d];
143 |           } else {
144 |             return d;
145 |           }
146 |         });
147 |       }
148 |     });
149 |   </script>
150 | </dom-module>
151 | 


--------------------------------------------------------------------------------
/demo/nvd3-cumulative-line.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |   <meta charset="utf-8">
  7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  8 |   <title>nvd3-cumulative-line Demo</title>
  9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 10 |   <link rel="import" href="../nvd3-cumulative-line.html">
 11 | </head>
 12 | 
 13 | <body unresolved>
 14 | 
 15 |   <h1>Examples of
 16 |     <code>&lt;nvd3-cumulative-line&gt;</code>:</h1>
 17 | 
 18 |   <h2>Simple chart</h2>
 19 |   <nvd3-cumulative-line id="chart-1" height="300" auto-resize show-legend use-interactive-guideline>
 20 |   </nvd3-cumulative-line>
 21 | 
 22 |   <h2>Chart with custom X Axis labels</h2>
 23 |   <nvd3-cumulative-line id="chart-2" height="300" auto-resize show-legend use-interactive-guideline>
 24 |   </nvd3-cumulative-line>
 25 | 
 26 |   <script>
 27 |     var el = document.querySelector('#chart-1');
 28 |     el.data = [{
 29 |         "key": "North America",
 30 |         "values": [
 31 |           [1, 23.041422681023],
 32 |           [2, 19.854291255832],
 33 |           [3, 21.02286281168],
 34 |           [4, 22.093608385173]
 35 |         ]
 36 |       },
 37 | 
 38 |       {
 39 |         "key": "Africa",
 40 |         "values": [
 41 |           [1, 7.9356392949025],
 42 |           [2, 7.4514668527298],
 43 |           [3, 7.9085410566608],
 44 |           [4, 5.8996782364764]
 45 |         ]
 46 |       },
 47 | 
 48 |       {
 49 |         "key": "Asia",
 50 |         "values": [
 51 |           [1, 13.153938631352],
 52 |           [2, 12.456410521864],
 53 |           [3, 12.537048663919],
 54 |           [4, 13.947386398309]
 55 |         ]
 56 |       },
 57 | 
 58 |       {
 59 |         "key": "Europe",
 60 |         "values": [
 61 |           [1, 9.3433263069351],
 62 |           [2, 8.4583069475546],
 63 |           [3, 8.0342398154196],
 64 |           [4, 8.1538966876572]
 65 |         ]
 66 |       }
 67 |     ];
 68 | 
 69 |     el = document.querySelector('#chart-2');
 70 |     el.data = [{
 71 |       "key": "North America",
 72 |       "values": [
 73 |         [1, 23.041422681023],
 74 |         [2, 19.854291255832],
 75 |         [3, 21.02286281168],
 76 |         [4, 22.093608385173]
 77 |       ]
 78 |     },
 79 | 
 80 |       {
 81 |         "key": "Africa",
 82 |         "values": [
 83 |           [1, 7.9356392949025],
 84 |           [2, 7.4514668527298],
 85 |           [3, 7.9085410566608],
 86 |           [4, 5.8996782364764]
 87 |         ]
 88 |       },
 89 | 
 90 |       {
 91 |         "key": "South America",
 92 |         "values": [
 93 |           [1, 7.9149900245423],
 94 |           [2, 7.0899888751059],
 95 |           [3, 7.5996132380614],
 96 |           [4, 8.2741174301034]
 97 |         ]
 98 |       },
 99 | 
100 |       {
101 |         "key": "Asia",
102 |         "values": [
103 |           [1, 13.153938631352],
104 |           [2, 12.456410521864],
105 |           [3, 12.537048663919],
106 |           [4, 13.947386398309]
107 |         ]
108 |       },
109 | 
110 |       {
111 |         "key": "Europe",
112 |         "values": [
113 |           [1, 9.3433263069351],
114 |           [2, 8.4583069475546],
115 |           [3, 8.0342398154196],
116 |           [4, 8.1538966876572]
117 |         ]
118 |       },
119 | 
120 |       {
121 |         "key": "Australia",
122 |         "values": [
123 |           [1, 5.1162447683392],
124 |           [2, 4.2022848306513],
125 |           [3, 4.3543715758736],
126 |           [4, 5.4641223667245]
127 |         ]
128 |       },
129 | 
130 |       {
131 |         "key": "Antarctica",
132 |         "values": [
133 |           [1, 1.3503144674343],
134 |           [2, 1.2232741112434],
135 |           [3, 1.3930470790784],
136 |           [4, 1.2631275030593]
137 |         ]
138 |       }
139 |     ];
140 | 
141 |     el.xAxisLabels = {
142 |       "1": "Q 1",
143 |       "2": "Q 2",
144 |       "3": "Q 3",
145 |       "4": "Q 4"
146 |     }
147 |   </script>
148 | </body>
149 | 
150 | </html>
151 | 


--------------------------------------------------------------------------------
/test/basic-nvd3-pie.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | @license
  4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 | Code distributed by Google as part of the polymer project is also
  9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 10 | -->
 11 | <html>
 12 | 
 13 | <head>
 14 |   <meta charset="utf-8">
 15 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 16 | 
 17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 18 |   <script src="../../web-component-tester/browser.js"></script>
 19 |   <script src="../../iron-test-helpers/mock-interactions.js"></script>
 20 | 
 21 |   <!-- Step 1: import the element to test -->
 22 |   <link rel="import" href="../nvd3-pie.html">
 23 |   <link rel="import" href="../nvd3-pie.html">
 24 | </head>
 25 | 
 26 | <body>
 27 | 
 28 |   <!-- You can use the document as a place to set up your fixtures. -->
 29 |   <test-fixture id="nvd3-pie-fixture">
 30 |     <template>
 31 |       <nvd3-pie stop-auto-drawing></nvd3-pie>
 32 |     </template>
 33 |   </test-fixture>
 34 | 
 35 |   <nvd3-pie id="nvd3-pie-select"></nvd3-pie>
 36 | 
 37 |   <script>
 38 |     suite('<nvd3-pie>', function() {
 39 |       var myEl,
 40 |         selectEl = document.querySelector('#nvd3-pie-select');
 41 | 
 42 |       selectEl.data = [{
 43 |         "label": "One",
 44 |         "value": 29
 45 |       }];
 46 | 
 47 |       setup(function() {
 48 |         myEl = fixture('nvd3-pie-fixture');
 49 |       });
 50 | 
 51 |       test('height is set', function() {
 52 |         myEl.set('height', 300);
 53 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientHeight, myEl.height);
 54 |       });
 55 | 
 56 |       test('width is set', function() {
 57 |         myEl.set('width', 400);
 58 |         assert.equal(Polymer.dom(myEl.root).querySelector('div').clientWidth, myEl.width);
 59 |       });
 60 | 
 61 |       test('show legend is false', function() {
 62 |         myEl.set('showLegend', false);
 63 |         assert.isFalse(myEl._chart.showLegend());
 64 |       });
 65 | 
 66 |       test('show legend is true', function() {
 67 |         myEl.set('showLegend', true);
 68 |         assert.isTrue(myEl._chart.showLegend());
 69 |       });
 70 | 
 71 |       test('show labels is false', function() {
 72 |         myEl.set('showLabels', false);
 73 |         assert.isFalse(myEl._chart.showLabels());
 74 |       });
 75 | 
 76 |       test('show labels is true', function() {
 77 |         myEl.set('showLabels', true);
 78 |         assert.isTrue(myEl._chart.showLabels());
 79 |       });
 80 | 
 81 |       test('marging is set', function() {
 82 |         myEl.set('margin', {
 83 |           "top": 10,
 84 |           "right": 20,
 85 |           "bottom": 30,
 86 |           "left": 40
 87 |         });
 88 | 
 89 |         assert.equal(myEl._chart.margin().top, myEl.margin.top);
 90 |         assert.equal(myEl._chart.margin().right, myEl.margin.right);
 91 |         assert.equal(myEl._chart.margin().bottom, myEl.margin.bottom);
 92 |         assert.equal(myEl._chart.margin().left, myEl.margin.left);
 93 |       });
 94 | 
 95 |       test('distributed children', function() {
 96 |         var els = myEl.getContentChildren();
 97 |         assert.equal(els.length, 0, 'no distributed node');
 98 |       });
 99 | 
100 |       test('Event slice-selected is fired when slice is clicked', function() {
101 |         selectEl.addEventListener('slice-selected', function(e) {
102 |           assert.isTrue(selectEl.data.indexOf(e.detail) > -1);
103 |         });
104 |         MockInteractions.tap(Polymer.dom(selectEl.root).querySelector('g.nv-slice'));
105 |       });
106 |     });
107 |   </script>
108 | 
109 | </body>
110 | 
111 | </html>
112 | 


--------------------------------------------------------------------------------
/demo/nvd3-multi-bar.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |   <meta charset="utf-8">
  7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  8 |   <title>nvd3-multi-bar Demo</title>
  9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 10 |   <link rel="import" href="../nvd3-multi-bar.html">
 11 | </head>
 12 | 
 13 | <body unresolved>
 14 | 
 15 |   <p>An example of
 16 |     <code>&lt;nvd3-multi-bar&gt;</code>:</p>
 17 | 
 18 |   <nvd3-multi-bar auto-resize show-legend></nvd3-multi-bar>
 19 | 
 20 |   <script>
 21 |     var el = document.querySelector('nvd3-multi-bar');
 22 |     el.data = [{
 23 |       "key": "Stream0",
 24 |       "values": [{
 25 |         "x": 0,
 26 |         "y": 0.17657645842991837
 27 |       }, {
 28 |         "x": 1,
 29 |         "y": 0.17056295930152043
 30 |       }, {
 31 |         "x": 2,
 32 |         "y": 0.1673443365488047
 33 |       }, {
 34 |         "x": 3,
 35 |         "y": 0.11723298445616456
 36 |       }, {
 37 |         "x": 4,
 38 |         "y": 1.536952569541941
 39 |       }, {
 40 |         "x": 5,
 41 |         "y": 1.3388194660534718
 42 |       }, {
 43 |         "x": 6,
 44 |         "y": 1.6333876908320444
 45 |       }, {
 46 |         "x": 7,
 47 |         "y": 0.3611814096880023
 48 |       }, {
 49 |         "x": 8,
 50 |         "y": 0.1338671870032077
 51 |       }, {
 52 |         "x": 9,
 53 |         "y": 0.17393665276883485
 54 |       }, {
 55 |         "x": 10,
 56 |         "y": 0.10082735638070002
 57 |       }, {
 58 |         "x": 11,
 59 |         "y": 0.11922403030059807
 60 |       }, {
 61 |         "x": 12,
 62 |         "y": 0.5860813191014731
 63 |       }, {
 64 |         "x": 13,
 65 |         "y": 7.264385682937074
 66 |       }]
 67 |     }, {
 68 |       "key": "Stream1",
 69 |       "values": [{
 70 |         "x": 0,
 71 |         "y": 1.2743446048854001
 72 |       }, {
 73 |         "x": 1,
 74 |         "y": 0.22290307978708743
 75 |       }, {
 76 |         "x": 2,
 77 |         "y": 0.11314237776897834
 78 |       }, {
 79 |         "x": 3,
 80 |         "y": 0.13269772172547029
 81 |       }, {
 82 |         "x": 4,
 83 |         "y": 0.18174409477004588
 84 |       }, {
 85 |         "x": 5,
 86 |         "y": 1.6019917736992826
 87 |       }, {
 88 |         "x": 6,
 89 |         "y": 1.2818868982445681
 90 |       }, {
 91 |         "x": 7,
 92 |         "y": 1.3534659925389787
 93 |       }, {
 94 |         "x": 8,
 95 |         "y": 0.26568487075373903
 96 |       }, {
 97 |         "x": 9,
 98 |         "y": 0.19123676498431127
 99 |       }, {
100 |         "x": 10,
101 |         "y": 0.19111333606020012
102 |       }, {
103 |         "x": 11,
104 |         "y": 0.16994137621985175
105 |       }, {
106 |         "x": 12,
107 |         "y": 0.1466113034868613
108 |       }, {
109 |         "x": 13,
110 |         "y": 0.11598557627294236
111 |       }]
112 |     }, {
113 |       "key": "Stream2",
114 |       "values": [{
115 |         "x": 0,
116 |         "y": 4.56961163175497
117 |       }, {
118 |         "x": 1,
119 |         "y": 0.6716892057759072
120 |       }, {
121 |         "x": 2,
122 |         "y": 0.1281580516020834
123 |       }, {
124 |         "x": 3,
125 |         "y": 0.1961314488771337
126 |       }, {
127 |         "x": 4,
128 |         "y": 0.1849392189636947
129 |       }, {
130 |         "x": 5,
131 |         "y": 0.15946723060339954
132 |       }, {
133 |         "x": 6,
134 |         "y": 0.10531361531095998
135 |       }, {
136 |         "x": 7,
137 |         "y": 0.11177708057017365
138 |       }, {
139 |         "x": 8,
140 |         "y": 0.17739074343946024
141 |       }, {
142 |         "x": 9,
143 |         "y": 0.1669708436171928
144 |       }, {
145 |         "x": 10,
146 |         "y": 0.4557125675037702
147 |       }, {
148 |         "x": 11,
149 |         "y": 1.1755390253517568
150 |       }, {
151 |         "x": 12,
152 |         "y": 2.2539044676432236
153 |       }, {
154 |         "x": 13,
155 |         "y": 3.0632300483514197
156 |       }]
157 |     }];
158 |   </script>
159 | </body>
160 | 
161 | </html>
162 | 


--------------------------------------------------------------------------------
/nvd3-cumulative-line.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create cumulative line chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-cumulative-line
 10 |     data="[[data]]"
 11 |     height="100"
 12 |     width="400"
 13 |     auto-resize
 14 |     show-legend
 15 |     use-interactive-guideline></nvd3-cumulative-line>
 16 | 
 17 | Data Format:
 18 | ```
 19 | [
 20 |   {
 21 |     "key": "North America",
 22 |     "values": [
 23 |       [1, 23.041422681023],
 24 |       [2, 19.854291255832],
 25 |       [3, 21.02286281168],
 26 |       [4, 22.093608385173]
 27 |     ]
 28 |   },
 29 | 
 30 |   {
 31 |     "key": "Africa",
 32 |     "values": [
 33 |       [1, 7.9356392949025],
 34 |       [2, 7.4514668527298],
 35 |       [3, 7.9085410566608],
 36 |       [4, 5.8996782364764]
 37 |     ]
 38 |   },
 39 | 
 40 |   {
 41 |     "key": "Asia",
 42 |     "values": [
 43 |       [1, 13.153938631352],
 44 |       [2, 12.456410521864],
 45 |       [3, 12.537048663919],
 46 |       [4, 13.947386398309]
 47 |     ]
 48 |   },
 49 | 
 50 |   {
 51 |     "key": "Europe",
 52 |     "values": [
 53 |       [1, 9.3433263069351],
 54 |       [2, 8.4583069475546],
 55 |       [3, 8.0342398154196],
 56 |       [4, 8.1538966876572]
 57 |     ]
 58 |   }
 59 | ]
 60 | ```
 61 | 
 62 | @group NVD3 Elements
 63 | @element nvd3-cumulative-line
 64 | @demo demo/nvd3-cumulative-line.html
 65 | @hero hero.svg
 66 | -->
 67 | 
 68 | <dom-module id="nvd3-cumulative-line">
 69 |   <template>
 70 |     <style include="nvd3-shared-styles"></style>
 71 |     <!-- We need to put svg tag inside a div to set correct margins -->
 72 |     <div>
 73 |       <svg id="svg"></svg>
 74 |     </div>
 75 |   </template>
 76 | 
 77 |   <script>
 78 |     Polymer({
 79 |       is: 'nvd3-cumulative-line',
 80 |       behaviors: [NVD3.ChartBehavior],
 81 |       properties: {
 82 |         /**
 83 |          * NVD3 chart object.
 84 |          */
 85 |         _chart: {
 86 |           type: Object,
 87 |           value: function() {
 88 |             return nv.models.cumulativeLineChart()
 89 |               .x(function(d) {
 90 |                 return d[0]
 91 |               })
 92 |               .y(function(d) {
 93 |                 return d[1]
 94 |               });
 95 |           }
 96 |         },
 97 | 
 98 |         /**
 99 |          * Whether to display the legend or not
100 |          */
101 |         showLegend: {
102 |           type: Boolean,
103 |           value: false
104 |         },
105 | 
106 |         /**
107 |          * Sets the chart to use a guideline and floating tooltip instead of
108 |          * requiring the user to hover over specific hotspots.
109 |          */
110 |         useInteractiveGuideline: {
111 |           type: Boolean,
112 |           value: false
113 |         },
114 | 
115 |         /**
116 |          * Custom Labels for x axis.
117 |          * e.g. {
118 |          *     "0": "Label 0",
119 |          *     "1": "Label 1",
120 |          *     "2": "Label 2",
121 |          *     "3": "Label 3",
122 |          *     "4": "Label 4"
123 |          *   }
124 |          */
125 |         xAxisLabels: {
126 |           type: Object,
127 |           value: {},
128 |           observer: '_xAxisLabelsChanged'
129 |         },
130 | 
131 |         /**
132 |          * NVD3 components which are used in this chart.
133 |          * It's required for binding events.
134 |          */
135 |         _components: {
136 |           type: Array,
137 |           value: ['lines', 'legend', 'controls', 'xAxis', 'yAxis', 'tooltip']
138 |         }
139 |       },
140 | 
141 |       /**
142 |        * Check if custom labels is set and update tickFormat of x axis.
143 |        *
144 |        * @private
145 |        */
146 |       _xAxisLabelsChanged: function() {
147 |         var xAxisLabels = this.xAxisLabels;
148 | 
149 |         this._chart.xAxis.tickFormat(function(d) {
150 |           if (xAxisLabels.hasOwnProperty(d)) {
151 |             return xAxisLabels[d];
152 |           } else {
153 |             return d;
154 |           }
155 |         });
156 |       }
157 |     });
158 |   </script>
159 | </dom-module>
160 | 


--------------------------------------------------------------------------------
/nvd3-sunburst.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create sunburst chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-sunburst
 10 |       data="[[data]]"
 11 |       height="100"
 12 |       width="400"
 13 |       auto-resize>
 14 |     </nvd3-sunburst>
 15 | 
 16 | Data Format:
 17 | ```
 18 | [{
 19 |   "name": "flare",
 20 |   "children": [
 21 |       {
 22 |           "name": "analytics",
 23 |           "children": [
 24 |               {
 25 |                   "name": "cluster",
 26 |                   "children": [
 27 |                       {"name": "AgglomerativeCluster", "size": 3938},
 28 |                       {"name": "CommunityStructure", "size": 3812},
 29 |                       {"name": "HierarchicalCluster", "size": 6714},
 30 |                       {"name": "MergeEdge", "size": 743}
 31 |                   ]
 32 |               },
 33 |               {
 34 |                   "name": "graph",
 35 |                   "children": [
 36 |                       {"name": "BetweennessCentrality", "size": 3534},
 37 |                       {"name": "LinkDistance", "size": 5731},
 38 |                       {"name": "MaxFlowMinCut", "size": 7840},
 39 |                       {"name": "ShortestPaths", "size": 5914},
 40 |                       {"name": "SpanningTree", "size": 3416}
 41 |                   ]
 42 |               },
 43 |               {
 44 |                   "name": "optimization",
 45 |                   "children": [
 46 |                       {"name": "AspectRatioBanker", "size": 7074}
 47 |                   ]
 48 |               }
 49 |           ]
 50 |       },
 51 |       {
 52 |           "name": "animate",
 53 |           "children": [
 54 |               {"name": "Easing", "size": 17010},
 55 |               {"name": "FunctionSequence", "size": 5842},
 56 |               {
 57 |                   "name": "interpolate",
 58 |                   "children": [
 59 |                       {"name": "ArrayInterpolator", "size": 1983},
 60 |                       {"name": "ColorInterpolator", "size": 2047},
 61 |                       {"name": "DateInterpolator", "size": 1375},
 62 |                       {"name": "Interpolator", "size": 8746},
 63 |                       {"name": "MatrixInterpolator", "size": 2202},
 64 |                       {"name": "NumberInterpolator", "size": 1382},
 65 |                       {"name": "ObjectInterpolator", "size": 1629},
 66 |                       {"name": "PointInterpolator", "size": 1675},
 67 |                       {"name": "RectangleInterpolator", "size": 2042}
 68 |                   ]
 69 |               },
 70 |               {"name": "ISchedulable", "size": 1041},
 71 |               {"name": "Parallel", "size": 5176},
 72 |               {"name": "Pause", "size": 449},
 73 |               {"name": "Scheduler", "size": 5593},
 74 |               {"name": "Sequence", "size": 5534},
 75 |               {"name": "Transition", "size": 9201},
 76 |               {"name": "Transitioner", "size": 19975},
 77 |               {"name": "TransitionEvent", "size": 1116},
 78 |               {"name": "Tween", "size": 6006}
 79 |           ]
 80 |       }
 81 |   ]
 82 | }]
 83 | ```
 84 | 
 85 | @group NVD3 Elements
 86 | @element nvd3-sunburst
 87 | @demo demo/nvd3-sunburst.html
 88 | @hero hero.svg
 89 | -->
 90 | 
 91 | <dom-module id="nvd3-sunburst">
 92 |   <template>
 93 |     <style include="nvd3-shared-styles"></style>
 94 |     <!-- We need to put svg tag inside a div to set correct margins -->
 95 |     <div>
 96 |       <svg id="svg"></svg>
 97 |     </div>
 98 |   </template>
 99 | 
100 |   <script>
101 |     Polymer({
102 |       is: 'nvd3-sunburst',
103 |       behaviors: [NVD3.ChartBehavior],
104 |       properties: {
105 |         /**
106 |          * NVD3 chart object.
107 |          */
108 |         _chart: {
109 |           type: Object,
110 |           value: function() {
111 |             return nv.models.sunburstChart();
112 |           }
113 |         },
114 |         mode: {
115 |           type: String,
116 |           value: 'count',
117 |           observer: 'modeChanged'
118 |         },
119 | 
120 |         /**
121 |          * NVD3 components which are used in this chart.
122 |          * It's required for binding events.
123 |          */
124 |         _components: {
125 |           type: Array,
126 |           value: ['sunburst', 'tooltip']
127 |         }
128 |       },
129 |       modeChanged: function(newvalue) {
130 |         if (this._chart) {
131 |           this._chart.mode(newvalue);
132 |         }
133 |       }
134 |     });
135 |   </script>
136 | </dom-module>
137 | 


--------------------------------------------------------------------------------
/nvd3-line-with-focus.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create line with focus chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-line-with-focus
 10 |       data="[[data]]"
 11 |       height="100"
 12 |       width="400"
 13 |       brush-extent='[50,70]'
 14 |       auto-resize
 15 |       show-legend
 16 |       use-interactive-guideline>
 17 |     </nvd3-line-with-focus>
 18 | 
 19 | Data Format:
 20 | ```
 21 | [
 22 |   {
 23 |     "key": "Sine Wave",
 24 |     "color": "#ff7f0e",
 25 |     "values": [{
 26 |       "x": 0,
 27 |       "y": 0
 28 |     }, {
 29 |       "x": 1,
 30 |       "y": 0.09983341664682815
 31 |     }, {
 32 |       "x": 2,
 33 |       "y": 0.19866933079506122
 34 |     }, {
 35 |       "x": 3,
 36 |       "y": 0.29552020666133955
 37 |     }, {
 38 |       "x": 4,
 39 |       "y": 0.3894183423086505
 40 |     }, {
 41 |       "x": 5,
 42 |       "y": 0.479425538604203
 43 |     }]
 44 |   }, {
 45 |     "key": "Cosine Wave",
 46 |     "color": "#2ca02c",
 47 |     "values": [{
 48 |       "x": 0,
 49 |       "y": 0.5
 50 |     }, {
 51 |       "x": 1,
 52 |       "y": 0.49750208263901285
 53 |     }, {
 54 |       "x": 2,
 55 |       "y": 0.4900332889206208
 56 |     }, {
 57 |       "x": 3,
 58 |       "y": 0.477668244562803
 59 |     }, {
 60 |       "x": 4,
 61 |       "y": 0.46053049700144255
 62 |     }, {
 63 |       "x": 5,
 64 |       "y": 0.4387912809451864
 65 |     }]
 66 |   }
 67 | ]
 68 | ```
 69 | 
 70 | @group NVD3 Elements
 71 | @element nvd3-line-with-focus
 72 | @demo demo/nvd3-line-with-focus.html
 73 | @hero hero.svg
 74 | -->
 75 | 
 76 | <dom-module id="nvd3-line-with-focus">
 77 |   <template>
 78 |     <style include="nvd3-shared-styles"></style>
 79 |     <!-- We need to put svg tag inside a div to set correct margins -->
 80 |     <div>
 81 |       <svg id="svg"></svg>
 82 |     </div>
 83 |   </template>
 84 | 
 85 |   <script>
 86 |     Polymer({
 87 |       is: 'nvd3-line-with-focus',
 88 |       behaviors: [NVD3.ChartBehavior],
 89 |       properties: {
 90 |         /**
 91 |          * NVD3 chart object.
 92 |          */
 93 |         _chart: {
 94 |           type: Object,
 95 |           value: function() {
 96 |             return nv.models.lineWithFocusChart();
 97 |           }
 98 |         },
 99 | 
100 |         /**
101 |          * Extent to the specified values.
102 |          */
103 |         brushExtent: {
104 |           type: Array,
105 |           observer: '_brushExtentChanged'
106 |         },
107 | 
108 |         /**
109 |          * Whether to display the legend or not
110 |          */
111 |         showLegend: {
112 |           type: Boolean,
113 |           value: false
114 |         },
115 | 
116 |         /**
117 |          * Sets the chart to use a guideline and floating tooltip instead of
118 |          * requiring the user to hover over specific hotspots.
119 |          */
120 |         useInteractiveGuideline: {
121 |           type: Boolean,
122 |           value: false
123 |         },
124 | 
125 |         /**
126 |          * Custom Labels for x axis.
127 |          * e.g. {
128 |          *     "0": "Label 0",
129 |          *     "1": "Label 1",
130 |          *     "2": "Label 2",
131 |          *     "3": "Label 3",
132 |          *     "4": "Label 4"
133 |          *   }
134 |          */
135 |         xAxisLabels: {
136 |           type: Object,
137 |           value: {},
138 |           observer: '_xAxisLabelsChanged'
139 |         },
140 | 
141 |         /**
142 |          * NVD3 components which are used in this chart.
143 |          * It's required for binding events.
144 |          */
145 |         _components: {
146 |           type: Array,
147 |           value: ['lines', 'legend', 'focus', 'xAxis', 'x2Axis', 'yAxis', 'y2Axis', 'tooltip']
148 |         }
149 |       },
150 | 
151 |       _brushExtentChanged: function() {
152 |         this._chart.brushExtent(this.brushExtent);
153 |       },
154 | 
155 |       /**
156 |        * Check if custom labels is set and update tickFormat of x axis.
157 |        *
158 |        * @private
159 |        */
160 |       _xAxisLabelsChanged: function() {
161 |         var xAxisLabels = this.xAxisLabels;
162 | 
163 |         this._chart.xAxis.tickFormat(function(d) {
164 |           if (xAxisLabels.hasOwnProperty(d)) {
165 |             return xAxisLabels[d];
166 |           } else {
167 |             return d;
168 |           }
169 |         });
170 | 
171 |         this._chart.x2Axis.tickFormat(function(d) {
172 |           if (xAxisLabels.hasOwnProperty(d)) {
173 |             return xAxisLabels[d];
174 |           } else {
175 |             return d;
176 |           }
177 |         });
178 |       }
179 |     });
180 |   </script>
181 | </dom-module>
182 | 


--------------------------------------------------------------------------------
/demo/nvd3-stacked-area.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |   <meta charset="utf-8">
  7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  8 |   <title>nvd3-stacked-area Demo</title>
  9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 10 |   <link rel="import" href="../nvd3-stacked-area.html">
 11 | </head>
 12 | 
 13 | <body unresolved>
 14 | 
 15 |   <h1>Examples of
 16 |     <code>&lt;nvd3-stacked-area&gt;</code>:</h1>
 17 | 
 18 |   <h2>Simple chart</h2>
 19 |   <nvd3-stacked-area id="chart-1" height="300" auto-resize show-legend use-interactive-guideline>
 20 |   </nvd3-stacked-area>
 21 | 
 22 |   <h2>Chart with custom X Axis labels</h2>
 23 |   <nvd3-stacked-area id="chart-2" height="300" auto-resize show-legend use-interactive-guideline>
 24 |   </nvd3-stacked-area>
 25 | 
 26 |   <script>
 27 |     var el = document.querySelector('#chart-1');
 28 |     el.data = [{
 29 |         "key": "North America",
 30 |         "values": [
 31 |           [1, 23.041422681023],
 32 |           [2, 19.854291255832],
 33 |           [3, 21.02286281168],
 34 |           [4, 22.093608385173]
 35 |         ]
 36 |       },
 37 | 
 38 |       {
 39 |         "key": "Africa",
 40 |         "values": [
 41 |           [1, 7.9356392949025],
 42 |           [2, 7.4514668527298],
 43 |           [3, 7.9085410566608],
 44 |           [4, 5.8996782364764]
 45 |         ]
 46 |       },
 47 | 
 48 |       {
 49 |         "key": "South America",
 50 |         "values": [
 51 |           [1, 7.9149900245423],
 52 |           [2, 7.0899888751059],
 53 |           [3, 7.5996132380614],
 54 |           [4, 8.2741174301034]
 55 |         ]
 56 |       },
 57 | 
 58 |       {
 59 |         "key": "Asia",
 60 |         "values": [
 61 |           [1, 13.153938631352],
 62 |           [2, 12.456410521864],
 63 |           [3, 12.537048663919],
 64 |           [4, 13.947386398309]
 65 |         ]
 66 |       },
 67 | 
 68 |       {
 69 |         "key": "Europe",
 70 |         "values": [
 71 |           [1, 9.3433263069351],
 72 |           [2, 8.4583069475546],
 73 |           [3, 8.0342398154196],
 74 |           [4, 8.1538966876572]
 75 |         ]
 76 |       },
 77 | 
 78 |       {
 79 |         "key": "Australia",
 80 |         "values": [
 81 |           [1, 5.1162447683392],
 82 |           [2, 4.2022848306513],
 83 |           [3, 4.3543715758736],
 84 |           [4, 5.4641223667245]
 85 |         ]
 86 |       },
 87 | 
 88 |       {
 89 |         "key": "Antarctica",
 90 |         "values": [
 91 |           [1, 1.3503144674343],
 92 |           [2, 1.2232741112434],
 93 |           [3, 1.3930470790784],
 94 |           [4, 1.2631275030593]
 95 |         ]
 96 |       }
 97 |     ];
 98 | 
 99 |     el = document.querySelector('#chart-2');
100 |     el.data = [{
101 |         "key": "North America",
102 |         "values": [
103 |           [1, 23.041422681023],
104 |           [2, 19.854291255832],
105 |           [3, 21.02286281168],
106 |           [4, 22.093608385173]
107 |         ]
108 |       },
109 | 
110 |       {
111 |         "key": "Africa",
112 |         "values": [
113 |           [1, 7.9356392949025],
114 |           [2, 7.4514668527298],
115 |           [3, 7.9085410566608],
116 |           [4, 5.8996782364764]
117 |         ]
118 |       },
119 | 
120 |       {
121 |         "key": "South America",
122 |         "values": [
123 |           [1, 7.9149900245423],
124 |           [2, 7.0899888751059],
125 |           [3, 7.5996132380614],
126 |           [4, 8.2741174301034]
127 |         ]
128 |       },
129 | 
130 |       {
131 |         "key": "Asia",
132 |         "values": [
133 |           [1, 13.153938631352],
134 |           [2, 12.456410521864],
135 |           [3, 12.537048663919],
136 |           [4, 13.947386398309]
137 |         ]
138 |       },
139 | 
140 |       {
141 |         "key": "Europe",
142 |         "values": [
143 |           [1, 9.3433263069351],
144 |           [2, 8.4583069475546],
145 |           [3, 8.0342398154196],
146 |           [4, 8.1538966876572]
147 |         ]
148 |       },
149 | 
150 |       {
151 |         "key": "Australia",
152 |         "values": [
153 |           [1, 5.1162447683392],
154 |           [2, 4.2022848306513],
155 |           [3, 4.3543715758736],
156 |           [4, 5.4641223667245]
157 |         ]
158 |       },
159 | 
160 |       {
161 |         "key": "Antarctica",
162 |         "values": [
163 |           [1, 1.3503144674343],
164 |           [2, 1.2232741112434],
165 |           [3, 1.3930470790784],
166 |           [4, 1.2631275030593]
167 |         ]
168 |       }
169 |     ];
170 | 
171 |     el.xAxisLabels = {
172 |       "1": "Q 1",
173 |       "2": "Q 2",
174 |       "3": "Q 3",
175 |       "4": "Q 4"
176 |     }
177 |   </script>
178 | </body>
179 | 
180 | </html>
181 | 


--------------------------------------------------------------------------------
/nvd3-line.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create line chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-line
 10 |       data="[[data]]"
 11 |       height="100"
 12 |       width="400"
 13 |       auto-resize
 14 |       show-legend
 15 |       use-interactive-guideline>
 16 |     </nvd3-line>
 17 | 
 18 | Data Format:
 19 | ```
 20 | [
 21 |   {
 22 |     "key": "Sine Wave",
 23 |     "color": "#ff7f0e",
 24 |     "values": [{
 25 |       "x": 0,
 26 |       "y": 0
 27 |     }, {
 28 |       "x": 1,
 29 |       "y": 0.09983341664682815
 30 |     }, {
 31 |       "x": 2,
 32 |       "y": 0.19866933079506122
 33 |     }, {
 34 |       "x": 3,
 35 |       "y": 0.29552020666133955
 36 |     }, {
 37 |       "x": 4,
 38 |       "y": 0.3894183423086505
 39 |     }, {
 40 |       "x": 5,
 41 |       "y": 0.479425538604203
 42 |     }]
 43 |   }, {
 44 |     "key": "Cosine Wave",
 45 |     "color": "#2ca02c",
 46 |     "values": [{
 47 |       "x": 0,
 48 |       "y": 0.5
 49 |     }, {
 50 |       "x": 1,
 51 |       "y": 0.49750208263901285
 52 |     }, {
 53 |       "x": 2,
 54 |       "y": 0.4900332889206208
 55 |     }, {
 56 |       "x": 3,
 57 |       "y": 0.477668244562803
 58 |     }, {
 59 |       "x": 4,
 60 |       "y": 0.46053049700144255
 61 |     }, {
 62 |       "x": 5,
 63 |       "y": 0.4387912809451864
 64 |     }]
 65 |   }
 66 | ]
 67 | ```
 68 | 
 69 | Custom X axis labels:
 70 | ```
 71 | {
 72 |   "0": "Label 0",
 73 |   "1": "Label 1",
 74 |   "2": "Label 2",
 75 |   "3": "Label 3",
 76 |   "4": "Label 4"
 77 | }
 78 | ```
 79 | 
 80 | 
 81 | @group NVD3 Elements
 82 | @element nvd3-line
 83 | @demo demo/nvd3-line.html
 84 | @hero hero.svg
 85 | -->
 86 | 
 87 | <dom-module id="nvd3-line">
 88 |   <template>
 89 |     <style include="nvd3-shared-styles"></style>
 90 |     <!-- We need to put svg tag inside a div to set correct margins -->
 91 |     <div>
 92 |       <svg id="svg"></svg>
 93 |     </div>
 94 |   </template>
 95 | 
 96 |   <script>
 97 |     Polymer({
 98 |       is: 'nvd3-line',
 99 |       behaviors: [NVD3.ChartBehavior],
100 |       properties: {
101 |         /**
102 |          * NVD3 chart object.
103 |          */
104 |         _chart: {
105 |           type: Object,
106 |           value: function () {
107 |             return nv.models.lineChart();
108 |           }
109 |         },
110 |         /**
111 |          * Whether to display the legend or not
112 |          */
113 |         showLegend: {
114 |           type: Boolean,
115 |           value: false
116 |         },
117 | 
118 |         /**
119 |          * Sets the chart to use a guideline and floating tooltip instead of
120 |          * requiring the user to hover over specific hotspots.
121 |          */
122 |         useInteractiveGuideline: {
123 |           type: Boolean,
124 |           value: false
125 |         },
126 | 
127 |         /**
128 |          * Custom Labels for x axis.
129 |          * e.g. {
130 |          *     "0": "Label 0",
131 |          *     "1": "Label 1",
132 |          *     "2": "Label 2",
133 |          *     "3": "Label 3",
134 |          *     "4": "Label 4"
135 |          *   }
136 |          */
137 |         xAxisLabels: {
138 |           type: Object,
139 |           value: {},
140 |           observer: '_xAxisLabelsChanged'
141 |         },
142 | 
143 |         /**
144 |          * NVD3 components which are used in this chart.
145 |          * It's required for binding events.
146 |          */
147 |         _components: {
148 |           type: Array,
149 |           value: ['lines', 'legend', 'focus', 'xAxis', 'x2Axis', 'yAxis', 'y2Axis', 'tooltip']
150 |         },
151 | 
152 |         /**
153 |         * Display or hide the X axis
154 |         */
155 |         showXAxis: {
156 |           type: Boolean,
157 |           value: true,
158 |           observer: '_showXAxis'
159 |         },
160 | 
161 |         /**
162 |         * Display or hide the Y axis
163 |         */
164 |         showYAxis: {
165 |           type: Boolean,
166 |           value: true,
167 |           observer: '_showYAxis'
168 |         }
169 |       },
170 | 
171 |       /**
172 |        * Check if custom labels is set and update tickFormat of x axis.
173 |        *
174 |        * @private
175 |          */
176 |       _xAxisLabelsChanged: function () {
177 |         var xAxisLabels = this.xAxisLabels;
178 | 
179 |         this._chart.xAxis.tickFormat(function (d) {
180 |           if (xAxisLabels.hasOwnProperty(d)) {
181 |             return xAxisLabels[d];
182 |           } else {
183 |             return d;
184 |           }
185 |         });
186 |       },
187 | 
188 |       /**
189 |       * Observer for showXAxis will change this option on the chart
190 |       * @private
191 |       * @param {Boolean} showXAxis
192 |       */
193 |       _showXAxis: function (newValue) {
194 |         if (newValue !== undefined) {
195 |           this._chart.showXAxis(newValue);
196 |         }
197 |       },
198 | 
199 |       /**
200 |       * Observer for showYAxis will change this option on the chart
201 |       * @private
202 |       * @param {Boolean} showYAxis
203 |       */
204 |       _showYAxis: function (newValue) {
205 |         if (newValue !== undefined) {
206 |           this._chart.showYAxis(newValue);
207 |         }
208 |       }
209 |     });
210 |   </script>
211 | </dom-module>


--------------------------------------------------------------------------------
/nvd3-pie.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create pie chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-pie
 10 |     data="[[data]]"
 11 |     height="100"
 12 |     width="400"
 13 |     auto-resize
 14 |     show-legend></nvd3-pie>
 15 | 
 16 | Data Format:
 17 | ```
 18 | [
 19 |   {
 20 |     "label": "label 1",
 21 |     "value": 69
 22 |   },
 23 |   {
 24 |     "label": "label 2",
 25 |     "value": 85
 26 |   }
 27 | ]
 28 | ```
 29 | 
 30 | @group NVD3 Elements
 31 | @element nvd3-pie
 32 | @demo demo/nvd3-pie.html
 33 | @hero hero.svg
 34 | -->
 35 | 
 36 | <dom-module id="nvd3-pie">
 37 |   <template>
 38 |     <style include="nvd3-shared-styles">
 39 |       #svg .nv-slice {
 40 |         transform: scale(1);
 41 |         transition: 0.1s ease-in-out;
 42 |       }
 43 |       #svg .nv-slice.selected {
 44 |         transform: scale(1.1);
 45 |       }
 46 |     </style>
 47 |     <!-- We need to put svg tag inside a div to set correct margins -->
 48 |     <div>
 49 |       <svg id="svg"></svg>
 50 |     </div>
 51 |   </template>
 52 | 
 53 |   <script>
 54 |     Polymer({
 55 |       is: 'nvd3-pie',
 56 |       behaviors: [NVD3.ChartBehavior],
 57 |       properties: {
 58 |         /**
 59 |          * NVD3 chart object.
 60 |          */
 61 |         _chart: {
 62 |           type: Object,
 63 |           value: function() {
 64 |             var that = this;
 65 |             return nv.models.pieChart()
 66 |               .x(function(d) {
 67 |                 return d[that.xProp];
 68 |               })
 69 |               .y(function(d) {
 70 |                 return d[that.yProp];
 71 |               });
 72 |           }
 73 |         },
 74 | 
 75 |         /**
 76 |          * Configurable x-axis property key
 77 |          */
 78 |         xProp: {
 79 |           type: String,
 80 |           value: 'label'
 81 |         },
 82 | 
 83 |         /**
 84 |          * Configurable y-axis property key
 85 |          */
 86 |         yProp: {
 87 |           type: String,
 88 |           value: 'value'
 89 |         },
 90 | 
 91 |         /**
 92 |          * Show pie chart labels for each slice
 93 |          */
 94 |         showLabels: {
 95 |           type: Boolean,
 96 |           value: false
 97 |         },
 98 | 
 99 |         /**
100 |          * Whether to display the legend or not
101 |          */
102 |         showLegend: {
103 |           type: Boolean,
104 |           value: false
105 |         },
106 | 
107 |         /**
108 |          * Whether to increase slice radius on hover or not
109 |          */
110 |         growOnHover: {
111 |           type: Boolean,
112 |           value: false
113 |         },
114 | 
115 |         /**
116 |          * Disable the tooltip
117 |          */
118 |         disableTooltip: {
119 |           type: Boolean,
120 |           value: false
121 |         },
122 | 
123 |         /**
124 |          * Whether the labels should be outside of pie
125 |          */
126 |         labelsOutside: {
127 |           type: Boolean,
128 |           value: false,
129 |           observer: '_labelsOutsideChanged'
130 |         },
131 | 
132 |         /**
133 |         * Container for selected slices
134 |         */
135 |         selection: {
136 |           type: Object,
137 |           notify: true
138 |         },
139 | 
140 |         /**
141 |         * Whether possible to selected several slices
142 |         */
143 |         multiSelection: {
144 |           type: Boolean,
145 |           observer: '_multiSelectionChanged'
146 |         },
147 | 
148 |         /**
149 |          * NVD3 components which are used in this chart.
150 |          * It's required for binding events.
151 |          */
152 |         _components: {
153 |           type: Array,
154 |           value: ['legend', 'pie', 'tooltip']
155 |         }
156 |       },
157 |       /**
158 |       * Fired when a slice is selected
159 |       * @event slice-selected
160 |       */
161 | 
162 |       observers: [
163 |         '_selectionChanged(selection.splices)'
164 |       ],
165 | 
166 |       ready: function() {
167 |         this._chart.pie.dispatch.on('elementClick', this._onSliceClick.bind(this));
168 |       },
169 | 
170 |       /**
171 |        * Observer for labelsOutside
172 |        */
173 |       _labelsOutsideChanged: function () {
174 |         this._chart.labelsOutside(this.labelsOutside);
175 |       },
176 | 
177 |       _onSliceClick: function(item) {
178 |         var previousElement = item.element.parentElement.querySelector('.nv-slice.selected');
179 |         if (this.multiSelection) {
180 |           if (this.selection.indexOf(item.data) > -1) {
181 |             this.splice('selection', this.selection.indexOf(item.data), 1);
182 |             item.element.classList.remove('selected');
183 |           } else {
184 |             this.push('selection', item.data);
185 |             item.element.classList.add('selected');
186 |           }
187 |         } else {
188 |           this.selection = item.data;
189 |           if (previousElement !== null) {
190 |             previousElement.classList.remove('selected');
191 |           }
192 |           item.element.classList.add('selected');
193 |         }
194 |       },
195 | 
196 |       /**
197 |       * Observer for multiSelection
198 |       */
199 |       _multiSelectionChanged: function(newValue, oldValue) {
200 |         if (newValue) {
201 |           if (this.selection === undefined) {
202 |             this.selection = [];
203 |           } else if (!(this.selection instanceof Array)) {
204 |             this.selection = [this.selection];
205 |           }
206 |         } else {
207 |           if (this.selection instanceof Array) {
208 |             var selectedSlices = this.svg.querySelectorAll('.nv-slice.selected'),
209 |               i;
210 |             for (i = 0; i < selectedSlices.length; i += 1) {
211 |               selectedSlices[i].classList.remove('selected');
212 |             }
213 |             this.selection = [];
214 |           }
215 |         }
216 |       },
217 | 
218 |       /**
219 |       * Observer for selection
220 |       */
221 |       _selectionChanged: function() {
222 |         this.fire('slice-selected', this.selection);
223 |       }
224 |     });
225 |   </script>
226 | </dom-module>
227 | 


--------------------------------------------------------------------------------
/nvd3-donut.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="nvd3-behavior.html">
  3 | 
  4 | <!--
  5 | An element to create donut chart using nvd3.
  6 | 
  7 | Example:
  8 | 
  9 |     <nvd3-donut
 10 |     data="[[data]]"
 11 |     height="300"
 12 |     width="400"
 13 |     auto-resize
 14 |     show-legend
 15 |     donut-ratio="0.25"></nvd3-donut>
 16 | 
 17 | Data Format:
 18 | ```
 19 | [
 20 |   {
 21 |     "label": "label 1",
 22 |     "value": 69
 23 |   },
 24 |   {
 25 |     "label": "label 2",
 26 |     "value": 85
 27 |   }
 28 | ]
 29 | ```
 30 | 
 31 | @group NVD3 Elements
 32 | @element nvd3-donut
 33 | @demo demo/nvd3-donut.html
 34 | @hero hero.svg
 35 | -->
 36 | 
 37 | <dom-module id="nvd3-donut">
 38 |   <template>
 39 |     <style include="nvd3-shared-styles">
 40 |       #svg .nv-slice {
 41 |         transform: scale(1);
 42 |         transition: 0.1s ease-in-out;
 43 |       }
 44 | 
 45 |       #svg .nv-slice.selected {
 46 |         transform: scale(1.1);
 47 |       }
 48 | 
 49 |     </style>
 50 |     <!-- We need to put svg tag inside a div to set correct margins -->
 51 |     <div>
 52 |       <svg id="svg"></svg>
 53 |     </div>
 54 |   </template>
 55 | 
 56 |   <script>
 57 |     Polymer({
 58 |       is: 'nvd3-donut',
 59 |       behaviors: [NVD3.ChartBehavior],
 60 |       properties: {
 61 |         /**
 62 |          * NVD3 chart object.
 63 |          */
 64 |         _chart: {
 65 |           type: Object,
 66 |           value: function() {
 67 |             return nv.models.pieChart()
 68 |               .x(function(d) {
 69 |                 return d[this.xProp];
 70 |               }.bind(this))
 71 |               .y(function(d) {
 72 |                 return d[this.yProp];
 73 |               }.bind(this))
 74 |               .donut(true);
 75 |           }
 76 |         },
 77 | 
 78 |         /**
 79 |          * Configurable x-axis property key
 80 |          */
 81 |         xProp: {
 82 |           type: String,
 83 |           value: 'label'
 84 |         },
 85 | 
 86 |         /**
 87 |          * Configurable y-axis property key
 88 |          */
 89 |         yProp: {
 90 |           type: String,
 91 |           value: 'value'
 92 |         },
 93 | 
 94 |         /**
 95 |          * Configure how big you want the donut hole size to be.
 96 |          */
 97 |         donutRatio: {
 98 |           type: Number,
 99 |           value: 0.5
100 |         },
101 | 
102 |         /**
103 |          * Show labels for each slice
104 |          */
105 |         showLabels: {
106 |           type: Boolean,
107 |           value: false
108 |         },
109 | 
110 |         /**
111 |          * Whether to display the legend or not
112 |          */
113 |         showLegend: {
114 |           type: Boolean,
115 |           value: false
116 |         },
117 | 
118 |         /**
119 |          * Whether to increase slice radius on hover or not
120 |          */
121 |         growOnHover: {
122 |           type: Boolean,
123 |           value: false
124 |         },
125 | 
126 |         /**
127 |          * Text to include within the middle of a donut chart
128 |          */
129 |         title: {
130 |           type: String
131 |         },
132 | 
133 |         /**
134 |          * Disable the tooltip
135 |          */
136 |         disableTooltip: {
137 |           type: Boolean,
138 |           value: false
139 |         },
140 | 
141 |         /**
142 |          * Whether the labels should be outside of donut
143 |          */
144 |         labelsOutside: {
145 |           type: Boolean,
146 |           value: false,
147 |           observer: '_labelsOutsideChanged'
148 |         },
149 | 
150 |         /**
151 |         * Container for selected slices
152 |         */
153 |         selection: {
154 |           type: Object,
155 |           notify: true
156 |         },
157 | 
158 |         /**
159 |         * Whether possible to selected several slices
160 |         */
161 |         multiSelection: {
162 |           type: Boolean,
163 |           observer: '_multiSelectionChanged'
164 |         },
165 | 
166 |         /**
167 |          * NVD3 components which are used in this chart.
168 |          * It's required for binding events.
169 |          */
170 |         _components: {
171 |           type: Array,
172 |           value: ['legend', 'pie', 'tooltip']
173 |         }
174 |       },
175 |       /**
176 |       * Fired when a slice is selected
177 |       * @event slice-selected
178 |       */
179 | 
180 |       observers: [
181 |         '_setDonutRatio(donutRatio)',
182 |         '_setTitle(title)',
183 |         '_selectionChanged(selection.splices)'
184 |       ],
185 | 
186 |       /**
187 |        * Observer for setting donut ratio.
188 |        */
189 |       _setDonutRatio: function(donutRatio) {
190 |         this._chart.donutRatio(this.donutRatio);
191 |       },
192 | 
193 |       /**
194 |        * Observer for setting title.
195 |        */
196 |       _setTitle: function(title) {
197 |         this._chart.title(this.title);
198 |       },
199 | 
200 |       /**
201 |        * Observer for labelsOutside
202 |        */
203 |       _labelsOutsideChanged: function () {
204 |         this._chart.labelsOutside(this.labelsOutside);
205 |       },
206 | 
207 |       ready: function() {
208 |         this._chart.pie.dispatch.on('elementClick', this._onSliceClick.bind(this));
209 |       },
210 | 
211 |       /**
212 |        * Listener for elementClick
213 |        */
214 |       _onSliceClick: function(item) {
215 |         var previousElement = item.element.parentElement.querySelector('.nv-slice.selected');
216 |         if (this.multiSelection) {
217 |           if (this.selection.indexOf(item.data) > -1) {
218 |             this.splice('selection', this.selection.indexOf(item.data), 1);
219 |             item.element.classList.remove('selected');
220 |           } else {
221 |             this.push('selection', item.data);
222 |             item.element.classList.add('selected');
223 |           }
224 |         } else {
225 |           this.selection = item.data;
226 |           if (previousElement !== null) {
227 |             previousElement.classList.remove('selected');
228 |           }
229 |           item.element.classList.add('selected');
230 |         }
231 |       },
232 | 
233 |       /**
234 |       * Observer for multiSelection
235 |       */
236 |       _multiSelectionChanged: function(newValue, oldValue) {
237 |         if (newValue) {
238 |           if (this.selection === undefined) {
239 |             this.selection = [];
240 |           } else if (!(this.selection instanceof Array)) {
241 |             this.selection = [this.selection];
242 |           }
243 |         } else {
244 |           if (this.selection instanceof Array) {
245 |             var selectedSlices = this.svg.querySelectorAll('.nv-slice.selected'),
246 |               i;
247 |             for (i = 0; i < selectedSlices.length; i += 1) {
248 |               selectedSlices[i].classList.remove('selected');
249 |             }
250 |             this.selection = [];
251 |           }
252 |         }
253 |       },
254 | 
255 |       /**
256 |       * Observer for selection
257 |       */
258 |       _selectionChanged: function() {
259 |           this.fire('slice-selected', this.selection);
260 |       }
261 |     });
262 |   </script>
263 | </dom-module>
264 | 


--------------------------------------------------------------------------------
/nvd3-behavior.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import"
  3 |       href="../iron-resizable-behavior/iron-resizable-behavior.html">
  4 | <link rel="import" href="nvd3-import.html">
  5 | 
  6 | <style is="custom-style" include="nvd3-shared-styles"></style>
  7 | 
  8 | <script>
  9 |   var NVD3 = NVD3 || {};
 10 | 
 11 |   /**
 12 |    * @polymerBehavior NVD3.ChartBehavior
 13 |    */
 14 |   NVD3.ChartBehaviorImpl = {
 15 |     properties: {
 16 |       /*
 17 |        * Data
 18 |        */
 19 |       data: {
 20 |         type: Array,
 21 |         value: function() {
 22 |           return [];
 23 |         },
 24 |         observer: '_dataChanged'
 25 |       },
 26 | 
 27 |       /*
 28 |        * SVG object for d3
 29 |        */
 30 |       svg: {
 31 |         type: Object
 32 |       },
 33 | 
 34 |       /**
 35 |        * Stop auto drawing the chart on attaching the element.
 36 |        */
 37 |       stopAutoDrawing: {
 38 |         type: Boolean,
 39 |         value: false
 40 |       },
 41 | 
 42 |       /**
 43 |        * Auto resize chart after resizing browser window.
 44 |        */
 45 |       autoResize: {
 46 |         type: Boolean,
 47 |         value: false
 48 |       },
 49 | 
 50 |       /**
 51 |        * Colors to use for the different data.
 52 |        * If an array is given, it is converted to a function automatically.
 53 |        */
 54 |       color: {
 55 |         type: Array,
 56 |         value: function() {
 57 |           nv.utils.defaultColor();
 58 |         }
 59 |       },
 60 | 
 61 |       /**
 62 |        * The height the graph or component created inside the SVG should be made.
 63 |        * Default: The height of the container element (normally the svg itself).
 64 |        */
 65 |       height: {
 66 |         type: Number
 67 |       },
 68 | 
 69 |       /**
 70 |        * Object containing the margins for the chart or component.
 71 |        * You can specify only certain margins in the object to change just
 72 |        * those parts.
 73 |        */
 74 |       margin: {
 75 |         type: Object,
 76 |         value: function() {
 77 |           return {
 78 |             left: null,
 79 |             right: null,
 80 |             top: null,
 81 |             bottom: null
 82 |           };
 83 |         }
 84 |       },
 85 | 
 86 |       /**
 87 |        * Message to display if no data is provided.
 88 |        */
 89 |       noData: {
 90 |         type: String
 91 |       },
 92 | 
 93 |       /**
 94 |        * The width the graph or component created inside the SVG should be made.
 95 |        * Default: The width of the container element (normally the svg itself).
 96 |        */
 97 |       width: {
 98 |         type: Number
 99 |       },
100 | 
101 |       /**
102 |        * View box height
103 |        */
104 |       viewBoxHeight: {
105 |         type: Number,
106 |         value: 100
107 |       },
108 | 
109 |       /**
110 |        * View box width
111 |        */
112 |       viewBoxWidth: {
113 |         type: Number,
114 |         value: 100
115 |       },
116 | 
117 |       /**
118 |        * Extra width for view box so labels don't get cut off
119 |        */
120 |       extraViewBoxWidth: {
121 |         type: Number,
122 |         value: 50
123 |       },
124 | 
125 |       /**
126 |        * Holds the id for the tooltip so it can be removed when chart is detached/removed from DOM.
127 |        */
128 |       _tooltipId: {
129 |         type: String,
130 |         readOnly: true
131 |       },
132 | 
133 |       /**
134 |        * Make use of viewBox for sizing
135 |        */
136 |       flexSize: {
137 |         type: Boolean,
138 |         value: false
139 |       }
140 |     },
141 | 
142 |     observers: [
143 |       '_setColor(color.length)',
144 |       '_setMargin(margin.top, margin.right, margin.bottom, margin.left)',
145 |       '_setNoData(noData)',
146 |       '_setWidth(width)',
147 |       '_setHeight(height)',
148 |       '_setShowLabels(showLabels)',
149 |       '_setShowLegend(showLegend)',
150 |       '_setUseInteractiveGuideline(useInteractiveGuideline)',
151 |       '_setGrowOnHover(growOnHover)',
152 |       '_setDisableTooltip(disableTooltip)'
153 |     ],
154 | 
155 |     listeners: {
156 |       'iron-resize': '_onResize',
157 |       'transitionend': '_onTransitionEnd'
158 |     },
159 | 
160 |     /**
161 |      * Listener for iron-resize
162 |      */
163 |     _onResize: function() {
164 |       if (this.autoResize) {
165 |         this.debounce('autoResize', function() {
166 |           this.refresh();
167 |         }.bind(this), 200);
168 |       }
169 |     },
170 | 
171 |     _onTransitionEnd: function(e) {
172 |       // Workaround when nvd3 elements are used inside an iron-collapse.
173 |       // Some nvd3-elemts use css transitions, for exemple to change opacity in
174 |       // pie when mouse is hover. 
175 |       // iron-collaspe react to transitionend events by firing an iron-resize,
176 |       // which cause the chart to repaint.
177 |       e.stopPropagation();
178 |     },
179 | 
180 |     /**
181 |      * Observer for setting color.
182 |      */
183 |     _setColor: function(colorLength) {
184 |       this._chart.color(this.color);
185 |     },
186 | 
187 |     /**
188 |      * Observer for setting height.
189 |      */
190 |     _setHeight: function(height) {
191 |       if (typeof height === 'number' && height > 0) {
192 |         this.$$('div').style.height = height + 'px';
193 |       }
194 |     },
195 | 
196 |     /**
197 |      * Observer for setting margins.
198 |      */
199 |     _setMargin: function(marginTop, marginRight, marginBottom, marginLeft) {
200 |       if (marginTop) {
201 |         this._chart.margin({
202 |           "top": marginTop
203 |         });
204 |       }
205 | 
206 |       if (marginRight) {
207 |         this._chart.margin({
208 |           "right": marginRight
209 |         });
210 |       }
211 | 
212 |       if (marginBottom) {
213 |         this._chart.margin({
214 |           "bottom": marginBottom
215 |         });
216 |       }
217 | 
218 |       if (marginLeft) {
219 |         this._chart.margin({
220 |           "left": marginLeft
221 |         });
222 |       }
223 |     },
224 | 
225 |     /**
226 |      * Observer for setting text of no data.
227 |      */
228 |     _setNoData: function(noData) {
229 |       this._chart.noData(noData);
230 |     },
231 | 
232 |     /**
233 |      * Observer for setting show labels.
234 |      */
235 |     _setShowLabels: function(showLabels) {
236 |       this._chart.showLabels(showLabels);
237 |     },
238 | 
239 |     /**
240 |      * Observer for setting show legend.
241 |      */
242 |     _setShowLegend: function(showLegend) {
243 |       this._chart.showLegend(showLegend);
244 |     },
245 | 
246 |     /**
247 |      * Observer for setting width.
248 |      */
249 |     _setWidth: function(width) {
250 |       if (typeof width === 'number' && width > 0) {
251 |         this.$$('div').style.width = width + 'px';
252 |       }
253 |     },
254 | 
255 |     /**
256 |      * Observer for setting use interactive guideline.
257 |      */
258 |     _setUseInteractiveGuideline: function(useInteractiveGuideline) {
259 |       this._chart.useInteractiveGuideline(this.useInteractiveGuideline);
260 |     },
261 | 
262 |     /**
263 |      * Observer for growOnHover.
264 |      */
265 |     _setGrowOnHover: function(growOnHover) {
266 |       this._chart.growOnHover(this.growOnHover);
267 |     },
268 | 
269 |     /**
270 |      * Observer for disableTooltip
271 |      */
272 |     _setDisableTooltip: function(disableTooltip) {
273 |       this._chart.tooltip.enabled(!disableTooltip);
274 |     },
275 | 
276 |     /**
277 |      * Observer for data changed
278 |      */
279 |     _dataChanged: function() {
280 |       if (this._chart) {
281 |         d3.select(this.svg).datum(this.data);
282 |         this.refresh();
283 |       }
284 |     },
285 | 
286 |     /**
287 |      * Updates the chart
288 |      */
289 |     refresh: function() {
290 |       if (this._chart.update) {
291 |         this._chart.update();
292 |       }
293 |     },
294 | 
295 |     /**
296 |      * Generate and attach the chart;
297 |      */
298 |     generateChart: function() {
299 |       nv.addGraph(function() {
300 |         d3.select(this.svg)
301 |           .datum(this.data)
302 |           .call(this._chart);
303 | 
304 |         if (this.flexSize) {
305 |           d3.select(this.svg)
306 |             .attr('width', this.viewBoxWidth + this.extraViewBoxWidth)
307 |             .attr('height', this.viewBoxHeight);
308 |           this._chart.update();
309 |         }
310 | 
311 |         this._set_tooltipId(this._chart.tooltip.id());
312 |         this._bindEvents();
313 |         return this._chart;
314 |       }.bind(this));
315 |     },
316 | 
317 |     /**
318 |      * Bind NVD3 events of chart and its components to fire custom events
319 |      * @private
320 |      */
321 |     _bindEvents: function() {
322 |       let componentsEvents = {};
323 | 
324 |       this._components.forEach(function(component) {
325 |         if (this._chart[component].dispatch) {
326 |           componentsEvents[component] = Object.keys(this._chart[component].dispatch);
327 |         }
328 |       }.bind(this));
329 | 
330 |       Object.keys(this._chart.dispatch).forEach(function(event) {
331 |         this._bindChartEvent(event);
332 |       }.bind(this));
333 | 
334 |       Object.keys(componentsEvents).forEach(function(component) {
335 |         componentsEvents[component].forEach(function(eventName) {
336 |           this._bindComponentEvent(component, eventName);
337 |         }.bind(this));
338 |       }.bind(this));
339 |     },
340 | 
341 | 
342 |     /**
343 |      * Bind NVD3 events of chart to fire custom events
344 |      * @private
345 |      */
346 |     _bindChartEvent: function(eventName) {
347 |       this._chart.dispatch.on(eventName, function(e) {
348 |         this.fire(eventName, e);
349 |       }.bind(this));
350 |     },
351 | 
352 | 
353 |     /**
354 |      * Bind NVD3 events of chart's components to fire custom events
355 |      * @private
356 |      */
357 |     _bindComponentEvent: function(component, eventName) {
358 |       this._chart[component].dispatch.on(eventName, function(e) {
359 |         this.fire(eventName, e);
360 |       }.bind(this));
361 |     },
362 | 
363 |     ready: function() {
364 |       this.set('svg', this.$.svg);
365 |       this.scopeSubtree(this.$.svg, true);
366 |     },
367 | 
368 |     attached: function() {
369 |       if (!this.stopAutoDrawing) {
370 |         this.generateChart();
371 |       }
372 |     },
373 | 
374 |     detached: function() {
375 |       var tooltip = document.getElementById(this._tooltipId);
376 |       if (tooltip) {
377 |         tooltip.remove();
378 |       }
379 |     }
380 |   };
381 |   NVD3.ChartBehavior = [
382 |     NVD3.ChartBehaviorImpl,
383 |     Polymer.IronResizableBehavior
384 |   ];
385 | </script>
386 | 


--------------------------------------------------------------------------------
/nvd3-shared-styles.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | 
  3 | <dom-module id="nvd3-shared-styles">
  4 |   <template>
  5 |     <style>
  6 |       /* nvd3 version 1.8.1 (https://github.com/novus/nvd3) 2015-06-15 */
  7 | 
  8 |       #svg .nvd3 .nv-axis {
  9 |         pointer-events: none;
 10 |         opacity: 1;
 11 |       }
 12 | 
 13 |       #svg .nvd3 .nv-axis path {
 14 |         fill: none;
 15 |         stroke: #000;
 16 |         stroke-opacity: .75;
 17 |         shape-rendering: crispEdges;
 18 |       }
 19 | 
 20 |       #svg .nvd3 .nv-axis path.domain {
 21 |         stroke-opacity: .75;
 22 |       }
 23 | 
 24 |       #svg .nvd3 .nv-axis.nv-x path.domain {
 25 |         stroke-opacity: 0;
 26 |       }
 27 | 
 28 |       #svg .nvd3 .nv-axis line {
 29 |         fill: none;
 30 |         stroke: #e5e5e5;
 31 |         shape-rendering: crispEdges;
 32 |       }
 33 | 
 34 |       #svg .nvd3 .nv-axis .zero line,
 35 |       /*this selector may not be necessary*/
 36 | 
 37 |       #svg .nvd3 .nv-axis line.zero {
 38 |         stroke-opacity: .75;
 39 |       }
 40 | 
 41 |       #svg .nvd3 .nv-axis .nv-axisMaxMin text {
 42 |         font-weight: bold;
 43 |       }
 44 | 
 45 |       #svg .nvd3 .x .nv-axis .nv-axisMaxMin text,
 46 |       #svg .nvd3 .x2 .nv-axis .nv-axisMaxMin text,
 47 |       #svg .nvd3 .x3 .nv-axis .nv-axisMaxMin text {
 48 |         text-anchor: middle
 49 |       }
 50 | 
 51 |       #svg .nvd3 .nv-axis.nv-disabled {
 52 |         opacity: 0;
 53 |       }
 54 | 
 55 |       #svg .nvd3 .nv-bars rect {
 56 |         fill-opacity: .75;
 57 |         transition: fill-opacity 250ms linear;
 58 |         -moz-transition: fill-opacity 250ms linear;
 59 |         -webkit-transition: fill-opacity 250ms linear;
 60 |       }
 61 | 
 62 |       #svg .nvd3 .nv-bars rect.hover {
 63 |         fill-opacity: 1;
 64 |       }
 65 | 
 66 |       #svg .nvd3 .nv-bars .hover rect {
 67 |         fill: lightblue;
 68 |       }
 69 | 
 70 |       #svg .nvd3 .nv-bars text {
 71 |         fill: rgba(0, 0, 0, 0);
 72 |       }
 73 | 
 74 |       #svg .nvd3 .nv-bars .hover text {
 75 |         fill: rgba(0, 0, 0, 1);
 76 |       }
 77 | 
 78 |       #svg .nvd3 .nv-multibar .nv-groups rect,
 79 |       #svg .nvd3 .nv-multibarHorizontal .nv-groups rect,
 80 |       #svg .nvd3 .nv-discretebar .nv-groups rect {
 81 |         stroke-opacity: 0;
 82 |         transition: fill-opacity 250ms linear;
 83 |         -moz-transition: fill-opacity 250ms linear;
 84 |         -webkit-transition: fill-opacity 250ms linear;
 85 |       }
 86 | 
 87 |       #svg .nvd3 .nv-multibar .nv-groups rect:hover,
 88 |       #svg .nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
 89 |       #svg .nvd3 .nv-candlestickBar .nv-ticks rect:hover,
 90 |       #svg .nvd3 .nv-discretebar .nv-groups rect:hover {
 91 |         fill-opacity: 1;
 92 |       }
 93 | 
 94 |       #svg .nvd3 .nv-discretebar .nv-groups text,
 95 |       #svg .nvd3 .nv-multibarHorizontal .nv-groups text {
 96 |         font-weight: bold;
 97 |         fill: rgba(0, 0, 0, 1);
 98 |         stroke: rgba(0, 0, 0, 0);
 99 |       }
100 |       /* boxplot CSS */
101 | 
102 |       #svg .nvd3 .nv-boxplot circle {
103 |         fill-opacity: 0.5;
104 |       }
105 | 
106 |       #svg .nvd3 .nv-boxplot circle:hover {
107 |         fill-opacity: 1;
108 |       }
109 | 
110 |       #svg .nvd3 .nv-boxplot rect:hover {
111 |         fill-opacity: 1;
112 |       }
113 | 
114 |       #svg .nvd3 line.nv-boxplot-median {
115 |         stroke: black;
116 |       }
117 | 
118 |       #svg .nv-boxplot-tick:hover {
119 |         stroke-width: 2.5px;
120 |       }
121 |       /* bullet */
122 | 
123 |       #svg .nvd3.nv-bullet {
124 |         font: 10px sans-serif;
125 |       }
126 | 
127 |       #svg .nvd3.nv-bullet .nv-measure {
128 |         fill-opacity: .8;
129 |       }
130 | 
131 |       #svg .nvd3.nv-bullet .nv-measure:hover {
132 |         fill-opacity: 1;
133 |       }
134 | 
135 |       #svg .nvd3.nv-bullet .nv-marker {
136 |         stroke: #000;
137 |         stroke-width: 2px;
138 |       }
139 | 
140 |       #svg .nvd3.nv-bullet .nv-markerTriangle {
141 |         stroke: #000;
142 |         fill: #fff;
143 |         stroke-width: 1.5px;
144 |       }
145 | 
146 |       #svg .nvd3.nv-bullet .nv-tick line {
147 |         stroke: #666;
148 |         stroke-width: .5px;
149 |       }
150 | 
151 |       #svg .nvd3.nv-bullet .nv-range.nv-s0 {
152 |         fill: #eee;
153 |       }
154 | 
155 |       #svg .nvd3.nv-bullet .nv-range.nv-s1 {
156 |         fill: #ddd;
157 |       }
158 | 
159 |       #svg .nvd3.nv-bullet .nv-range.nv-s2 {
160 |         fill: #ccc;
161 |       }
162 | 
163 |       #svg .nvd3.nv-bullet .nv-title {
164 |         font-size: 14px;
165 |         font-weight: bold;
166 |       }
167 | 
168 |       #svg .nvd3.nv-bullet .nv-subtitle {
169 |         fill: #999;
170 |       }
171 | 
172 |       #svg .nvd3.nv-bullet .nv-range {
173 |         fill: #bababa;
174 |         fill-opacity: .4;
175 |       }
176 | 
177 |       #svg .nvd3.nv-bullet .nv-range:hover {
178 |         fill-opacity: .7;
179 |       }
180 | 
181 |       #svg .nvd3.nv-candlestickBar .nv-ticks .nv-tick {
182 |         stroke-width: 1px;
183 |       }
184 | 
185 |       #svg .nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
186 |         stroke-width: 2px;
187 |       }
188 | 
189 |       #svg .nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
190 |         stroke: #2ca02c;
191 |         fill: #2ca02c;
192 |       }
193 | 
194 |       #svg .nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
195 |         stroke: #d62728;
196 |         fill: #d62728;
197 |       }
198 | 
199 |       #svg .with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
200 |         transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
201 |         -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
202 |         -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
203 |       }
204 | 
205 |       #svg .nvd3.nv-candlestickBar .nv-ticks line {
206 |         stroke: #333;
207 |       }
208 | 
209 |       #svg .nvd3 .nv-legend .nv-disabled rect {
210 |         /*fill-opacity: 0;*/
211 |       }
212 | 
213 |       #svg .nvd3 .nv-check-box .nv-box {
214 |         fill-opacity: 0;
215 |         stroke-width: 2;
216 |       }
217 | 
218 |       #svg .nvd3 .nv-check-box .nv-check {
219 |         fill-opacity: 0;
220 |         stroke-width: 4;
221 |       }
222 | 
223 |       #svg .nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
224 |         fill-opacity: 0;
225 |         stroke-opacity: 0;
226 |       }
227 | 
228 |       #svg .nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
229 |         opacity: 0;
230 |       }
231 |       /* line plus bar */
232 | 
233 |       #svg .nvd3.nv-linePlusBar .nv-bar rect {
234 |         fill-opacity: .75;
235 |       }
236 | 
237 |       #svg .nvd3.nv-linePlusBar .nv-bar rect:hover {
238 |         fill-opacity: 1;
239 |       }
240 | 
241 |       #svg .nvd3 .nv-groups path.nv-line {
242 |         fill: none;
243 |       }
244 | 
245 |       #svg .nvd3 .nv-groups path.nv-area {
246 |         stroke: none;
247 |       }
248 | 
249 |       #svg .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
250 |         fill-opacity: 0;
251 |         stroke-opacity: 0;
252 |       }
253 | 
254 |       #svg .nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
255 |         fill-opacity: .5 !important;
256 |         stroke-opacity: .5 !important;
257 |       }
258 | 
259 |       #svg .with-transitions .nvd3 .nv-groups .nv-point {
260 |         transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
261 |         -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
262 |         -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
263 |       }
264 | 
265 |       #svg .nvd3.nv-scatter .nv-groups .nv-point.hover,
266 |       #svg .nvd3 .nv-groups .nv-point.hover {
267 |         stroke-width: 7px;
268 |         fill-opacity: .95 !important;
269 |         stroke-opacity: .95 !important;
270 |       }
271 | 
272 |       #svg .nvd3 .nv-point-paths path {
273 |         stroke: #aaa;
274 |         stroke-opacity: 0;
275 |         fill: #eee;
276 |         fill-opacity: 0;
277 |       }
278 | 
279 |       #svg .nvd3 .nv-indexLine {
280 |         cursor: ew-resize;
281 |       }
282 |       /********************
283 |  * SVG CSS
284 |  */
285 |       /********************
286 |   Default CSS for an svg element nvd3 used
287 | */
288 | 
289 |       #svg {
290 |         -webkit-touch-callout: none;
291 |         -webkit-user-select: none;
292 |         -khtml-user-select: none;
293 |         -ms-user-select: none;
294 |         -moz-user-select: none;
295 |         user-select: none;
296 |         display: block;
297 |         width: 100%;
298 |         height: 100%;
299 |       }
300 |       /********************
301 |   Box shadow and border radius styling
302 | */
303 | 
304 |       #svg .nvtooltip.with-3d-shadow,
305 |       #svg .with-3d-shadow .nvtooltip {
306 |         -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
307 |         -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
308 |         box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
309 |         -webkit-border-radius: 5px;
310 |         -moz-border-radius: 5px;
311 |         border-radius: 5px;
312 |       }
313 | 
314 |       #svg .nvd3 text {
315 |         font: normal 12px Arial;
316 |       }
317 | 
318 |       #svg .nvd3 .title {
319 |         font: bold 14px Arial;
320 |       }
321 | 
322 |       #svg .nvd3 .nv-background {
323 |         fill: white;
324 |         fill-opacity: 0;
325 |       }
326 | 
327 |       #svg .nvd3.nv-noData {
328 |         font-size: 18px;
329 |         font-weight: bold;
330 |       }
331 |       /**********
332 | *  Brush
333 | */
334 | 
335 |       #svg .nv-brush .extent {
336 |         fill-opacity: .125;
337 |         shape-rendering: crispEdges;
338 |       }
339 | 
340 |       #svg .nv-brush .resize path {
341 |         fill: #eee;
342 |         stroke: #666;
343 |       }
344 |       /**********
345 | *  Legend
346 | */
347 | 
348 |       #svg .nvd3 .nv-legend .nv-series {
349 |         cursor: pointer;
350 |       }
351 | 
352 |       #svg .nvd3 .nv-legend .nv-disabled circle {
353 |         fill-opacity: 0;
354 |       }
355 |       /* focus */
356 | 
357 |       #svg .nvd3 .nv-brush .extent {
358 |         fill-opacity: 0 !important;
359 |       }
360 | 
361 |       #svg .nvd3 .nv-brushBackground rect {
362 |         stroke: #000;
363 |         stroke-width: .4;
364 |         fill: #fff;
365 |         fill-opacity: .7;
366 |       }
367 | 
368 |       #svg .nvd3.nv-ohlcBar .nv-ticks .nv-tick {
369 |         stroke-width: 1px;
370 |       }
371 | 
372 |       #svg .nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
373 |         stroke-width: 2px;
374 |       }
375 | 
376 |       #svg .nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
377 |         stroke: #2ca02c;
378 |       }
379 | 
380 |       #svg .nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
381 |         stroke: #d62728;
382 |       }
383 | 
384 |       #svg .nvd3 .background path {
385 |         fill: none;
386 |         stroke: #EEE;
387 |         stroke-opacity: .4;
388 |         shape-rendering: crispEdges;
389 |       }
390 | 
391 |       #svg .nvd3 .foreground path {
392 |         fill: none;
393 |         stroke-opacity: .7;
394 |       }
395 | 
396 |       #svg .nvd3 .nv-parallelCoordinates-brush .extent {
397 |         fill: #fff;
398 |         fill-opacity: .6;
399 |         stroke: gray;
400 |         shape-rendering: crispEdges;
401 |       }
402 | 
403 |       #svg .nvd3 .nv-parallelCoordinates .hover {
404 |         fill-opacity: 1;
405 |         stroke-width: 3px;
406 |       }
407 | 
408 |       #svg .nvd3 .missingValuesline line {
409 |         fill: none;
410 |         stroke: black;
411 |         stroke-width: 1;
412 |         stroke-opacity: 1;
413 |         stroke-dasharray: 5, 5;
414 |       }
415 | 
416 |       #svg .nvd3.nv-pie path {
417 |         stroke-opacity: 0;
418 |         transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
419 |         -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
420 |         -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
421 |       }
422 | 
423 |       #svg .nvd3.nv-pie .nv-pie-title {
424 |         font-size: 24px;
425 |         fill: rgba(19, 196, 249, 0.59);
426 |       }
427 | 
428 |       #svg .nvd3.nv-pie .nv-slice text {
429 |         stroke: #000;
430 |         stroke-width: 0;
431 |       }
432 | 
433 |       #svg .nvd3.nv-pie path {
434 |         stroke: #fff;
435 |         stroke-width: 1px;
436 |         stroke-opacity: 1;
437 |       }
438 | 
439 |       #svg .nvd3.nv-pie .hover path {
440 |         fill-opacity: .7;
441 |       }
442 | 
443 |       #svg .nvd3.nv-pie .nv-label {
444 |         pointer-events: none;
445 |       }
446 | 
447 |       #svg .nvd3.nv-pie .nv-label rect {
448 |         fill-opacity: 0;
449 |         stroke-opacity: 0;
450 |       }
451 |       /* scatter */
452 | 
453 |       #svg .nvd3 .nv-groups .nv-point.hover {
454 |         stroke-width: 20px;
455 |         stroke-opacity: .5;
456 |       }
457 | 
458 |       #svg .nvd3 .nv-scatter .nv-point.hover {
459 |         fill-opacity: 1;
460 |       }
461 | 
462 |       #svg .nv-noninteractive {
463 |         pointer-events: none;
464 |       }
465 | 
466 |       #svg .nv-distx,
467 |       #svg .nv-disty {
468 |         pointer-events: none;
469 |       }
470 |       /* sparkline */
471 | 
472 |       #svg .nvd3.nv-sparkline path {
473 |         fill: none;
474 |       }
475 | 
476 |       #svg .nvd3.nv-sparklineplus g.nv-hoverValue {
477 |         pointer-events: none;
478 |       }
479 | 
480 |       #svg .nvd3.nv-sparklineplus .nv-hoverValue line {
481 |         stroke: #333;
482 |         stroke-width: 1.5px;
483 |       }
484 | 
485 |       #svg .nvd3.nv-sparklineplus,
486 |       #svg .nvd3.nv-sparklineplus g {
487 |         pointer-events: all;
488 |       }
489 | 
490 |       #svg .nvd3 .nv-hoverArea {
491 |         fill-opacity: 0;
492 |         stroke-opacity: 0;
493 |       }
494 | 
495 |       #svg .nvd3.nv-sparklineplus .nv-xValue,
496 |       #svg .nvd3.nv-sparklineplus .nv-yValue {
497 |         stroke-width: 0;
498 |         font-size: .9em;
499 |         font-weight: normal;
500 |       }
501 | 
502 |       #svg .nvd3.nv-sparklineplus .nv-yValue {
503 |         stroke: #f66;
504 |       }
505 | 
506 |       #svg .nvd3.nv-sparklineplus .nv-maxValue {
507 |         stroke: #2ca02c;
508 |         fill: #2ca02c;
509 |       }
510 | 
511 |       #svg .nvd3.nv-sparklineplus .nv-minValue {
512 |         stroke: #d62728;
513 |         fill: #d62728;
514 |       }
515 | 
516 |       #svg .nvd3.nv-sparklineplus .nv-currentValue {
517 |         font-weight: bold;
518 |         font-size: 1.1em;
519 |       }
520 |       /* stacked area */
521 | 
522 |       #svg .nvd3.nv-stackedarea path.nv-area {
523 |         fill-opacity: .7;
524 |         stroke-opacity: 0;
525 |         transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
526 |         -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
527 |         -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
528 |       }
529 | 
530 |       #svg .nvd3.nv-stackedarea path.nv-area.hover {
531 |         fill-opacity: .9;
532 |       }
533 | 
534 |       #svg .nvd3.nv-stackedarea .nv-groups .nv-point {
535 |         stroke-opacity: 0;
536 |         fill-opacity: 0;
537 |       }
538 | 
539 |       /****
540 | Interactive Layer
541 | */
542 | 
543 |       #svg .nvd3 .nv-interactiveGuideLine {
544 |         pointer-events: none;
545 |       }
546 | 
547 |       #svg .nvd3 line.nv-guideline {
548 |         stroke: #ccc;
549 |       }
550 |     </style>
551 |   </template>
552 | </dom-module>
553 | 


--------------------------------------------------------------------------------
/demo/nvd3-line-with-focus.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |   <meta charset="utf-8">
  7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  8 |   <title>nvd3-line-with-focus Demo</title>
  9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 10 |   <link rel="import" href="../nvd3-line-with-focus.html">
 11 | </head>
 12 | 
 13 | <body unresolved>
 14 | 
 15 |   <h1>Examples of
 16 |     <code>&lt;nvd3-line-with-focus&gt;</code>:</h1>
 17 | 
 18 |   <h2>Simple chart</h2>
 19 |   <nvd3-line-with-focus id="chart-1" height="250" brush-extent='[35,50]' show-legend use-interactive-guideline auto-resize no-data="No Data Available!">
 20 |   </nvd3-line-with-focus>
 21 | 
 22 |   <h2>Chart with custom X Axis labels</h2>
 23 |   <nvd3-line-with-focus id="chart-2" height="250" brush-extent='[1,2]' show-legend use-interactive-guideline auto-resize no-data="No Data Available!">
 24 |   </nvd3-line-with-focus>
 25 |   <script>
 26 |     var el = document.querySelector('#chart-1');
 27 | 
 28 |     el.data = [{
 29 |       "values": [{
 30 |         "x": 0,
 31 |         "y": 0
 32 |       }, {
 33 |         "x": 1,
 34 |         "y": 0.09983341664682815
 35 |       }, {
 36 |         "x": 2,
 37 |         "y": 0.19866933079506122
 38 |       }, {
 39 |         "x": 3,
 40 |         "y": 0.29552020666133955
 41 |       }, {
 42 |         "x": 4,
 43 |         "y": 0.3894183423086505
 44 |       }, {
 45 |         "x": 5,
 46 |         "y": 0.479425538604203
 47 |       }, {
 48 |         "x": 6,
 49 |         "y": 0.5646424733950354
 50 |       }, {
 51 |         "x": 7,
 52 |         "y": 0.644217687237691
 53 |       }, {
 54 |         "x": 8,
 55 |         "y": 0.7173560908995229
 56 |       }, {
 57 |         "x": 9,
 58 |         "y": 0.7833269096274834
 59 |       }, {
 60 |         "x": 10,
 61 |         "y": 0.8414709848078965
 62 |       }, {
 63 |         "x": 11,
 64 |         "y": 0.8912073600614354
 65 |       }, {
 66 |         "x": 12,
 67 |         "y": 0.9320390859672263
 68 |       }, {
 69 |         "x": 13,
 70 |         "y": 0.963558185417193
 71 |       }, {
 72 |         "x": 14,
 73 |         "y": 0.9854497299884601
 74 |       }, {
 75 |         "x": 15,
 76 |         "y": 0.9974949866040544
 77 |       }, {
 78 |         "x": 16,
 79 |         "y": 0.9995736030415051
 80 |       }, {
 81 |         "x": 17,
 82 |         "y": 0.9916648104524686
 83 |       }, {
 84 |         "x": 18,
 85 |         "y": 0.9738476308781951
 86 |       }, {
 87 |         "x": 19,
 88 |         "y": 0.9463000876874145
 89 |       }, {
 90 |         "x": 20,
 91 |         "y": 0.9092974268256817
 92 |       }, {
 93 |         "x": 21,
 94 |         "y": 0.8632093666488737
 95 |       }, {
 96 |         "x": 22,
 97 |         "y": 0.8084964038195901
 98 |       }, {
 99 |         "x": 23,
100 |         "y": 0.7457052121767203
101 |       }, {
102 |         "x": 24,
103 |         "y": 0.675463180551151
104 |       }, {
105 |         "x": 25,
106 |         "y": 0.5984721441039564
107 |       }, {
108 |         "x": 26,
109 |         "y": 0.5155013718214642
110 |       }, {
111 |         "x": 27,
112 |         "y": 0.4273798802338298
113 |       }, {
114 |         "x": 28,
115 |         "y": 0.3349881501559051
116 |       }, {
117 |         "x": 29,
118 |         "y": 0.23924932921398243
119 |       }, {
120 |         "x": 30,
121 |         "y": 0.1411200080598672
122 |       }, {
123 |         "x": 31,
124 |         "y": 0.04158066243329049
125 |       }, {
126 |         "x": 32,
127 |         "y": -0.058374143427580086
128 |       }, {
129 |         "x": 33,
130 |         "y": -0.1577456941432482
131 |       }, {
132 |         "x": 34,
133 |         "y": -0.2555411020268312
134 |       }, {
135 |         "x": 35,
136 |         "y": -0.35078322768961984
137 |       }, {
138 |         "x": 36,
139 |         "y": -0.44252044329485246
140 |       }, {
141 |         "x": 37,
142 |         "y": -0.5298361409084934
143 |       }, {
144 |         "x": 38,
145 |         "y": -0.6118578909427189
146 |       }, {
147 |         "x": 39,
148 |         "y": -0.6877661591839738
149 |       }, {
150 |         "x": 40,
151 |         "y": -0.7568024953079282
152 |       }, {
153 |         "x": 41,
154 |         "y": -0.8182771110644103
155 |       }, {
156 |         "x": 42,
157 |         "y": -0.8715757724135882
158 |       }, {
159 |         "x": 43,
160 |         "y": -0.9161659367494549
161 |       }, {
162 |         "x": 44,
163 |         "y": -0.9516020738895161
164 |       }, {
165 |         "x": 45,
166 |         "y": -0.977530117665097
167 |       }, {
168 |         "x": 46,
169 |         "y": -0.9936910036334644
170 |       }, {
171 |         "x": 47,
172 |         "y": -0.9999232575641008
173 |       }, {
174 |         "x": 48,
175 |         "y": -0.9961646088358407
176 |       }, {
177 |         "x": 49,
178 |         "y": -0.9824526126243325
179 |       }, {
180 |         "x": 50,
181 |         "y": -0.9589242746631385
182 |       }, {
183 |         "x": 51,
184 |         "y": -0.9258146823277325
185 |       }, {
186 |         "x": 52,
187 |         "y": -0.8834546557201531
188 |       }, {
189 |         "x": 53,
190 |         "y": -0.8322674422239013
191 |       }, {
192 |         "x": 54,
193 |         "y": -0.7727644875559871
194 |       }, {
195 |         "x": 55,
196 |         "y": -0.7055403255703919
197 |       }, {
198 |         "x": 56,
199 |         "y": -0.6312666378723216
200 |       }, {
201 |         "x": 57,
202 |         "y": -0.5506855425976376
203 |       }, {
204 |         "x": 58,
205 |         "y": -0.46460217941375737
206 |       }, {
207 |         "x": 59,
208 |         "y": -0.373876664830236
209 |       }, {
210 |         "x": 60,
211 |         "y": -0.27941549819892586
212 |       }, {
213 |         "x": 61,
214 |         "y": -0.18216250427209588
215 |       }, {
216 |         "x": 62,
217 |         "y": -0.0830894028174964
218 |       }, {
219 |         "x": 63,
220 |         "y": 0.016813900484349713
221 |       }, {
222 |         "x": 64,
223 |         "y": 0.11654920485049364
224 |       }, {
225 |         "x": 65,
226 |         "y": 0.21511998808781552
227 |       }, {
228 |         "x": 66,
229 |         "y": 0.31154136351337786
230 |       }, {
231 |         "x": 67,
232 |         "y": 0.4048499206165983
233 |       }, {
234 |         "x": 68,
235 |         "y": 0.49411335113860816
236 |       }, {
237 |         "x": 69,
238 |         "y": 0.5784397643882002
239 |       }, {
240 |         "x": 70,
241 |         "y": 0.6569865987187891
242 |       }, {
243 |         "x": 71,
244 |         "y": 0.7289690401258759
245 |       }, {
246 |         "x": 72,
247 |         "y": 0.7936678638491532
248 |       }, {
249 |         "x": 73,
250 |         "y": 0.8504366206285645
251 |       }, {
252 |         "x": 74,
253 |         "y": 0.8987080958116269
254 |       }, {
255 |         "x": 75,
256 |         "y": 0.9379999767747389
257 |       }, {
258 |         "x": 76,
259 |         "y": 0.9679196720314863
260 |       }, {
261 |         "x": 77,
262 |         "y": 0.9881682338770004
263 |       }, {
264 |         "x": 78,
265 |         "y": 0.998543345374605
266 |       }, {
267 |         "x": 79,
268 |         "y": 0.998941341839772
269 |       }, {
270 |         "x": 80,
271 |         "y": 0.9893582466233818
272 |       }, {
273 |         "x": 81,
274 |         "y": 0.9698898108450863
275 |       }, {
276 |         "x": 82,
277 |         "y": 0.9407305566797731
278 |       }, {
279 |         "x": 83,
280 |         "y": 0.9021718337562934
281 |       }, {
282 |         "x": 84,
283 |         "y": 0.8545989080882805
284 |       }, {
285 |         "x": 85,
286 |         "y": 0.7984871126234903
287 |       }, {
288 |         "x": 86,
289 |         "y": 0.7343970978741134
290 |       }, {
291 |         "x": 87,
292 |         "y": 0.6629692300821833
293 |       }, {
294 |         "x": 88,
295 |         "y": 0.5849171928917617
296 |       }, {
297 |         "x": 89,
298 |         "y": 0.5010208564578846
299 |       }, {
300 |         "x": 90,
301 |         "y": 0.4121184852417566
302 |       }, {
303 |         "x": 91,
304 |         "y": 0.3190983623493521
305 |       }, {
306 |         "x": 92,
307 |         "y": 0.22288991410024764
308 |       }, {
309 |         "x": 93,
310 |         "y": 0.1244544235070617
311 |       }, {
312 |         "x": 94,
313 |         "y": 0.024775425453357765
314 |       }, {
315 |         "x": 95,
316 |         "y": -0.0751511204618093
317 |       }, {
318 |         "x": 96,
319 |         "y": -0.17432678122297965
320 |       }, {
321 |         "x": 97,
322 |         "y": -0.27176062641094245
323 |       }, {
324 |         "x": 98,
325 |         "y": -0.3664791292519284
326 |       }, {
327 |         "x": 99,
328 |         "y": -0.4575358937753214
329 |       }],
330 |       "key": "Sine Wave",
331 |       "color": "#ff7f0e"
332 |     }, {
333 |       "values": [{
334 |         "x": 0,
335 |         "y": 0.5
336 |       }, {
337 |         "x": 1,
338 |         "y": 0.49750208263901285
339 |       }, {
340 |         "x": 2,
341 |         "y": 0.4900332889206208
342 |       }, {
343 |         "x": 3,
344 |         "y": 0.477668244562803
345 |       }, {
346 |         "x": 4,
347 |         "y": 0.46053049700144255
348 |       }, {
349 |         "x": 5,
350 |         "y": 0.4387912809451864
351 |       }, {
352 |         "x": 6,
353 |         "y": 0.41266780745483916
354 |       }, {
355 |         "x": 7,
356 |         "y": 0.38242109364224425
357 |       }, {
358 |         "x": 8,
359 |         "y": 0.3483533546735827
360 |       }, {
361 |         "x": 9,
362 |         "y": 0.3108049841353322
363 |       }, {
364 |         "x": 10,
365 |         "y": 0.2701511529340699
366 |       }, {
367 |         "x": 11,
368 |         "y": 0.22679806071278866
369 |       }, {
370 |         "x": 12,
371 |         "y": 0.1811788772383368
372 |       }, {
373 |         "x": 13,
374 |         "y": 0.13374941431229367
375 |       }, {
376 |         "x": 14,
377 |         "y": 0.08498357145012052
378 |       }, {
379 |         "x": 15,
380 |         "y": 0.03536860083385145
381 |       }, {
382 |         "x": 16,
383 |         "y": -0.014599761150644408
384 |       }, {
385 |         "x": 17,
386 |         "y": -0.06442224714776232
387 |       }, {
388 |         "x": 18,
389 |         "y": -0.11360104734654355
390 |       }, {
391 |         "x": 19,
392 |         "y": -0.16164478343175168
393 |       }, {
394 |         "x": 20,
395 |         "y": -0.2080734182735712
396 |       }, {
397 |         "x": 21,
398 |         "y": -0.2524230522999288
399 |       }, {
400 |         "x": 22,
401 |         "y": -0.2942505586276729
402 |       }, {
403 |         "x": 23,
404 |         "y": -0.333138010639912
405 |       }, {
406 |         "x": 24,
407 |         "y": -0.3686968577706227
408 |       }, {
409 |         "x": 25,
410 |         "y": -0.40057180777346685
411 |       }, {
412 |         "x": 26,
413 |         "y": -0.42844437668447366
414 |       }, {
415 |         "x": 27,
416 |         "y": -0.4520360710085306
417 |       }, {
418 |         "x": 28,
419 |         "y": -0.47111117033432903
420 |       }, {
421 |         "x": 29,
422 |         "y": -0.4854790825747953
423 |       }, {
424 |         "x": 30,
425 |         "y": -0.4949962483002227
426 |       }, {
427 |         "x": 31,
428 |         "y": -0.49956757513663974
429 |       }, {
430 |         "x": 32,
431 |         "y": -0.49914738789737656
432 |       }, {
433 |         "x": 33,
434 |         "y": -0.49373988495443244
435 |       }, {
436 |         "x": 34,
437 |         "y": -0.48339909628973055
438 |       }, {
439 |         "x": 35,
440 |         "y": -0.46822834364539817
441 |       }, {
442 |         "x": 36,
443 |         "y": -0.4483792081670735
444 |       }, {
445 |         "x": 37,
446 |         "y": -0.424050015855204
447 |       }, {
448 |         "x": 38,
449 |         "y": -0.3954838559572084
450 |       }, {
451 |         "x": 39,
452 |         "y": -0.3629661521000701
453 |       }, {
454 |         "x": 40,
455 |         "y": -0.32682181043180597
456 |       }, {
457 |         "x": 41,
458 |         "y": -0.2874119732666346
459 |       }, {
460 |         "x": 42,
461 |         "y": -0.2451304106703497
462 |       }, {
463 |         "x": 43,
464 |         "y": -0.20039958603998773
465 |       }, {
466 |         "x": 44,
467 |         "y": -0.15366643498920968
468 |       }, {
469 |         "x": 45,
470 |         "y": -0.10539789971538985
471 |       }, {
472 |         "x": 46,
473 |         "y": -0.056076263467527435
474 |       }, {
475 |         "x": 47,
476 |         "y": -0.00619433173144528
477 |       }, {
478 |         "x": 48,
479 |         "y": 0.0437494917197232
480 |       }, {
481 |         "x": 49,
482 |         "y": 0.09325618471128788
483 |       }, {
484 |         "x": 50,
485 |         "y": 0.14183109273161312
486 |       }, {
487 |         "x": 51,
488 |         "y": 0.18898887135649012
489 |       }, {
490 |         "x": 52,
491 |         "y": 0.23425833565018855
492 |       }, {
493 |         "x": 53,
494 |         "y": 0.2771871680895804
495 |       }, {
496 |         "x": 54,
497 |         "y": 0.31734643797131734
498 |       }, {
499 |         "x": 55,
500 |         "y": 0.35433488714563
501 |       }, {
502 |         "x": 56,
503 |         "y": 0.38778293925512475
504 |       }, {
505 |         "x": 57,
506 |         "y": 0.4173563924195799
507 |       }, {
508 |         "x": 58,
509 |         "y": 0.44275975847065946
510 |       }, {
511 |         "x": 59,
512 |         "y": 0.46373921537201795
513 |       }, {
514 |         "x": 60,
515 |         "y": 0.48008514332518304
516 |       }, {
517 |         "x": 61,
518 |         "y": 0.49163421922129225
519 |       }, {
520 |         "x": 62,
521 |         "y": 0.49827104851160875
522 |       }, {
523 |         "x": 63,
524 |         "y": 0.49992931819170755
525 |       }, {
526 |         "x": 64,
527 |         "y": 0.4965924593790963
528 |       }, {
529 |         "x": 65,
530 |         "y": 0.48829381286401174
531 |       }, {
532 |         "x": 66,
533 |         "y": 0.4751162959792648
534 |       }, {
535 |         "x": 67,
536 |         "y": 0.4571915741176597
537 |       }, {
538 |         "x": 68,
539 |         "y": 0.43469874517491264
540 |       }, {
541 |         "x": 69,
542 |         "y": 0.4078625500626784
543 |       }, {
544 |         "x": 70,
545 |         "y": 0.3769511271716523
546 |       }, {
547 |         "x": 71,
548 |         "y": 0.3422733332214033
549 |       }, {
550 |         "x": 72,
551 |         "y": 0.3041756572661273
552 |       }, {
553 |         "x": 73,
554 |         "y": 0.26303875869055265
555 |       }, {
556 |         "x": 74,
557 |         "y": 0.21927366378719518
558 |       }, {
559 |         "x": 75,
560 |         "y": 0.1733176589175129
561 |       }, {
562 |         "x": 76,
563 |         "y": 0.12562992129112785
564 |       }, {
565 |         "x": 77,
566 |         "y": 0.07668693101893218
567 |       }, {
568 |         "x": 78,
569 |         "y": 0.026977710281324875
570 |       }, {
571 |         "x": 79,
572 |         "y": -0.023001062819768475
573 |       }, {
574 |         "x": 80,
575 |         "y": -0.07275001690430677
576 |       }, {
577 |         "x": 81,
578 |         "y": -0.12177207686789555
579 |       }, {
580 |         "x": 82,
581 |         "y": -0.16957743049191726
582 |       }, {
583 |         "x": 83,
584 |         "y": -0.21568842248531042
585 |       }, {
586 |         "x": 84,
587 |         "y": -0.2596443270583428
588 |       }, {
589 |         "x": 85,
590 |         "y": -0.3010059513424118
591 |       }, {
592 |         "x": 86,
593 |         "y": -0.3393600236600062
594 |       }, {
595 |         "x": 87,
596 |         "y": -0.37432332279869934
597 |       }, {
598 |         "x": 88,
599 |         "y": -0.405546507030828
600 |       }, {
601 |         "x": 89,
602 |         "y": -0.43271760462055614
603 |       }, {
604 |         "x": 90,
605 |         "y": -0.4555651309423385
606 |       }, {
607 |         "x": 91,
608 |         "y": -0.47386080106555595
609 |       }, {
610 |         "x": 92,
611 |         "y": -0.4874218107020818
612 |       }, {
613 |         "x": 93,
614 |         "y": -0.4961126627263017
615 |       }, {
616 |         "x": 94,
617 |         "y": -0.49984652101760324
618 |       }, {
619 |         "x": 95,
620 |         "y": -0.4985860780981892
621 |       }, {
622 |         "x": 96,
623 |         "y": -0.4923439278970635
624 |       }, {
625 |         "x": 97,
626 |         "y": -0.4811824399156551
627 |       }, {
628 |         "x": 98,
629 |         "y": -0.46521313605237663
630 |       }, {
631 |         "x": 99,
632 |         "y": -0.44459557631268043
633 |       }],
634 |       "key": "Cosine Wave",
635 |       "color": "#2ca02c"
636 |     }];
637 | 
638 | 
639 |     el = document.querySelector('#chart-2');
640 | 
641 |     el.data = [{
642 |       "values": [{
643 |         "x": 0,
644 |         "y": 0
645 |       }, {
646 |         "x": 1,
647 |         "y": 3
648 |       }, {
649 |         "x": 2,
650 |         "y": 2
651 |       }, {
652 |         "x": 3,
653 |         "y": 5
654 |       }],
655 |       "key": "Line 1",
656 |       "color": "#ff7f0e"
657 |     }, {
658 |       "values": [{
659 |         "x": 0,
660 |         "y": 1
661 |       }, {
662 |         "x": 1,
663 |         "y": 4
664 |       }, {
665 |         "x": 2,
666 |         "y": 2
667 |       }, {
668 |         "x": 3,
669 |         "y": 3
670 |       }],
671 |       "key": "Line 2",
672 |       "color": "#2ca02c"
673 |     }];
674 | 
675 |     el.xAxisLabels = {
676 |       "0": "Label 0",
677 |       "0.5": "Label 0.5",
678 |       "1": "Label 1",
679 |       "1.5": "Label 1.5",
680 |       "2": "Label 2",
681 |       "2.5": "Label 2.5",
682 |       "3": "Label 3",
683 |       "3.5": "Label 3.5",
684 |       "4": "Label 4"
685 |     }
686 |   </script>
687 | 
688 | </body>
689 | 
690 | </html>


--------------------------------------------------------------------------------
/demo/nvd3-scatter.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html>
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  7 |   <title>nvd3-scatter Demo</title>
  8 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  9 |   <link rel="import" href="../nvd3-scatter.html">
 10 |   <style>
 11 |     nvd3-scatter div {
 12 |       display: flex;
 13 |       height: 70vh;
 14 |     }
 15 |   </style>
 16 | </head>
 17 | <body unresolved>
 18 | 
 19 | <p>An example of <code>&lt;nvd3-scatter&gt;</code>:</p>
 20 | 
 21 | <nvd3-scatter auto-resize></nvd3-scatter>
 22 | 
 23 | <script>
 24 |   var el = document.querySelector('nvd3-scatter');
 25 | 
 26 |   el.data = [{
 27 |       "key": "Group 0",
 28 |       "values": [{
 29 |         "x": -0.8064250073046608,
 30 |         "y": 0.43430141512246734,
 31 |         "size": 0.42776278126984835
 32 |       }, {"x": 0.01670929937417865, "y": 0.7560068876573179, "size": 0.8928186316043139}, {
 33 |         "x": -2.250672151160385,
 34 |         "y": -1.548533031940489,
 35 |         "size": 0.8351387809962034
 36 |       }, {"x": -0.19712684396248678, "y": 0.5637192281442256, "size": 0.615023085847497}, {
 37 |         "x": 0.5555008221693875,
 38 |         "y": -1.4028318449949948,
 39 |         "size": 0.9063694512005895
 40 |       }, {"x": 1.3843129785146853, "y": 0.4360796063418652, "size": 0.7535531881731004}, {
 41 |         "x": -0.14521871237742412,
 42 |         "y": -0.4178019521615986,
 43 |         "size": 0.9654530275147408
 44 |       }, {"x": -0.8536717203241591, "y": 1.47791150931557, "size": 0.3540860686916858}, {
 45 |         "x": -1.4224177580895652,
 46 |         "y": 0.4615759760018808,
 47 |         "size": 0.6000952618196607
 48 |       }, {"x": 0.505284030802069, "y": -0.3596770932747312, "size": 0.7092245277017355}, {
 49 |         "x": -1.1370411786560606,
 50 |         "y": -0.9794180466591255,
 51 |         "size": 0.10274690808728337
 52 |       }, {"x": 0.12025507691880129, "y": 1.0650172798219881, "size": 0.43813159689307213}, {
 53 |         "x": 0.09640163942248225,
 54 |         "y": 1.1896234153865992,
 55 |         "size": 0.0174436429515481
 56 |       }, {"x": 2.1857065618113833, "y": -0.018951990975445945, "size": 0.38632132252678275}, {
 57 |         "x": 1.6669689427262695,
 58 |         "y": -0.23557677169573726,
 59 |         "size": 0.6676679668016732
 60 |       }, {"x": -1.549115378492141, "y": -0.1151226987121132, "size": 0.25273978523910046}, {
 61 |         "x": 0.6359266152526989,
 62 |         "y": 0.18013940017035282,
 63 |         "size": 0.08855190663598478
 64 |       }, {"x": 0.13428963639349414, "y": 2.017557661401189, "size": 0.41205769521184266}, {
 65 |         "x": -0.08921555497156258,
 66 |         "y": 0.12271494940385737,
 67 |         "size": 0.540137690724805
 68 |       }, {"x": 0.6561592712559424, "y": -1.344014970264652, "size": 0.8553345487453043}, {
 69 |         "x": 0.9427158418256761,
 70 |         "y": 0.6182713292419343,
 71 |         "size": 0.8177231764420867
 72 |       }, {"x": 1.747727634551679, "y": -0.6865704984039451, "size": 0.04004247370176017}, {
 73 |         "x": 0.10144582423513587,
 74 |         "y": 0.22074139347176064,
 75 |         "size": 0.32034511328674853
 76 |       }, {"x": 1.3893128580395326, "y": -1.1323288863510317, "size": 0.4362318061757833}, {
 77 |         "x": 0.4159463794186068,
 78 |         "y": 0.5259213044086795,
 79 |         "size": 0.5461731422692537
 80 |       }, {"x": 0.12847176638831506, "y": -2.0297569152750454, "size": 0.46029108250513673}, {
 81 |         "x": -0.3601695157519953,
 82 |         "y": 0.6459674188905643,
 83 |         "size": 0.12212850991636515
 84 |       }, {"x": 0.7269962202116089, "y": 0.6956066014241378, "size": 0.9952031641732901}, {
 85 |         "x": -1.114380312657361,
 86 |         "y": 0.8380919490789575,
 87 |         "size": 0.43160547292791307
 88 |       }, {"x": 0.49698562149294034, "y": 0.38360896953499946, "size": 0.07769728428684175}, {
 89 |         "x": 1.2092816273360598,
 90 |         "y": -0.07708750877853426,
 91 |         "size": 0.4799543663393706
 92 |       }, {"x": 0.18722122188415144, "y": 0.7486685940189816, "size": 0.8230875332374126}, {
 93 |         "x": -0.5306810354380948,
 94 |         "y": 0.42003065942447226,
 95 |         "size": 0.47475361987017095
 96 |       }, {"x": 0.12229695710143065, "y": -0.6198884206974984, "size": 0.10187543649226427}, {
 97 |         "x": 1.610230950025096,
 98 |         "y": -0.11026054446140411,
 99 |         "size": 0.598060960881412
100 |       }, {"x": 0.9032281390061506, "y": -0.6916533109397094, "size": 0.03763189655728638}, {
101 |         "x": -0.04546656274110496,
102 |         "y": 0.518178289617318,
103 |         "size": 0.1960530725773424
104 |       }, {"x": 0.21489827822891328, "y": -1.023465336419178, "size": 0.5392735723871738}, {
105 |         "x": 0.061229490499413286,
106 |         "y": 0.011551577704776616,
107 |         "size": 0.3923562993295491
108 |       }, {"x": -0.008585603036276807, "y": 0.8089677735494786, "size": 0.9360333411023021}]
109 |     }, {
110 |       "key": "Group 1",
111 |       "values": [{
112 |         "x": 0.3936274752197068,
113 |         "y": -1.2343099634164518,
114 |         "size": 0.7120191983412951
115 |       }, {"x": 1.5336796613009103, "y": -1.116981750061054, "size": 0.28429937874898314}, {
116 |         "x": 1.3955783056400834,
117 |         "y": 0.6008226791784991,
118 |         "size": 0.7047668504528701
119 |       }, {"x": 0.7741125821753457, "y": -2.0026336969973926, "size": 0.3106996736023575}, {
120 |         "x": -0.5106349128185178,
121 |         "y": 0.980159972661408,
122 |         "size": 0.7512671032454818
123 |       }, {"x": 0.18113692963871067, "y": 0.5067032405500506, "size": 0.9937139840330929}, {
124 |         "x": 0.6318664339320207,
125 |         "y": 0.5859227607460539,
126 |         "size": 0.9893766338936985
127 |       }, {"x": -0.8079712554887575, "y": 1.174496121797406, "size": 0.4302227799780667}, {
128 |         "x": -0.6014577182756748,
129 |         "y": 1.196584521925111,
130 |         "size": 0.12183609628118575
131 |       }, {"x": 0.6873302453968771, "y": 0.45608073395729615, "size": 0.49656044715084136}, {
132 |         "x": 0.6880074237831176,
133 |         "y": 0.8169604326612597,
134 |         "size": 0.26470580184832215
135 |       }, {"x": 0.2168663447082569, "y": 0.04599027567137815, "size": 0.8514526260551065}, {
136 |         "x": 1.849807442522882,
137 |         "y": -0.8491744753585616,
138 |         "size": 0.5913790012709796
139 |       }, {"x": -0.07920461396904799, "y": 0.5476225304886098, "size": 0.26624339376576245}, {
140 |         "x": -1.3876621787109582,
141 |         "y": -0.7423338481101208,
142 |         "size": 0.34875918459147215
143 |       }, {"x": -1.6298060541420192, "y": 0.9236266670119178, "size": 0.2583503455389291}, {
144 |         "x": -0.7598207302061383,
145 |         "y": -1.3082531265888322,
146 |         "size": 0.8184752201195806
147 |       }, {"x": 1.3989571734601198, "y": -0.13121593781654997, "size": 0.809278431115672}, {
148 |         "x": 0.3742459680367845,
149 |         "y": -0.8734225016902026,
150 |         "size": 0.7820326969958842
151 |       }, {"x": -0.24107274902939635, "y": -1.0524332235903466, "size": 0.7699645978864282}, {
152 |         "x": 0.18382392960446228,
153 |         "y": 0.04101290978486412,
154 |         "size": 0.6002649869769812
155 |       }, {"x": 0.18079111234146333, "y": -0.7086062639885075, "size": 0.21265971334651113}, {
156 |         "x": -1.1078832863949435,
157 |         "y": 0.15517996090125663,
158 |         "size": 0.7128910657484084
159 |       }, {"x": 2.2148076364941685, "y": 0.8214016119215204, "size": 0.8697542485315353}, {
160 |         "x": 1.9492993335391022,
161 |         "y": -2.1274919924503686,
162 |         "size": 0.017042706487700343
163 |       }, {"x": -0.5087589906310086, "y": 0.22687401739777677, "size": 0.24493299354799092}, {
164 |         "x": 0.5903922422904736,
165 |         "y": -1.2564408933560356,
166 |         "size": 0.43284636130556464
167 |       }, {"x": -1.5655935954748939, "y": -0.20817412929090773, "size": 0.372180852573365}, {
168 |         "x": -0.1110591814855259,
169 |         "y": 0.5373995903000723,
170 |         "size": 0.4768088024575263
171 |       }, {"x": 1.1239416847609203, "y": 1.3561088533275643, "size": 0.7878602151758969}, {
172 |         "x": -1.8572054502833815,
173 |         "y": -0.9791473355100349,
174 |         "size": 0.2578851424623281
175 |       }, {"x": 1.6689914353452215, "y": 0.3097339634873648, "size": 0.9162552170455456}, {
176 |         "x": -0.8241756772993136,
177 |         "y": 0.609167494859741,
178 |         "size": 0.020309145096689463
179 |       }, {"x": -0.33129178655759034, "y": -0.7774623241984784, "size": 0.9768996515776962}, {
180 |         "x": 0.397344079072218,
181 |         "y": 1.0225298576502568,
182 |         "size": 0.12372276792302728
183 |       }, {"x": 0.4668372600477801, "y": -0.7516087108989682, "size": 0.7038367479108274}, {
184 |         "x": -1.2827996062844709,
185 |         "y": 0.41388459570937036,
186 |         "size": 0.7731563358101994
187 |       }, {"x": 0.9685147152289953, "y": -0.201356562498917, "size": 0.08103818260133266}, {
188 |         "x": -0.5426156031063376,
189 |         "y": -2.641470969687877,
190 |         "size": 0.2545912603382021
191 |       }, {"x": -0.8242756565239707, "y": -0.37576175470404727, "size": 0.4275034337770194}]
192 |     }, {
193 |       "key": "Group 2",
194 |       "values": [{
195 |         "x": 0.4145345423890358,
196 |         "y": -0.47754769681682985,
197 |         "size": 0.8977158081252128
198 |       }, {"x": 0.5543471541126399, "y": -0.43918956890473676, "size": 0.286152669461444}, {
199 |         "x": -1.8844077802115744,
200 |         "y": 1.1027521658895636,
201 |         "size": 0.9020550716668367
202 |       }, {"x": 0.6833189735301134, "y": -0.22517947515467215, "size": 0.38435114175081253}, {
203 |         "x": 1.4577534001609376,
204 |         "y": 0.5585229245004736,
205 |         "size": 0.2957895149011165
206 |       }, {"x": 0.9540508204648718, "y": 1.1119717507344011, "size": 0.4605460427701473}, {
207 |         "x": 1.6142631289218012,
208 |         "y": 0.26926853219435143,
209 |         "size": 0.8965592209715396
210 |       }, {"x": 1.2559930575900904, "y": 0.20386130186865187, "size": 0.3783866928424686}, {
211 |         "x": -0.5864312919142257,
212 |         "y": 0.35341290642725537,
213 |         "size": 0.1789885452017188
214 |       }, {"x": -1.0468549813396353, "y": -0.2612473749012965, "size": 0.286209830082953}, {
215 |         "x": -1.1737449517099583,
216 |         "y": -0.8925641905955866,
217 |         "size": 0.2582457116805017
218 |       }, {"x": -0.29428279782692, "y": -0.23793054283688816, "size": 0.04249704349786043}, {
219 |         "x": -1.2288994156105586,
220 |         "y": 0.19086841293699694,
221 |         "size": 0.6402147330809385
222 |       }, {"x": -0.347604886308104, "y": -0.4890859478804047, "size": 0.08099311543628573}, {
223 |         "x": 0.5807869821931513,
224 |         "y": -1.4084804205265624,
225 |         "size": 0.5465099643915892
226 |       }, {
227 |         "x": -1.1602555406428983,
228 |         "y": 0.12769291128508684,
229 |         "size": 0.006012131925672293
230 |       }, {"x": -0.056237812134397026, "y": 0.5022951515633105, "size": 0.872315386775881}, {
231 |         "x": -0.7565449491327239,
232 |         "y": 0.43966838578500395,
233 |         "size": 0.2817950577009469
234 |       }, {"x": 1.1566022584789164, "y": -0.940158874577262, "size": 0.46564334467984736}, {
235 |         "x": 2.632311205291478,
236 |         "y": -0.7837447185263455,
237 |         "size": 0.1246093378867954
238 |       }, {"x": 1.0150323242141694, "y": 0.32649506699418873, "size": 0.055658374447375536}, {
239 |         "x": -0.44569599243675617,
240 |         "y": -0.014801258722324,
241 |         "size": 0.8688568293582648
242 |       }, {"x": 1.341690861301067, "y": 1.3351347986142725, "size": 0.17102088080719113}, {
243 |         "x": 0.27788885599074986,
244 |         "y": -0.339810758445821,
245 |         "size": 0.3900940539315343
246 |       }, {"x": 0.13051956691508865, "y": -1.0018410824624122, "size": 0.7442932473495603}, {
247 |         "x": -0.40348254467386097,
248 |         "y": 0.9902785990291626,
249 |         "size": 0.27538658236153424
250 |       }, {"x": -1.7883439598975808, "y": 0.9524404302322003, "size": 0.4258019032422453}, {
251 |         "x": -0.6998171096533904,
252 |         "y": 0.36600665358309864,
253 |         "size": 0.3854420380666852
254 |       }, {"x": -3.8776530870245125, "y": 0.5079091106132153, "size": 0.9660791598726064}, {
255 |         "x": -1.4863521039585414,
256 |         "y": -1.8067414214569038,
257 |         "size": 0.08446722733788192
258 |       }, {"x": 0.603249799366195, "y": -0.04536905574799283, "size": 0.37876055971719325}, {
259 |         "x": -0.14073421925652538,
260 |         "y": 0.014146256683121741,
261 |         "size": 0.8097565718926489
262 |       }, {"x": 0.2881707096519147, "y": 0.15022188894383856, "size": 0.3423409038223326}, {
263 |         "x": -0.007905800886600478,
264 |         "y": 0.6231369593765776,
265 |         "size": 0.6115201497450471
266 |       }, {"x": 0.8529434713214744, "y": 1.139129332783047, "size": 0.20450960844755173}, {
267 |         "x": -1.118051441746876,
268 |         "y": -1.001110500866713,
269 |         "size": 0.28190677077509463
270 |       }, {"x": 0.1566518412690913, "y": -0.050690835731926606, "size": 0.9710527816787362}, {
271 |         "x": -0.8444689442572872,
272 |         "y": -1.203581562275231,
273 |         "size": 0.3658875119872391
274 |       }, {"x": 1.0630518805922407, "y": -0.2751191876329337, "size": 0.33588413847610354}, {
275 |         "x": -0.08704192408221026,
276 |         "y": 0.9975536264345547,
277 |         "size": 0.4712341194972396
278 |       }]
279 |     }, {
280 |       "key": "Group 3",
281 |       "values": [{
282 |         "x": -0.05842125059609182,
283 |         "y": 0.6281468588533662,
284 |         "size": 0.4657605942338705
285 |       }, {"x": 0.5319691488999393, "y": -0.0295933272410023, "size": 0.32229729532264173}, {
286 |         "x": 0.4657853440067853,
287 |         "y": 1.517539438205379,
288 |         "size": 0.14009392797015607
289 |       }, {"x": 0.36096237525928343, "y": -0.4385060907561215, "size": 0.63679901487194}, {
290 |         "x": 0.033405810286677315,
291 |         "y": -0.8890741581102348,
292 |         "size": 0.2672379151917994
293 |       }, {"x": -0.9457458122003517, "y": 0.8299376328782694, "size": 0.5016108986455947}, {
294 |         "x": -0.831757496294305,
295 |         "y": 0.016341895403244495,
296 |         "size": 0.7328075324185193
297 |       }, {"x": 0.6803702396053012, "y": -0.672089140182241, "size": 0.17493089567869902}, {
298 |         "x": -1.007390191363626,
299 |         "y": 0.3717266644016946,
300 |         "size": 0.37786080152727664
301 |       }, {"x": 0.6189966912299112, "y": -1.2356462871713372, "size": 0.1433430470060557}, {
302 |         "x": 0.45255105957014363,
303 |         "y": 0.2114741616122467,
304 |         "size": 0.15925287664867938
305 |       }, {"x": -0.2704964981403793, "y": -0.01591749334251514, "size": 0.23833481292240322}, {
306 |         "x": -0.4993888501172411,
307 |         "y": 0.5943848465616784,
308 |         "size": 0.7621380623895675
309 |       }, {"x": -2.154827499400279, "y": 0.15107083603632593, "size": 0.12801884184591472}, {
310 |         "x": 0.8110737315452082,
311 |         "y": -0.9580751258912225,
312 |         "size": 0.6180630351882428
313 |       }, {"x": 0.8939067615911332, "y": 1.75859311124847, "size": 0.7859148527495563}, {
314 |         "x": 0.2612098853921549,
315 |         "y": 1.1545688489191566,
316 |         "size": 0.1528619488235563
317 |       }, {"x": -1.2223189508629158, "y": 0.8267828804957372, "size": 0.7007682337425649}, {
318 |         "x": 0.5386572684842633,
319 |         "y": 1.8584986263591627,
320 |         "size": 0.40859846374951303
321 |       }, {"x": -1.112507149194913, "y": -0.6842964969139311, "size": 0.08523973892442882}, {
322 |         "x": -1.0742591955112717,
323 |         "y": 1.2396440575984136,
324 |         "size": 0.4384408048354089
325 |       }, {"x": -0.49326704689067835, "y": 0.6160066543288635, "size": 0.9637921759858727}, {
326 |         "x": -0.7418198484163607,
327 |         "y": 0.5320303136040486,
328 |         "size": 0.5816073601599783
329 |       }, {"x": -2.262842158751482, "y": -0.8895881835494936, "size": 0.8110660959500819}, {
330 |         "x": 1.5333158730378458,
331 |         "y": 0.39735568404364036,
332 |         "size": 0.18341655284166336
333 |       }, {"x": -0.22210490284827888, "y": -0.10258277727785342, "size": 0.9206258736085147}, {
334 |         "x": 1.6390736217491177,
335 |         "y": -0.13279621729497026,
336 |         "size": 0.7864500063005835
337 |       }, {"x": 0.7764020592428071, "y": 0.9565352159894392, "size": 0.003929565893486142}, {
338 |         "x": 1.0983932610154363,
339 |         "y": -0.5911644133149654,
340 |         "size": 0.20808799751102924
341 |       }, {"x": 0.502002999070541, "y": -0.9132071874260659, "size": 0.14985302230343223}, {
342 |         "x": 0.5138338504545288,
343 |         "y": -0.5580749866668037,
344 |         "size": 0.6362145880702883
345 |       }, {"x": 1.187972158740136, "y": -0.08466088857235922, "size": 0.7329563025850803}, {
346 |         "x": -1.3327484666952918,
347 |         "y": 0.3437568349078479,
348 |         "size": 0.6696354628074914
349 |       }, {"x": 0.7708607884157576, "y": -0.6577993876517948, "size": 0.6803198717534542}, {
350 |         "x": -0.9362251242516267,
351 |         "y": 0.9611601127257063,
352 |         "size": 0.5759038771502674
353 |       }, {"x": 0.2603064496244045, "y": -0.4626885148825992, "size": 0.3806587711442262}, {
354 |         "x": -0.3309785763271538,
355 |         "y": -0.20418090516930926,
356 |         "size": 0.06607750919647515
357 |       }, {"x": -0.2442584025180956, "y": 0.2923152927579918, "size": 0.5135698243975639}, {
358 |         "x": 1.4368458281946102,
359 |         "y": 0.46131796167224,
360 |         "size": 0.1571014104411006
361 |       }, {"x": 0.10969753259215442, "y": 0.35100309023750736, "size": 0.7534805536270142}]
362 |     }];
363 | 
364 | </script>
365 | 
366 | </body>
367 | </html>
368 | 


--------------------------------------------------------------------------------
/demo/nvd3-sunburst.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |   <meta charset="utf-8">
  7 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  8 |   <title>nvd3-sunburst Demo</title>
  9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 10 |   <link rel="import" href="../../iron-flex-layout/iron-flex-layout-classes.html">
 11 |   <link rel="import" href="../nvd3-sunburst.html">
 12 | </head>
 13 | 
 14 | <body unresolved>
 15 | 
 16 |   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
 17 | 
 18 |   <p>An example of
 19 |     <code>&lt;nvd3-sunburst&gt;</code>:</p>
 20 | 
 21 |   <nvd3-sunburst height="400" auto-resize></nvd3-sunburst>
 22 | 
 23 |   <div style="width: 100%">
 24 |     <div class="horizontal layout flex center-center">
 25 |       <nvd3-sunburst class="flex" flex-size title="My flex sunburst!" auto-resize show-labels>
 26 |       </nvd3-sunburst>
 27 |     </div>
 28 |   </div>
 29 | 
 30 |   <script>
 31 |     var el = document.querySelectorAll('nvd3-sunburst');
 32 | 
 33 |     el[0].data =   [{
 34 |             "name": "flare",
 35 |             "children": [
 36 |                 {
 37 |                     "name": "analytics",
 38 |                     "children": [
 39 |                         {
 40 |                             "name": "cluster",
 41 |                             "children": [
 42 |                                 {"name": "AgglomerativeCluster", "size": 3938},
 43 |                                 {"name": "CommunityStructure", "size": 3812},
 44 |                                 {"name": "HierarchicalCluster", "size": 6714},
 45 |                                 {"name": "MergeEdge", "size": 743}
 46 |                             ]
 47 |                         },
 48 |                         {
 49 |                             "name": "graph",
 50 |                             "children": [
 51 |                                 {"name": "BetweennessCentrality", "size": 3534},
 52 |                                 {"name": "LinkDistance", "size": 5731},
 53 |                                 {"name": "MaxFlowMinCut", "size": 7840},
 54 |                                 {"name": "ShortestPaths", "size": 5914},
 55 |                                 {"name": "SpanningTree", "size": 3416}
 56 |                             ]
 57 |                         },
 58 |                         {
 59 |                             "name": "optimization",
 60 |                             "children": [
 61 |                                 {"name": "AspectRatioBanker", "size": 7074}
 62 |                             ]
 63 |                         }
 64 |                     ]
 65 |                 },
 66 |                 {
 67 |                     "name": "animate",
 68 |                     "children": [
 69 |                         {"name": "Easing", "size": 17010},
 70 |                         {"name": "FunctionSequence", "size": 5842},
 71 |                         {
 72 |                             "name": "interpolate",
 73 |                             "children": [
 74 |                                 {"name": "ArrayInterpolator", "size": 1983},
 75 |                                 {"name": "ColorInterpolator", "size": 2047},
 76 |                                 {"name": "DateInterpolator", "size": 1375},
 77 |                                 {"name": "Interpolator", "size": 8746},
 78 |                                 {"name": "MatrixInterpolator", "size": 2202},
 79 |                                 {"name": "NumberInterpolator", "size": 1382},
 80 |                                 {"name": "ObjectInterpolator", "size": 1629},
 81 |                                 {"name": "PointInterpolator", "size": 1675},
 82 |                                 {"name": "RectangleInterpolator", "size": 2042}
 83 |                             ]
 84 |                         },
 85 |                         {"name": "ISchedulable", "size": 1041},
 86 |                         {"name": "Parallel", "size": 5176},
 87 |                         {"name": "Pause", "size": 449},
 88 |                         {"name": "Scheduler", "size": 5593},
 89 |                         {"name": "Sequence", "size": 5534},
 90 |                         {"name": "Transition", "size": 9201},
 91 |                         {"name": "Transitioner", "size": 19975},
 92 |                         {"name": "TransitionEvent", "size": 1116},
 93 |                         {"name": "Tween", "size": 6006}
 94 |                     ]
 95 |                 },
 96 |                 {
 97 |                     "name": "data",
 98 |                     "children": [
 99 |                         {
100 |                             "name": "converters",
101 |                             "children": [
102 |                                 {"name": "Converters", "size": 721},
103 |                                 {"name": "DelimitedTextConverter", "size": 4294},
104 |                                 {"name": "GraphMLConverter", "size": 9800},
105 |                                 {"name": "IDataConverter", "size": 1314},
106 |                                 {"name": "JSONConverter", "size": 2220}
107 |                             ]
108 |                         },
109 |                         {"name": "DataField", "size": 1759},
110 |                         {"name": "DataSchema", "size": 2165},
111 |                         {"name": "DataSet", "size": 586},
112 |                         {"name": "DataSource", "size": 3331},
113 |                         {"name": "DataTable", "size": 772},
114 |                         {"name": "DataUtil", "size": 3322}
115 |                     ]
116 |                 },
117 |                 {
118 |                     "name": "display",
119 |                     "children": [
120 |                         {"name": "DirtySprite", "size": 8833},
121 |                         {"name": "LineSprite", "size": 1732},
122 |                         {"name": "RectSprite", "size": 3623},
123 |                         {"name": "TextSprite", "size": 10066}
124 |                     ]
125 |                 },
126 |                 {
127 |                     "name": "flex",
128 |                     "children": [
129 |                         {"name": "FlareVis", "size": 4116}
130 |                     ]
131 |                 },
132 |                 {
133 |                     "name": "physics",
134 |                     "children": [
135 |                         {"name": "DragForce", "size": 1082},
136 |                         {"name": "GravityForce", "size": 1336},
137 |                         {"name": "IForce", "size": 319},
138 |                         {"name": "NBodyForce", "size": 10498},
139 |                         {"name": "Particle", "size": 2822},
140 |                         {"name": "Simulation", "size": 9983},
141 |                         {"name": "Spring", "size": 2213},
142 |                         {"name": "SpringForce", "size": 1681}
143 |                     ]
144 |                 },
145 |                 {
146 |                     "name": "query",
147 |                     "children": [
148 |                         {"name": "AggregateExpression", "size": 1616},
149 |                         {"name": "And", "size": 1027},
150 |                         {"name": "Arithmetic", "size": 3891},
151 |                         {"name": "Average", "size": 891},
152 |                         {"name": "BinaryExpression", "size": 2893},
153 |                         {"name": "Comparison", "size": 5103},
154 |                         {"name": "CompositeExpression", "size": 3677},
155 |                         {"name": "Count", "size": 781},
156 |                         {"name": "DateUtil", "size": 4141},
157 |                         {"name": "Distinct", "size": 933},
158 |                         {"name": "Expression", "size": 5130},
159 |                         {"name": "ExpressionIterator", "size": 3617},
160 |                         {"name": "Fn", "size": 3240},
161 |                         {"name": "If", "size": 2732},
162 |                         {"name": "IsA", "size": 2039},
163 |                         {"name": "Literal", "size": 1214},
164 |                         {"name": "Match", "size": 3748},
165 |                         {"name": "Maximum", "size": 843},
166 |                         {
167 |                             "name": "methods",
168 |                             "children": [
169 |                                 {"name": "add", "size": 593},
170 |                                 {"name": "and", "size": 330},
171 |                                 {"name": "average", "size": 287},
172 |                                 {"name": "count", "size": 277},
173 |                                 {"name": "distinct", "size": 292},
174 |                                 {"name": "div", "size": 595},
175 |                                 {"name": "eq", "size": 594},
176 |                                 {"name": "fn", "size": 460},
177 |                                 {"name": "gt", "size": 603},
178 |                                 {"name": "gte", "size": 625},
179 |                                 {"name": "iff", "size": 748},
180 |                                 {"name": "isa", "size": 461},
181 |                                 {"name": "lt", "size": 597},
182 |                                 {"name": "lte", "size": 619},
183 |                                 {"name": "max", "size": 283},
184 |                                 {"name": "min", "size": 283},
185 |                                 {"name": "mod", "size": 591},
186 |                                 {"name": "mul", "size": 603},
187 |                                 {"name": "neq", "size": 599},
188 |                                 {"name": "not", "size": 386},
189 |                                 {"name": "or", "size": 323},
190 |                                 {"name": "orderby", "size": 307},
191 |                                 {"name": "range", "size": 772},
192 |                                 {"name": "select", "size": 296},
193 |                                 {"name": "stddev", "size": 363},
194 |                                 {"name": "sub", "size": 600},
195 |                                 {"name": "sum", "size": 280},
196 |                                 {"name": "update", "size": 307},
197 |                                 {"name": "variance", "size": 335},
198 |                                 {"name": "where", "size": 299},
199 |                                 {"name": "xor", "size": 354},
200 |                                 {"name": "_", "size": 264}
201 |                             ]
202 |                         },
203 |                         {"name": "Minimum", "size": 843},
204 |                         {"name": "Not", "size": 1554},
205 |                         {"name": "Or", "size": 970},
206 |                         {"name": "Query", "size": 13896},
207 |                         {"name": "Range", "size": 1594},
208 |                         {"name": "StringUtil", "size": 4130},
209 |                         {"name": "Sum", "size": 791},
210 |                         {"name": "Variable", "size": 1124},
211 |                         {"name": "Variance", "size": 1876},
212 |                         {"name": "Xor", "size": 1101}
213 |                     ]
214 |                 },
215 |                 {
216 |                     "name": "scale",
217 |                     "children": [
218 |                         {"name": "IScaleMap", "size": 2105},
219 |                         {"name": "LinearScale", "size": 1316},
220 |                         {"name": "LogScale", "size": 3151},
221 |                         {"name": "OrdinalScale", "size": 3770},
222 |                         {"name": "QuantileScale", "size": 2435},
223 |                         {"name": "QuantitativeScale", "size": 4839},
224 |                         {"name": "RootScale", "size": 1756},
225 |                         {"name": "Scale", "size": 4268},
226 |                         {"name": "ScaleType", "size": 1821},
227 |                         {"name": "TimeScale", "size": 5833}
228 |                     ]
229 |                 },
230 |                 {
231 |                     "name": "util",
232 |                     "children": [
233 |                         {"name": "Arrays", "size": 8258},
234 |                         {"name": "Colors", "size": 10001},
235 |                         {"name": "Dates", "size": 8217},
236 |                         {"name": "Displays", "size": 12555},
237 |                         {"name": "Filter", "size": 2324},
238 |                         {"name": "Geometry", "size": 10993},
239 |                         {
240 |                             "name": "heap",
241 |                             "children": [
242 |                                 {"name": "FibonacciHeap", "size": 9354},
243 |                                 {"name": "HeapNode", "size": 1233}
244 |                             ]
245 |                         },
246 |                         {"name": "IEvaluable", "size": 335},
247 |                         {"name": "IPredicate", "size": 383},
248 |                         {"name": "IValueProxy", "size": 874},
249 |                         {
250 |                             "name": "math",
251 |                             "children": [
252 |                                 {"name": "DenseMatrix", "size": 3165},
253 |                                 {"name": "IMatrix", "size": 2815},
254 |                                 {"name": "SparseMatrix", "size": 3366}
255 |                             ]
256 |                         },
257 |                         {"name": "Maths", "size": 17705},
258 |                         {"name": "Orientation", "size": 1486},
259 |                         {
260 |                             "name": "palette",
261 |                             "children": [
262 |                                 {"name": "ColorPalette", "size": 6367},
263 |                                 {"name": "Palette", "size": 1229},
264 |                                 {"name": "ShapePalette", "size": 2059},
265 |                                 {"name": "SizePalette", "size": 2291}
266 |                             ]
267 |                         },
268 |                         {"name": "Property", "size": 5559},
269 |                         {"name": "Shapes", "size": 19118},
270 |                         {"name": "Sort", "size": 6887},
271 |                         {"name": "Stats", "size": 6557},
272 |                         {"name": "Strings", "size": 22026}
273 |                     ]
274 |                 },
275 |                 {
276 |                     "name": "vis",
277 |                     "children": [
278 |                         {
279 |                             "name": "axis",
280 |                             "children": [
281 |                                 {"name": "Axes", "size": 1302},
282 |                                 {"name": "Axis", "size": 24593},
283 |                                 {"name": "AxisGridLine", "size": 652},
284 |                                 {"name": "AxisLabel", "size": 636},
285 |                                 {"name": "CartesianAxes", "size": 6703}
286 |                             ]
287 |                         },
288 |                         {
289 |                             "name": "controls",
290 |                             "children": [
291 |                                 {"name": "AnchorControl", "size": 2138},
292 |                                 {"name": "ClickControl", "size": 3824},
293 |                                 {"name": "Control", "size": 1353},
294 |                                 {"name": "ControlList", "size": 4665},
295 |                                 {"name": "DragControl", "size": 2649},
296 |                                 {"name": "ExpandControl", "size": 2832},
297 |                                 {"name": "HoverControl", "size": 4896},
298 |                                 {"name": "IControl", "size": 763},
299 |                                 {"name": "PanZoomControl", "size": 5222},
300 |                                 {"name": "SelectionControl", "size": 7862},
301 |                                 {"name": "TooltipControl", "size": 8435}
302 |                             ]
303 |                         },
304 |                         {
305 |                             "name": "data",
306 |                             "children": [
307 |                                 {"name": "Data", "size": 20544},
308 |                                 {"name": "DataList", "size": 19788},
309 |                                 {"name": "DataSprite", "size": 10349},
310 |                                 {"name": "EdgeSprite", "size": 3301},
311 |                                 {"name": "NodeSprite", "size": 19382},
312 |                                 {
313 |                                     "name": "render",
314 |                                     "children": [
315 |                                         {"name": "ArrowType", "size": 698},
316 |                                         {"name": "EdgeRenderer", "size": 5569},
317 |                                         {"name": "IRenderer", "size": 353},
318 |                                         {"name": "ShapeRenderer", "size": 2247}
319 |                                     ]
320 |                                 },
321 |                                 {"name": "ScaleBinding", "size": 11275},
322 |                                 {"name": "Tree", "size": 7147},
323 |                                 {"name": "TreeBuilder", "size": 9930}
324 |                             ]
325 |                         },
326 |                         {
327 |                             "name": "events",
328 |                             "children": [
329 |                                 {"name": "DataEvent", "size": 2313},
330 |                                 {"name": "SelectionEvent", "size": 1880},
331 |                                 {"name": "TooltipEvent", "size": 1701},
332 |                                 {"name": "VisualizationEvent", "size": 1117}
333 |                             ]
334 |                         },
335 |                         {
336 |                             "name": "legend",
337 |                             "children": [
338 |                                 {"name": "Legend", "size": 20859},
339 |                                 {"name": "LegendItem", "size": 4614},
340 |                                 {"name": "LegendRange", "size": 10530}
341 |                             ]
342 |                         },
343 |                         {
344 |                             "name": "operator",
345 |                             "children": [
346 |                                 {
347 |                                     "name": "distortion",
348 |                                     "children": [
349 |                                         {"name": "BifocalDistortion", "size": 4461},
350 |                                         {"name": "Distortion", "size": 6314},
351 |                                         {"name": "FisheyeDistortion", "size": 3444}
352 |                                     ]
353 |                                 },
354 |                                 {
355 |                                     "name": "encoder",
356 |                                     "children": [
357 |                                         {"name": "ColorEncoder", "size": 3179},
358 |                                         {"name": "Encoder", "size": 4060},
359 |                                         {"name": "PropertyEncoder", "size": 4138},
360 |                                         {"name": "ShapeEncoder", "size": 1690},
361 |                                         {"name": "SizeEncoder", "size": 1830}
362 |                                     ]
363 |                                 },
364 |                                 {
365 |                                     "name": "filter",
366 |                                     "children": [
367 |                                         {"name": "FisheyeTreeFilter", "size": 5219},
368 |                                         {"name": "GraphDistanceFilter", "size": 3165},
369 |                                         {"name": "VisibilityFilter", "size": 3509}
370 |                                     ]
371 |                                 },
372 |                                 {"name": "IOperator", "size": 1286},
373 |                                 {
374 |                                     "name": "label",
375 |                                     "children": [
376 |                                         {"name": "Labeler", "size": 9956},
377 |                                         {"name": "RadialLabeler", "size": 3899},
378 |                                         {"name": "StackedAreaLabeler", "size": 3202}
379 |                                     ]
380 |                                 },
381 |                                 {
382 |                                     "name": "layout",
383 |                                     "children": [
384 |                                         {"name": "AxisLayout", "size": 6725},
385 |                                         {"name": "BundledEdgeRouter", "size": 3727},
386 |                                         {"name": "CircleLayout", "size": 9317},
387 |                                         {"name": "CirclePackingLayout", "size": 12003},
388 |                                         {"name": "DendrogramLayout", "size": 4853},
389 |                                         {"name": "ForceDirectedLayout", "size": 8411},
390 |                                         {"name": "IcicleTreeLayout", "size": 4864},
391 |                                         {"name": "IndentedTreeLayout", "size": 3174},
392 |                                         {"name": "Layout", "size": 7881},
393 |                                         {"name": "NodeLinkTreeLayout", "size": 12870},
394 |                                         {"name": "PieLayout", "size": 2728},
395 |                                         {"name": "RadialTreeLayout", "size": 12348},
396 |                                         {"name": "RandomLayout", "size": 870},
397 |                                         {"name": "StackedAreaLayout", "size": 9121},
398 |                                         {"name": "TreeMapLayout", "size": 9191}
399 |                                     ]
400 |                                 },
401 |                                 {"name": "Operator", "size": 2490},
402 |                                 {"name": "OperatorList", "size": 5248},
403 |                                 {"name": "OperatorSequence", "size": 4190},
404 |                                 {"name": "OperatorSwitch", "size": 2581},
405 |                                 {"name": "SortOperator", "size": 2023}
406 |                             ]
407 |                         },
408 |                         {"name": "Visualization", "size": 16540}
409 |                     ]
410 |                 }
411 |             ]
412 |         }];
413 |     el[1].data = el[0].data;
414 |   </script>
415 | 
416 | </body>
417 | 
418 | </html>
419 | 


--------------------------------------------------------------------------------