Rolling number

On the web a rolling number runs a JavaScript hook that tweens from the old value to the new one. A Mob component is a pure function of its props and cannot animate itself, and a component that started a timer would start a new one on every render. So MishkaRollingNumber renders whatever integer it is given, formatted, and the screen does the rolling.

MishkaRollingNumber.steps/3 returns the eased sequence of values between two numbers. The screen walks the sequence with Process.send_after/3 and assigns each value in turn. The timer stays in your screen, and the easing is a pure function you can test.

def handle_info({:roll, [next | rest]}, socket) do
  if rest != [], do: Process.send_after(self(), {:roll, rest}, 16)
  {:noreply, Mob.Socket.assign(socket, :count, next)}
end

The number is one Text node, so it takes the same size and color tokens as any other text. separator groups the thousands.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob rolling_number

The generator registers the <RollingNumber> tag so you can use it in ~MOB markup. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaRollingNumber>. Without a prefix the tag is <RollingNumber>.

The component renders whatever number it is given. steps/3 produces the eased sequence, and the screen walks it. MishkaRollingNumber.steps(socket.assigns.count, 1_284, 18) returns 18 values from the current count to 1,284. The screen assigns the first value and sends the rest back to itself every 24 milliseconds. The timer message is {:tap, {:step, rest}}, so it reaches the same clauses as a button tap. The code below uses the showcase app's handle/2 callback. In your own screen, write the clauses as handle_info/2.

Rolling number counting up

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. The number counts up to its target.

<MishkaRollingNumber value={@count} />

# kick it off
def handle(:roll, socket) do
  [next | rest] = MishkaRollingNumber.steps(socket.assigns.count, 1_284, 18)
  if rest != [], do: Process.send_after(self(), {:tap, {:step, rest}}, 24)
  Mob.Socket.assign(socket, :count, next)
end

# and walk it
def handle({:step, [next | rest]}, socket) do
  if rest != [], do: Process.send_after(self(), {:tap, {:step, rest}}, 24)
  Mob.Socket.assign(socket, :count, next)
end

steps/3 counts down as well as up, and the last value lands exactly on the target. Here steps(500, 10, 7) ends on 10. The card in the screenshot has a button that rolls the number on the first card down to 42.

Rolling number counting down

LTR RTL

Preview

Show the whole example Show less

MishkaRollingNumber.steps(500, 10, 7) |> List.last()
#=> 10

separator groups the thousands. The default is a comma, a space gives the European style, and an empty string turns grouping off. Negative numbers keep their sign.

Grouping thousands

LTR RTL

Preview

Show the whole example Show less

<MishkaRollingNumber value={1234567} />
<MishkaRollingNumber value={1234567} separator=" " />
<MishkaRollingNumber value={1234567} separator="" />
<MishkaRollingNumber value={-98765} color={0xFFDC2626} />

The number is one Text node, so text_size and color take the same tokens as any other text. The card in the screenshot also shows a smaller, muted 1,234 below the large one.

Rolling number size and color

LTR RTL

Preview

Show the whole example Show less

<MishkaRollingNumber value={1234} text_size={:"4xl"} color={:primary} />

Helper functions

These attributes of the web component are not ported:

• duration, because the screen's timer sets the pace, as the overview shows.
• locale, because Elixir has no Intl.NumberFormat and guessing the separators of a locale would be worse than not trying. Pass the character you want in separator.
• id and the *_class attributes.

• Headless Rolling Number, the web component this one ports.
• Mob Number Formatter, which renders a number with grouping, decimals, a prefix and a suffix.
• Mob Number Field, a numeric input with decrement and increment buttons.
• Mob Meter, a measurement inside a known range.
• Mob components, the full list of native components.