ui/lib/shared/addon/components/svg-service-graph/component.js

46 lines
998 B
JavaScript

import { computed } from '@ember/object';
import Component from '@ember/component';
import layout from './template';
export default Component.extend({
layout,
services: null,
tagName: 'svg',
attributeBindings: ['width','height','xmlns','viewBox'],
width:"100%",
height:"100%",
xmlns:"http://www.w3.org/2000/svg",
viewBox: '0 0 1000 1000',
actions: {
openInfo: function(service) {
this.sendAction('action', service);
},
},
nodes: computed('services.[]', function() {
return this.get('services').map((service, index) => {
return {
x: 100 + 300*(index%3),
y: 200*Math.floor(index/3),
path: {
m: [100, 150],
l: [[150,150], [150, 200], [300,300]]
},
service: service
};
});
}),
paths: computed('services.[]', function() {
return this.get('services').map(() => {
return {
m: [100, 150],
l: [[150,150], [150, 200], [300,300]]
};
});
}),
});