@tetacom/ng-components 1.6.29 → 1.7.0

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

@@ -1,22 +1,38 @@
-import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { Chart3dOptions } from '../model/chart-3d-options';
 import { ThemeSwitchService } from '../../theme-switch/theme-switch.service';
+import { Chart3dTooltipService } from '../services/chart3d-tooltip.service';
 import * as i0 from "@angular/core";
 export declare class Chart3dComponent implements OnInit, AfterViewInit, OnDestroy {
     private _elementRef;
     private _themeService;
+    private _cdr;
+    private _tooltipService;
     canvasRef: ElementRef;
+    tooltipRef: ElementRef;
     private _scene;
     private _camera;
     private _renderer;
     private _controls;
     private _obs;
     private _config;
+    private _animationFrameId;
     private SIDE_SIZE;
     private gridColor;
     private axesColor;
     private _alive;
-    constructor(_elementRef: ElementRef, _themeService: ThemeSwitchService);
+    tooltipVisible: boolean;
+    tooltipX: number;
+    tooltipY: number;
+    tooltipWellName: string;
+    tooltipMD: string;
+    tooltipTVD: string;
+    tooltipUnit: string;
+    private _wellMeshes;
+    private _tooltipMarker;
+    private _mouseMoveHandler;
+    private _mouseLeaveHandler;
+    constructor(_elementRef: ElementRef, _themeService: ThemeSwitchService, _cdr: ChangeDetectorRef, _tooltipService: Chart3dTooltipService);
     set config(config: Chart3dOptions);
     get config(): Chart3dOptions;
     private get canvas();
@@ -33,6 +49,13 @@ export declare class Chart3dComponent implements OnInit, AfterViewInit, OnDestro
     private makeSprite;
     private drawTicks;
     private getScales;
+    private addMouseMoveListener;
+    private handleMouseMove;
+    private showTooltip;
+    private hideTooltip;
+    private removeMouseListeners;
+    private disposeThreeResources;
+    private updateTooltipMarker;
     static ɵfac: i0.ɵɵFactoryDeclaration<Chart3dComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<Chart3dComponent, "teta-chart3d", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -2,4 +2,5 @@ export interface Base3dPoint {
     x: number;
     y: number;
     z: number;
+    md?: number;
 }

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

@@ -5,6 +5,7 @@ export declare class Chart3dOptions {
         min?: number;
         max?: number;
     };
+    unit?: string;
     series: Series3d<Base3dPoint>[];
     constructor(options?: Chart3dOptions);
 }

package/component/chart-3d/model/chart3d-tooltip.d.ts

@@ -0,0 +1,22 @@
+import * as THREE from 'three';
+import { Series3d } from './series-3d';
+import { Base3dPoint } from './base-3d-point';
+export interface WellMeshData {
+    mesh: THREE.Mesh;
+    series: Series3d<Base3dPoint>;
+    scale: {
+        x: any;
+        y: any;
+        z: any;
+    };
+    curve: THREE.CatmullRomCurve3;
+    points: Base3dPoint[];
+}
+export interface IntersectionResult {
+    wellData: WellMeshData;
+    intersectionPoint: THREE.Vector3;
+    closestCurvePoint: THREE.Vector3;
+    closestDataPoint: Base3dPoint;
+    md: number;
+    tvd: number;
+}

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

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

package/component/chart-3d/services/chart3d-tooltip.service.d.ts

@@ -0,0 +1,14 @@
+import * as THREE from 'three';
+import { WellMeshData, IntersectionResult } from '../model/chart3d-tooltip';
+import * as i0 from "@angular/core";
+export declare class Chart3dTooltipService {
+    private _raycaster;
+    private _mouse;
+    constructor();
+    findIntersection(event: MouseEvent, canvas: HTMLCanvasElement, camera: THREE.Camera, wellMeshes: WellMeshData[]): IntersectionResult | null;
+    findClosestPointOnCurve(point: THREE.Vector3, curve: THREE.CatmullRomCurve3): THREE.Vector3;
+    private findClosestDataPoint;
+    private calculateTVD;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Chart3dTooltipService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<Chart3dTooltipService>;
+}

package/fesm2022/tetacom-ng-components.mjs

