mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-03 02:00:43 +00:00
4f341cb1d2
While we're there, adopt a consistent ordering for all places that shapes are listed Order is least sides to most sides, with circle before polygons, and complex shapes (currently just Cloud) after. On shape choices for topologies: * Since the k8s logo is a heptagon, we want pods to be heptagons. * Since triangle is 'a bit weird', we put it on the least-important type, replica sets. * Pentagons look a little weirder than octogons (it's the lack of symmetry) so we put octogons on the most common (deployments)
31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import range from 'lodash/range';
|
|
import { line, curveCardinalClosed } from 'd3-shape';
|
|
|
|
import { UNIT_CLOUD_PATH } from '../constants/styles';
|
|
|
|
|
|
export const pathElement = React.createFactory('path');
|
|
export const circleElement = React.createFactory('circle');
|
|
export const rectangleElement = React.createFactory('rect');
|
|
|
|
function curvedUnitPolygonPath(n) {
|
|
const curve = curveCardinalClosed.tension(0.65);
|
|
const spline = line().curve(curve);
|
|
const innerAngle = (2 * Math.PI) / n;
|
|
|
|
return spline(range(0, n).map(k => [
|
|
Math.sin(k * innerAngle),
|
|
-Math.cos(k * innerAngle),
|
|
]));
|
|
}
|
|
|
|
export const circleShapeProps = { r: 1 };
|
|
export const triangleShapeProps = { d: curvedUnitPolygonPath(3) };
|
|
export const squareShapeProps = { width: 1.8, height: 1.8, rx: 0.4, ry: 0.4, x: -0.9, y: -0.9 };
|
|
export const pentagonShapeProps = { d: curvedUnitPolygonPath(5) };
|
|
export const hexagonShapeProps = { d: curvedUnitPolygonPath(6) };
|
|
export const heptagonShapeProps = { d: curvedUnitPolygonPath(7) };
|
|
export const octagonShapeProps = { d: curvedUnitPolygonPath(8) };
|
|
export const cloudShapeProps = { d: UNIT_CLOUD_PATH };
|