793ad94d08
* add core usage metrics components to storybook, rename component from small to simple * remove const from js file * remove grid container knob from selectable-card
49 lines
2 KiB
JavaScript
49 lines
2 KiB
JavaScript
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
|
|
/**
|
|
* @module SelectableCardContainer
|
|
* SelectableCardContainer components are used to hold SelectableCard components. They act as a CSS grid container, and change grid configurations based on the boolean of @gridContainer.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <SelectableCardContainer @counters={{model}} @gridContainer="true" />
|
|
* ```
|
|
* @param counters=null {Object} - Counters is an object that returns total entities, tokens, and an array of objects with the total https request per month.
|
|
* @param gridContainer=false {Boolean} - gridContainer is optional. If true, it's telling the container it will have a nested CSS grid.
|
|
*/
|
|
|
|
export default Component.extend({
|
|
classNameBindings: ['isGridContainer'],
|
|
counters: null,
|
|
gridContainer: false,
|
|
isGridContainer: computed('counters', function() {
|
|
return this.counters.httpsRequests.length > 1
|
|
? 'selectable-card-container has-grid'
|
|
: 'selectable-card-container';
|
|
}),
|
|
totalHttpRequests: computed('counters', function() {
|
|
let httpsRequestsArray = this.counters.httpsRequests || [];
|
|
return httpsRequestsArray.firstObject.total;
|
|
}),
|
|
// Limit number of months returned to the most recent 12
|
|
filteredHttpsRequests: computed('counters', function() {
|
|
let httpsRequestsArray = this.counters.httpsRequests || [];
|
|
if (httpsRequestsArray.length > 12) {
|
|
httpsRequestsArray = httpsRequestsArray.slice(0, 12);
|
|
}
|
|
return httpsRequestsArray;
|
|
}),
|
|
percentChange: computed('counters', function() {
|
|
let httpsRequestsArray = this.counters.httpsRequests || [];
|
|
let lastTwoMonthsArray = httpsRequestsArray.slice(0, 2);
|
|
let previousMonthVal = lastTwoMonthsArray.lastObject.total;
|
|
let thisMonthVal = lastTwoMonthsArray.firstObject.total;
|
|
|
|
let percentChange = (((previousMonthVal - thisMonthVal) / previousMonthVal) * 100).toFixed(1);
|
|
// a negative value indicates a percentage increase, so we swap the value
|
|
percentChange = -percentChange;
|
|
return percentChange;
|
|
}),
|
|
});
|