@@ -451,6 +451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class Chart3dOptions {
     constructor(options) {
         this.axes = { ...options?.axes };
+        this.unit = options?.unit;
         this.series = options?.series || [];
     }
 }
@@ -486,12 +487,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class Chart3dTooltipService {
+    constructor() {
+        this._raycaster = new THREE.Raycaster();
+        this._mouse = new THREE.Vector2();
+        this._raycaster.params.Line.threshold = 2;
+    }
+    findIntersection(event, canvas, camera, wellMeshes) {
+        // 1. Convert mouse coordinates
+        const rect = canvas.getBoundingClientRect();
+        this._mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this._mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+        // 2. Raycasting
+        this._raycaster.setFromCamera(this._mouse, camera);
+        const meshes = wellMeshes.map((_) => _.mesh);
+        const intersects = this._raycaster.intersectObjects(meshes, false);
+        if (intersects.length === 0) {
+            return null;
+        }
+        // 3. Find well data
+        const intersect = intersects[0];
+        const wellData = wellMeshes.find((_) => _.mesh === intersect.object);
+        if (!wellData) {
+            return null;
+        }
+        // 4. Calculate closest point on curve
+        const closestPoint = this.findClosestPointOnCurve(intersect.point, wellData.curve);
+        // 5. Find closest data point to get MD
+        const closestDataPoint = this.findClosestDataPoint(closestPoint, wellData.points, wellData.scale);
+        // 6. Calculate TVD and get MD from data point
+        const tvd = this.calculateTVD(closestPoint, wellData.scale.y);
+        const md = closestDataPoint.md ?? 0;
+        return {
+            wellData,
+            intersectionPoint: intersect.point,
+            closestCurvePoint: closestPoint,
+            closestDataPoint,
+            md,
+            tvd,
+        };
+    }
+    findClosestPointOnCurve(point, curve) {
+        let closestPoint = new THREE.Vector3();
+        let minDistance = Infinity;
+        const samples = 100;
+        for (let i = 0; i <= samples; i++) {
+            const t = i / samples;
+            const curvePoint = curve.getPoint(t);
+            const distance = point.distanceTo(curvePoint);
+            if (distance < minDistance) {
+                minDistance = distance;
+                closestPoint = curvePoint;
+            }
+        }
+        return closestPoint;
+    }
+    findClosestDataPoint(curvePoint, dataPoints, scale) {
+        let closestPoint = dataPoints[0];
+        let minDistance = Infinity;
+        let closestIndex = 0;
+        for (let i = 0; i < dataPoints.length; i++) {
+            const point = dataPoints[i];
+            // Convert data point to 3D space using scales
+            const scaledPoint = new THREE.Vector3(scale.x(point.x), scale.y(point.y), scale.z(point.z));
+            const distance = curvePoint.distanceTo(scaledPoint);
+            if (distance < minDistance) {
+                minDistance = distance;
+                closestPoint = point;
+                closestIndex = i;
+            }
+        }
+        // If MD is not available in the closest point, try to interpolate
+        if (closestPoint.md === undefined || closestPoint.md === null) {
+            // Find first point with MD
+            for (const point of dataPoints) {
+                if (point.md !== undefined && point.md !== null) {
+                    return point;
+                }
+            }
+        }
+        // Try to interpolate MD between two closest points
+        if (closestIndex > 0 && closestIndex < dataPoints.length - 1) {
+            const prevPoint = dataPoints[closestIndex - 1];
+            const nextPoint = dataPoints[closestIndex + 1];
+            if (prevPoint.md !== undefined &&
+                nextPoint.md !== undefined &&
+                closestPoint.md === undefined) {
+                // Linear interpolation
+                const prevScaled = new THREE.Vector3(scale.x(prevPoint.x), scale.y(prevPoint.y), scale.z(prevPoint.z));
+                const nextScaled = new THREE.Vector3(scale.x(nextPoint.x), scale.y(nextPoint.y), scale.z(nextPoint.z));
+                const totalDist = prevScaled.distanceTo(nextScaled);
+                const distFromPrev = curvePoint.distanceTo(prevScaled);
+                const t = distFromPrev / totalDist;
+                const interpolatedMD = prevPoint.md + (nextPoint.md - prevPoint.md) * t;
+                return {
+                    ...closestPoint,
+                    md: interpolatedMD,
+                };
+            }
+        }
+        return closestPoint;
+    }
+    calculateTVD(point, yScale) {
+        return yScale.invert(point.y);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Chart3dTooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Chart3dTooltipService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Chart3dTooltipService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class Chart3dComponent {
-    constructor(_elementRef, _themeService) {
+    constructor(_elementRef, _themeService, _cdr, _tooltipService) {
         this._elementRef = _elementRef;
         this._themeService = _themeService;
+        this._cdr = _cdr;
+        this._tooltipService = _tooltipService;
         this.SIDE_SIZE = 100;
         this._alive = true;
+        // Tooltip properties
+        this.tooltipVisible = true;
+        this.tooltipX = 0;
+        this.tooltipY = 0;
+        this.tooltipWellName = '';
+        this.tooltipMD = '';
+        this.tooltipTVD = '';
+        this.tooltipUnit = 'm';
+        // Raycasting
+        this._wellMeshes = [];
     }
     set config(config) {
         if (config) {
@@ -518,11 +643,14 @@ class Chart3dComponent {
         this.addResizeObserver();
         this.createScene();
         this.startRenderingLoop();
+        this.addMouseMoveListener();
         this.init();
     }
     ngOnDestroy() {
         this._alive = false;
         this.removeResizeObserver();
+        this.removeMouseListeners();
+        this.disposeThreeResources();
     }
     init() {
         if (!this._scene) {
@@ -531,6 +659,7 @@ class Chart3dComponent {
         while (this._scene.children.length > 0) {
             this._scene.remove(this._scene.children[0]);
         }
+        this._wellMeshes = [];
         const { x, y, z } = this.getScales(this._config.series);
         this.config.series.forEach((data, idx) => {
             if (!data.points?.length) {
@@ -538,12 +667,21 @@ class Chart3dComponent {
             }
             const points = data.points.map((_) => new THREE.Vector3(x(_.x), y(_.y), z(_.z)));
             const color = d3.scaleOrdinal(d3.schemeTableau10);
-            const material = new THREE.LineBasicMaterial({
+            const material = new THREE.MeshBasicMaterial({
                 color: data?.color ?? color(idx.toString()),
             });
-            const tubeGeometry = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(points), 1024, 0.5, 20, false);
-            let tube = new THREE.Line(tubeGeometry, material);
+            const curve = new THREE.CatmullRomCurve3(points);
+            const tubeGeometry = new THREE.TubeGeometry(curve, 1024, 0.5, 20, false);
+            let tube = new THREE.Mesh(tubeGeometry, material);
             this._scene.add(tube);
+            // Store well mesh with its data for raycasting
+            this._wellMeshes.push({
+                mesh: tube,
+                series: data,
+                scale: { x, y, z },
+                curve: curve,
+                points: data.points,
+            });
         });
         const circles = x.ticks(this.SIDE_SIZE / 10);
         const material = new THREE.LineBasicMaterial({ color: this.axesColor });
@@ -605,7 +743,7 @@ class Chart3dComponent {
             preserveDrawingBuffer: true,
         });
         const animate = () => {
-            requestAnimationFrame(animate);
+            this._animationFrameId = requestAnimationFrame(animate);
             this._controls?.update();
             this.render();
         };
@@ -705,15 +843,162 @@ class Chart3dComponent {
             .nice();
         return { x, y, z };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Chart3dComponent, deps: [{ token: i0.ElementRef }, { token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: Chart3dComponent, isStandalone: true, selector: "teta-chart3d", inputs: { config: "config" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    addMouseMoveListener() {
+        this._mouseMoveHandler = (event) => {
+            this.handleMouseMove(event);
+        };
+        this._mouseLeaveHandler = () => {
+            this.hideTooltip();
+            this._cdr.detectChanges();
+        };
+        this.canvas.addEventListener('mousemove', this._mouseMoveHandler);
+        this.canvas.addEventListener('mouseleave', this._mouseLeaveHandler);
+    }
+    handleMouseMove(event) {
+        const intersection = this._tooltipService.findIntersection(event, this.canvas, this._camera, this._wellMeshes);
+        if (intersection) {
+            this.showTooltip(intersection, event);
+            this.updateTooltipMarker(intersection.intersectionPoint, intersection.wellData.curve);
+            this.canvas.style.cursor = 'pointer';
+        }
+        else {
+            this.hideTooltip();
+            this.canvas.style.cursor = 'default';
+        }
+        this._cdr.detectChanges();
+    }
+    showTooltip(intersection, event) {
+        const rect = this.canvas.getBoundingClientRect();
+        this.tooltipVisible = true;
+        this.tooltipX = event.clientX - rect.left;
+        this.tooltipY = event.clientY - rect.top;
+        this.tooltipWellName = intersection.wellData.series.name || 'Well';
+        this.tooltipMD = intersection.md.toFixed(2);
+        this.tooltipTVD = intersection.tvd.toFixed(2);
+        this.tooltipUnit = this._config.unit || 'm';
+        if (this._tooltipMarker) {
+            this._tooltipMarker.visible = true;
+        }
+    }
+    hideTooltip() {
+        this.tooltipVisible = false;
+        if (this._tooltipMarker) {
+            this._tooltipMarker.visible = false;
+        }
+    }
+    removeMouseListeners() {
+        if (this.canvas && this._mouseMoveHandler) {
+            this.canvas.removeEventListener('mousemove', this._mouseMoveHandler);
+        }
+        if (this.canvas && this._mouseLeaveHandler) {
+            this.canvas.removeEventListener('mouseleave', this._mouseLeaveHandler);
+        }
+    }
+    disposeThreeResources() {
+        // Cancel animation frame
+        if (this._animationFrameId) {
+            cancelAnimationFrame(this._animationFrameId);
+        }
+        // Dispose tooltip marker
+        if (this._tooltipMarker) {
+            this._tooltipMarker.geometry.dispose();
+            this._tooltipMarker.material.dispose();
+        }
+        // Dispose all scene objects
+        if (this._scene) {
+            this._scene.traverse((object) => {
+                if (object instanceof THREE.Mesh) {
+                    object.geometry?.dispose();
+                    if (object.material) {
+                        if (Array.isArray(object.material)) {
+                            object.material.forEach((material) => material.dispose());
+                        }
+                        else {
+                            object.material.dispose();
+                        }
+                    }
+                }
+                if (object instanceof THREE.Line || object instanceof THREE.LineSegments) {
+                    object.geometry?.dispose();
+                    if (object.material) {
+                        object.material.dispose();
+                    }
+                }
+                if (object instanceof THREE.Sprite) {
+                    if (object.material) {
+                        const spriteMaterial = object.material;
+                        spriteMaterial.map?.dispose();
+                        spriteMaterial.dispose();
+                    }
+                }
+            });
+        }
+        // Dispose controls
+        if (this._controls) {
+            this._controls.dispose();
+        }
+        // Dispose renderer
+        if (this._renderer) {
+            this._renderer.dispose();
+        }
+        // Clear arrays
+        this._wellMeshes = [];
+    }
+    updateTooltipMarker(intersectionPoint, curve) {
+        // Remove old marker if exists
+        if (this._tooltipMarker) {
+            this._scene.remove(this._tooltipMarker);
+            this._tooltipMarker.geometry.dispose();
+            this._tooltipMarker.material.dispose();
+        }
+        // Find the closest point on the curve using service
+        const pointOnCurve = this._tooltipService.findClosestPointOnCurve(intersectionPoint, curve);
+        // Find parameter t for tangent calculation
+        let closestT = 0;
+        let minDistance = Infinity;
+        const samples = 100;
+        for (let i = 0; i <= samples; i++) {
+            const t = i / samples;
+            const curvePoint = curve.getPoint(t);
+            const distance = pointOnCurve.distanceTo(curvePoint);
+            if (distance < minDistance) {
+                minDistance = distance;
+                closestT = t;
+            }
+        }
+        // Get tangent at this point to orient the ring
+        const tangent = curve.getTangent(closestT).normalize();
+        const markerGeometry = new THREE.TorusGeometry(.85, 0.25, 16, 32);
+        const markerMaterial = new THREE.MeshBasicMaterial({
+            color: 0xff4444,
+            transparent: true,
+            opacity: 0.85,
+            depthTest: false,
+            side: THREE.DoubleSide,
+        });
+        this._tooltipMarker = new THREE.Mesh(markerGeometry, markerMaterial);
+        // Position the marker at the point on curve
+        this._tooltipMarker.position.copy(pointOnCurve);
+        // Orient the ring perpendicular to the tangent
+        const up = new THREE.Vector3(0, 0, 1);
+        const quaternion = new THREE.Quaternion().setFromUnitVectors(up, tangent);
+        this._tooltipMarker.setRotationFromQuaternion(quaternion);
+        this._tooltipMarker.renderOrder = 999;
+        this._tooltipMarker.visible = true;
+        this._scene.add(this._tooltipMarker);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Chart3dComponent, deps: [{ token: i0.ElementRef }, { token: ThemeSwitchService }, { token: i0.ChangeDetectorRef }, { token: Chart3dTooltipService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: Chart3dComponent, isStandalone: true, selector: "teta-chart3d", inputs: { config: "config" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "tooltipRef", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<canvas #canvas></canvas>\n<div #tooltip class=\"bg-global-bgcard tooltip color-text-90\" [style.display]=\"tooltipVisible ? 'block' : 'none'\" [style.left.px]=\"tooltipX\" [style.top.px]=\"tooltipY\">\n  <div class=\"tooltip-content\">\n    <div class=\"tooltip-header\">\n      <strong>{{ tooltipWellName }}</strong>\n    </div>\n    <div class=\"tooltip-row\">\n      <span class=\"label\">MD:</span>\n      <span class=\"value\">{{ tooltipMD }} {{ tooltipUnit }}</span>\n    </div>\n    <div class=\"tooltip-row\">\n      <span class=\"label\">TVD:</span>\n      <span class=\"value\">{{ tooltipTVD }} {{ tooltipUnit }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;width:100%;height:100%;position:relative}.tooltip{position:absolute;pointer-events:none;z-index:1000;min-width:80px;font-size:12px;white-space:nowrap;transform:translate(-50%,-100%);margin-top:-8px;background-color:var(--color-global-bgcard)}.tooltip .tooltip-content .tooltip-header{font-weight:600;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.2)}.tooltip .tooltip-content .tooltip-row{display:flex;justify-content:space-between;gap:12px;margin-bottom:2px}.tooltip .tooltip-content .tooltip-row .label{opacity:.8}.tooltip .tooltip-content .tooltip-row .value{font-weight:500}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Chart3dComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-chart3d', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ThemeSwitchService }], propDecorators: { canvasRef: [{
+            args: [{ selector: 'teta-chart3d', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<canvas #canvas></canvas>\n<div #tooltip class=\"bg-global-bgcard tooltip color-text-90\" [style.display]=\"tooltipVisible ? 'block' : 'none'\" [style.left.px]=\"tooltipX\" [style.top.px]=\"tooltipY\">\n  <div class=\"tooltip-content\">\n    <div class=\"tooltip-header\">\n      <strong>{{ tooltipWellName }}</strong>\n    </div>\n    <div class=\"tooltip-row\">\n      <span class=\"label\">MD:</span>\n      <span class=\"value\">{{ tooltipMD }} {{ tooltipUnit }}</span>\n    </div>\n    <div class=\"tooltip-row\">\n      <span class=\"label\">TVD:</span>\n      <span class=\"value\">{{ tooltipTVD }} {{ tooltipUnit }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;width:100%;height:100%;position:relative}.tooltip{position:absolute;pointer-events:none;z-index:1000;min-width:80px;font-size:12px;white-space:nowrap;transform:translate(-50%,-100%);margin-top:-8px;background-color:var(--color-global-bgcard)}.tooltip .tooltip-content .tooltip-header{font-weight:600;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.2)}.tooltip .tooltip-content .tooltip-row{display:flex;justify-content:space-between;gap:12px;margin-bottom:2px}.tooltip .tooltip-content .tooltip-row .label{opacity:.8}.tooltip .tooltip-content .tooltip-row .value{font-weight:500}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ThemeSwitchService }, { type: i0.ChangeDetectorRef }, { type: Chart3dTooltipService }], propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ['canvas']
+            }], tooltipRef: [{
+                type: ViewChild,
+                args: ['tooltip']
             }], config: [{
                 type: Input
             }] } });