@tanstack/charts/dist/motion-lite.js

<div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/api/readme/charts.png?theme=dark" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/

import { createSvgChartRenderer } from "./svg-surface.js";
function motionLite(options = {}) {
  const duration = options.duration ?? 240;
  if (!Number.isFinite(duration) || duration < 0) {
    throw new RangeError("motionLite duration must be finite and non-negative.");
  }
  const animation = {
    duration,
    easing: options.easing ?? "ease-out"
  };
  const renderer = {
    ...createSvgChartRenderer(),
    id: "svg-motion-lite",
    mount(container, requestRender) {
      const surface = createSvgChartRenderer().mount(
        container,
        requestRender
      );
      const adopted = container.firstElementChild?.matches("svg.ts-chart");
      const view = container.ownerDocument.defaultView;
      let initial = true;
      let width;
      let height;
      let entrance;
      return {
        renderer,
        supportsStateFocus: true,
        clientToScene: surface.clientToScene,
        paintFocus: surface.paintFocus,
        get element() {
          return surface.element;
        },
        render(scene, renderOptions) {
          const reduced = options.respectReducedMotion !== false && view?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
          const resized = !initial && (width !== scene.width || height !== scene.height);
          const animate = duration > 0 && !reduced && (!resized || options.resize);
          if (!animate) entrance?.cancel();
          surface.render(scene, {
            ...renderOptions,
            animation: !initial && animate ? animation : void 0
          });
          if (initial && !adopted && options.initial !== false && animate) {
            entrance = surface.element.animate?.(
              [
                { opacity: 0 },
                {
                  opacity: view?.getComputedStyle(surface.element).opacity || "1"
                }
              ],
              {
                duration,
                easing: options.easing ?? "ease-out"
              }
            );
          }
          initial = false;
          width = scene.width;
          height = scene.height;
        },
        destroy() {
          entrance?.cancel();
          surface.destroy();
        }
      };
    }
  };
  return renderer;
}
export {
  motionLite
};