Overlap vis (#83)

* Developer (#47)

* first 100 recipes seeded; recipe and ingredient routes defined

* first ingredients seeded (#5)

* Layoutandnav (#9)

* deleted rando greeting from home page and renamed logo

* logoupdated along with file names

* working on nav items

* navbar looks good working well

* removed navbar scss not needed

* fixed layout view added favicon

* Origin/loginview (#10)

* loginpage prettified

* in progress

* added oauth buttons to login page

* removed seed file

* added original seed

* fixed login view height

* expanded user db

* wrote test for signup route

* added link to signup state

* signup state, template, controller, and method in authservice

* added styling to signup view

* added mixin to SCSS to make it dry

* Db ingredients (#14)

* first ingredients seeded

* fixed db errors for ingredients and recipes

* fixed linter error

* Oauth (#16)

* google oauth set

* facebook oauth set

* updated gitignore

* Delete development.js

* updated oauth keys

* readding developmentjs file

* Made chancges suggested by glebec (#17)

* made changes suggested by glebec

* Fixed async

* Footer (#18)

* deleted rando greeting from home page and renamed logo

* logoupdated along with file names

* working on nav items

* navbar looks good working well

* removed navbar scss not needed

* fixed home layout dimensions and added favicon

* updated package.json details

* updated logo size

* set fixed main page vh

* updated favicon

* navbar view complete

* prev commit footer view complete and navbar view now

* fixed signup view form

* signup login and oauth button views done

* about page view set

* developmentjs file keys

* changed verbiage for signup on login page

* updated logo size

* corrected user model to allow oauth (#19)

* extracted food aisles (#22)

* Clean db (#23)

* added allownull falses to recipe database and changed seed file to allow these errors

* working on seed file

* worked on the seed file without improving it

* resolved unique validation errors

* Deleted useless file

* Food categories (#26)

* extracted food aisles

* user prefs model complete

* user prefs model updated

* filter recipes by user prefs

* associations added for user prefs

* Meal planning1 (#27)

* added allownull falses to recipe database and changed seed file to allow these errors

* working on seed file

* worked on the seed file without improving it

* started im

* Started...

* Minor changes... nbd

* added preliminary tests for recipe model

* working on tests

* added tests for getRelatedMeals

* Fixed some error handling (#28)

* Food prefs (#29)

* revert favicon

* updated favicon for heroku

* submit button on sign up takes you to prefs page

* user prefs test running no tests passing

* user prefs tests debugging

* user prefs tests passing

* Food categories (#32)

* extracted food aisles

* user prefs model complete

* user prefs model updated

* filter recipes by user prefs

* associations added for user prefs

* writing tests for user prefs

* user prefs routes

* working on user pref routes

* third time is the charm?

* updated package json dependency for linting as per glebecs sugg

* Userprefmodel (#33)

* updated nav bar to be hamburger menu for small device view

* cleaned up tests and instance method

* user prefs routes: create new, get one, update one (#36)

* Prefs (#37)

* user prefs routes: create new, get one, update one

* added general user routes

* skeleton user pref view (#38)

* Mealplanning2 (#34)

* getMealsWithSimilarIngredients first version

* Created tests for getMealsWithSimilarIngredients

* Added some comments for geatMealsWithSmiliarIngredients

* fixed signup route by changing state go (#39)

* removed console log

* prefs controller added

* Ingredient routes (#41)

* get ALL the ingredients (route)

* removed extraneous code

* getting all ingredients need to work on autocomplete

* added skeleton view for meals page dates

* renamed app to Dishd

* Dislikes bar (#43)

* removed console log

* prefs controller added

* getting all ingredients need to work on autocomplete

* dislikes bar filters! :D

* selected dislikes get added to preference object

* dislike buttons added and deleted with user input

* new user creates default userPref; user dislikes remembered on refresh; null dislike taken care of

* numPeople and availableTime added to userPref model and hooked up to frontend

* skeleton meals view

* adding that x

* removing pre tag

* spending chart is a go

* moving bundle chart over

* fixing eslint warnings and bundle diagram

* updating karma file

* re-styling my acct page

.eslintrc.json

@@ -13,7 +13,8 @@
   "rules": {
     "global-require": 0, // 0 = off, 1 = warn (yellow), 2 = error (red)
     "camelcase": 0,
-    "no-debugger": 1
+    "no-debugger": 1,
+    "quotes": [0, "single", { "avoidEscape": true }]
     // add more rules here to override the fullstack config
   }
 }

browser/js/my-account/my-account.html

@@ -1,5 +1,5 @@
 <md-content id="myacct">
-<navbar header="My Account"></navbar>
+    <navbar header="My Account"></navbar>
     <section class="container">
         <div class="item">
             <section>
@@ -23,7 +23,7 @@ <h1>I Ate</h1>
     </section>
     <section class="container">
         <div class="item">
-            <section>
+            <section class="spending">
                 <h1>I Saved</h1>
                 <div id="spendingVis">
                     <div ng-controller="SpendingCtrl">
@@ -35,8 +35,9 @@ <h1>I Saved</h1>
         <div class="item">
             <section>
                 <h1>I Recycled</h1>
-                <dishd-logo></dishd-logo>
-                <div>chord (?) diagram of ingredient overlap</div>
+                <div id="overlapVis">
+                  <script src="/js/visualizations/overlap/overlap-vis.js"></script>
+                </div>
             </section>
         </div>
     </section>

browser/js/visualizations/overlap/overlap-imports.json

@@ -0,0 +1,43 @@
+[
+{"name":"meals.baked-falafel-burger.parsley","size":500,"imports":["meals.kofta-meatballs.parsely","meals.wild-rice-stuffing.parsely"]},
+{"name":"meals.baked-falafel-burger.sea-salt","size":500,"imports":["meals.kofta-meatballs.salt","meals.wild-rice-stuffing.sea-salt"]},
+{"name":"meals.baked-falafel-burger.cumin","size":500,"imports":["meals.kofta-meatballs.cumin"]},
+{"name":"meals.baked-falafel-burger.garlic","size":500,"imports":["meals.wild-rice-stuffing.garlic"]},
+{"name":"meals.baked-falafel-burger.lemon","size":500,"imports":["meals.kofta-meatballs.lemon-juice"]},
+{"name":"meals.baked-falafel-burger.chickpeas","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.chili-garlic-sauce","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.oat-flour","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.tomato","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.greens","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.hummus","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.parsely","size":500,"imports":["meals.baked-falafel-burger.parsley","meals.wild-rice-stuffing.parsely"]},
+{"name":"meals.kofta-meatballs.salt","size":500,"imports":["meals.baked-falafel-burger.sea-salt","meals.wild-rice-stuffing.sea-salt"]},
+{"name":"meals.kofta-meatballs.cumin","size":500,"imports":["meals.baked-falafel-burger.cumin"]},
+{"name":"meals.kofta-meatballs.lemon-juice","size":500,"imports":["meals.baked-falafel-burger.lemon"]},
+{"name":"meals.kofta-meatballs.cinnamon","size":500,"imports":["meals.wild-rice-stuffing.cinnamon"]},
+{"name":"meals.kofta-meatballs.dried-cherries","size":500,"imports":["meals.wild-rice-stuffing.dried-cranberries"]},
+{"name":"meals.kofta-meatballs.allspice","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.fresh-mint","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.cloves","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.ground-lamb","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.honey","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.olive-oil","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.pepper","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.shallot","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.sparkling-water","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.parsely","size":500,"imports":["meals.baked-falafel-burger.parsley","meals.kofta-meatballs.parsely"]},
+{"name":"meals.wild-rice-stuffing.sea-salt","size":500,"imports":["meals.kofta-meatballs.salt","meals.baked-falafel-burger.sea-salt"]},
+{"name":"meals.wild-rice-stuffing.garlic","size":500,"imports":["meals.baked-falafel-burger.garlic"]},
+{"name":"meals.wild-rice-stuffing.cinnamon","size":500,"imports":["meals.kofta-meatballs.cinnamon"]},
+{"name":"meals.wild-rice-stuffing.dried-cranberries","size":500,"imports":["meals.kofta-meatballs.dried-cherries"]},
+{"name":"meals.wild-rice-stuffing.bosc-pear","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.butternut-squash","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.celery","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.coconut-oil","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.dried-oregano","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.dry-white-wine","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.orange-zest","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.pecans","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.wild-rice","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.yellow-onion","size":500,"imports":[]}
+]

browser/js/visualizations/overlap/overlap-vis.js

@@ -0,0 +1,126 @@
+/* eslint-disable */
+
+var diameter = 400,
+    radius = diameter / 2,
+    innerRadius = radius - 120;
+
+var cluster = d3.layout.cluster()
+    .size([360, innerRadius])
+    .sort(null)
+    .value(function(d) { return d.size; });
+
+var bundle = d3.layout.bundle();
+
+var line = d3.svg.line.radial()
+    .interpolate("bundle")
+    .tension(.85)
+    .radius(function(d) { return d.y; })
+    .angle(function(d) { return d.x / 180 * Math.PI; });
+
+var svg = d3.select("#overlapVis").append("svg")
+    .attr("width", diameter)
+    .attr("height", diameter)
+  .append("g")
+    .attr("transform", "translate(" + radius + "," + radius + ")");
+
+var link = svg.append("g").selectAll(".link"),
+    node = svg.append("g").selectAll(".node");
+
+d3.json("/js/visualizations/overlap/overlap-imports.json", function(error, classes) {
+  if (error) throw error;
+
+  var nodes = cluster.nodes(packageHierarchy(classes)),
+      links = packageImports(nodes);
+
+  link = link
+      .data(bundle(links))
+    .enter().append("path")
+      .each(function(d) { 
+        d.source = d[0];
+        d.target = d[d.length - 1];
+      })
+      .attr("class", "link")
+      .attr("d", line);
+
+  node = node
+      .data(nodes.filter(function(n) { return !n.children; }))
+    .enter().append("text")
+      .attr("class", "node")
+      .attr("dy", ".31em")
+      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
+      .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
+      .text(function(d) { return d.key; })
+      .on("mouseover", mouseovered)
+      .on("mouseout", mouseouted);
+});
+
+function mouseovered(d) {
+  node
+      .each(function(n) { n.target = n.source = false; });
+
+  link
+      .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
+      .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
+    .filter(function(l) { return l.target === d || l.source === d; })
+      .each(function() { this.parentNode.appendChild(this); });
+
+  node
+      .classed("node--target", function(n) { return n.target; })
+      .classed("node--source", function(n) { return n.source; });
+}
+
+function mouseouted(d) {
+  link
+      .classed("link--target", false)
+      .classed("link--source", false);
+
+  node
+      .classed("node--target", false)
+      .classed("node--source", false);
+}
+
+d3.select(self.frameElement).style("height", diameter + "px");
+
+// Lazily construct the package hierarchy from class names.
+function packageHierarchy(classes) {
+  var map = {};
+
+  function find(name, data) {
+    var node = map[name], i;
+    if (!node) {
+      node = map[name] = data || {name: name, children: []};
+      if (name.length) {
+        node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
+        node.parent.children.push(node);
+        node.key = name.substring(i + 1);
+      }
+    }
+    return node;
+  }
+
+  classes.forEach(function(d) {
+    find(d.name, d);
+  });
+
+  return map[""];
+}
+
+// Return a list of imports for the given array of nodes.
+function packageImports(nodes) {
+  var map = {},
+      imports = [];
+
+  // Compute a map from name to node.
+  nodes.forEach(function(d) {
+    map[d.name] = d;
+  });
+
+  // For each import, construct a link from the source to target node.
+  nodes.forEach(function(d) {
+    if (d.imports) d.imports.forEach(function(i) {
+      imports.push({source: map[d.name], target: map[i]});
+    });
+  });
+
+  return imports;
+}

browser/js/visualizations/spending/spending-vis.js

@@ -3,6 +3,7 @@ app.controller('SpendingCtrl', ($scope) => {
 		chart: {
 			type: 'lineChart',
 			height: 300,
+			width: 500,
 			margin: {
 				top: 20,
 				right: 20,

browser/scss/my-account/my-account.scss

@@ -9,6 +9,14 @@
         padding: 20px;
         flex: 1;
         text-align: center;
+        .spending {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            #spendingVis {
+                padding-top: 55px;
+            }
+        }
     }
     .item:nth-child(2) {
         flex: 1;
@@ -22,3 +30,36 @@
         }
     }
 }
+
+.node {
+  font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  fill: #bbb;
+}
+
+.node:hover {
+  fill: #000;
+}
+
+.link {
+  stroke: steelblue;
+  stroke-opacity: .4;
+  fill: none;
+  pointer-events: none;
+}
+
+.node:hover,
+.node--source,
+.node--target {
+  font-weight: 700;
+}
+
+.link--source,
+.link--target {
+  stroke-opacity: 1;
+  stroke-width: 2px;
+}
+
+.link--source,
+.link--target {
+  stroke: #FEE778;
+}

demo/data/overlap-imports.json

@@ -0,0 +1,43 @@
+[
+{"name":"meals.baked-falafel-burger.parsley","size":500,"imports":["meals.kofta-meatballs.parsely","meals.wild-rice-stuffing.parsely"]},
+{"name":"meals.baked-falafel-burger.sea-salt","size":500,"imports":["meals.kofta-meatballs.salt","meals.wild-rice-stuffing.sea-salt"]},
+{"name":"meals.baked-falafel-burger.cumin","size":500,"imports":["meals.kofta-meatballs.cumin"]},
+{"name":"meals.baked-falafel-burger.garlic","size":500,"imports":["meals.wild-rice-stuffing.garlic"]},
+{"name":"meals.baked-falafel-burger.lemon","size":500,"imports":["meals.kofta-meatballs.lemon-juice"]},
+{"name":"meals.baked-falafel-burger.chickpeas","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.chili-garlic-sauce","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.oat-flour","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.tomato","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.greens","size":500,"imports":[]},
+{"name":"meals.baked-falafel-burger.hummus","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.parsely","size":500,"imports":["meals.baked-falafel-burger.parsley","meals.wild-rice-stuffing.parsely"]},
+{"name":"meals.kofta-meatballs.salt","size":500,"imports":["meals.baked-falafel-burger.sea-salt","meals.wild-rice-stuffing.sea-salt"]},
+{"name":"meals.kofta-meatballs.cumin","size":500,"imports":["meals.baked-falafel-burger.cumin"]},
+{"name":"meals.kofta-meatballs.lemon-juice","size":500,"imports":["meals.baked-falafel-burger.lemon"]},
+{"name":"meals.kofta-meatballs.cinnamon","size":500,"imports":["meals.wild-rice-stuffing.cinnamon"]},
+{"name":"meals.kofta-meatballs.dried-cherries","size":500,"imports":["meals.wild-rice-stuffing.dried-cranberries"]},
+{"name":"meals.kofta-meatballs.allspice","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.fresh-mint","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.cloves","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.ground-lamb","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.honey","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.olive-oil","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.pepper","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.shallot","size":500,"imports":[]},
+{"name":"meals.kofta-meatballs.sparkling-water","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.parsely","size":500,"imports":["meals.baked-falafel-burger.parsley","meals.kofta-meatballs.parsely"]},
+{"name":"meals.wild-rice-stuffing.sea-salt","size":500,"imports":["meals.kofta-meatballs.salt","meals.baked-falafel-burger.sea-salt"]},
+{"name":"meals.wild-rice-stuffing.garlic","size":500,"imports":["meals.baked-falafel-burger.garlic"]},
+{"name":"meals.wild-rice-stuffing.cinnamon","size":500,"imports":["meals.kofta-meatballs.cinnamon"]},
+{"name":"meals.wild-rice-stuffing.dried-cranberries","size":500,"imports":["meals.kofta-meatballs.dried-cherries"]},
+{"name":"meals.wild-rice-stuffing.bosc-pear","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.butternut-squash","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.celery","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.coconut-oil","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.dried-oregano","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.dry-white-wine","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.orange-zest","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.pecans","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.wild-rice","size":500,"imports":[]},
+{"name":"meals.wild-rice-stuffing.yellow-onion","size":500,"imports":[]}
+]

server/app/views/index.html

@@ -21,20 +21,16 @@
       rel="stylesheet">
     <script src="/slick-carousel/slick/slick.min.js"></script>
     <script src="/angular-slick-carousel/dist/angular-slick.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
     <script src="/nvd3/build/nv.d3.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.8/angular-nvd3.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
-    <script src="/nvd3/build/nv.d3.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>
     <script src="/angular-vidbg/dist/vidBg.min.js"></script>
     <script src="/socket.io-client/socket.io.js"></script>
     <script src="/main.js"></script>
     <script src="/pdfmake/pdfmake.min.js"></script>
     <script src="/pdfmake/vfs_fonts.js"></script>
     <script src="/html2canvas/dist/html2canvas.min.js"></script>
 
-
 </head>
 <body ng-app="Dishd">
     <!-- <navbar></navbar> -->

tests/browser/karma.conf.js

@@ -9,6 +9,9 @@ module.exports = function (config) {
         'node_modules/angular-animate/angular-animate.js',
         'node_modules/angular-ui-router/release/angular-ui-router.js',
         'node_modules/socket.io-client/socket.io.js',
+        'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js',
+        "/nvd3/build/nv.d3.min.js",
+        'https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js',
         'public/main.js',
         'node_modules/sinon/pkg/sinon.js',
         'node_modules/angular-mocks/angular-mocks.js',