charts fix

gui/src/3D/charting/barGraph.ts

@@ -3,7 +3,10 @@ import { Chart } from ".";
 import { AdvancedDynamicTexture, DisplayGrid } from "../../2D";
 import { FluentMaterial } from "../materials";
 
-/** Class used to render bar graphs */
+/** 
+ * Class used to render bar graphs 
+ * @see http://doc.babylonjs.com/how_to/chart3d#bargraph
+ */
 export class BarGraph extends Chart {
     private _margin = 1;
     private _barWidth = 2
@@ -74,7 +77,7 @@ export class BarGraph extends Chart {
         this.refresh();
     }
 
-    /** Gets or sets the with of each bar */
+    /** Gets or sets the width of each bar */
     public get barWidth(): number {
         return this._barWidth;
     }
@@ -148,10 +151,9 @@ export class BarGraph extends Chart {
         this._onElementEnterObserver = this.onElementEnterObservable.add(mesh => {
             activeBar = <Mesh>mesh;
 
-            this._hoverLabel = this.addLabel(activeBar.metadata.value.toString(), this._barWidth);
+            this._hoverLabel = this._addLabel(activeBar.metadata.value.toString(), this._barWidth);
 
             this._hoverLabel.position = activeBar.position.clone();
-            //this._hoverLabel.position.z -= this.barWidth / 2;
             this._hoverLabel.position.y = activeBar.scaling.y + 0.5;
             this._hoverLabel.scaling.x = this.barWidth;            
         });
@@ -160,7 +162,7 @@ export class BarGraph extends Chart {
             activeBar = null;
 
             if (this._hoverLabel) {
-                this.removeLabel(this._hoverLabel);
+                this._removeLabel(this._hoverLabel);
                 this._hoverLabel = null;
             }
         });
@@ -257,7 +259,7 @@ export class BarGraph extends Chart {
             this._barMeshes = [];
         }        
 
-        this.removeLabels();
+        this._removeLabels();
 
         if (this._backgroundMesh) {
             this._backgroundMesh.dispose(false, true);
@@ -289,7 +291,7 @@ export class BarGraph extends Chart {
 
             for (var tickIndex = 0; tickIndex <= this._backgroundTickCount; tickIndex++) {
                 var label = (max / this._backgroundTickCount) * tickIndex + "";
-                var ticklabel = this.addLabel(label, this._barWidth, false);
+                var ticklabel = this._addLabel(label, this._barWidth, false);
                 ticklabel.position.x = left - this._barWidth;
                 ticklabel.position.y = (this.maxBarHeight * (tickIndex - 0.25)) / this._backgroundTickCount;
                 ticklabel.position.z = this._barWidth;
@@ -320,7 +322,7 @@ export class BarGraph extends Chart {
 
             barMesh.material = this._defaultMaterial;
 
-            this.onElementCreated.notifyObservers(barMesh);
+            this.onElementCreatedObservable.notifyObservers(barMesh);
 
             left += this.barWidth + this.margin;
 
@@ -329,7 +331,7 @@ export class BarGraph extends Chart {
                 return;
             }
 
-            let label = this.addLabel(entry[this._labelDimension], this.barWidth);
+            let label = this._addLabel(entry[this._labelDimension], this.barWidth);
             label.position = barMesh.position.clone();
             label.position.z -= this.barWidth;
         });

gui/src/3D/charting/chart.ts

@@ -2,7 +2,10 @@ import { Nullable, TransformNode, Scene, Vector3, Engine, Observer, PointerInfo,
 import { DataSeries } from ".";
 import { AdvancedDynamicTexture, TextBlock, Rectangle, TextWrapping } from "../../2D";
 
-/** base class for all chart controls*/
+/** 
+ * Base class for all chart controls
+ * @see http://doc.babylonjs.com/how_to/chart3d#charts
+ */
 export abstract class Chart {
     protected _dataSource: Nullable<DataSeries>;
     protected _rootNode: TransformNode;
@@ -14,10 +17,7 @@ export abstract class Chart {
     protected _blockRefresh = false;
 
     /** Observable raised when a new element is created */
-    public onElementCreated = new Observable<Mesh>();
-
-    /** User defined callback used to create labels */
-    public labelCreationFunction: (label: string, width: number, includeBackground: boolean) => Mesh;
+    public onElementCreatedObservable  = new Observable<Mesh>();
 
     /**
      * Observable raised when the point picked by the pointer events changed
@@ -34,6 +34,9 @@ export abstract class Chart {
      */
     public onElementOutObservable = new Observable<AbstractMesh>();
 
+    /** User defined callback used to create labels */
+    public labelCreationFunction: Nullable<(label: string, width: number, includeBackground: boolean) => Mesh>;
+
     /** Gets or sets the rotation of the entire chart */
     public set rotation(value: Vector3) {
         this._rootNode.rotation = value;
@@ -76,7 +79,7 @@ export abstract class Chart {
         this.refresh();
     }
 
-    /** Gets the filters applied to data source */
+    /** Gets or sets the filters applied to data source */
     public get dataFilters(): {[key: string]: string} {
         return this._dataFilters;
     }
@@ -162,7 +165,7 @@ export abstract class Chart {
      * @param includeBackground defines if a background rectangle must be added (default is true)
      * @returns a mesh used to host the label
      */
-    public addLabel(label: string, width: number, includeBackground = true): Mesh {
+    protected _addLabel(label: string, width: number, includeBackground = true): Mesh {
         if (this.labelCreationFunction) {
             let labelMesh = this.labelCreationFunction(label, width, includeBackground);
             labelMesh.parent = this._rootNode;
@@ -206,7 +209,7 @@ export abstract class Chart {
      * Remove specific label mesh
      * @param label defines the label mesh to remove
      */
-    public removeLabel(label: Mesh): void {
+    protected _removeLabel(label: Mesh): void {
         let index = this._labelMeshes.indexOf(label);
 
         if (index === -1) {
@@ -218,7 +221,7 @@ export abstract class Chart {
     }
 
     /** Remove all created labels */
-    public removeLabels(): void {
+    protected _removeLabels(): void {
         this._labelMeshes.forEach(label => {
             label.dispose(false, true);
         });
@@ -234,6 +237,13 @@ export abstract class Chart {
 
     /** Release all associated resources */
     public dispose() {
+        this.onElementCreatedObservable.clear();
+        this.onPickedPointChangedObservable.clear();
+        this.onElementEnterObservable.clear();
+        this.onElementOutObservable.clear();
+
+        this.labelCreationFunction = null;
+
         if (this._pointerObserver) {
             this._scene.onPointerObservable.remove(this._pointerObserver);
             this._pointerObserver = null;

gui/src/3D/charting/dataSeries.ts

@@ -1,6 +1,9 @@
 import { Color3 } from "babylonjs";
 
-/** Class used to store data to display */
+/** 
+ * Class used to store data to display 
+ * @see http://doc.babylonjs.com/how_to/chart3d
+ */
 export class DataSeries {
     /** Gets or sets the label of the series */
     public label: string;