@tetacom/ng-threejs-chart 1.1.0 → 1.2.1
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/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 +90 -110
- 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 -53
- package/esm2022/component/three/three-chart/axes-3d/axes-3d.component.mjs +0 -56
- 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 -21
- 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
|
|
3
|
+
import * as i2 from '@angular/common';
|
|
4
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: "17.0.0", version: "
|
|
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: "17.0.0", version: "
|
|
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,34 +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
202
|
ngOnDestroy() {
|
|
216
203
|
this._alive = false;
|
|
217
204
|
}
|
|
218
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
219
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
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 [options]=\"{\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 [options]=\"{\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 [options]=\"{\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 }); }
|
|
220
207
|
}
|
|
221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Axes3dComponent, decorators: [{
|
|
222
209
|
type: Component,
|
|
223
|
-
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 [options]=\"{\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 [options]=\"{\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 [options]=\"{\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" }]
|
|
224
211
|
}], ctorParameters: () => [], propDecorators: { rotation: [{
|
|
225
212
|
type: Input
|
|
226
213
|
}] } });
|
|
227
214
|
|
|
228
215
|
extend(THREE);
|
|
229
216
|
class Block3dComponent extends Base3dSeriesComponent {
|
|
230
|
-
constructor(svc
|
|
231
|
-
super(svc
|
|
217
|
+
constructor(svc) {
|
|
218
|
+
super(svc);
|
|
232
219
|
this.svc = svc;
|
|
233
|
-
this.ngtStore = ngtStore;
|
|
234
220
|
this._alive = true;
|
|
235
221
|
this.Math = Math;
|
|
236
|
-
this.blocks = this.svc.scales.pipe(takeWhile(() => this._alive), map(scales => {
|
|
237
|
-
return this.series?.data?.map(_ => {
|
|
222
|
+
this.blocks = this.svc.scales.pipe(takeWhile(() => this._alive), map((scales) => {
|
|
223
|
+
return this.series?.data?.map((_) => {
|
|
238
224
|
return this.createSVGTexture(scales.y(_?.y), scales.y(_?.y1), _?.iconId);
|
|
239
225
|
});
|
|
240
226
|
}));
|
|
@@ -244,7 +230,9 @@ class Block3dComponent extends Base3dSeriesComponent {
|
|
|
244
230
|
const min = Math.min(y, y1);
|
|
245
231
|
const height = Math.abs(max - min);
|
|
246
232
|
const icon = iconId ? document.querySelector(`#${iconId}`) : null;
|
|
247
|
-
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;
|
|
248
236
|
const loader = new THREE.TextureLoader();
|
|
249
237
|
const texture = loader.load(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`);
|
|
250
238
|
const plane = this.createTexturedPlane(texture, 100, height, !!icon);
|
|
@@ -280,41 +268,42 @@ class Block3dComponent extends Base3dSeriesComponent {
|
|
|
280
268
|
ngOnDestroy() {
|
|
281
269
|
this._alive = false;
|
|
282
270
|
}
|
|
283
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
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 }); }
|
|
285
273
|
}
|
|
286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Block3dComponent, decorators: [{
|
|
287
275
|
type: Component,
|
|
288
|
-
args: [{ selector: 'teta-block-3d',
|
|
289
|
-
}], 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 }] });
|
|
290
278
|
|
|
291
279
|
extend(THREE);
|
|
292
280
|
class Line3dComponent extends Base3dSeriesComponent {
|
|
293
|
-
constructor(svc
|
|
294
|
-
super(svc
|
|
281
|
+
constructor(svc) {
|
|
282
|
+
super(svc);
|
|
295
283
|
this.svc = svc;
|
|
296
|
-
this.ngtStore = ngtStore;
|
|
297
284
|
this._alive = true;
|
|
298
285
|
this.Math = Math;
|
|
299
|
-
this.points = this.svc.scales.pipe(takeWhile(() => this._alive), map(scales => {
|
|
286
|
+
this.points = this.svc.scales.pipe(takeWhile(() => this._alive), map((scales) => {
|
|
300
287
|
return this.getPoints(scales);
|
|
301
288
|
}));
|
|
302
289
|
}
|
|
303
290
|
getPoints(scales) {
|
|
304
|
-
return this.series?.data
|
|
291
|
+
return this.series?.data
|
|
292
|
+
?.map((_) => {
|
|
305
293
|
return [scales.x(_?.x), scales.y(_?.y), scales.z(_?.z)];
|
|
306
|
-
})
|
|
294
|
+
})
|
|
295
|
+
.flat();
|
|
307
296
|
}
|
|
308
297
|
ngOnDestroy() {
|
|
309
298
|
this._alive = false;
|
|
310
299
|
}
|
|
311
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
312
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
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 [options]=\"{color: series.color,lineWidth: 2}\"\n [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 }); }
|
|
313
302
|
}
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Line3dComponent, decorators: [{
|
|
315
304
|
type: Component,
|
|
316
|
-
args: [{ selector: 'teta-line-3d',
|
|
317
|
-
}], 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 [options]=\"{color: series.color,lineWidth: 2}\"\n [points]=\"data.points\"></ngts-line>\n <ngt-line-basic-material></ngt-line-basic-material>\n </ngt-mesh>\n }\n}\n" }]
|
|
306
|
+
}], ctorParameters: () => [{ type: Chart3dService }] });
|
|
318
307
|
|
|
319
308
|
var Series3dType;
|
|
320
309
|
(function (Series3dType) {
|
|
@@ -339,17 +328,15 @@ class Series3dHost {
|
|
|
339
328
|
this._init = true;
|
|
340
329
|
}
|
|
341
330
|
ngOnChanges(changes) {
|
|
342
|
-
if (this._init &&
|
|
343
|
-
(Object.prototype.hasOwnProperty.call(changes, 'series') ||
|
|
344
|
-
changes.hasOwnProperty('config'))) {
|
|
331
|
+
if (this._init && (Object.prototype.hasOwnProperty.call(changes, 'series') || changes.hasOwnProperty('config'))) {
|
|
345
332
|
this._componentRef.instance.series = this.series;
|
|
346
333
|
this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
|
|
347
334
|
}
|
|
348
335
|
}
|
|
349
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
350
|
-
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 }); }
|
|
351
338
|
}
|
|
352
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
339
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Series3dHost, decorators: [{
|
|
353
340
|
type: Component,
|
|
354
341
|
args: [{
|
|
355
342
|
selector: '[teta-series-3d-host]',
|
|
@@ -363,7 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
363
350
|
|
|
364
351
|
class SceneComponent {
|
|
365
352
|
constructor() {
|
|
366
|
-
this.store =
|
|
353
|
+
this.store = injectStore();
|
|
367
354
|
this.Math = Math;
|
|
368
355
|
this.chartService = inject(Chart3dService);
|
|
369
356
|
this._cdr = inject(ChangeDetectorRef);
|
|
@@ -378,12 +365,12 @@ class SceneComponent {
|
|
|
378
365
|
ngOnInit() {
|
|
379
366
|
this.rotation = this.store.get('camera').rotation;
|
|
380
367
|
}
|
|
381
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
382
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
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 }); }
|
|
383
370
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SceneComponent, decorators: [{
|
|
385
372
|
type: Component,
|
|
386
|
-
args: [{
|
|
373
|
+
args: [{ selector: 'teta-scene', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
387
374
|
NgtsOrbitControls,
|
|
388
375
|
CommonModule,
|
|
389
376
|
Area3dComponent,
|
|
@@ -391,16 +378,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
391
378
|
Axes3dComponent,
|
|
392
379
|
Block3dComponent,
|
|
393
380
|
Series3dHost,
|
|
394
|
-
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if ({data: data|async}; as config) {\n <ngt-scene>\n <ngts-orbit-controls
|
|
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" }]
|
|
395
382
|
}], ctorParameters: () => [] });
|
|
396
383
|
|
|
397
384
|
class CanvasComponent {
|
|
398
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
399
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
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", "rendered", "pointerMissed"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
400
387
|
}
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CanvasComponent, decorators: [{
|
|
402
389
|
type: Component,
|
|
403
|
-
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"] }]
|
|
404
391
|
}], propDecorators: { scene: [{
|
|
405
392
|
type: Input
|
|
406
393
|
}], camera: [{
|
|
@@ -431,10 +418,10 @@ class Canvas3dHost {
|
|
|
431
418
|
this._componentRef.instance.camera = this.camera;
|
|
432
419
|
this._componentRef.instance.data = this.data;
|
|
433
420
|
}
|
|
434
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
435
|
-
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 }); }
|
|
436
423
|
}
|
|
437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Canvas3dHost, decorators: [{
|
|
438
425
|
type: Component,
|
|
439
426
|
args: [{
|
|
440
427
|
selector: '[teta-canvas-3d-host]',
|
|
@@ -454,7 +441,6 @@ extend(THREE);
|
|
|
454
441
|
class ThreeChartComponent {
|
|
455
442
|
constructor() {
|
|
456
443
|
this.chartService = inject(Chart3dService);
|
|
457
|
-
this.store = inject(NgtStore);
|
|
458
444
|
this.cdr = inject(ChangeDetectorRef);
|
|
459
445
|
}
|
|
460
446
|
ngOnInit() {
|
|
@@ -469,18 +455,12 @@ class ThreeChartComponent {
|
|
|
469
455
|
this.chartService.setData(this.data);
|
|
470
456
|
}
|
|
471
457
|
}
|
|
472
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
473
|
-
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 }); }
|
|
474
460
|
}
|
|
475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThreeChartComponent, decorators: [{
|
|
476
462
|
type: Component,
|
|
477
|
-
args: [{ selector: 'teta-three-chart',
|
|
478
|
-
NgtCanvas,
|
|
479
|
-
SceneComponent,
|
|
480
|
-
CommonModule,
|
|
481
|
-
CanvasComponent,
|
|
482
|
-
Canvas3dHost,
|
|
483
|
-
], 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"] }]
|
|
484
464
|
}], propDecorators: { data: [{
|
|
485
465
|
type: Input
|
|
486
466
|
}] } });
|