999d243544
* alphabetize utils * add util to add namespace key * finish filtering * add fake data for filtering * address comments * add empty state for no new client counts, when filtered by namespace * fix mirage clients linting * re-add namespaces to month object * clean up filtering * add tests and refactor accordingly * fix tooltip bug and chart new month client chart not rendering * filter out undefined * optional method chaining * add filter and fix ticks for line chart * fix axes domains * fix average calculation
49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { calculateAverageClients } from 'vault/utils/chart-helpers';
|
|
|
|
/**
|
|
* @module MonthlyUsage
|
|
* MonthlyUsage components show how many total clients use Vault each month. Displaying the average totals to the left of a stacked, vertical bar chart.
|
|
*
|
|
* @example
|
|
* ```js
|
|
<Clients::MonthlyUsage
|
|
@chartLegend={{this.chartLegend}}
|
|
@timestamp={{this.responseTimestamp}}
|
|
@verticalBarChartData={{this.byMonthActivityData}}
|
|
/>
|
|
* ```
|
|
* @param {array} chartLegend - array of objects with key names 'key' and 'label' so data can be stacked
|
|
* @param {string} timestamp - ISO timestamp created in serializer to timestamp the response
|
|
* @param {array} verticalBarChartData - array of flattened objects
|
|
sample object =
|
|
{
|
|
month: '1/22',
|
|
entity_clients: 23,
|
|
non_entity_clients: 45,
|
|
clients: 68,
|
|
namespaces: [],
|
|
new_clients: {
|
|
entity_clients: 11,
|
|
non_entity_clients: 36,
|
|
clients: 47,
|
|
namespaces: [],
|
|
},
|
|
}
|
|
* @param {array} chartLegend - array of objects with key names 'key' and 'label' so data can be stacked
|
|
*/
|
|
export default class MonthlyUsage extends Component {
|
|
get averageTotalClients() {
|
|
return calculateAverageClients(this.args.verticalBarChartData, 'clients') || '0';
|
|
}
|
|
|
|
get averageNewClients() {
|
|
return (
|
|
calculateAverageClients(
|
|
this.args.verticalBarChartData.map((d) => d.new_clients),
|
|
'clients'
|
|
) || '0'
|
|
);
|
|
}
|
|
}
|