@tetacom/svg-charts 1.0.2 → 1.1.3

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

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

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

@@ -1,113 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-} from '@angular/core';
-import { PlotLine } from '../../model/plotline';
-import { Axis } from '../../core/axis/axis';
-import { AxisOrientation } from '../../model/enum/axis-orientation';
-import { ZoomService } from '../../service/zoom.service';
-import { ScaleService } from '../../service/scale.service';
-import * as d3 from 'd3';
-import { IChartEvent } from '../../model/i-chart-event';
-import { Plotband } from '../../model/plotband';
-import { ChartService } from '../../service/chart.service';
-
-@Component({
-  selector: '[teta-plot-line]',
-  templateUrl: './plotline.component.html',
-  styleUrls: ['./plotline.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PlotlineComponent implements OnInit {
-  @Input() plotline: PlotLine;
-  @Input() size: DOMRect;
-  @Input() axis: Axis;
-  orientation = AxisOrientation;
-
-  private scale: any;
-  private domain: number[];
-
-  constructor(
-    private cdr: ChangeDetectorRef,
-    private zoomService: ZoomService,
-    private scaleService: ScaleService,
-    private chartService: ChartService,
-    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();
-    });
-  }
-
-  ngOnInit(): void {
-    this.scale = this.scaleService[
-      this.axis.orientation === AxisOrientation.x ? 'xScales' : 'yScales'
-    ].get(this.axis.index);
-
-    this.domain = this.scale.domain();
-
-    const plotlineElement = d3
-      .select(this.element.nativeElement)
-      .select('.plotline');
-
-    const grabElement = d3
-      .select(this.element.nativeElement)
-      .selectAll('.grabber');
-
-    const drag = d3
-      .drag()
-      .subject(() => {
-        if (this.axis.orientation === AxisOrientation.y) {
-          return { y: plotlineElement.attr('y1') };
-        }
-        if (this.axis.orientation === AxisOrientation.x) {
-          return { x: plotlineElement.attr('x1') };
-        }
-      })
-      .on(
-        'start drag end',
-        (event: d3.D3DragEvent<any, PlotLine, any>, d: PlotLine) => {
-          d.value = this.scale.invert(
-            event[AxisOrientation[this.axis.orientation]]
-          );
-
-          this.emit({
-            event,
-            target: d,
-          });
-
-          this.cdr.detectChanges();
-        }
-      );
-
-    plotlineElement.datum<PlotLine>(this.plotline);
-    grabElement.datum<PlotLine>(this.plotline);
-
-    if (this.plotline.draggable) {
-      grabElement.call(drag);
-    }
-  }
-
-  emit(event: IChartEvent<PlotLine>) {
-    this.chartService.emitPlotline(event);
-  }
-
-  get value() {
-    return this.scale(this.plotline.value);
-  }
-
-  get height(): number {
-    return this.size.height;
-  }
-
-  get width(): number {
-    return this.size.width;
-  }
-}

package/src/chart/chart-container/series/bar/bar-series.component.html

@@ -1,3 +0,0 @@
-<svg:rect *ngFor="let point of series.data" [attr.y]="getY(point)" [attr.x]="getX(point)" [attr.width]="width()"
-          [attr.height]="height(point)"
-          [attr.fill]="point.color"></svg:rect>

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

