@tetacom/svg-charts 1.0.1

package/src/chart/service/brush.service.ts

@@ -0,0 +1,87 @@
+import { ElementRef, Injectable } from '@angular/core';
+import { BrushType } from '../model/enum/brush-type';
+import * as d3 from 'd3';
+import { map, Subscription } from 'rxjs';
+import { BroadcastService } from './broadcast.service';
+import { IChartConfig } from '../model/i-chart-config';
+import { ScaleService } from './scale.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BrushService {
+  broadcastSubscribtion: Subscription;
+
+  private brushMap = new Map<BrushType, d3.BrushBehavior<any>>()
+    .set(BrushType.x, d3.brushX())
+    .set(BrushType.y, d3.brushY());
+
+  private scaleMap = new Map<BrushType, string>()
+    .set(BrushType.x, 'xScales')
+    .set(BrushType.y, 'yScales');
+
+  constructor(
+    private broadcastService: BroadcastService,
+    private scaleService: ScaleService
+  ) {}
+
+  applyBrush(svgElement: ElementRef, config: IChartConfig, size: DOMRect) {
+    this.broadcastSubscribtion?.unsubscribe();
+
+    if (config.brush?.enable) {
+      const s = this.scaleService[
+        this.scaleMap.get(config?.brush?.type ?? BrushType.x)
+      ].get(config?.brush?.axisIndex ?? 0);
+
+      const brush = this.brushMap.get(config?.brush?.type ?? BrushType.x);
+
+      const container = d3.select(svgElement.nativeElement);
+
+      const brushBehavior = brush.on(
+        'start brush end',
+        (_: d3.D3BrushEvent<any>) => {
+          if (_.sourceEvent) {
+            const [from, to] = _.selection as number[];
+
+            if (to - from < 5) {
+              container.call(brush.move, [from, to]);
+              return;
+            }
+
+            this.broadcastService.broadcast({
+              channel: config?.zoom?.syncChannel,
+              message: {
+                ..._,
+                selection: [s.invert(from), s.invert(to)],
+                brushType: config?.brush?.type ?? BrushType.x,
+              },
+            });
+          }
+        }
+      );
+
+      container.call(brushBehavior);
+
+      setTimeout(() => {
+        container.call(brush.move, s.domain().map(s), {});
+      });
+
+      this.broadcastSubscribtion = this.broadcastService
+        .subscribeToChannel(config?.zoom?.syncChannel)
+        .pipe(
+          map((_) => {
+            if (_.message?.transform) {
+              const s = this.scaleService[
+                this.scaleMap.get(config?.brush?.type ?? BrushType.x)
+              ].get(config?.brush?.axisIndex ?? 0);
+
+              const domain = _.domain;
+
+              container.call(brush.move, [s(domain[0]), s(domain[1])]);
+            }
+          })
+        )
+        .subscribe();
+    }
+  }
+}

