UI/Client count running totals component #14967
Conversation
| @@ -34,20 +34,22 @@ export default class ActivitySerializer extends ApplicationSerializer { | |||
|
|
|||
| // for vault usage - vertical bar chart | |||
| flattenByMonths(payload, isNewClients = false) { | |||
| const sortedPayload = [...payload]; | |||
| sortedPayload.reverse(); | |||
There was a problem hiding this comment.
I initially created a method to sort months by date - but this requires iterating through and converting the timestamp to a date object, comparing each and then formatting the timestamp into the M/yy format.
The API always returns a chronological array of months in order from most recent to oldest. So to save computing this in the frontend opted to just reverse this order.
| // TODO CMB make these two functions utils? | ||
|
|
||
| // format ISO timestamp to M/yy | ||
| formatTimestamp(timestamp) { |
There was a problem hiding this comment.
Timestamp looks like: 2021-03-21T00:00:00Z - if you directly format this, it returns a date object associated with the user's relative timezone. We want to globally return the same year and month as the API, so by splitting on T and parsing after we consistently get 3/21
| @@ -2,6 +2,7 @@ import Route from '@ember/routing/route'; | |||
| import { isSameMonth } from 'date-fns'; | |||
| import RSVP from 'rsvp'; | |||
| import getStorage from 'vault/lib/token-storage'; | |||
| import { parseRFC3339 } from '../../../../utils/date-formatters'; | |||
There was a problem hiding this comment.
Rather than moving up the tree you could use the vault alias for this import:
import { parseRFC3339 } from 'vault/utils/date-formatters';
There was a problem hiding this comment.
Ah yes - thank you! It auto-imported like this and I didn't even think to clean it up!
| parseRFC3339(timestamp) { | ||
| // convert '2021-03-21T00:00:00Z' --> ['2021', 2] (e.g. 2021 March, month is zero indexed) | ||
| return timestamp | ||
| ? [timestamp.split('-')[0], Number(timestamp.split('-')[1].replace(/^0+/, '')) - 1] | ||
| : null; | ||
| } | ||
|
|
There was a problem hiding this comment.
Nice moving this to a util!
| @@ -196,7 +196,7 @@ module('Acceptance | clients history tab', function (hooks) { | |||
| assert.dom('[data-test-stat-text="total-clients"] .stat-value').hasText('15'); | |||
| assert.dom('[data-test-stat-text="entity-clients"] .stat-value').hasText('5'); | |||
| assert.dom('[data-test-stat-text="non-entity-clients"] .stat-value').hasText('10'); | |||
| await waitUntil(() => find('[data-test-horizontal-bar-chart]')); | |||
| await settled(); | |||
There was a problem hiding this comment.
waitUntil kept timing out so going to try removing it..
* wire up running total component * remove waitUntil * remove unused functions * abstract x/y keys * adjust tick size * refactor helpers into utils * cleanup * cleanup utils files and imports * update variables to const * mock empty monthly data
* wire up running total component * remove waitUntil * remove unused functions * abstract x/y keys * adjust tick size * refactor helpers into utils * cleanup * cleanup utils files and imports * update variables to const * mock empty monthly data
* wire up running total component * remove waitUntil * remove unused functions * abstract x/y keys * adjust tick size * refactor helpers into utils * cleanup * cleanup utils files and imports * update variables to const * mock empty monthly data
PR to add the Running total component to the client count history tab