fix banner graphic, example of ng-repeat

paulcpederson · Sep 17, 2014 · d59b7cc · d59b7cc
1 parent e608b53
commit d59b7cc
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 7 deletions.
diff --git a/documentation/partials/line-graph.md b/documentation/partials/line-graph.md
@@ -46,4 +46,24 @@
   <line field="Owner" value="Black Mesa"></line>
   <line field="Owner" value="Tyrell Corp"></line>
 </graph>
+```
+
+## Inside ng-repeat
+<div class="white-panel" ng-repeat="one in arrayOfData">
+  <graph data="one.data" width="100%" height="600px">
+    <x field="Month" order-by="Date"></x>
+    <y field="Unit Sales"></y>
+    <legend></legend>
+    <line field="Owner"></line>
+  </graph>
+</div>
+
+```html
+<!-- Default -->
+<graph data="graphData" width="100%" height="600px">
+  <x field="Month" order-by="Date"></x>
+  <y field="Unit Sales"></y>
+  <legend></legend>
+  <line field="Owner"></line>
+</graph>
 ```
diff --git a/site/css/home.css b/site/css/home.css
@@ -42,7 +42,7 @@ code {
   font-weight: 200;
 }
 /* line 39, ../scss/home.scss */
-.banner .dimple-graph {
+.banner .banner-graphic {
   position: absolute;
   top: -260px;
   bottom: 0;

diff --git a/site/documentation/partials/line-graph.html b/site/documentation/partials/line-graph.html
@@ -41,3 +41,20 @@ <h2>
   <span class="tag">&lt;<span class="title">line</span> <span class="attribute">field</span>=<span class="value">"Owner"</span> <span class="attribute">value</span>=<span class="value">"Black Mesa"</span>&gt;</span><span class="tag">&lt;/<span class="title">line</span>&gt;</span>
   <span class="tag">&lt;<span class="title">line</span> <span class="attribute">field</span>=<span class="value">"Owner"</span> <span class="attribute">value</span>=<span class="value">"Tyrell Corp"</span>&gt;</span><span class="tag">&lt;/<span class="title">line</span>&gt;</span>
 <span class="tag">&lt;/<span class="title">graph</span>&gt;</span></code></pre>
+<h2 id="inside-ng-repeat">Inside ng-repeat</h2>
+<div class="white-panel" ng-repeat="one in arrayOfData">
+  <graph data="one.data" width="100%" height="600px">
+    <x field="Month" order-by="Date"></x>
+    <y field="Unit Sales"></y>
+    <legend></legend>
+    <line field="Owner"></line>
+  </graph>
+</div>
+
+<pre><code class="lang-html"><span class="comment">&lt;!-- Default --&gt;</span>
+<span class="tag">&lt;<span class="title">graph</span> <span class="attribute">data</span>=<span class="value">"graphData"</span> <span class="attribute">width</span>=<span class="value">"100%"</span> <span class="attribute">height</span>=<span class="value">"600px"</span>&gt;</span>
+  <span class="tag">&lt;<span class="title">x</span> <span class="attribute">field</span>=<span class="value">"Month"</span> <span class="attribute">order-by</span>=<span class="value">"Date"</span>&gt;</span><span class="tag">&lt;/<span class="title">x</span>&gt;</span>
+  <span class="tag">&lt;<span class="title">y</span> <span class="attribute">field</span>=<span class="value">"Unit Sales"</span>&gt;</span><span class="tag">&lt;/<span class="title">y</span>&gt;</span>
+  <span class="tag">&lt;<span class="title">legend</span>&gt;</span><span class="tag">&lt;/<span class="title">legend</span>&gt;</span>
+  <span class="tag">&lt;<span class="title">line</span> <span class="attribute">field</span>=<span class="value">"Owner"</span>&gt;</span><span class="tag">&lt;/<span class="title">line</span>&gt;</span>
+<span class="tag">&lt;/<span class="title">graph</span>&gt;</span></code></pre>
diff --git a/site/index.html b/site/index.html
@@ -70,11 +70,14 @@
         </div>
       </nav>
 
-      <graph data="graphData" width="2400" height="800" class="blue-graph">
-        <x field="Month" order-by="Date" type="Category"></x>
-        <y field="Unit Sales" type="Measure" title=""></y>
-        <line field="Owner"></line>
-      </graph>
+      <div class="banner-graphic">
+        <graph data="graphData" width="2400" height="800" class="blue-graph">
+          <x field="Month" order-by="Date" type="Category"></x>
+          <y field="Unit Sales" type="Measure" title=""></y>
+          <line field="Owner"></line>
+        </graph>
+      </div>
+
       <div class="banner-copy">
         <div class="container">
           <div class="row">

diff --git a/site/js/controllers.js b/site/js/controllers.js
@@ -33,6 +33,7 @@ angular.module('myApp.controllers', [])
 .controller('lineGraphController', ['$scope', 'dataService', function($scope, dataService) {
   dataService.getData().then(function(response) {
     $scope.graphData = response.data;
+    $scope.arrayOfData = [{data: response.data}, {data: response.data}];
   });
 }])
 

diff --git a/site/scss/home.scss b/site/scss/home.scss
@@ -36,7 +36,7 @@ code {
     z-index: 2;
     font-weight: 200;
   }
-  .dimple-graph {
+  .banner-graphic {
     position: absolute;
     top: -260px;
     bottom: 0;