@tetacom/ng-threejs-chart 1.0.1

package/fesm2022/tetacom-ng-threejs-chart.mjs

@@ -0,0 +1,496 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, ChangeDetectorRef } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgIf, AsyncPipe, NgForOf } from '@angular/common';
+import * as d3 from 'd3';
+import { ReplaySubject, map, shareReplay, combineLatest, takeWhile } from 'rxjs';
+import * as i2 from 'angular-three';
+import { extend, NgtArgs, NgtStore, NgtCanvas } from 'angular-three';
+import * as THREE from 'three';
+import { GridHelper, OrthographicCamera } from 'three';
+import { NgtsText, NgtsLine } from 'angular-three-soba/abstractions';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+
+class Chart3dService {
+    constructor() {
+        this.data$ = new ReplaySubject(1);
+        this.data = this.data$.asObservable();
+        this.minMax = this.data.pipe(map(_ => {
+            return this.getAxesMinMax(_);
+        }));
+        this.scales = this.minMax.pipe(map(minMax => {
+            return this.getScales(minMax);
+        }), shareReplay(1));
+    }
+    setData(data) {
+        this.data$.next(data);
+    }
+    getAxesMinMax(data) {
+        const zArr = data.series
+            .map(_ => {
+            return _?.data?.map(d => d?.z);
+        })
+            .flat()
+            .filter(_ => {
+            return _ !== null && _ !== undefined;
+        });
+        const xArr = data.series
+            .map(_ => {
+            return _?.data?.map(d => d?.x);
+        })
+            .flat()
+            .filter(_ => {
+            return _ !== null && _ !== undefined;
+        });
+        const yArr = data.series
+            .map(_ => {
+            return _?.data?.map(d => d?.y);
+        })
+            .flat()
+            .filter(_ => {
+            return _ !== null && _ !== undefined;
+        });
+        const ZMinMaxVal = [Math.min(...zArr), Math.max(...zArr)];
+        const XMinMaxVal = [Math.min(...xArr), Math.max(...xArr)];
+        const YMinMaxVal = [Math.min(...yArr), Math.max(...yArr)];
+        return {
+            z: this.getMinMaxRange(ZMinMaxVal, data.zAxis?.min, data.zAxis?.max),
+            x: this.getMinMaxRange(XMinMaxVal, data.xAxis?.min, data.xAxis?.max),
+            y: this.getMinMaxRange(YMinMaxVal, data.yAxis?.min, data.yAxis?.max),
+        };
+    }
+    getMinMaxRange(minMax, axisMin, axisMax) {
+        const min = axisMin ||
+            (Math.abs(minMax[0] - minMax[1]) < 0.0000001
+                ? minMax[0] - Math.abs(minMax[0] - 1) * 0.1
+                : minMax[0]);
+        const max = axisMax ||
+            (Math.abs(minMax[0] - minMax[1]) < 0.0000001
+                ? minMax[1] + Math.abs(minMax[1] + 1) * 0.1
+                : minMax[1]);
+        return [min, max];
+    }
+    getScales(axesMinMax) {
+        const z = d3.scaleLinear().domain(axesMinMax.z).range([50, -50]);
+        const x = d3.scaleLinear().domain(axesMinMax.x).range([25, 0]);
+        const y = d3.scaleLinear().domain(axesMinMax.y).range([50, -50]);
+        return {
+            x,
+            y,
+            z,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Chart3dService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Chart3dService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Chart3dService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class Base3dSeriesComponent {
+    set series(series) {
+        this._series = series;
+    }
+    get series() {
+        return this._series;
+    }
+    constructor(svc, ngtStore) {
+        this.svc = svc;
+        this.ngtStore = ngtStore;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Base3dSeriesComponent, deps: [{ token: Chart3dService }, { token: i2.NgtStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: Base3dSeriesComponent, isStandalone: true, selector: "teta-base3d-series", inputs: { series: "series" }, ngImport: i0, template: "<p>base3d-series works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Base3dSeriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-base3d-series', standalone: true, imports: [CommonModule], template: "<p>base3d-series works!</p>\n" }]
+        }], ctorParameters: () => [{ type: Chart3dService }, { type: i2.NgtStore }], propDecorators: { series: [{
+                type: Input
+            }] } });
+
+extend(THREE);
+class CustomSeriesComponent extends Base3dSeriesComponent {
+    constructor(svc, ngtStore) {
+        super(svc, ngtStore);
+        this.svc = svc;
+        this.ngtStore = ngtStore;
+        this.scales = this.svc.scales;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.ngtStore.get('camera').zoom = 2;
+            this.ngtStore.get('camera').updateProjectionMatrix();
+        }, 1000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: CustomSeriesComponent, deps: [{ token: Chart3dService }, { token: i2.NgtStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: CustomSeriesComponent, isStandalone: true, selector: "teta-custom-series", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\" {scales:scales|async} as scales\">\n    <ngt-mesh [position]=\"[scales.scales.x(this.series.data[0].x),scales.scales.y(this.series.data[0].y),scales.scales.z(this.series.data[0].z) ]\">\n      <ngt-box-geometry   *args=\"[5,5,5]\"></ngt-box-geometry>\n      <ngt-mesh-basic-material></ngt-mesh-basic-material>\n    </ngt-mesh>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: CustomSeriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-custom-series', standalone: true, imports: [CommonModule, NgtArgs], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\" {scales:scales|async} as scales\">\n    <ngt-mesh [position]=\"[scales.scales.x(this.series.data[0].x),scales.scales.y(this.series.data[0].y),scales.scales.z(this.series.data[0].z) ]\">\n      <ngt-box-geometry   *args=\"[5,5,5]\"></ngt-box-geometry>\n      <ngt-mesh-basic-material></ngt-mesh-basic-material>\n    </ngt-mesh>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: Chart3dService }, { type: i2.NgtStore }] });
+
+extend(THREE);
+class Area3dComponent {
+    constructor() {
+        this.THREE = THREE;
+    }
+    createArea() {
+        const grids = [];
+        grids.push(this.getMainGrid());
+        grids.push(...this.createGrid(4, 25, 3, 'vertical'));
+        grids.push(...this.createGrid(4, 25, 3, 'horizontal'));
+        return grids;
+    }
+    getMainGrid() {
+        const mainGrid = new GridHelper(100, 12);
+        mainGrid.position.set(0, 0, 0);
+        mainGrid.rotateZ(Math.PI / 2);
+        return mainGrid;
+    }
+    createGrid(gridsCount, gridSize, rectsInGrid, direction) {
+        const plane = [];
+        for (let p = 0; p <= gridsCount - 1; p++) {
+            plane[p] = new THREE.GridHelper(gridSize, rectsInGrid, '#666', '#666');
+            plane[p].renderOrder = -1;
+            switch (direction) {
+                case 'horizontal':
+                    plane[p].position.set(gridSize / 2, -50, gridSize * p + gridSize / 2 - 50);
+                    break;
+                case 'vertical':
+                    plane[p].position.set(gridSize / 2, gridSize * p + gridSize / 2 - 50, -50);
+                    plane[p].rotateZ(Math.PI / 2);
+                    plane[p].rotateX(Math.PI / 2);
+                    break;
+            }
+        }
+        return plane;
+    }
+    ngOnInit() {
+        this.area = this.createArea();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Area3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: Area3dComponent, isStandalone: true, selector: "teta-area-3d", ngImport: i0, template: "<ngt-mesh>\n  <ngt-mesh-basic-material [side]=\"THREE.DoubleSide\"></ngt-mesh-basic-material>\n  <ng-container *ngFor=\"let rect of area\">\n    <ngt-primitive *args=\"[rect]\"></ngt-primitive>\n  </ng-container>\n</ngt-mesh>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Area3dComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-area-3d', standalone: true, imports: [CommonModule, NgtArgs], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ngt-mesh>\n  <ngt-mesh-basic-material [side]=\"THREE.DoubleSide\"></ngt-mesh-basic-material>\n  <ng-container *ngFor=\"let rect of area\">\n    <ngt-primitive *args=\"[rect]\"></ngt-primitive>\n  </ng-container>\n</ngt-mesh>\n" }]
+        }] });
+
+extend(THREE);
+class Axes3dComponent {
+    constructor() {
+        this._alive = true;
+        this.chartService = inject(Chart3dService);
+        this.axes = combineLatest([
+            this.chartService.scales,
+            this.chartService.minMax,
+        ]).pipe(takeWhile(() => this._alive), map(([scales, minMax]) => {
+            return this.createAxes(scales, minMax);
+        }));
+    }
+    createAxes(scales, minMax) {
+        const axisZ = this.generateTicks(minMax.z, 12).map(_ => {
+            return { value: _.toFixed(1), position: scales.z(_) };
+        });
+        const axisY = this.generateTicks(minMax.y, 12).map(_ => {
+            return { value: _.toFixed(1), position: scales.y(_) };
+        });
+        const axisX = this.generateTicks(minMax.x, 4).map(_ => {
+            return { value: _.toFixed(1), position: scales.x(_) };
+        });
+        return { z: axisZ, y: axisY, x: axisX };
+    }
+    generateTicks(extremes, count = 10) {
+        const [min, max] = extremes;
+        const tickStep = (max - min) / count;
+        const ticks = d3
+            .range(min, max + tickStep, tickStep)
+            .filter(step => step <= max);
+        return ticks;
+    }
+    trackBy(i) {
+        return i;
+    }
+    ngOnDestroy() {
+        this._alive = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Axes3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf='{axes:axes|async}as data'>\n  <ngts-text *ngFor='let tick of data.axes?.x;let i=index; trackBy: trackBy' [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[tick.position, -50, 50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.y;let i=index; trackBy: trackBy' [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[0,tick.position,50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.z;let i=index; trackBy: trackBy' [text]='tick.value'\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[25,-50,tick.position]'\n  ></ngts-text>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Axes3dComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf='{axes:axes|async}as data'>\n  <ngts-text *ngFor='let tick of data.axes?.x;let i=index; trackBy: trackBy' [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[tick.position, -50, 50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.y;let i=index; trackBy: trackBy' [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[0,tick.position,50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.z;let i=index; trackBy: trackBy' [text]='tick.value'\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[25,-50,tick.position]'\n  ></ngts-text>\n</ng-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { rotation: [{
+                type: Input
+            }] } });
+
+extend(THREE);
+class Block3dComponent extends Base3dSeriesComponent {
+    constructor(svc, ngtStore) {
+        super(svc, ngtStore);
+        this.svc = svc;
+        this.ngtStore = ngtStore;
+        this._alive = true;
+        this.Math = Math;
+        this.blocks = this.svc.scales.pipe(takeWhile(() => this._alive), map(scales => {
+            return this.series?.data?.map(_ => {
+                return this.createSVGTexture(scales.y(_?.y), scales.y(_?.y1), _?.iconId);
+            });
+        }));
+    }
+    createSVGTexture(y, y1, iconId) {
+        const max = Math.max(y, y1);
+        const min = Math.min(y, y1);
+        const height = Math.abs(max - min);
+        const icon = iconId ? document.querySelector(`#${iconId}`) : null;
+        const svgString = icon ? `<svg width='100' height='100' viewBox='0 0 16 16' fill='none'  xmlns='http://www.w3.org/2000/svg'>${icon?.innerHTML}</svg>` : null;
+        const loader = new THREE.TextureLoader();
+        const texture = loader.load(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`);
+        const plane = this.createTexturedPlane(texture, 100, height, !!icon);
+        const plane1 = this.createTexturedPlane(texture, 25, height, !!icon);
+        plane.rotation.set(0, Math.PI / 2, 0);
+        plane.position.set(0.17, min + height / 2, 0);
+        plane1.position.set(25 / 2, min + height / 2, -50 + 0.17);
+        return [
+            { component: plane, position: min + height / 2 },
+            { component: plane1, position: min + height / 2 },
+        ];
+    }
+    createTexturedPlane(texture, width, height, visible) {
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.RepeatWrapping;
+        texture.repeat.set(10, height / 9);
+        const material = new THREE.MeshBasicMaterial({ map: texture, visible });
+        const geometry = new THREE.PlaneGeometry(width, height, 1, 1);
+        const uvs = geometry.attributes['uv'].array;
+        const newUvs = new Float32Array(uvs);
+        newUvs[0] = 0;
+        newUvs[1] = 1;
+        newUvs[2] = width / 100;
+        newUvs[3] = 1;
+        newUvs[4] = 0;
+        newUvs[5] = 0;
+        newUvs[6] = width / 100;
+        newUvs[7] = 0;
+        geometry.attributes['uv'].needsUpdate = true;
+        geometry.setAttribute('uv', new THREE.BufferAttribute(newUvs, 2));
+        return new THREE.Mesh(geometry, material);
+    }
+    ngOnDestroy() {
+        this._alive = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Block3dComponent, deps: [{ token: Chart3dService }, { token: i2.NgtStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: Block3dComponent, isStandalone: true, selector: "teta-block-3d", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf='{\n    blocks: blocks | async,\n    scales: svc.scales | async\n  } as data'>\n  <ng-container *ngFor='let mesh of data.blocks; let i=index'>\n    <ngt-primitive *args='[mesh[0].component]'></ngt-primitive>\n    <ngts-text [text]='series.data[i].name'\n               color='black'\n               [fontSize]='2.5'\n               [rotation]='[0,Math.PI/2,0]'\n               [position]='[1,mesh[0].position,5]'\n               [textAlign]=\"'left'\"\n               [anchorX]=\"'center'\"\n               [anchorY]=\"'middle'\"></ngts-text>\n    <ngt-primitive *args='[mesh[1].component]'></ngt-primitive>\n  </ng-container>\n</ng-container>\n\n", dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Block3dComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-block-3d', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgtArgs, NgtsText, NgIf, AsyncPipe, NgForOf], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf='{\n    blocks: blocks | async,\n    scales: svc.scales | async\n  } as data'>\n  <ng-container *ngFor='let mesh of data.blocks; let i=index'>\n    <ngt-primitive *args='[mesh[0].component]'></ngt-primitive>\n    <ngts-text [text]='series.data[i].name'\n               color='black'\n               [fontSize]='2.5'\n               [rotation]='[0,Math.PI/2,0]'\n               [position]='[1,mesh[0].position,5]'\n               [textAlign]=\"'left'\"\n               [anchorX]=\"'center'\"\n               [anchorY]=\"'middle'\"></ngts-text>\n    <ngt-primitive *args='[mesh[1].component]'></ngt-primitive>\n  </ng-container>\n</ng-container>\n\n" }]
+        }], ctorParameters: () => [{ type: Chart3dService }, { type: i2.NgtStore }] });
+
+extend(THREE);
+class Line3dComponent extends Base3dSeriesComponent {
+    constructor(svc, ngtStore) {
+        super(svc, ngtStore);
+        this.svc = svc;
+        this.ngtStore = ngtStore;
+        this._alive = true;
+        this.Math = Math;
+        this.points = this.svc.scales.pipe(takeWhile(() => this._alive), map(scales => {
+            return this.getPoints(scales);
+        }));
+    }
+    getPoints(scales) {
+        return this.series?.data?.map(_ => {
+            return [scales.x(_?.x), scales.y(_?.y), scales.z(_?.z)];
+        }).flat();
+    }
+    ngOnDestroy() {
+        this._alive = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Line3dComponent, deps: [{ token: Chart3dService }, { token: i2.NgtStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: Line3dComponent, isStandalone: true, selector: "teta-line-3d", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{points:points|async}as data\">\n  <ngt-mesh *ngIf=\"data?.points?.length\">\n    <ngts-line [color]=\"series.color\" [lineWidth]=\"2\" [points]=\"data.points\"></ngts-line>\n    <ngt-line-basic-material></ngt-line-basic-material>\n  </ngt-mesh>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Line3dComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-line-3d', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, NgtsLine, NgtArgs], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"{points:points|async}as data\">\n  <ngt-mesh *ngIf=\"data?.points?.length\">\n    <ngts-line [color]=\"series.color\" [lineWidth]=\"2\" [points]=\"data.points\"></ngts-line>\n    <ngt-line-basic-material></ngt-line-basic-material>\n  </ngt-mesh>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: Chart3dService }, { type: i2.NgtStore }] });
+
+var Series3dType;
+(function (Series3dType) {
+    Series3dType[Series3dType["line"] = 0] = "line";
+    Series3dType[Series3dType["block"] = 1] = "block";
+})(Series3dType || (Series3dType = {}));
+
+class Series3dHost {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.seriesMap = new Map()
+            .set(Series3dType.line, Line3dComponent)
+            .set(Series3dType.block, Block3dComponent);
+        this._init = false;
+    }
+    ngOnInit() {
+        if (!Object.prototype.isPrototypeOf.call(Base3dSeriesComponent, this.series.component)) {
+            this.series.component = this.seriesMap.get(this.series.type);
+        }
+        this._componentRef = this.viewContainerRef.createComponent(this.series.component);
+        this._componentRef.instance.series = this.series;
+        this._init = true;
+    }
+    ngOnChanges(changes) {
+        if (this._init &&
+            (Object.prototype.hasOwnProperty.call(changes, 'series') ||
+                changes.hasOwnProperty('config'))) {
+            this._componentRef.instance.series = this.series;
+            this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Series3dHost, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: Series3dHost, isStandalone: true, selector: "[teta-series-3d-host]", inputs: { series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Series3dHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[teta-series-3d-host]',
+                    template: '',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { series: [{
+                type: Input
+            }] } });
+
+class SceneComponent {
+    constructor() {
+        this.store = inject(NgtStore);
+        this.Math = Math;
+        this.chartService = inject(Chart3dService);
+        this._cdr = inject(ChangeDetectorRef);
+        this.data = this.chartService.data;
+    }
+    setRotation() {
+        this.rotation = null;
+        this._cdr.detectChanges();
+        this.rotation = this.store.get('camera').rotation;
+        this._cdr.detectChanges();
+    }
+    ngOnInit() {
+        this.rotation = this.store.get('camera').rotation;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SceneComponent, isStandalone: true, selector: "teta-scene", ngImport: i0, template: "<ng-container *ngIf='{data:data|async} as config'>\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]='0'\n                         [maxAzimuthAngle]='Math.PI/2'\n                         [maxZoom]='30'\n                         [minZoom]='2'\n                         (change)='setRotation()'></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor='let s of config.data?.series;'>\n    <div teta-series-3d-host [series]='s'></div>\n  </ng-container>\n  <teta-axes-3d [rotation]='rotation'></teta-axes-3d>\n</ng-container>\n\n\n", dependencies: [{ kind: "component", type: NgtsOrbitControls, selector: "ngts-orbit-controls", inputs: ["controlsRef", "camera", "domElement", "makeDefault", "regress", "target", "enableDamping"], outputs: ["change", "start", "end"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: Area3dComponent, selector: "teta-area-3d" }, { kind: "component", type: Axes3dComponent, selector: "teta-axes-3d", inputs: ["rotation"] }, { kind: "component", type: Series3dHost, selector: "[teta-series-3d-host]", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SceneComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'teta-scene', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgtsOrbitControls,
+                        CommonModule,
+                        Area3dComponent,
+                        Line3dComponent,
+                        Axes3dComponent,
+                        Block3dComponent,
+                        Series3dHost,
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf='{data:data|async} as config'>\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]='0'\n                         [maxAzimuthAngle]='Math.PI/2'\n                         [maxZoom]='30'\n                         [minZoom]='2'\n                         (change)='setRotation()'></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor='let s of config.data?.series;'>\n    <div teta-series-3d-host [series]='s'></div>\n  </ng-container>\n  <teta-axes-3d [rotation]='rotation'></teta-axes-3d>\n</ng-container>\n\n\n" }]
+        }], ctorParameters: () => [] });
+
+class CanvasComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: CanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: CanvasComponent, isStandalone: true, selector: "teta-canvas", inputs: { scene: "scene", camera: "camera", data: "data" }, providers: [NgtStore], ngImport: i0, template: "<ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n            [camera]=\"camera\">\n</ngt-canvas>\n<ng-template #noData>\n  <p>{{data?.noDataText || 'no data'}}</p>\n</ng-template>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgtCanvas, selector: "ngt-canvas", inputs: ["sceneGraph", "sceneGraphInputs", "compoundPrefixes", "linear", "legacy", "flat", "orthographic", "frameloop", "dpr", "raycaster", "shadows", "camera", "gl", "eventSource", "eventPrefix", "lookAt", "performance"], outputs: ["created", "pointerMissed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: CanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-canvas', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule], template: "<ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n            [camera]=\"camera\">\n</ngt-canvas>\n<ng-template #noData>\n  <p>{{data?.noDataText || 'no data'}}</p>\n</ng-template>\n", styles: [":host{width:100%;height:100%}\n"] }]
+        }], propDecorators: { scene: [{
+                type: Input
+            }], camera: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+class Canvas3dHost {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this._init = false;
+    }
+    ngOnInit() {
+        this.createCanvas();
+        this._init = true;
+    }
+    ngOnChanges() {
+        if (this._init) {
+            this.createCanvas();
+            this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
+        }
+    }
+    createCanvas() {
+        this.viewContainerRef.clear();
+        this._componentRef = this.viewContainerRef.createComponent(CanvasComponent);
+        this._componentRef.instance.scene = this.scene;
+        this._componentRef.instance.camera = this.camera;
+        this._componentRef.instance.data = this.data;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Canvas3dHost, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: Canvas3dHost, isStandalone: true, selector: "[teta-canvas-3d-host]", inputs: { scene: "scene", camera: "camera", data: "data" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Canvas3dHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[teta-canvas-3d-host]',
+                    template: '',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { scene: [{
+                type: Input
+            }], camera: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+extend(THREE);
+class ThreeChartComponent {
+    constructor() {
+        this.chartService = inject(Chart3dService);
+        this.store = inject(NgtStore);
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    ngOnInit() {
+        this.scene = SceneComponent;
+        this.camera = new OrthographicCamera(20, 20, 20, 20, 0.1, 1000);
+        this.camera.position.set(100, 20, 70);
+        this.camera.zoom = 4.5;
+        this.camera.updateProjectionMatrix();
+    }
+    ngOnChanges(changes) {
+        if (this.data?.series?.length) {
+            this.chartService.setData(this.data);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ThreeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ThreeChartComponent, isStandalone: true, selector: "teta-three-chart", inputs: { data: "data" }, providers: [NgtStore], usesOnChanges: true, ngImport: i0, template: "<div  class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <div teta-canvas-3d-host [camera]=\"camera\" [data]=\"data\" [scene]=\"scene\"></div>\n</div>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Canvas3dHost, selector: "[teta-canvas-3d-host]", inputs: ["scene", "camera", "data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ThreeChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [
+                        NgtCanvas,
+                        SceneComponent,
+                        CommonModule,
+                        CanvasComponent,
+                        Canvas3dHost,
+                    ], template: "<div  class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <div teta-canvas-3d-host [camera]=\"camera\" [data]=\"data\" [scene]=\"scene\"></div>\n</div>\n", styles: [":host{width:100%;height:100%}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Area3dComponent, Axes3dComponent, Base3dSeriesComponent, Block3dComponent, Canvas3dHost, CanvasComponent, CustomSeriesComponent, Line3dComponent, SceneComponent, Series3dHost, Series3dType, ThreeChartComponent };
+//# sourceMappingURL=tetacom-ng-threejs-chart.mjs.map