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
36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
import { format } from 'd3-format';
|
|
import { mean } from 'd3-array';
|
|
|
|
// COLOR THEME:
|
|
export const LIGHT_AND_DARK_BLUE = ['#BFD4FF', '#1563FF'];
|
|
export const UPGRADE_WARNING = '#FDEEBA';
|
|
export const BAR_COLOR_HOVER = ['#1563FF', '#0F4FD1'];
|
|
export const GREY = '#EBEEF2';
|
|
|
|
// TRANSLATIONS:
|
|
export const TRANSLATE = { left: -11 };
|
|
export const SVG_DIMENSIONS = { height: 190, width: 500 };
|
|
|
|
// Reference for tickFormat https://www.youtube.com/watch?v=c3MCROTNN8g
|
|
export function formatNumbers(number) {
|
|
if (number < 1000) return number;
|
|
if (number < 10000) return format('.1s')(number);
|
|
// replace SI prefix of 'G' for billions to 'B'
|
|
return format('.2s')(number).replace('G', 'B');
|
|
}
|
|
|
|
export function formatTooltipNumber(value) {
|
|
if (typeof value !== 'number') {
|
|
return value;
|
|
}
|
|
// formats a number according to the locale
|
|
return new Intl.NumberFormat().format(value);
|
|
}
|
|
|
|
export function calculateAverageClients(dataset, objectKey) {
|
|
// dataset is an array of objects (consumed by the chart components)
|
|
// objectKey is the key of the integer we want to calculate, ex: 'entity_clients', 'non_entity_clients', 'clients'
|
|
let getIntegers = dataset.map((d) => (d[objectKey] ? d[objectKey] : 0)); // if undefined no data, so return 0
|
|
return getIntegers.length !== 0 ? Math.round(mean(getIntegers)) : null;
|
|
}
|