Skip to content
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

Jump to bottom

More granular resolution of node and link parameters #166

Merged
merged 7 commits into from
Jan 25, 2019
Merged

More granular resolution of node and link parameters #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
912be8c
* node level setting for opacity and strokeWidth
Jan 17, 2019
e949b61
* add eyeglasses to config for node opacity and strokeWidth
Jan 17, 2019
f8596d9
add prepare script so npm can install from github
Jan 17, 2019
4e55854
pass linting
Jan 17, 2019
0076c91
Update for code review:
Jan 22, 2019
b7d5e23
add eyeglasses to link.strokeWidth
Jan 22, 2019
47f190c
remove prepare script
Jan 23, 2019
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
14 changes: 10 additions & 4 deletions src/components/graph/graph.builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function _getNodeOpacity(node, highlightedNode, highlightedLink, config) {
} else if (someNodeHighlighted) {
opacity = highlight ? config.node.opacity : config.highlightOpacity;
} else {
opacity = config.node.opacity;
opacity = node.opacity || config.node.opacity;
}

return opacity;
Expand Down Expand Up @@ -81,7 +81,7 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
target === (highlightedLink && highlightedLink.target);
const highlight = reasonNode || reasonLink;

let opacity = config.link.opacity;
let opacity = link.opacity || config.link.opacity;

if (highlightedNode || (highlightedLink && highlightedLink.source)) {
opacity = highlight ? config.link.opacity : config.highlightOpacity;
Expand All @@ -93,7 +93,7 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
stroke = config.link.highlightColor === CONST.KEYWORDS.SAME ? config.link.color : config.link.highlightColor;
}

let strokeWidth = config.link.strokeWidth * (1 / transform);
let strokeWidth = (link.strokeWidth || config.link.strokeWidth) * (1 / transform);

if (config.link.semanticStrokeWidth) {
const linkValue = links[source][target] || links[target][source] || 1;
Expand Down Expand Up @@ -137,6 +137,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
(node.id === (highlightedLink && highlightedLink.source) ||
node.id === (highlightedLink && highlightedLink.target));
const opacity = _getNodeOpacity(node, highlightedNode, highlightedLink, config);

let fill = node.color || config.node.color;

if (highlight && config.node.highlightColor !== CONST.KEYWORDS.SAME) {
Expand All @@ -155,11 +156,16 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
label = config.node.labelProperty(node);
}

let strokeWidth = node.strokeWidth || config.node.strokeWidth;

if (highlight && config.node.highlightStrokeWidth !== CONST.KEYWORDS.SAME) {
strokeWidth = config.node.highlightStrokeWidth;
}

const t = 1 / transform;
const nodeSize = node.size || config.node.size;
const fontSize = highlight ? config.node.highlightFontSize : config.node.fontSize;
const dx = fontSize * t + nodeSize / 100 + 1.5;
const strokeWidth = highlight ? config.node.highlightStrokeWidth : config.node.strokeWidth;
sauln marked this conversation as resolved.
Show resolved Hide resolved
const svg = node.svg || config.node.svg;
const fontColor = node.fontColor || config.node.fontColor;

Expand Down
12 changes: 6 additions & 6 deletions src/components/graph/graph.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
* @param {number} [node.highlightFontSize=8] - fontSize in highlighted state.
* @param {string} [node.highlightFontWeight='normal'] - fontWeight in highlighted state.
* @param {string} [node.highlightStrokeColor='SAME'] - strokeColor in highlighted state.
* @param {number} [node.highlightStrokeWidth=1.5] - strokeWidth in highlighted state.
* @param {number} [node.highlightStrokeWidth='SAME'] - strokeWidth in highlighted state.
* @param {string|Function} [node.labelProperty='id'] - this is the node property that will be used in runtime to
* fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set
* node.labelProperty to be **'firstName'**. **This can also be a function!**, if you pass a function here it will be called
Expand All @@ -123,12 +123,12 @@
* <br/>
* @param {string} [node.mouseCursor='pointer'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
* property for when some node is mouse hovered.
* @param {number} [node.opacity=1] - by default all nodes will have this opacity value.
* @param {number} [node.opacity=1] 🔍🔍🔍 - by default all nodes will have this opacity value.
* @param {boolean} [node.renderLabel=true] - when set to false no labels will appear along side nodes in the
* graph.
* @param {number} [node.size=200] - 🔍🔍🔍 defines the size of all nodes.
* @param {string} [node.strokeColor='none'] - 🔍🔍🔍 this is the stroke color that will be applied to the node if no **strokeColor property** is found inside the node itself (yes **you can pass a property 'strokeColor' inside the node and that stroke color will override this default one** ).
* @param {number} [node.strokeWidth=1.5] - the width of the all node strokes.
* @param {number} [node.strokeWidth=1.5] 🔍🔍🔍 - the width of the all node strokes.
* @param {string} [node.svg=''] - 🔍🔍🔍 render custom svg for nodes in alternative to **node.symbolType**. This svg can
* be provided as a string to either a remote svg resource or for a local one.
* <br/>
Expand All @@ -154,14 +154,14 @@
* <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
* @param {string} [link.mouseCursor='pointer'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
* property for when link is mouse hovered.
* @param {number} [link.opacity=1] - the default opacity value for links.
* @param {number} [link.opacity=1] 🔍🔍🔍 - the default opacity value for links.
* @param {boolean} [link.semanticStrokeWidth=false] - when set to true all links will have
* *"semantic width"*, this means that the width of the connections will be proportional to the value of each link.
* This is how link strokeWidth will be calculated:
* ```javascript
* strokeWidth += (linkValue * strokeWidth) / 10;
* ```
* @param {number} [link.strokeWidth=1.5] - strokeWidth for all links. By default the actual value is obtain by the
* @param {number} [link.strokeWidth=1.5] 🔍🔍🔍 - strokeWidth for all links. By default the actual value is obtain by the
* following expression:
* ```javascript
* link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value
Expand Down Expand Up @@ -219,7 +219,7 @@ export default {
highlightFontSize: 8,
highlightFontWeight: "normal",
highlightStrokeColor: "SAME",
highlightStrokeWidth: 1.5,
highlightStrokeWidth: "SAME",
labelProperty: "id",
mouseCursor: "pointer",
opacity: 1,
Expand Down