@tetacom/svg-charts 1.0.2 → 1.1.3

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

@@ -1,242 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-: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

@@ -1,25 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,58 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-: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

@@ -1,25 +0,0 @@
-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

@@ -1,206 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<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

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