@@ -1,71 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-} from '@angular/core';
-import * as d3 from 'd3';
-import { SeriesBaseComponent } from '../../../base/series-base.component';
-import { BasePoint } from '../../../model/base-point';
-import { ChartService } from '../../../service/chart.service';
-import { ScaleService } from '../../../service/scale.service';
-import { ZoomService } from '../../../service/zoom.service';
-
-@Component({
-  selector: 'svg:svg[teta-bar-series]',
-  templateUrl: './bar-series.component.html',
-  styleUrls: ['./bar-series.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BarSeriesComponent<T extends BasePoint>
-  extends SeriesBaseComponent<T>
-  implements OnInit, OnChanges
-{
-  private scaleBand: d3.ScaleBand<any>;
-  private y: any;
-
-  constructor(
-    protected override svc: ChartService,
-    protected override cdr: ChangeDetectorRef,
-    protected override scaleService: ScaleService,
-    protected override zoomService: ZoomService,
-    protected override element: ElementRef
-  ) {
-    super(svc, cdr, scaleService, zoomService, element);
-  }
-
-  override ngOnInit(): void {
-    const x = this.scaleService.xScales.get(this.series.xAxisIndex);
-    const y = this.scaleService.yScales.get(this.series.yAxisIndex);
-
-    const domain = this.series.data?.map((_: BasePoint) => _.x);
-    const range = [x(domain[0]), x(domain[domain?.length - 1])];
-
-    this.scaleBand = d3.scaleBand<number>().domain(domain).range(range);
-
-    this.y = y;
-  }
-
-  width() {
-    return this.scaleBand.bandwidth();
-  }
-
-  height(point: BasePoint) {
-    return Math.abs(this.y(0) - this.y(point.y));
-  }
-
-  getX(point: BasePoint) {
-    return this.scaleBand(point.x);
-  }
-
-  getY(point: BasePoint) {
-    return this.y(point.y);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    console.log(changes);
-  }
-}

package/src/chart/chart-container/series/line/line-series.component.html

@@ -1,38 +0,0 @@
-<svg:path
-  class="line"
-  [attr.d]="getPath()"
-  [attr.stroke]="series.color"
-  [attr.stroke-width]="series.style?.strokeWidth"
-  fill="none">
-</svg:path>
-
-<ng-container *ngIf="transform | async as t">
-  <svg:circle
-    r="3"
-    [attr.fill]="series.color"
-    [attr.transform]="'translate('+ t.x +', '+ t.y +')'"
-    [attr.opacity]="display | async">
-  </svg:circle>
-</ng-container>
-
-<ng-container *ngIf="getMarkers() as markers">
-
-    <svg:circle
-      class="marker"
-      *ngFor="let point of markers"
-      [class.draggable-marker]="point?.marker?.draggable"
-      [attr.r]="point.marker.style?.radius ?? 5"
-      [attr.fill]="point.marker.style?.fill ?? 'transparent'"
-      [attr.stroke]="point.marker.style?.stroke ?? 'none'"
-      [attr.stroke-width]="point.marker.style?.strokeWidth"
-      [attr.stroke-dasharray]="point.marker.style?.strokeDasharray"
-      [attr.cx]="x(point.x)"
-      [attr.cy]="y(point.y)"
-    >
-    </svg:circle>
-
-
-</ng-container>
-
-
-

package/src/chart/chart-container/series/line/line-series.component.scss

@@ -1,9 +0,0 @@
-.draggable-marker {
-  cursor: move;
-}
-.active {
-  stroke-opacity: 0.5;
-}
-.marker-grab {
-  opacity: 0;
-}

package/src/chart/chart-container/series/line/line-series.component.spec.ts

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

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

@@ -1,245 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  OnInit,
-} from '@angular/core';
-import * as d3 from 'd3';
-import { SeriesBaseComponent } from '../../../base/series-base.component';
-import { ChartService } from '../../../service/chart.service';
-import { BasePoint } from '../../../model/base-point';
-import { ScaleService } from '../../../service/scale.service';
-import { filter, map, Observable, tap } from 'rxjs';
-
-import { ZoomService } from '../../../service/zoom.service';
-import { TooltipTracking } from '../../../model/enum/tooltip-tracking';
-import { DragPointType } from '../../../model/enum/drag-point-type';
-
-@Component({
-  selector: 'svg:svg[teta-line-series]',
-  templateUrl: './line-series.component.html',
-  styleUrls: ['./line-series.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LineSeriesComponent<T extends BasePoint>
-  extends SeriesBaseComponent<T>
-  implements OnInit, AfterViewInit
-{
-  transform: Observable<Pick<BasePoint, 'x' | 'y'>>;
-  display: Observable<number>;
-
-  svgElement: SVGGeometryElement;
-  x: any;
-  y: any;
-
-  constructor(
-    protected override svc: ChartService,
-    protected override cdr: ChangeDetectorRef,
-    protected override scaleService: ScaleService,
-    protected override zoomService: ZoomService,
-    protected override element: ElementRef
-  ) {
-    super(svc, cdr, scaleService, zoomService, element);
-  }
-
-  override ngOnInit(): void {
-    this.display = this.zoomService.zoomed.pipe(
-      map(({ event }) => {
-        return event?.type === 'end' ? 1 : 0;
-      })
-    );
-
-    this.transform = this.svc.pointerMove.pipe(
-      filter(({ event }) => event),
-      map(({ event }) => {
-        return this.getTransform(event);
-      }),
-      tap((_) => this.cdr.detectChanges())
-    );
-  }
-
-  ngAfterViewInit() {
-    const drag = (node, event: d3.D3DragEvent<any, any, any>, d: BasePoint) => {
-      if (
-        d.marker?.dragType === DragPointType.x ||
-        d.marker?.dragType === DragPointType.xy
-      ) {
-        d.x = this.x.invert(event.x);
-      }
-
-      if (
-        d.marker?.dragType === DragPointType.y ||
-        d.marker?.dragType === DragPointType.xy
-      ) {
-        d.y = this.y.invert(event.y);
-      }
-
-      this.svc.emitPoint({
-        target: {
-          series: this.series,
-          point: d,
-        },
-        event,
-      });
-
-      this.cdr.detectChanges();
-    };
-
-    const dragMarkers = d3
-      .drag()
-      .subject(function (event, d: BasePoint) {
-        const node = d3.select(this);
-        return { x: node.attr('cx'), y: node.attr('cy') };
-      })
-      .on(
-        'start drag end',
-        function (event: d3.D3DragEvent<any, any, any>, d: BasePoint) {
-          const node = d3.select(this);
-
-          drag(node, event, d);
-        }
-      );
-
-    const draggableMarkers = this.series.data?.filter(
-      (_) => _?.marker && _?.marker?.draggable
-    );
-
-    const element = d3
-      .select(this.element.nativeElement)
-      .selectAll('.draggable-marker')
-      .data(draggableMarkers);
-
-    element.call(dragMarkers as any);
-
-    this.svgElement = d3
-      .select(this.element.nativeElement)
-      .select('.line')
-      .node() as SVGGeometryElement;
-  }
-
-  getPath() {
-    this.x = this.scaleService.xScales.get(this.series.xAxisIndex);
-    this.y = this.scaleService.yScales.get(this.series.yAxisIndex);
-
-    const line = d3
-      .line<BasePoint>()
-      .defined((point) => point.x !== null || point.y !== null)
-      .x((point) => this.x(point.x))
-      .y((point) => this.y(point.y));
-
-    const path = line(this.series.data);
-
-    return path;
-  }
-
-  getMarkers() {
-    return this.series.data?.filter((_) => _?.marker);
-  }
-
-  getTransform(event: any): Pick<BasePoint, 'x' | 'y'> {
-    const mouse = d3.pointer(event);
-
-    const foundX = this.scaleService.xScales.get(this.series.xAxisIndex);
-    const foundY = this.scaleService.yScales.get(this.series.yAxisIndex);
-
-    const tooltipTracking = this.svc.config?.tooltip?.tracking;
-
-    const lineIntersection = (
-      p0_x,
-      p0_y,
-      p1_x,
-      p1_y,
-      p2_x,
-      p2_y,
-      p3_x,
-      p3_y
-    ) => {
-      const rV = {} as any;
-      let s1_x, s1_y, s2_x, s2_y;
-      s1_x = p1_x - p0_x;
-      s1_y = p1_y - p0_y;
-      s2_x = p3_x - p2_x;
-      s2_y = p3_y - p2_y;
-
-      let s, t;
-      s =
-        (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) /
-        (-s2_x * s1_y + s1_x * s2_y);
-      t =
-        (s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) /
-        (-s2_x * s1_y + s1_x * s2_y);
-
-      if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
-        // Collision detected
-        rV.x = p0_x + t * s1_x;
-        rV.y = p0_y + t * s1_y;
-      }
-
-      return rV;
-    };
-
-    if (tooltipTracking === TooltipTracking.x) {
-      const bisect = d3.bisector((_: BasePoint) => _.x).right;
-
-      const x0 = foundX.invert(mouse[0]);
-      const rightId = bisect(this.series.data, x0);
-
-      const range = foundY.range();
-
-      const intersect = lineIntersection(
-        mouse[0],
-        range[0],
-        mouse[0],
-        range[1],
-        foundX(this.series.data[rightId - 1]?.x),
-        foundY(this.series.data[rightId - 1]?.y),
-        foundX(this.series.data[rightId]?.x),
-        foundY(this.series.data[rightId]?.y)
-      );
-
-      console.log(intersect);
-
-      this.svc.setTooltip({
-        point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
-        series: this.series,
-      });
-
-      return {
-        x: intersect.x,
-        y: intersect.y,
-      };
-    }
-
-    if (tooltipTracking === TooltipTracking.y) {
-      const bisect = d3.bisector((_: BasePoint) => _.y).right;
-
-      const y0 = foundY.invert(mouse[1]);
-
-      const rightId = bisect(this.series.data, y0);
-      const range = foundX.range();
-
-      const intersect = lineIntersection(
-        range[0],
-        mouse[1],
-        range[1],
-        mouse[1],
-        foundX(this.series.data[rightId - 1]?.x),
-        foundY(this.series.data[rightId - 1]?.y),
-        foundX(this.series.data[rightId]?.x),
-        foundY(this.series.data[rightId]?.y)
-      );
-
-      this.svc.setTooltip({
-        point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
-        series: this.series,
-      });
-
-      return {
-        x: intersect.x,
-        y: intersect.y,
-      };
-    }
-  }
-}

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

@@ -1,80 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ComponentRef,
-  Input,
-  OnInit,
-  SimpleChanges,
-  ViewContainerRef,
-} from '@angular/core';
-import { SeriesBaseComponent } from '../../base/series-base.component';
-import { LineSeriesComponent } from '../series/line/line-series.component';
-import { BarSeriesComponent } from '../series/bar/bar-series.component';
-
-import { Series } from '../../model/series';
-import { BasePoint } from '../../model/base-point';
-import { ChartService } from '../../service/chart.service';
-import { tap } from 'rxjs';
-import { throttleTime } from 'rxjs/operators';
-import { SeriesType } from '../../model/enum/series-type';
-
-@Component({
-  selector: '[teta-series-host]',
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SeriesHostComponent<T extends BasePoint> implements OnInit {
-  @Input() series: Series<T>;
-  @Input() size: DOMRect;
-
-  private defaultSeriesTypeMapping = new Map<
-    SeriesType,
-    typeof SeriesBaseComponent
-  >()
-    .set(SeriesType.line, LineSeriesComponent)
-    .set(SeriesType.bar, BarSeriesComponent);
-
-  private _init = false;
-  private _componentRef: ComponentRef<any>;
-
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private chartService: ChartService
-  ) {
-    this.chartService.size
-      .pipe(
-        throttleTime(100, null, { trailing: true }),
-        tap(() => {
-          this._componentRef?.injector.get(ChangeDetectorRef).detectChanges();
-        })
-      )
-      .subscribe();
-  }
-
-  ngOnInit(): void {
-    if (!SeriesBaseComponent.isPrototypeOf(this.series.component)) {
-      this.series.component =
-        this.defaultSeriesTypeMapping.get(this.series.type) ||
-        LineSeriesComponent;
-    }
-
-    this._componentRef = this.viewContainerRef.createComponent(
-      this.series.component
-    );
-    this._componentRef.instance.series = this.series;
-    this._componentRef.instance.size = this.size;
-    this._init = true;
-  }
-
-  ngOnDestroy(): void {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this._init && changes.hasOwnProperty('series')) {
-      this._componentRef.instance.series = this.series;
-      this._componentRef.instance.size = this.size;
-      this._componentRef.injector.get(ChangeDetectorRef).markForCheck();
-      this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
-    }
-  }
-}

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

@@ -1,14 +0,0 @@
-<ng-container *ngIf="position | async as p">
-
-  <div class="chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1"
-       [style.position]="'fixed'"
-       [style.opacity]="display | async"
-       style="pointer-events: none;"
-       [style.left]="p.left"
-       [style.top]="p.top"
-       [style.bottom]="p.bottom"
-       [style.right]="p.right"
-       [innerHTML]="displayTooltips | async">
-  </div>
-</ng-container>
-

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

@@ -1,7 +0,0 @@
-:host {
-  position: absolute;
-}
-
-.chart-tooltip {
-  transition: all 0.1s ease;
-}

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

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