Browse Source

Merge branch 'init-metrics-container' into 'main'

Metric container

Closes line-pod#14

See merge request chartwerk/core!7
merge-requests/8/merge
Alexey Velikiy 3 years ago
parent
commit
638a22e3f9
  1. 7
      dist/index.d.ts
  2. 2
      dist/index.js
  3. 2
      package.json
  4. 36
      src/index.ts
  5. 1
      src/state.ts

7
dist/index.d.ts vendored

@ -8,13 +8,13 @@ import * as d3 from 'd3';
declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
protected readonly el: HTMLElement;
protected d3Node?: d3.Selection<HTMLElement, unknown, null, undefined>;
protected chartContainer?: d3.Selection<SVGGElement, unknown, null, undefined>;
protected customOverlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;
protected crosshair?: d3.Selection<SVGGElement, unknown, null, undefined>;
protected brush?: d3.BrushBehavior<unknown>;
protected zoom?: any;
protected svg?: d3.Selection<SVGElement, unknown, null, undefined>;
protected state?: PodState<T, O>;
protected state: PodState<T, O>;
protected pan?: d3.ZoomBehavior<Element, unknown>;
protected clipPath?: any;
protected isPanning: boolean;
protected isBrushing: boolean;
@ -32,6 +32,8 @@ declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
protected readonly d3: typeof d3;
protected deltaYTransform: number;
protected debouncedRender: import("lodash").DebouncedFunc<any>;
protected chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>;
protected metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>;
protected grid: Grid;
constructor(_d3: typeof d3, el: HTMLElement, _series: T[], _options: O);
protected addEventListeners(): void;
@ -51,6 +53,7 @@ declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
abstract hideSharedCrosshair(): void;
protected initPodState(): void;
protected initComponents(): void;
protected renderMetricsContainer(): void;
protected createSvg(): void;
protected renderGrid(): void;
protected renderAxes(): void;

2
dist/index.js vendored

File diff suppressed because one or more lines are too long

2
package.json

@ -1,6 +1,6 @@
{
"name": "@chartwerk/core",
"version": "0.3.0",
"version": "0.3.1",
"description": "Chartwerk core",
"main": "dist/index.js",
"types": "dist/index.d.ts",

36
src/index.ts

@ -107,13 +107,13 @@ const DEFAULT_OPTIONS: Options = {
abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
protected d3Node?: d3.Selection<HTMLElement, unknown, null, undefined>;
protected chartContainer?: d3.Selection<SVGGElement, unknown, null, undefined>;
protected customOverlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;
protected crosshair?: d3.Selection<SVGGElement, unknown, null, undefined>;
protected brush?: d3.BrushBehavior<unknown>;
protected zoom?: any;
protected svg?: d3.Selection<SVGElement, unknown, null, undefined>;
protected state?: PodState<T, O>;
protected state: PodState<T, O>;
protected pan?: d3.ZoomBehavior<Element, unknown>;
protected clipPath?: any;
protected isPanning = false;
protected isBrushing = false;
@ -131,7 +131,10 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
protected readonly d3: typeof d3;
protected deltaYTransform = 0;
protected debouncedRender = debounce(this.render.bind(this), 100);
// containers
// TODO: add better names
protected chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>;
protected metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>;
// components
protected grid: Grid;
@ -175,6 +178,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
this.addEvents();
this.renderCrosshair();
this.renderMetricsContainer();
this.renderMetrics();
this.renderLegend();
@ -201,7 +205,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
let options = cloneDeep(newOptions);
defaultsDeep(options, DEFAULT_OPTIONS);
this.options = options;
// TODO: update state if axis ranges were changed
}
protected updateSeries(newSeries: T[]): void {
@ -240,6 +244,22 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
this.grid = new Grid(this.d3, this.chartContainer, svgElParams, this.options.grid);
}
protected renderMetricsContainer(): void {
this.d3.select('.metrics-container').remove();
// TODO: it should be a class with svgElParams as fields
// container for clip path
const clipContatiner = this.chartContainer
.append('g')
.attr('clip-path', `url(#${this.rectClipId})`)
.attr('class', 'metrics-container');
// container for panning
this.metricContainer = clipContatiner
.append('g')
.attr('class', 'metrics-rect');
}
protected createSvg(): void {
this.d3Node.select('svg').remove();
this.svg = this.d3Node
@ -329,6 +349,8 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
}
protected renderCrosshair(): void {
this.d3.selectAll('#crosshair-container').remove();
this.crosshair = this.chartContainer.append('g')
.attr('id', 'crosshair-container')
.style('display', 'none');
@ -463,11 +485,11 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
if(this.options.axis.y1.isActive === true) {
this.initScaleY1 = this.y1Scale.copy();
}
const pan = this.d3.zoom()
this.pan = this.d3.zoom()
.on('zoom', this.onPanning.bind(this))
.on('end', this.onPanningEnd.bind(this));
this.chartContainer.call(pan);
this.chartContainer.call(this.pan);
}
protected renderClipPath(): void {
@ -592,13 +614,11 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
public rescaleMetricAndAxis(event: d3.D3ZoomEvent<any, any>): void {
this.isPanning = true;
this.onMouseOut();
this.onPanningRescale(event);
// TODO: check clear state for necessity
this.renderYAxis();
this.renderXAxis();
// metrics-rect wrapper is required for panning
this.chartContainer.select('.metrics-rect')
.attr('transform', `translate(${this.state.transform.x},${this.state.transform.y}), scale(${this.state.transform.k})`);

1
src/state.ts

@ -22,6 +22,7 @@ const DEFAULT_TRANSFORM = {
// TODO: replace all getters with fields. Because getters will be recalculated on each call. Use scales as example.
// TODO: remove duplicates in max/min values.
// TODO: PodState can be divided in two classes, but it is hard now.
// TODO: PodState.transform has conflicts with d3.zoom.event.transform. It should be synchronized.
export class PodState<T extends TimeSerie, O extends Options> {
private _xValueRange: [number, number];
private _yValueRange: [number, number];

Loading…
Cancel
Save