From b9e5c5549b8137daebe982c50e9a89eafaa03f11 Mon Sep 17 00:00:00 2001
From: Andi Staub <andi.staub@gmail.com>
Date: Tue, 12 Dec 2017 10:20:53 +0100
Subject: [PATCH] Just pass an array as argument to web-component

---
 README.md                                | 10 ++++------
 src/components/EmployeesContainer.jsx    |  2 +-
 src/components/SalariesContainer.jsx     |  2 +-
 src/webcomponents/pan-employees-graph.js |  4 ++--
 src/webcomponents/pan-salaries-graph.js  |  2 +-
 5 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 9d099d8..d1b9339 100644
--- a/README.md
+++ b/README.md
@@ -37,17 +37,15 @@ To use those components, add `dashboard-components.js` and needed polyfills to y
     "data":[["2017 September","70%"]]}"
   ></pan-table>
 
-  <pan-employees-graph data="{
-    "data":[
+  <pan-employees-graph data="[
       {"label":"2006","value":1},
       {"label":"2007","value":4}
-    ]}"
+    ]"
   ></pan-employees-graph>
   
-  <pan-salaries-graph data="{
-    "data":[
+  <pan-salaries-graph data="[
       {"month":10,"year":2015,"salary":7783,"workload":71}
-    ]}"
+    ]"
   ></pan-salaries-graph>
 </body>
 ```
diff --git a/src/components/EmployeesContainer.jsx b/src/components/EmployeesContainer.jsx
index 800fa23..ee5c205 100644
--- a/src/components/EmployeesContainer.jsx
+++ b/src/components/EmployeesContainer.jsx
@@ -74,7 +74,7 @@ class EmployeesContainer extends Component {
       <div>
         <Title>people</Title>
         <pan-employees-graph
-          data={JSON.stringify({ data: this.state.employees })}
+          data={JSON.stringify(this.state.employees)}
         />
         <pan-bubbles data={JSON.stringify(this.state.bubbles)} />
       </div>
diff --git a/src/components/SalariesContainer.jsx b/src/components/SalariesContainer.jsx
index 1b4e3b5..87485a8 100644
--- a/src/components/SalariesContainer.jsx
+++ b/src/components/SalariesContainer.jsx
@@ -35,7 +35,7 @@ class SalariesContainer extends Component {
     return (
       <div>
         <pan-salaries-graph
-          data={JSON.stringify({ data: this.state.salaries })}
+          data={JSON.stringify(this.state.salaries)}
         />
 
         <Section>
diff --git a/src/webcomponents/pan-employees-graph.js b/src/webcomponents/pan-employees-graph.js
index 635f4aa..9dd6e5f 100644
--- a/src/webcomponents/pan-employees-graph.js
+++ b/src/webcomponents/pan-employees-graph.js
@@ -79,7 +79,7 @@ class PanEmployeesGraph extends StatelessWebComponent {
 
       <div class="GraphWrapper">
         <div class="Graph">
-          ${this.dataJson && this.dataJson.data.map(column => `
+          ${this.dataJson && this.dataJson.map(column => `
             <div class="Bar">
               <div class="ValueWrapper">
                 <div class="ValueHeight" style="height: calc(${this.itemHeight(column.value)}% + ${px(sizes.item)});">
@@ -101,7 +101,7 @@ class PanEmployeesGraph extends StatelessWebComponent {
 
   get scaleMax() {
     // Extend the height of the scale with 1 element
-    return (Math.max(...this.dataJson.data.map(element => element.value)) + 1);
+    return (Math.max(...this.dataJson.map(element => element.value)) + 1);
   }
 
   itemHeight(value) {
diff --git a/src/webcomponents/pan-salaries-graph.js b/src/webcomponents/pan-salaries-graph.js
index 6b7f560..8171ec5 100644
--- a/src/webcomponents/pan-salaries-graph.js
+++ b/src/webcomponents/pan-salaries-graph.js
@@ -17,7 +17,7 @@ class PanSalariesGraph extends StatelessWebComponent {
   }
 
   get salaries() {
-    return JSON.parse(this.data).data;
+    return JSON.parse(this.data);
   }
 
   get scaleStep() { return 1000; }
-- 
GitLab