analytics/webcontent/bi/js/schedule/utils/charts/BarChart.js

/**
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: SHARE
 *
 * Copyright IBM Corp. 2015, 2016
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define([
    "q",
    'jquery',
    'rave2',
    'bi/sharecommon/utils/translator',
    'bi/schedule/utils/charts/ChartControl'
], 

function(Q, $, rave, t, ChartControl) {
    'use strict';

    var BarChart = ChartControl.extend({

        init: function(options) {
            this.textOffset = 15;
            this.duration = 500;
            this.bars = null;

            // This must be called last as it calls the _draw function below
            BarChart.inherited('init', this, arguments);
        },

        _draw: function(data) {
        	
        	var chartDesc = t.translate("subscribe_graph_description", {enabled: data[0].value, disabled: data[1].value});

        	this.chart.attr("aria-label", chartDesc);
        	this.chart.attr("role", "presentation");

            var maxWidth = Math.max(15, rave.max(data, function(row){ return row.value;}) +2);

            var x = rave.scale.linear()
                .domain([0, maxWidth])
                .range([0, this.width]);

            var y = rave.scale.ordinal()
                .domain([
                    t.translate("subscribe_enabled_axis_title"),
                    t.translate("subscribe_disabled_axis_title"), ""
                ])
                .rangePoints([0, this.height]);

            var xAxis = rave.svg.axis().scale(x).orient('bottom');
            var yAxis = rave.svg.axis().scale(y).tickSize(0).orient('left');

            this.bar = this.chart.selectAll("g")
                .data(data).enter().append("g")
                .attr("class", function(row) { return 'bar_'+row.name; })
                .style("fill", function(row) {
                    return this._colours(row.name)
                }.bind(this))
                .attr("transform", function(d, i) {
                    return "translate(" + this.margin.left + ", " + (i * this.barHeight + this.margin.top) + ")";
                }.bind(this));

            var rs = this.bar.append("rect")
                .attr("width", function(row) { return x(row.value); })
                .attr("height", this.barHeight - this.barSeparation)
                .on("mouseover", function() {
                    var rect = rave.select(this);
                    var colour = rect.style("fill") || "#ddd";
                    var rgb = rave.rgb(colour).darker();
                    rect.style("fill", rgb.toString());
                })
                .on("mouseout", function() {
                    rave.select(this).style("fill", null);
                });

            this.bar.append("text")
                .attr("x", this.textOffset)
                .attr("y", this.barHeight / 2 - 3)
                .attr("dy", ".35em")
                .attr("class", "innerbar")
                .text(function(row) { return row.value; })
                .attr("x", function(row) { return x(row.value) + this.textOffset; }.bind(this));

            // append x axes
            this.chart.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(" + this.margin.left + "," + (this.height + this.barSeparation + 5) + ")")
                .call(xAxis);

            // Add the y-axis.
            this.chart.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + this.margin.left + "," + (this.margin.top - 5) + ")")
                .call(yAxis)
                .selectAll("text")
                .attr("y", this.barHeight / 2 -3)
                .attr("x", -10);
        }

    });

    return BarChart;
});