Contributing to Vue Data Ui

[graphieros]

Vue Data Ui is an open source Vue 3 data visualization components library.

With 50+ components, from classic charts to original ones, we wish to propose reliable visualizations with a different touch, and hope the current state of the library is on the right track to do just that.

Contributions are welcome !

1. Clone the project
2. npm i
3. npm run simple-build will create the local dist
4. npm run dev will add temporarily the local 'vue-data-ui' package to package.json and start the dev server. A manual testing page is available there to tamper with datasets and configs.
5. npm run prod will run tests and remove the local 'vue-data-ui' package from package.json. If all tests pass, you can submit your PR.

Adding new features

Configuration

All components of the library use a configuration object holding default values, allowing the user to provide the config prop with only the attributes they need to tweak.

If a feature requires additional default configuration:

1. update the useConfig.js file
2. update the types in vue-data-ui.d.ts file
3. update the testing arena with the new config items

Adding slots, emits, exposed methods

When adding features involving slots, emits or exposed methods, please update the README file under the components section.

Updating the vue-data-ui universal component

The VueDataUi universal component can be the sole component imported by users. It will async import the selected component, making a lighter use of the library.

If a feature added in a component requires the addition of a new emit or a new exposed method, they need to be referenced in the vue-data-ui.vue component.

Updating the testing arena

The testing arena provides a quick way to visually test changes made on components, and toggle inputs to test configs.
npm run dev starts the dev server and serves a page where components are listed (App.vue).

The page shows either 4 or 5 versions of the tested component:

1. responsive version (if applicable) in a resizable container
2. local component
3. local VueDataUi component
4. build component
5. build VueDataUi component

All versions 2 to 5 must be identical after running npm run prod then npm run dev

The testing arena is pretty raw in terms of layout. Feel free to make it better ;)

Cheers

[lucaspmarra]

At first, it was quite confusing for me to understand the whole workflow to be able to change and test the code.
Is it possible to streamline this process?

[graphieros]

I would love to streamline the process.
Do you have any suggestions ?