Skip to content

nodeHeight as a function #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RassaLibre wants to merge 8 commits into
base: dev
Choose a base branch
from
Open

nodeHeight as a function #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e1e7b58
nodeHeight can now be a function
Mar 23, 2016
6a665aa
docs, tests, no console.logs
Mar 23, 2016
f545b8f
additional tests
Mar 23, 2016
e40cf70
Merge pull request #1 from RassaLibre/master
RassaLibre Mar 23, 2016
66e09e1
cleanup
Mar 23, 2016
c12dcc7
removing the type check from functor
Mar 24, 2016
83413bf
fixing unit tests
Mar 24, 2016
7d81c68
node as a param instead of nodeData
Mar 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ How about making the labels push each other and find where they can stay with ov
[left](http://twitter.github.io/labella.js/basic_left.html) |
[right](http://twitter.github.io/labella.js/basic_right.html) |
[with text (v)](http://twitter.github.io/labella.js/with_text.html) |
[with text (h)](http://twitter.github.io/labella.js/with_text2.html)
[with text (h)](http://twitter.github.io/labella.js/with_text2.html) |
[with flex height](http://twitter.github.io/labella.js/with_flex_height.html)
* Read the instructions on this page or API reference.

Moreover, if you are looking for a ready-to-use timeline component with Labella's smart labeling instead of building your own timeline from scratch, check out [d3Kit-timeline](https://github.com/kristw/d3kit-timeline).
Expand Down
81 changes: 61 additions & 20 deletions dist/labella-extra.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ return /******/ (function(modules) { // webpackBootstrap

// return negative if overlap


_createClass(Node, [{
key: 'distanceFrom',
value: function distanceFrom(node) {
Expand Down Expand Up @@ -546,6 +547,11 @@ return /******/ (function(modules) { // webpackBootstrap
return array.map(accessor).reduce(function (prev, current) {
return prev + current;
}, 0);
},
functor: function functor(v) {
return typeof v === "function" ? v : function () {
return v;
};
}
};

Expand Down Expand Up @@ -1821,10 +1827,12 @@ return /******/ (function(modules) { // webpackBootstrap

var helper = __webpack_require__(4);

var DEFAULT_NODE_HEIGHT = 10;

function Renderer(options) {
this.options = helper.extend({
layerGap: 60,
nodeHeight: 10,
nodeHeight: DEFAULT_NODE_HEIGHT,
direction: 'down'
}, options);
}
Expand Down Expand Up @@ -1859,75 +1867,108 @@ return /******/ (function(modules) { // webpackBootstrap

Renderer.prototype.getWaypoints = function (node) {
var options = this.options;
var nodeHeight = helper.functor(options.nodeHeight)(node.data);
var direction = options.direction;

var hops = node.getPathFromRoot();
var gap = options.nodeHeight + options.layerGap;
var gap = nodeHeight + options.layerGap;

if (direction === 'left') {
return [[[0, hops[0].idealPos]]].concat(hops.map(function (hop, level) {
var xPos = gap * (level + 1) * -1;
return [[xPos + options.nodeHeight, hop.currentPos], [xPos, hop.currentPos]];
return [[xPos + nodeHeight, hop.currentPos], [xPos, hop.currentPos]];
}));
} else if (direction === 'right') {
return [[[0, hops[0].idealPos]]].concat(hops.map(function (hop, level) {
var xPos = gap * (level + 1);
return [[xPos - options.nodeHeight, hop.currentPos], [xPos, hop.currentPos]];
return [[xPos - nodeHeight, hop.currentPos], [xPos, hop.currentPos]];
}));
} else if (direction === 'up') {
return [[[hops[0].idealPos, 0]]].concat(hops.map(function (hop, level) {
var yPos = gap * (level + 1) * -1;
return [[hop.currentPos, yPos + options.nodeHeight], [hop.currentPos, yPos]];
return [[hop.currentPos, yPos + nodeHeight], [hop.currentPos, yPos]];
}));
} else {
return [[[hops[0].idealPos, 0]]].concat(hops.map(function (hop, level) {
var yPos = gap * (level + 1);
return [[hop.currentPos, yPos - options.nodeHeight], [hop.currentPos, yPos]];
return [[hop.currentPos, yPos - nodeHeight], [hop.currentPos, yPos]];
}));
}
};

Renderer.prototype.layout = function (nodes) {
var options = this.options;

var nodeHeightFn = helper.functor(options.nodeHeight);
if (typeof options.nodeHeight === 'function') {
var gaps = [];
nodes.forEach(function (node, index) {
gaps[index] = options.layerGap + options.nodeHeight(node.data);
});
}

var gap = options.layerGap + options.nodeHeight;

switch (options.direction) {
case 'left':
nodes.forEach(function (node) {
var pos = node.getLayerIndex() * gap + options.layerGap;
node.x = -pos - options.nodeHeight;
nodes.forEach(function (node, index) {
var pos = 0;
if (gaps) {
//if the nodeHeight is a function
pos = node.getLayerIndex() * gaps[index] + options.layerGap;
} else {
pos = node.getLayerIndex() * gap + options.layerGap;
}
node.x = -pos - nodeHeightFn(node.data);
node.y = node.currentPos;
node.dx = options.nodeHeight;
node.dx = nodeHeightFn(node.data);
node.dy = node.width;
});
break;
case 'right':
nodes.forEach(function (node) {
var pos = node.getLayerIndex() * gap + options.layerGap;
nodes.forEach(function (node, index) {
var pos = 0;
if (gaps) {
//if the nodeHeight is a function
pos = node.getLayerIndex() * gaps[index] + options.layerGap;
} else {
pos = node.getLayerIndex() * gap + options.layerGap;
}
node.x = pos;
node.y = node.currentPos;
node.dx = options.nodeHeight;
node.dx = nodeHeightFn(node.data);
node.dy = node.width;
});
break;
case 'up':
nodes.forEach(function (node) {
var pos = node.getLayerIndex() * gap + options.layerGap;
nodes.forEach(function (node, index) {
var pos = 0;
if (gaps) {
//if the nodeHeight is a function
pos = node.getLayerIndex() * gaps[index] + options.layerGap;
} else {
pos = node.getLayerIndex() * gap + options.layerGap;
}
node.x = node.currentPos;
node.y = -pos - options.nodeHeight;
node.y = -pos - nodeHeightFn(node.data);
node.dx = node.width;
node.dy = options.nodeHeight;
node.dy = nodeHeightFn(node.data);
});
break;
default:
case 'down':
nodes.forEach(function (node) {
var pos = node.getLayerIndex() * gap + options.layerGap;
nodes.forEach(function (node, index) {
var pos = 0;
if (gaps) {
//if the nodeHeight is a function
pos = node.getLayerIndex() * gaps[index] + options.layerGap;
} else {
pos = node.getLayerIndex() * gap + options.layerGap;
}
node.x = node.currentPos;
node.y = pos;
node.dx = node.width;
node.dy = options.nodeHeight;
node.dy = nodeHeightFn(node.data);
});
break;
}
Expand Down
2 changes: 1 addition & 1 deletion dist/labella-extra.min.js
View file
Open in desktop

Large diffs are not rendered by default.

81 changes: 61 additions & 20 deletions dist/labella.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ return /******/ (function(modules) { // webpackBootstrap

// return negative if overlap


_createClass(Node, [{
key: 'distanceFrom',
value: function distanceFrom(node) {
Expand Down Expand Up @@ -543,6 +544,11 @@ return /******/ (function(modules) { // webpackBootstrap
return array.map(accessor).reduce(function (prev, current) {
return prev + current;
}, 0);
},
functor: function functor(v) {
return typeof v === "function" ? v : function () {
return v;
};
}
};

Expand Down Expand Up @@ -1818,10 +1824,12 @@ return /******/ (function(modules) { // webpackBootstrap

var helper = __webpack_require__(4);

var DEFAULT_NODE_HEIGHT = 10;

function Renderer(options) {
this.options = helper.extend({
layerGap: 60,
nodeHeight: 10,
nodeHeight: DEFAULT_NODE_HEIGHT,
direction: 'down'
}, options);
}
Expand Down Expand Up @@ -1856,75 +1864,108 @@ return /******/ (function(modules) { // webpackBootstrap

Renderer.prototype.getWaypoints = function (node) {
var options = this.options;
var nodeHeight = helper.functor(options.nodeHeight)(node);
var direction = options.direction;

var hops = node.getPathFromRoot();
var gap = options.nodeHeight + options.layerGap;
var gap = nodeHeight + options.layerGap;

if (direction === 'left') {
return [[[0, hops[0].idealPos]]].concat(hops.map(function (hop, level) {
var xPos = gap * (level + 1) * -1;
return [[xPos + options.nodeHeight, hop.currentPos], [xPos, hop.currentPos]];
return [[xPos + nodeHeight, hop.currentPos], [xPos, hop.currentPos]];
}));
} else if (direction === 'right') {
return [[[0, hops[0].idealPos]]].concat(hops.map(function (hop, level) {
var xPos = gap * (level + 1);
return [[xPos - options.nodeHeight, hop.currentPos], [xPos, hop.currentPos]];
return [[xPos - nodeHeight, hop.currentPos], [xPos, hop.currentPos]];
}));
} else if (direction === 'up') {
return [[[hops[0].idealPos, 0]]].concat(hops.map(function (hop, level) {
var yPos = gap * (level + 1) * -1;
return [[hop.currentPos, yPos + options.nodeHeight], [hop.currentPos, yPos]];
return [[hop.currentPos, yPos + nodeHeight], [hop.currentPos, yPos]];
}));
} else {
return [[[hops[0].idealPos, 0]]].concat(hops.map(function (hop, level) {
var yPos = gap * (level + 1);
return [[hop.currentPos, yPos - options.nodeHeight], [hop.currentPos, yPos]];
return [[hop.currentPos, yPos - nodeHeight], [hop.currentPos, yPos]];
}));
}
};

Renderer.prototype.layout = function (nodes) {
var options = this.options;

var nodeHeightFn = helper.functor(options.nodeHeight);
if (typeof options.nodeHeight === 'function') {
var gaps = [];
nodes.forEach(function (node, index) {
gaps[index] = options.layerGap + options.nodeHeight(node);
});
}

var gap = options.layerGap + options.nodeHeight;

switch (options.direction) {
case 'left':
nodes.forEach(function (node) {
var pos = node.getLayerIndex() * gap + options.layerGap;
node.x = -pos - options.nodeHeight;
nodes.forEach(function (node, index) {
var pos = 0;
if (gaps) {
//if the nodeHeight is a function
pos = node.getLayerIndex() * gaps[index] + options.layerGap;
} else {
pos = node.getLayerIndex() * gap + options.layerGap;
}
node.x = -pos - nodeHeightFn(node);
node.y = node.currentPos;
node.dx = options.nodeHeight;
node.dx = nodeHeightFn(node);
node.dy = node.width;
});
break;
case 'right':
nodes.forEach(function (node) {
var pos = node.getLayerIndex() * gap + options.layerGap;
nodes.forEach(function (node, index) {
var pos = 0;
if (gaps) {
//if the nodeHeight is a function
pos = node.getLayerIndex() * gaps[index] + options.layerGap;
} else {
pos = node.getLayerIndex() * gap + options.layerGap;
}
node.x = pos;
node.y = node.currentPos;
node.dx = options.nodeHeight;
node.dx = nodeHeightFn(node);
node.dy = node.width;
});
break;
case 'up':
nodes.forEach(function (node) {
var pos = node.getLayerIndex() * gap + options.layerGap;
nodes.forEach(function (node, index) {
var pos = 0;
if (gaps) {
//if the nodeHeight is a function
pos = node.getLayerIndex() * gaps[index] + options.layerGap;
} else {
pos = node.getLayerIndex() * gap + options.layerGap;
}
node.x = node.currentPos;
node.y = -pos - options.nodeHeight;
node.y = -pos - nodeHeightFn(node);
node.dx = node.width;
node.dy = options.nodeHeight;
node.dy = nodeHeightFn(node);
});
break;
default:
case 'down':
nodes.forEach(function (node) {
var pos = node.getLayerIndex() * gap + options.layerGap;
nodes.forEach(function (node, index) {
var pos = 0;
if (gaps) {
//if the nodeHeight is a function
pos = node.getLayerIndex() * gaps[index] + options.layerGap;
} else {
pos = node.getLayerIndex() * gap + options.layerGap;
}
node.x = node.currentPos;
node.y = pos;
node.dx = node.width;
node.dy = options.nodeHeight;
node.dy = nodeHeightFn(node);
});
break;
}
Expand Down
2 changes: 1 addition & 1 deletion dist/labella.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/Renderer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ There are a few options that you can customize when creating a renderer.
| option | default | description |
| ------- | ------- | ----------- |
| layerGap | 60 | gap between layer of labels |
| nodeHeight | 12 | For horizontal axis, this is the height of each label. For vertical axis, this is the width of each label. |
| nodeHeight | 12 | For horizontal axis, this is the height of each label. For vertical axis, this is the width of each label. You can also pass a function with a node as a parameter. This function MUST return a number. This can be useful for example when you want your nodes to have a different height based on the content. |
| direction | 'down' | placement of the label relative to the axis. Choose from ```'up'```, ```'down'```, ```'left'``` or ```'right'```. Use ```'left'``` or ```'right'``` for vertical axis and ```'up'``` or ```'down'``` for horizontal axis. See [example](http://twitter.github.io/labella.js/basic_down.html).|

### Functions
Expand Down
3 changes: 2 additions & 1 deletion examples/basic_down.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ <h2>Labels should be beautiful.</h2>
<a href="basic_left.html">left</a> |
<a href="basic_right.html">right</a> |
<a href="with_text.html">with text (v)</a> |
<a href="with_text2.html">with text (h)</a>
<a href="with_text2.html">with text (h)</a> |
<a href="with_flex_height.html">with flex height</a>
</p>
<p>
Please
Expand Down
3 changes: 2 additions & 1 deletion examples/basic_left.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ <h2>Labels should be beautiful.</h2>
left |
<a href="basic_right.html">right</a> |
<a href="with_text.html">with text (v)</a> |
<a href="with_text2.html">with text (h)</a>
<a href="with_text2.html">with text (h)</a> |
<a href="with_flex_height.html">with flex height</a>
</p>
<p>
Please
Expand Down
3 changes: 2 additions & 1 deletion examples/basic_right.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ <h2>Labels should be beautiful.</h2>
<a href="basic_left.html">left</a> |
right |
<a href="with_text.html">with text (v)</a> |
<a href="with_text2.html">with text (h)</a>
<a href="with_text2.html">with text (h)</a> |
<a href="with_flex_height.html">with flex height</a>
</p>
<p>
Please
Expand Down
3 changes: 2 additions & 1 deletion examples/basic_up.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ <h2>Labels should be beautiful.</h2>
<a href="basic_left.html">left</a> |
<a href="basic_right.html">right</a> |
<a href="with_text.html">with text (v)</a> |
<a href="with_text2.html">with text (h)</a>
<a href="with_text2.html">with text (h)</a> |
<a href="with_flex_height.html">with flex height</a>
</p>
<p>
Please
Expand Down
Loading