refactor: tighten types and reuse instrument UI

src/shared/lib/display.ts

@@ -7,17 +7,19 @@ type FormatMoneyOptions = {
 
 type Money = { currency: string; value: string };
 
+const dateFormatter = new Intl.DateTimeFormat("ru-RU", {
+	day: "2-digit",
+	month: "2-digit",
+	timeZone: "UTC",
+	year: "numeric",
+});
+
 function formatDate(value: string): string {
-	return new Intl.DateTimeFormat("ru-RU", {
-		day: "2-digit",
-		month: "2-digit",
-		timeZone: "UTC",
-		year: "numeric",
-	}).format(new Date(value));
+	return dateFormatter.format(new Date(value));
 }
 
 function formatDecimal(value: string): string {
-	const [integer, fraction] = value.split(".", DECIMAL_PART_COUNT);
+	const [integer = "", fraction] = value.split(".", DECIMAL_PART_COUNT);
 	const sign = integer.startsWith("-") ? "-" : "";
 	const digits = sign ? integer.slice(1) : integer;
 	const groupSize = 3;
@@ -41,7 +43,7 @@ function formatMoney(
 ): string {
 	if (!money) return "—";
 
-	const [integerPart, fractionPart = ""] = money.value.split(
+	const [integerPart = "", fractionPart = ""] = money.value.split(
 		".",
 		DECIMAL_PART_COUNT,
 	);
@@ -59,20 +61,22 @@ function formatMoney(
 	return `${formatDecimal(decimal)} ${currency}`;
 }
 
+const snapshotFormatter = new Intl.DateTimeFormat("ru-RU", {
+	dateStyle: "short",
+	timeStyle: "short",
+	timeZone: "UTC",
+});
+
 function formatSnapshotTime(value: string): string {
-	return new Intl.DateTimeFormat("ru-RU", {
-		dateStyle: "short",
-		timeStyle: "short",
-		timeZone: "UTC",
-	}).format(new Date(value));
+	return snapshotFormatter.format(new Date(value));
 }
 
 const logoSize = 160;
 
+const chartFormatter = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 4 });
+
 function formatChartValue(value: number) {
-	return new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 4 }).format(
-		value,
-	);
+	return chartFormatter.format(value);
 }
 
 function instrumentLogoUrl(logoName?: null | string): null | string {