graph2D.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { GHCIService } from '../../../shared/services/ghci.service';
import * as functionPlot from 'function-plot';
import { Animation, Setting, toJSON, triggerDownload } from './graph2D.helper';
import { TranslateService } from '@ngx-translate/core';

@Component({
    moduleId: module.id,
    selector: 'graph2D-component',
    templateUrl: './graph2D.component.html',
    styleUrls: ['./graph2D.component.scss'],
    host: {
        '(window:resize)': 'onResize($event)'
    }
})
export class Graph2DComponent {

    // Ghci Service
    private ghciServiceSub: any;

    // Chart Container - DOM Element
    @ViewChild('graph2DContainer')
    private graph2DRef: ElementRef;

    // Chart Instance
    private instance: any;

    // Settings
    settings: Setting = {
        axis: true,
        grid: true,
        tip: true
    }

    private funciones= [];

    private id = 0;

    private valores = [];

    private conjunto= [];

    // Animation state
    animation: Animation = {
        data: [],
        init: false,
        currentFrame: 0,
        fps: 10,
        playing: false,
        timeout: null,
        animationFrame: null,
        speedX: 10,
        boton: true,
        zoo: 2000
    };
    //Nuevo

    public easeInOutCubic = function(fps) {
        var t = fps < 6 ? 6 : fps;
        var k = t/60;
        var animation = k<.5 ? 60*(4*k*k*k) : 60*((k-1)*(2*k-2)*(2*k-2)+1);
        console.log(animation);
        return animation;
    }

    public setZoom = () => {
        this.animation.zoo = this.animation.zoo ;  
    }
    public multiGraf = () => { 
        this.animation.boton = !this.animation.boton;
    }
    public constructor(private ghciService: GHCIService, public translate: TranslateService) {
        this.ghciServiceSub = ghciService.messages.subscribe(
            canvas => {
                // Stop Animation
                if (this.animation.init) {
                    this.stopAnimation();
                }
                switch(canvas.tipo) { 
                    case 'graph': {
                        console.log(canvas.resultado)
                        // var jsonCanvas = JSON.parse(JSONRepair(canvas.resultado));

                       var jsonCanvas = JSON.parse(canvas.resultado);
                        var conjs = this.obtenerConjunto(jsonCanvas.funs[0]);
    
                        var d = conjs + "}"; //Leo
                        var obj = JSON.parse(d);

                        //Para las funciones 
                        if (obj.conj.sets.fdom == "function(x)") {
                            var nom = jsonCanvas.funs[0].dom;
                            var elemento1 = this.recursionfuncion(jsonCanvas.funs[0].sets, nom);
                            

                            var funcionString = '';
                            funcionString ="var "+nom+" = function(x){\nreturn "+elemento1+"}\n"

                            funcionString += 'return ' + nom + '(x);\n'
                            
                            for (var funs of jsonCanvas.funs) {
                                funcionString = 'var ' + funs.fun + ' = function('+funs.args+'){\n return ' + this.generarExpresion(funs.bdy) + '}\n' + funcionString;
                            }
                            funcionString = '(x)=>{\n' + funcionString + '}';
                            obj.conj.sets.fdom = eval(funcionString);








                        }
                        if (obj.conj.sets.fcod == "function(x)") {
                           
                            var nom = jsonCanvas.funs[0].cod;
                            var elemento2 = this.recursionfuncionCod(jsonCanvas.funs[0].sets, nom);
                            console.log(elemento2)

                            obj.conj.sets.fcod = function (x) { return (eval(elemento2)) }

                            var funcionString = '';
                            funcionString ="var "+nom+" = function(x){\nreturn "+elemento2+"}\n"

                            funcionString += 'return ' + nom + '(x);\n'
                            
                            for (var funs of jsonCanvas.funs) {
                                funcionString = 'var ' + funs.fun + ' = function('+funs.args+'){\n return ' + this.generarExpresion(funs.bdy) + '}\n' + funcionString;
                            }
                            funcionString = '(x)=>{\n' + funcionString + '}';

                            obj.conj.sets.fdom = eval(funcionString);

                            


                        }

                        var funcionGenerada = this.generarFuncion(jsonCanvas);
                        
 


                        //para Enumerados
                        if (obj.conj.dom == 'Numer') {
                            var j = 0;
                            for (var f of obj.conj.sets.fdom) {
                                var expresionDom = new RegExp('( '+f+' )', 'g'); 
                                funcionGenerada = funcionGenerada.replace(expresionDom, j.toString()); 
                                j += 1;
                            }
                        }
                        if (obj.conj.cod == 'Numer') {
                            var j2 = 0;
                            for (var f2 of obj.conj.sets.fcod) {
                                var expresionCod = new RegExp(f2, 'g'); 
                                funcionGenerada = funcionGenerada.replace(expresionCod, j2.toString()); 
                                j2 += 1;
                            }

                        }

                        if (obj.conj.baseDom == 'R'){
                            obj.conj.baseCod = 'R';
                            if (obj.conj.cod != 'Func'){
                                obj.conj.cod = 'R';
                                obj.conj.fcod = 'R'; 
                            }
             

                        }

                        
                        let fun = eval(funcionGenerada);
                   

                        var colores = ['violet', 'red', 'blue', 'orange', 'green','black']
                        var num = this.getRandomArbitrary(0, 5);
                        var color = colores[num];
    
                        var tipoGraf;
                        if (obj.conj.baseDom != 'R'){
                            tipoGraf = 'scatter';
                        }else{
                            tipoGraf = 'polyline';
                        }
                        if(this.animation.boton && obj.conj.cod != 'Numer' && obj.conj.dom != 'Numer'){
                            if(this.conjunto.length == 1 && (this.conjunto[0].cod == 'Numer' || this.conjunto[0].dom == 'Numer')){
                                this.conjunto = [];
                                this.conjunto.push(obj.conj);
                                this.id = 0;
                                this.funciones = [];
                                if(obj.conj.baseDom == 'R'){
                                    this.valores = [];
                                    var funcionGenerada2 = this.generarFuncionDisc(jsonCanvas);
                                    
                                    var funcionesVer2019 =  this.createListFunction(jsonCanvas);
                                    var listValores = [];
                                    for (var k of this.valores){