@tetacom/ng-components 1.0.25 → 1.0.26

package/src/component/chart/model/series.ts

@@ -1,85 +0,0 @@
-import {BasePoint} from './point/base-point';
-import {SeriesType} from './enum/series-type';
-import {IDrawer} from './i-drawer';
-import * as d3 from 'd3';
-
-export class Series<T extends BasePoint> {
-  id?: number;
-  renderTo?: 'canvas' | 'svg';
-  type: SeriesType;
-  curveType?: d3.CurveFactoryLineOnly | d3.CurveFactory;
-  data: T[];
-  axisFormat?: () => void;
-  name?: string;
-  xAxisIndex?: number;
-  yAxisIndex?: number;
-  drawer?: IDrawer<T>;
-  strokeWidth?: number;
-  strokeDasharray?: string;
-  visible?: boolean;
-  color?: string;
-  colorScale?: d3.ScaleSequential<any, any>;
-  drag?: {
-    enable?: boolean;
-    extendLine?: boolean;
-    grabbers?: {
-      radius?: number;
-      stroke?: string;
-      fill?: string;
-      strokeWidth?: string;
-    };
-  };
-  extend?: boolean;
-  showInLegend?: boolean;
-
-  constructor(options?: {
-    id?: number;
-    renderTo?: 'canvas' | 'svg';
-    type?: SeriesType;
-    curveType?: d3.CurveFactoryLineOnly | d3.CurveFactory;
-    data?: T[];
-    axisFormat?: () => void;
-    name?: string;
-    xAxisIndex?: number;
-    yAxisIndex?: number;
-    drawer?: IDrawer<T>;
-    strokeWidth?: number;
-    strokeDasharray?: string;
-    visible?: boolean;
-    color?: string;
-    colorScale?: d3.ScaleSequential<any, any>;
-    drag?: {
-      enable?: boolean;
-      extendLine?: boolean;
-      grabbers?: {
-        radius?: number;
-        stroke?: string;
-        fill?: string;
-        strokeWidth?: string;
-      };
-    };
-    extend?: boolean;
-    showInLegend?: boolean;
-  }) {
-    this.id = options?.id;
-    this.renderTo = options?.renderTo ?? 'svg';
-    this.type = options?.type != null ? options?.type : SeriesType.line;
-    this.curveType =
-      options?.curveType != null ? options?.curveType : d3.curveLinear;
-    this.data = options?.data?.filter((_) => !isNaN(_.x) && !isNaN(_.y));
-    this.axisFormat = options?.axisFormat;
-    this.name = options?.name;
-    this.xAxisIndex = options?.xAxisIndex != null ? options?.xAxisIndex : 0;
-    this.yAxisIndex = options?.yAxisIndex != null ? options?.yAxisIndex : 0;
-    this.drawer = options?.drawer;
-    this.strokeWidth = options?.strokeWidth;
-    this.strokeDasharray = options?.strokeDasharray ?? null;
-    this.visible = options?.visible || true;
-    this.color = options?.color ?? 'cyan';
-    this.colorScale = options?.colorScale;
-    this.drag = {enable: false, extendLine: false, ...options?.drag};
-    this.showInLegend =
-      options?.showInLegend != null ? options?.showInLegend : true;
-    this.extend = options?.extend != null ? options?.extend : false;
-  }
-}

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

@@ -1,35 +0,0 @@
-export class TooltipOptions {
-  enable?: boolean;
-  showMarkers?: boolean;
-  showLine?: boolean;
-  tracking?: 'x' | 'y' | 'both';
-  format?: (data: any) => any;
-
-  constructor(options?: {
-    enable?: boolean;
-    showMarkers?: boolean;
-    showLine?: boolean;
-    tracking?: 'x' | 'y' | 'both';
-    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 ?? 'x';
-    this.format = options?.format ?? defaultFormatter;
-  }
-}

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

@@ -1,6 +0,0 @@
-export * from './chart.module';
-export * from './chart/chart.component';
-
-export * from './core/public-api';
-export * from './drawer/public-api';
-export * from './model/public-api';

package/src/component/chart-3d/chart-3d.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Chart3dComponent } from './chart3d/chart3d.component';
-
-@NgModule({
-  declarations: [Chart3dComponent],
-  exports: [Chart3dComponent],
-  imports: [CommonModule],
-})
-export class Chart3dModule {}

