Merge branch 'master' into enhancement/5/Rewrite-source-in-ES6

# Conflicts: # CHANGELOG.md # dest/d3.relationshipgraph.js # dest/d3.relationshipgraph.min.js # examples/index.html # src/index.js # test/RelationshipGraph.js
hkelly93 · Jul 6, 2016 · abcc47d · abcc47d
2 parents 1d439fd + db23fca
commit abcc47d
Show file tree

Hide file tree

Showing 14 changed files with 1,342 additions and 669 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
-/.idea
-/*.iml
-/node_modules
+.idea/*
+*.iml
+node_modules/*
diff --git a/.jscsrc b/.jscsrc
@@ -2,9 +2,11 @@
   "maxErrors": 1000000,
   "disallowMixedSpacesAndTabs": true,
   "disallowMultipleLineBreaks": true,
+  "disallowQuotedKeysInObjects": true,
   "disallowTabs": true,
   "disallowSpaceBeforeComma": true,
   "disallowSpaceBeforeSemicolon": true,
+  "disallowUnusedParams": true,
   "disallowSpaceAfterObjectKeys": true,
   "disallowSpaceAfterPrefixUnaryOperators": true,
   "disallowSpaceBeforePostfixUnaryOperators": true,
@@ -14,6 +16,9 @@
   "disallowTrailingWhitespace": true,
   "disallowTrailingComma": true,
   "disallowYodaConditions": true,
+  "disallowKeywordsOnNewLine": [
+    "else"
+  ],
   "disallowKeywords": [
     "with"
   ],
@@ -58,8 +63,10 @@
     "typeof"
   ],
   "safeContextKeyword": "_this",
+  "requireSemicolons": true,
   "validateLineBreaks": "LF",
   "validateQuoteMarks": "'",
+  "requireAnonymousFunctions": true,
   "validateIndentation": 4,
   "jsDoc": {
     "checkAnnotations": true,

diff --git a/.jshintrc b/.jshintrc
@@ -6,7 +6,7 @@
   "curly": true,
   "eqeqeq": false,
   "forin": true,
-  "freeze": false,
+  "freeze": true,
   "immed": true,
   "latedef": false,
   "newcap": true,
@@ -21,7 +21,7 @@
   "strict": true,
   "indent": 2,
   "asi": false,
-  "boss": true,
+  "boss": false,
   "debug": false,
   "eqnull": true,
   "moz": false,
@@ -63,6 +63,7 @@
   "worker": false,
   "wsh": false,
   "yui": false,
+  "maxlen": 120,
   "predef": [
     "d3",
     "d3.tip"

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,8 +36,29 @@
 * Added the ability to not pass in thresholds and all the blocks be the same color.
 * Right aligned the parent labels.
 
-# 1.5.0 (5/26/2016-)
-* Updated .travis.yml to also build with node 6.
+# 1.5.0 (5/26/2016 - 6/12/2016)
 * Created a non-minified js file in dest using grunt-contrib-concat.
 * Added a test to check the colors of the blocks to make sure they're correct.
-* Rewrote source in es6 and added Babel to convert it back to es5 until es6 is supported more.
+* Made the comparison between the value and the threshold case insensitive, added type checking for the threshold comparisons, and made sure that the key appears in title case when the tooltip comes up.
+* Fixed a bug where clicking `Random` twice (or more) on example page causes the demo to keep cycling.
+* Moved the child nodes five pixels away from the parent labels to make the space larger.
+* Optimized the code by using local variables instead of accessing object properties multiple times and made static functions instead of recreating them in loops.
+* Fixed a bug where the number thresholds had to be exact instead of between two thresholds.
+* Fixed a bug where only the first word in the tooltip key was capitalized instead of the key being in title case.
+* Fixed the regex for numeric comparisons so that it would take negative numbers into account.
+* Added additional tests.
+* Fixed the way that the width of the parent labels was determined and added a cache.
+* Optimized parent labels by storing the keys instead of generating it each time.
+* Added a way to add a custom sort function.
+* Added a way to set a custom string for the `value` key instead of having it always say 'value' on the tooltip.`
+* Added support for private data by using the `_private_` key in the JSON data.
+
+# 2.0.0 (6/12/2016-)
+* Added a way to set the onclick function for a parent label.
+* Cleaned up some of the code.
+* Fixed an SVG width issue where if no data was supplied, the width and height were set to -15, which threw an exception.
+* Fixed a bug where if the tooltip width and height got too big, the arrow wasn't pointing at the child node.
+* Fixed a bug where the width of the SVG was being determined incorrectly.
+* Added a way to not show the value on the tooltip by setting the `valueKeyName` to an empty string.
+* Added a cursor pointer if there is an onClick function.
+* Rewrote the source in ES6 and d3 v4.1.0
diff --git a/README.md b/README.md
@@ -33,10 +33,7 @@ in the directory.
 Since d3.relationshipgraph extends the D3.js framework, it can be easily added to an existing project by adding the following
 
 ```html
-<!-- Add D3.js -->
 <script src="https://d3js.org/d3.v3.min.js"></script>
-
-<!-- Add d3.relationshipgraph.min.js -->
 <script src="path/to/scripts/d3.relationshipgraph.min.js"></script>
 <link type="text/css" rel="stylesheet" href="path/to/css/d3.relationshipgraph.min.css">
 ````
@@ -46,31 +43,65 @@ Once the framework is added to the HTML file, graphs can be created using famili
 ```javascript
 var json = [
         {
-            "Movie Title": "Avatar",
-            "parent": "20th Century Fox",
-            "Value": "$2,787,965,087",
-            "Year": "2009"
+            movietitle: 'Avatar',
+            parent: '20th Century Fox',
+            value: '$2,787,965,087',
+            year: '2009'
         },
         {
-            "Movie Title": "Titanic",
-            "parent": "20th Century Fox",
-            "Value": "$2,186,772,302",
-            "Year": "1997"
+            movietitle: 'Titanic',
+            parent: '20th Century Fox',
+            value: '$2,186,772,302',
+            year: '1997'
         }
     ];
 
 var graph = d3.select('#graph').relationshipGraph({
-    'showTooltips': true,
-    'maxChildCount': 10,
-    'showKeys': false,
-    'thresholds': [1000000000, 2000000000, 3000000000]
+    showTooltips: true,
+    maxChildCount: 10,
+    showKeys: false,
+    thresholds: [1000000000, 2000000000, 3000000000]
 }).data(json);
 ```
 
 This simple code will produce the example at the beginning of the readme.
 
-### Configuration
+### Thresholds
+Thresholds can be `strings` or `numbers`. If you use a `string`, only values that match exactly will be in that threshold. If you use a number, a numeric value will be in the smallest threshold that is greater than the value.
+If the values are `strings` (such as in the example above), the number is extracted from the string and used. This allows you to use string values such as:
+
+```javascript
+var json = [
+    {parent: 'a', value: '$100'},
+    {parent: 'b', value: '$100.15'},
+    {parent: 'c', value: '100%'},
+    {parent: 'd', value: '100.15%'}
+];
+````
+
+and thresholds such as:
+
+```javascript
+var thresholds = [25, 50, 75, 100];
+````
+
+### Private Data
+Private data can be added to the JSON data by using the `_private_` key. This allows you to pass private data into the onClick function that isn't shown in the tooltip.
+
+To use private data, structure your JSON data so that it looks similar to
+
+```javascript
+var myData = {
+    parent: 'parentA',
+    name: 'child1',
+    _private_: {
+        private1: 'Hidden from the tooltip.',
+        private2: 'Also hidden from the tooltip.'
+    }
+}
+```
 
+### Configuration
 d3.relationshipgraph is configured by passing in a JavaScript object into the constructor. The object can have the following properties
 
 ```Javascript
@@ -82,7 +113,9 @@ config = {
     thresholds: [100, 200, 300], // The thresholds for the color changes. If the values are strings, the colors are determined by the value of the child being equal to the threshold. If the thresholds are numbers, the color is determined by the value being less than the threshold.
     colors: ['red', 'green', 'blue'], // The custom color set to use for the child blocks. These can be color names, HEX values, or RGBA values.
     transitionTime: 1000, // The time in milliseconds for the transitions. Set to 0 to disable.
-    truncate: 25 // The maximum length for the parent labels before they get truncated. Set to 0 to disable.
+    truncate: 25, // The maximum length for the parent labels before they get truncated. Set to 0 to disable.
+    sortFunction: sortJson,  // A custom sort function. The parent value must be sorted first.
+    valueKeyName: 'Worldwide Gross'  // Set a custom key value in the tooltip instead of showing 'value'.
 }
 ```
 
@@ -96,56 +129,60 @@ config = {
     showKeys: true,
     thresholds: [], // All chiild blocks will be the same color.
     transitionTime: 1500,
-    truncate: 0
+    truncate: 0,
+    sortFunction: sortJson,
+    valueKeyName: 'value'
 }
 ```
 
+If a custom sorting is used, the `parent` value MUST be sorted first.
+
 ### Updating with New Data
-To update the relationship graph with new data, store the RelationshipGraph object and call the *data* function with the updated JSON
+To update the relationship graph with new data, store the RelationshipGraph object and call the `data` function with the updated JSON
 
 ```Javascript
 var json = [
         {
-            "Movie Title": "Avatar",
-            "parent": "20th Century Fox",
-            "Value": "$2,787,965,087",
-            "Year": "2009"
+            movietitle: 'Avatar',
+            parent: '20th Century Fox',
+            value: '$2,787,965,087',
+            year: '2009'
         },
         {
-            "Movie Title": "Titanic",
-            "parent": "20th Century Fox",
-            "Value": "$2,186,772,302",
-            "Year": "1997"
+            movietitle: 'Titanic',
+            parent: '20th Century Fox',
+            value: '$2,186,772,302',
+            year: '1997'
         }
     ];
 
 var graph = d3.select('#graph').relationshipGraph({
-    'showTooltips': true,
-    'maxChildCount': 10,
-    'showKeys': false,
-    'thresholds': [1000000000, 2000000000, 3000000000]
+    showTooltips: true,
+    maxChildCount: 10,
+    showKeys: false,
+    thresholds: [1000000000, 2000000000, 3000000000]
 });
 
 graph.data(json);  // Add the first set of data.
 
 json = [
         {
-            "Movie Title": "Avatar",
-            "parent": "20th Century Fox",
-            "Value": "$2,787,965,087",
-            "Year": "2009"
+            movietitle: 'Avatar',
+            parent: '20th Century Fox',
+            value: '$2,787,965,087',
+            year: '2009'
         },
         {
-            "Movie Title": "Titanic",
-            "parent": "20th Century Fox",
-            "Value": "$2,186,772,302",
-            "Year": "1997"
+            movietitle: 'Titanic',
+            parent: '20th Century Fox',
+            value: '$2,186,772,302',
+            year: '1997'
         },
         {
-            "Movie Title": "Star Wars: The Force Awakens",
-            "parent": "Walt Disney Studios",
-            "Value": "$2,066,247,462",
-            "Year": "2015"
+            movietitle: 'Star Wars: The Force Awakens',
+            parent: 'Walt Disney Studios',
+            value: '$2,066,247,462',
+            year: '2015'
         }
    ];
 

diff --git a/bower.json b/bower.json
@@ -16,7 +16,7 @@
     "grunt-contrib-cssmin": "^1.0.1",
     "grunt-contrib-jshint": "^1.0.0",
     "grunt-contrib-uglify": "^1.0.1",
-    "grunt-jscs": "^2.8.0",
+    "grunt-jscs": "^3.0.0",
     "grunt-mocha": "^1.0.2"
   },
   "version": "2.0.0",