wui-bigdata
Version:
Big data visualization library for WUI framework.
197 lines (172 loc) • 8.02 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _d = require('d3');
var _d2 = _interopRequireDefault(_d);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var LineChart = function (_Component) {
_inherits(LineChart, _Component);
function LineChart() {
_classCallCheck(this, LineChart);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(LineChart).call(this));
_this.state = {
focusCircleStyle: {},
focusLineText: '',
focusLineStyle: {},
verticalLine: {},
horizontalLine: {}
};
return _this;
}
_createClass(LineChart, [{
key: 'componentDidMount',
value: function componentDidMount() {
_d2.default.select(this.refs.xAxis).call(this.xAxis);
_d2.default.select(this.refs.yAxis).call(this.yAxis);
_d2.default.select(this.refs.overlay).on('mousemove', this.onMouseMove.bind(this));
}
}, {
key: 'onMouseOver',
value: function onMouseOver() {
this.setState({
focusCircleStyle: {},
focusLineStyle: {}
});
}
}, {
key: 'onMouseOut',
value: function onMouseOut() {
this.setState({
focusCircleStyle: {},
focusLineStyle: {}
});
}
}, {
key: 'onMouseMove',
value: function onMouseMove() {
var data = this.dataset[0].gdp;
var mouseX = _d2.default.mouse(this.refs.overlay)[0] - this.padding.left;
var x0 = this.xScale.invert(mouseX);
x0 = Math.floor(x0);
var bisect = _d2.default.bisector(function (d) {
return d[0];
}).left;
var index = bisect(data, x0);
var x1 = data[index][0];
var y1 = data[index][1];
var focusX = this.xScale(x1) + this.padding.left;
var focusY = this.yScale(y1) + this.padding.top;
this.setState({
focusCircleStyle: {
transform: 'translate(' + focusX + ', ' + focusY + ')'
},
focusLineText: x1 + '年的GDP: ' + y1 + '亿美元',
verticalLine: {
x1: focusX,
y1: focusY,
x2: focusX,
y2: this.height - this.padding.bottom
},
horizontalLine: {
x1: focusX,
y1: focusY,
x2: this.padding.left,
y2: focusY
}
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
this.dataset = [{
country: 'china',
gdp: [[2000, 11920], [2001, 13170], [2002, 14550], [2003, 16500], [2004, 19440], [2005, 22870], [2006, 27930], [2007, 35040], [2008, 45470], [2009, 51050], [2010, 59490], [2011, 73140], [2012, 83860], [2013, 103550]]
}, {
country: 'japan',
gdp: [[2000, 47310], [2001, 41590], [2002, 39800], [2003, 43020], [2004, 46500], [2005, 45710], [2006, 43560], [2007, 43560], [2008, 48490], [2009, 50350], [2010, 54950], [2011, 59050], [2012, 59370], [2013, 48980]]
}];
var width = 400;
this.height = 400;
this.padding = {
top: 50,
right: 50,
bottom: 50,
left: 50
};
var gdpmax = 0;
for (var i = 0; i < this.dataset.length; i++) {
var currGdp = _d2.default.max(this.dataset[i].gdp, function (d) {
return d[1];
});
if (currGdp > gdpmax) {
gdpmax = currGdp;
}
}
this.xScale = _d2.default.scale.linear().domain([2000, 2013]).range([0, width - this.padding.left - this.padding.right]);
this.yScale = _d2.default.scale.linear().domain([0, gdpmax * 1.1]).range([this.height - this.padding.top - this.padding.bottom, 0]);
var linePath = _d2.default.svg.line().x(function (d) {
return _this2.xScale(d[0]);
}).y(function (d) {
return _this2.yScale(d[1]);
});
var colors = [_d2.default.rgb(0, 0, 255), _d2.default.rgb(0, 255, 0)];
this.xAxis = _d2.default.svg.axis().scale(this.xScale).ticks(5).tickFormat(_d2.default.format('d')).orient('bottom');
this.yAxis = _d2.default.svg.axis().scale(this.yScale).orient('left');
return _react2.default.createElement(
'svg',
{ width: width, height: this.height },
this.dataset.map(function (data, index) {
return _react2.default.createElement('path', { key: index,
transform: 'translate(' + _this2.padding.left + ', ' + _this2.padding.top + ')',
d: linePath(data.gdp),
fill: 'none',
strokeWidth: 3,
stroke: colors[index] });
}),
_react2.default.createElement('g', { ref: 'xAxis',
className: 'axis',
transform: 'translate(' + this.padding.left + ',' + (this.height - this.padding.bottom) + ')' }),
_react2.default.createElement('g', { ref: 'yAxis',
className: 'axis',
transform: 'translate(' + this.padding.left + ',' + this.padding.top + ')' }),
_react2.default.createElement(
'g',
_extends({ className: 'focusCircle' }, this.state.focusCircleStyle),
_react2.default.createElement('circle', { r: 4.5 }),
_react2.default.createElement(
'text',
{ dx: 10, dy: '1em' },
this.state.focusLineText
)
),
_react2.default.createElement(
'g',
{ className: 'focusLine', style: this.state.focusLineStyle },
_react2.default.createElement('line', _extends({}, this.state.verticalLine, { stroke: 'black', strokeWidth: 1 })),
_react2.default.createElement('line', _extends({}, this.state.horizontalLine, { stroke: 'black', strokeWidth: 1 }))
),
_react2.default.createElement('rect', { ref: 'overlay',
className: 'overlay',
x: this.padding.left,
y: this.padding.top,
width: width - this.padding.left - this.padding.right,
height: this.height - this.padding.top - this.padding.bottom,
fill: 'none',
pointerEvents: 'all',
onMouseOver: this.onMouseOver.bind(this),
onMouseOut: this.onMouseOut.bind(this) })
);
}
}]);
return LineChart;
}(_react.Component);
exports.default = LineChart;