@tetacom/ng-threejs-chart 1.0.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +3 -5
- package/component/three/custom-series/custom-series.component.d.ts +1 -3
- package/component/three/three-chart/area-3d/area-3d.component.d.ts +5 -4
- package/component/three/three-chart/axes-3d/axes-3d.component.d.ts +0 -1
- package/component/three/three-chart/base-3d-series/base3d-series.component.d.ts +2 -3
- package/component/three/three-chart/block-3d/block-3d.component.d.ts +3 -5
- package/component/three/three-chart/canvas/canvas.component.d.ts +2 -2
- package/component/three/three-chart/line-3d/line-3d.component.d.ts +1 -3
- package/component/three/three-chart/scene/scene.component.d.ts +1 -2
- package/component/three/three-chart/three-chart.component.d.ts +0 -2
- package/fesm2022/tetacom-ng-threejs-chart.mjs +91 -114
- package/fesm2022/tetacom-ng-threejs-chart.mjs.map +1 -1
- package/package.json +3 -5
- package/esm2022/common/model/base-3d-point.mjs +0 -2
- package/esm2022/component/three/custom-series/custom-series.component.mjs +0 -32
- package/esm2022/component/three/public-api.mjs +0 -12
- package/esm2022/component/three/three-chart/area-3d/area-3d.component.mjs +0 -54
- package/esm2022/component/three/three-chart/axes-3d/axes-3d.component.mjs +0 -59
- package/esm2022/component/three/three-chart/base-3d-series/base3d-series.component.mjs +0 -28
- package/esm2022/component/three/three-chart/block-3d/block-3d.component.mjs +0 -74
- package/esm2022/component/three/three-chart/canvas/canvas.component.mjs +0 -22
- package/esm2022/component/three/three-chart/directive/canvas-3d-host.mjs +0 -45
- package/esm2022/component/three/three-chart/directive/public-api.mjs +0 -3
- package/esm2022/component/three/three-chart/directive/series-3d-host.mjs +0 -45
- package/esm2022/component/three/three-chart/line-3d/line-3d.component.mjs +0 -40
- package/esm2022/component/three/three-chart/model/axes-3d-min-max.mjs +0 -2
- package/esm2022/component/three/three-chart/model/axis-3d-point.mjs +0 -2
- package/esm2022/component/three/three-chart/model/base-3d-series.mjs +0 -2
- package/esm2022/component/three/three-chart/model/base-3d-three-point.mjs +0 -2
- package/esm2022/component/three/three-chart/model/block-3d-series.mjs +0 -2
- package/esm2022/component/three/three-chart/model/block3d-point.mjs +0 -2
- package/esm2022/component/three/three-chart/model/enum/public-api.mjs +0 -2
- package/esm2022/component/three/three-chart/model/enum/series-3d-type.mjs +0 -6
- package/esm2022/component/three/three-chart/model/i-3d-chart-config.mjs +0 -2
- package/esm2022/component/three/three-chart/model/line-3d-point.mjs +0 -2
- package/esm2022/component/three/three-chart/model/line-3d-series.mjs +0 -2
- package/esm2022/component/three/three-chart/model/public-api.mjs +0 -11
- package/esm2022/component/three/three-chart/scene/scene.component.mjs +0 -45
- package/esm2022/component/three/three-chart/service/chart-3d.service.mjs +0 -83
- package/esm2022/component/three/three-chart/three-chart.component.mjs +0 -45
- package/esm2022/index.mjs +0 -2
- package/esm2022/tetacom-ng-threejs-chart.mjs +0 -5
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, Component, Input, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, ChangeDetectorRef } from '@angular/core';
|
|
3
|
-
import * as
|
|
4
|
-
import { CommonModule,
|
|
3
|
+
import * as i2 from '@angular/common';
|
|
4
|
+
import { CommonModule, AsyncPipe } from '@angular/common';
|
|
5
5
|
import * as d3 from 'd3';
|
|
6
6
|
import { ReplaySubject, map, shareReplay, combineLatest, takeWhile } from 'rxjs';
|
|
7
|
-
import
|
|
8
|
-
import { extend, NgtArgs, NgtStore, NgtCanvas } from 'angular-three';
|
|
7
|
+
import { injectStore, extend, NgtArgs, NgtCanvas } from 'angular-three';
|
|
9
8
|
import * as THREE from 'three';
|
|
10
9
|
import { GridHelper, OrthographicCamera } from 'three';
|
|
11
10
|
import { NgtsText, NgtsLine } from 'angular-three-soba/abstractions';
|
|
@@ -15,10 +14,10 @@ class Chart3dService {
|
|
|
15
14
|
constructor() {
|
|
16
15
|
this.data$ = new ReplaySubject(1);
|
|
17
16
|
this.data = this.data$.asObservable();
|
|
18
|
-
this.minMax = this.data.pipe(map(_ => {
|
|
17
|
+
this.minMax = this.data.pipe(map((_) => {
|
|
19
18
|
return this.getAxesMinMax(_);
|
|
20
19
|
}));
|
|
21
|
-
this.scales = this.minMax.pipe(map(minMax => {
|
|
20
|
+
this.scales = this.minMax.pipe(map((minMax) => {
|
|
22
21
|
return this.getScales(minMax);
|
|
23
22
|
}), shareReplay(1));
|
|
24
23
|
}
|
|
@@ -27,27 +26,27 @@ class Chart3dService {
|
|
|
27
26
|
}
|
|
28
27
|
getAxesMinMax(data) {
|
|
29
28
|
const zArr = data.series
|
|
30
|
-
.map(_ => {
|
|
31
|
-
return _?.data?.map(d => d?.z);
|
|
29
|
+
.map((_) => {
|
|
30
|
+
return _?.data?.map((d) => d?.z);
|
|
32
31
|
})
|
|
33
32
|
.flat()
|
|
34
|
-
.filter(_ => {
|
|
33
|
+
.filter((_) => {
|
|
35
34
|
return _ !== null && _ !== undefined;
|
|
36
35
|
});
|
|
37
36
|
const xArr = data.series
|
|
38
|
-
.map(_ => {
|
|
39
|
-
return _?.data?.map(d => d?.x);
|
|
37
|
+
.map((_) => {
|
|
38
|
+
return _?.data?.map((d) => d?.x);
|
|
40
39
|
})
|
|
41
40
|
.flat()
|
|
42
|
-
.filter(_ => {
|
|
41
|
+
.filter((_) => {
|
|
43
42
|
return _ !== null && _ !== undefined;
|
|
44
43
|
});
|
|
45
44
|
const yArr = data.series
|
|
46
|
-
.map(_ => {
|
|
47
|
-
return _?.data?.map(d => d?.y);
|
|
45
|
+
.map((_) => {
|
|
46
|
+
return _?.data?.map((d) => d?.y);
|
|
48
47
|
})
|
|
49
48
|
.flat()
|
|
50
|
-
.filter(_ => {
|
|
49
|
+
.filter((_) => {
|
|
51
50
|
return _ !== null && _ !== undefined;
|
|
52
51
|
});
|
|
53
52
|
const ZMinMaxVal = [Math.min(...zArr), Math.max(...zArr)];
|
|
@@ -60,14 +59,8 @@ class Chart3dService {
|
|
|
60
59
|
};
|
|
61
60
|
}
|
|
62
61
|
getMinMaxRange(minMax, axisMin, axisMax) {
|
|
63
|
-
const min = axisMin ||
|
|
64
|
-
|
|
65
|
-
? minMax[0] - Math.abs(minMax[0] - 1) * 0.1
|
|
66
|
-
: minMax[0]);
|
|
67
|
-
const max = axisMax ||
|
|
68
|
-
(Math.abs(minMax[0] - minMax[1]) < 0.0000001
|
|
69
|
-
? minMax[1] + Math.abs(minMax[1] + 1) * 0.1
|
|
70
|
-
: minMax[1]);
|
|
62
|
+
const min = axisMin || (Math.abs(minMax[0] - minMax[1]) < 0.0000001 ? minMax[0] - Math.abs(minMax[0] - 1) * 0.1 : minMax[0]);
|
|
63
|
+
const max = axisMax || (Math.abs(minMax[0] - minMax[1]) < 0.0000001 ? minMax[1] + Math.abs(minMax[1] + 1) * 0.1 : minMax[1]);
|
|
71
64
|
return [min, max];
|
|
72
65
|
}
|
|
73
66
|
getScales(axesMinMax) {
|
|
@@ -80,10 +73,10 @@ class Chart3dService {
|
|
|
80
73
|
z,
|
|
81
74
|
};
|
|
82
75
|
}
|
|
83
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
84
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
76
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Chart3dService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
77
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Chart3dService, providedIn: 'root' }); }
|
|
85
78
|
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Chart3dService, decorators: [{
|
|
87
80
|
type: Injectable,
|
|
88
81
|
args: [{
|
|
89
82
|
providedIn: 'root',
|
|
@@ -97,26 +90,25 @@ class Base3dSeriesComponent {
|
|
|
97
90
|
get series() {
|
|
98
91
|
return this._series;
|
|
99
92
|
}
|
|
100
|
-
constructor(svc
|
|
93
|
+
constructor(svc) {
|
|
101
94
|
this.svc = svc;
|
|
102
|
-
this.ngtStore =
|
|
95
|
+
this.ngtStore = injectStore();
|
|
103
96
|
}
|
|
104
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
105
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
97
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Base3dSeriesComponent, deps: [{ token: Chart3dService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
98
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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 }] }); }
|
|
106
99
|
}
|
|
107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Base3dSeriesComponent, decorators: [{
|
|
108
101
|
type: Component,
|
|
109
|
-
args: [{ selector: 'teta-base3d-series',
|
|
110
|
-
}], ctorParameters: () => [{ type: Chart3dService }
|
|
102
|
+
args: [{ selector: 'teta-base3d-series', imports: [CommonModule], template: "<p>base3d-series works!</p>\n" }]
|
|
103
|
+
}], ctorParameters: () => [{ type: Chart3dService }], propDecorators: { series: [{
|
|
111
104
|
type: Input
|
|
112
105
|
}] } });
|
|
113
106
|
|
|
114
107
|
extend(THREE);
|
|
115
108
|
class CustomSeriesComponent extends Base3dSeriesComponent {
|
|
116
|
-
constructor(svc
|
|
117
|
-
super(svc
|
|
109
|
+
constructor(svc) {
|
|
110
|
+
super(svc);
|
|
118
111
|
this.svc = svc;
|
|
119
|
-
this.ngtStore = ngtStore;
|
|
120
112
|
this.scales = this.svc.scales;
|
|
121
113
|
}
|
|
122
114
|
ngOnInit() {
|
|
@@ -125,13 +117,13 @@ class CustomSeriesComponent extends Base3dSeriesComponent {
|
|
|
125
117
|
this.ngtStore.get('camera').updateProjectionMatrix();
|
|
126
118
|
}, 1000);
|
|
127
119
|
}
|
|
128
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
129
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CustomSeriesComponent, deps: [{ token: Chart3dService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CustomSeriesComponent, isStandalone: true, selector: "teta-custom-series", usesInheritance: true, ngImport: i0, template: "@if ({ scales: scales | async }; as scales) {\n <ngt-mesh\n [position]=\"[\n scales.scales.x(this.series.data[0].x),\n scales.scales.y(this.series.data[0].y),\n scales.scales.z(this.series.data[0].z),\n ]\"\n >\n <ngt-box-geometry *args=\"[5, 5, 5]\"></ngt-box-geometry>\n <ngt-mesh-basic-material></ngt-mesh-basic-material>\n </ngt-mesh>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
130
122
|
}
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CustomSeriesComponent, decorators: [{
|
|
132
124
|
type: Component,
|
|
133
|
-
args: [{ selector: 'teta-custom-series',
|
|
134
|
-
}], ctorParameters: () => [{ type: Chart3dService }
|
|
125
|
+
args: [{ selector: 'teta-custom-series', imports: [CommonModule, NgtArgs], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ scales: scales | async }; as scales) {\n <ngt-mesh\n [position]=\"[\n scales.scales.x(this.series.data[0].x),\n scales.scales.y(this.series.data[0].y),\n scales.scales.z(this.series.data[0].z),\n ]\"\n >\n <ngt-box-geometry *args=\"[5, 5, 5]\"></ngt-box-geometry>\n <ngt-mesh-basic-material></ngt-mesh-basic-material>\n </ngt-mesh>\n}\n" }]
|
|
126
|
+
}], ctorParameters: () => [{ type: Chart3dService }] });
|
|
135
127
|
|
|
136
128
|
extend(THREE);
|
|
137
129
|
class Area3dComponent {
|
|
@@ -172,12 +164,12 @@ class Area3dComponent {
|
|
|
172
164
|
ngOnInit() {
|
|
173
165
|
this.area = this.createArea();
|
|
174
166
|
}
|
|
175
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
176
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
167
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Area3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 @for (rect of area; track rect) {\n <ngt-primitive *args=\"[rect]\"></ngt-primitive>\n }\n</ngt-mesh>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
177
169
|
}
|
|
178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Area3dComponent, decorators: [{
|
|
179
171
|
type: Component,
|
|
180
|
-
args: [{ selector: 'teta-area-3d',
|
|
172
|
+
args: [{ selector: 'teta-area-3d', 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 @for (rect of area; track rect) {\n <ngt-primitive *args=\"[rect]\"></ngt-primitive>\n }\n</ngt-mesh>\n" }]
|
|
181
173
|
}] });
|
|
182
174
|
|
|
183
175
|
extend(THREE);
|
|
@@ -185,21 +177,18 @@ class Axes3dComponent {
|
|
|
185
177
|
constructor() {
|
|
186
178
|
this._alive = true;
|
|
187
179
|
this.chartService = inject(Chart3dService);
|
|
188
|
-
this.axes = combineLatest([
|
|
189
|
-
this.chartService.scales,
|
|
190
|
-
this.chartService.minMax,
|
|
191
|
-
]).pipe(takeWhile(() => this._alive), map(([scales, minMax]) => {
|
|
180
|
+
this.axes = combineLatest([this.chartService.scales, this.chartService.minMax]).pipe(takeWhile(() => this._alive), map(([scales, minMax]) => {
|
|
192
181
|
return this.createAxes(scales, minMax);
|
|
193
182
|
}));
|
|
194
183
|
}
|
|
195
184
|
createAxes(scales, minMax) {
|
|
196
|
-
const axisZ = this.generateTicks(minMax.z, 12).map(_ => {
|
|
185
|
+
const axisZ = this.generateTicks(minMax.z, 12).map((_) => {
|
|
197
186
|
return { value: _.toFixed(1), position: scales.z(_) };
|
|
198
187
|
});
|
|
199
|
-
const axisY = this.generateTicks(minMax.y, 12).map(_ => {
|
|
188
|
+
const axisY = this.generateTicks(minMax.y, 12).map((_) => {
|
|
200
189
|
return { value: _.toFixed(1), position: scales.y(_) };
|
|
201
190
|
});
|
|
202
|
-
const axisX = this.generateTicks(minMax.x, 4).map(_ => {
|
|
191
|
+
const axisX = this.generateTicks(minMax.x, 4).map((_) => {
|
|
203
192
|
return { value: _.toFixed(1), position: scales.x(_) };
|
|
204
193
|
});
|
|
205
194
|
return { z: axisZ, y: axisY, x: axisX };
|
|
@@ -207,37 +196,31 @@ class Axes3dComponent {
|
|
|
207
196
|
generateTicks(extremes, count = 10) {
|
|
208
197
|
const [min, max] = extremes;
|
|
209
198
|
const tickStep = (max - min) / count;
|
|
210
|
-
const ticks = d3
|
|
211
|
-
.range(min, max + tickStep, tickStep)
|
|
212
|
-
.filter(step => step <= max);
|
|
199
|
+
const ticks = d3.range(min, max + tickStep, tickStep).filter((step) => step <= max);
|
|
213
200
|
return ticks;
|
|
214
201
|
}
|
|
215
|
-
trackBy(i) {
|
|
216
|
-
return i;
|
|
217
|
-
}
|
|
218
202
|
ngOnDestroy() {
|
|
219
203
|
this._alive = false;
|
|
220
204
|
}
|
|
221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
205
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Axes3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
206
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "@if ({ axes: axes | async }; as data) {\n @for (tick of data.axes?.x; track tick) {\n <ngts-text\n [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 }\n @for (tick of data.axes?.y; track tick) {\n <ngts-text\n [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 }\n @for (tick of data.axes?.z; track tick) {\n <ngts-text\n [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 }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text", inputs: ["text", "options"], outputs: ["synced"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
223
207
|
}
|
|
224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Axes3dComponent, decorators: [{
|
|
225
209
|
type: Component,
|
|
226
|
-
args: [{ selector: 'teta-axes-3d',
|
|
210
|
+
args: [{ selector: 'teta-axes-3d', imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ axes: axes | async }; as data) {\n @for (tick of data.axes?.x; track tick) {\n <ngts-text\n [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 }\n @for (tick of data.axes?.y; track tick) {\n <ngts-text\n [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 }\n @for (tick of data.axes?.z; track tick) {\n <ngts-text\n [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 }\n}\n" }]
|
|
227
211
|
}], ctorParameters: () => [], propDecorators: { rotation: [{
|
|
228
212
|
type: Input
|
|
229
213
|
}] } });
|
|
230
214
|
|
|
231
215
|
extend(THREE);
|
|
232
216
|
class Block3dComponent extends Base3dSeriesComponent {
|
|
233
|
-
constructor(svc
|
|
234
|
-
super(svc
|
|
217
|
+
constructor(svc) {
|
|
218
|
+
super(svc);
|
|
235
219
|
this.svc = svc;
|
|
236
|
-
this.ngtStore = ngtStore;
|
|
237
220
|
this._alive = true;
|
|
238
221
|
this.Math = Math;
|
|
239
|
-
this.blocks = this.svc.scales.pipe(takeWhile(() => this._alive), map(scales => {
|
|
240
|
-
return this.series?.data?.map(_ => {
|
|
222
|
+
this.blocks = this.svc.scales.pipe(takeWhile(() => this._alive), map((scales) => {
|
|
223
|
+
return this.series?.data?.map((_) => {
|
|
241
224
|
return this.createSVGTexture(scales.y(_?.y), scales.y(_?.y1), _?.iconId);
|
|
242
225
|
});
|
|
243
226
|
}));
|
|
@@ -247,7 +230,9 @@ class Block3dComponent extends Base3dSeriesComponent {
|
|
|
247
230
|
const min = Math.min(y, y1);
|
|
248
231
|
const height = Math.abs(max - min);
|
|
249
232
|
const icon = iconId ? document.querySelector(`#${iconId}`) : null;
|
|
250
|
-
const svgString = icon
|
|
233
|
+
const svgString = icon
|
|
234
|
+
? `<svg width='100' height='100' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>${icon?.innerHTML}</svg>`
|
|
235
|
+
: null;
|
|
251
236
|
const loader = new THREE.TextureLoader();
|
|
252
237
|
const texture = loader.load(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`);
|
|
253
238
|
const plane = this.createTexturedPlane(texture, 100, height, !!icon);
|
|
@@ -283,41 +268,42 @@ class Block3dComponent extends Base3dSeriesComponent {
|
|
|
283
268
|
ngOnDestroy() {
|
|
284
269
|
this._alive = false;
|
|
285
270
|
}
|
|
286
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
287
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
271
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Block3dComponent, deps: [{ token: Chart3dService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
272
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: Block3dComponent, isStandalone: true, selector: "teta-block-3d", usesInheritance: true, ngImport: i0, template: "@if ({ blocks: blocks | async, scales: svc.scales | async }; as data) {\n @for (mesh of data.blocks; let i = $index; track mesh) {\n <ngt-primitive *args=\"[mesh[0].component]\"></ngt-primitive>\n <ngts-text\n [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'\"\n ></ngts-text>\n <ngt-primitive *args=\"[mesh[1].component]\"></ngt-primitive>\n }\n}\n", dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtsText, selector: "ngts-text", inputs: ["text", "options"], outputs: ["synced"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
288
273
|
}
|
|
289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Block3dComponent, decorators: [{
|
|
290
275
|
type: Component,
|
|
291
|
-
args: [{ selector: 'teta-block-3d',
|
|
292
|
-
}], ctorParameters: () => [{ type: Chart3dService }
|
|
276
|
+
args: [{ selector: 'teta-block-3d', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgtArgs, NgtsText, AsyncPipe], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if ({ blocks: blocks | async, scales: svc.scales | async }; as data) {\n @for (mesh of data.blocks; let i = $index; track mesh) {\n <ngt-primitive *args=\"[mesh[0].component]\"></ngt-primitive>\n <ngts-text\n [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'\"\n ></ngts-text>\n <ngt-primitive *args=\"[mesh[1].component]\"></ngt-primitive>\n }\n}\n" }]
|
|
277
|
+
}], ctorParameters: () => [{ type: Chart3dService }] });
|
|
293
278
|
|
|
294
279
|
extend(THREE);
|
|
295
280
|
class Line3dComponent extends Base3dSeriesComponent {
|
|
296
|
-
constructor(svc
|
|
297
|
-
super(svc
|
|
281
|
+
constructor(svc) {
|
|
282
|
+
super(svc);
|
|
298
283
|
this.svc = svc;
|
|
299
|
-
this.ngtStore = ngtStore;
|
|
300
284
|
this._alive = true;
|
|
301
285
|
this.Math = Math;
|
|
302
|
-
this.points = this.svc.scales.pipe(takeWhile(() => this._alive), map(scales => {
|
|
286
|
+
this.points = this.svc.scales.pipe(takeWhile(() => this._alive), map((scales) => {
|
|
303
287
|
return this.getPoints(scales);
|
|
304
288
|
}));
|
|
305
289
|
}
|
|
306
290
|
getPoints(scales) {
|
|
307
|
-
return this.series?.data
|
|
291
|
+
return this.series?.data
|
|
292
|
+
?.map((_) => {
|
|
308
293
|
return [scales.x(_?.x), scales.y(_?.y), scales.z(_?.z)];
|
|
309
|
-
})
|
|
294
|
+
})
|
|
295
|
+
.flat();
|
|
310
296
|
}
|
|
311
297
|
ngOnDestroy() {
|
|
312
298
|
this._alive = false;
|
|
313
299
|
}
|
|
314
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
300
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Line3dComponent, deps: [{ token: Chart3dService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: Line3dComponent, isStandalone: true, selector: "teta-line-3d", usesInheritance: true, ngImport: i0, template: "@if ({ points: points | async }; as data) {\n @if (data?.points?.length) {\n <ngt-mesh>\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 }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
316
302
|
}
|
|
317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Line3dComponent, decorators: [{
|
|
318
304
|
type: Component,
|
|
319
|
-
args: [{ selector: 'teta-line-3d',
|
|
320
|
-
}], ctorParameters: () => [{ type: Chart3dService }
|
|
305
|
+
args: [{ selector: 'teta-line-3d', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, NgtsLine, NgtArgs], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if ({ points: points | async }; as data) {\n @if (data?.points?.length) {\n <ngt-mesh>\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 }\n}\n" }]
|
|
306
|
+
}], ctorParameters: () => [{ type: Chart3dService }] });
|
|
321
307
|
|
|
322
308
|
var Series3dType;
|
|
323
309
|
(function (Series3dType) {
|
|
@@ -342,17 +328,15 @@ class Series3dHost {
|
|
|
342
328
|
this._init = true;
|
|
343
329
|
}
|
|
344
330
|
ngOnChanges(changes) {
|
|
345
|
-
if (this._init &&
|
|
346
|
-
(Object.prototype.hasOwnProperty.call(changes, 'series') ||
|
|
347
|
-
changes.hasOwnProperty('config'))) {
|
|
331
|
+
if (this._init && (Object.prototype.hasOwnProperty.call(changes, 'series') || changes.hasOwnProperty('config'))) {
|
|
348
332
|
this._componentRef.instance.series = this.series;
|
|
349
333
|
this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
|
|
350
334
|
}
|
|
351
335
|
}
|
|
352
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
336
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Series3dHost, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
337
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: Series3dHost, isStandalone: true, selector: "[teta-series-3d-host]", inputs: { series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
354
338
|
}
|
|
355
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
339
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Series3dHost, decorators: [{
|
|
356
340
|
type: Component,
|
|
357
341
|
args: [{
|
|
358
342
|
selector: '[teta-series-3d-host]',
|
|
@@ -366,7 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
|
|
|
366
350
|
|
|
367
351
|
class SceneComponent {
|
|
368
352
|
constructor() {
|
|
369
|
-
this.store =
|
|
353
|
+
this.store = injectStore();
|
|
370
354
|
this.Math = Math;
|
|
371
355
|
this.chartService = inject(Chart3dService);
|
|
372
356
|
this._cdr = inject(ChangeDetectorRef);
|
|
@@ -381,12 +365,12 @@ class SceneComponent {
|
|
|
381
365
|
ngOnInit() {
|
|
382
366
|
this.rotation = this.store.get('camera').rotation;
|
|
383
367
|
}
|
|
384
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
385
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
368
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
369
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SceneComponent, isStandalone: true, selector: "teta-scene", ngImport: i0, template: "@if ({ data: data | async }; as config) {\n <ngt-scene>\n <ngts-orbit-controls\n [minAzimuthAngle]=\"0\"\n [maxAzimuthAngle]=\"Math.PI / 2\"\n [maxZoom]=\"30\"\n [minZoom]=\"2\"\n (change)=\"setRotation()\"\n ></ngts-orbit-controls>\n </ngt-scene>\n <teta-area-3d></teta-area-3d>\n @for (s of config.data?.series; track s) {\n <div teta-series-3d-host [series]=\"s\"></div>\n }\n <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n}\n", dependencies: [{ kind: "component", type: NgtsOrbitControls, selector: "ngts-orbit-controls", inputs: ["options"], outputs: ["changed", "started", "ended"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.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 }); }
|
|
386
370
|
}
|
|
387
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SceneComponent, decorators: [{
|
|
388
372
|
type: Component,
|
|
389
|
-
args: [{
|
|
373
|
+
args: [{ selector: 'teta-scene', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
390
374
|
NgtsOrbitControls,
|
|
391
375
|
CommonModule,
|
|
392
376
|
Area3dComponent,
|
|
@@ -394,16 +378,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
|
|
|
394
378
|
Axes3dComponent,
|
|
395
379
|
Block3dComponent,
|
|
396
380
|
Series3dHost,
|
|
397
|
-
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "
|
|
381
|
+
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if ({ data: data | async }; as config) {\n <ngt-scene>\n <ngts-orbit-controls\n [minAzimuthAngle]=\"0\"\n [maxAzimuthAngle]=\"Math.PI / 2\"\n [maxZoom]=\"30\"\n [minZoom]=\"2\"\n (change)=\"setRotation()\"\n ></ngts-orbit-controls>\n </ngt-scene>\n <teta-area-3d></teta-area-3d>\n @for (s of config.data?.series; track s) {\n <div teta-series-3d-host [series]=\"s\"></div>\n }\n <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n}\n" }]
|
|
398
382
|
}], ctorParameters: () => [] });
|
|
399
383
|
|
|
400
384
|
class CanvasComponent {
|
|
401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
385
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
386
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CanvasComponent, isStandalone: true, selector: "teta-canvas", inputs: { scene: "scene", camera: "camera", data: "data" }, ngImport: i0, template: "@if (data?.series?.length) {\n <ngt-canvas [sceneGraph]=\"scene\" [camera]=\"camera\"> </ngt-canvas>\n} @else {\n <p>{{ data?.noDataText || 'no data' }}</p>\n}\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgtCanvas, selector: "ngt-canvas", inputs: ["sceneGraph", "gl", "size", "shadows", "legacy", "linear", "flat", "orthographic", "frameloop", "performance", "dpr", "raycaster", "scene", "camera", "events", "eventSource", "eventPrefix", "lookAt"], outputs: ["created", "pointerMissed"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
403
387
|
}
|
|
404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CanvasComponent, decorators: [{
|
|
405
389
|
type: Component,
|
|
406
|
-
args: [{ selector: 'teta-canvas',
|
|
390
|
+
args: [{ selector: 'teta-canvas', schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgtCanvas, SceneComponent, CommonModule], template: "@if (data?.series?.length) {\n <ngt-canvas [sceneGraph]=\"scene\" [camera]=\"camera\"> </ngt-canvas>\n} @else {\n <p>{{ data?.noDataText || 'no data' }}</p>\n}\n", styles: [":host{width:100%;height:100%}\n"] }]
|
|
407
391
|
}], propDecorators: { scene: [{
|
|
408
392
|
type: Input
|
|
409
393
|
}], camera: [{
|
|
@@ -434,10 +418,10 @@ class Canvas3dHost {
|
|
|
434
418
|
this._componentRef.instance.camera = this.camera;
|
|
435
419
|
this._componentRef.instance.data = this.data;
|
|
436
420
|
}
|
|
437
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
438
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
421
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Canvas3dHost, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
422
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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 }); }
|
|
439
423
|
}
|
|
440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Canvas3dHost, decorators: [{
|
|
441
425
|
type: Component,
|
|
442
426
|
args: [{
|
|
443
427
|
selector: '[teta-canvas-3d-host]',
|
|
@@ -457,7 +441,6 @@ extend(THREE);
|
|
|
457
441
|
class ThreeChartComponent {
|
|
458
442
|
constructor() {
|
|
459
443
|
this.chartService = inject(Chart3dService);
|
|
460
|
-
this.store = inject(NgtStore);
|
|
461
444
|
this.cdr = inject(ChangeDetectorRef);
|
|
462
445
|
}
|
|
463
446
|
ngOnInit() {
|
|
@@ -472,18 +455,12 @@ class ThreeChartComponent {
|
|
|
472
455
|
this.chartService.setData(this.data);
|
|
473
456
|
}
|
|
474
457
|
}
|
|
475
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
476
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
458
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThreeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ThreeChartComponent, isStandalone: true, selector: "teta-three-chart", inputs: { data: "data" }, 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 }); }
|
|
477
460
|
}
|
|
478
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThreeChartComponent, decorators: [{
|
|
479
462
|
type: Component,
|
|
480
|
-
args: [{ selector: 'teta-three-chart',
|
|
481
|
-
NgtCanvas,
|
|
482
|
-
SceneComponent,
|
|
483
|
-
CommonModule,
|
|
484
|
-
CanvasComponent,
|
|
485
|
-
Canvas3dHost,
|
|
486
|
-
], 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"] }]
|
|
463
|
+
args: [{ selector: 'teta-three-chart', schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, 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"] }]
|
|
487
464
|
}], propDecorators: { data: [{
|
|
488
465
|
type: Input
|
|
489
466
|
}] } });
|