mirror of https://github.com/rancher/ui.git
77 lines
2.3 KiB
JavaScript
77 lines
2.3 KiB
JavaScript
export default function initGraph(options) {
|
|
const {
|
|
el, r, width, height, margin, fontSize
|
|
} = getConfig(options);
|
|
const svg = d3.select(el).append('svg').attr('width', width).attr('height', height);
|
|
|
|
const healthyStatus = options.healthy ? 'healthy' : 'unhealthy';
|
|
|
|
const rectangle = svg.append('rect').attr('x', r).attr('y', margin).attr('width', width)
|
|
.attr('height', height - margin * 2)
|
|
.attr('class', `${ healthyStatus } background`);
|
|
|
|
const circle = svg.append('circle').attr('cx', r).attr('cy', r).attr('r', r)
|
|
.attr('class', `${ healthyStatus } circle`);
|
|
|
|
const text = svg.append('svg:text')
|
|
.attr('x', 3 * r)
|
|
.attr('y', height / 2)
|
|
.attr('dy', fontSize / 2)
|
|
.attr('text-anchor', 'start')
|
|
.text(options.component)
|
|
.style('font-size', `${ fontSize }px`)
|
|
.attr('class', `${ healthyStatus } text`);
|
|
|
|
const icon = svg.append('image')
|
|
.attr('x', 0.5 * r)
|
|
.attr('y', 0.5 * r)
|
|
.attr('width', r)
|
|
.attr('height', r)
|
|
.attr('xlink:href', options.healthy ? '/assets/images/checkmark.svg' : '/assets/images/flag.svg');
|
|
|
|
return {
|
|
updateHealthStatus(healthy) {
|
|
rectangle.attr('class', `${ healthyStatus } background`);
|
|
circle.attr('class', `${ healthyStatus } circle`);
|
|
text.attr('class', `${ healthyStatus } text`);
|
|
icon.attr('xlink:href', healthy ? '/assets/images/checkmark.svg' : '/assets/images/flag.svg');
|
|
},
|
|
|
|
fit() {
|
|
fit(svg, el, rectangle, circle, text, icon);
|
|
},
|
|
};
|
|
}
|
|
|
|
function fit(svg, el, rectangle, circle, text, icon) {
|
|
const {
|
|
r, width, height, margin, fontSize
|
|
} = getConfig({ el });
|
|
|
|
svg.attr('width', width).attr('height', height);
|
|
rectangle.attr('x', r).attr('y', margin).attr('width', width).attr('height', height - margin * 2);
|
|
circle.attr('cx', r).attr('cy', r).attr('r', r);
|
|
text.attr('x', 3 * r).attr('y', height / 2).attr('dy', fontSize / 2).style('font-size', `${ fontSize }px`);
|
|
icon.attr('x', 0.5 * r).attr('y', 0.5 * r).attr('width', r).attr('height', r);
|
|
}
|
|
|
|
function getWidth(el) {
|
|
const width = el.parentNode.offsetWidth;
|
|
|
|
return width > 0 ? width : 0;
|
|
}
|
|
|
|
function getConfig(options) {
|
|
const width = getWidth(options.el);
|
|
const height = width / 2.5;
|
|
|
|
return {
|
|
el: options.el,
|
|
r: height / 8,
|
|
fontSize: width / 25,
|
|
margin: height / 30,
|
|
width,
|
|
height: height / 4,
|
|
};
|
|
}
|