@tetacom/svg-charts 1.0.2 → 1.1.3

package/src/chart/Chart.stories.ts

@@ -1,397 +0,0 @@
-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-svg-chart [config]="config" (pointMove)="event($event)" class="bg-background-50 border border-text-50"></teta-svg-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-svg-chart [config]="config2" (pointMove)="event($event)" class="bg-background-50 border border-text-50"></teta-svg-chart>
-      </div>
-    </div>
-`,
-});

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

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

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

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

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

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

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

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

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

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