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

Scripts de javascript para usar websockets

let d3=require('d3');

const CircleChart = function CircleChart(parent_selector, options){
    let opts = {
        'radius':10,
        'fill':'red',
        'cx': 20,
        'cy': 20,
        'dx':20,
        'dy': 20+10+20,
        'class_name':'circle',
        'legend':'Círculo',
        'show_legend':true,
    };

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

	//Remove whatever chart with the same id/class was present before

    let component=options.component;
    let circle=Object;
  if (!component){
    component=d3.select(parent_selector).append('svg')
        .attr('class','svg-class')
        .attr('width',450)
          .attr('height',250);
      circle=component;
      console.log("Un nuevo svg", circle);

  }else{
      circle=component.append('g').attr('class',options.class_name);
      console.log("Un nuevo grupo", circle);
  };

    console.log("ENtonces circles es...", circle);


  circle.append('g').attr('class','circleViz')
      .attr('width',40)
      .attr('height',40);


  //Put all of the options into a variable called cfg
    circle.refresh=function refreshOpts(options){
        console.log("Init Refresh circle", circle);

      if('undefined' !== typeof options){
          for(var i in options){
              if('undefined' !== typeof options[i]){ opts[i] = options[i]; }
          }//for i
      }//if
  };

    circle.refresh(options);

    circle.init = function initCircle(data){
        this.refresh(data);
        this.selectAll('.circleViz').append('circle')
            .attr('cx', function (d) { return opts.cx; })
          .attr('cy', function (d) { return opts.cy; })
          .attr('r', function (d) { return opts.radius; })
            .attr('fill', function (d) { return opts.fill; })
            .attr('class',opts.class_name);
        //legend
        this.selectAll('.circleViz').append("text")
            .attr('dx', function(d){return opts.cx})
            .attr('dy', function(d){return opts.cy+opts.radius+20})
            .attr('class',"text-"+opts.class_name)
            .attr('text-anchor',"middle")
            .style('font-size',opts.font_size)
            .text(function(d){return opts.show_legend?opts.legend:""});
    };

    circle.update = function updateCircles(new_data) {
        this.selectAll('.'+opts.class_name).data(new_data)
            .transition()
            .duration(1000)
            .attr('cx', function (d) {return d.cx })
            .attr('cy', function (d) {return d.cy })
            .attr('r', function (d) { return d.radius })
            .attr('fill', function (d) {return d.fill })
            .transition()
            .duration(1000);

        this.selectAll('.text-'+opts.class_name).data(new_data)
            .transition()
            .duration(1000)
            .attr('dx', function (d) {return d.cx })
            .attr('dy', function (d) {return d.cy+d.radius+20 })
            .attr('text-anchor',"middle")
            .transition()
            .duration(1000);
    };


    circle.opts = function opts(){
        return opts;
    }

    return circle;


};

export { CircleChart};