added width

README.md

@@ -225,3 +225,9 @@ _<string>_
 
 Grouping, currently only supports the option "week" which groups all the data by the start of the week, using your
 first date column as the key. Simply sums all the other property fields.
+
+### width
+
+<length>
+
+Width of the nested chart element. Defaults to 26em

demo.html

@@ -10,7 +10,7 @@
     <style>
     body {
       font-family: "Helvetica Neue", "Helvetica", Arial;
-      background-color: antiquewhite;
+      background-color: white;
     }
     </style>
   </head>
@@ -106,7 +106,7 @@ <h2>Charts From Epiquery</h2>
       cols="[{'id':'date', 'type':'date'}, {'id':'applied'}, {'id':'accepted'}, {'id':'paid'}]">
     </ui-stats-chart>
 
-    <ui-stats-chart name="Epiquery: Multiple Y Columns (area, by week)" limit="30" groupBy="week"
+    <ui-stats-chart name="Epiquery: Multiple Y Columns (area, by week)" limit="30" groupBy="week" width="54.5em"
       src="https://query.glgroup.com/councilApplicant/getStats.mustache" type="area"
       cols="[{'id':'date', 'type':'date'}, {'id':'applied'}, {'id':'accepted'}, {'id':'paid'}]">
     </ui-stats-chart>

src/ui-stats-chart.html

@@ -1,4 +1,4 @@
-<polymer-element name="ui-stats-chart" attributes="data src limit name smooth type cols groupBy">
+<polymer-element name="ui-stats-chart" attributes="data src limit name smooth type cols groupBy width">
   <link rel="import" href="../bower_components/google-chart/google-chart.html">
 
   <template>

src/ui-stats-chart.less

@@ -5,8 +5,6 @@
   display: inline-block;
   margin: 1em;
   .border;
-  width: 26em;
-  height: 12em;
   overflow: hidden;
   background-color: @white;
 }
@@ -31,7 +29,7 @@
 }
 
 #chart {
-  width: 100%;
+  width: 26em;
   height: 11em;
 }
 

src/ui-stats-chart.litcoffee

@@ -10,6 +10,9 @@ The Chart tile displays a chart in various formats
 
 ## Attributes and Change Handlers
 
+      widthChanged: ->
+        @$.chart.style.width = @width
+
       srcChanged: ->
         @loading = true
         request.getAsync(@src)