@tetacom/svg-charts 1.0.2 → 1.1.3

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

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

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

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

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

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

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

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

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

package/src/test.ts

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

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

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

@@ -1,17 +0,0 @@
-/* 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"
-  ]
-}