conjur-asset-ui 1.3.1 → 1.3.2

data/package.json

@@ -1,47 +0,0 @@
-{
-  "name": "conjur-asset-ui",
-  "version": "1.2.0",
-  "description": "",
-  "main": "",
-  "dependencies": {},
-  "devDependencies": {
-    "gulp": "~3.8.8",
-    "main-bower-files": "~2.0.0",
-    "gulp-sourcemaps": "~1.2.2",
-    "del": "~0.1.3",
-    "gulp-uglify": "~1.0.1",
-    "gulp-concat": "~2.4.1",
-    "gulp-react": "~1.0.2",
-    "gulp-cached": "~1.0.1",
-    "gulp-jshint": "~1.8.4",
-    "jshint-stylish": "~1.0.0",
-    "gulp-remember": "~0.2.1",
-    "gulp-less": "~1.3.5",
-    "gulp-minify-css": "~0.3.10",
-    "gulp-filter": "~1.0.2",
-    "gulp-flatten": "0.0.3",
-    "jest-cli": "~0.1.18",
-    "react": "~0.11.2",
-    "react-tools": "~0.11.2",
-    "gulp-autoprefixer": "~1.0.1",
-    "gulp-plumber": "~0.6.6"
-  },
-  "scripts": {
-    "test": "jest"
-  },
-  "jest": {
-    "scriptPreprocessor": "<rootDir>/preprocessor.js",
-    "unmockedModulePathPatterns": [
-      "<rootDir>/node_modules/react"
-    ]
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/conjurinc/conjur-asset-ui.git"
-  },
-  "author": "Nikolai Sevostjanov <nikolai.sevostjanov@gmail.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/conjurinc/conjur-asset-ui/issues"
-  }
-}

data/preprocessor.js

@@ -1,7 +0,0 @@
-var ReactTools = require('react-tools');
-
-module.exports = {
-    process: function(src) {
-        return ReactTools.transform(src);
-    }
-};

data/public/js/views/chart.js

@@ -1,471 +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;
-
-    function _translate(x, y) {
-        return 'translate(' + x + ',' + y + ')';
-    }
-
-    this.Chart = React.createClass({
-        getDefaultProps: function() {
-            return {
-                defaultOptions: {
-                    legend: {
-
-                    },
-                    axis: {
-                        x: {
-                            label: 'X axis'
-                        },
-                        y: {
-                            label: 'Y axis'
-                        }
-                    },
-                    margin: {
-                        top: 20,
-                        right: 120,
-                        bottom: 30,
-                        left: 50
-                    }
-                }
-            };
-        },
-
-        el: undefined,
-        svg: {},
-
-        componentDidMount: function() {
-            this.el = this.getDOMNode();
-
-            var options = _.deepExtend({}, this.props.options, this.props.defaultOptions);
-
-            this.setState(options, function() {
-                this._calculateInitialState(function() {
-                    this._create();
-                    this._update();
-                }.bind(this));
-            }.bind(this));
-        },
-
-        componentDidUpdate: function() {
-            if (typeof this.svg.svg === 'undefined') {
-                return;
-            }
-
-            this._update();
-
-            return;
-        },
-
-        componentWillUnmount: function() {
-
-        },
-
-        render: function() {
-            return (
-              <div className="b-chart"></div>
-            );
-        },
-
-        _getHeight: function() {
-            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) -
-                this.state.margin.top - this.state.margin.bottom;
-
-            return height;
-        },
-
-        _getWidth: function() {
-            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) -
-                this.state.margin.left - this.state.margin.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(cb) {
-            var props = this.props;
-
-            var width = this._getWidth(),
-                height = this._getHeight(),
-                fullWidth = (
-                    width +
-                        this.state.margin.left +
-                        this.state.margin.right
-                ),
-                fullHeight = (
-                    height +
-                        this.state.margin.top +
-                        this.state.margin.bottom
-                );
-
-            var color = d3.scale.category10();
-
-            color.domain(d3.keys(props.data[0]).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 x = this._getScaleX('time')
-                    .range([0, width])
-                    .domain(d3.extent(props.data, function(d) { return d.date; })),
-
-                y = this._getScaleX('linear')
-                    .range([height, 0])
-                    .domain([
-                        d3.min(data, function(c) {
-                            return d3.min(c.values, function(v) { return v.value; });
-                        }),
-                        d3.max(data, function(c) {
-                            return d3.max(c.values, function(v) { return v.value; });
-                        })
-                    ]),
-
-	        legendScale = d3.scale.ordinal()
-		    .domain([])
-		    .range([0, 20, 40, 60, 80, 100, 120, 140]),
-
-                scales = {x: x, y: y, legend: legendScale};
-
-            var line = this._getLine(scales);
-
-            this.setState({
-                width: width,
-                height: height,
-                fullWidth: fullWidth,
-                fullHeight: fullHeight,
-                color: color,
-                scales: scales,
-                lineStencil: line,
-                data: data
-            }, cb);
-        },
-
-        _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');
-
-            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;
-
-            var legend = this.svg.legend
-                    .selectAll('.d3-legend__item')
-                    .data(this.state.data);
-
-            var 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.name;
-                    })
-                    .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) {
-                    return self.state.scales.legend(d.values[d.values.length-1].value) - 3.1;
-                })
-                .attr('r', 5.5)
-                .style('fill', function(d) {
-                    return self.state.color(d.name);
-                });
-
-            enter.append('text')
-                .attr('x', this.state.width + 40)
-                .attr('y', function(d) {
-                    return self.state.scales.legend(d.values[d.values.length-1].value);
-                })
-                .text(function(d) {
-                    return self.state.legend[d.name];
-                });
-        },
-
-        _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.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;
-
-            var 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.focusLine = this.svg.focus.append('line')
-                .attr('x1', 0)
-                .attr('y1', 0)
-                .attr('x2', 0)
-                .attr('y2', this.state.height)
-                .style('stroke', 'gray')
-                .style('stroke-width', 0.5)
-                .style('stroke-dasharray', '5,10');
-
-            this.svg.graph.append('rect')
-                .attr('class', 'd3-graph__overlay')
-                .attr('width', this.state.width)
-                .attr('height', this.state.height)
-                .on('mouseover', function() {
-                    self.svg.focusLine.style('display', null);
-                })
-                .on('mouseout', function() {
-                    self.svg.focusLine.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],
-                    d = x0 - d0.date > d1.date - x0 ? d1 : d0;
-
-                return {name: data.name, data: d};
-            };
-
-            this.svg.focusLine.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');
-                }
-            });
-        }
-    });
-
-}).bind(conjur.views)
-(
-    conjur,
-    React,
-    d3,
-    _
-);