Number Ticker

"use client";

import { animate } from "motion";
import { useEffect, useRef } from "react";

export interface NumberTickerProps {
  value: number;
  duration?: number;
  locale?: string;
  /**
   * Знаков после запятой. По умолчанию выводится столько же, сколько у `value`:
   * 99.98 останется 99,98, а 1200 — 1 200. Ставь явно, когда нужен фиксированный
   * формат (цена — всегда два знака, счётчик — всегда ноль).
   */
  decimals?: number;
  /** Приписка сразу за числом: «%», «₽», «×». Живёт внутри, чтобы не разъезжаться. */
  suffix?: string;
  className?: string;
}

/** Сколько знаков после запятой у числа: 99.98 → 2, 1200 → 0. */
const fractionDigits = (n: number) => (Number.isInteger(n) ? 0 : (String(n).split(".")[1]?.length ?? 0));

/**
 * Число, «прокручивающееся» от 0 до value при появлении (Motion). Уважает reduced-motion / data-shot.
 *
 * Дробная часть сохраняется: раньше здесь стоял `Math.round`, и «99.98 %» аптайма
 * превращалось в «100 %» — то есть счётчик врал ровно в тех величинах, ради которых
 * его обычно и ставят (доли, рейтинги, цены). Разрядность берётся у самого значения,
 * а `decimals` позволяет её зафиксировать.
 */
export function NumberTicker({
  value,
  duration = 1.4,
  locale = "ru-RU",
  decimals,
  suffix,
  className,
}: NumberTickerProps) {
  const ref = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const digits = decimals ?? fractionDigits(value);
    const fmt = new Intl.NumberFormat(locale, {
      minimumFractionDigits: digits,
      maximumFractionDigits: digits,
    });
    const frozen =
      document.documentElement.hasAttribute("data-shot") ||
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (frozen) {
      el.textContent = fmt.format(value);
      return;
    }
    // старт, когда счётчик реально виден (а не на маунте страницы) — иначе при быстрой
    // загрузке анимация успевает отыграть «за кадром» и выглядит статикой
    let controls: ReturnType<typeof animate> | null = null;
    const io = new IntersectionObserver(
      ([e]) => {
        if (!e?.isIntersecting) return;
        io.disconnect();
        controls = animate(0, value, {
          duration,
          ease: "easeOut",
          onUpdate: (v) => {
            el.textContent = fmt.format(v);
          },
        });
      },
      { threshold: 0.5 },
    );
    io.observe(el);
    return () => {
      io.disconnect();
      controls?.stop();
    };
  }, [value, duration, locale, decimals]);

  return (
    <span className={className}>
      <span ref={ref}>0</span>
      {suffix}
    </span>
  );
}

import { animate } from "motion";

/** Сколько знаков после запятой у числа: 99.98 → 2, 1200 → 0. */
const fractionDigits = (n) => (Number.isInteger(n) ? 0 : (String(n).split(".")[1]?.length ?? 0));

/**
 * Number Ticker — vanilla JS/Motion (без React).
 *
 *   <span id="n">0</span>
 *   <script type="module">
 *     import { initNumberTicker } from './number-ticker.vanilla.js';
 *     initNumberTicker(document.querySelector('#n'), { value: 12480 });
 *     // дробное значение сохраняет разрядность: { value: 99.98 } → «99,98»
 *   </script>
 *
 * @param {HTMLElement} el
 * @param {{ value: number, duration?: number, locale?: string, decimals?: number }} options
 * @returns {() => void} destroy
 */
export function initNumberTicker(el, { value, duration = 1.4, locale = "ru-RU", decimals }) {
  const digits = decimals ?? fractionDigits(value);
  const fmt = new Intl.NumberFormat(locale, {
    minimumFractionDigits: digits,
    maximumFractionDigits: digits,
  });
  const frozen =
    document.documentElement.hasAttribute("data-shot") ||
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (frozen) {
    el.textContent = fmt.format(value);
    return () => {};
  }

  let controls = null;
  // старт, когда счётчик реально виден — иначе отыграет «за кадром»
  const io = new IntersectionObserver(
    ([e]) => {
      if (!e?.isIntersecting) return;
      io.disconnect();
      controls = animate(0, value, {
        duration,
        ease: "easeOut",
        onUpdate: (v) => {
          el.textContent = fmt.format(v);
        },
      });
    },
    { threshold: 0.5 },
  );
  io.observe(el);

  return () => {
    io.disconnect();
    controls?.stop();
  };
}