react-d3-brush
Version:
react-d3 brush implementation
220 lines (179 loc) • 10.4 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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _d3 = require('d3');
var _d32 = _interopRequireDefault(_d3);
var _reactD3Core = require('react-d3-core');
var _reactD3Basic = require('react-d3-basic');
var _commonProps = require('../commonProps');
var _commonProps2 = _interopRequireDefault(_commonProps);
var Brush = (function (_Component) {
_inherits(Brush, _Component);
function Brush(props) {
_classCallCheck(this, Brush);
_get(Object.getPrototypeOf(Brush.prototype), 'constructor', this).call(this, props);
this.state = {
xBrushScaleSet: this._mkXScale(),
yBrushScaleSet: this._mkYScale(),
brushSet: false
};
}
_createClass(Brush, [{
key: '_mkXScale',
value: function _mkXScale() {
var _props = this.props;
var xScale = _props.xScale;
var xRange = _props.xRange;
var xDomain = _props.xDomain;
var xRangeRoundBands = _props.xRangeRoundBands;
var newXScale = {
scale: xScale,
range: xRange,
domain: xDomain,
rangeRoundBands: xRangeRoundBands
};
return (0, _reactD3Core.scale)(newXScale);
}
}, {
key: '_mkYScale',
value: function _mkYScale() {
var _props2 = this.props;
var yScale = _props2.yScale;
var yDomain = _props2.yDomain;
var yRangeRoundBands = _props2.yRangeRoundBands;
var yBrushRange = _props2.yBrushRange;
var newYScale = {
scale: yScale,
range: yBrushRange,
domain: yDomain,
rangeRoundBands: yRangeRoundBands
};
return (0, _reactD3Core.scale)(newYScale);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _state = this.state;
var xBrushScaleSet = _state.xBrushScaleSet;
var yBrushScaleSet = _state.yBrushScaleSet;
var _props3 = this.props;
var brushHeight = _props3.brushHeight;
var brushType = _props3.brushType;
var setDomain = _props3.setDomain;
var margins = _props3.margins;
var width = _props3.width;
var brushMargins = _props3.brushMargins;
var brush = _d32['default'].svg.brush().x(xBrushScaleSet).on("brush", function () {
var newDomain = brush.empty() ? xBrushScaleSet.domain() : brush.extent();
if (brushType === 'line' || brushType === 'scatter' || brushType === 'area_stack') {
if (newDomain.length) setDomain("x", newDomain);
} else if (brushType === 'bar' || brushType === 'bar_group' || brushType === 'bar_stack') {
var selected = xBrushScaleSet.domain().filter(function (d) {
return newDomain[0] <= xBrushScaleSet(d) && xBrushScaleSet(d) <= newDomain[1];
});
if (selected.length) setDomain("x", selected);
}
});
var brushDom = _d32['default'].select(_reactDom2['default'].findDOMNode(this.refs.brushRect)).call(brush).selectAll('rect').attr("y", -6).attr("height", brushHeight - brushMargins.bottom - brushMargins.top + 7).style('stroke', '#FFF').style('fill-opacity', .25).style('shape-rendering', 'crispEdges');
this.setState({
brushSet: true
});
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
var brushSet = nextState.brushSet;
if (brushSet) {
return false;
} else {
return true;
}
}
}, {
key: 'render',
value: function render() {
var _state2 = this.state;
var xBrushScaleSet = _state2.xBrushScaleSet;
var yBrushScaleSet = _state2.yBrushScaleSet;
var _props4 = this.props;
var brushHeight = _props4.brushHeight;
var brushType = _props4.brushType;
var brushMargins = _props4.brushMargins;
var yBrushRange = _props4.yBrushRange;
var chartSeriesData = _props4.chartSeriesData;
var _props5 = this.props;
var height = _props5.height;
var yRange = _props5.yRange;
var showYAxis = _props5.showYAxis;
var yLabel = _props5.yLabel;
var margins = _props5.margins;
var otherProps = _objectWithoutProperties(_props5, ['height', 'yRange', 'showYAxis', 'yLabel', 'margins']);
if (xBrushScaleSet && yBrushScaleSet) {
if (brushType === 'line') {
var brushChart = chartSeriesData.map(function (d, i) {
if (d.area) {
// area chart
return _react2['default'].createElement(_reactD3Basic.Area, _extends({ margins: brushMargins, dataset: d, key: i, height: brushHeight, yScaleSet: yBrushScaleSet, xScaleSet: xBrushScaleSet }, otherProps));
} else {
// simple line chart
return _react2['default'].createElement(_reactD3Basic.Line, _extends({ margins: brushMargins, dataset: d, key: i, height: brushHeight, yScaleSet: yBrushScaleSet, xScaleSet: xBrushScaleSet }, otherProps));
}
});
} else if (brushType === 'scatter') {
var brushChart = chartSeriesData.map(function (d, i) {
return _react2['default'].createElement(_reactD3Basic.Scatter, _extends({ margins: brushMargins, dataset: d, key: i, brushSymbol: true, height: brushHeight, yScaleSet: yBrushScaleSet, xScaleSet: xBrushScaleSet }, otherProps));
});
} else if (brushType === 'area_stack') {
var brushChart = _react2['default'].createElement(_reactD3Basic.AreaStack, _extends({ margins: brushMargins, height: brushHeight, yScaleSet: yBrushScaleSet, xScaleSet: xBrushScaleSet, dataset: chartSeriesData }, otherProps));
} else if (brushType === 'bar') {
var brushChart = chartSeriesData.map(function (d, i) {
return _react2['default'].createElement(_reactD3Basic.Bar, _extends({ margins: brushMargins, dataset: d, key: i, height: brushHeight, yScaleSet: yBrushScaleSet, xScaleSet: xBrushScaleSet }, otherProps));
});
} else if (brushType === 'bar_group') {
// settings x1
var x1 = _d32['default'].scale.ordinal();
// mapping x1, inner x axis
x1.domain(chartSeriesData.map(function (d) {
return d.field;
})).rangeRoundBands([0, xBrushScaleSet.rangeBand()]);
var brushChart = chartSeriesData.map(function (d, i) {
return _react2['default'].createElement(_reactD3Basic.BarGroup, _extends({ margins: brushMargins, x1: x1, dataset: d, key: i, count: i, height: brushHeight, yScaleSet: yBrushScaleSet, xScaleSet: xBrushScaleSet }, otherProps));
});
} else if (brushType === 'bar_stack') {
var brushChart = _react2['default'].createElement(_reactD3Basic.BarStack, _extends({ margins: brushMargins, height: brushHeight, yScaleSet: yBrushScaleSet, xScaleSet: xBrushScaleSet, dataset: chartSeriesData }, otherProps));
}
}
return _react2['default'].createElement(
_reactD3Core.Svg,
{ height: brushHeight, margins: brushMargins },
_react2['default'].createElement(
'g',
{ ref: 'brushComponentGroup' },
brushChart,
_react2['default'].createElement(_reactD3Core.Xaxis, _extends({ height: brushHeight }, otherProps, { margins: brushMargins, xLabel: false })),
_react2['default'].createElement(_reactD3Core.Yaxis, _extends({ height: brushHeight, yRange: yBrushRange, showYAxis: false, yLabel: false }, otherProps, { margins: brushMargins })),
_react2['default'].createElement('g', { ref: 'brushRect', className: 'react-d3-basic__brush__rect' })
)
);
}
}], [{
key: 'defaultProps',
value: _commonProps2['default'],
enumerable: true
}]);
return Brush;
})(_react.Component);
exports['default'] = Brush;
module.exports = exports['default'];