package/src/component/chart-3d/chart3d/chart3d.component.html

@@ -1 +0,0 @@
-<canvas #canvas></canvas>

package/src/component/chart-3d/chart3d/chart3d.component.scss

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

package/src/component/chart-3d/chart3d/chart3d.component.spec.ts

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

package/src/component/chart-3d/chart3d/chart3d.component.ts

@@ -1,336 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import * as d3 from 'd3';
-import { Chart3dOptions } from '../model/chart-3d-options';
-import { Base3dPoint } from '../model/base-3d-point';
-import { Series3d } from '../model/series-3d';
-import { ThemeSwitchService } from '../../theme-switch/theme-switch.service';
-import { takeWhile, tap } from 'rxjs/operators';
-
-@Component({
-  selector: 'teta-chart3d',
-  templateUrl: './chart3d.component.html',
-  styleUrls: ['./chart3d.component.scss'],
-})
-export class Chart3dComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('canvas') canvasRef: ElementRef;
-
-  private _scene: THREE.Scene;
-  private _camera: THREE.PerspectiveCamera;
-  private _renderer: THREE.Renderer;
-  private _controls: OrbitControls;
-  private _obs: ResizeObserver;
-  private _config: Chart3dOptions;
-
-  private SIDE_SIZE = 100;
-  private gridColor: any;
-
-  private _alive = true;
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _themeService: ThemeSwitchService
-  ) {}
-
-  @Input() set config(config: Chart3dOptions) {
-    if (config) {
-      this._config = config;
-      this.init();
-    }
-  }
-
-  get config() {
-    return this._config;
-  }
-
-  private get canvas(): HTMLCanvasElement {
-    return this.canvasRef.nativeElement;
-  }
-
-  ngOnInit(): void {
-    this._themeService.theme
-      .pipe(
-        takeWhile((_) => this._alive),
-        tap((_) => {
-          this.gridColor = _ ? '#474751' : '#d7dee3';
-          this.init();
-        })
-      )
-      .subscribe();
-  }
-
-  ngAfterViewInit() {
-    this.addResizeObserver();
-    this.createScene();
-    this.startRenderingLoop();
-  }
-
-  ngOnDestroy() {
-    this._alive = false;
-  }
-
-  private init() {
-    if (!this._scene) {
-      return;
-    }
-
-    while (this._scene.children.length > 0) {
-      this._scene.remove(this._scene.children[0]);
-    }
-
-    const { x, y, z } = this.getScales(this._config.series);
-
-    this.config.series.forEach((data, idx) => {
-      const geometry = new THREE.BufferGeometry().setFromPoints(
-        data.points.map((_) => new THREE.Vector3(x(_.x), z(_.z), y(_.y)))
-      );
-
-      const color = d3.scaleOrdinal(d3.schemeTableau10);
-
-      const material = new THREE.LineBasicMaterial({
-        color: data?.color ?? color(idx.toString()),
-      });
-
-      const line = new THREE.Line(geometry, material);
-
-      line.computeLineDistances();
-      line.scale.set(1, 1, 1);
-      this._scene.add(line);
-    });
-
-    const plane = new THREE.GridHelper(
-      this.SIDE_SIZE,
-      this.SIDE_SIZE / 10,
-      this.gridColor,
-      this.gridColor
-    );
-
-    plane.position.set(this.SIDE_SIZE / 2, 0, this.SIDE_SIZE / 2);
-    this._scene.add(plane);
-
-    const gridX = new THREE.GridHelper(
-      this.SIDE_SIZE,
-      this.SIDE_SIZE / 10,
-      this.gridColor,
-      this.gridColor
-    );
-    gridX.geometry.rotateX(-Math.PI / 2);
-    gridX.position.set(this.SIDE_SIZE / 2, this.SIDE_SIZE / 2, 0);
-    this._scene.add(gridX);
-
-    const gridY = new THREE.GridHelper(
-      this.SIDE_SIZE,
-      this.SIDE_SIZE / 10,
-      this.gridColor,
-      this.gridColor
-    );
-    gridY.geometry.rotateZ(Math.PI / 2);
-    gridY.position.set(0, this.SIDE_SIZE / 2, this.SIDE_SIZE / 2);
-    this._scene.add(gridY);
-
-    this.drawTicks(x, y, z);
-
-    this._controls = new OrbitControls(this._camera, this._renderer.domElement);
-
-    this._controls.enableDamping = true;
-    this._controls.enablePan = true;
-    this._controls.dampingFactor = 0.25;
-    this._controls.screenSpacePanning = true;
-    this._controls.minDistance = 0;
-    this._controls.maxDistance = 10000;
-    this._controls.maxPolarAngle = Math.PI / 2;
-
-    this._controls.enableZoom = true;
-  }
-
-  private createScene() {
-    this._scene = new THREE.Scene();
-
-    const aspectRatio =
-      this._elementRef.nativeElement.clientWidth /
-      this._elementRef.nativeElement.clientHeight;
-
-    const fieldOfView = 10;
-    const nearClippingPane = 1;
-    const farClippingPane = 10000;
-
-    this._camera = new THREE.PerspectiveCamera(
-      fieldOfView,
-      aspectRatio,
-      nearClippingPane,
-      farClippingPane
-    );
-
-    this._camera.position.set(1300, 1300, 1300).setLength(1300);
-    this._scene.add(this._camera);
-  }
-
-  private setSize(width: number, height: number) {
-    this._camera.aspect = width / height;
-    this._renderer.setSize(width, height);
-
-    this._camera.updateProjectionMatrix();
-  }
-
-  private render() {
-    this._renderer.render(this._scene, this._camera);
-  }
-
-  private startRenderingLoop() {
-    this._renderer = new THREE.WebGLRenderer({
-      antialias: true,
-      canvas: this.canvas,
-      alpha: true,
-      preserveDrawingBuffer: true,
-    });
-
-    const animate = () => {
-      requestAnimationFrame(animate);
-      this._controls?.update();
-      this.render();
-    };
-
-    animate();
-  }
-
-  private addResizeObserver() {
-    this._obs = new ResizeObserver((_) => {
-      this.setSize(_[0]?.contentRect.width, _[0]?.contentRect.height);
-    });
-
-    this._obs.observe(this._elementRef.nativeElement);
-  }
-
-  private makeSprite(text: string, opts?: { fontSize?: number }): THREE.Sprite {
-    const fontSize = 20;
-
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const textWidth = text.length * 50;
-    canvas.height = 50;
-    canvas.width = 50;
-
-    if(ctx) {
-      ctx.font = `${fontSize}px Arial`;
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillStyle = '#A0A0A0';
-      ctx.fillText(text, 25, 25);
-    }
-
-    const texture = new THREE.Texture(canvas);
-    texture.minFilter = THREE.LinearFilter;
-    texture.needsUpdate = true;
-    const spriteMaterial = new THREE.SpriteMaterial({
-      map: texture,
-    });
-
-    const sprite = new THREE.Sprite(spriteMaterial);
-    sprite.scale.set(5, 5, 5);
-
-    return sprite;
-  }
-
-  private drawTicks(x: any, y: any, z: any) {
-    const ticks = new THREE.Object3D();
-    const scalesExtrems: any[] = [];
-
-    [x, y, z].forEach((scale, idx) => {
-      const generatedTicks = scale.ticks(this.SIDE_SIZE / 10);
-
-      scalesExtrems.push(d3.max(generatedTicks));
-
-      generatedTicks.forEach((_: any) => {
-        const sprite = this.makeSprite(_);
-
-        if (idx === 0) {
-          sprite.position.set(x(_), z(0), -5);
-        }
-
-        if (idx === 1) {
-          sprite.position.set(-5, z(0), y(_));
-        }
-
-        if (idx === 2) {
-          sprite.position.set(0, z(_), -5);
-        }
-
-        ticks.add(sprite);
-      });
-    });
-
-    const northLabel = this.makeSprite('North', { fontSize: 28 });
-    const westLabel = this.makeSprite('West', { fontSize: 28 });
-    const tvdLabel = this.makeSprite('TVD', { fontSize: 28 });
-
-    northLabel.position.set(x(scalesExtrems[0]) + 10, 0, 0);
-    westLabel.position.set(0, 0, y(scalesExtrems[1]) + 10);
-    tvdLabel.position.set(0, z(scalesExtrems[2]), 0);
-
-    ticks.add(northLabel, westLabel, tvdLabel);
-
-    this._scene.add(ticks);
-  }
-
-  private getScales(series: Series3d<Base3dPoint>[]) {
-    const extrems = series.map((_) => ({
-      x: d3.extent(_.points, (p: any) => p.x),
-      y: d3.extent(_.points, (p: any) => p.y),
-      z: d3.extent(_.points, (p: any) => p.z),
-    }));
-
-    const flattenExtrems = extrems.reduce(
-      (acc: any, _): { x: [number]; y: [number]; z: [number] } => {
-        acc.x = acc.x.concat(_.x);
-        acc.y = acc.y.concat(_.y);
-        acc.z = acc.z.concat(_.z);
-        return acc as any;
-      },
-      { x: [], y: [], z: [] }
-    );
-
-    const x = d3
-      .scaleLinear()
-      .domain([
-        d3.min(flattenExtrems.x) as any,
-        this._config?.axes?.max == null
-          ? d3.max(flattenExtrems.x)
-          : this._config.axes.max,
-      ])
-      .range([0, this.SIDE_SIZE])
-      .nice();
-
-    const y = d3
-      .scaleLinear()
-      .domain([
-        d3.min(flattenExtrems.y) as any,
-        this._config?.axes?.max == null
-          ? d3.max(flattenExtrems.y)
-          : this._config.axes.max,
-      ])
-      .range([0, this.SIDE_SIZE])
-      .nice();
-
-    const z = d3
-      .scaleLinear()
-      .domain([
-        d3.min(flattenExtrems.z) as any,
-        this._config?.axes?.max == null
-          ? d3.max(flattenExtrems.z)
-          : this._config.axes.max,
-      ])
-      .range([this.SIDE_SIZE, 0])
-      .nice();
-
-    return { x, y, z };
-  }
-}

