@tetacom/svg-charts 1.0.1

package/src/chart/chart-container/chart-container.component.ts

@@ -0,0 +1,242 @@
+import {
+  AfterContentChecked,
+  AfterViewChecked,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import { IChartConfig } from '../model/i-chart-config';
+import { ChartService } from '../service/chart.service';
+import { Observable, tap } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
+import { AxesService } from '../service/axes.service';
+import { Axis } from '../core/axis/axis';
+import { AxisOrientation } from '../model/enum/axis-orientation';
+
+type Opposite = boolean;
+
+@Component({
+  selector: 'teta-chart-container',
+  templateUrl: './chart-container.component.html',
+  styleUrls: ['./chart-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChartContainerComponent
+  implements OnInit, OnChanges, AfterViewChecked, AfterContentChecked
+{
+  @Input() config: IChartConfig;
+
+  yAxes: Map<number, Axis>;
+  xAxes: Map<number, Axis>;
+  size: Observable<DOMRect>;
+
+  private _observer: ResizeObserver;
+  private uniqId: string;
+
+  private filterPositionMap = new Map<
+    Opposite,
+    (axis: Axis) => (_: Axis) => boolean
+  >()
+    .set(
+      true,
+      (axis) => (_: Axis) =>
+        _.options.opposite && _.options.visible && axis.index <= _.index
+    )
+    .set(
+      false,
+      (axis) => (_: Axis) =>
+        _.options.opposite !== true &&
+        _.options.visible &&
+        _.index <= axis.index
+    );
+
+  constructor(
+    private _svc: ChartService,
+    private _cdr: ChangeDetectorRef,
+    private _elementRef: ElementRef,
+    private _axesService: AxesService
+  ) {
+    this.size = this._svc.size.pipe(
+      throttleTime(100, undefined, { trailing: true }),
+      tap(() => {
+        setTimeout(() => {
+          this._cdr.detectChanges();
+        });
+      })
+    );
+
+    this.yAxes = this._axesService.yAxis;
+    this.xAxes = this._axesService.xAxis;
+
+    this.uniqId = (Date.now() + Math.random()).toString(36);
+  }
+
+  ngOnInit(): void {
+    this._observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      this._svc.setSize(entries[0].contentRect);
+    });
+    this._observer.observe(this._elementRef.nativeElement);
+
+    this._svc.init(this.config);
+  }
+
+  private sumSize = (acc, curr) => acc + curr.selfSize;
+
+  private oppositeFilter(axis?: Axis) {
+    return (_) =>
+      _.options.opposite && _.options.visible && axis.index <= _.index;
+  }
+
+  private nonOppositeFilter(axis?: Axis) {
+    return (_) =>
+      _.options.opposite !== true && _.options.visible && _.index <= axis.index;
+  }
+
+  getVisibleRect(size: DOMRect) {
+    const yAxesArray = [...this.yAxes.values()];
+    const xAxesArray = [...this.xAxes.values()];
+
+    const left = yAxesArray
+      .filter((_) => _.options.opposite !== true && _.options.visible)
+      .reduce(this.sumSize, 0);
+
+    const right = yAxesArray
+      .filter((_) => _.options.opposite && _.options.visible)
+      .reduce(this.sumSize, 0);
+
+    const bottom = xAxesArray
+      .filter((_) => _.options.opposite !== true && _.options.visible)
+      .reduce(this.sumSize, 0);
+
+    const top = xAxesArray
+      .filter((_) => _.options.opposite && _.options.visible)
+      .reduce(this.sumSize, 0);
+
+    const rect = {
+      left,
+      top,
+      width: size.width - left - right + 1,
+      height: size.height - top - bottom + 1,
+    };
+
+    return rect;
+  }
+
+  getYAxisTranslate(axis: Axis, size: DOMRect): string {
+    const yAxesArray = [...this.yAxes.values()];
+
+    const translateOpposite = yAxesArray
+      .filter(this.nonOppositeFilter(axis))
+      .reduce(this.sumSize, 0);
+
+    const translateNonOpposite = yAxesArray
+      .filter(this.oppositeFilter(axis))
+      .reduce(this.sumSize, 0);
+
+    return `translate(${
+      axis.options.opposite
+        ? size.width - translateNonOpposite
+        : translateOpposite
+    }, 0)`;
+  }
+
+  getXAxisTranslate(axis: Axis, size: DOMRect): string {
+    const xAxesArray = [...this.xAxes.values()];
+
+    const translateNonOpposite = xAxesArray
+      .filter(this.nonOppositeFilter(axis))
+      .reduce(this.sumSize, 0);
+
+    const translateOpposite = xAxesArray
+      .filter(this.oppositeFilter(axis))
+      .reduce(this.sumSize, 0);
+
+    return `translate(0, ${
+      axis.options.opposite
+        ? translateOpposite
+        : size.height - translateNonOpposite
+    })`;
+  }
+
+  getTranslate(axis?: Axis, size?: DOMRect): string {
+    const xAxesArray = [...this.xAxes.values()];
+    const yAxesArray = [...this.yAxes.values()];
+
+    const oppositeFilter = this.filterPositionMap.get(true);
+    const nonOppositeFilter = this.filterPositionMap.get(false);
+
+    const oppositeOffsetY = yAxesArray.filter(oppositeFilter(axis));
+    const nonOppositeOffsetY = yAxesArray.filter(nonOppositeFilter(axis));
+
+    const oppositeOffsetX = xAxesArray.filter(oppositeFilter(axis));
+    const nonOppositeOffsetX = xAxesArray.filter(nonOppositeFilter(axis));
+
+    const oppositeTranslateY = oppositeOffsetY.reduce(
+      (acc, curr) => acc + curr.selfSize,
+      0
+    );
+    const nonOppisteTranslateY = nonOppositeOffsetY.reduce(
+      (acc, curr) => acc + curr.selfSize,
+      0
+    );
+
+    const oppositeTranslateX = oppositeOffsetX.reduce(
+      (acc, curr) => acc + curr.selfSize,
+      0
+    );
+
+    const nonOppisteTranslateX = nonOppositeOffsetX.reduce(
+      (acc, curr) => acc + curr.selfSize,
+      0
+    );
+
+    const left = yAxesArray
+      .filter((_) => _.options.visible && _.options.opposite !== true)
+      .reduce((acc, curr) => acc + curr.selfSize, 0);
+
+    const top = xAxesArray
+      .filter((_) => _.options.visible && _.options.opposite === true)
+      .reduce((acc, curr) => acc + curr.selfSize, 0);
+
+    if (axis.orientation === AxisOrientation.x) {
+      return `translate(${left}, ${
+        axis.options.opposite
+          ? oppositeTranslateX
+          : size.height - nonOppisteTranslateX
+      })`;
+    }
+
+    if (axis.orientation === AxisOrientation.y) {
+      return `translate(${
+        axis.options.opposite
+          ? size.width - oppositeTranslateY
+          : nonOppisteTranslateY
+      }, ${top})`;
+    }
+
+    return 'translate(0, 0)';
+  }
+
+  mouseMove(event) {
+    this._svc.setPointerMove(event);
+  }
+
+  mouseLeave(event) {
+    this._svc.setPointerMove(event);
+  }
+
+  id(): string {
+    return this.uniqId;
+  }
+
+  ngAfterContentChecked(): void {}
+
+  ngAfterViewChecked(): void {}
+
+  ngOnChanges(changes: SimpleChanges): void {}
+}

package/src/chart/chart-container/gridlines/gridlines.component.html

@@ -0,0 +1,7 @@
+<ng-container *ngFor="let tick of tickYValues">
+  <svg:line [attr.x1]="0" stroke="red" [attr.y1]="y(tick)" [attr.x2]="size?.width" [attr.y2]="y(tick)"></svg:line>
+</ng-container>
+
+<ng-container *ngFor="let tick of tickXValues">
+  <svg:line [attr.x1]="x(tick)" stroke="red" [attr.y1]="0" [attr.x2]="x(tick)" [attr.y2]="size?.height"></svg:line>
+</ng-container>

package/src/chart/chart-container/gridlines/gridlines.component.scss

@@ -0,0 +1,8 @@
+:host {
+  shape-rendering: crispEdges;
+}
+
+:host line {
+  stroke-dasharray: 1,4;
+  stroke: var(--color-text-20);
+}

package/src/chart/chart-container/gridlines/gridlines.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GridlinesComponent } from './gridlines.component';
+
+describe('GridlinesComponent', () => {
+  let component: GridlinesComponent;
+  let fixture: ComponentFixture<GridlinesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GridlinesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GridlinesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/chart/chart-container/gridlines/gridlines.component.ts

@@ -0,0 +1,55 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { ScaleService } from '../../service/scale.service';
+import { AxesService } from '../../service/axes.service';
+
+import { merge, tap } from 'rxjs';
+import { ChartService } from '../../service/chart.service';
+import { ZoomService } from '../../service/zoom.service';
+
+@Component({
+  selector: '[teta-gridlines]',
+  templateUrl: './gridlines.component.html',
+  styleUrls: ['./gridlines.component.scss'],
+})
+export class GridlinesComponent implements OnInit {
+  @Input() size: DOMRect;
+  tickYValues: number[];
+  tickXValues: number[];
+  y: any;
+  x: any;
+
+  constructor(
+    private scaleService: ScaleService,
+    private axesService: AxesService,
+    private chartService: ChartService,
+    private zoomService: ZoomService,
+    private cdr: ChangeDetectorRef
+  ) {
+    merge(this.chartService.size, this.zoomService.zoomed)
+      .pipe(
+        tap(() => {
+          this.draw();
+          this.cdr.detectChanges();
+        })
+      )
+      .subscribe();
+  }
+
+  draw() {
+    this.y = this.scaleService.yScales.get(0);
+    this.x = this.scaleService.xScales.get(0);
+
+    this.tickYValues = this.y.ticks();
+    this.tickXValues = this.x.ticks();
+  }
+
+  ngOnInit(): void {
+    this.draw();
+  }
+}

package/src/chart/chart-container/plotband/plotband.component.html

@@ -0,0 +1,58 @@
+<svg:rect class="plotband"
+          [attr.fill]="getFill(plotband)"
+          [attr.opacity]="plotband.style?.plotband?.opacity"
+          [attr.height]="axis.orientation === orientation.x ? height : bandSize"
+          [attr.width]="axis.orientation === orientation.x ? bandSize : width"
+          [attr.y]="axis.orientation === orientation.y ? to : null"
+          [attr.x]="axis.orientation === orientation.x ? from : null">
+</svg:rect>
+
+<svg:line class="display-grabber"
+          [attr.stroke]="plotband.style?.grabbers?.stroke || 'red'"
+          [attr.stroke-width]="plotband.style?.grabbers?.strokeWidth || 4"
+          [attr.stroke-dasharray]="plotband.style?.grabbers?.strokeDasharray"
+          [attr.x1]="axis.orientation === orientation.x ? from : 0"
+          [attr.x2]="axis.orientation === orientation.x ? from : width"
+          [attr.data-grabber]="'from'"
+          [attr.y1]="axis.orientation === orientation.x ? 0 : from"
+          [attr.y2]="axis.orientation === orientation.x ? height : from">
+</svg:line>
+
+<svg:line class="display-grabber"
+          [attr.stroke]="plotband.style?.grabbers?.stroke || 'red'"
+          [attr.stroke-width]="plotband.style?.grabbers?.strokeWidth || 4"
+          [attr.stroke-dasharray]="plotband.style?.grabbers?.strokeDasharray"
+          [attr.x1]="axis.orientation === orientation.x ? to : 0"
+          [attr.x2]="axis.orientation === orientation.x ? to : width"
+          [attr.data-grabber]="'to'"
+          [attr.y1]="axis.orientation === orientation.x ? 0 : to"
+          [attr.y2]="axis.orientation === orientation.x ? height : to">
+</svg:line>
+
+<svg:line class="grabber"
+          [class.x-grabber]="axis.orientation === orientation.x"
+          [class.y-grabber]="axis.orientation === orientation.y"
+          [attr.stroke]="'red'"
+          [attr.stroke-width]="8"
+          opacity="0"
+          [attr.x1]="axis.orientation === orientation.x ? from : 0"
+          [attr.x2]="axis.orientation === orientation.x ? from : width"
+          [attr.data-grabber]="'from'"
+          [attr.y1]="axis.orientation === orientation.x ? 0 : from"
+          [attr.y2]="axis.orientation === orientation.x ? height : from">
+</svg:line>
+
+<svg:line class="grabber"
+          [class.x-grabber]="axis.orientation === orientation.x"
+          [class.y-grabber]="axis.orientation === orientation.y"
+          [attr.stroke]="'red'"
+          [attr.stroke-width]="8"
+          opacity="0"
+          [attr.x1]="axis.orientation === orientation.x ? to : 0"
+          [attr.x2]="axis.orientation === orientation.x ? to : width"
+          [attr.data-grabber]="'to'"
+          [attr.y1]="axis.orientation === orientation.x ? 0 : to"
+          [attr.y2]="axis.orientation === orientation.x ? height : to">
+</svg:line>
+
+

package/src/chart/chart-container/plotband/plotband.component.scss

@@ -0,0 +1,13 @@
+:host rect:hover {
+  cursor: grab;
+}
+:host rect:active {
+  cursor: grabbing;
+}
+
+:host .x-grabber {
+  cursor: col-resize;
+}
+:host .y-grabber {
+  cursor: row-resize;
+}

package/src/chart/chart-container/plotband/plotband.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlotbandComponent } from './plotband.component';
+
+describe('PlotbandComponent', () => {
+  let component: PlotbandComponent;
+  let fixture: ComponentFixture<PlotbandComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PlotbandComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlotbandComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/chart/chart-container/plotband/plotband.component.ts

@@ -0,0 +1,206 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+} from '@angular/core';
+
+import * as d3 from 'd3';
+import { Plotband } from '../../model/plotband';
+import { ScaleService } from '../../service/scale.service';
+
+import { Axis } from '../../core/axis/axis';
+import { ZoomService } from '../../service/zoom.service';
+import { AxisOrientation } from '../../model/enum/axis-orientation';
+import { IChartEvent } from '../../model/i-chart-event';
+import { ChartService } from '../../service/chart.service';
+
+@Component({
+  selector: '[teta-plot-band]',
+  templateUrl: './plotband.component.html',
+  styleUrls: ['./plotband.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PlotbandComponent implements OnInit {
+  @Input() plotband: Plotband;
+  @Input() axis: Axis;
+  @Input() size: DOMRect;
+  orientation = AxisOrientation;
+
+  private scale: any;
+  domain: number[];
+
+  constructor(
+    private scaleService: ScaleService,
+    private zoomService: ZoomService,
+    private chartService: ChartService,
+    private cdr: ChangeDetectorRef,
+    private element: ElementRef
+  ) {
+    this.zoomService.zoomed.subscribe(() => {
+      this.scale = this.scaleService[
+        this.axis.orientation === AxisOrientation.x ? 'xScales' : 'yScales'
+      ].get(this.axis.index);
+      this.cdr.detectChanges();
+    });
+  }
+
+  emit(event: IChartEvent<Plotband>) {
+    this.chartService.emitPlotband(event);
+  }
+
+  ngOnInit(): void {
+    this.scale = this.scaleService[
+      this.axis.orientation === AxisOrientation.x ? 'xScales' : 'yScales'
+    ].get(this.axis.index);
+
+    this.domain = this.scale.domain();
+
+    const plotbandElement = d3
+      .select(this.element.nativeElement)
+      .select('.plotband');
+
+    const grabElements = d3
+      .select(this.element.nativeElement)
+      .selectAll('.grabber');
+
+    const drag = d3
+      .drag()
+      .subject(() => {
+        if (this.axis.orientation === AxisOrientation.x) {
+          return { x: plotbandElement.attr('x') };
+        }
+
+        if (this.axis.orientation === AxisOrientation.y) {
+          return { y: plotbandElement.attr('y') };
+        }
+      })
+      .on(
+        'start drag end',
+        (event: d3.D3DragEvent<any, Plotband, any>, d: Plotband) => {
+          requestAnimationFrame(() => {
+            let bandSize = parseFloat(
+              plotbandElement.attr(
+                this.axis.orientation === AxisOrientation.x ? 'width' : 'height'
+              )
+            );
+
+            d.to = this.scale.invert(
+              event[AxisOrientation[this.axis.orientation]] +
+                (this.axis.orientation === AxisOrientation.x ? bandSize : 0)
+            );
+
+            d.from = this.scale.invert(
+              event[AxisOrientation[this.axis.orientation]] +
+                (this.axis.orientation === AxisOrientation.y ? bandSize : 0)
+            );
+
+            this.emit({
+              event,
+              target: d,
+            });
+
+            this.cdr.detectChanges();
+          });
+        }
+      );
+
+    let grabberKey;
+
+    const resize = d3
+      .drag()
+      .on(
+        'start drag end',
+        (event: d3.D3DragEvent<any, Plotband, any>, d: Plotband) => {
+          requestAnimationFrame(() => {
+            if (event?.type === 'start') {
+              const { grabber } = event?.sourceEvent?.target?.dataset;
+              grabberKey = grabber;
+            }
+
+            const min = Math.min(...this.domain);
+            const max = Math.max(...this.domain);
+
+            const minValue = d.min ?? min;
+            const maxValue = d.max ?? max;
+            d[grabberKey] = this.scale.invert(
+              event[AxisOrientation[this.axis.orientation]]
+            );
+
+            if (grabberKey === 'from') {
+              const borderMin = d.from <= minValue;
+
+              if (d.from >= d.to) {
+                d.from = d.to;
+              }
+
+              if (borderMin) {
+                d.from = minValue;
+              }
+            }
+
+            if (grabberKey === 'to') {
+              const borderMax = d.to >= maxValue;
+
+              if (borderMax) {
+                d.to = maxValue;
+              }
+
+              if (d.to <= d.from) {
+                d.to = d.from;
+              }
+            }
+
+            this.emit({
+              event,
+              target: d,
+            });
+
+            this.cdr.detectChanges();
+          });
+        }
+      );
+
+    plotbandElement.datum<Plotband>(this.plotband);
+    grabElements.datum<Plotband>(this.plotband);
+
+    if (this.plotband.draggable) {
+      plotbandElement.call(drag);
+    }
+
+    if (this.plotband.resizable) {
+      grabElements.call(resize);
+    }
+  }
+
+  get bandSize(): number {
+    return Math.abs(
+      this.scale(this.plotband.to) - this.scale(this.plotband.from)
+    );
+  }
+
+  get height(): number {
+    return this.size.height;
+  }
+
+  get width(): number {
+    return this.size.width;
+  }
+
+  get from(): number {
+    return this.scale(this.plotband.from);
+  }
+
+  get to(): number {
+    return this.scale(this.plotband.to);
+  }
+
+  getFill(d: Plotband): string {
+    if (d.style?.plotband?.patternImage) {
+      return `url(#${d.style.plotband?.patternImage})`;
+    }
+    return d.style.plotband?.fill;
+  }
+}

package/src/chart/chart-container/plotline/plotline.component.html

@@ -0,0 +1,22 @@
+<svg:line class="plotline"
+          [attr.stroke]="plotline.style?.stroke || 'red'"
+          [attr.stroke-width]="plotline.style?.strokeWidth || 4"
+          [attr.stroke-dasharray]="plotline.style?.strokeDasharray"
+          [attr.x1]="axis.orientation === orientation.x ? value : 0"
+          [attr.x2]="axis.orientation === orientation.x ? value : width"
+          [attr.y1]="axis.orientation === orientation.x ? 0 : value"
+          [attr.y2]="axis.orientation === orientation.x ? height : value">
+</svg:line>
+
+<svg:line class="grabber"
+
+          [class.x-grabber]="axis.orientation === orientation.x"
+          [class.y-grabber]="axis.orientation === orientation.y"
+          [attr.stroke]="'red'"
+          [attr.stroke-width]="8"
+          opacity="0"
+          [attr.x1]="axis.orientation === orientation.x ? value : 0"
+          [attr.x2]="axis.orientation === orientation.x ? value : width"
+          [attr.y1]="axis.orientation === orientation.x ? 0 : value"
+          [attr.y2]="axis.orientation === orientation.x ? height : value">
+</svg:line>

package/src/chart/chart-container/plotline/plotline.component.scss

@@ -0,0 +1,6 @@
+:host .x-grabber {
+  cursor: col-resize;
+}
+:host .y-grabber {
+  cursor: row-resize;
+}