mirror of https://github.com/rancher/ui.git
50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import Component from '@ember/component';
|
|
import layout from './template';
|
|
|
|
export const GRADIENT_COLORS = {
|
|
'cpu': ['#2ECC71', '#DBE8B1'],
|
|
'memory': ['#00558B', '#AED6F1'],
|
|
'network': ['#E49701', '#F1C40F'],
|
|
'storage': ['#3A6F81', '#ABCED3'],
|
|
};
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
tagName: '',
|
|
didInsertElement() {
|
|
var svg = d3.select('body').append('svg:svg')
|
|
.attr('id', 'svg-gradients')
|
|
.attr('height', '0')
|
|
.attr('height', '0')
|
|
.attr('width', '0')
|
|
.style('position', 'absolute');
|
|
|
|
var defs = svg.append('svg:defs');
|
|
|
|
Object.keys(GRADIENT_COLORS).forEach((name) => {
|
|
GRADIENT_COLORS[name].forEach((val, idx) => {
|
|
var gradient = defs.append('svg:linearGradient')
|
|
.attr('id', `${ name }-${ idx }-gradient`)
|
|
.attr('x1', '0%')
|
|
.attr('y1', '0%')
|
|
.attr('x2', '0%')
|
|
.attr('y2', '100%')
|
|
.attr('spreadMethod', 'pad');
|
|
|
|
gradient.append('svg:stop')
|
|
.attr('offset', '0%')
|
|
.attr('stop-color', val)
|
|
.attr('stop-opacity', '0.5');
|
|
gradient.append('svg:stop')
|
|
.attr('offset', '10%')
|
|
.attr('stop-color', val)
|
|
.attr('stop-opacity', '0.25');
|
|
gradient.append('svg:stop')
|
|
.attr('offset', '100%')
|
|
.attr('stop-color', val)
|
|
.attr('stop-opacity', '0.1');
|
|
});
|
|
});
|
|
},
|
|
});
|