ui/src/main/webapp/reusable_chart.js

   1 d3.custom = {};
   2
   3 d3.custom.barChart = function module() {
   4     var margin = {
   5         top : 20,
   6         right : 20,
   7         bottom : 40,
   8         left : 40
   9     }, width = 500, height = 500, gap = 0, ease = 'cubic-in-out';
  10     var svg, duration = 500;
  11
  12     var dispatch = d3.dispatch('customHover');
  13     function exports(_selection) {
  14         _selection
  15                 .each(function(_data) {
  16
  17                     var chartW = width - margin.left - margin.right, chartH = height
  18                             - margin.top - margin.bottom;
  19
  20                     var x1 = d3.scale.ordinal().domain(
  21                             _data.map(function(d, i) {
  22                                 return i;
  23                             })).rangeRoundBands([ 0, chartW ], .1);
  24
  25                     var y1 = d3.scale.linear().domain(
  26                             [ 0, d3.max(_data, function(d, i) {
  27                                 return d;
  28                             }) ]).range([ chartH, 0 ]);
  29
  30                     var xAxis = d3.svg.axis().scale(x1).orient('bottom');
  31
  32                     var yAxis = d3.svg.axis().scale(y1).orient('left');
  33
  34                     var barW = chartW / _data.length;
  35
  36                     if (!svg) {
  37                         svg = d3.select(this).append('svg').classed('chart',
  38                                 true);
  39                         var container = svg.append('g').classed(
  40                                 'container-group', true);
  41                         container.append('g').classed('chart-group', true);
  42                         container.append('g')
  43                                 .classed('x-axis-group axis', true);
  44                         container.append('g')
  45                                 .classed('y-axis-group axis', true);
  46                     }
  47
  48                     svg.transition().duration(duration).attr({
  49                         width : width,
  50                         height : height
  51                     })
  52                     svg.select('.container-group').attr(
  53                             {
  54                                 transform : 'translate(' + margin.left + ','
  55                                         + margin.top + ')'
  56                             });
  57
  58                     svg.select('.x-axis-group.axis').transition().duration(
  59                             duration).ease(ease).attr({
  60                         transform : 'translate(0,' + (chartH) + ')'
  61                     }).call(xAxis);
  62
  63                     svg.select('.y-axis-group.axis').transition().duration(
  64                             duration).ease(ease).call(yAxis);
  65
  66                     var gapSize = x1.rangeBand() / 100 * gap;
  67                     var barW = x1.rangeBand() - gapSize;
  68                     var bars = svg.select('.chart-group').selectAll('.bar')
  69                             .data(_data);
  70                     bars.enter().append('rect').classed('bar', true).attr({
  71                         x : chartW,
  72                         width : barW,
  73                         y : function(d, i) {
  74                             return y1(d);
  75                         },
  76                         height : function(d, i) {
  77                             return chartH - y1(d);
  78                         }
  79                     }).on('mouseover', dispatch.customHover);
  80                     bars.transition().duration(duration).ease(ease).attr({
  81                         width : barW,
  82                         x : function(d, i) {
  83                             return x1(i) + gapSize / 2;
  84                         },
  85                         y : function(d, i) {
  86                             return y1(d);
  87                         },
  88                         height : function(d, i) {
  89                             return chartH - y1(d);
  90                         }
  91                     });
  92                     bars.exit().transition().style({
  93                         opacity : 0
  94                     }).remove();
  95
  96                     duration = 500;
  97
  98                 });
  99     }
 100     exports.width = function(_x) {
 101         if (!arguments.length)
 102             return width;
 103         width = parseInt(_x);
 104         return this;
 105     };
 106     exports.height = function(_x) {
 107         if (!arguments.length)
 108             return height;
 109         height = parseInt(_x);
 110         duration = 0;
 111         return this;
 112     };
 113     exports.gap = function(_x) {
 114         if (!arguments.length)
 115             return gap;
 116         gap = _x;
 117         return this;
 118     };
 119     exports.ease = function(_x) {
 120         if (!arguments.length)
 121             return ease;
 122         ease = _x;
 123         return this;
 124     };
 125     d3.rebind(exports, dispatch, 'on');
 126     return exports;
 127 };