Skip to content
Snippets Groups Projects
graph2D.component.ts 13.4 KiB
Newer Older
import { Component } from '@angular/core';
import { GHCIService } from '../../../shared/services/ghci.service';
import functionPlot from 'function-plot';

@Component({
    moduleId: module.id,
    selector: 'graph2D-component',
    templateUrl: './graph2D.component.html',
export class Graph2DComponent {

    private instance: {};

    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));
                    var conjs = this.obtenerConjunto(jsonCanvas.funs[0]);
                    var d = conjs + "}";

                    var obj = JSON.parse(d);
                    //Para las funciones 
                    if (obj.conj.sets.fdom == "function(x)") {
                        var nom = jsonCanvas.funs[0].dom;
                        var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets, nom);
                        obj.conj.sets.fdom = function (x) { return eval(elemento) }
                    if (obj.conj.sets.fcod == "function(x)") {
                        var nom = jsonCanvas.funs[0].cod;
                        var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets, nom);
                        obj.conj.sets.fcod = function (x) { return (eval(elemento)) }
                    if (obj.conj.dom == 'Numer') {
                        var cantElementos = obj.conj.sets.fdom.length;
                        var j = 0;
                        for (var fun of obj.conj.sets.fdom) {
                            //var newstr = nuevo2.replace(fun, j); 
                            j = j + 1;
                        }

                    }
                    if (obj.conj.cod == 'Numer') {
                        var cantElementos = obj.conj.sets.fcod.length;
                        var j = 0;
                        for (var fun of obj.conj.sets.fcod) {
                            //var newstr = nuevo2.replace(fun, j); 
                            j = j + 1;
                        }

                    }

                    var colores = ['pink', 'red', 'blue', 'orange', 'green']
                    var num = this.getRandomArbitrary(0, 4);
                    var tipoGraf;
                    if (obj.conj.baseDom != 'R'){
                        tipoGraf = 'scatter';
                    }else{
                        tipoGraf = 'polyline';
                    }
                    this.instance = functionPlot({
						target: '#graph2D-container',
						width: 620,
						height: 450,
						conj:obj.conj,
						data: [{
							sampler: 'builtIn',
							fn: function(scope) {
							  return fun(scope.x)
							},
							graphType: tipoGraf,
							color: color
						}],
						plugins: [
							functionPlot.plugins.zoomBox()
						]
					})

                    // EXAMPLE - SHAPE
                    // this.instance = functionPlot({
                    //     target: '#graph2D-container',
                    //     width: 700,
                    //     height: 700,
                    //     xAxis: {
                    //       label: 'x - axis',
                    //       scale: 'linear',
                    //       domain: {
                    //         initial: [-10, 10],
                    //         type: 'discrete'
                    //       }
                    //     },
                    //     data: [{
                    //       shape: {
                    //         w : 6.0,
                    //         h : 3.0,
                    //         x : 0,
                    //         y : 0,
                    //         color :"red",
                    //         rotation : 0.125
                    //       },
                    //       graphType: 'shape',
                    //       shapeType: 'rect'
                    //     }],
                    //     plugins: [
                    //         functionPlot.plugins.zoomBox()
                    //     ]
                    // })
            },
            error => {

            })
    }

    public zoomMenos = function () {
        this.instance.zoomOut();
    public zoomMas = function () {
        this.instance.zoomIn();
    }
    getRandomArbitrary = function (min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }

    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 + '}';

        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 == 'sin') {
				exp.fun = 'Math.sin'
			} else if (exp.fun == 'round') {
				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 + ' ';
            expresion = ' undefined ';
    //Nuevo 20-07-2018
    obtenerConjunto = function (grf) {
        var dominio = '{\"conj\": {';
        if (grf.dom == 'R') {
            dominio += "\"radio\": 0.3, \"baseDom\": \"R\", \"dom\": \"R\"";
            setf += "\"fdom\": \"R\",";
        } else if (grf.dom == 'Z') {
            dominio += "\"radio\": 2, \"baseDom\": \"Z\", \"dom\": \"Z\"";
            setf += "\"fdom\": \"Z\",";
        } else if (grf.dom == 'N') {
            dominio += "\"radio\":2, \"baseDom\": \"N\", \"dom\": \"N\"";
            setf += "\"fdom\": \"N\",";
        } else {
            if (Array.isArray(grf.sets[0][nom])) {
                var arreglo = grf.sets[0][nom];
                var arreglo2 = [];
                for (var item of arreglo) {
                    arreglo2.push("\"" + item + "\"");
                }
                dominio += "\"radio\":2, \"baseDom\": \"N\", \"dom\": \"Numer\"";
                setf += "\"fdom\": [" + arreglo2 + "], ";
            } else {

                dominio += this.recursivoDom(grf.sets, nom);
                setf += "\"fdom\":\"function(x)\",";
        dominio += ", ";
        if (grf.cod == 'R') {
            dominio += "\"baseCod\": \"R\", \"cod\": \"R\" ,";
            setf += "\"fcod\": \"R\"";
        } else if (grf.cod == 'Z') {
            dominio += "\"baseCod\": \"Z\", \"cod\": \"Z\" ,";
            setf += "\"fcod\": \"Z\"";
        } else if (grf.cod == 'N') {
            dominio += "\"baseCod\": \"N\", \"cod\": \"N\" ,";
            setf += "\"fcod\": \"N\"";
        } else {
            if (Array.isArray(grf.sets[0][nom])) {
                var arreglo = grf.sets[0][nom];
                var arreglo2 = [];
                for (var item of arreglo) {
                    arreglo2.push("\"" + item + "\"");
                }
                dominio += "\"baseCod\": \"N\", \"cod\": \"Numer\" ,";
                setf += '\"fcod\":[' + arreglo2 + ']';
            } else {
                dominio += this.recursivoCod(grf.sets, nom);
                setf += "\"fcod\": \"function(x)\"";
    recursionfuncion = function (func, nombre) {
        var fun = func[0][nombre].set;
        var resul = "";
        if (fun == 'R' || fun == 'Z' || fun == 'N') {
            resul += this.generarF(func[0][nombre].cond);
        } else {
            resul += this.generarF(func[0][nombre].cond) + " && " + this.recursionfuncion(func, fun);

    recursivoDom = function (sets, nom) {
        if (sets[0][nom].set == 'R') {
            domin += "\"radio\": 0.3, \"baseDom\": \"R\", \"dom\": \"Func\"";
        } else if (sets[0][nom].set == 'Z') {
            domin += "\"radio\": 2, \"baseDom\": \"Z\", \"dom\": \"Func\"";
        } else if (sets[0][nom].set == 'N') {
            domin += "\"radio\": 2, \"baseDom\": \"N\", \"dom\": \"Func\"";
        } else {
            var nombre = sets[0][nom].set;
            domin = this.recursivoDom(sets, nombre);

    recursivoCod = function (sets, nom) {
        if (sets[0][nom].set == 'R') {
            coodo += "\"baseCod\": \"R\", \"cod\": \"Func\",";
        } else if (sets[0][nom].set == 'Z') {
            coodo += "\"baseCod\": \"Z\", \"cod\": \"Func\",";
        } else if (sets[0][nom].set == 'N') {
            coodo += "\"baseCod\": \"N\", \"cod\": \"Func\",";
        } else {
            var nombre = sets[0][nom].set;
            coodo += this.recursivoDom(sets, nombre);

    generarF = function (exp) {
        var expresion = '';
        if (exp.kind == 'cond') {
            expresion = ' (' + this.generarF(exp.cond) + '?' + this.generarF(exp.exp1) + ':' + this.generarF(exp.exp2) + ') ';
        } else if (exp.kind == 'bop') {
            if (exp.op == '==') {
                expresion = ' Math.abs((' + this.generarF(exp.exp1) + ') - (' + this.generarF(exp.exp2) + ')) == 0 ';
            } else if (exp.op == '/=') {
                expresion = ' Math.abs((' + this.generarF(exp.exp1) + ') - (' + this.generarF(exp.exp2) + ')) == 0 ||  Math.abs((' + this.generarF(exp.exp1) + ') - (' + this.generarF(exp.exp2) + ')) == 0  ';
            } else if (exp.op == '^') {
                expresion = ' Math.pow(' + this.generarF(exp.exp1) + ',' + this.generarF(exp.exp2) + ') ';
            } else {
                expresion = ' (' + this.generarF(exp.exp1) + ')' + exp.op + '(' + this.generarF(exp.exp2) + ') ';
            }
        } else if (exp.kind == 'uop') {
            expresion = ' ' + exp.op + ' ' + this.generarF(exp.exp) + ' ';
        } else if (exp.kind == 'app') {
            if (exp.fun == 'cos') {
                exp.fun = 'Math.cos'
                exp.fun = 'Math.sin'
            } else if (exp.fun == 'round') {
                exp.fun = 'Math.round'
            }
            expresion = ' ' + exp.fun + '(' + exp.args.map(e => this.generarF(e)).join() + ') ';
        } else if (exp.kind == 'tup') {
            expresion = ' (' + exp.exps.map(e => this.generarF(e)).join() + ') ';
        } else if (exp.kind == 'lit') {
            expresion = ' ' + exp.val + ' ';
        } else if (exp.kind == 'var') {
            expresion = ' ' + exp.var + ' ';
            expresion = ' undefined ';
    generarFun = function (graph) {
        var funcionString = '';
        var grafica;
        for (var fun of graph.funs) {
            funcionString = 'var ' + fun.fun + ' = function(' + fun.args.join() + '){\n return ' + this.generarF(fun.bdy) + '}\n' + funcionString;

            if (fun.fun == graph.graph) {
                funcionString += 'return ' + fun.fun + '(' + fun.args.join() + ');\n'
                grafica = fun;
            }
        }
        funcionString = '(' + grafica.args.join() + ')=>{\n' + funcionString + '}';