@tetacom/svg-charts 1.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+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();
+  });
+});