66 lines
2.3 KiB
JavaScript
66 lines
2.3 KiB
JavaScript
|
import Component from '@ember/component';
|
||
|
|
import { get, computed } from '@ember/object';
|
||
|
|
import { htmlSafe } from '@ember/string';
|
||
|
|
|
||
|
|
const max = function(arr, prop) {
|
||
|
|
return arr.reduce(function(prev, item) {
|
||
|
|
return Math.max(prev, get(item, prop));
|
||
|
|
}, 0);
|
||
|
|
};
|
||
|
|
const chunk = function(str, size) {
|
||
|
|
const num = Math.ceil(str.length / size);
|
||
|
|
const chunks = new Array(num);
|
||
|
|
for (let i = 0, o = 0; i < num; ++i, o += size) {
|
||
|
|
chunks[i] = str.substr(o, size);
|
||
|
|
}
|
||
|
|
return chunks;
|
||
|
|
};
|
||
|
|
const width = function(num) {
|
||
|
|
const str = num.toString();
|
||
|
|
const len = str.length;
|
||
|
|
const commas = chunk(str, 3).length - 1;
|
||
|
|
return commas * 4 + len * 10;
|
||
|
|
};
|
||
|
|
const widthDeclaration = function(num) {
|
||
|
|
return htmlSafe(`width: ${num}px`);
|
||
|
|
};
|
||
|
|
export default Component.extend({
|
||
|
|
tagName: '',
|
||
|
|
onchange: function() {},
|
||
|
|
maxWidth: computed('{maxPassing,maxWarning,maxCritical}', function() {
|
||
|
|
const PADDING = 32 * 3 + 13;
|
||
|
|
return ['maxPassing', 'maxWarning', 'maxCritical'].reduce((prev, item) => {
|
||
|
|
return prev + width(get(this, item));
|
||
|
|
}, PADDING);
|
||
|
|
}),
|
||
|
|
totalWidth: computed('maxWidth', function() {
|
||
|
|
return widthDeclaration(get(this, 'maxWidth'));
|
||
|
|
}),
|
||
|
|
remainingWidth: computed('maxWidth', function() {
|
||
|
|
// maxWidth is the maximum width of the healthchecks column
|
||
|
|
// there are currently 2 other columns so divide it by 2 and
|
||
|
|
// take that off 50% (100% / number of fluid columns)
|
||
|
|
// also we added a Type column which we've currently fixed to 100px
|
||
|
|
// so again divide that by 2 and take it off each fluid column
|
||
|
|
return htmlSafe(`width: calc(50% - 50px - ${Math.round(get(this, 'maxWidth') / 2)}px)`);
|
||
|
|
}),
|
||
|
|
maxPassing: computed('items.[]', function() {
|
||
|
|
return max(get(this, 'items'), 'ChecksPassing');
|
||
|
|
}),
|
||
|
|
maxWarning: computed('items.[]', function() {
|
||
|
|
return max(get(this, 'items'), 'ChecksWarning');
|
||
|
|
}),
|
||
|
|
maxCritical: computed('items.[]', function() {
|
||
|
|
return max(get(this, 'items'), 'ChecksCritical');
|
||
|
|
}),
|
||
|
|
passingWidth: computed('maxPassing', function() {
|
||
|
|
return widthDeclaration(width(get(this, 'maxPassing')));
|
||
|
|
}),
|
||
|
|
warningWidth: computed('maxWarning', function() {
|
||
|
|
return widthDeclaration(width(get(this, 'maxWarning')));
|
||
|
|
}),
|
||
|
|
criticalWidth: computed('maxCritical', function() {
|
||
|
|
return widthDeclaration(width(get(this, 'maxCritical')));
|
||
|
|
}),
|
||
|
|
});
|