Merge pull request #98 from yldio/architecture-react-d3
Architecture react d3
This commit is contained in:
Sérgio Ramos
GitHub
commit
174aec625e
4
spikes/architecture/d3-revamp/README.md
Normal file
4
spikes/architecture/d3-revamp/README.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
# Example
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
448
spikes/architecture/d3-revamp/index.html
Normal file
448
spikes/architecture/d3-revamp/index.html
Normal file
@ -0,0 +1,448 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset='utf-8'>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.links line {
|
||||||
|
stroke: #343434;
|
||||||
|
stroke-opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health, .health_warn {
|
||||||
|
font-family: LibreFranklin;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health_warn {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
font-family: LibreFranklin;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node_statistics {
|
||||||
|
font-family: LibreFranklin;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node_statistics p {
|
||||||
|
margin: 0 0 0 0;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary, .secondary {
|
||||||
|
font-family: LibreFranklin;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<svg width='960' height='700'></svg>
|
||||||
|
<script src='https://d3js.org/d3.v4.min.js'></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var svg = d3.select('svg'),
|
||||||
|
width = +svg.attr('width'),
|
||||||
|
height = +svg.attr('height');
|
||||||
|
|
||||||
|
var color = d3.scaleOrdinal(d3.schemeCategory20);
|
||||||
|
|
||||||
|
var simulation = d3.forceSimulation()
|
||||||
|
.force('charge', d3.forceManyBody().strength(() => -50).distanceMin(() => 30))
|
||||||
|
.force('link', d3.forceLink().distance(() => 200).id(function(d) { return d.id; }))
|
||||||
|
.force('collide', d3.forceCollide().radius(function(d) { return 200 + 0.5; }).iterations(2))
|
||||||
|
.force('center', d3.forceCenter(width * 1/3, height * 1/3))
|
||||||
|
|
||||||
|
function rightRoundedRect(x, y, width, height, radius) {
|
||||||
|
return 'M' + x + ',' + y // Move to top left (absolute)
|
||||||
|
+ 'h ' + (width - radius) // Horizontal line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
|
||||||
|
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
|
||||||
|
+ 'h ' + (radius - width) // Horizontal lint to (relative)
|
||||||
|
+ 'z '; // path back to start
|
||||||
|
}
|
||||||
|
|
||||||
|
function leftRoundedRect(x, y, width, height, radius) {
|
||||||
|
return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
|
||||||
|
+ 'v ' + height // Vertical line to (relative)
|
||||||
|
+ 'h ' + (radius - width) // Horizontal line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
|
||||||
|
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
|
||||||
|
+ 'z '; // path back to start
|
||||||
|
}
|
||||||
|
|
||||||
|
function topRoundedRect(x, y, width, height, radius) {
|
||||||
|
return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-right
|
||||||
|
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arc
|
||||||
|
+ 'h ' + -(radius - width) // Horizontal line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
|
||||||
|
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'h ' + (radius - width) // Horizontal line to (relative)
|
||||||
|
+ 'z '; // path back to start
|
||||||
|
}
|
||||||
|
|
||||||
|
function bottomRoundedRect(x, y, width, height, radius) {
|
||||||
|
return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-right
|
||||||
|
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'h ' + (radius + width) // Horizontal line to (relative)
|
||||||
|
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'a ' + -radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arc
|
||||||
|
+ 'h ' + (radius - width) // Horizontal line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
|
||||||
|
+ 'z '; // path back to start
|
||||||
|
}
|
||||||
|
|
||||||
|
function rect(x, y, width, height, radius) {
|
||||||
|
return 'M' + x + ',' + -(y - height - 2 * radius) // Move to (absolute) start at bottom-right
|
||||||
|
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'h ' + (width + radius + 2) // Horizontal line to (relative)
|
||||||
|
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'h ' + (radius - width) // Horizontal line to (relative)
|
||||||
|
+ 'z '; // path back to start
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
d3.json('services.json', function(error, graph) {
|
||||||
|
if (error) throw error;
|
||||||
|
|
||||||
|
function createNode(elm) {
|
||||||
|
// Box where label will live
|
||||||
|
elm.append('path')
|
||||||
|
.attr('class', 'node')
|
||||||
|
.attr('d', topRoundedRect('0', '0', 170, 47, 4))
|
||||||
|
.attr('stroke', '#343434')
|
||||||
|
.attr('stroke-width', '1px')
|
||||||
|
.attr('fill', '#464646')
|
||||||
|
|
||||||
|
// Hover-over text for a node's label.
|
||||||
|
var text = elm.append('g')
|
||||||
|
|
||||||
|
text.append('text')
|
||||||
|
.attr('class', 'info_text')
|
||||||
|
.attr('x', '12')
|
||||||
|
.attr('y', '30')
|
||||||
|
.attr('text-anchor', 'start')
|
||||||
|
.attr('fill', '#fff')
|
||||||
|
.text(d => d.id)
|
||||||
|
|
||||||
|
text.append('circle')
|
||||||
|
.attr('class', 'alert')
|
||||||
|
.attr('cx', function () { return d3.select(this.parentNode).select('.info_text').node().getBBox().width + 30 })
|
||||||
|
.attr('cy', '24')
|
||||||
|
.attr('stroke-width', '0px')
|
||||||
|
.attr('fill', (d) => d.id == 'Memcached' ? 'rgb(217, 77, 68)' : 'rgb(0,175,102)')
|
||||||
|
.attr('r', '9px')
|
||||||
|
|
||||||
|
// An icon or label that exists within the circle, inside the infobox
|
||||||
|
text.append('text')
|
||||||
|
.attr('class', 'health')
|
||||||
|
.attr('x', function () { return d3.select(this.parentNode).select('.info_text').node().getBBox().width + 30 })
|
||||||
|
.attr('y', '29')
|
||||||
|
.attr('text-anchor', 'middle')
|
||||||
|
.attr('fill', '#fff')
|
||||||
|
.text((d) => d.id == 'Memcached' ? '!' : '❤')
|
||||||
|
|
||||||
|
// Box where stats will live
|
||||||
|
var stats = elm.append('g');
|
||||||
|
|
||||||
|
stats.append('path')
|
||||||
|
.attr('class', 'node')
|
||||||
|
.attr('d', (d) => d.id == 'Percona' ? rect('0', '-39', 170, 78, 2) : bottomRoundedRect('0', '-39', 170, 78, 4))
|
||||||
|
.attr('stroke', '#343434')
|
||||||
|
.attr('stroke-width', '1px')
|
||||||
|
.attr('fill', '#464646')
|
||||||
|
|
||||||
|
var html = stats
|
||||||
|
.append('switch')
|
||||||
|
.append('foreignObject')
|
||||||
|
.attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
|
||||||
|
.attr('x', 12)
|
||||||
|
.attr('y', 57)
|
||||||
|
.attr('width', 160)
|
||||||
|
.attr('height', 70)
|
||||||
|
// From here everything will be rendered with react using a ref.
|
||||||
|
// However for now these values are hard-coded.
|
||||||
|
.append('xhtml:div')
|
||||||
|
.attr('class', 'node_statistics')
|
||||||
|
|
||||||
|
// Remove with react + dyanmic data.
|
||||||
|
html.append('p')
|
||||||
|
.text('CPU: 48%')
|
||||||
|
html.append('p')
|
||||||
|
.text('Memory: 54%')
|
||||||
|
html.append('p')
|
||||||
|
.text('Network: 1.75kb/sec')
|
||||||
|
|
||||||
|
|
||||||
|
elm.call(d3.drag()
|
||||||
|
.on('start', dragstarted)
|
||||||
|
.on('drag', dragged)
|
||||||
|
.on('end', dragended));
|
||||||
|
|
||||||
|
elm.append('title')
|
||||||
|
.text(function(d) { return d.id; });
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function createExtendedNode(elm) {
|
||||||
|
elm.append('path')
|
||||||
|
.attr('class', 'node')
|
||||||
|
.attr('d', topRoundedRect('0', '0', 170, 47, 4))
|
||||||
|
.attr('stroke', '#343434')
|
||||||
|
.attr('stroke-width', '1px')
|
||||||
|
.attr('fill', '#464646')
|
||||||
|
|
||||||
|
// Hover-over text for a node's label.
|
||||||
|
var text = elm.append('g')
|
||||||
|
|
||||||
|
text.append('text')
|
||||||
|
.attr('class', 'info_text')
|
||||||
|
.attr('x', '12')
|
||||||
|
.attr('y', '30')
|
||||||
|
.attr('text-anchor', 'start')
|
||||||
|
.attr('fill', '#fff')
|
||||||
|
.text(d => d.id)
|
||||||
|
|
||||||
|
// Box where stats will live
|
||||||
|
var stats = elm.append('g');
|
||||||
|
var primary = stats.append('g')
|
||||||
|
|
||||||
|
primary.append('path')
|
||||||
|
.attr('class', 'node')
|
||||||
|
.attr('d', rect('0', '-39', 170, 114, 2))
|
||||||
|
.attr('stroke', '#343434')
|
||||||
|
.attr('stroke-width', '1px')
|
||||||
|
.attr('fill', '#464646')
|
||||||
|
|
||||||
|
primary.append('text')
|
||||||
|
.attr('class', 'primary')
|
||||||
|
.attr('x', '12')
|
||||||
|
.attr('y', '70')
|
||||||
|
.attr('text-anchor', 'start')
|
||||||
|
.attr('fill', '#fff')
|
||||||
|
.text('Primary')
|
||||||
|
|
||||||
|
primary.append('circle')
|
||||||
|
.attr('class', 'alert')
|
||||||
|
.attr('cx', function () { return d3.select(this.parentNode).select('.primary').node().getBBox().width + 30 })
|
||||||
|
.attr('cy', '64')
|
||||||
|
.attr('stroke-width', '0px')
|
||||||
|
.attr('fill', 'rgb(227, 130, 0)')
|
||||||
|
.attr('r', '9px')
|
||||||
|
|
||||||
|
// An icon or label that exists within the circle, inside the infobox
|
||||||
|
primary.append('text')
|
||||||
|
.attr('class', 'health_warn')
|
||||||
|
.attr('x', function () { return d3.select(this.parentNode).select('.primary').node().getBBox().width + 30 })
|
||||||
|
.attr('y', '69')
|
||||||
|
.attr('text-anchor', 'middle')
|
||||||
|
.attr('fill', '#fff')
|
||||||
|
.text('☇')
|
||||||
|
|
||||||
|
var html = primary
|
||||||
|
.append('switch')
|
||||||
|
.append('foreignObject')
|
||||||
|
.attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
|
||||||
|
.attr('x', 12)
|
||||||
|
.attr('y', 87)
|
||||||
|
.attr('width', 160)
|
||||||
|
.attr('height', 70)
|
||||||
|
// From here everything will be rendered with react using a ref.
|
||||||
|
// However for now these values are hard-coded.
|
||||||
|
.append('xhtml:div')
|
||||||
|
.attr('class', 'node_statistics')
|
||||||
|
|
||||||
|
// Remove with react + dyanmic data.
|
||||||
|
html.append('p')
|
||||||
|
.text('CPU: 48%')
|
||||||
|
html.append('p')
|
||||||
|
.text('Memory: 54%')
|
||||||
|
html.append('p')
|
||||||
|
.text('Network: 1.75kb/sec')
|
||||||
|
|
||||||
|
var secondary = stats.append('g');
|
||||||
|
|
||||||
|
secondary.append('path')
|
||||||
|
.attr('class', 'node')
|
||||||
|
.attr('d', bottomRoundedRect('0', '-149', 170, 114, 4))
|
||||||
|
.attr('stroke', '#343434')
|
||||||
|
.attr('stroke-width', '1px')
|
||||||
|
.attr('fill', '#464646')
|
||||||
|
|
||||||
|
secondary.append('text')
|
||||||
|
.attr('class', 'secondary')
|
||||||
|
.attr('x', '12')
|
||||||
|
.attr('y', '183')
|
||||||
|
.attr('text-anchor', 'start')
|
||||||
|
.attr('fill', '#fff')
|
||||||
|
.text('Secondary')
|
||||||
|
|
||||||
|
secondary.append('circle')
|
||||||
|
.attr('class', 'alert')
|
||||||
|
.attr('cx', function () { return d3.select(this.parentNode).select('.secondary').node().getBBox().width + 30 })
|
||||||
|
.attr('cy', '177')
|
||||||
|
.attr('stroke-width', '0px')
|
||||||
|
.attr('fill', 'rgb(0,175,102)')
|
||||||
|
.attr('r', '9px')
|
||||||
|
|
||||||
|
// An icon or label that exists within the circle, inside the infobox
|
||||||
|
secondary.append('text')
|
||||||
|
.attr('class', 'health')
|
||||||
|
.attr('x', function () { return d3.select(this.parentNode).select('.secondary').node().getBBox().width + 30 })
|
||||||
|
.attr('y', '182')
|
||||||
|
.attr('text-anchor', 'middle')
|
||||||
|
.attr('fill', '#fff')
|
||||||
|
.text('❤')
|
||||||
|
|
||||||
|
var html = secondary
|
||||||
|
.append('switch')
|
||||||
|
.append('foreignObject')
|
||||||
|
.attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
|
||||||
|
.attr('x', 12)
|
||||||
|
.attr('y', 200)
|
||||||
|
.attr('width', 160)
|
||||||
|
.attr('height', 70)
|
||||||
|
// From here everything will be rendered with react using a ref.
|
||||||
|
// However for now these values are hard-coded.
|
||||||
|
.append('xhtml:div')
|
||||||
|
.attr('class', 'node_statistics')
|
||||||
|
|
||||||
|
// Remove with react + dyanmic data.
|
||||||
|
html.append('p')
|
||||||
|
.text('CPU: 48%')
|
||||||
|
html.append('p')
|
||||||
|
.text('Memory: 54%')
|
||||||
|
html.append('p')
|
||||||
|
.text('Network: 1.75kb/sec')
|
||||||
|
|
||||||
|
elm.call(d3.drag()
|
||||||
|
.on('start', dragstarted)
|
||||||
|
.on('drag', dragged)
|
||||||
|
.on('end', dragended));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Drawing the links between nodes
|
||||||
|
var link = svg.append('g')
|
||||||
|
.attr('class', 'links')
|
||||||
|
.selectAll('line')
|
||||||
|
.data(graph.links)
|
||||||
|
.enter().append('line')
|
||||||
|
.attr('stroke-width', '2px')
|
||||||
|
|
||||||
|
// And svg group, to contain all of the attributes in @antonas' first prototype
|
||||||
|
var node = svg.selectAll('.node')
|
||||||
|
.data(graph.nodes)
|
||||||
|
.enter()
|
||||||
|
.append('g')
|
||||||
|
.attr('class', 'node_group');
|
||||||
|
|
||||||
|
svg.selectAll('.node_group').each(function (d) {
|
||||||
|
// Create different type of node for services with Primaries + Secondaries
|
||||||
|
// We could extend this further to allow us to have as many nested services
|
||||||
|
// as wanted.
|
||||||
|
if (d.id === 'Percona') {
|
||||||
|
createExtendedNode(d3.select(this));
|
||||||
|
} else {
|
||||||
|
createNode(d3.select(this));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
simulation
|
||||||
|
.nodes(graph.nodes)
|
||||||
|
.on('tick', ticked);
|
||||||
|
|
||||||
|
simulation.force('link')
|
||||||
|
.links(graph.links);
|
||||||
|
|
||||||
|
function contrain(dimension, r, z) {
|
||||||
|
return Math.max(0, Math.min(dimension - r, z))
|
||||||
|
}
|
||||||
|
|
||||||
|
function ticked() {
|
||||||
|
// TODO: Remove these values and pull them out of the height of the boxes
|
||||||
|
// that the constraints belong to.
|
||||||
|
r=174
|
||||||
|
r2=270
|
||||||
|
|
||||||
|
link
|
||||||
|
.attr('x1', function(d) {
|
||||||
|
let x;
|
||||||
|
svg.selectAll('.node_group').each(function (_, i) {
|
||||||
|
if (i !== d.source.index) return;
|
||||||
|
x = d3.select(this).node().getBBox().width;
|
||||||
|
});
|
||||||
|
|
||||||
|
return contrain(width, x, d.source.x) + 80;
|
||||||
|
})
|
||||||
|
.attr('y1', function(d) {
|
||||||
|
let y;
|
||||||
|
svg.selectAll('.node_group').each(function (_, i) {
|
||||||
|
if (i !== d.source.index) return;
|
||||||
|
y = d3.select(this).node().getBBox().height;
|
||||||
|
});
|
||||||
|
return contrain(height, y, d.source.y) + 24;
|
||||||
|
})
|
||||||
|
.attr('x2', function(d) {
|
||||||
|
let x;
|
||||||
|
svg.selectAll('.node_group').each(function (_, i) {
|
||||||
|
if (i !== d.target.index) return;
|
||||||
|
x = d3.select(this).node().getBBox().width;
|
||||||
|
});
|
||||||
|
return contrain(width, x, d.target.x) + 80;
|
||||||
|
})
|
||||||
|
.attr('y2', function(d) {
|
||||||
|
let y;
|
||||||
|
svg.selectAll('.node_group').each(function (_, i) {
|
||||||
|
if (i !== d.target.index) return;
|
||||||
|
y = d3.select(this).node().getBBox().height;
|
||||||
|
});
|
||||||
|
return contrain(height, y, d.target.y) + 24;
|
||||||
|
});
|
||||||
|
|
||||||
|
svg.selectAll('.node_group')
|
||||||
|
.attr('transform', function(d) {
|
||||||
|
let x = d3.select(this).node().getBBox().width;
|
||||||
|
let y = d3.select(this).node().getBBox().height;
|
||||||
|
return 'translate(' + contrain(width, x, d.x) + ',' + contrain(height, y, d.y) + ')';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function dragstarted(d) {
|
||||||
|
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
|
||||||
|
d.fx = d.x;
|
||||||
|
d.fy = d.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragged(d) {
|
||||||
|
d.fx = d3.event.x;
|
||||||
|
d.fy = d3.event.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragended(d) {
|
||||||
|
if (!d3.event.active) simulation.alphaTarget(0);
|
||||||
|
d.fx = null;
|
||||||
|
d.fy = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
15
spikes/architecture/d3-revamp/services.json
Normal file
15
spikes/architecture/d3-revamp/services.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"nodes": [
|
||||||
|
{"id": "Nginx", "group": 1},
|
||||||
|
{"id": "Wordpress", "group": 1},
|
||||||
|
{"id": "Memcached", "group": 1},
|
||||||
|
{"id": "Percona", "group": 1},
|
||||||
|
{"id": "NFS", "group": 1}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{"source": "Nginx", "target": "Wordpress", "value": 1},
|
||||||
|
{"source": "Wordpress", "target": "Memcached", "value": 8},
|
||||||
|
{"source": "Wordpress", "target": "NFS", "value": 8},
|
||||||
|
{"source": "Wordpress", "target": "Percona", "value": 8}
|
||||||
|
]
|
||||||
|
}
|
||||||
15
spikes/architecture/react-d3/.babelrc
Normal file
15
spikes/architecture/react-d3/.babelrc
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
"react",
|
||||||
|
"es2015"
|
||||||
|
],
|
||||||
|
"plugins": [
|
||||||
|
["transform-object-rest-spread", {
|
||||||
|
"useBuiltIns": true
|
||||||
|
}],
|
||||||
|
"add-module-exports",
|
||||||
|
"transform-es2015-modules-commonjs",
|
||||||
|
"react-hot-loader/babel"
|
||||||
|
],
|
||||||
|
"sourceMaps": "both"
|
||||||
|
}
|
||||||
3
spikes/architecture/react-d3/.eslintignore
Normal file
3
spikes/architecture/react-d3/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
30
spikes/architecture/react-d3/.eslintrc
Normal file
30
spikes/architecture/react-d3/.eslintrc
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"extends": "semistandard",
|
||||||
|
"parser": "babel-eslint",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 7,
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"jsx": true
|
||||||
|
},
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"babel",
|
||||||
|
"react"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"generator-star-spacing": 0,
|
||||||
|
"babel/generator-star-spacing": 1,
|
||||||
|
"space-before-function-paren": [2, "never"],
|
||||||
|
"react/jsx-uses-react": 2,
|
||||||
|
"react/jsx-uses-vars": 2,
|
||||||
|
"react/react-in-jsx-scope": 2,
|
||||||
|
"object-curly-newline": ["error", {
|
||||||
|
"minProperties": 1
|
||||||
|
}],
|
||||||
|
"sort-vars": ["error", {
|
||||||
|
"ignoreCase": true
|
||||||
|
}],
|
||||||
|
"operator-linebreak": 0
|
||||||
|
}
|
||||||
|
}
|
||||||
4
spikes/architecture/react-d3/.gitignore
vendored
Normal file
4
spikes/architecture/react-d3/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
npm-debug.log
|
||||||
26
spikes/architecture/react-d3/client/graph.js
vendored
Normal file
26
spikes/architecture/react-d3/client/graph.js
vendored
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const React = require('react');
|
||||||
|
const Links = require('./links');
|
||||||
|
const Nodes = require('./nodes');
|
||||||
|
|
||||||
|
const {
|
||||||
|
connect
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
const Component = (props) =>
|
||||||
|
<svg width='960' height='600'>
|
||||||
|
<Links {...props}/>
|
||||||
|
<Nodes {...props}/>
|
||||||
|
</svg>;
|
||||||
|
|
||||||
|
const mapStateToProps = ({
|
||||||
|
data
|
||||||
|
}) => {
|
||||||
|
return {
|
||||||
|
data
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = connect(
|
||||||
|
mapStateToProps
|
||||||
|
)(Component);
|
||||||
18
spikes/architecture/react-d3/client/index.js
vendored
Normal file
18
spikes/architecture/react-d3/client/index.js
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
const ReactDOM = require('react-dom');
|
||||||
|
const React = require('react');
|
||||||
|
const store = require('./store')();
|
||||||
|
|
||||||
|
const render = () => {
|
||||||
|
const Root = require('./root');
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<Root store={store} />,
|
||||||
|
document.getElementById('root')
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
render();
|
||||||
|
|
||||||
|
if (module.hot) {
|
||||||
|
module.hot.accept('./root', render);
|
||||||
|
}
|
||||||
10
spikes/architecture/react-d3/client/links.js
vendored
Normal file
10
spikes/architecture/react-d3/client/links.js
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const renderLines = (props) => {
|
||||||
|
return () => <line strokeWidth={2}></line>;
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = (props) =>
|
||||||
|
<g className='links'>
|
||||||
|
{ props.data.links.map(renderLines()) }
|
||||||
|
</g>;
|
||||||
75
spikes/architecture/react-d3/client/nodes.js
vendored
Normal file
75
spikes/architecture/react-d3/client/nodes.js
vendored
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
function rightRoundedRect(x, y, width, height, radius) {
|
||||||
|
return 'M' + x + ',' + y // Move to (absolute)
|
||||||
|
+ 'h ' + (width - radius) // Horizontal line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
|
||||||
|
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
|
||||||
|
+ 'h ' + (radius - width) // Horizontal lint to (relative)
|
||||||
|
+ 'z '; // path back to start
|
||||||
|
}
|
||||||
|
|
||||||
|
function leftRoundedRect(x, y, width, height, radius) {
|
||||||
|
return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
|
||||||
|
+ 'v ' + height // Vertical line to (relative)
|
||||||
|
+ 'h ' + (radius - width) // Horizontal line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
|
||||||
|
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
|
||||||
|
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
|
||||||
|
+ 'z '; // path back to start
|
||||||
|
}
|
||||||
|
|
||||||
|
const InfoBoxContainer = () =>
|
||||||
|
<g>
|
||||||
|
<path className='node_info'
|
||||||
|
d={leftRoundedRect('0', '0', 48, 48, 4)}
|
||||||
|
stroke='#bc3e35'
|
||||||
|
strokeWidth={1}
|
||||||
|
fill='#d6534a'
|
||||||
|
></path>
|
||||||
|
<path className='node'
|
||||||
|
d={rightRoundedRect('48', '0', 112, 48, 4)}
|
||||||
|
stroke='#343434'
|
||||||
|
strokeWidth={1}
|
||||||
|
fill='#464646'
|
||||||
|
></path>
|
||||||
|
</g>;
|
||||||
|
|
||||||
|
const InfoBoxAlert = () =>
|
||||||
|
<g>
|
||||||
|
<circle className='alert'
|
||||||
|
cx={24}
|
||||||
|
cy={24}
|
||||||
|
strokeWidth={0}
|
||||||
|
fill='#fffff'
|
||||||
|
r={9}
|
||||||
|
></circle>
|
||||||
|
<text className='exclamation'
|
||||||
|
x={24}
|
||||||
|
y={30}
|
||||||
|
textAnchor='middle'
|
||||||
|
fill='#d75148'
|
||||||
|
>{'!'}</text>
|
||||||
|
</g>;
|
||||||
|
|
||||||
|
const InfoBoxText = (props) =>
|
||||||
|
<text className='info_text'
|
||||||
|
x={100}
|
||||||
|
y={30}
|
||||||
|
textAnchor='middle'
|
||||||
|
fill='#fff'
|
||||||
|
>{props.id}</text>;
|
||||||
|
|
||||||
|
module.exports = (props) => (
|
||||||
|
<g className='groups'>
|
||||||
|
{ props.data.nodes.map(node =>
|
||||||
|
<g className='node_group'>
|
||||||
|
<InfoBoxContainer/>
|
||||||
|
<InfoBoxAlert/>
|
||||||
|
<InfoBoxText {...node}/>
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</g>
|
||||||
|
);
|
||||||
21
spikes/architecture/react-d3/client/root.js
vendored
Normal file
21
spikes/architecture/react-d3/client/root.js
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const ReactHotLoader = require('react-hot-loader');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const Graph = require('./graph');
|
||||||
|
|
||||||
|
const {
|
||||||
|
AppContainer
|
||||||
|
} = ReactHotLoader;
|
||||||
|
|
||||||
|
const {
|
||||||
|
Provider
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
module.exports = ({
|
||||||
|
store
|
||||||
|
}) =>
|
||||||
|
<AppContainer>
|
||||||
|
<Provider store={store}>
|
||||||
|
<Graph />
|
||||||
|
</Provider>
|
||||||
|
</AppContainer>;
|
||||||
15
spikes/architecture/react-d3/client/services.json
Normal file
15
spikes/architecture/react-d3/client/services.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"nodes": [
|
||||||
|
{"id": "Nginx", "group": 1},
|
||||||
|
{"id": "Wordpress", "group": 1},
|
||||||
|
{"id": "Memcached", "group": 1},
|
||||||
|
{"id": "Percona", "group": 1},
|
||||||
|
{"id": "NFS", "group": 1}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{"source": "Nginx", "target": "Wordpress", "value": 1},
|
||||||
|
{"source": "Wordpress", "target": "Memcached", "value": 8},
|
||||||
|
{"source": "Wordpress", "target": "NFS", "value": 8},
|
||||||
|
{"source": "Wordpress", "target": "Percona", "value": 8}
|
||||||
|
]
|
||||||
|
}
|
||||||
17
spikes/architecture/react-d3/client/store.js
vendored
Normal file
17
spikes/architecture/react-d3/client/store.js
vendored
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
const redux = require('redux');
|
||||||
|
const services = require('./services');
|
||||||
|
|
||||||
|
const {
|
||||||
|
createStore
|
||||||
|
} = redux;
|
||||||
|
|
||||||
|
const reducer = (state, action) => {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
data: services
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = (state = Object.freeze({})) => {
|
||||||
|
return createStore(reducer, state);
|
||||||
|
};
|
||||||
56
spikes/architecture/react-d3/package.json
Normal file
56
spikes/architecture/react-d3/package.json
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
{
|
||||||
|
"name": "chartjs-graphing-spike",
|
||||||
|
"private": true,
|
||||||
|
"license": "private",
|
||||||
|
"main": "server/index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"autoprefixer": "^6.5.1",
|
||||||
|
"babel-eslint": "^7.0.0",
|
||||||
|
"babel-loader": "^6.2.5",
|
||||||
|
"babel-plugin-add-module-exports": "^0.2.1",
|
||||||
|
"babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
|
||||||
|
"babel-plugin-transform-object-rest-spread": "^6.16.0",
|
||||||
|
"babel-plugin-transform-runtime": "^6.15.0",
|
||||||
|
"babel-preset-es2015": "^6.16.0",
|
||||||
|
"babel-preset-react": "^6.16.0",
|
||||||
|
"babel-preset-react-hmre": "^1.1.1",
|
||||||
|
"babel-runtime": "^6.11.6",
|
||||||
|
"build-array": "^1.0.0",
|
||||||
|
"component-emitter": "^1.2.1",
|
||||||
|
"css-loader": "^0.25.0",
|
||||||
|
"hapi": "^15.2.0",
|
||||||
|
"hapi-webpack-dev-plugin": "^1.1.4",
|
||||||
|
"inert": "^4.0.2",
|
||||||
|
"lodash.takeright": "^4.1.1",
|
||||||
|
"nes": "^6.3.1",
|
||||||
|
"postcss-loader": "^1.0.0",
|
||||||
|
"postcss-modules-values": "^1.2.2",
|
||||||
|
"postcss-nested": "^1.0.0",
|
||||||
|
"react": "^15.3.2",
|
||||||
|
"react-dom": "^15.3.2",
|
||||||
|
"react-hot-loader": "^3.0.0-beta.6",
|
||||||
|
"react-redux": "^4.4.5",
|
||||||
|
"redux": "^3.6.0",
|
||||||
|
"require-dir": "^0.3.1",
|
||||||
|
"style-loader": "^0.13.1",
|
||||||
|
"webpack": "^1.13.2",
|
||||||
|
"webpack-dev-server": "^1.16.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-register": "^6.16.3",
|
||||||
|
"eslint": "^3.8.1",
|
||||||
|
"eslint-config-semistandard": "^7.0.0",
|
||||||
|
"eslint-config-standard": "^6.2.0",
|
||||||
|
"eslint-plugin-babel": "^3.3.0",
|
||||||
|
"eslint-plugin-promise": "^3.3.0",
|
||||||
|
"eslint-plugin-react": "^6.4.1",
|
||||||
|
"eslint-plugin-standard": "^2.0.1",
|
||||||
|
"json-loader": "^0.5.4"
|
||||||
|
},
|
||||||
|
"ava": {
|
||||||
|
"require": [
|
||||||
|
"babel-register"
|
||||||
|
],
|
||||||
|
"babel": "inherit"
|
||||||
|
}
|
||||||
|
}
|
||||||
9
spikes/architecture/react-d3/readme.md
Normal file
9
spikes/architecture/react-d3/readme.md
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
# ChartJS
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## summary
|
||||||
|
|
||||||
|
- [x] customisable via js
|
||||||
|
- [x] fast (handles 100ms updates well)
|
||||||
|
- [x] easy to update data
|
||||||
29
spikes/architecture/react-d3/server/index.js
vendored
Normal file
29
spikes/architecture/react-d3/server/index.js
vendored
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
const requireDir = require('require-dir');
|
||||||
|
const plugins = require('./plugins');
|
||||||
|
const routes = requireDir('./routes');
|
||||||
|
const Hapi = require('hapi');
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
const server = new Hapi.Server();
|
||||||
|
|
||||||
|
server.connection({
|
||||||
|
host: 'localhost',
|
||||||
|
port: 8000
|
||||||
|
});
|
||||||
|
|
||||||
|
server.register(plugins, (err) => {
|
||||||
|
if (err) {
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.keys(routes).forEach((name) => {
|
||||||
|
routes[name](server);
|
||||||
|
});
|
||||||
|
|
||||||
|
server.start((err) => {
|
||||||
|
server.connections.forEach((conn) => {
|
||||||
|
console.log(`started at: ${conn.info.uri}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
15
spikes/architecture/react-d3/server/plugins.js
vendored
Normal file
15
spikes/architecture/react-d3/server/plugins.js
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const webpack = require('webpack');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const cfg = require('../webpack.config.js');
|
||||||
|
|
||||||
|
module.exports = [
|
||||||
|
require('inert'),
|
||||||
|
require('nes'), {
|
||||||
|
register: require('hapi-webpack-dev-plugin'),
|
||||||
|
options: {
|
||||||
|
compiler: webpack(cfg),
|
||||||
|
devIndex: path.join(__dirname, '../static')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
11
spikes/architecture/react-d3/server/routes/home.js
vendored
Normal file
11
spikes/architecture/react-d3/server/routes/home.js
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = (server) => {
|
||||||
|
server.route({
|
||||||
|
method: 'GET',
|
||||||
|
path: '/',
|
||||||
|
handler: (request, reply) => {
|
||||||
|
reply.file(path.join(__dirname, '../../static/index.html'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
15
spikes/architecture/react-d3/server/routes/static.js
vendored
Normal file
15
spikes/architecture/react-d3/server/routes/static.js
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = (server) => {
|
||||||
|
// server.route({
|
||||||
|
// method: 'GET',
|
||||||
|
// path: '/{param*}',
|
||||||
|
// handler: {
|
||||||
|
// directory: {
|
||||||
|
// path: path.join(__dirname, '../../static'),
|
||||||
|
// redirectToSlash: true,
|
||||||
|
// index: true
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
18
spikes/architecture/react-d3/server/routes/version.js
vendored
Normal file
18
spikes/architecture/react-d3/server/routes/version.js
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
const Pkg = require('../../package.json');
|
||||||
|
|
||||||
|
const internals = {
|
||||||
|
response: {
|
||||||
|
version: Pkg.version
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = (server) => {
|
||||||
|
server.route({
|
||||||
|
method: 'GET',
|
||||||
|
path: '/ops/version',
|
||||||
|
config: {
|
||||||
|
description: 'Returns the version of the server',
|
||||||
|
handler: (request, reply) => reply(internals.response)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
11
spikes/architecture/react-d3/static/index.html
Normal file
11
spikes/architecture/react-d3/static/index.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang='en-US'>
|
||||||
|
<head>
|
||||||
|
<title>D3 React Boilerplate</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='root'></div>
|
||||||
|
<script src='/static/bundle.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
69
spikes/architecture/react-d3/webpack.config.js
Normal file
69
spikes/architecture/react-d3/webpack.config.js
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
const webpack = require('webpack');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
debug: true,
|
||||||
|
devtool: 'source-map',
|
||||||
|
context: path.join(__dirname, './client'),
|
||||||
|
app: path.join(__dirname, './client/index.js'),
|
||||||
|
entry: [
|
||||||
|
'webpack-dev-server/client?http://localhost:8080',
|
||||||
|
'webpack/hot/only-dev-server',
|
||||||
|
'react-hot-loader/patch',
|
||||||
|
'./index.js'
|
||||||
|
],
|
||||||
|
output: {
|
||||||
|
path: path.join(__dirname, './static'),
|
||||||
|
publicPath: '/static/',
|
||||||
|
filename: 'bundle.js'
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
|
new webpack.NoErrorsPlugin()
|
||||||
|
],
|
||||||
|
postcss: () => {
|
||||||
|
return [
|
||||||
|
require('postcss-modules-values'),
|
||||||
|
require('postcss-nested'),
|
||||||
|
require('autoprefixer')
|
||||||
|
];
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
loaders: [{
|
||||||
|
test: /js?$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
include: [
|
||||||
|
path.join(__dirname, './client')
|
||||||
|
],
|
||||||
|
loaders: ['babel']
|
||||||
|
}, {
|
||||||
|
test: /\.json?$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
include: [
|
||||||
|
path.join(__dirname, './client')
|
||||||
|
],
|
||||||
|
loaders: ['json']
|
||||||
|
}, {
|
||||||
|
test: /\.css$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
include: [
|
||||||
|
path.join(__dirname, './client')
|
||||||
|
],
|
||||||
|
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const devServer = {
|
||||||
|
hot: true,
|
||||||
|
compress: true,
|
||||||
|
lazy: false,
|
||||||
|
publicPath: config.output.publicPath,
|
||||||
|
historyApiFallback: {
|
||||||
|
index: './static/index.html'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Object.assign({
|
||||||
|
devServer
|
||||||
|
}, config);
|
||||||
Loading…
Reference in New Issue
Block a user