zjlab-vis

zjlab-vis (under development)

Interactive visual analytics components.

Uses vue, sass, antd-vue, g2plot, d3

Published at https://www.npmjs.com/package/zjlab-vis/

Install

npm install zjlab-vis

or

yarn add zjlab-vis

Usage

Import and register the visualization components.

import Vue from 'vue'
import { Example } from 'zjlab-vis'
Vue.use(Example)

Inject data and custom options to create an instance.

<Example :data="data" :encoding="encoding" />

Refer to documentation for data specification and available options.

Dev

Git WorkFlow

Refer to Git Workflow.

# fetch remote first
git fetch origin

# checkout a feature branch off the origin/development
git checkout -b feature-whatever origin/development

# working on your code
...
# check diff and affected files
git diff origin/development
git status

# Do your coding part
# Do not forget to lint and format your file before commit, e.g. go fmt ./...
# In this project
yarn lint

# commit your code
# please avoid the use `git commit --amend` since we want a complete commit history
git add .
git commit -m "a reasonable commit message"

# NOTE: rebase first, and try fix conflicts before you push
git fetch origin
git rebase -i origin/development

# (if conflicts) fix your code then
git add .
git rebase --continue

# push it to origin
git push -u origin feature-whatever

Go to gitlab and create a merge request to development branch for your feature e.g. url https://git.zjvis.org/<group_name>/<project_name>/merge_requests/new.

Assign the merge request to a project maintainer like @chenjiahui. Fix conflicts if any.

CI

The update will trigger a gitlab-ci pipeline that tests your code.

If the pipeline failed, modify locally and push again. This triggers a new testing pipeline.

Package Management

Using yarn.

Add a Component

Create a directory under src/components/ with three files:

• YourComponent.Vue: the component per se,
• index.js：add install method to form a vue plugin and export,
• index.md：the doc file of component api.

See examples in src/components/.

You may further split the code into multiple *.vue files if your component is complex.

Notes:

• reuse other lib if possible,
• leave default values for options whenever applicable,
• be careful with globals, e.g. html id, d3.selectAll('circle'), think about other components, multiple instances of a component, and code outside this project,
• use scoped style in *.vue files,
• no vuex support.

Test Component

Functional Test

Create src/tests/TestYourComponent.Vue, import your component and test all valid cases of all its options.

Import TestYourComponent.Vue into src/main.js and run

yarn serve

Formal Test

No formal test. Use lint + build for now. Fix errors and warnings if any.

yarn run test

Publish

Merge development branch onto master, tag with vX.X.X (maintainer only).