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..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,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
new file mode 100644
index 000000000..f1624838d
--- /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
+ }
+};
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy