From 900d23733d71c4b33ae63f61956f768fb5031f11 Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Thu, 3 Oct 2024 15:55:51 -0600
Subject: [PATCH 1/3] add compact number utility and use it

---
 .../range_group_pricing_calc_controller.js    | 11 +++++---
 .../static/js/utilities/compact_number.js     | 28 +++++++++++++++++++
 2 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 pgml-dashboard/static/js/utilities/compact_number.js

diff --git a/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js
index ee212dedb..19772d3d8 100644
--- a/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js
+++ b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js
@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
+import { numberToCompact, compactToNumber } from "../../../../static/js/utilities/compact_number";
 
 export default class extends Controller {
   static targets = ["textInput", "range"];
@@ -18,7 +19,7 @@ export default class extends Controller {
   updateText(e) {
     if (e.detail >= this.minValue && e.detail <= this.maxValue) {
       this.removeErrorState();
-      this.textInputTarget.value = e.detail;
+      this.textInputTarget.value = numberToCompact(e.detail);
       this.updateDatasetValue();
       this.inputUpdated();
     } else {
@@ -27,20 +28,22 @@ export default class extends Controller {
   }
 
   textUpdated() {
-    let value = Number(this.textInputTarget.value);
+    let value = compactToNumber(this.textInputTarget.value);
+
     if (!value) {
-      value = this.minValue;
-      this.textInputTarget.value = value;
+      this.textInputTarget.value = numberToCompact(this.minValue);
     }
 
     if (value > this.maxValue || value < this.minValue) {
       this.applyErrorState();
       value = value > this.maxValue ? this.maxValue : this.minValue;
       value = value < this.minValue ? this.minValue : value;
+      this.textInputTarget.value = numberToCompact(value);
       this.dispatchToRange(value);
     } else {
       this.removeErrorState();
       this.dispatchToRange(value);
+      this.textInputTarget.value = numberToCompact(value);
       this.updateDatasetValue();
       this.inputUpdated();
     }
diff --git a/pgml-dashboard/static/js/utilities/compact_number.js b/pgml-dashboard/static/js/utilities/compact_number.js
new file mode 100644
index 000000000..f13b1cb31
--- /dev/null
+++ b/pgml-dashboard/static/js/utilities/compact_number.js
@@ -0,0 +1,28 @@
+
+export const numberToCompact = (num)  => {
+  if (num >= 1e12) {
+      return (num / 1e12).toFixed(1) + 'T'; // Trillion
+  } else if (num >= 1e9) {
+      return (num / 1e9).toFixed(1) + 'B'; // Billion
+  } else if (num >= 1e6) {
+      return (num / 1e6).toFixed(1) + 'M'; // Million
+  } else if (num >= 1e3) {
+      return (num / 1e3).toFixed(1) + 'K'; // Thousand
+  } else {
+      return num.toString(); // Less than a thousand
+  }
+};
+
+export const compactToNumber = (compact) => {
+  const suffixes = { 'K': 1e3, 'M': 1e6, 'B': 1e9, 'T': 1e12 };
+  const regex = /^(\d+(\.\d+)?)([KMBT])$/;
+
+  const match = compact.match(regex);
+  if (match) {
+      const number = parseFloat(match[1]);
+      const suffix = match[3].toUpperCase();
+      return number * suffixes[suffix];
+  } else {
+      return parseFloat(compact); // For numbers without suffixes
+  }
+};
\ No newline at end of file

From 4343864f1b1b393e51a9fba7b26d08e5e14e5dc5 Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Thu, 3 Oct 2024 15:58:24 -0600
Subject: [PATCH 2/3] lint

---
 .../range_group_pricing_calc_controller.js                   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js
index 19772d3d8..bdb7e6d2f 100644
--- a/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js
+++ b/pgml-dashboard/src/components/inputs/range_group_pricing_calc/range_group_pricing_calc_controller.js
@@ -1,5 +1,8 @@
 import { Controller } from "@hotwired/stimulus";
-import { numberToCompact, compactToNumber } from "../../../../static/js/utilities/compact_number";
+import {
+  numberToCompact,
+  compactToNumber,
+} from "../../../../static/js/utilities/compact_number";
 
 export default class extends Controller {
   static targets = ["textInput", "range"];

From 3925d1ad10515f256b9980a189c41f4c8e828532 Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Fri, 4 Oct 2024 08:13:32 -0600
Subject: [PATCH 3/3] fmt

---
 pgml-dashboard/static/js/utilities/compact_number.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pgml-dashboard/static/js/utilities/compact_number.js b/pgml-dashboard/static/js/utilities/compact_number.js
index f13b1cb31..f1624838d 100644
--- a/pgml-dashboard/static/js/utilities/compact_number.js
+++ b/pgml-dashboard/static/js/utilities/compact_number.js
@@ -25,4 +25,4 @@ export const compactToNumber = (compact) => {
   } else {
       return parseFloat(compact); // For numbers without suffixes
   }
-};
\ No newline at end of file
+};