Merge "[ui] Fix docker build for UI container"
[validation.git] / 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 };