An open source Vue component toolkit to quickly build realtime dashboards and allow for instant sharing of dashboards and charts
What is JS Catalyst for?
JS Catalyst was built to allow both designers and developers to create feature-rich and sleek dashboards. By creating charting components that accept flexible data it is easy to just drop a component in on any page and feed it the data.
yarn add jscatalyst
npm install jscatalyst
To use it directly in the browser please use the unpkg link. This will automatically load in the jscatalst.min.js file. Please also include the css for the project so that all charts and components will be styled correctly.
JSCatalyst has a Yeoman generator to make getting started a breeze.
yo and the generator package
npm install -g yo npm install -g generator-jscatalyst
Make a new directory and cd into it.
mkdir myproject && cd myproject
Run the generator
In your main.js file where your app is created please make sure to import the minified css for JS Catalyst.
To use any of the charts or components in the package just import them and place them in a view. If the component is a chart it is important to wrap it in a div and give it a set height. All charts render based on the size of their parent container.
There are three plugins that are included in JS Catalyst. The encapsulate all the logic needed to add theming, screen-sharing, and authentication to your project. To use any of these plugins, import them in your main.js file and call Vue.use().
Both the authentication, and theme plugin require extra options to be passed to them. They rely on having a Vuex store and the Vue Router to be present and in use in your project.
// pass in the Vuex store and an array of your themesVue// pass in the Vuex store, Vue Router, and the base URL of your apiVue
JS Catalyst is an open source project so we gladly accept help with adding new features and new components! To contribute please follow these steps,
- Fork the JS Catalyst repo
- Create a new branch for your feature (
git checkout -b your-new-feature)
- Test your new feature/component in our sandbox environment by placing it in the App.vue file and running npm start
- Please make sure to include tests for your component or feature
- Commit your changes (
git commit -am 'Add new feature/component')
- Push your code to your branch on Github (
git push origin your-new-feature)
- Create a pull request to be reviewed by our team
For guidelines on how to create a new component please see the JS Catalyst docs. Thanks for your help!