mirror of
https://github.com/weaveworks/scope.git
synced 2026-07-28 09:41:57 +00:00
Adds support for the septagon node shape
This commit is contained in:
45
client/app/scripts/charts/node-shape-septagon.js
Normal file
45
client/app/scripts/charts/node-shape-septagon.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import d3 from 'd3';
|
||||
|
||||
const line = d3.svg.line()
|
||||
.interpolate('cardinal-closed')
|
||||
.tension(0.25);
|
||||
|
||||
function polygon(r, sides) {
|
||||
const a = (Math.PI * 2) / sides;
|
||||
const points = [[r, 0]];
|
||||
for (let i = 1; i < sides; i++) {
|
||||
points.push([r * Math.cos(a * i), r * Math.sin(a * i)]);
|
||||
}
|
||||
return points;
|
||||
}
|
||||
|
||||
export default function NodeShapeSeptagon({onlyHighlight, highlighted, size, color}) {
|
||||
const scaledSize = size * 1.0;
|
||||
const pathProps = (v) => {
|
||||
return {
|
||||
d: line(polygon(scaledSize * v, 7)),
|
||||
transform: `rotate(90)`
|
||||
};
|
||||
};
|
||||
|
||||
const hightlightNode = <path className="highlighted" {...pathProps(0.7)} />;
|
||||
|
||||
if (onlyHighlight) {
|
||||
return (
|
||||
<g className="shape">
|
||||
{highlighted && hightlightNode}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<g className="shape">
|
||||
{highlighted && hightlightNode}
|
||||
<path className="border" stroke={color} {...pathProps(0.5)} />
|
||||
<path className="shadow" {...pathProps(0.45)} />
|
||||
<circle className="node" r={Math.max(2, (scaledSize * 0.125))} />
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import NodeShapeCircle from './node-shape-circle';
|
||||
import NodeShapeStack from './node-shape-stack';
|
||||
import NodeShapeRoundedSquare from './node-shape-rounded-square';
|
||||
import NodeShapeHex from './node-shape-hex';
|
||||
import NodeShapeSeptagon from './node-shape-septagon';
|
||||
import NodeShapeCloud from './node-shape-cloud';
|
||||
|
||||
function stackedShape(Shape) {
|
||||
@@ -22,6 +23,7 @@ function stackedShape(Shape) {
|
||||
const nodeShapes = {
|
||||
'circle': NodeShapeCircle,
|
||||
'hexagon': NodeShapeHex,
|
||||
'pentagon': NodeShapeSeptagon,
|
||||
'square': NodeShapeRoundedSquare,
|
||||
'cloud': NodeShapeCloud
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@ const log = debug('scope:debug-panel');
|
||||
import { receiveNodesDelta } from '../actions/app-actions';
|
||||
import AppStore from '../stores/app-store';
|
||||
|
||||
const SHAPES = ['circle', 'hexagon', 'square'];
|
||||
const SHAPES = ['circle', 'hexagon', 'square', 'pentagon'];
|
||||
const NODE_COUNTS = [1, 2, 3];
|
||||
const STACK_VARIANTS = [true, false];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user