V3.js (D3 + Vue Data Visualization Components)

A collection of customizable, interactive, and reusable data visualization components built using D3 and Vue.js: v3.js.

Usage

To use this module, install locally using the command below, or clone this repository and import the .vue files directly from source. Full documentation can be found on the GitHub Pages Site for this project. Editable example usages and component demos can be found on CodeSandbox, and a deployed demo is also available.

npm i @mitevpi/v3

Importing

In-Component Import

For single use in a component or small set of components.

Static import using the compiled .js file.

// component.vue
import { BarChart } from "@mitevpi/v3";

export default {
  name: "Tester",
  components: {
    BarChart
  }
};

Chunked import using the source .vue file.

// component.vue
export default {
  name: "Tester",
  components: {
    BarChart: () => import("@mitevpi/v3/src/components/BarChart"),
  }
};

Global

Importing the single file .vue components directly. (If using Vue CLI 3 with Babel or TypeScript, it's recommended that you import its src directory. This will minimize the size of your application by preventing duplicate or unnecessary polyfills.)

Importing source .vue file.

// main.js
import BarChart from "@mitevpi/v3/src/components";
Vue.use(BarChart);

Importing the bundled .js.

// main.js
import BarChart from "@mitevpi/v3";
Vue.use(BarChart);

Documentation

Full documentation can be found on the GitHub Pages Site for this project.Editable example usages and component demos can be found on CodeSandbox, and a deployed demo is also available.

Developer Documentation

Building

In order to contribute to this project, fork/clone this repository locally. After cloning is completed, you can install dependencies and start a development server by running the commands below in the root directory of this repository. Once the development server is running, view localhost:8080 using Chrome and Vue.js Dev Tools.

npm i
npm run serve

The served "app" is a simple container for the individual components which make up the library. It's only used for testing/visualizing components, and will not be included in the final library build and distribution.

Commands

The following commands are used to develop the project:

1. npm run build - Build the package distribution bundle.
2. npm run serve - Start a development server with live-reloading on changes. (Used for previewing individual components.)
3. npm run lint - Lint code using ESLint and Vue, AirBnB, and Prettier configs.
4. npm test - Run unit tests for the individual components in the package.
5. vuese gen - Generate components documentation through the Vuese CLI. Must have the CLI installed globally on your machine, as it is not included as a dev dependency here.