conjur-asset-ui 1.4.2 → 1.6.0

data/public/js/views/chart.js

@@ -1,617 +0,0 @@
-/** @jsx React.DOM */
-/* global conjur, React, d3, _ */
-
-(function(conjur, React, d3, _) {
-    'use strict';
-
-    var bisector = d3.bisector(function(d) { return d.date; }).left,
-        oneDay = 86400000;
-
-    function _translate(x, y) {
-        return 'translate(' + x + ',' + y + ')';
-    }
-
-    this.Chart = React.createClass({
-        getInitialState: function() {
-            return {ready: false};
-        },
-
-        getDefaultProps: function() {
-            return {
-                defaultOptions: {
-                    legend: {},
-                    axis: {
-                        x: {
-                            label: 'X axis'
-                        },
-                        y: {
-                            label: 'Y axis'
-                        }
-                    },
-                    margin: {
-                        top: 20,
-                        right: 145,
-                        bottom: 30,
-                        left: 50
-                    }
-                }
-            };
-        },
-
-        el: undefined,
-        svg: undefined,
-
-        componentDidMount: function() {
-            // should be better way to do this
-            this.el = this.getDOMNode();
-            this.svg = {};
-
-            this._calculateInitialState(this.props);
-        },
-
-        componentWillReceiveProps: function(nextProps) {
-            this._calculateInitialState(nextProps);
-        },
-
-        componentDidUpdate: function() {
-            if (this.state.ready === false) {
-                return;
-            }
-
-            if (typeof this.svg.svg === 'undefined') {
-                this._create();
-            }
-
-            this._update();
-
-            return;
-        },
-
-        componentWillUnmount: function() {
-            this.el = undefined;
-            this.svg = undefined;
-        },
-
-        render: function() {
-            return (
-              <div className="b-chart"></div>
-            );
-        },
-
-        _getHeight: function(top, bottom) {
-            var height;
-
-            if (this.el.offsetHeight) {
-                height = this.el.offsetHeight;
-            } else if (this.el.style.pixelHeight) {
-                height = this.el.style.pixelHeight;
-            }
-
-            height = window.parseFloat(height) -
-                top - bottom;
-
-            return height;
-        },
-
-        _getWidth: function(left, right) {
-            var width;
-
-            if (this.el.offsetWidth) {
-                width = this.el.offsetWidth;
-            } else if (this.el.style.pixelWidth) {
-                width = this.el.style.pixelWidth;
-            }
-
-            width = window.parseFloat(width) -
-                left - right;
-
-            return width;
-        },
-
-        _create: function() {
-            var svg = d3.select(this.el)
-                    .append('svg')
-                    .attr('class', 'd3-line-chart')
-                    .attr('width', this.state.fullWidth)
-                    .attr('height', this.state.fullHeight)
-                    .append('g')
-                    .attr('class', 'd3-line-chart__inner')
-                    .attr('transform', _translate(this.state.margin.left, this.state.margin.top));
-
-            this.svg.svg = svg;
-
-            this.svg.axis = svg.append('g')
-                .attr('class', 'd3-axis');
-
-            this.svg.axis.append('g')
-                .attr('class', 'd3-axis__x');
-
-            this.svg.axis.append('g')
-                .attr('class', 'd3-axis__y');
-
-            this.svg.legend = svg.append('g')
-                .attr('class', 'd3-legend');
-
-            this.svg.graph = svg.append('g')
-                .attr('class', 'd3-graph');
-
-            this.svg.focus = this.svg.graph.append('g')
-                .attr('class', 'd3-graph__focus');
-        },
-
-        _update: function() {
-            this._drawAxisX();
-            this._drawAxisY();
-            this._drawLegend();
-            this._drawLine();
-            this._drawFocus();
-        },
-
-        _calculateInitialState: function(props) {
-            var options = _.deepExtend({}, props.options,
-                                       props.defaultOptions);
-
-            var width = this._getWidth(options.margin.left,
-                                       options.margin.right),
-                height = this._getHeight(options.margin.top,
-                                         options.margin.bottom),
-                fullWidth = (
-                    width +
-                        options.margin.left +
-                        options.margin.right
-                ),
-                fullHeight = (
-                    height +
-                        options.margin.top +
-                        options.margin.bottom
-                );
-
-            var color = d3.scale.category10();
-
-            color.domain(d3.keys(options.legend)
-                         .filter(function(key) {
-                             return key !== 'date';
-                         }));
-
-            var data = color.domain().map(function(name) {
-                return {
-                    name: name,
-                    values: props.data.map(function(d) {
-                        return {date: d.date, value: +d[name]};
-                    })
-                };
-            });
-
-            var xExtent = d3.extent(props.data, function(d) {
-                return d.date;
-            });
-
-            var currentDate = (new Date()).getTime();
-
-            var xMin = xExtent[0] || new Date(currentDate - oneDay),
-                xMax = xExtent[1] || new Date(currentDate);
-
-            var yMin = d3.min(data, function(c) {
-                return d3.min(c.values, function(v) {
-                    return v.value;
-                });
-            }) || 0;
-
-            if (yMin < 1) {
-                yMin = 0;
-            }
-
-            var yMax = d3.max(data, function(c) {
-                return d3.max(c.values, function(v) {
-                    return v.value;
-                });
-            }) || 4;
-
-            yMax = yMax + 1;
-
-            if (yMax < 5) {
-                yMax = 5;
-            }
-
-            var x = this._getScaleX('time')
-                    .range([0, width])
-                    .domain([xMin, xMax]),
-
-                y = this._getScaleX('linear')
-                    .range([height, 0])
-                    .domain([yMin, yMax]),
-
-	        legendScale = d3.scale.ordinal()
-		    .domain([])
-		    .range([0, 20, 40, 60, 80, 100, 120, 140]),
-
-                scales = {x: x, y: y, yMax: yMax, legend: legendScale};
-
-            var line = this._getLine(scales);
-
-            this.setState({
-                ready: true,
-                legend: options.legend,
-                axis: options.axis,
-                margin: options.margin,
-                width: width,
-                height: height,
-                fullWidth: fullWidth,
-                fullHeight: fullHeight,
-                color: color,
-                scales: scales,
-                lineStencil: line,
-                data: data
-            });
-        },
-
-        _getScaleX: function(type) {
-            if (type === 'linear') {
-                return d3.scale.linear();
-            } else if (type === 'time') {
-                return d3.time.scale();
-            }
-
-            return null;
-        },
-
-        _getLine: function(scales) {
-            return d3.svg.line()
-                .x(function(d) {
-                    return scales.x(d.date);
-                })
-                .y(function(d) {
-                    return scales.y(d.value);
-                });
-        },
-
-        _drawAxisX: function() {
-            var xAxis = d3.svg.axis()
-                    .scale(this.state.scales.x)
-                    .orient('bottom');
-
-            this.svg.axis.select('.d3-axis__x')
-                .attr('transform', _translate(0, this.state.height))
-                .call(xAxis);
-        },
-
-        _drawAxisY: function() {
-            var yAxis = d3.svg.axis()
-                    .scale(this.state.scales.y)
-                    .orient('left')
-                    .ticks(this.state.scales.yMax > 10 ? 10 : this.state.scales.yMax)
-                    .tickFormat(d3.format('d'))
-                    .tickSubdivide(0);
-
-            var axis = this.svg.axis.select('.d3-axis__y')
-                    .call(yAxis);
-
-            if (typeof(this.state.yAxisLabel) === 'string') {
-                this._drawAxisLabel(axis, this.state.yAxisLabel, true);
-            }
-        },
-
-        _drawAxisLabel: function(axis, text, rotate) {
-            var label = axis.append('text');
-
-            if (typeof(rotate) === 'boolean' && rotate === true) {
-                label.attr('transform', 'rotate(-90)')
-                    .attr('y', 0 - this.state.margin.left)
-                    .attr('x', 0 - (this.state.height / 2))
-                    .attr('dy', '1em')
-                    .style('text-anchor', 'middle')
-                    .text(text);
-            } else {
-                label.attr('transform',
-                           _translate(this.state.width / 2,
-                                      this.state.height + this.state.margin.bottom))
-                    .style('text-anchor', 'middle')
-                    .text(text);
-            }
-        },
-
-        _drawLegend: function() {
-            var self = this,
-                legend,
-                enter;
-
-            legend = this.svg.legend
-                .selectAll('.d3-legend__item')
-                .data(d3.keys(this.state.legend));
-
-            enter = legend
-                .enter()
-                .append('g')
-                .style('opacity', 0.9)
-                .attr('class', 'd3-legend__item')
-                .attr('data-graph-line-id', function(d) {
-                    return 'd3-legend__item--' + d;
-                })
-                .on('mouseover', function(d) {
-                    self._handleLegendMouseover(this, d);
-                })
-                .on('mouseout', function(d) {
-                    self._handleLegendMouseout(this, d);
-                })
-                .on('click', function(d) {
-                    self._handleLegendClick(this, d);
-                });
-
-            enter.append('circle')
-                .attr('cx', this.state.width + 30)
-                .attr('cy', function(d, i) {
-                    return self.state.scales.legend(i) - 3.1;
-                })
-                .attr('r', 5.5)
-                .style('fill', function(d) {
-                    return self.state.color(d);
-                });
-
-            enter.append('text')
-                .attr('x', this.state.width + 40)
-                .attr('y', function(d, i) {
-                    return self.state.scales.legend(i);
-                })
-                .text(function(d) {
-                    return self.state.legend[d];
-                });
-        },
-
-        _handleLegendMouseover: function(self) {
-            var opacity = parseFloat(self.style.opacity);
-
-            if (opacity >= 0.9) {
-                d3.select(self)
-                    .style('opacity', 1);
-            } else {
-                d3.select(self)
-                    .style('opacity', 0.5);
-            }
-        },
-
-        _handleLegendMouseout: function(self) {
-            var opacity = parseFloat(self.style.opacity);
-
-            if (opacity >= 0.9) {
-                d3.select(self)
-                    .style('opacity', 0.9);
-            } else {
-                d3.select(self)
-                    .style('opacity', 0.2);
-            }
-        },
-
-        _handleLegendClick: function(self) {
-            var line = document.getElementById(self.getAttribute('data-graph-line-id'));
-
-            if (line === null) {
-                return;
-            }
-
-            if (line.style.opacity !== '0') {
-                d3.select(line).transition()
-                    .duration(500)
-                    .style('opacity', 0);
-
-                d3.select(self).transition()
-	            .duration(500)
-	            .style('opacity', 0.2);
-            } else {
-                d3.select(line).transition()
-                    .duration(500)
-                    .style('opacity', 1);
-
-                d3.select(self).transition()
-	            .duration(500)
-	            .style('opacity', 0.9);
-            }
-        },
-
-        _drawLine: function() {
-            var self = this,
-                line;
-
-            this.svg.graph.selectAll('.d3-graph__line')
-                .remove();
-
-            line = this.svg.graph.selectAll('.d3-graph__line')
-                .data(this.state.data)
-                .enter()
-                .append('g')
-                .attr('class', 'd3-graph__line')
-                .attr('id', function(d) {
-                    return 'd3-legend__item--' + d.name;
-                });
-
-            line.append('path')
-                .attr('class', 'line')
-                .attr('d', function(d) {
-                    return self.state.lineStencil(d.values);
-                })
-                .style('stroke', function(d) {
-                    return self.state.color(d.name);
-                });
-        },
-
-        _drawFocus: function() {
-            var self = this;
-
-            var circle = this.svg.focus.selectAll('.d3-graph__focus-circle')
-                    .data(this.state.data)
-                    .enter()
-                    .append('g')
-                    .attr('class', 'd3-graph__focus-circle')
-                    .attr('id', function(d) {
-                        return 'd3-graph__focus-circle--' + d.name;
-                    })
-                    .style('display', 'none');
-
-            circle.append('circle')
-                .attr('r', 4.5);
-
-            circle.append('text')
-                .attr('x', 9)
-                .attr('dy', '.35em');
-
-            this.svg.focus.selectAll('.d3-graph__focus-line')
-                .data([1])
-                .enter()
-                .append('line')
-                .attr('class', 'd3-graph__focus-line')
-                .attr('x1', 0)
-                .attr('y1', 0)
-                .attr('x2', 0)
-                .attr('y2', this.state.height)
-                .style('display', 'none')
-                .style('stroke', 'gray')
-                .style('stroke-width', 0.5)
-                .style('stroke-dasharray', '5,10');
-
-            this.svg.graph.selectAll('.d3-graph__overlay')
-                .data([1])
-                .enter()
-                .append('rect')
-                .attr('class', 'd3-graph__overlay')
-                .attr('width', this.state.width)
-                .attr('height', this.state.height)
-                .on('mouseover', function() {
-                    self.svg.focus.selectAll('.d3-graph__focus-line')
-                        .style('display', null);
-                })
-                .on('mouseout', function() {
-                    self.svg.focus.selectAll('.d3-graph__focus-line')
-                        .style('display', 'none');
-
-                    self.svg.focus.selectAll('.d3-graph__focus-circle')
-                        .style('display', 'none');
-                })
-                .on('mousemove', function() {
-                    self._handleFocusMousemove(this);
-                });
-        },
-
-        _handleFocusMousemove: function(overlay) {
-            var self = this,
-                mouse = d3.mouse(overlay)[0],
-                x0 = this.state.scales.x.invert(mouse);
-
-            var bisectData = function(data) {
-                var i = bisector(data.values, x0, 1),
-                    d0 = data.values[i - 1],
-                    d1 = data.values[i],
-                    ret = {name: data.name, data: {value: []}};
-
-                if (typeof d0 === 'object' || typeof d1 === 'object') {
-                    var d = x0 - d0.date > d1.date - x0 ? d1 : d0;
-
-                    ret.data = d;
-                }
-
-                return ret;
-            };
-
-            this.svg.focus.selectAll('.d3-graph__focus-line')
-                .attr('transform', _translate(this.state.scales.x(x0), 0));
-
-            this.state.data.map(function(e) {
-                return bisectData(e);
-            }).map(function(d) {
-                var circle = document.getElementById('d3-graph__focus-circle--' + d.name),
-                    line = document.getElementById('d3-legend__item--' + d.name);
-
-                if (d.data.value > 0 && line.style.opacity !== '0') {
-                    d3.select(circle)
-                        .style('display', null)
-                        .attr('transform',
-                              _translate(self.state.scales.x(d.data.date),
-                                         self.state.scales.y(d.data.value)))
-
-                        .select('text').text(d3.format(',.2f')(d.data.value));
-                } else {
-                    d3.select(circle)
-                        .style('display', 'none');
-                }
-            });
-        }
-    });
-
-    this.ChartHelperMixin = {
-        getData: function(audit) {
-            var values = {},
-                min,
-                max,
-                self = this;
-
-            _.each(audit, function(e) {
-                var date,
-                    type,
-                    value;
-
-                if (typeof e.timestamp === 'string') {
-                    date = d3.time.hour(new Date(e.timestamp));
-                }
-
-                type = self.getEventType(e);
-
-                if (date instanceof Date && typeof type === 'string')  {
-                    value = values[date.toString()];
-
-                    if (typeof value === 'undefined') {
-                        value = self.getDefaultItem();
-                        value.date = date;
-                    }
-
-                    value[type] = value[type] + 1;
-
-                    values[date.toString()] = value;
-
-                    if (typeof max === 'undefined') {
-                        max = date;
-                    }
-
-                    if (typeof min === 'undefined') {
-                        min = date;
-                    }
-
-                    if (date > max) {
-                        max = date;
-                    }
-
-                    if (date < min) {
-                        min = date;
-                    }
-                }
-            });
-
-            var x = max - min;
-
-            if (x < oneDay) {
-                var delta = Math.round((86400000 - x) / 2);
-
-                min = new Date(min.getTime() - delta);
-                max = new Date(max.getTime() + delta);
-            }
-
-            return d3.time.scale()
-                .domain([min, max])
-                .ticks(d3.time.hours, 1)
-                .map(function(date) {
-                    var d = values[date.toString()] || self.getDefaultItem();
-
-                    d.date = date;
-
-                    return d;
-                })
-                .sort(function(a, b) {
-                    return a.date - b.date;
-                });
-        }
-    };
-
-}).bind(conjur.views)
-(
-    conjur,
-    React,
-    d3,
-    _
-);