Dan pricing number format (#1630)

chillenberger · web-flow · commit 0231cee2e3cb · 2024-10-04T10:18:42.000-06:00
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
@@ -1,4 +1,8 @@
 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 +22,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 +31,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
@@ -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
+  }
+};
