graph2D.component.ts 4.79 KB
Newer Older
1
import { Component } from '@angular/core';
Diego Rey's avatar
Diego Rey committed
2
import { GHCIService } from '../../../shared/services/ghci.service'; 
3
4
5
6
import  functionPlot from 'function-plot';
 
@Component({
    moduleId: module.id,
Diego Rey's avatar
Diego Rey committed
7
8
    selector: 'graph2D-component',
    templateUrl: './graph2D.component.html',
9
10
11
12
    host: {
        
    }
})
Diego Rey's avatar
Diego Rey committed
13
export class Graph2DComponent {
14
15
16
17
18
19
20
    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));

21

22
                    functionPlot({
Diego Rey's avatar
Diego Rey committed
23
                        target: '#graph2D-container',
24
25
26
27
28
29
30
31
32
33
34
35
36
                        width: 770,
                        height: 720,
                        tip: {
                          color: 'green'
                        },
                        xAxis: {
                          label: 'x - axis',
                          scale: 'linear',
                          domain: {
                            initial: [-4, 4],
                            type: 'discrete'
                          }
                        },
37
                        data: [{
38
39
40
41
42
                          graphType: 'scatter',
                          fn: function (scope) {
                            // scope.x = Number
                            return fun(scope.x)
                          }
43
44
                        }]
                      })
45
46

                    // functionPlot({
Diego Rey's avatar
Diego Rey committed
47
                    //     target: '#graph2D-container',
48
49
50
51
52
53
54
55
56
57
                    //     width: 620,
                    //     height: 450,
                    //     data: [{
                    //         sampler: 'builtIn',
                    //         fn: function(scope) {
                    //           return fun(scope.x)
                    //         },
                    //         graphType: 'polyline'
                    //     }]
                    //   })
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
                }
        },
        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;
    }
    
 
  
}