@tetacom/svg-charts 1.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+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/series.ts

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

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

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

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

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

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

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

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