analytics/webcontent/bi/js/admin/common/visualizations/VizBar.js

"use strict";

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: Cognos Analytics
 * Copyright IBM Corp. 2015, 2017
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['underscore', 'jquery', 'rave2', 'bi/admin/nls/StringResource', 'bi/admin/common/visualizations/VizControl'], function (_, $, rave, StringResource, VizControl) {
  'use strict'; //NOSONAR: meant to be strict

  var VizBar = VizControl.extend({
    margin: {
      top: 10,
      right: 20,
      bottom: 10,
      left: 100
    },
    barHeight: 40,
    barGap: 10,
    textOffset: 10,
    init: function init(options) {
      VizBar.inherited('init', this, arguments);
    },
    tipHtml: function tipHtml(row) {
      var data = row.data;
      var html = data.name + '=' + data.value;
      return html;
    },
    _draw: function _draw(data) {
      //NOSONAR
      var height = this.barHeight * data.length;
      var maxValue = Math.max(15, rave.max(data, function (row) {
        return row.value;
      }) * 1.2);
      var isMirrored = document.dir === 'rtl';

      var types = _.map(data, function (row) {
        return StringResource.get(row.name);
      });

      types.push('');
      var y = rave.scale.ordinal().domain(types).rangePoints([0, height]);
      var yAxis = rave.svg.axis().scale(y).tickSize(0).orient('left');

      if (isMirrored) {
        this.svg.attr('transform', 'scale(-1, 1)');
      }

      this.svg.append('g').call(yAxis).selectAll('text').attr('class', 'ellipses');
      var maxLabelWidth = 0;
      var $ellipses = $(this.svg[0]).find('.ellipses');
      $ellipses.each(function () {
        maxLabelWidth = Math.max(maxLabelWidth, this.getBBox().width);
      });
      maxLabelWidth += 20;
      $(this.svg[0]).empty();
      var x = rave.scale.linear().domain([0, maxValue]).range([0, this.svgWidth - maxLabelWidth]);
      var xAxis = rave.svg.axis().scale(x).orient('bottom');
      var bar = this.svg.selectAll('g').data(data).enter().append('g').style('fill', function (row) {
        return this._colorScale(row.name);
      }.bind(this)).attr('transform', function (d, i) {
        return 'translate(' + maxLabelWidth + ', ' + (i * this.barHeight + this.margin.top) + ')';
      }.bind(this));
      var rects = bar.append('rect').attr('width', 0).attr('height', this.barHeight - this.barGap);
      rects.transition().duration(500).attr('width', function (row) {
        return x(row.value);
      });
      rects.on('mouseover', function () {
        var rect = rave.select(this);
        var color = rect.style('fill') || '#ddd';
        var rgb = rave.rgb(color).darker();
        rect.style('fill', rgb.toString());
      }).on('mouseout', function () {
        rave.select(this).style('fill', null);
      });
      bar.append('text').attr('x', this.textOffset).attr('y', this.barHeight / 2 - 3).attr('dy', '.35em').attr('class', 'bi-chart-innertext').text(function (row) {
        return row.value;
      }).transition().duration(500).attr('x', function (row) {
        return isMirrored ? -(x(row.value) + this.textOffset) : x(row.value) + this.textOffset;
      }.bind(this));
      this.svg.append('g').attr('class', 'bi-chart-axis x-axis').attr('transform', 'translate(' + maxLabelWidth + ',' + (height + 5) + ')').call(xAxis);
      this.svg.append('g').attr('class', 'bi-chart-axis y-axis').attr('transform', 'translate(' + maxLabelWidth + ',' + (this.margin.top - 5) + ')').call(yAxis).selectAll('text').attr('class', 'ellipses').attr('y', this.barHeight / 2).attr('x', isMirrored ? 10 : -10);

      if (isMirrored && this.svg) {
        var texts = this.svg.node().getElementsByTagName('text');

        for (var i = 0; i < texts.length; i++) {
          texts[i].setAttribute('transform', 'scale(-1,1)');
        }
      }
    }
  });
  return VizBar;
});