mirror of https://github.com/rancher/ui.git
68 lines
2.3 KiB
JavaScript
68 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,
|
|
};
|
|
}
|