@tetacom/svg-charts 1.0.2 → 1.1.3

package/src/chart/directives/brushable.directive.ts

@@ -1,30 +0,0 @@
-import {
-  AfterViewInit,
-  Directive,
-  ElementRef,
-  Input,
-  OnInit,
-} from '@angular/core';
-import { IChartConfig } from '../model/i-chart-config';
-import { BrushService } from '../service/brush.service';
-import { ChartService } from '../service/chart.service';
-
-@Directive({
-  selector: 'svg:svg[tetaBrushable]',
-})
-export class BrushableDirective implements OnInit, AfterViewInit {
-  @Input() config?: IChartConfig;
-  @Input() size?: DOMRect;
-
-  constructor(
-    private brushService: BrushService,
-    private chartService: ChartService,
-    private element: ElementRef
-  ) {}
-
-  ngOnInit() {}
-
-  ngAfterViewInit() {
-    this.brushService.applyBrush(this.element, this.config, this.size);
-  }
-}

package/src/chart/directives/zoomable.directive.ts

@@ -1,31 +0,0 @@
-import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
-import { ZoomService } from '../service/zoom.service';
-import { ChartService } from '../service/chart.service';
-import { IChartConfig } from '../model/i-chart-config';
-import { Axis } from '../core/axis/axis';
-
-@Directive({
-  selector: '[tetaZoomable]',
-})
-export class ZoomableDirective {
-  @Input() config?: IChartConfig;
-  @Input() axis?: Axis;
-  @Input() size?: DOMRect;
-
-  @HostBinding('class.zoomable') private zoomable = false;
-
-  constructor(
-    private element: ElementRef,
-    private svc: ZoomService,
-    private chartService: ChartService
-  ) {}
-
-  ngOnInit() {
-    if (this.config?.zoom?.enable || this.axis?.options?.zoom) {
-      this.zoomable = true;
-
-      this.svc.applyZoom(this.element, this.chartService.config, this.size);
-    }
-  }
-  ngAfterViewInit() {}
-}

package/src/chart/legend/legend.component.html

@@ -1,6 +0,0 @@
-<div *ngFor="let serie of series">
-  <div class="legend-item">
-    <div class="legend-icon-form" [style.height.px]="getHeight(serie)" [style.background-color]="serie.color"></div>
-    <div class="legend-label">{{ serie.name }}</div>
-  </div>
-</div>

package/src/chart/legend/legend.component.scss

@@ -1,20 +0,0 @@
-:host {
-  display: flex;
-  grid-gap: 8px;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-evenly;
-}
-
-:host .legend-item {
-  display: flex;
-  align-items: center;
-}
-
-:host .legend-icon-form {
-  width: 12px;
-}
-
-:host .legend-label {
-  margin-left: 5px;
-}

package/src/chart/legend/legend.component.spec.ts

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

package/src/chart/legend/legend.component.ts

