Se agrega el componente Plotter que usa la libreria function plot

Frontend Angular 4/src/app/layout/matefun/matefun.component.html

@@ -79,6 +79,12 @@
                         <canvas-component (canvasComp)=canvasC></canvas-component>
                     </ng-template>
                 </ngb-tab>
+
+                <ngb-tab id="FigurasBtn2" title="Figuras New">
+                    <ng-template ngbTabContent>
+                        <plotter-component (plotterComp)=plotterC></plotter-component>
+                    </ng-template>
+                </ngb-tab>
             </ngb-tabset> 
 
         </div>

Frontend Angular 4/src/app/layout/matefun/matefun.component.ts

 import { Component, NgModule, ViewChild, HostListener, ElementRef, ComponentRef, TemplateRef } from '@angular/core';
 import { CanvasModule} from '../canvas/canvas.module';
 import { CanvasComponent } from '../canvas/canvas.component';
+import { PlotterModule } from '../plotter/plotter.module';
+import { PlotterComponent } from '../plotter/plotter.component';
 import { Http, JsonpModule } from '@angular/http';
 import { Headers, RequestOptions } from '@angular/http';
 import { HaskellService } from '../../shared/services/haskell.service';
@@ -350,6 +352,8 @@ export class MateFunComponent {
 
     @ViewChild(CanvasComponent) canvasC: CanvasComponent;
 
+    @ViewChild(PlotterComponent) plotterC: PlotterComponent;
+
     funcionSTR: string = 'Math.sin(x)*x*x-20';
     consola: string = '';
     command: string = '';

Frontend Angular 4/src/app/layout/matefun/matefun.module.ts

 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CanvasModule } from '../canvas/canvas.module'
+import { PlotterModule } from '../plotter/plotter.module'
 import { MateFunComponent } from './matefun.component';
 import { BootstrapModalModule } from 'ng2-bootstrap-modal';
 import { ConfirmComponent } from './confirm.component';
@@ -15,6 +16,7 @@ import { NotificacionModule } from '../../notificacion/notificacion.module';
     CommonModule, 
     FormsModule, 
     CanvasModule, 
+    PlotterModule,
     NotificacionModule,
     MateFunRoutingModule,
     CodemirrorModule,

Frontend Angular 4/src/app/layout/plotter/index.ts

+/**
+ * This barrel file provides the export for the lazy loaded BlankpageComponent.
+ */
+export * from './plotter.component';
+
+export * from './plotter.routes';

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

+<div class="card">
+    <div class="card-block contenedor-canvas" >  
+        <div id="plotter-container" style="height: 100%; width: 100%;">
+        </div>
+    </div>
+</div>
\ No newline at end of file

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

+import { Component } from '@angular/core';
+import { GHCIService } from '../../shared/services/ghci.service'; 
+import  functionPlot from 'function-plot';
+ 
+@Component({
+    moduleId: module.id,
+    selector: 'plotter-component',
+    templateUrl: './plotter.component.html',
+    host: {
+        
+    }
+})
+export class PlotterComponent {
+    public constructor(private ghciService: GHCIService) {
+        ghciService.messages.subscribe(
+            canvas=>{
+                if (canvas.tipo == 'graph'){
+                    var jsonCanvas = JSON.parse(canvas.resultado);
+                    let fun = eval(this.generarFuncion(jsonCanvas));
+
+                    functionPlot({
+                        target: '#plotter-container',
+                        width: 620,
+                        height: 450,
+                        data: [{
+                            sampler: 'builtIn',
+                            fn: function(scope) {
+                              return fun(scope.x)
+                            },
+                            graphType: 'polyline'
+                        }]
+                      })
+                }
+        },
+        error=>{
+            
+        })
+    }
+
+
+    
+    generarFuncion = function(graph) {
+            var funcionString = '';
+            var grafica;
+            for (var fun of graph.funs) {
+                funcionString = 'var ' + fun.fun + ' = function(' + fun.args.join() + '){\n return ' + this.generarExpresion(fun.bdy) + '}\n' + funcionString;
+
+                if (fun.fun == graph.graph) {
+                    funcionString += 'return ' + fun.fun + '(' + fun.args.join() + ');\n'
+                    grafica = fun;
+                }
+            }
+            funcionString = '(' + grafica.args.join() + ',delta,hayPunto)=>{\n' + funcionString + '}';
+            
+            console.log('funcion string', funcionString);
+            return funcionString;
+        }
+
+    generarExpresion = function(exp) {
+        var expresion = '';
+        if (exp.kind == 'cnd') {
+        expresion = ' (' + this.generarExpresion(exp.cond) + '?' + this.generarExpresion(exp.exp1) + ':' + this.generarExpresion(exp.exp2) + ') ';
+        } else if (exp.kind == 'bop') {
+        if (exp.op == '==') {
+            expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && hayPunto() ';
+        } else if (exp.op == '/=') {
+            expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) > delta ||  Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && !hayPunto()  ';
+        } else if (exp.op == '^') {
+            expresion = ' Math.pow(' + this.generarExpresion(exp.exp1) + ',' + this.generarExpresion(exp.exp2) + ') ';
+        } else {
+            expresion = ' (' + this.generarExpresion(exp.exp1) + ')' + exp.op + '(' + this.generarExpresion(exp.exp2) + ') ';
+        }
+        } else if (exp.kind == 'uop') {
+        expresion = ' ' + exp.op + ' ' + this.generarExpresion(exp.exp) + ' ';
+        } else if (exp.kind == 'app') {
+        if (exp.fun == 'cos') {
+            exp.fun = 'Math.cos'
+        } else if (exp.fun == 'sen') {
+            exp.fun = 'Math.sin'
+        } else if (exp.fun == 'red') {
+            exp.fun = 'Math.round'
+        }
+        expresion = ' ' + exp.fun + '(' + exp.args.map(e => this.generarExpresion(e)).join() + ') ';
+        } else if (exp.kind == 'tup') {
+        expresion = ' (' + exp.exps.map(e => this.generarExpresion(e)).join() + ') ';
+        } else if (exp.kind == 'lit') {
+        expresion = ' ' + exp.val + ' ';
+        } else if (exp.kind == 'var') {
+        expresion = ' ' + exp.var+' ';
+        } else {
+        expresion = ' undefined ';
+        }
+    
+        return expresion;
+    }
+    
+ 
+  
+}
+

Frontend Angular 4/src/app/layout/plotter/plotter.module.ts

+import { NgModule} from '@angular/core';
+import { CommonModule } from '@angular/common'
+import { RouterModule } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule } from '@angular/forms';
+import { PlotterComponent } from './plotter.component';
+
+@NgModule({
+    imports: [FormsModule, RouterModule, CommonModule, NgbModule],
+    declarations: [PlotterComponent],
+    exports: [PlotterComponent]
+})
+
+export class PlotterModule { }
\ No newline at end of file

Frontend Angular 4/src/app/layout/plotter/plotter.routes.ts

+import { Route } from '@angular/router';
+import { PlotterComponent } from './index';
+
+export const PlotterRoutes: Route[] = [
+	{
+		path: 'plotter',
+		component: PlotterComponent
+	}
+];