|
|
|
@ -3,18 +3,51 @@
|
|
|
|
|
|
|
|
|
|
# Chartwerk Core |
|
|
|
|
|
|
|
|
|
Repo contains the core code of chartwerk project: abstrac classes and rendreing of grid together with crosshair! :) |
|
|
|
|
Repo contains the core code of chartwerk project: abstract classes, rendering system, basic components. |
|
|
|
|
See ChartwerkPod to see what is parent for all chartwerk pods and get involved into development. |
|
|
|
|
|
|
|
|
|
## Plugin renders: |
|
|
|
|
- SVG container with: |
|
|
|
|
Everything can be overwritted. |
|
|
|
|
|
|
|
|
|
## Plugin contains: |
|
|
|
|
- SVG container. |
|
|
|
|
- Series and Options models with defaults. |
|
|
|
|
- State model to control charts changes. |
|
|
|
|
- Overlay container to handle all events. |
|
|
|
|
- Zoom events controller. |
|
|
|
|
- Axes, with ticks and labels. |
|
|
|
|
- Grid, which scales using specified time interval. |
|
|
|
|
- Grid, with separate behavior from axis. |
|
|
|
|
- Legend, which can hide metrics. |
|
|
|
|
- Crosshair. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Declare |
|
|
|
|
```js |
|
|
|
|
const pod = new ChartwerkPod( |
|
|
|
|
document.getElementById('chart-div'), |
|
|
|
|
series, |
|
|
|
|
options, |
|
|
|
|
); |
|
|
|
|
pod.render(); |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
## Series |
|
|
|
|
|
|
|
|
|
Series is a list of metrics with datapoints and specific config working for each serie. |
|
|
|
|
series = Serie[] |
|
|
|
|
|
|
|
|
|
- `datapoints` - metric data for rendering. |
|
|
|
|
```js |
|
|
|
|
datapoints = [number, number][]; // 0 index for X, 1 index for Y |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
- `target` - id of metric. Required param, should be unique. |
|
|
|
|
```js |
|
|
|
|
target: string; |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
## Options: |
|
|
|
|
|
|
|
|
|
Options are not mandatory: |
|
|
|
|
Options is a config working for whole chart and metrics. |
|
|
|
|
All options are optional. |
|
|
|
|
|
|
|
|
|
- `margin` — chart container positioning; |
|
|
|
|
```js |
|
|
|
@ -22,7 +55,7 @@ margin={
|
|
|
|
|
top: number, |
|
|
|
|
right: number, |
|
|
|
|
bottom: number, |
|
|
|
|
left: number |
|
|
|
|
left: number, |
|
|
|
|
} |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|