drawPlot:function()

in ambari-web/app/views/common/chart.js [137:243]
89 lines of code
8 McCabe index (conditional complexity)

  drawPlot:function () {
    this.clearPlot();

    var renderer = this;
    this.x.domain([renderer.getMinDate({}), renderer.getMaxDate({})]);

    var rule = $('<div></div>').addClass("rule").css('height', renderer.get('ruleHeight')).mouseenter(function () { $(this).hide(); });
    $(this.get('chartContainerSelector')).prepend(rule);

    var vis = d3.select(this.get('chartContainerSelector'))
      .append("svg:svg")
      .attr("width", renderer.get('w') + 5)
      .attr("height", renderer.get('h'))
      .attr("rendererId", this.get('elementId'))
      .on("mousemove", function () {

        var area = d3.select(this).select("path.line");
        var d = area.data()[0];
        var x = d3.mouse(this)[0];

        var renderer = Em.View.views[d3.select(this).attr('rendererId')];
        var container = $(this).parent();
        var scale = renderer.x;

        // first move rule
        var rule = $(container).children("div.rule");
        rule.css("left", (168 + x) + "px"); // 168 - left container margin
        rule.show();

        x = x + 5; // some correction
        var selectedDate = scale.invert(x);

        // search date between this coordinates
        var prevVal = false;
        var nextVal = d[0];

        $.each(d, function (i, point) {
          if (renderer.getDate(point).getTime() <= selectedDate.getTime()) {
            prevVal = nextVal;
            nextVal = point;
          } else {
            return;
          }
        });

        var len1 = Math.abs(x - scale(renderer.getDate(prevVal)));
        var len2 = Math.abs(x - scale(renderer.getDate(nextVal)));

        var clearing = 5;
        var pointToShow = false;
        // if the first point if closer
        if ((len1 < len2) && (len1 <= clearing)) {
          pointToShow = prevVal;
        } else if (len2 <= clearing) { // the second point is closer
          pointToShow = nextVal;
        }

        $.each(renderer.get('nodeAttributes'), function (i, v) {
          var value = !pointToShow ? "" : pointToShow[v] + "%";
          $(rule).children("div." + v).html(value);
        });
      });

    vis.append("svg:g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + this.get('p') + ")")
      .call(renderer.axis)

    $.each(this.get('nodeAttributes'), function (i, v) {
      var element = $('<div></div>').addClass(v).addClass("stateValue").html("");
      rule.append(element);
    });

    var shift = this.getDefaultShift();
    vis.append("svg:path")
      .attr("class", "horizontal-line")
      .data([
      {}
    ])
      .attr("transform", "translate(0," + (shift - this.get('areaHeight')) + ")")
      .attr("d", renderer.line())
      .style("stroke", "#000");

    $.each(this.get('nodeAttributes'), function (i, v) {
      vis.append("svg:path").data([
        {}
      ])
        .attr("class", "line")
        .attr("getter", v)
        .attr("transform", "translate(0, " + shift + ")")
        .attr("d", renderer.area())
        .style("fill", function () {
          return "#31a354";
        });

      vis.append("svg:path")
        .attr("class", "horizontal-line")
        .data([
        {}
      ])
        .attr("transform", "translate(0," + shift + ")")
        .attr("d", renderer.line())
        .style("stroke", "#000");

      shift += renderer.get('areaHeight');
    });
  },