"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; });