@tetacom/svg-charts 1.0.1

package/src/chart/Chart.stories.ts

@@ -0,0 +1,397 @@
+import { Meta } from '@storybook/angular/types-6-0';
+import { withKnobs } from '@storybook/addon-knobs';
+import { ChartComponent } from './chart/chart.component';
+import { ChartModule } from './chart.module';
+import { IconModule } from '../../../components/src/component/icon/icon.module';
+import { IChartConfig } from './model/i-chart-config';
+import { AxisType } from './model/enum/axis-type';
+import { SeriesType } from './model/enum/series-type';
+import { randomInt } from 'd3-random';
+import { Series } from './model/series';
+import { BasePoint } from './model/base-point';
+import * as faker from 'faker';
+import { ZoomType } from './model/enum/zoom-type';
+import { Plotband } from './model/plotband';
+import { PlotLine } from './model/plotline';
+import { DragPointType } from './model/enum/drag-point-type';
+import { TooltipTracking } from './model/enum/tooltip-tracking';
+import { BrushType } from './model/enum/brush-type';
+
+export default {
+  title: 'Component/Chart',
+  decorators: [withKnobs],
+  component: ChartComponent,
+  moduleMetadata: {
+    imports: [ChartModule, IconModule],
+  },
+} as Meta;
+
+const cssColorNames = [
+  'AliceBlue',
+  'AntiqueWhite',
+  'Aqua',
+  'Aquamarine',
+  'Azure',
+  'Beige',
+  'Bisque',
+  'Black',
+  'BlanchedAlmond',
+  'Blue',
+  'BlueViolet',
+  'Brown',
+  'BurlyWood',
+  'CadetBlue',
+  'Chartreuse',
+  'Chocolate',
+  'Coral',
+  'CornflowerBlue',
+  'Cornsilk',
+  'Crimson',
+  'Cyan',
+  'DarkBlue',
+  'DarkCyan',
+  'DarkGoldenRod',
+  'DarkGray',
+  'DarkGrey',
+  'DarkGreen',
+  'DarkKhaki',
+  'DarkMagenta',
+  'DarkOliveGreen',
+  'DarkOrange',
+  'DarkOrchid',
+  'DarkRed',
+  'DarkSalmon',
+  'DarkSeaGreen',
+  'DarkSlateBlue',
+  'DarkSlateGray',
+  'DarkSlateGrey',
+  'DarkTurquoise',
+  'DarkViolet',
+  'DeepPink',
+  'DeepSkyBlue',
+  'DimGray',
+  'DimGrey',
+  'DodgerBlue',
+  'FireBrick',
+  'FloralWhite',
+  'ForestGreen',
+  'Fuchsia',
+  'Gainsboro',
+  'GhostWhite',
+  'Gold',
+  'GoldenRod',
+  'Gray',
+  'Grey',
+  'Green',
+  'GreenYellow',
+  'HoneyDew',
+  'HotPink',
+  'IndianRed',
+  'Indigo',
+  'Ivory',
+  'Khaki',
+  'Lavender',
+  'LavenderBlush',
+  'LawnGreen',
+  'LemonChiffon',
+  'LightBlue',
+  'LightCoral',
+  'LightCyan',
+  'LightGoldenRodYellow',
+  'LightGray',
+  'LightGrey',
+  'LightGreen',
+  'LightPink',
+  'LightSalmon',
+  'LightSeaGreen',
+  'LightSkyBlue',
+  'LightSlateGray',
+  'LightSlateGrey',
+  'LightSteelBlue',
+  'LightYellow',
+  'Lime',
+  'LimeGreen',
+  'Linen',
+  'Magenta',
+  'Maroon',
+  'MediumAquaMarine',
+  'MediumBlue',
+  'MediumOrchid',
+  'MediumPurple',
+  'MediumSeaGreen',
+  'MediumSlateBlue',
+  'MediumSpringGreen',
+  'MediumTurquoise',
+  'MediumVioletRed',
+  'MidnightBlue',
+  'MintCream',
+  'MistyRose',
+  'Moccasin',
+  'NavajoWhite',
+  'Navy',
+  'OldLace',
+  'Olive',
+  'OliveDrab',
+  'Orange',
+  'OrangeRed',
+  'Orchid',
+  'PaleGoldenRod',
+  'PaleGreen',
+  'PaleTurquoise',
+  'PaleVioletRed',
+  'PapayaWhip',
+  'PeachPuff',
+  'Peru',
+  'Pink',
+  'Plum',
+  'PowderBlue',
+  'Purple',
+  'RebeccaPurple',
+  'Red',
+  'RosyBrown',
+  'RoyalBlue',
+  'SaddleBrown',
+  'Salmon',
+  'SandyBrown',
+  'SeaGreen',
+  'SeaShell',
+  'Sienna',
+  'Silver',
+  'SkyBlue',
+  'SlateBlue',
+  'SlateGray',
+  'SlateGrey',
+  'Snow',
+  'SpringGreen',
+  'SteelBlue',
+  'Tan',
+  'Teal',
+  'Thistle',
+  'Tomato',
+  'Turquoise',
+  'Violet',
+  'Wheat',
+  'White',
+  'WhiteSmoke',
+  'Yellow',
+  'YellowGreen',
+];
+
+const randomColor = randomInt(0, cssColorNames.length - 1);
+
+const seriesType = [SeriesType.line, SeriesType.line, SeriesType.line];
+
+faker.locale = 'ru';
+
+const series2: Series<BasePoint>[] = seriesType.map(
+  (type: SeriesType, index: number) => {
+    return {
+      id: index,
+      type,
+      name: faker.address.cityName(),
+      yAxisIndex: 0,
+      xAxisIndex: 0,
+
+      color: cssColorNames[randomColor()].toLowerCase(),
+      data: Array.from(Array(3000).keys()).map((key, index) => {
+        const num = faker.datatype.number({ min: 0, max: 500 });
+
+        const point = {
+          x: key,
+          y: num,
+        };
+
+        if (index % 10 === 0) {
+          point.x = null;
+          point.y = null;
+        }
+
+        return point;
+      }),
+    };
+  }
+);
+
+const series: Series<BasePoint>[] = seriesType.map(
+  (type: SeriesType, index: number) => {
+    return {
+      id: index,
+      type,
+      name: faker.address.cityName(),
+      yAxisIndex: 0,
+      xAxisIndex: 0,
+      style: {
+        strokeWidth: 0.5,
+      },
+      color: cssColorNames[randomColor()].toLowerCase(),
+      data: Array.from(Array(3000).keys()).map((key, index) => {
+        const num = faker.datatype.number({ min: 0, max: 500 });
+
+        const point: BasePoint = {
+          x: key,
+          y: num,
+        };
+
+        if (index % 30 === 0) {
+          point.marker = {
+            draggable: true,
+            dragType: DragPointType.xy,
+            style: {
+              fill: 'green',
+            },
+          };
+        }
+
+        return point;
+      }),
+    };
+  }
+);
+
+const plotbands1 = [
+  new Plotband({
+    id: 0,
+    from: 10,
+    to: 12,
+    max: 20,
+    style: {
+      plotband: {
+        opacity: 0.2,
+        patternImage: 'patternintersect',
+      },
+      grabbers: {
+        strokeDasharray: '4, 4',
+        strokeWidth: 2,
+      },
+    },
+  }),
+];
+
+const plotbands2 = [
+  new Plotband({
+    id: 0,
+    from: 1100,
+    to: 1200,
+    draggable: true,
+    style: {
+      plotband: {
+        opacity: 0.6,
+        fill: 'green',
+      },
+    },
+  }),
+];
+
+const config: IChartConfig = {
+  name: '123123123132',
+  inverted: false,
+  tooltip: {
+    tracking: TooltipTracking.x,
+  },
+  xAxis: [
+    {
+      type: AxisType.number,
+      visible: true,
+      plotbands: plotbands2,
+    },
+  ],
+  yAxis: [
+    {
+      type: AxisType.number,
+      visible: true,
+      title: 'атм',
+      plotlines: [
+        new PlotLine({
+          value: 360,
+          draggable: true,
+          style: {
+            stroke: cssColorNames[randomColor()].toLowerCase(),
+          },
+        }),
+      ],
+    },
+  ],
+  brush: {
+    enable: false,
+    type: BrushType.y,
+  },
+  zoom: {
+    enable: true,
+    type: ZoomType.x,
+    syncChannel: 'channelA',
+  },
+  legend: {
+    enable: true,
+  },
+  series,
+};
+
+const config2: IChartConfig = {
+  name: '123',
+  tooltip: {
+    tracking: TooltipTracking.x,
+  },
+  legend: {
+    enable: false,
+  },
+  inverted: false,
+  xAxis: [
+    {
+      type: AxisType.number,
+      visible: true,
+    },
+    {
+      type: AxisType.number,
+      visible: true,
+      opposite: true,
+      min: 0,
+      max: 1000,
+    },
+  ],
+  yAxis: [
+    {
+      type: AxisType.number,
+      visible: true,
+      title: 'атм',
+      opposite: true,
+      plotlines: [
+        new PlotLine({
+          value: 360,
+          draggable: true,
+          style: {
+            stroke: cssColorNames[randomColor()].toLowerCase(),
+          },
+        }),
+      ],
+    },
+  ],
+  zoom: {
+    enable: true,
+    type: ZoomType.x,
+    syncChannel: '',
+  },
+  series: series2,
+};
+
+export const basicChart = () => ({
+  moduleMetadata: {
+    imports: [ChartModule, IconModule],
+  },
+  props: {
+    config,
+    config2,
+    event: (_) => {
+      console.log(_);
+    },
+  },
+  template: `
+    <div>
+      <div [tetaIconSprite]="['assets/icons.svg', 'assets/lithotype-icons.svg']" class="font-body-3 padding-3 bg-background-0" style="width: 100%; height: 40vh;">
+          <teta-chart [config]="config" (pointMove)="event($event)" class="bg-background-50 border border-text-50"></teta-chart>
+      </div>
+      <div [tetaIconSprite]="['assets/icons.svg', 'assets/lithotype-icons.svg']" class="font-body-3 padding-3 bg-background-0" style="width: 100%; height: 40vh;">
+          <teta-chart [config]="config2" (pointMove)="event($event)" class="bg-background-50 border border-text-50"></teta-chart>
+      </div>
+    </div>
+`,
+});