package/src/chart/service/chart.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ChartService } from './chart.service';
+
+describe('ChartService', () => {
+  let service: ChartService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ChartService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/chart/service/chart.service.ts

@@ -0,0 +1,100 @@
+import { Injectable } from '@angular/core';
+import { IChartConfig } from '../model/i-chart-config';
+import { AxesService } from './axes.service';
+import { map, Observable, Subject } from 'rxjs';
+import { ScaleService } from './scale.service';
+import { IChartEvent } from '../model/i-chart-event';
+import { IDisplayTooltip } from '../model/i-display-tooltip';
+import { Plotband } from '../model/plotband';
+import { PlotLine } from '../model/plotline';
+import { IPointMove } from '../model/i-point-move';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ChartService {
+  public size: Observable<DOMRect>;
+  public pointerMove: Observable<any>;
+  public tooltips: Observable<IDisplayTooltip>;
+  public plotbandMove: Observable<IChartEvent<Plotband>>;
+  public plotlineMove: Observable<IChartEvent<PlotLine>>;
+  public pointMove: Observable<IChartEvent<IPointMove>>;
+
+  private size$ = new Subject<DOMRect>();
+  private pointerMove$ = new Subject<any>();
+  private tooltips$ = new Subject<IDisplayTooltip>();
+  private plotbandMove$ = new Subject<IChartEvent<Plotband>>();
+  private plotlineMove$ = new Subject<IChartEvent<PlotLine>>();
+  private pointMove$ = new Subject<IChartEvent<IPointMove>>();
+
+  private _config: IChartConfig;
+
+  constructor(
+    private axesService: AxesService,
+    private scaleService: ScaleService
+  ) {
+    this.size = this.size$.asObservable();
+    this.pointerMove = this.pointerMove$.asObservable();
+    this.tooltips = this.tooltips$.asObservable();
+    this.plotbandMove = this.plotbandMove$.asObservable();
+    this.plotlineMove = this.plotlineMove$.asObservable();
+    this.pointMove = this.pointMove$.asObservable();
+
+    this.size
+      .pipe(
+        map((size) => {
+          this.scaleService.createScales(size, this._config);
+        })
+      )
+      .subscribe();
+  }
+
+  public init(config: IChartConfig) {
+    this._config = config;
+
+    if (config.inverted) {
+      this._config.series = this._config?.series?.map((serie) => {
+        return {
+          ...serie,
+          data: serie?.data?.map((point) => {
+            return {
+              ...point,
+              x: point?.y,
+              y: point?.x,
+            };
+          }),
+        };
+      });
+    }
+
+    this.axesService.init(this._config);
+  }
+
+  public setSize(size: DOMRect) {
+    this.size$.next(size);
+  }
+
+  public setPointerMove(event: any) {
+    this.pointerMove$.next({ event });
+  }
+
+  public setTooltip(tooltip: IDisplayTooltip) {
+    this.tooltips$.next(tooltip);
+  }
+
+  public emitPlotband(event: IChartEvent<Plotband>) {
+    this.plotbandMove$.next(event);
+  }
+
+  public emitPlotline(event: IChartEvent<PlotLine>) {
+    this.plotlineMove$.next(event);
+  }
+
+  public emitPoint(event: IChartEvent<IPointMove>) {
+    this.pointMove$.next(event);
+  }
+
+  get config(): IChartConfig {
+    return this._config;
+  }
+}

package/src/chart/service/scale.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ScaleService } from './scale.service';
+
+describe('ScaleService', () => {
+  let service: ScaleService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ScaleService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/chart/service/scale.service.ts

@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+
+import { AxesService } from './axes.service';
+import * as d3 from 'd3';
+import { AxisType } from '../model/enum/axis-type';
+import { Axis } from '../core/axis/axis';
+import { AxisOrientation } from '../model/enum/axis-orientation';
+
+import { IChartConfig } from '../model/i-chart-config';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ScaleService {
+  public yScales: Map<number | string, any> = new Map<number | string, any>();
+  public xScales: Map<number | string, any> = new Map<number | string, any>();
+
+  private scaleMapping = new Map<AxisType, any>()
+    .set(AxisType.number, d3.scaleLinear)
+    .set(AxisType.time, d3.scaleTime)
+    .set(AxisType.category, d3.scaleOrdinal)
+    .set(AxisType.log, d3.scaleLog);
+
+  constructor(private axesService: AxesService) {}
+
+  public createScales(size: DOMRect, config?: IChartConfig) {
+    this.yScales.clear();
+    this.xScales.clear();
+
+    const topBound = [...this.axesService.xAxis.values()]
+      .filter((_) => _.options?.visible && _.options?.opposite)
+      .reduce((acc, cur) => acc + cur.selfSize, 0);
+
+    const bottomBound = [...this.axesService.xAxis.values()]
+      .filter((_) => _.options?.visible && _.options?.opposite !== true)
+      .reduce((acc, cur) => acc + cur.selfSize, 0);
+
+    const leftBound = [...this.axesService.yAxis.values()]
+      .filter((_) => _.options?.visible && _.options.opposite !== true)
+      .reduce((acc, cur) => acc + cur.selfSize, 0);
+
+    const rightBound = [...this.axesService.yAxis.values()]
+      .filter((_) => _.options?.visible && _.options.opposite)
+      .reduce((acc, cur) => acc + cur.selfSize, 0);
+
+    this.axesService.yAxis.forEach((axis: Axis) => {
+      const scale = this.getScale(axis).range([
+        0,
+        size.height - topBound - bottomBound,
+      ]);
+
+      this.yScales.set(axis.index, scale);
+    });
+
+    this.axesService.xAxis.forEach((axis: Axis) => {
+      const scale = this.getScale(axis).range([
+        0,
+        size.width - leftBound - rightBound,
+      ]);
+
+      this.xScales.set(axis.index, scale);
+    });
+  }
+
+  private getScale(axis: Axis) {
+    return this.scaleMapping
+      .get(axis.options?.type)()
+      .domain(
+        axis.orientation === AxisOrientation.y
+          ? [...axis.extremes].reverse()
+          : axis.extremes
+      );
+  }
+}

package/src/chart/service/zoom.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ZoomService } from './zoom.service';
+
+describe('ZoomService', () => {
+  let service: ZoomService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ZoomService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/chart/service/zoom.service.ts

@@ -0,0 +1,153 @@
+import { ElementRef, Injectable } from '@angular/core';
+import * as d3 from 'd3';
+import { D3ZoomEvent, zoomIdentity } from 'd3';
+import { ScaleService } from './scale.service';
+import { map, merge, Observable, of, Subject, Subscription } from 'rxjs';
+import { IChartEvent } from '../model/i-chart-event';
+import { ZoomType } from '../model/enum/zoom-type';
+import { IChartConfig } from '../model/i-chart-config';
+import { BroadcastService } from './broadcast.service';
+import { ChartService } from './chart.service';
+import { BrushType } from '../model/enum/brush-type';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ZoomService {
+  zoomed: Observable<any>;
+  private zoomed$ = new Subject<any>();
+
+  broadcastSubscribtion: Subscription;
+
+  private x = new Map<number | string, any>();
+  private y = new Map<number | string, any>();
+
+  private zoom;
+  private svg;
+  private initialZoom = zoomIdentity;
+
+  constructor(
+    private scaleService: ScaleService,
+    private broadcastService: BroadcastService,
+    private chartService: ChartService
+  ) {
+    this.zoomed = this.zoomed$.asObservable();
+
+    merge(of(1), this.chartService.size)
+      .pipe(
+        map((_) => {
+          this.x = new Map(this.scaleService.xScales);
+          this.y = new Map(this.scaleService.yScales);
+
+          if (this.svg) {
+            const currentTransform = d3.zoomTransform(this.svg.node());
+            this.setZoom(currentTransform);
+          }
+        })
+      )
+      .subscribe();
+  }
+
+  applyZoom(svgElement: ElementRef, config: IChartConfig, size: DOMRect) {
+    this.broadcastSubscribtion?.unsubscribe();
+
+    this.svg = d3.select(svgElement.nativeElement);
+
+    const zoomType = config?.zoom?.type;
+    const enable = config?.zoom?.enable;
+
+    const zoomed = (event: D3ZoomEvent<any, any>) => {
+      const { transform } = event;
+
+      if (zoomType === ZoomType.x || zoomType === ZoomType.xy) {
+        for (let [index, scale] of this.x.entries()) {
+          this.scaleService.xScales.set(index, transform.rescaleX(scale));
+        }
+      }
+
+      if (zoomType === ZoomType.y || zoomType === ZoomType.xy) {
+        for (let [index, scale] of this.y.entries()) {
+          this.scaleService.yScales.set(index, transform.rescaleY(scale));
+        }
+      }
+
+      if (enable) {
+        this.zoomed$.next({ event });
+
+        if (event.sourceEvent) {
+          this.broadcastService.broadcast({
+            channel: config?.zoom?.syncChannel,
+            message: event,
+            domain: this.scaleService[
+              config?.zoom?.type === ZoomType.x ? 'xScales' : 'yScales'
+            ]
+              .get(config.brush?.axisIndex ?? 0)
+              .domain(),
+          });
+        }
+      }
+    };
+
+    if (enable) {
+      this.zoom = d3
+        .zoom()
+        .scaleExtent([1, Infinity])
+        .extent([
+          [0, 0],
+          [size.width, size.height],
+        ]);
+
+      this.zoom.on('start zoom end', zoomed);
+      this.svg.call(this.zoom);
+      this.svg.call(this.zoom.transform, this.initialZoom);
+
+      const sc =
+        config?.zoom?.type === ZoomType.x
+          ? this.x.get(config.brush?.axisIndex ?? 0)
+          : this.y.get(config.brush?.axisIndex ?? 0);
+
+      this.broadcastSubscribtion = this.broadcastService
+        .subscribeToChannel(config?.zoom?.syncChannel)
+        .pipe(
+          map((_) => {
+            const currentTransform = d3.zoomTransform(this.svg.node());
+
+            const { message } = _;
+            if (currentTransform !== message?.transform) {
+              if (message.selection) {
+                const s = message.selection;
+
+                const domain = sc.domain();
+
+                const scale = (domain[1] - domain[0]) / (s[1] - s[0]);
+
+                let transform = zoomIdentity.scale(scale);
+
+                if (message?.brushType === BrushType.x) {
+                  transform = transform.translate(-sc(s[0]), 0);
+                }
+                if (message?.brushType === BrushType.y) {
+                  transform = transform.translate(0, -sc(s[0]));
+                }
+
+                this.setZoom(transform);
+
+                return;
+              }
+
+              this.setZoom(message?.transform);
+            }
+          })
+        )
+        .subscribe();
+    }
+  }
+
+  setZoom(transform: any) {
+    // requestAnimationFrame(() => {
+    //
+    // });
+
+    this.svg?.call(this.zoom.transform, transform);
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of chart
+ */
+
+export * from './chart/chart.module';
+export * from './chart/service/chart.service';
+export * from './chart/chart/chart.component';

package/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}