diff --git a/README.md b/README.md index b98e2c1..c640e1a 100755 --- a/README.md +++ b/README.md @@ -3,26 +3,59 @@ # 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. +Everything can be overwritted. -## Plugin renders: -- SVG container with: - - Axes, with ticks and labels. - - Grid, which scales using specified time interval. - - Legend, which can hide metrics. +## 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, 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 -margin={ +margin = { top: number, right: number, bottom: number, - left: number + left: number, } ```