vault/ui/app/utils/chart-helpers.js
lane-wetmore cdbb0c49cc
UI: Vault update client count charts to show new clients only (#30506)
* increase bar width, show new clients only, add timestamp to header, update bar color

* remove extra timestamps, switch to basic bar chart

* update docs and styling

* remove unneeded timestamp args

* show new client running totatls

* initial test updates

* update test

* clean up new client total calc into util fn

* bits of clean up and todos

* update tests

* update to avoid activity call when in CE and missing either start or end time

* update todos

* update tests

* tidying

* move new client total onto payload for easier access

* update more tests to align with copy changes and new client totals

* remove addressed TODOs

* Update comment

* add changelog entry

* revert to using total, update tests and clean up

* Update ui/app/components/clients/page/counts.hbs

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

* remove duplicate charts and update descriptions

* update tests after removing extra charts

* tidy

* update instances of byMonthActivityData to use byMonthNewClients and update tests

* Update ui/app/components/clients/running-total.ts

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

* update chart styles

---------

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
2025-05-19 15:57:32 -05:00

48 lines
1.7 KiB
JavaScript

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import { format } from 'd3-format';
import { mean } from 'd3-array';
// COLOR THEME:
export const BAR_PALETTE = ['#CCE3FE', '#1060FF', '#C2C5CB', '#656A76'];
export const UPGRADE_WARNING = '#FDEEBA';
export const GREY = '#EBEEF2';
// TRANSLATIONS:
export const TRANSLATE = { left: -11 };
export const SVG_DIMENSIONS = { height: 190, width: 500 };
export const BAR_WIDTH = 17; // data bar width is 17 pixels
// Reference for tickFormat https://www.youtube.com/watch?v=c3MCROTNN8g
export function numericalAxisLabel(number) {
if (number < 1000) return number;
if (number < 1100) return format('.1s')(number);
if (number < 2000) return format('.2s')(number); // between 1k and 2k, show 2 decimals
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 calculateAverage(dataset, objectKey) {
// before mapping for values, check that the objectKey exists at least once in the dataset because
// map returns 0 when dataset[objectKey] is undefined in order to calculate average
if (!Array.isArray(dataset) || !objectKey || !dataset.some((d) => Object.keys(d).includes(objectKey))) {
return null;
}
const integers = dataset.map((d) => (d[objectKey] ? d[objectKey] : 0));
const checkIntegers = integers.every((n) => Number.isInteger(n)); // decimals will be false
return checkIntegers ? Math.round(mean(integers)) : null;
}
export function calculateSum(integerArray) {
if (!Array.isArray(integerArray) || integerArray.some((n) => typeof n !== 'number')) {
return null;
}
return integerArray.reduce((a, b) => a + b, 0);
}