solrkit
Version:
 
184 lines • 6.91 kB
JavaScript
"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: 20, bottom: 35, left: 10 }, width = 180 - margin.left - margin.right, height = 120 - margin.top - margin.bottom;
var histogramStyle = {
'width': width,
'height': (height + 25)
};
var Histogram = (function (_super) {
__extends(Histogram, _super);
function Histogram(props) {
var _this = _super.call(this, props) || this;
var data = [];
if (props.parse) {
if (props.factor) {
data = props.data.map(function (value) { return [
(props.parse || _.identity)(value[0] + '') /
(props.factor || 1), value[1]
]; });
}
}
if (data.length === 0) {
data = props.data.map(function (value) { return [value[0], value[1]]; });
}
debugger;
data = data.map(function (value) { return [value[0], Math.log(1 + value[1])]; });
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()
.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;
}
Histogram.prototype.shouldComponentUpdate = function () {
return false;
};
Histogram.prototype.render = function () {
var _this = this;
return (React.createElement("div", { ref: function (dom) { _this.dom = dom; }, style: histogramStyle }));
};
Histogram.prototype.componentWillReceiveProps = function (nextProps) {
var _this = this;
var data = [];
if (nextProps.factor) {
data = nextProps.data.map(function (value) { return [
(_this.props.parse || _.identity)(value[0] + '') /
(_this.props.factor || 1), value[1]
]; });
}
else {
data = nextProps.data.map(function (value) { return [value[0], value[1]]; });
}
data = data.map(function (value) { return [value[0], Math.log(1 + value[1])]; });
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)
.select('g')
.call(this.brush)
.selectAll('rect')
.transition()
.duration(300)
.attr('y', -6)
.attr('height', height + 7);
this.svg
.select('.line')
.datum(data)
.transition()
.duration(300)
.attr('d', this.line);
};
Histogram.prototype.componentDidMount = function () {
var _this = this;
var data = [];
if (this.props.factor) {
data = this.props.data.map(function (value) { return [
(_this.props.parse || _.identity)(value[0] + '') /
(_this.props.factor || 1), value[1]
]; });
}
else {
data = this.props.data.map(function (value) { return [value[0], value[1]]; });
}
this.svg =
d3.select(this.dom)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
this.svg.append('path')
.datum(data)
.attr('class', 'area')
.attr('d', this.area);
this.svg.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', this.line);
this.svg.append('g')
.attr('class', 'x brush')
.call(this.brush)
.selectAll('rect')
.attr('y', -6)
.attr('height', height + 7);
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)');
};
Histogram.prototype.brushend = function () {
var ext = this.brush.extent();
var val0 = ext[0];
var val1 = ext[1];
if (val1 > val0) {
var precision = this.props.precision || 4;
if (this.props.facetHandler) {
if (this.props.factor) {
this.props.facetHandler([
(this.props.factor * val0).toPrecision(precision),
(this.props.factor * val1).toPrecision(precision)
]);
}
else {
this.props.facetHandler([
val0.toPrecision(precision),
val1.toPrecision(precision)
]);
}
}
}
};
return Histogram;
}(React.Component));
exports.Histogram = Histogram;
//# sourceMappingURL=Histogram.js.map