Vuejs-Npm stats: npm-stats - npm package download statistics dashboard

npm-stats

npm-stats

Generate beautiful charts from your npm package statistics

Visit

www.npm-stats.org

?‍? Tutorial

If you want you can learn how to build a similar service with following tutorials:

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

Support

Buy Me A Coffee

Comments

  • Add social sharing
    Add social sharing

    Apr 26, 2017

    Social Sharing & SEO

    💡 Idea

    It would be cool if you could share the current statistics page on social media. With a screenshot of the chart.

    ⚡ Services

    • Twitter
    • Facebook
    • ?

    🔖 Information

    Preview

    enhancement Hacktoberfest 
    Reply
  • Move to nuxtjs
    Move to nuxtjs

    Jul 19, 2017

    I guess it would be a good idea to refactor npm-stats to nuxtjs to utilize ssr

    enhancement Hacktoberfest 
    Reply
  • Question about used solution to render graphs
    Question about used solution to render graphs

    Jul 25, 2018

    Sorry to ask this here but I couldn't find any solution for my issue.

    I'm trying to use a similar approach to your project where labels and datasets are defined in a child component with binds to props in the parent component but I'm not getting any results.

    "Vue.js devtools" add-on shows that props contain data passed in the parent component however the initial console log show empty arrays:

    loadData init
    Array []
    Array []
    

    So due to the fact that "Chart.js does not provide a live update if you change the datasets" I tried reactiveProp mixin which throws the error below, most likely because I'm updating only a single dataset:

    Error in callback for watcher "chartData": "TypeError: newData.datasets is undefined"
    

    Questions:

    1. How the charts in your project are updated if initially, bound arrays are empty and I don't see any related mixin or watcher?

    2. How to use vue-chartjs mixins to provide live updates in this case? I want to keep all the options and config in the chart component and just update the labels and datatsets.

    This is my example in a codesandbox.

    Btw, this works with computed properties but not with data/methods for some reason.

    Thanks for this great software!

    Reply
  • [Snyk] Fix for 1 vulnerable dependencies
    [Snyk] Fix for 1 vulnerable dependencies

    Dec 7, 2018

    Description

    This PR fixes one or more vulnerable packages in the npm dependencies of this project. See the Snyk test report for more details.

    Snyk Project: apertureless/npm-stats:package.json

    Snyk Organization: apertureless

    Lockfile

    If you are using package-lock.json or yarn.lock, please re-lock your dependencies and push an updated lockfile before merging this PR.

    Changes included in this PR

    • Changes to the following files to upgrade the vulnerable dependencies to a fixed version:
      • package.json

    Vulnerabilities that will be fixed

    With an upgrade:

    You can read more about Snyk's upgrade and patch logic in Snyk's documentation.

    Check the changes in this PR to ensure they won't cause issues with your project.

    Stay secure, The Snyk team

    Note: You are seeing this because you or someone else with access to this repository has authorised Snyk to open Fix PRs. To review the settings for this Snyk project please go to the project settings page.

    Reply
  • [Snyk] Fix for 1 vulnerable dependencies
    [Snyk] Fix for 1 vulnerable dependencies

    May 5, 2019

    Description

    This PR fixes one or more vulnerable packages in the npm dependencies of this project. See the Snyk test report for more details.

    Snyk Project: apertureless/npm-stats:package.json

    Snyk Organization: apertureless

    Changes included in this PR

    • A Snyk policy (.snyk) file, with updated settings.

    Vulnerabilities that will be fixed

    With a Snyk patch:

    You can read more about Snyk's upgrade and patch logic in Snyk's documentation.

    Check the changes in this PR to ensure they won't cause issues with your project.

    Stay secure, The Snyk team

    Note: You are seeing this because you or someone else with access to this repository has authorised Snyk to open Fix PRs. To review the settings for this Snyk project please go to the project settings page.

    Reply
  • Suggest new feature to count cumulatively
    Suggest new feature to count cumulatively

    Nov 3, 2020

    It would be great if there is a feature that counts the number of package downloads cumulatively.

    I would like to see the overall download count trend for the package.

    Thank you again for providing great features and pretty http://npm-stats.org/.

    Feature Request 
    Reply
  • Added vue-meta
    Added vue-meta

    Oct 1, 2017

    Global meta info stored in App.vue, page settings stored in metaInfo object on page template Issue #13

    Hacktoberfest 
    Reply
  • [Snyk Update] New fixes for 1 vulnerable dependency path
    [Snyk Update] New fixes for 1 vulnerable dependency path

    Dec 1, 2017

    This project has vulnerabilities that could not be fixed, or were patched when no upgrade was available. Good news, new upgrades or patches have now been published! This pull request fixes vulnerable dependencies you couldn’t previously address.

    The PR includes:

    • package.json scripts and a Snyk policy (.snyk) file, which patch the vulnerabilities that can't be upgraded away and ignore vulnerabilities with no fixes.

    Vulnerabilities that will be fixed

    With a Snyk patch:

    You can read more about Snyk's upgrade and patch logic in Snyk's documentation.

    Note that this pull request only addresses vulnerabilities that previously had no fixes. See the Snyk test report to review and remediate the full list of vulnerable dependencies.

    Check the changes in this PR to ensure they won't cause issues with your project.

    Stay secure, The Snyk team

    Reply
  • Feature/yearly chart
    Feature/yearly chart

    Apr 28, 2017

    Add Downloads per Year Chart

    • Add yearly downloads chart #3
    • Refactor some logic
    • Add package info component
    Reply
  • Get package name from query param
    Get package name from query param

    Apr 18, 2017

    Actual behaviour

    You are at / page and type in the package name. A v-if condition renders the chart on the current page.

    Wanted behavior

    If you type in the package name the the charts are loaded without page reload but the package name gets pushed to the url. So you can share the link.

    npm-stats.org/#/vue-chartjs
    npm-stats.org/#/vue
    
    enhancement 
    Reply
  • Add settings for time range
    Add settings for time range

    Apr 18, 2017

    Right now the time range is set to last-month as a default. Additionally a settings page is needed to set start and end period.

    enhancement 
    Reply
  • fix: changed router pushState and router-view key to re-render component
    fix: changed router pushState and router-view key to re-render component

    Jul 27, 2018

    The problem? On changes of the parameter after /#/ on the router, Start.vue component doesn't re-render itself. This is happening if you go back or forward in history.

    In router-view was added :key="$route.path". This will re-render the component on router changes, according to path.

    In hash router mode history API HTML5 isn't working properly. To leverage it, you should use history mode of vue router. But if you don't want changes on your server htaccess, just use $router methods.

    Reply
  • Formatting axis labels
    Formatting axis labels

    Apr 30, 2017

    Large numbers on the Y axis should be formatted and shortened. 30000 = 30k

    enhancement Hacktoberfest 
    Reply
  • Add vue-meta
    Add vue-meta

    May 9, 2017

    add vue-meta for meta tags and head stuff.

    Hacktoberfest 
    Reply
  • Format the y-axis labels to make it easier to read
    Format the y-axis labels to make it easier to read

    Oct 7, 2017

                                                                                                                                                                                                           
    Reply
  • Chart service seems to be broken
    Chart service seems to be broken

    May 26, 2018

    Today, 26-th of may, 2018, npm-stats.org seems to be not showing charts anymore. There are no errors in console and charts are not showing up (at least in Chrome and Opera - both mobile and desktop).

    Tested with a bunch of Vue packages, including:

    • vue-meta
    • vue-simple-suggest
    • vue
    • vuex

    @apertureless, can you confirm this?

    Reply