2525 .version { display : inline-block; margin-left : 8px ; font-size : 14px ; color : # 6a737d ; }
2626 .copy { position : absolute; top : 8px ; right : 8px ; appearance : none; border : 1px solid # d0d7de ; background : # fff ; color : # 24292f ; border-radius : 4px ; padding : 4px 8px ; font-weight : 600 ; font-size : 12px ; cursor : pointer; opacity : 0.8 ; }
2727 .copy : hover { opacity : 1 ; background : # f6f8fa ; }
28+ .chart { position : relative; height : 280px ; }
2829</ style >
2930</ head >
3031< body >
@@ -57,8 +58,16 @@ <h2>Quick start</h2>
5758# generate and commit
5859lazycommit</ code > </ pre >
5960 </ div >
61+
62+ < div class ="section ">
63+ < h2 > Downloads</ h2 >
64+ < div class ="chart ">
65+ < canvas id ="downloads-chart " aria-label ="Daily npm downloads for lazycommitt " role ="img "> </ canvas >
66+ </ div >
67+ </ div >
6068 </ div >
6169
70+ < script src ="https://cdn.jsdelivr.net/npm/chart.js "> </ script >
6271 < script >
6372 ( async function loadStars ( ) {
6473 try {
@@ -77,6 +86,53 @@ <h2>Quick start</h2>
7786 } catch { /* noop */ }
7887 } ) ( ) ;
7988
89+ ( async function loadDownloads ( ) {
90+ try {
91+ const pkg = 'lazycommitt' ;
92+ const r = await fetch ( `https://api.npmjs.org/downloads/range/last-year/${ pkg } ` ) ;
93+ const j = await r . json ( ) ;
94+ if ( ! j || ! Array . isArray ( j . downloads ) ) return ;
95+ const byMonth = new Map ( ) ;
96+ for ( const d of j . downloads ) {
97+ const month = String ( d . day ) . slice ( 0 , 7 ) ; // YYYY-MM
98+ const count = typeof d . downloads === 'number' ? d . downloads : 0 ;
99+ byMonth . set ( month , ( byMonth . get ( month ) ?? 0 ) + count ) ;
100+ }
101+ const labels = Array . from ( byMonth . keys ( ) ) . sort ( ) ;
102+ const values = labels . map ( m => byMonth . get ( m ) ) ;
103+ const el = document . getElementById ( 'downloads-chart' ) ;
104+ if ( ! el || ! window . Chart ) return ;
105+ new Chart ( el , {
106+ type : 'line' ,
107+ data : {
108+ labels,
109+ datasets : [ {
110+ label : 'Monthly downloads' ,
111+ data : values ,
112+ borderColor : '#24292f' ,
113+ backgroundColor : 'rgba(36,41,47,0.08)' ,
114+ fill : true ,
115+ pointRadius : 2 ,
116+ tension : 0.2
117+ } ]
118+ } ,
119+ options : {
120+ interaction : { mode : 'index' , intersect : false } ,
121+ plugins : {
122+ legend : { display : true } ,
123+ tooltip : { enabled : true }
124+ } ,
125+ scales : {
126+ x : { ticks : { maxTicksLimit : 12 } } ,
127+ y : { beginAtZero : false }
128+ } ,
129+ responsive : true ,
130+ maintainAspectRatio : false
131+ }
132+ } ) ;
133+ } catch { /* noop */ }
134+ } ) ( ) ;
135+
80136 document . addEventListener ( 'click' , function ( e ) {
81137 const btn = e . target . closest ( '.copy' ) ;
82138 if ( ! btn ) return ;
0 commit comments