solrkit/build/component/facet/HistogramFacet.js

 

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var d3 = require("d3");
var _ = require("lodash");
require("d3-scale");
require("d3-svg");
require("d3-brush");
var margin = { top: 0, right: 5, bottom: 50, left: 5 }, width = 180 - margin.left - margin.right, height = 120 - margin.top - margin.bottom;
var histogramStyle = {
    'width': width,
    'height': height + 35,
};
function getData(props) {
    return _.sortBy(props.values.map(function (value) { return [parseInt(value.value, 10), value.count]; }).map(function (value) { return [value[0], Math.log(1 + value[1])]; }), function (row) { return row[0]; });
}
var HistogramFacet = (function (_super) {
    __extends(HistogramFacet, _super);
    function HistogramFacet(props) {
        var _this = _super.call(this, props) || this;
        var data = getData(props);
        var x = d3.scaleLinear()
            .range([width, 0]), y = d3.scaleLinear()
            .range([height, 0]);
        var xAxis = d3.axisBottom(x);
        var area = d3.area()
            .x(function (d) { return x(d[0]); })
            .y0(height)
            .y1(function (d) { return y(d[1]); });
        var line = d3.line()
            .x(function (d) { return x(d[0]); })
            .y(function (d) { return y(d[1]); });
        var xmin = props.min !== undefined ?
            props.min :
            d3.min(data, function (d) { return d[0]; });
        var xmax = props.max !== undefined ?
            props.max :
            d3.max(data, function (d) { return d[0]; });
        var max = d3.max(data, function (d) { return d[1]; }) || 0;
        x.domain([xmax || 0, xmin || 0]);
        y.domain([
            0,
            max
        ]);
        var brush = d3.brushX()
            .extent([[0, 0], [width, height + 2]])
            .on('end', _this.brushend.bind(_this));
        _this.x = x;
        _this.y = y;
        _this.line = line;
        _this.xAxis = xAxis;
        _this.area = area;
        _this.brush = brush;
        return _this;
    }
    HistogramFacet.prototype.shouldComponentUpdate = function () {
        return false;
    };
    HistogramFacet.prototype.render = function () {
        var _this = this;
        var title = this.props.title;
        return (React.createElement("div", null,
            React.createElement("h4", null, title),
            React.createElement("div", { ref: function (dom) { _this.dom = dom; }, style: histogramStyle })));
    };
    HistogramFacet.prototype.componentDidMount = function () {
        var data = getData(this.props);
        this.svg =
            d3.select(this.dom)
                .append('svg')
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .style('font', '10px sans-serif')
                .append('g')
                .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
        this.svg.append('path')
            .datum(data)
            .attr('class', 'area')
            .style('fill', 'steelblue')
            .style('clipPath', 'url(#clip)')
            .attr('d', this.area);
        this.svg.append('path')
            .datum(data)
            .attr('class', 'line')
            .style('fill', 'none')
            .style('stroke', '#000')
            .style('shapeRendering', 'crispEdges')
            .attr('d', this.line);
        this.svg.append('g')
            .attr('class', 'x brush')
            .call(this.brush);
        this.svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0,' + height + ')')
            .call(this.xAxis)
            .selectAll('text')
            .attr('y', 0)
            .attr('x', 20)
            .attr('dy', '.35em')
            .attr('transform', 'rotate(90)');
    };
    HistogramFacet.prototype.componentWillReceiveProps = function (nextProps) {
        var data = getData(nextProps);
        this.y.domain([0, d3.max(data, function (d) { return d[1]; })]);
        this.svg
            .select('.area')
            .datum(data)
            .transition()
            .duration(300)
            .attr('d', this.area);
        this.svg
            .select('.line')
            .datum(data)
            .transition()
            .duration(300)
            .attr('d', this.line);
    };
    HistogramFacet.prototype.brushend = function () {
        var ext = d3.event.selection;
        var val0 = ext[0];
        var val1 = ext[1];
        if (val1 > val0) {
            var selections = getData(this.props).filter(function (value, i) { return i >= val0 && i <= val1; }).map(function (_a, i) {
                var value = _a[0], count = _a[1];
                return value + '';
            });
            var thisFacet = {};
            thisFacet[this.props.facet] = selections;
            this.context.transition({
                start: 0,
                facets: thisFacet
            });
        }
    };
    HistogramFacet.contextTypes = {
        searchState: React.PropTypes.object,
        transition: React.PropTypes.func
    };
    return HistogramFacet;
}(React.Component));
exports.HistogramFacet = HistogramFacet;
//# sourceMappingURL=HistogramFacet.js.map