0.0.6 • Published 2 years ago

@lgv/ring-chart v0.0.6

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
2 years ago

Ring Chart

ES6 d3.js ring chart visualization.

Install

# install package
npm install @lgv/ring-chart

Data Format

The following values are the expected input data structure; id is optional.

[
    {
        "id": "a",
        "label": "xyz",
        "value": 1
    },
    {
        "id": "b",
        "label": "abc",
        "value": 3
    }
]

Use Module

import { RingChart } from "@lgv/ring-chart";

// have some data
let data = [
    {
        "id": "a",
        "label": "xyz",
        "value": 1
    },
    {
        "id": "b",
        "label": "abc",
        "value": 3
    }
]

// initialize
const rc = new RingChart(data);

// render visualization
rc.render(document.body);

Environment Variables

The following values can be set via environment or passed into the class.

NameTypeDescription
LGV_HEIGHTintegerheight of artboard
LGV_WIDTHintegerwidth of artboard

Style

Style is expected to be addressed via css. Any style not met by the visualization module is expected to be added by the importing component.

ClassElement
lgv-ring-charttop-level svg element
lgv-arcring arc element
lgv-labelarc text label element

Actively Develop

# clone repository
git clone <repo_url>

# update directory context
cd ring-chart

# run docker container
docker run \
  --rm \
  -it  \
  -v $(pwd):/project \
  -w /project \
  -p 8080:8080 \
  node \
  bash

# FROM INSIDE RUNNING CONTAINER

# install module
npm install .

# run development server
npm run startdocker

# edit src/index.js
# add const rc = new RingChart(data);
# add rc.render(document.body);
# replace `data` with whatever data you want to develop with

# view visualization in browser at http://localhost:8080
0.0.6

2 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago