Merge pull request #98 from yldio/architecture-react-d3
Architecture react d3
This commit is contained in:
Sérgio Ramos
GitHub
commit
174aec625e
|
|
@ -0,0 +1,4 @@
|
|||
# Example
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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}
|
||||
]
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
npm-debug.log
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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>;
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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>;
|
||||
|
|
@ -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}
|
||||
]
|
||||
}
|
||||
|
|
@ -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);
|
||||
};
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
# ChartJS
|
||||
|
||||
|
||||
|
||||
## summary
|
||||
|
||||
- [x] customisable via js
|
||||
- [x] fast (handles 100ms updates well)
|
||||
- [x] easy to update data
|
||||
|
|
@ -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}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
];
|
||||
|
|
@ -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'));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -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
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
@ -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