zjlab-vis v3.2.0-sp3
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
:addinstall
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).
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago