[Docs Site] Remove mathjs dependency (#17235)

Author: KianNH

package-lock.json

@@ -46,7 +46,6 @@
 		"littlefoot": "^4.1.1",
 		"lz-string": "^1.5.0",
 		"marked": "^14.1.1",
-		"mathjs": "^13.1.1",
 		"mermaid": "^11.1.1",
 		"node-html-parser": "^6.1.13",
 		"patch-package": "^8.0.0",
@@ -57,10 +56,10 @@
 		"react-textarea-autosize": "^8.5.3",
 		"redirects-in-workers": "^0.0.5",
 		"rehype-autolink-headings": "^7.1.0",
+		"rehype-external-links": "^3.0.0",
 		"rehype-mermaid": "^2.1.0",
 		"rehype-slug": "^6.0.0",
 		"rehype-title-figure": "^0.1.2",
-		"rehype-external-links": "^3.0.0",
 		"sharp": "^0.33.5",
 		"solarflare-theme": "^0.0.2",
 		"starlight-image-zoom": "^0.8.0",

package.json

@@ -122,73 +122,81 @@ const metrics = Object.entries({
 </sup>
 
 <script>
-	import { evaluate, round } from "mathjs";
+	function getValueOfInputById(id: string) {
+		const element = document.querySelector<HTMLInputElement>(id);
+
+		if (!element)
+			throw new Error(`[TunnelCalculator] Unable to find element with ${id}.`);
+
+		return Number(element.value);
+	}
 
 	function calculate() {
-		const non_dns_udp_req_per_sec = document.querySelector<HTMLInputElement>(
+		const non_dns_udp_req_per_sec = getValueOfInputById(
 			"#non_dns_udp_req_per_sec",
-		)?.value;
-		const avg_non_dns_udp_session_timeout =
-			document.querySelector<HTMLInputElement>(
-				"#avg_non_dns_udp_session_timeout",
-			)?.value;
-		const private_dns_req_per_sec = document.querySelector<HTMLInputElement>(
+		);
+		const avg_non_dns_udp_session_timeout = getValueOfInputById(
+			"#avg_non_dns_udp_session_timeout",
+		);
+		const private_dns_req_per_sec = getValueOfInputById(
 			"#private_dns_req_per_sec",
-		)?.value;
-		const dns_udp_timeout_in_sec = document.querySelector<HTMLInputElement>(
-			"#dns_udp_timeout_in_sec",
-		)?.value;
-		const tcp_per_sec =
-			document.querySelector<HTMLInputElement>("#tcp_per_sec")?.value;
-		const available_ports_per_host = document.querySelector<HTMLInputElement>(
-			"#available_ports_per_host",
-		)?.value;
-		const cloudflared_replicas = document.querySelector<HTMLInputElement>(
-			"#cloudflared_replicas",
-		)?.value;
-
-		// const percent_capacity_per_replica = (((non_dns_udp_req_per_sec * avg_non_dns_udp_session_timeout) + (private_dns_req_per_sec * dns_udp_timeout_in_sec) + tcp_per_sec) / available_ports_per_host) * 100;
-		const percent_capacity_per_replica = evaluate(
-			`(((${non_dns_udp_req_per_sec} * ${avg_non_dns_udp_session_timeout}) + (${private_dns_req_per_sec} * ${dns_udp_timeout_in_sec}) + ${tcp_per_sec}) / ${available_ports_per_host}) * 100`,
 		);
-		const percent_capacity_across_all_replicas = evaluate(
-			`((${non_dns_udp_req_per_sec} * ${avg_non_dns_udp_session_timeout} +
-				${private_dns_req_per_sec} * ${dns_udp_timeout_in_sec} +
-				${tcp_per_sec}) /
-				(${available_ports_per_host} * ${cloudflared_replicas})) *
-			100`,
+		const tcp_per_sec = getValueOfInputById("#tcp_per_sec");
+		const dns_udp_timeout_in_sec = getValueOfInputById(
+			"#dns_udp_timeout_in_sec",
 		);
-		const max_dns_request_per_min = evaluate(
-			`((${available_ports_per_host} * ${cloudflared_replicas}) /
-				${dns_udp_timeout_in_sec}) *
-			60`,
+		const available_ports_per_host = getValueOfInputById(
+			"#available_ports_per_host",
 		);
+		const cloudflared_replicas = getValueOfInputById("#cloudflared_replicas");
+
+		const percent_capacity_per_replica =
+			((non_dns_udp_req_per_sec * avg_non_dns_udp_session_timeout +
+				private_dns_req_per_sec * dns_udp_timeout_in_sec +
+				tcp_per_sec) /
+				available_ports_per_host) *
+			100;
+
+		const percent_capacity_across_all_replicas =
+			((non_dns_udp_req_per_sec * avg_non_dns_udp_session_timeout +
+				private_dns_req_per_sec * dns_udp_timeout_in_sec +
+				tcp_per_sec) /
+				(available_ports_per_host * cloudflared_replicas)) *
+			100;
+
+		const max_dns_request_per_min =
+			((available_ports_per_host * cloudflared_replicas) /
+				dns_udp_timeout_in_sec) *
+			60;
 
 		const perceptCapacityPerReplicaInput =
 			document.querySelector<HTMLInputElement>("#percent_capacity_per_replica");
+
 		if (perceptCapacityPerReplicaInput) {
-			perceptCapacityPerReplicaInput.value = round(
-				percent_capacity_per_replica,
-				2,
+			perceptCapacityPerReplicaInput.value = String(
+				percent_capacity_per_replica.toFixed(2),
 			);
 		}
 
 		const percentCapacityAcrossAllReplicasInput =
 			document.querySelector<HTMLInputElement>(
 				"#percent_capacity_across_all_replicas",
 			);
+
 		if (percentCapacityAcrossAllReplicasInput) {
-			percentCapacityAcrossAllReplicasInput.value = round(
-				percent_capacity_across_all_replicas,
-				2,
+			percentCapacityAcrossAllReplicasInput.value = String(
+				percent_capacity_across_all_replicas.toFixed(2),
 			);
 		}
 
 		const maxDnsRequestPerMinInput = document.querySelector<HTMLInputElement>(
 			"#max_dns_request_per_min",
 		);
+
 		if (maxDnsRequestPerMinInput) {
-			maxDnsRequestPerMinInput.value = round(max_dns_request_per_min, 2);
+			maxDnsRequestPerMinInput.value = String(
+				max_dns_request_per_min.toFixed(2),
+			);
 		}
 	}