package/src/component/chart-3d/model/base-3d-point.ts

@@ -1,5 +0,0 @@
-export interface Base3dPoint {
-  x: number;
-  y: number;
-  z: number;
-}

package/src/component/chart-3d/model/chart-3d-options.ts

@@ -1,15 +0,0 @@
-import { Base3dPoint } from './base-3d-point';
-import { Series3d } from './series-3d';
-
-export class Chart3dOptions {
-  axes?: {
-    max?: number;
-  };
-
-  series: Series3d<Base3dPoint>[];
-
-  constructor(options?: Chart3dOptions) {
-    this.axes = { ...options?.axes };
-    this.series = options?.series || [];
-  }
-}

package/src/component/chart-3d/model/public-api.ts

@@ -1,2 +0,0 @@
-export * from './chart-3d-options';
-export * from './base-3d-point';

package/src/component/chart-3d/model/series-3d.ts

@@ -1,11 +0,0 @@
-import { Base3dPoint } from './base-3d-point';
-
-export class Series3d<T extends Base3dPoint> {
-  color?: string;
-  points: T[];
-
-  constructor(options?: { color?: string; points: T[] }) {
-    this.color = options?.color;
-    this.points = options?.points || [];
-  }
-}

package/src/component/chart-3d/public-api.ts

