downloads-graph/dist/downloads-chart.es.js

A reusable React component to visualize npm download stats using Chart.js.

import re, { useState as te, useEffect as ne } from "react";
import { Line as oe } from "react-chartjs-2";
import { Chart as ae, CategoryScale as se, LinearScale as le, PointElement as ce, LineElement as ie, Title as ue, Tooltip as fe, Legend as de } from "chart.js";
var h = { exports: {} }, b = {};
/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var I;
function me() {
  if (I) return b;
  I = 1;
  var l = Symbol.for("react.transitional.element"), m = Symbol.for("react.fragment");
  function i(u, a, s) {
    var E = null;
    if (s !== void 0 && (E = "" + s), a.key !== void 0 && (E = "" + a.key), "key" in a) {
      s = {};
      for (var f in a)
        f !== "key" && (s[f] = a[f]);
    } else s = a;
    return a = s.ref, {
      $$typeof: l,
      type: u,
      key: E,
      ref: a !== void 0 ? a : null,
      props: s
    };
  }
  return b.Fragment = m, b.jsx = i, b.jsxs = i, b;
}
var _ = {};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var M;
function Ee() {
  return M || (M = 1, process.env.NODE_ENV !== "production" && function() {
    function l(e) {
      if (e == null) return null;
      if (typeof e == "function")
        return e.$$typeof === Q ? null : e.displayName || e.name || null;
      if (typeof e == "string") return e;
      switch (e) {
        case x:
          return "Fragment";
        case J:
          return "Profiler";
        case q:
          return "StrictMode";
        case X:
          return "Suspense";
        case H:
          return "SuspenseList";
        case B:
          return "Activity";
      }
      if (typeof e == "object")
        switch (typeof e.tag == "number" && console.error(
          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
        ), e.$$typeof) {
          case U:
            return "Portal";
          case G:
            return (e.displayName || "Context") + ".Provider";
          case z:
            return (e._context.displayName || "Context") + ".Consumer";
          case V:
            var r = e.render;
            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
          case Z:
            return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
          case N:
            r = e._payload, e = e._init;
            try {
              return l(e(r));
            } catch {
            }
        }
      return null;
    }
    function m(e) {
      return "" + e;
    }
    function i(e) {
      try {
        m(e);
        var r = !1;
      } catch {
        r = !0;
      }
      if (r) {
        r = console;
        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
        return t.call(
          r,
          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
          n
        ), m(e);
      }
    }
    function u(e) {
      if (e === x) return "<>";
      if (typeof e == "object" && e !== null && e.$$typeof === N)
        return "<...>";
      try {
        var r = l(e);
        return r ? "<" + r + ">" : "<...>";
      } catch {
        return "<...>";
      }
    }
    function a() {
      var e = A.A;
      return e === null ? null : e.getOwner();
    }
    function s() {
      return Error("react-stack-top-frame");
    }
    function E(e) {
      if (C.call(e, "key")) {
        var r = Object.getOwnPropertyDescriptor(e, "key").get;
        if (r && r.isReactWarning) return !1;
      }
      return e.key !== void 0;
    }
    function f(e, r) {
      function t() {
        D || (D = !0, console.error(
          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
          r
        ));
      }
      t.isReactWarning = !0, Object.defineProperty(e, "key", {
        get: t,
        configurable: !0
      });
    }
    function v() {
      var e = l(this.type);
      return Y[e] || (Y[e] = !0, console.error(
        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
      )), e = this.props.ref, e !== void 0 ? e : null;
    }
    function k(e, r, t, n, d, c, S, g) {
      return t = c.ref, e = {
        $$typeof: y,
        type: e,
        key: r,
        props: c,
        _owner: d
      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
        enumerable: !1,
        get: v
      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: 0
      }), Object.defineProperty(e, "_debugInfo", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: null
      }), Object.defineProperty(e, "_debugStack", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: S
      }), Object.defineProperty(e, "_debugTask", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: g
      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
    }
    function T(e, r, t, n, d, c, S, g) {
      var o = r.children;
      if (o !== void 0)
        if (n)
          if (K(o)) {
            for (n = 0; n < o.length; n++)
              p(o[n]);
            Object.freeze && Object.freeze(o);
          } else
            console.error(
              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
            );
        else p(o);
      if (C.call(r, "key")) {
        o = l(e);
        var R = Object.keys(r).filter(function(ee) {
          return ee !== "key";
        });
        n = 0 < R.length ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}", F[o + n] || (R = 0 < R.length ? "{" + R.join(": ..., ") + ": ...}" : "{}", console.error(
          `A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,
          n,
          o,
          R,
          o
        ), F[o + n] = !0);
      }
      if (o = null, t !== void 0 && (i(t), o = "" + t), E(r) && (i(r.key), o = "" + r.key), "key" in r) {
        t = {};
        for (var j in r)
          j !== "key" && (t[j] = r[j]);
      } else t = r;
      return o && f(
        t,
        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
      ), k(
        e,
        o,
        c,
        d,
        a(),
        t,
        S,
        g
      );
    }
    function p(e) {
      typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
    }
    var w = re, y = Symbol.for("react.transitional.element"), U = Symbol.for("react.portal"), x = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), G = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), N = Symbol.for("react.lazy"), B = Symbol.for("react.activity"), Q = Symbol.for("react.client.reference"), A = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, K = Array.isArray, O = console.createTask ? console.createTask : function() {
      return null;
    };
    w = {
      "react-stack-bottom-frame": function(e) {
        return e();
      }
    };
    var D, Y = {}, $ = w["react-stack-bottom-frame"].bind(
      w,
      s
    )(), L = O(u(s)), F = {};
    _.Fragment = x, _.jsx = function(e, r, t, n, d) {
      var c = 1e4 > A.recentlyCreatedOwnerStacks++;
      return T(
        e,
        r,
        t,
        !1,
        n,
        d,
        c ? Error("react-stack-top-frame") : $,
        c ? O(u(e)) : L
      );
    }, _.jsxs = function(e, r, t, n, d) {
      var c = 1e4 > A.recentlyCreatedOwnerStacks++;
      return T(
        e,
        r,
        t,
        !0,
        n,
        d,
        c ? Error("react-stack-top-frame") : $,
        c ? O(u(e)) : L
      );
    };
  }()), _;
}
var W;
function pe() {
  return W || (W = 1, process.env.NODE_ENV === "production" ? h.exports = me() : h.exports = Ee()), h.exports;
}
var P = pe();
ae.register(
  se,
  le,
  ce,
  ie,
  ue,
  fe,
  de
);
function ve({
  packageName: l,
  borderColor: m,
  backgroundColor: i
}) {
  const [u, a] = te(null);
  if (ne(() => {
    async function E() {
      try {
        const v = await (await fetch(
          `https://api.npmjs.org/downloads/range/last-month/${l}`
        )).json(), k = v.downloads.map((p) => p.day), T = v.downloads.map((p) => p.downloads);
        a({
          labels: k,
          datasets: [
            {
              label: `Downloads per day for ${l}`,
              data: T,
              borderColor: `${m}`,
              backgroundColor: `${i}`,
              fill: !0,
              tension: 0.3
            }
          ]
        });
      } catch (f) {
        console.error("Failed to fetch downloads:", f);
      }
    }
    E();
  }, [l, m, i]), !u) return /* @__PURE__ */ P.jsx("p", { children: "Loading chart..." });
  const s = {
    responsive: !0,
    maintainAspectRatio: !1,
    plugins: {
      legend: { position: "top" },
      title: { display: !0, text: "NPM Downloads (Last 30 Days)" }
    },
    scales: {
      x: {
        ticks: { maxTicksLimit: 10 }
      },
      y: {
        beginAtZero: !0
      }
    }
  };
  return /* @__PURE__ */ P.jsx("div", { className: "downloads-chart-container", style: { minHeight: "300px" }, children: /* @__PURE__ */ P.jsx(oe, { data: u, options: s }) });
}
export {
  ve as default
};