@csn_chile/wsjs_charts/src/twocircles/twocircles.js

Scripts de javascript para usar websockets

let d3=require('d3');
import { CircleChart } from './circleChart';

const TwoCirclesChart = function TwoCirclesChart(parent_selector, options){
    let w=options.width?options.width:60;
    let h=options.height?options.height:50;
    let a=options.viewport.w?options.viewport.w:9;
    let b=options.viewport.h?options.viewport.h:5;
    let w_times=w/a;
    let h_times=h/b;
    console.log("W times", w_times);
    console.log("H times", h_times);

    // function to relate value with some colors
    let color=d3.scaleLinear().domain(
        [1,2,5,10,15,20]
    ).range(["greenyellow","green","cyan","blue","yellow","red"]);
    //r0 is rmax
    let r0=20;
    let r1=14;
    let separation=options.separation;
    let margin=options.margin;
    let Cx=w/2;
    let Cy=h/2;
    let ry=r0*Math.sqrt(2);
    let rx=2*r0+(separation/2);
    let c=Math.sqrt(Math.abs(rx^2-ry^2));
    let code=options.code;

    let opts = {
        'circles':{
            'pdop':{
            'radius':r0,
                'fill':color(r0),
                'cx': Cx-w_times*(c)-separation,
                'cy': Cy,
                font_size:"10px",
            'class_name':'pdop',
            legend:'PDOP'},
            'tdop':{
                'radius':r0,
                'fill':color(r0),
                'cx': Cx+w_times*c+separation,
                'cy': Cy,
                font_size:"10px",
                'class_name':'tdop',
                legend:'TDOP'},},
        ellipse:{
            active:true,
            ry:ry,
            rx:rx,
            cx:Cx,
            cy:Cy,
        },
        margin:5,
        inner_space:10,
    };

	/////////////////////////////////////////////////////////
	//////////// Create the container SVG and g /////////////
	/////////////////////////////////////////////////////////
	const parent = d3.select(parent_selector);

	//Remove whatever chart with the same id/class was present before
	  parent.select("svg").remove();


  let component=d3.select(parent_selector).append('svg')
      .attr('class','svg-class')
      .attr('width', w)
      .attr('height',h);

    component.append('g').attr('class','two_circlesViz')
        .attr('width',w)
        .attr('height',h);

	  //Put all of the options into a variable called cfg
    component.refresh=function refreshOpts(options){
        if('undefined' !== typeof options){
            for(var i in options){
                if('undefined' !== typeof options[i]){ opts[i] = options[i]; }
            }//for i
        }//if
    };

    component.refresh(options);
    let circles_cmp={pdop:Object,tdop:Object};    

    component.init = function initTwoCircles(){
        console.log("INIT ELLIPSE GRADIENT", "---->", opts.ellipse.active)
        if (opts.ellipse.active){
            console.log("INIT ELLIPSE GRADIENT", "---->")
            let gradient=component.append("defs").append('linearGradient')
                .attr('id', 'ellipse-gradient-'+code);
            gradient.attr('x1',"10%")
                .attr('y1',"0%")
                .attr('x2','90%')
                .attr('y2','0%');
            component.begin_gradient=gradient.append('stop')
                .attr('id', 'init-gradient-'+code)
                .attr('offset',"0%")
                .attr("stop-color", color(r0));
            component.end_gradient=gradient.append('stop')
                .attr('id', 'end-gradient-'+code)
                .attr('offset',"90%")
                .attr('stop-color', color(r0));

            console.log("Gradinet", gradient)

            let ellipse=component.append('ellipse')
                .attr("ry",opts.ellipse.ry)
                .attr("rx",opts.ellipse.rx)
                .attr("cx",opts.ellipse.cx)
                .attr("cy",opts.ellipse.cy)
                .attr("fill","url('#ellipse-gradient-"+code+"')")
                .attr('class', "ellipse"-code);

        };
        // crear circulo 1
        let c_pdop=new CircleChart("#pdop",
                                   {'component':component,
                                    'class_name':'pdop'});
        let c_tdop=new CircleChart("#tdop",
                                   {'component':component,
                                    'class_name':'tdop'});
        c_pdop.init(opts.circles.pdop);
        c_tdop.init(opts.circles.tdop);
        circles_cmp={pdop:c_pdop,tdop:c_tdop};
    };

    component.circle = function getcircle(key){
        console.log("Get circle", circles_cmp, key, circles_cmp[key]);
        return circles_cmp[key];
    };

    component.update2 = function updateTwoCirclesChart(new_data){
        let data_pdop=[{radius:new_data.PDOP,
                        fill:color(new_data.PDOP),
                        cx:opts.circles.pdop.cx,
                        cy:opts.circles.pdop.cy}];
        let data_tdop=[{radius:new_data.TDOP,
                        fill:color(new_data.TDOP),
                        cx:opts.circles.tdop.cx,
                        cy:opts.circles.tdop.cy}];
        console.log("DATA PDOP", data_pdop);
        console.log("DATA TDOP", data_tdop);
        console.log("Commponent gradient manager", component.begin_gradient, component.end_gradient);
        circles_cmp.pdop.update(data_pdop);
        circles_cmp.tdop.update(data_tdop);
        component.begin_gradient
            .transition().duration(1000).attr("stop-color", color(new_data.PDOP));
        console.log("Opts ELLIPS", opts.ellipse.active);
        if (opts.ellipse.active){
            console.log("Moving color first point", color(new_data.PDOP));
            console.log("Moving color end point", color(new_data.TDOP));
             component.end_gradient
                 .transition()
                 .duration(1000)
                 .attr("stop-color", color(new_data.TDOP));}
    };

    component.newcolor = function newcolor(value){
        return color(value);};

    return component;


};

export {TwoCirclesChart};