downloads-graph
Version:
A reusable React component to visualize npm download stats using Chart.js.
23 lines (22 loc) • 7.52 kB
JavaScript
(function(i,v){typeof exports=="object"&&typeof module<"u"?module.exports=v(require("react"),require("react-chartjs-2"),require("chart.js")):typeof define=="function"&&define.amd?define(["react","react-chartjs-2","chart.js"],v):(i=typeof globalThis<"u"?globalThis:i||self,i.DownloadChart=v(i.React,i.ReactChartjs2,i.Chart))})(this,function(i,v,u){"use strict";var w={exports:{}},_={};/**
* @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 D;function z(){if(D)return _;D=1;var c=Symbol.for("react.transitional.element"),p=Symbol.for("react.fragment");function f(d,a,s){var R=null;if(s!==void 0&&(R=""+s),a.key!==void 0&&(R=""+a.key),"key"in a){s={};for(var m in a)m!=="key"&&(s[m]=a[m])}else s=a;return a=s.ref,{$$typeof:c,type:d,key:R,ref:a!==void 0?a:null,props:s}}return _.Fragment=p,_.jsx=f,_.jsxs=f,_}var h={};/**
* @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 Y;function G(){return Y||(Y=1,process.env.NODE_ENV!=="production"&&function(){function c(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ae?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case y:return"Fragment";case B:return"Profiler";case Z:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case oe: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 H:return"Portal";case K:return(e.displayName||"Context")+".Provider";case Q:return(e._context.displayName||"Context")+".Consumer";case ee:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ne:return r=e.displayName||null,r!==null?r:c(e.type)||"Memo";case I:r=e._payload,e=e._init;try{return c(e(r))}catch{}}return null}function p(e){return""+e}function f(e){try{p(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),p(e)}}function d(e){if(e===y)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===I)return"<...>";try{var r=c(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=P.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function R(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function m(e,r){function t(){M||(M=!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 k(){var e=c(this.type);return W[e]||(W[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 S(e,r,t,n,E,l,g,C){return t=l.ref,e={$$typeof:F,type:e,key:r,props:l,_owner:E},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:k}):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:g}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function x(e,r,t,n,E,l,g,C){var o=r.children;if(o!==void 0)if(n)if(se(o)){for(n=0;n<o.length;n++)b(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 b(o);if($.call(r,"key")){o=c(e);var T=Object.keys(r).filter(function(ce){return ce!=="key"});n=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",J[o+n]||(T=0<T.length?"{"+T.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,T,o),J[o+n]=!0)}if(o=null,t!==void 0&&(f(t),o=""+t),R(r)&&(f(r.key),o=""+r.key),"key"in r){t={};for(var N in r)N!=="key"&&(t[N]=r[N])}else t=r;return o&&m(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),S(e,o,l,E,a(),t,g,C)}function b(e){typeof e=="object"&&e!==null&&e.$$typeof===F&&e._store&&(e._store.validated=1)}var A=i,F=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),Z=Symbol.for("react.strict_mode"),B=Symbol.for("react.profiler"),Q=Symbol.for("react.consumer"),K=Symbol.for("react.context"),ee=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),te=Symbol.for("react.suspense_list"),ne=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),oe=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),P=A.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,se=Array.isArray,j=console.createTask?console.createTask:function(){return null};A={"react-stack-bottom-frame":function(e){return e()}};var M,W={},U=A["react-stack-bottom-frame"].bind(A,s)(),q=j(d(s)),J={};h.Fragment=y,h.jsx=function(e,r,t,n,E){var l=1e4>P.recentlyCreatedOwnerStacks++;return x(e,r,t,!1,n,E,l?Error("react-stack-top-frame"):U,l?j(d(e)):q)},h.jsxs=function(e,r,t,n,E){var l=1e4>P.recentlyCreatedOwnerStacks++;return x(e,r,t,!0,n,E,l?Error("react-stack-top-frame"):U,l?j(d(e)):q)}}()),h}var L;function V(){return L||(L=1,process.env.NODE_ENV==="production"?w.exports=z():w.exports=G()),w.exports}var O=V();u.Chart.register(u.CategoryScale,u.LinearScale,u.PointElement,u.LineElement,u.Title,u.Tooltip,u.Legend);function X({packageName:c,borderColor:p,backgroundColor:f}){const[d,a]=i.useState(null);if(i.useEffect(()=>{async function R(){try{const k=await(await fetch(`https://api.npmjs.org/downloads/range/last-month/${c}`)).json(),S=k.downloads.map(b=>b.day),x=k.downloads.map(b=>b.downloads);a({labels:S,datasets:[{label:`Downloads per day for ${c}`,data:x,borderColor:`${p}`,backgroundColor:`${f}`,fill:!0,tension:.3}]})}catch(m){console.error("Failed to fetch downloads:",m)}}R()},[c,p,f]),!d)return O.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 O.jsx("div",{className:"downloads-chart-container",style:{minHeight:"300px"},children:O.jsx(v.Line,{data:d,options:s})})}return X});