Clean up number formatting util (#5725)

* Clean up number formatting util

- Deduplicate number_format util
- Add tests for number_format util
- Add number formatting to visitor change percentage in site overview

* Move number_format to TextHelpers

- Move number_format to a more generic place in TextHelpers
- Revert the places where we use unlimited to use the inline util

extra/lib/plausible_web/live/customer_support/team.ex

@@ -364,9 +364,7 @@ defmodule PlausibleWeb.Live.CustomerSupport.Team do
     "unlimited"
   end
 
-  defp number_format(number) when is_integer(number) do
-    Cldr.Number.to_string!(number)
+  defp number_format(input) do
+    PlausibleWeb.TextHelpers.number_format(input)
   end
-
-  defp number_format(other), do: other
 end

extra/lib/plausible_web/live/customer_support/team/components/billing.ex

@@ -71,7 +71,9 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Billing do
             <.td>{cycle}</.td>
             <.td>{date}</.td>
             <.td>
-              <span class={if total > limit, do: "text-red-600"}>{number_format(total)}</span>
+              <span class={if total > limit, do: "text-red-600"}>
+                {number_format(total)}
+              </span>
             </.td>
             <.td>{number_format(limit)}</.td>
           </:tbody>
@@ -360,12 +362,10 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Billing do
     "unlimited"
   end
 
-  defp number_format(number) when is_integer(number) do
-    Cldr.Number.to_string!(number)
+  defp number_format(input) do
+    PlausibleWeb.TextHelpers.number_format(input)
   end
 
-  defp number_format(other), do: other
-
   defp sanitize_params(params) do
     params
     |> Enum.map(&clear_param/1)
@@ -403,7 +403,8 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Billing do
   defp preview_number(n) do
     case Integer.parse("#{n}") do
       {n, ""} ->
-        number_format(n) <> " (#{PlausibleWeb.StatsView.large_number_format(n)})"
+        number_format(n) <>
+          " (#{PlausibleWeb.StatsView.large_number_format(n)})"
 
       _ ->
         "0"

lib/plausible_web/components/billing/billing.ex

@@ -198,8 +198,8 @@ defmodule PlausibleWeb.Components.Billing do
         {@title}
       </td>
       <td class="text-sm py-4 sm:whitespace-nowrap text-right">
-        {Cldr.Number.to_string!(@usage)}
-        {if is_number(@limit), do: "/ #{Cldr.Number.to_string!(@limit)}"}
+        {PlausibleWeb.TextHelpers.number_format(@usage)}
+        {if is_number(@limit), do: "/ #{PlausibleWeb.TextHelpers.number_format(@limit)}"}
       </td>
     </tr>
     """

lib/plausible_web/live/sites.ex

@@ -394,7 +394,7 @@ defmodule PlausibleWeb.Live.Sites do
         </path>
       </svg>
 
-      {abs(@change)}%
+      {PlausibleWeb.TextHelpers.number_format(abs(@change))}%
     </p>
     """
   end

lib/plausible_web/views/text_helpers.ex

@@ -44,4 +44,10 @@ defmodule PlausibleWeb.TextHelpers do
   def format_date(date) do
     Calendar.strftime(date, "%b %-d, %Y")
   end
+
+  def number_format(number) when is_integer(number) do
+    Cldr.Number.to_string!(number)
+  end
+
+  def number_format(other), do: other
 end

test/plausible_web/views/text_helpers_test.exs

@@ -0,0 +1,44 @@
+defmodule PlausibleWeb.TextHelpersTest do
+  use PlausibleWeb.ConnCase, async: true
+  alias PlausibleWeb.TextHelpers
+  doctest PlausibleWeb.TextHelpers
+
+  describe "number_format" do
+    test "numbers under 1000 stay the same" do
+      assert TextHelpers.number_format(0) == "0"
+      assert TextHelpers.number_format(1) == "1"
+      assert TextHelpers.number_format(123) == "123"
+      assert TextHelpers.number_format(999) == "999"
+    end
+
+    test "thousands get comma separator" do
+      assert TextHelpers.number_format(1_000) == "1,000"
+      assert TextHelpers.number_format(1_234) == "1,234"
+      assert TextHelpers.number_format(12_345) == "12,345"
+      assert TextHelpers.number_format(123_456) == "123,456"
+    end
+
+    test "millions get multiple comma separators" do
+      assert TextHelpers.number_format(1_000_000) == "1,000,000"
+      assert TextHelpers.number_format(1_234_567) == "1,234,567"
+      assert TextHelpers.number_format(12_345_678) == "12,345,678"
+      assert TextHelpers.number_format(123_456_789) == "123,456,789"
+    end
+
+    test "billions get multiple comma separators" do
+      assert TextHelpers.number_format(1_000_000_000) == "1,000,000,000"
+      assert TextHelpers.number_format(1_234_567_890) == "1,234,567,890"
+      assert TextHelpers.number_format(12_345_678_901) == "12,345,678,901"
+    end
+
+    test "handles negative numbers" do
+      assert TextHelpers.number_format(-1234) == "-1,234"
+      assert TextHelpers.number_format(-1_234_567) == "-1,234,567"
+    end
+
+    test "handles edge cases" do
+      assert TextHelpers.number_format(0) == "0"
+      assert TextHelpers.number_format(-0) == "0"
+    end
+  end
+end