@@ -1,35 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Input,
-  OnInit,
-} from '@angular/core';
-import { Series } from '../model/series';
-import { BasePoint } from '../model/base-point';
-import { SeriesType } from '../model/enum/series-type';
-
-@Component({
-  selector: 'teta-legend',
-  templateUrl: './legend.component.html',
-  styleUrls: ['./legend.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LegendComponent implements OnInit {
-  private sizeMapping = new Map<SeriesType, number>()
-    .set(SeriesType.line, 2)
-    .set(SeriesType.bar, 12);
-
-  @Input() series: Array<Series<BasePoint>>;
-  @HostBinding('class.padding-bottom-4') classLegend = true;
-
-  constructor() {}
-
-  ngOnInit(): void {
-    this.series = this.series?.filter((_) => _.showInLegend !== false);
-  }
-
-  getHeight(serie: Series<BasePoint>) {
-    return this.sizeMapping.get(serie.type);
-  }
-}

package/src/chart/model/axis-options.ts

@@ -1,18 +0,0 @@
-import { AxisType } from './enum/axis-type';
-import { Plotband } from './plotband';
-import { PlotLine } from './plotline';
-
-export interface AxisOptions {
-  title?: string;
-  min?: number;
-  max?: number;
-  visible?: boolean;
-  tickFormat?: (d: any) => string;
-  type?: AxisType;
-  zoom?: boolean;
-  inverted?: boolean;
-  negative?: boolean;
-  opposite?: boolean;
-  plotbands?: Plotband[];
-  plotlines?: PlotLine[];
-}

package/src/chart/model/base-point.ts

@@ -1,10 +0,0 @@
-import { MarkerOptions } from './marker-options';
-
-export interface BasePoint {
-  x: number;
-  x1?: number;
-  y: number;
-  y1?: number;
-  color?: string | number;
-  marker?: MarkerOptions;
-}

package/src/chart/model/chart-bounds.ts

@@ -1,18 +0,0 @@
-export class ChartBounds {
-  top = 0;
-  right = 30;
-  bottom = 0;
-  left = 0;
-
-  constructor(options?: {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left: number;
-  }) {
-    this.top = options?.top || this.top;
-    this.right = options?.right || this.right;
-    this.bottom = options?.bottom || this.bottom;
-    this.left = options?.left || this.left;
-  }
-}

package/src/chart/model/enum/axis-orientation.ts

@@ -1,4 +0,0 @@
-export enum AxisOrientation {
-  x,
-  y
-}

package/src/chart/model/enum/axis-type.ts

@@ -1,7 +0,0 @@
-export enum AxisType {
-  number,
-  time,
-  category,
-  log,
-  pow,
-}

package/src/chart/model/enum/brush-type.ts

@@ -1,5 +0,0 @@
-export enum BrushType {
-  x,
-  y,
-  xy,
-}

package/src/chart/model/enum/drag-point-type.ts

@@ -1,5 +0,0 @@
-export enum DragPointType {
-  x,
-  y,
-  xy,
-}

package/src/chart/model/enum/public-api.ts

@@ -1,7 +0,0 @@
-export * from './axis-orientation';
-export * from './axis-type';
-export * from './brush-type';
-export * from './drag-point-type';
-export * from './series-type';
-export * from './tooltip-tracking';
-export * from './zoom-type';

package/src/chart/model/enum/series-type.ts

@@ -1,4 +0,0 @@
-export enum SeriesType {
-  line,
-  bar,
-}

package/src/chart/model/enum/tooltip-tracking.ts

@@ -1,4 +0,0 @@
-export enum TooltipTracking {
-  x,
-  y,
-}

package/src/chart/model/enum/zoom-type.ts

@@ -1,5 +0,0 @@
-export enum ZoomType {
-  x,
-  y,
-  xy,
-}

package/src/chart/model/i-broadcast-message.ts

@@ -1,5 +0,0 @@
-export interface IBroadcastMessage {
-  channel: string;
-  message: any;
-  domain?: number[];
-}

package/src/chart/model/i-builder.ts

@@ -1,3 +0,0 @@
-export interface IBuilder<T, U> {
-  build(settings: T): U;
-}

package/src/chart/model/i-chart-config.ts

@@ -1,33 +0,0 @@
-import { Series } from './series';
-import { BasePoint } from './base-point';
-import { AxisOptions } from './axis-options';
-import { ZoomType } from './enum/zoom-type';
-import { TooltipOptions } from './tooltip-options';
-import { ChartBounds } from './chart-bounds';
-import { BrushType } from './enum/brush-type';
-
-export interface IChartConfig {
-  name?: string;
-  series?: Series<BasePoint>[];
-  zoom?: {
-    enable: boolean;
-    type: ZoomType;
-    syncChannel?: string;
-  };
-  brush?: {
-    enable: boolean;
-    type: BrushType;
-    axisIndex?: number;
-  };
-  legend?: {
-    enable?: boolean;
-  };
-  bounds?: ChartBounds;
-  inverted?: boolean;
-  tooltip?: TooltipOptions;
-  xAxis: AxisOptions[];
-  yAxis: AxisOptions[];
-  gridLines?: boolean;
-  width?: number;
-  height?: number;
-}

package/src/chart/model/i-chart-event.ts

@@ -1,4 +0,0 @@
-export interface IChartEvent<T> {
-  event?: any;
-  target?: T;
-}

package/src/chart/model/i-display-tooltip.ts

@@ -1,7 +0,0 @@
-import { BasePoint } from './base-point';
-import { Series } from './series';
-
-export interface IDisplayTooltip {
-  point: BasePoint;
-  series: Series<BasePoint>;
-}

package/src/chart/model/i-drag-event.ts

@@ -1,5 +0,0 @@
-export interface IDragEvent<T> {
-  [key: string]: any;
-  event: DragEvent;
-  target: T;
-}

package/src/chart/model/i-point-move.ts

@@ -1,7 +0,0 @@
-import { Series } from './series';
-import { BasePoint } from './base-point';
-
-export interface IPointMove {
-  series: Series<BasePoint>;
-  point: BasePoint;
-}

package/src/chart/model/marker-options.ts

@@ -1,8 +0,0 @@
-import { DragPointType } from './enum/drag-point-type';
-import { SvgAttributes } from './svg-attributes';
-
-export interface MarkerOptions {
-  draggable?: boolean;
-  dragType: DragPointType;
-  style?: SvgAttributes;
-}

package/src/chart/model/plotband.ts

@@ -1,45 +0,0 @@
-import { SvgAttributes } from './svg-attributes';
-
-export class Plotband {
-  id: number | string;
-  from: number;
-  to: number;
-  label?: string;
-  showGrabbers?: boolean;
-  draggable?: boolean;
-  resizable?: boolean;
-  min?: number;
-  max?: number;
-  style?: {
-    plotband?: SvgAttributes;
-    grabbers?: SvgAttributes;
-  };
-
-  constructor(options?: {
-    id: any;
-    from: number;
-    to: number;
-    label?: string;
-    showGrabbers?: boolean;
-    draggable?: boolean;
-    resizable?: boolean;
-    min?: number;
-    max?: number;
-    style?: {
-      plotband?: SvgAttributes;
-      grabbers?: SvgAttributes;
-    };
-  }) {
-    this.id = options?.id;
-    this.from = options?.from;
-    this.to = options?.to;
-    this.label = options?.label;
-    this.showGrabbers =
-      options?.showGrabbers != null ? options.showGrabbers : true;
-    this.draggable = options?.draggable != null ? options?.draggable : false;
-    this.resizable = options?.resizable != null ? options?.resizable : true;
-    this.min = options?.min;
-    this.max = options?.max;
-    this.style = options?.style;
-  }
-}

package/src/chart/model/plotline.ts

@@ -1,29 +0,0 @@
-import { SvgAttributes } from './svg-attributes';
-
-export class PlotLine {
-  id?: number | string;
-  value: number;
-  label?: string;
-  min?: number;
-  max?: number;
-  draggable?: boolean;
-  style?: SvgAttributes;
-
-  constructor(options?: {
-    id?: number;
-    value: number;
-    label?: string;
-    min?: number;
-    max?: number;
-    draggable?: boolean;
-    style?: SvgAttributes;
-  }) {
-    this.id = options?.id;
-    this.value = options?.value;
-    this.label = options?.label;
-    this.min = options?.min;
-    this.max = options?.max;
-    this.draggable = options?.draggable;
-    this.style = options?.style;
-  }
-}

package/src/chart/model/public-api.ts

@@ -1,14 +0,0 @@
-export * from './enum/public-api';
-
-export * from './axis-options';
-export * from './base-point';
-export * from './chart-bounds';
-export * from './i-broadcast-message';
-export * from './i-chart-config';
-export * from './i-chart-event';
-export * from './i-point-move';
-export * from './marker-options';
-export * from './plotband';
-export * from './plotline';
-export * from './series';
-export * from './svg-attributes';

package/src/chart/model/series.ts

@@ -1,18 +0,0 @@
-import { BasePoint } from './base-point';
-import { SeriesType } from './enum/series-type';
-import { SeriesBaseComponent } from '../base/series-base.component';
-import { SvgAttributes } from './svg-attributes';
-
-export interface Series<T extends BasePoint> {
-  id?: number | string;
-  type: SeriesType;
-  data: T[];
-  name?: string;
-  xAxisIndex?: number;
-  yAxisIndex?: number;
-  component?: typeof SeriesBaseComponent;
-  visible?: boolean;
-  color?: string;
-  showInLegend?: boolean;
-  style?: SvgAttributes;
-}

package/src/chart/model/svg-attributes.ts

@@ -1,14 +0,0 @@
-export interface SvgAttributes {
-  className?: string;
-  fill?: string;
-  fillOpacity?: number;
-  opacity?: number;
-  stroke?: string;
-  strokeLinecap?: 'butt' | 'round' | 'square';
-  strokeLinejoin?: 'butt' | 'round' | 'square';
-  strokeDasharray?: string;
-  strokeOpacity?: number;
-  strokeWidth?: number;
-  patternImage?: string;
-  radius?: number;
-}

package/src/chart/model/tooltip-options.ts

@@ -1,37 +0,0 @@
-import { TooltipTracking } from './enum/tooltip-tracking';
-
-export interface TooltipOptions {
-  enable?: boolean;
-  showMarkers?: boolean;
-  showLine?: boolean;
-  tracking?: TooltipTracking;
-  format?: (data: any) => any;
-  //
-  // constructor(options?: {
-  //   enable?: boolean;
-  //   showMarkers?: boolean;
-  //   showLine?: boolean;
-  //   tracking?: TooltipTracking;
-  //   format?: (data: any) => any;
-  // }) {
-  //   const defaultFormatter = (tooltips) => {
-  //     let html = '';
-  //
-  //     // tooltips
-  //     //   .filter((_) => _.point)
-  //     //   .forEach((_) => {
-  //     //     html += `<div>${_.name ?? 'Без названия'} x: ${_.point?.x?.toFixed(
-  //     //       2
-  //     //     )} y: ${_.point?.y?.toFixed(2)}</div>`;
-  //     //   });
-  //
-  //     return html;
-  //   };
-  //
-  //   this.enable = options?.enable ?? true;
-  //   this.showMarkers = options?.showMarkers ?? true;
-  //   this.showLine = options?.showLine ?? false;
-  //   this.tracking = options?.tracking ?? TooltipTracking.x;
-  //   this.format = options?.format ?? defaultFormatter;
-  // }
-}

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

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

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

@@ -1,27 +0,0 @@
-import { Injectable } from '@angular/core';
-import { IChartConfig } from '../model/i-chart-config';
-import { AxisOrientation } from '../model/enum/axis-orientation';
-import { Axis } from '../core/axis/axis';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class AxesService {
-  public yAxis: Map<number, Axis> = new Map<number, Axis>();
-  public xAxis: Map<number, Axis> = new Map<number, Axis>();
-
-  constructor() {}
-
-  init(config: IChartConfig) {
-    config?.yAxis.forEach((_, index) => {
-      const axis = Axis.createAxis(AxisOrientation.y, config, index);
-
-      this.yAxis.set(index, axis);
-    });
-    config?.xAxis.forEach((_, index) => {
-      const axis = Axis.createAxis(AxisOrientation.x, config, index);
-
-      this.xAxis.set(index, axis);
-    });
-  }
-}

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

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

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

@@ -1,24 +0,0 @@
-import { Injectable } from '@angular/core';
-import { IBroadcastMessage } from '../model/i-broadcast-message';
-import { filter, Observable, Subject } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class BroadcastService {
-  private emitter: Subject<IBroadcastMessage>;
-
-  constructor() {
-    this.emitter = new Subject<IBroadcastMessage>();
-  }
-
-  broadcast(value: IBroadcastMessage) {
-    this.emitter.next(value);
-  }
-
-  subscribeToChannel(channel: string): Observable<IBroadcastMessage> {
-    return this.emitter
-      .asObservable()
-      .pipe(filter((msg) => channel && msg.channel === channel));
-  }
-}

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

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