package/src/chart/base/series-base.component.ts

@@ -0,0 +1,41 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { ChartService } from '../service/chart.service';
+import { Series } from '../model/series';
+import { BasePoint } from '../model/base-point';
+import { ScaleService } from '../service/scale.service';
+import { ZoomService } from '../service/zoom.service';
+import { Observable, tap } from 'rxjs';
+
+@Component({
+  template: '',
+})
+export class SeriesBaseComponent<T extends BasePoint> implements OnInit {
+  @Input() series: Series<T>;
+  @Input() size: DOMRect;
+
+  zoom: Observable<any>;
+
+  constructor(
+    protected svc: ChartService,
+    protected cdr: ChangeDetectorRef,
+    protected scaleService: ScaleService,
+    protected zoomService: ZoomService,
+    protected element: ElementRef
+  ) {
+    this.zoomService.zoomed
+      .pipe(
+        tap((_) => {
+          this.cdr.detectChanges();
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,5 @@
+<div class="column column_auto">
+  <teta-chart-container class="chart-container" [config]="config"></teta-chart-container>
+</div>
+
+<teta-legend *ngIf="config.legend?.enable === true" [series]="config.series"></teta-legend>

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

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,97 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { ChartService } from '../service/chart.service';
+import { IChartConfig } from '../model/i-chart-config';
+
+import { BasePoint } from '../model/base-point';
+import { Series } from '../model/series';
+import { ZoomService } from '../service/zoom.service';
+import { ScaleService } from '../service/scale.service';
+import { BrushService } from '../service/brush.service';
+import { AxesService } from '../service/axes.service';
+import { ChartBounds } from '../model/chart-bounds';
+
+import { IChartEvent } from '../model/i-chart-event';
+import { PlotLine } from '../model/plotline';
+import { Plotband } from '../model/plotband';
+import { IPointMove } from '../model/i-point-move';
+
+@Component({
+  selector: 'teta-chart',
+  templateUrl: './chart.component.html',
+  styleUrls: ['./chart.component.scss'],
+  providers: [
+    ChartService,
+    ZoomService,
+    ScaleService,
+    AxesService,
+    BrushService,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChartComponent implements OnInit, OnChanges, OnDestroy {
+  legendSeries: Array<Series<BasePoint>>;
+
+  @Output()
+  plotBandsMove: EventEmitter<IChartEvent<Plotband>> = new EventEmitter<
+    IChartEvent<Plotband>
+  >();
+
+  @Output()
+  plotLinesMove: EventEmitter<IChartEvent<PlotLine>> = new EventEmitter<
+    IChartEvent<PlotLine>
+  >();
+
+  @Output()
+  pointMove: EventEmitter<IChartEvent<IPointMove>> = new EventEmitter<
+    IChartEvent<IPointMove>
+  >();
+
+  @Input() set config(config: IChartConfig) {
+    this._config = Object.assign(
+      {
+        bounds: new ChartBounds(),
+      },
+      config
+    );
+  }
+
+  get config() {
+    return this._config;
+  }
+
+  private _config;
+
+  constructor(private svc: ChartService, private zoomService: ZoomService) {}
+
+  ngOnChanges(changes: SimpleChanges) {}
+
+  ngOnInit(): void {
+    this.svc.plotbandMove.subscribe((_) => {
+      this.plotBandsMove.emit(_);
+    });
+
+    this.svc.plotlineMove.subscribe((_) => {
+      this.plotLinesMove.emit(_);
+    });
+
+    this.svc.pointMove.subscribe((_) => {
+      this.pointMove.emit(_);
+    });
+  }
+
+  ngAfterViewInit() {}
+
+  ngOnDestroy() {
+    this.zoomService.broadcastSubscribtion?.unsubscribe();
+  }
+}

package/src/chart/chart-container/chart-container.component.html

@@ -0,0 +1,78 @@
+<ng-container *ngIf="size | async as s">
+  <teta-tooltip [size]="s"></teta-tooltip>
+  <svg
+       [tetaZoomable]
+       [tetaBrushable]
+       [size]="s"
+       [config]="config"
+       [attr.width]="s.width"
+       [attr.height]="s.height"
+       [attr.viewBox]="'0 0 '+s.width+' '+s.height"
+       (mouseleave)="mouseLeave($event)"
+       (mousemove)="mouseMove($event)">
+    <ng-container *ngIf="getVisibleRect(s) as rect">
+      <defs>
+        <clipPath [attr.id]="'visible-window-' + id()">
+          <rect [attr.x]="rect.left" [attr.y]="rect.top" [attr.width]="rect.width" [attr.height]="rect.height"></rect>
+        </clipPath>
+      </defs>
+
+      <g class="y-axis-container">
+        <g *ngFor="let item of yAxes | keyvalue"
+           teta-y-axis
+           [axis]="item.value"
+           [size]="s"
+           [attr.transform]="getTranslate(item.value, s)"></g>
+      </g>
+      <g class="x-axis-container">
+        <g *ngFor="let item of xAxes | keyvalue"
+           teta-x-axis
+
+           [axis]="item.value"
+           [size]="s"
+           [attr.transform]="getTranslate(item.value, s)"></g>
+      </g>
+      <g [attr.clip-path]="'url(#visible-window-'+ id() +')'">
+        <g [attr.transform]="'translate('+ rect.left +', '+ rect.top +')'">
+          <g class="gridlines" teta-gridlines [size]="s"></g>
+
+          <g class="x-axis-plotline-container">
+            <ng-container *ngFor="let axis of config.xAxis; let i = index">
+              <g teta-plot-line *ngFor="let plotline of axis.plotlines" [plotline]="plotline" [size]="s"
+                 [axis]="xAxes.get(i)"></g>
+            </ng-container>
+          </g>
+
+          <g class="y-axis-plotline-container">
+            <ng-container *ngFor="let axis of config.yAxis; let i = index">
+              <g teta-plot-line *ngFor="let plotline of axis.plotlines" [plotline]="plotline" [size]="s"
+                 [axis]="yAxes.get(i)"></g>
+            </ng-container>
+          </g>
+
+          <g class="x-axis-plotband-container">
+            <ng-container *ngFor="let axis of config.xAxis; let i = index">
+              <g teta-plot-band *ngFor="let plotband of axis.plotbands" [plotband]="plotband" [size]="s"
+                 [axis]="xAxes.get(i)"></g>
+            </ng-container>
+          </g>
+          <g class="y-axis-plotband-container">
+            <ng-container *ngFor="let axis of config.yAxis; let i = index">
+              <g teta-plot-band *ngFor="let plotband of axis.plotbands" [plotband]="plotband" [size]="s"
+                 [axis]="yAxes.get(i)"></g>
+            </ng-container>
+          </g>
+          <g class="series-tooltip-line-marker"></g>
+          <g class="series-container">
+            <g teta-series-host
+               *ngFor="let series of config.series"
+               [series]="series"
+               [size]="s"></g>
+          </g>
+        </g>
+      </g>
+    </ng-container>
+  </svg>
+
+
+</ng-container>

package/src/chart/chart-container/chart-container.component.scss

@@ -0,0 +1,15 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0;
+  min-height: 0;
+
+}
+
+:host .zoomable:hover {
+  cursor: grab;
+}
+:host .zoomable:active {
+  cursor: grabbing;
+}

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

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