mirror of https://github.com/rancher/ui.git
97 lines
2.4 KiB
JavaScript
97 lines
2.4 KiB
JavaScript
import { computed, get } from '@ember/object';
|
|
import Component from '@ember/component';
|
|
import layout from './template';
|
|
|
|
function toPercent(value,min,max) {
|
|
value = Math.max(min, Math.min(max, value));
|
|
var per = value/(max-min)*100; // Percent 0-100
|
|
per = Math.floor(per*100)/100; // Round to 2 decimal places
|
|
return per;
|
|
}
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
tagName: 'div',
|
|
classNames: ['progress-bar-multi'],
|
|
|
|
values: null,
|
|
colorKey: 'color',
|
|
labelKey: 'label',
|
|
valueKey: 'value',
|
|
tooltipValues: null,
|
|
min: 0,
|
|
max: null,
|
|
minPercent: 10,
|
|
zIndex: null,
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
let colorKey = this.get('colorKey');
|
|
let labelKey = this.get('labelKey');
|
|
let valueKey = this.get('valueKey');
|
|
|
|
let valueDep = `values.@each.{${colorKey},${labelKey},${valueKey}}`;
|
|
this.set('pieces', computed('min','max',valueDep, () => {
|
|
|
|
let min = this.get('min');
|
|
let max = this.get('max');
|
|
|
|
var out = [];
|
|
(this.get('values')||[]).forEach((obj) => {
|
|
out.push({
|
|
color: get(obj, colorKey),
|
|
label: get(obj, labelKey),
|
|
value: get(obj, valueKey),
|
|
});
|
|
});
|
|
|
|
if ( !max ) {
|
|
max = 100;
|
|
if ( out.length ) {
|
|
max = out.map((x) => x.value).reduce((a,b) => a+b);
|
|
}
|
|
}
|
|
|
|
let sum = 0;
|
|
let minPercent = this.get('minPercent');
|
|
out.forEach((obj) => {
|
|
let per = Math.max(minPercent, toPercent(obj.value, min, max));
|
|
obj.percent = per;
|
|
sum += per;
|
|
});
|
|
|
|
// If the sum is bigger than 100%, take it out of the biggest piece.
|
|
if ( sum > 100 ) {
|
|
out.sortBy('percent').reverse()[0].percent -= sum - 100;
|
|
}
|
|
|
|
out.forEach((obj) => {
|
|
obj.css = ('width: ' + obj.percent +'%').htmlSafe();
|
|
});
|
|
|
|
return out;
|
|
}));
|
|
|
|
valueDep = `tooltipValues.@each.{${labelKey},${valueKey}}`;
|
|
this.set('tooltipContent', computed(valueDep, () => {
|
|
let labelKey = this.get('labelKey');
|
|
let valueKey = this.get('valueKey');
|
|
|
|
var out = [];
|
|
(this.get('tooltipValues')||[]).forEach((obj) => {
|
|
out.push(get(obj, labelKey)+ ": " + get(obj, valueKey));
|
|
});
|
|
|
|
return out.join("\n");
|
|
}));
|
|
},
|
|
|
|
zIndexDidChange: function() {
|
|
this.$().css('zIndex', this.get('zIndex') || "inherit");
|
|
}.observes('zIndex'),
|
|
|
|
didInsertElement: function() {
|
|
this.zIndexDidChange();
|
|
},
|
|
});
|