Upgraded to Polymer 1.9 and added support for travis

timeu · timeu · commit 4c07ac58a484 · 2017-05-25T00:31:06.000+02:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": "eslint:recommended",
+  "rules": {
+    "no-console": 0
+  },
+  "env": {
+    "browser": true
+  },
+  "plugins": [
+    "html"
+  ],
+  "globals": {
+    "CustomElements": false,
+    "HTMLImports": false,
+    "Polymer": false,
+    "WeakMap": false
+  }
+}
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,19 @@
+language: node_js
+sudo: required
+before_script:
+  - npm install -g bower polylint web-component-tester eslint eslint-plugin-html
+  - bower install
+  - polylint
+  - eslint *.html test/*.html
+node_js: '6'
+addons:
+  firefox: latest
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+script:
+  - xvfb-run wct
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
+dist: trusty
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+    "eslint.enable": true,
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "html"
+    ]
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,16 @@
+{
+    "version": "0.1.0",
+    "windows": {
+        "command": "eslint"
+    },
+    "linux": {
+        "command": "/home/timeu/.nvm/versions/node/v6.10.0/bin/eslint"
+    },
+    "osx": {
+        "command": "eslint"
+    },
+    "isShellCommand": true,
+    "args": ["*.html","test/*.html"],
+    "showOutput": "silent",
+    "problemMatcher": "$eslint-stylish"
+}
diff --git a/README.md b/README.md
@@ -3,14 +3,14 @@
 > A web-component to draw a piechart using Polymer and SVG.
 
 ## Demo
-> [Check it live](http://timeu.github.io/svg-piechart/components/svg-piechart/demo/index.html).
+> [Check it live](https://www.webcomponents.org/element/timeu/svg-piechart).
 
 ## Install
 
 Install the component using [Bower](http://bower.io/):
 
 ```sh
-$ bower install --save svg-piechart 
+$ bower install --save svg-piechart
 ```
 
 Or [download as ZIP](https://github.com/timeu/svg-piechart/archive/master.zip).
@@ -46,16 +46,6 @@ Or [download as ZIP](https://github.com/timeu/svg-piechart/archive/master.zip).
   <svg-piechart size="250" data="[10,20,50,20]"></svg-piechart>
 ```
 
-## Options
-
-See the [component page](http://timeu.github.io/svg-piechart) for more information.
-
-
-## Browser Support
-
-![IE](https://raw.github.com/paulirish/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/paulirish/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/paulirish/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/paulirish/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/paulirish/browser-logos/master/safari/safari_48x48.png)
---- | --- | --- | --- | --- |
-IE 10+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 
 ## Contributing
 
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-piechart",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "authors": ["Uemit Seren <uemit.seren@gmail.com>"],
   "description": "Element to draw a piechart on a SVG.",
   "keywords": "svg, piechart, polymer, web-components",
@@ -12,10 +12,12 @@
     "/test/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.0"
+    "polymer": "Polymer/polymer#^1.9.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "web-component-tester": "*"
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -2,13 +2,16 @@
 <html>
   <head>
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-    <title>svg-piechart</title>
+    <title>svg-piechart demo</title>
 
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+
     <link rel="import" href="../svg-piechart.html">
-    <link rel="import" href="../../paper-styles/demo-pages.html">
 
-    <style is="custom-style">
+    <style is="custom-style" include="demo-pages-shared-styles">
       .vertical-section-container {
         max-width: 48em;
         margin: 0 auto;
@@ -19,50 +22,73 @@
     </style>
   </head>
   <body>
-
-    <div class="vertical-section-container">
+    <div class="vertical-section-container centered">
       <div>
         <h4>Normal</h4>
         <div class="horizontal-section">
-          <svg-piechart data="[10,50,20,10]"></svg-piechart>
+          <demo-snippet>
+            <template>
+              <svg-piechart data="[10,50,20,10]"></svg-piechart>
+            </template>
+          </demo-snippet>
         </div>
       </div>
       <div>
         <h4>Bigger (<code>size</code> is <code>250</code>)</h4>
         <div class="horizontal-section">
-          <svg-piechart size="250" data="[10,50,20,10]"></svg-piechart>
+          <demo-snippet>
+            <template>
+              <svg-piechart size="250" data="[10,50,20,10]"></svg-piechart>
+            </template>
+          </demo-snippet>
         </div>
       </div>
       <div>
         <h4>Custom colors</h4>
         <div class="horizontal-section">
-          <svg-piechart
+         <demo-snippet>
+           <template>
+             <svg-piechart
             colors='[
               "rgba(255, 0, 0, .1)",
               "rgba(255, 0, 0, .3)",
               "rgba(255, 0, 0, .5)",
               "rgba(255, 0, 0, .7)",
               "rgba(255, 0, 0, .9)"]'
             data="[1,1,1,1,1]">
-          </svg-piechart>
+            </svg-piechart>
+           </template>
+         </demo-snippet>
         </div>
       </div>
       <div>
         <h4>Smallest default color palette (up to 4 different colors)</h4>
         <div class="horizontal-section">
-          <svg-piechart data="[1,1,1,1]"></svg-piechart>
+          <demo-snippet>
+            <template>
+              <svg-piechart data="[1,1,1,1]"></svg-piechart>
+            </template>
+          </demo-snippet>
         </div>
       </div>
       <div>
         <h4>Mid-size default color palette (up to 8 different colors)</h4>
         <div class="horizontal-section">
-          <svg-piechart data="[1,1,1,1,1,1,1,1]"></svg-piechart>
+          <demo-snippet>
+            <template>
+              <svg-piechart data="[1,1,1,1,1,1,1,1]"></svg-piechart>
+            </template>
+          </demo-snippet>
         </div>
       </div>
       <div>
         <h4>Biggest default color palette (up to 16 different colors)</h4>
         <div class="horizontal-section">
-          <svg-piechart data="[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]"></svg-piechart>
+          <demo-snippet>
+            <template>
+              <svg-piechart data="[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]"></svg-piechart>
+            </template>
+          </demo-snippet>
         </div>
       </div>
     </div>
diff --git a/polymer.json b/polymer.json
@@ -0,0 +1,7 @@
+{
+  "lint": {
+    "rules": [
+      "polymer-1"
+    ]
+  }
+}
diff --git a/svg-piechart.html b/svg-piechart.html
@@ -33,15 +33,15 @@
       display:block;
     }
    </style>
-   
+
    <template>
     <svg id="svg" width$="[[size]]" height$="[[size]]" viewBox="0 0 360 360">
       <!-- <template is="dom-repeat" items={{_arcs}}>
           <path class="slice" d="M180,180 L{{item.x1}},{{item.y1}} A180,180 0 {{item.largeArcFlag}},1 {{item.x2}},{{item.y2}} z"style="fill: {{item.color}}" />
       </template> -->
     </svg>
   </template>
-  
+
 </dom-module>
 
 <script>
@@ -91,7 +91,7 @@
       /**
       * The `colors` attribute specifies the colors to be used for each slice.
       * If no colors are specified then the default-colors are used.
-      * 
+      *
       * @attribute colors
       */
       colors: {
@@ -101,7 +101,7 @@
 
       /**
       * The `size` property specifies the size of the piechart (Default: 150).
-      * 
+      *
       * @attribute size
       */
       size: {
@@ -111,7 +111,7 @@
 
       /**
       * The `data` property specifies the values for each slice .
-      * 
+      *
       * @attribute data
       */
       data: {
@@ -153,7 +153,7 @@
 
     _calculateArcs: function(colors, data) {
       var total = this._calculateTotal(data);
-      var colors = this._getColors(colors);
+      colors = this._getColors(colors);
       var startAngle = 0;
       var endAngle = -90;
       var arcs = [];
@@ -176,7 +176,7 @@
           color: colors[i]
         };
         if (arc.x2 > 179.9 && arc.y2 === 0 && arc.largeArcFlag === 1) {
-          arc.x2 = 179.99; 
+          arc.x2 = 179.99;
         }
         arcs.push(arc);
       }
@@ -192,7 +192,7 @@
         svg.removeChild(svg.firstChild);
       }
 
-      for (i = 0; i < arcs.length; i++) {
+      for (var i = 0; i < arcs.length; i++) {
         var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
         path.classList.add('slice');
         path.style.fill = arcs[i].color;
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -0,0 +1,12 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "assert": true,
+    "WCT": true,
+    "fixture": true,
+    "Polymer": true,
+    "async": true
+  }
+}
diff --git a/test/basic-test.html b/test/basic-test.html
@@ -22,45 +22,52 @@
   <body>
 
     <!-- You can use the document as a place to set up your fixtures. -->
-    <svg-piechart></svg-piechart>
+    <test-fixture id="basic">
+      <template>
+        <svg-piechart></svg-piechart>
+      </template>
+    </test-fixture>
 
     <script>
-      var myEl = document.querySelector('svg-piechart');
 
       suite('<css-piechart>', function() {
+        var myEl;
+        setup(function() {
+          myEl = fixture('basic')
+        });
         // Clean up after ourselves.
-        teardown(function(done) {
+        /*teardown(function(done) {
           myEl.colors = [];
           myEl.data = []
           myEl.size = 50;
           flush(done);
-        });
-        
+        });*/
+
         test('defaults', function() {
           assert.equal(myEl.colors.length,0);
           assert.equal(myEl.size,150);
           assert.equal(myEl.data.length,0);
         });
-        
+
         test('get custom colors when defined',function() {
-          var customColors = ['red','green','blue']; 
+          var customColors = ['red','green','blue'];
           myEl.colors = customColors;
-          assert.equal(myEl.colors,customColors); 
+          assert.equal(myEl.colors,customColors);
           assert.equal(myEl._getColors(customColors),customColors);
         });
-        
+
         test('get 4 colors when slices <8',function() {
-          assert.equal(myEl.colors.length,0); 
+          assert.equal(myEl.colors.length,0);
           assert.equal(myEl._getColors([]).length,4);
         });
         test('get 8 colors when slices > 4',function() {
           assert.equal(myEl.colors.length,0);
-          myEl.data = [1,2,3,4,5]; 
+          myEl.data = [1,2,3,4,5];
           assert.equal(myEl._getColors().length,8);
-        });    
+        });
         test('get 16 colors when slices > 8',function() {
           assert.equal(myEl.colors.length,0);
-          myEl.data = [1,2,3,4,5,6,7,8,9]; 
+          myEl.data = [1,2,3,4,5,6,7,8,9];
           assert.equal(myEl._getColors().length,16);
         });
         test('calculate total',function() {
@@ -89,8 +96,8 @@
           myEl.data = [20,40,40];
           myEl.colors = ['red','green','blue'];
           var background = Polymer.dom(myEl.root).querySelector("#svg");
-          assert.equal(background.getAttribute("width"),50);
-          assert.equal(background.getAttribute("height"),50);
+          assert.equal(background.getAttribute("width"),150);
+          assert.equal(background.getAttribute("height"),150);
           async.nextTick(function() {
             var slicesEl = Polymer.dom(myEl.root).querySelectorAll('.slice');
             assert.equal(slicesEl.length,3);
diff --git a/test/index.html b/test/index.html
