You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
rozetko
8264719c82
|
4 months ago | |
---|---|---|
build | 10 months ago | |
demo | 8 months ago | |
src | 4 months ago | |
.gitignore | 1 year ago | |
CHANGELOG.md | 3 years ago | |
LICENSE | 3 years ago | |
README.md | 12 months ago | |
css.d.ts | 3 years ago | |
package.json | 4 months ago | |
tsconfig.json | 8 months ago | |
yarn.lock | 1 year ago |
README.md
Chartwerk Core
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 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
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.
datapoints = [number, number][]; // 0 index for X, 1 index for Y
target
- id of metric. Required param, should be unique.
target: string;
Options:
Options is a config working for whole chart and metrics. All options are optional.
margin
— chart container positioning;
margin = {
top: number,
right: number,
bottom: number,
left: number,
}
colors
: array of metrics colors (should be equal or greater than series length);
['red', 'blue', 'green']
labelFormat
: labels for axes.
{
xAxis: string;
yAxis: string;
}
for example:
{
xAxis: 'Time';
yAxis: 'Value';
}
bounds
: specify which metrics should be rendered as confidence. (TODO: move to@chartwerk/line-chart
)$__metric_name
macro can be used here. It will be replaced with each metric's name to find it's bound.
{
upper: string;
lower: string;
}
for example: metric names: 'serie', 'serie upper_bound', 'serie lower_bound'
bounds={
upper: '$__metric_name upper_bound';
lower: '$__metric_name lower_bound';
}
'serie upper_bound', 'serie lower_bound' metrics will be rendered as serie
metric confidence;
timeRange
: time range in timestamps
{
from: number;
to: number;
}
for example:
{
from: 1582770000000;
to: 1582810000000;
}
eventsCallbacks
: event callbacks
{
zoomIn: (range: [number, number]) => void,
zoomOut: (center: number) => void,
mouseMove: (evt: any) => void,
mouseOut: () => void,
onLegendClick: (idx: number) => void
}