This is an automated email from the ASF dual-hosted git repository.
scottyaslan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 2c129fdd05 NIFI-14800 - Shorten y-axis integer labels when 100,000 or
more using standard abbreviations (#10148)
2c129fdd05 is described below
commit 2c129fdd05ed03b1d9151785485fb522cc818046
Author: Rob Fellows <[email protected]>
AuthorDate: Wed Jul 30 22:01:20 2025 -0400
NIFI-14800 - Shorten y-axis integer labels when 100,000 or more using
standard abbreviations (#10148)
* NIFI-14800 - Shorten y-axis integer labels when 100,000 or more using
standard abbreviations
* only use compact number format notation on y-xis values.
---
.../status-history-chart.component.ts | 26 ++++++++-
.../src/services/nifi-common.service.spec.ts | 67 ++++++++++++++++++++++
.../shared/src/services/nifi-common.service.ts | 13 ++++-
3 files changed, 103 insertions(+), 3 deletions(-)
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
index 3b2d7eeda6..26ed42cab7 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
@@ -111,6 +111,28 @@ export class StatusHistoryChart implements OnDestroy {
return this.nifiCommon.formatFloat(d / 1000000);
}
};
+
+ // Formatters for y-axis use with compact notation for large numbers
+ private yAxisFormatters: any = {
+ DURATION: (d: number) => {
+ return this.nifiCommon.formatDuration(d);
+ },
+ COUNT: (d: number) => {
+ // need to handle floating point number since this formatter
+ // will also be used for average values
+ if (d % 1 === 0) {
+ return this.nifiCommon.formatInteger(d, true); // Enable
compact notation for y-axis
+ } else {
+ return this.nifiCommon.formatFloat(d);
+ }
+ },
+ DATA_SIZE: (d: number) => {
+ return this.nifiCommon.formatDataSize(d);
+ },
+ FRACTION: (d: number) => {
+ return this.nifiCommon.formatFloat(d / 1000000);
+ }
+ };
private brushSelection: any = null;
// private selectedDescriptor: FieldDescriptor | null = null;
@@ -188,7 +210,7 @@ export class StatusHistoryChart implements OnDestroy {
// define the y axis
const y = d3.scaleLinear().range([height, 0]);
- const yAxis: any =
d3.axisLeft(y).tickFormat(this.formatters[selectedDescriptor.formatter]);
+ const yAxis: any =
d3.axisLeft(y).tickFormat(this.yAxisFormatters[selectedDescriptor.formatter]);
// status line
const line = d3
@@ -349,7 +371,7 @@ export class StatusHistoryChart implements OnDestroy {
const yControlAxis = d3
.axisLeft(yControl)
.tickValues(y.domain())
- .tickFormat(this.formatters[selectedDescriptor.formatter]);
+ .tickFormat(this.yAxisFormatters[selectedDescriptor.formatter]);
// status line
const controlLine = d3
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.spec.ts
b/nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.spec.ts
index d1b9bb421d..c4e9a6b04d 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.spec.ts
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.spec.ts
@@ -30,4 +30,71 @@ describe('Common', () => {
it('should be created', () => {
expect(service).toBeTruthy();
});
+
+ describe('formatInteger', () => {
+ describe('traditional formatting (default)', () => {
+ it('should format small numbers with commas', () => {
+ expect(service.formatInteger(0)).toBe('0');
+ expect(service.formatInteger(1)).toBe('1');
+ expect(service.formatInteger(123)).toBe('123');
+ expect(service.formatInteger(1234)).toBe('1,234');
+ expect(service.formatInteger(12345)).toBe('12,345');
+ expect(service.formatInteger(99999)).toBe('99,999');
+ });
+
+ it('should format large numbers with commas when compact notation
is disabled', () => {
+ expect(service.formatInteger(100000)).toBe('100,000');
+ expect(service.formatInteger(150000)).toBe('150,000');
+ expect(service.formatInteger(1000000)).toBe('1,000,000');
+ expect(service.formatInteger(1250000)).toBe('1,250,000');
+
expect(service.formatInteger(1000000000)).toBe('1,000,000,000');
+ });
+
+ it('should handle negative numbers correctly with traditional
formatting', () => {
+ expect(service.formatInteger(-1234)).toBe('-1,234');
+ expect(service.formatInteger(-99999)).toBe('-99,999');
+ expect(service.formatInteger(-100000)).toBe('-100,000');
+ expect(service.formatInteger(-1250000)).toBe('-1,250,000');
+ });
+ });
+
+ describe('compact notation formatting', () => {
+ it('should format small numbers with commas even when compact
notation is enabled', () => {
+ expect(service.formatInteger(0, true)).toBe('0');
+ expect(service.formatInteger(1, true)).toBe('1');
+ expect(service.formatInteger(123, true)).toBe('123');
+ expect(service.formatInteger(1234, true)).toBe('1,234');
+ expect(service.formatInteger(12345, true)).toBe('12,345');
+ expect(service.formatInteger(99999, true)).toBe('99,999');
+ });
+
+ it('should format numbers >= 100,000 with compact notation when
enabled', () => {
+ expect(service.formatInteger(100000, true)).toBe('100K');
+ expect(service.formatInteger(150000, true)).toBe('150K');
+ expect(service.formatInteger(1000000, true)).toBe('1M');
+ expect(service.formatInteger(1250000, true)).toBe('1.25M');
+ expect(service.formatInteger(1000000000, true)).toBe('1B');
+ expect(service.formatInteger(2750000000, true)).toBe('2.75B');
+ expect(service.formatInteger(1000000000000, true)).toBe('1T');
+ });
+
+ it('should handle negative numbers correctly with compact
notation', () => {
+ expect(service.formatInteger(-1234, true)).toBe('-1,234');
+ expect(service.formatInteger(-99999, true)).toBe('-99,999');
+ expect(service.formatInteger(-100000, true)).toBe('-100K');
+ expect(service.formatInteger(-1250000, true)).toBe('-1.25M');
+ });
+
+ it('should handle edge cases around the 100,000 threshold with
compact notation', () => {
+ expect(service.formatInteger(99999, true)).toBe('99,999');
+ expect(service.formatInteger(100000, true)).toBe('100K');
+ expect(service.formatInteger(100001, true)).toBe('100K');
+ });
+
+ it('should format very large numbers with appropriate suffixes',
() => {
+ expect(service.formatInteger(1234567890, true)).toBe('1.23B');
+ expect(service.formatInteger(12345678901234,
true)).toBe('12.35T');
+ });
+ });
+ });
});
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.ts
b/nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.ts
index 7eeb87575e..c6a41dbe68 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.ts
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.ts
@@ -655,9 +655,20 @@ export class NiFiCommon {
* point this does not take into account any locales.
*
* @param {integer} integer
+ * @param {boolean} useCompactNotation - Whether to use compact notation
(100K, 1M, etc.) for large numbers
*/
- public formatInteger(integer: number): string {
+ public formatInteger(integer: number, useCompactNotation: boolean =
false): string {
const locale: string = (navigator && navigator.language) || 'en';
+
+ // For values >= 100,000 and when compact notation is requested, use
compact notation (100K, 1M, 2.5B, etc.)
+ if (useCompactNotation && Math.abs(integer) >= 100000) {
+ return new Intl.NumberFormat(locale, {
+ notation: 'compact',
+ maximumFractionDigits: 2
+ }).format(integer);
+ }
+
+ // For all other cases, use the traditional format with commas
return integer.toLocaleString(locale, { maximumFractionDigits: 0 });
}