@@ -1,3 +0,0 @@
-export * from './chart-3d.module';
-export * from './chart3d/chart3d.component';
-export * from './model/public-api';

package/src/component/checkbox/Checkbox.mdx

@@ -1,18 +0,0 @@
-import * as stories from './Checkbox.stories.ts';
-import { Story } from '@storybook/addon-docs';
-
-# Basic Checkbox
-
-# Button
-
-I can embed a story (but not define one, since this file should not contain a `Meta`):
-
-<Story id="example-checkbox--binary" />
-
-<Canvas>
-  <Story id="example-checkbox--list"></Story>
-</Canvas>
-
-```javascript
-let test: string = 'test';
-```

package/src/component/checkbox/Checkbox.stories.ts

@@ -1,92 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-// eslint-disable-next-line id-blacklist
-import { select, text, withKnobs, boolean } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import { CheckboxComponent } from './checkbox/checkbox.component';
-import { CheckboxModule } from './checkbox.module';
-// @ts-ignore
-import mdx from './Checkbox.mdx';
-import { IconModule } from '../icon/icon.module';
-import { FormsModule } from '@angular/forms';
-
-export default {
-  title: 'Component/Checkbox',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-  decorators: [withKnobs],
-  component: CheckboxComponent,
-  moduleMetadata: {
-    imports: [CheckboxModule, FormsModule],
-  },
-} as Meta;
-
-export const binary = () => ({
-  moduleMetadata: {
-    imports: [CheckboxModule, IconModule, FormsModule],
-  },
-  props: {
-    type: select('type', ['binary', 'list'], 'binary'),
-    allowUndefined: boolean('allowUndefined', false),
-    text: text('text', 'Remember me'),
-    palette: select('palette', ['primary', 'grey', 'red', 'white'], 'primary'),
-    value: false,
-    setValue: (value) => {
-      action('log')(value);
-    },
-  },
-  template: `<teta-checkbox [tetaIconSprite]="'assets/icons.svg'"
-                            [palette]="palette"
-                            [ngModel]="value"
-                            (ngModelChange)="setValue($event)"
-                            [binary]="true">
-              {{text}}
-            </teta-checkbox>`,
-});
-
-export const list = () => ({
-  moduleMetadata: {
-    imports: [CheckboxModule, IconModule, FormsModule],
-  },
-  props: {
-    type: select('type', ['binary', 'list'], 'binary'),
-    palette: select('palette', ['primary', 'grey', 'red', 'white'], 'primary'),
-    value: false,
-    setValue: (value) => {
-      action('log')(value);
-    },
-    values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-    result: [],
-    selectAll: (value: boolean, result: number[], values: number[]) => {
-      result = [];
-      if (value) {
-        result.push(...values);
-      }
-      return result;
-    },
-    allSelected: (result: number[], values: number[]) => {
-      if (!result || result?.length < 1) {
-        return false;
-      }
-      if (values.every((_) => result.indexOf(_) >= 0)) {
-        return true;
-      }
-      return undefined;
-    },
-  },
-  template: `
-<div style="display:flex; align-items: center;" class="font-body-3 margin-bottom-4" [tetaIconSprite]="'assets/icons.svg'">
-  <teta-checkbox  [ngModel]="allSelected(result, values)"
-                  [palette]="palette"
-                  (ngModelChange)="result = selectAll($event, result, values)"
-                  [allowNull]="true"
-                  [binary]="true">Выбрать все</teta-checkbox>
-</div>
-<div *ngFor="let num of values" style="display:flex; align-items: center;" class="font-body-3 margin-bottom-2">
-  <teta-checkbox [palette]="palette" [ngModel]="result" (ngModelChange)="result = $event;setValue($event)" [value]="num">
-    Option {{num}}
-  </teta-checkbox>
-</div>`,
-});

package/src/component/checkbox/checkbox/checkbox.component.html

@@ -1,6 +0,0 @@
-<div class="checkbox__tick">
-  <teta-icon [name]="checked ? 'tick' : checked === false ? '' : 'minus'"></teta-icon>
-</div>
-<span class="font-body-3 margin-left-1" *ngIf="!noLabel">
-  <ng-content></ng-content>
-</span>