From 59ae9049ece5a81aa35177f2da6e06f917df8c9c Mon Sep 17 00:00:00 2001
From: Jaehwan Ryu <jryu@uncharted.software>
Date: Thu, 10 Oct 2024 13:25:21 -0400
Subject: [PATCH] Added custom number formatting to better format the numbers
 on the chart (#5104)

Co-authored-by: Yohann Paris <github@yohannparis.com>
---
 .../src/components/widgets/VegaChart.vue      | 39 +++++++++++++++----
 .../client/hmi-client/src/services/charts.ts  |  7 ----
 .../client/hmi-client/src/utils/number.ts     | 30 +++++++++++---
 .../tests/unit/utils/number.spec.ts           | 13 +++++++
 4 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/VegaChart.vue b/packages/client/hmi-client/src/components/widgets/VegaChart.vue
index 43a3e1da9f..30c234bb54 100644
--- a/packages/client/hmi-client/src/components/widgets/VegaChart.vue
+++ b/packages/client/hmi-client/src/components/widgets/VegaChart.vue
@@ -21,15 +21,39 @@
 </template>
 
 <script setup lang="ts">
-import embed, { Result, VisualizationSpec } from 'vega-embed';
-import { Config as VgConfig } from 'vega';
-import { Config as VlConfig } from 'vega-lite';
+import { format } from 'd3';
+import embed, { Config, Result, VisualizationSpec } from 'vega-embed';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
-
+import { countDigits, fixPrecisionError } from '@/utils/number';
 import { ref, watch, toRaw, isRef, isReactive, isProxy, computed, h, render } from 'vue';
 
-export type Config = VgConfig | VlConfig;
+const NUMBER_FORMAT = '.3~s';
+
+// Define the custom expression functions that can be registered and used in the Vega charts
+const expressionFunctions = {
+	// chartNumberFormatter is a custom number format that will display numbers in a more readable format
+	chartNumberFormatter: (value: number) => {
+		const correctedValue = fixPrecisionError(value);
+		if (value > -1 && value < 1) {
+			return countDigits(correctedValue) > 6 ? correctedValue.toExponential(3) : correctedValue.toString();
+		}
+		return format(NUMBER_FORMAT)(correctedValue);
+	},
+	// Just show full value in tooltip
+	tooltipFormatter: (value) => fixPrecisionError(value)
+};
+
+// This config is default for all charts, but can be overridden by individual chart spec
+const defaultChartConfig: Partial<Config> = {
+	customFormatTypes: true,
+	numberFormatType: 'chartNumberFormatter',
+	numberFormat: 'chartNumberFormatter',
+	tooltipFormat: {
+		numberFormat: 'tooltipFormatter',
+		numberFormatType: 'tooltipFormatter'
+	}
+};
 
 const props = withDefaults(
 	defineProps<{
@@ -138,8 +162,9 @@ async function createVegaVisualization(
 		container,
 		{ ...visualizationSpec },
 		{
-			config: config || {},
-			actions: options.actions === false ? false : undefined
+			config: { ...defaultChartConfig, ...config } as Config,
+			actions: options.actions === false ? false : undefined,
+			expressionFunctions // Register expression functions
 		}
 	);
 	props.intervalSelectionSignalNames.forEach((signalName) => {
diff --git a/packages/client/hmi-client/src/services/charts.ts b/packages/client/hmi-client/src/services/charts.ts
index c681c96490..4b383743cd 100644
--- a/packages/client/hmi-client/src/services/charts.ts
+++ b/packages/client/hmi-client/src/services/charts.ts
@@ -10,11 +10,6 @@ const VEGALITE_SCHEMA = 'https://vega.github.io/schema/vega-lite/v5.json';
 
 export const CATEGORICAL_SCHEME = ['#1B8073', '#6495E8', '#8F69B9', '#D67DBF', '#E18547', '#D2C446', '#84594D'];
 
-export const NUMBER_FORMAT = '.3~s';
-export const LABEL_EXPR = `
-datum.value > -1 && datum.value < 1 ? format(datum.value, '.3~f') : format(datum.value, '${NUMBER_FORMAT}')
-`;
-
 interface BaseChartOptions {
 	title?: string;
 	width: number;
@@ -370,7 +365,6 @@ export function createForecastChart(
 	};
 	const yaxis = structuredClone(xaxis);
 	yaxis.title = options.yAxisTitle;
-	yaxis.labelExpr = LABEL_EXPR;
 
 	const translationMap = options.translationMap;
 	let labelExpr = '';
@@ -626,7 +620,6 @@ export function createSuccessCriteriaChart(
 	};
 	const yaxis = structuredClone(xaxis);
 	yaxis.title = options.yAxisTitle;
-	yaxis.labelExpr = LABEL_EXPR;
 
 	return {
 		$schema: VEGALITE_SCHEMA,
diff --git a/packages/client/hmi-client/src/utils/number.ts b/packages/client/hmi-client/src/utils/number.ts
index c51e5e0b34..f21af04cd8 100644
--- a/packages/client/hmi-client/src/utils/number.ts
+++ b/packages/client/hmi-client/src/utils/number.ts
@@ -74,17 +74,37 @@ export function nistToNumber(numStr: string): number {
  * @returns {string} The number in either exponential form or NIST form.
  */
 export function displayNumber(num: string): string {
+	const number = fixPrecisionError(parseFloat(num));
+	if (countDigits(number) > 6) return number.toExponential(3);
+	return numberToNist(number.toString());
+}
+
+/**
+ * Counts the number of digits in a given number.
+ */
+export function countDigits(num: number): number {
+	if (Number.isNaN(num)) return 0;
+	let digitString = num.toString();
 	// Remove negative sign if present
-	let digitString = parseFloat(num).toString();
-	if (num.startsWith('-')) {
+	if (digitString.startsWith('-')) {
 		digitString = digitString.substring(1);
 	}
-
 	// Remove decimal point if present
 	digitString = digitString.replace('.', '');
+	return digitString.length;
+}
 
-	if (digitString.length > 6) return parseFloat(num).toExponential(3);
-	return numberToNist(parseFloat(num).toString());
+/**
+ * Fixes floating-point precision errors by rounding the number to a specified precision.
+ * JavaScript's floating-point arithmetic can introduce small errors (e.g., 0.1 + 0.2 = 0.30000000000000004).
+ * This causes issues like 0.30000000000000004 ends up as a long number with insignificant trailing digits or '3.000e-1' (with exponential formatting) instead of '0.3'.
+ * This function rounds the number to mitigate such errors (e.g., fixFloatingPrecisionError(0.1 + 0.2) = 0.3).
+ * For num > 0, the function rounds to 3 decimal places.
+ *
+ * !! Note: Only use this function for display or formatting purposes. Do not use it for calculations. !!
+ */
+export function fixPrecisionError(num: number): number {
+	return num < 1 && num > -1 ? Number(num.toFixed(15)) : Number(num.toFixed(3));
 }
 
 /**
diff --git a/packages/client/hmi-client/tests/unit/utils/number.spec.ts b/packages/client/hmi-client/tests/unit/utils/number.spec.ts
index 1a6376d569..efc7cb20dc 100644
--- a/packages/client/hmi-client/tests/unit/utils/number.spec.ts
+++ b/packages/client/hmi-client/tests/unit/utils/number.spec.ts
@@ -113,5 +113,18 @@ describe('number util tests', () => {
 			expect(displayNumber('abc')).to.eq('');
 			expect(displayNumber('1.23abc')).to.eq('1.23');
 		});
+
+		it('should correct floating point precision errors', () => {
+			const num = 0.1 + 0.2; // 0.30000000000000004
+			expect(displayNumber(num.toString())).to.eq('0.3');
+			expect(displayNumber((-num).toString())).to.eq('-0.3');
+
+			// 100.19999999999999
+			expect(displayNumber((100.1 + 0.1).toString())).to.eq('100.2');
+
+			// normal rounding
+			expect(displayNumber('-134.1234500001')).to.eq('-134.123');
+			expect(displayNumber('0.000001234500001')).to.eq('1.235e-6');
+		});
 	});
 });