@tetacom/ng-components 1.1.24 → 1.1.25
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/component/three/three-chart/canvas/canvas.component.d.ts +3 -3
- package/component/three/three-chart/service/chart-3d.service.d.ts +1 -1
- package/esm2022/component/chart-3d/chart3d/chart3d.component.mjs +21 -13
- package/esm2022/component/three/three-chart/axes-3d/axes-3d.component.mjs +3 -3
- package/esm2022/component/three/three-chart/canvas/canvas.component.mjs +4 -4
- package/esm2022/component/three/three-chart/scene/scene.component.mjs +3 -3
- package/esm2022/component/three/three-chart/service/chart-3d.service.mjs +4 -4
- package/esm2022/component/three/three-chart/three-chart.component.mjs +10 -4
- package/fesm2022/tetacom-ng-components.mjs +33 -19
- package/fesm2022/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -12109,11 +12109,11 @@ class Chart3dService {
|
|
|
12109
12109
|
}
|
|
12110
12110
|
getMinMaxRange(minMax, axisMin, axisMax) {
|
|
12111
12111
|
const min = axisMin ||
|
|
12112
|
-
(minMax[0]
|
|
12112
|
+
(Math.abs(minMax[0] - minMax[1]) < 0.0000001
|
|
12113
12113
|
? minMax[0] - Math.abs(minMax[0] - 1) * 0.1
|
|
12114
12114
|
: minMax[0]);
|
|
12115
12115
|
const max = axisMax ||
|
|
12116
|
-
(minMax[0]
|
|
12116
|
+
(Math.abs(minMax[0] - minMax[1]) < 0.0000001
|
|
12117
12117
|
? minMax[1] + Math.abs(minMax[1] + 1) * 0.1
|
|
12118
12118
|
: minMax[1]);
|
|
12119
12119
|
return [min, max];
|
|
@@ -12274,11 +12274,11 @@ class Axes3dComponent {
|
|
|
12274
12274
|
this._alive = false;
|
|
12275
12275
|
}
|
|
12276
12276
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12277
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf
|
|
12277
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 });
|
|
12278
12278
|
}
|
|
12279
12279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, decorators: [{
|
|
12280
12280
|
type: Component,
|
|
12281
|
-
args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf
|
|
12281
|
+
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" }]
|
|
12282
12282
|
}], ctorParameters: function () { return []; }, propDecorators: { rotation: [{
|
|
12283
12283
|
type: Input
|
|
12284
12284
|
}] } });
|
|
@@ -12448,7 +12448,7 @@ class SceneComponent {
|
|
|
12448
12448
|
this.rotation = this.store.get('camera').rotation;
|
|
12449
12449
|
}
|
|
12450
12450
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12451
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SceneComponent, isStandalone: true, selector: "teta-scene", ngImport: i0, template: "<ng-container *ngIf
|
|
12451
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 });
|
|
12452
12452
|
}
|
|
12453
12453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SceneComponent, decorators: [{
|
|
12454
12454
|
type: Component,
|
|
@@ -12460,7 +12460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
12460
12460
|
Axes3dComponent,
|
|
12461
12461
|
Block3dComponent,
|
|
12462
12462
|
Series3dHost,
|
|
12463
|
-
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf
|
|
12463
|
+
], 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" }]
|
|
12464
12464
|
}], ctorParameters: function () { return []; } });
|
|
12465
12465
|
|
|
12466
12466
|
class CanvasComponent {
|
|
@@ -12552,7 +12552,13 @@ class ThreeChartComponent {
|
|
|
12552
12552
|
}
|
|
12553
12553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ThreeChartComponent, decorators: [{
|
|
12554
12554
|
type: Component,
|
|
12555
|
-
args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [
|
|
12555
|
+
args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [
|
|
12556
|
+
NgtCanvas,
|
|
12557
|
+
SceneComponent,
|
|
12558
|
+
CommonModule,
|
|
12559
|
+
CanvasComponent,
|
|
12560
|
+
Canvas3dHost,
|
|
12561
|
+
], 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"] }]
|
|
12556
12562
|
}], propDecorators: { data: [{
|
|
12557
12563
|
type: Input
|
|
12558
12564
|
}] } });
|
|
@@ -12589,7 +12595,7 @@ class Chart3dComponent {
|
|
|
12589
12595
|
}
|
|
12590
12596
|
ngOnInit() {
|
|
12591
12597
|
this._themeService.theme
|
|
12592
|
-
.pipe(takeWhile(
|
|
12598
|
+
.pipe(takeWhile(_ => this._alive), tap$1(_ => {
|
|
12593
12599
|
this.gridColor = _ ? '#5d6a73' : '#bdbdc6';
|
|
12594
12600
|
this.axesColor = _ ? '#8e8f9d' : '#7d8f9a';
|
|
12595
12601
|
this.init();
|
|
@@ -12618,7 +12624,7 @@ class Chart3dComponent {
|
|
|
12618
12624
|
if (!data.points?.length) {
|
|
12619
12625
|
return;
|
|
12620
12626
|
}
|
|
12621
|
-
const points = data.points.map(
|
|
12627
|
+
const points = data.points.map(_ => new THREE.Vector3(x(_.x), y(_.y), z(_.z)));
|
|
12622
12628
|
const color = d3.scaleOrdinal(d3.schemeTableau10);
|
|
12623
12629
|
const material = new THREE.LineBasicMaterial({
|
|
12624
12630
|
color: data?.color ?? color(idx.toString()),
|
|
@@ -12637,13 +12643,15 @@ class Chart3dComponent {
|
|
|
12637
12643
|
const geometryLines = new THREE.BufferGeometry().setFromPoints(pointsLines);
|
|
12638
12644
|
const line = new THREE.Line(geometryLines, material);
|
|
12639
12645
|
this._scene.add(line);
|
|
12640
|
-
circles.forEach(
|
|
12646
|
+
circles.forEach(r => {
|
|
12641
12647
|
const material = new THREE.LineDashedMaterial({
|
|
12642
12648
|
color: this.gridColor,
|
|
12643
12649
|
dashSize: 1,
|
|
12644
|
-
gapSize: 3
|
|
12650
|
+
gapSize: 3,
|
|
12645
12651
|
});
|
|
12646
|
-
const circleGeometry = new THREE.BufferGeometry().setFromPoints(new THREE.Path()
|
|
12652
|
+
const circleGeometry = new THREE.BufferGeometry().setFromPoints(new THREE.Path()
|
|
12653
|
+
.absarc(0, 0, x(r), 0, Math.PI * 2, false)
|
|
12654
|
+
.getSpacedPoints(100));
|
|
12647
12655
|
const circle = new THREE.LineSegments(circleGeometry, material);
|
|
12648
12656
|
circle.geometry.rotateX(-Math.PI / 2);
|
|
12649
12657
|
this._scene.add(circle);
|
|
@@ -12695,7 +12703,7 @@ class Chart3dComponent {
|
|
|
12695
12703
|
animate();
|
|
12696
12704
|
}
|
|
12697
12705
|
addResizeObserver() {
|
|
12698
|
-
this._obs = new ResizeObserver(
|
|
12706
|
+
this._obs = new ResizeObserver(_ => {
|
|
12699
12707
|
this.setSize(_[0]?.contentRect.width, _[0]?.contentRect.height);
|
|
12700
12708
|
});
|
|
12701
12709
|
this._obs.observe(this._elementRef.nativeElement);
|
|
@@ -12761,7 +12769,7 @@ class Chart3dComponent {
|
|
|
12761
12769
|
this._scene.add(ticks);
|
|
12762
12770
|
}
|
|
12763
12771
|
getScales(series) {
|
|
12764
|
-
const extrems = series.map(
|
|
12772
|
+
const extrems = series.map(_ => ({
|
|
12765
12773
|
x: d3.extent(_.points, (p) => p.x),
|
|
12766
12774
|
y: d3.extent(_.points, (p) => p.y),
|
|
12767
12775
|
z: d3.extent(_.points, (p) => p.z),
|
|
@@ -12774,22 +12782,28 @@ class Chart3dComponent {
|
|
|
12774
12782
|
}, { x: [], y: [], z: [] });
|
|
12775
12783
|
const x = d3
|
|
12776
12784
|
.scaleLinear()
|
|
12777
|
-
.domain([
|
|
12785
|
+
.domain([
|
|
12786
|
+
0,
|
|
12787
|
+
this._config?.axes?.max == null
|
|
12778
12788
|
? parseInt(d3.max(flattenExtrems.x))
|
|
12779
12789
|
: this._config.axes.max,
|
|
12780
12790
|
])
|
|
12781
|
-
.range([0, this.SIDE_SIZE])
|
|
12791
|
+
.range([0, this.SIDE_SIZE])
|
|
12792
|
+
.nice();
|
|
12782
12793
|
const y = d3
|
|
12783
12794
|
.scaleLinear()
|
|
12784
12795
|
.domain([0, parseInt(d3.max(flattenExtrems.y), 10)])
|
|
12785
12796
|
.range([this.SIDE_SIZE, 0]);
|
|
12786
12797
|
const z = d3
|
|
12787
12798
|
.scaleLinear()
|
|
12788
|
-
.domain([
|
|
12799
|
+
.domain([
|
|
12800
|
+
0,
|
|
12789
12801
|
this._config?.axes?.max == null
|
|
12790
12802
|
? parseInt(d3.max(flattenExtrems.z))
|
|
12791
|
-
: this._config.axes.max
|
|
12792
|
-
|
|
12803
|
+
: this._config.axes.max,
|
|
12804
|
+
])
|
|
12805
|
+
.range([0, this.SIDE_SIZE])
|
|
12806
|
+
.nice();
|
|
12793
12807
|
return { x, y, z };
|
|
12794
12808
|
}
|
|
12795
12809
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Chart3dComponent, deps: [{ token: i0.ElementRef }, { token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component });
|