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']

• timeInterval: interval in minutes (max value = 60) affecting grid and x-axis ticks.

• tickFormat: config to control the axes ticks format.

{
  xAxis: string; // x-axis time format (see [d3-time-format](https://github.com/d3/d3-time-format#locale_format) } 
  xTickOrientation: TickOrientation; // horizontal, diagonal or vertical orientation
}

for example:

{
  xAxis: '%Y-%m-%d %H:%M',
  xTickOrientation: TickOrientation.DIAGONAL
}

• 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
}