Added zoom and multigraf controls on settings popover

Frontend Angular 4/package-lock.json

@@ -4139,8 +4139,8 @@
       "dev": true
     },
     "function-plot": {
-      "version": "git://github.com/diego-rey/function-plot.git#925138ee94815e91f48c82b1dca9d55901aeb20e",
-      "from": "git://github.com/diego-rey/function-plot.git#feature/mutigraf",
+      "version": "git://github.com/diego-rey/function-plot.git#81713c85f1fb90ff0f41a3dade1bcd831e80b6fa",
+      "from": "git://github.com/diego-rey/function-plot.git#feature/integration-multigraf-shape",
       "requires": {
         "array-range": "^1.0.1",
         "built-in-math-eval": "^0.3.0",

Frontend Angular 4/package.json

@@ -24,7 +24,7 @@
     "core-js": "^2.4.1",
     "d3": "^4.12.2",
     "font-awesome": "^4.7.0",
-    "function-plot": "git://github.com/diego-rey/function-plot.git#feature/mutigraf",
+    "function-plot": "git://github.com/diego-rey/function-plot.git#feature/integration-multigraf-shape",
     "graph3D": "git://github.com/ifagian/graph3D#master",
     "ionicons": "^3.0.0",
     "jq-console": "^2.13.2",

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html

@@ -86,6 +86,31 @@
 						Tip
 					</label>
 				</div>
+				<hr>
+				<div class="setting-section">
+					<label>
+						<input
+							type="checkbox"
+							[checked]=animation.boton
+							(click)="multiGraf(value)">
+						Multi gráfica
+					</label>
+					<div style="display: flex;">
+						<span style="margin-right: 8px; align-self: center;">
+							Zoom
+						</span>
+						<input 
+							type="number" 
+							class="form-control form-control-sm" 
+							[(ngModel)]="animation.zoo"
+							[max]="1000000"
+							[min]="8"
+							(change)="setZoom()"
+							style="width: 70px;"
+						/>
+					</div>
+				</div>
+				<hr>
 				<div class="animation-controls setting-section"
 					[class.disabled]="animation.data.length === 0">
 					<label>Velocidad de animación:</label>
@@ -114,8 +139,7 @@
         </ng-template>
 		
 		<!-- Animation -->
-		<!-- <div class="animation" *ngIf="animation.data.length>0"> -->
-		<div class="animation">
+		<div class="animation" *ngIf="animation.data.length>0">
 			<button class="btn btn-sm btn-secondary btn-play"
 					data-placement="bottom"
 					*ngIf="!animation.playing"

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts

@@ -162,6 +162,7 @@ export class Graph2DComponent {
                             });
                         }
                         let bounding = this.getBounding();
+                        console.log(bounding);
                         this.instance = functionPlot({
                             target: '#graph2D-container',
                             width: bounding.width,
@@ -265,12 +266,11 @@ export class Graph2DComponent {
     onResize(event){
         let instance = this.instance;
         let bounding = this.getBounding();
-        //if (bounding.width > 0) {
-            console.log('yes');
+        if (bounding.width > 0) {
             instance.options.width = bounding.width;
             instance.options.height = bounding.height;
             instance.build();
-        //}
+        }
     }
 
     onClickMe(event) {
@@ -368,7 +368,7 @@ export class Graph2DComponent {
      * @desc Show and Hide Grid
      */
     public toggleGrid = function () {
-        //this.instance.toggleGrid();
+        this.instance.toggleGrid();
     }
 
     /**
@@ -376,7 +376,7 @@ export class Graph2DComponent {
      * @desc Show and Hide Axis
      */
     public toggleAxis = function () {
-        //this.instance.toggleAxis();
+        this.instance.toggleAxis();
     }
 
     /**
@@ -384,7 +384,7 @@ export class Graph2DComponent {
      * @desc Show and Hide Tip
      */
     public toggleTip = function () {
-        //this.instance.toggleTip();
+        this.instance.toggleTip();
     }
 
     /**