From 952eadbda406c854aff733a3ae99ff12c7b6be31 Mon Sep 17 00:00:00 2001 From: huy Date: Thu, 8 Jun 2017 18:28:30 +0900 Subject: [PATCH 1/4] Up to date react and babel modules. --- package.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index e9efa84..69c1254 100644 --- a/package.json +++ b/package.json @@ -14,19 +14,19 @@ "author": "ElixirDoc team", "license": "Apache 2.0", "devDependencies": { - "babel-cli": "^6.6.4", - "babel-core": "^6.5.2", + "babel-cli": "^6.24.1", + "babel-core": "^6.24.1", "babel-eslint": "^3.1.9", - "babel-loader": "^6.2.3", + "babel-loader": "^6.4.1", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-react-transform": "^2.0.0", "babel-plugin-transform-react-remove-prop-types": "^0.2.2", "babel-plugin-transform-runtime": "^6.5.2", - "babel-polyfill": "^6.5.0", - "babel-preset-es2015": "^6.5.0", - "babel-preset-react": "^6.5.0", - "babel-preset-react-hmre": "1.0.1", - "babel-preset-stage-0": "^6.5.0", + "babel-polyfill": "^6.23.0", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "babel-preset-react-hmre": "1.1.1", + "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.18.0", "dsv-loader": "^1.0.0", "express": "^4.13.4", @@ -41,13 +41,13 @@ "webpack-hot-middleware": "^2.9.0" }, "peerDependencies": { - "react": "^0.14.7", - "react-dom": "^0.14.7" + "react": "^15.4.2", + "react-dom": "^15.4.2" }, "dependencies": { "d3": "^3.5.6", "d3-scale": "^0.6.4", "d3-shape": "^0.5.1", - "react-d3-core": "^1.2.8" + "react-d3-core": "/Users/huy/Work/dev/react-d3-core" } } From e71af16b60fd932010e549df628c3d8e18f2f082 Mon Sep 17 00:00:00 2001 From: huy Date: Thu, 8 Jun 2017 18:54:51 +0900 Subject: [PATCH 2/4] Upload /lib forder. --- .gitignore | 1 - lib/chart.js | 167 +++++++++++++++++++++++ lib/chartpie.js | 93 +++++++++++++ lib/commonProps.js | 39 ++++++ lib/components/area.js | 114 ++++++++++++++++ lib/components/area_stack.js | 137 +++++++++++++++++++ lib/components/bar.js | 116 ++++++++++++++++ lib/components/bar_group.js | 121 +++++++++++++++++ lib/components/bar_group_horizontal.js | 127 ++++++++++++++++++ lib/components/bar_horizontal.js | 108 +++++++++++++++ lib/components/bar_stack.js | 169 +++++++++++++++++++++++ lib/components/bar_stack_horizontal.js | 168 +++++++++++++++++++++++ lib/components/blank_chart.js | 106 +++++++++++++++ lib/components/brush.js | 137 +++++++++++++++++++ lib/components/line.js | 101 ++++++++++++++ lib/components/multi_line_brush.js | 151 +++++++++++++++++++++ lib/components/pie.js | 179 +++++++++++++++++++++++++ lib/components/scatter.js | 117 ++++++++++++++++ lib/index.js | 160 ++++++++++++++++++++++ lib/utils/rectangle.js | 82 +++++++++++ lib/utils/series.js | 61 +++++++++ lib/utils/straightLine.js | 82 +++++++++++ 22 files changed, 2535 insertions(+), 1 deletion(-) create mode 100644 lib/chart.js create mode 100644 lib/chartpie.js create mode 100644 lib/commonProps.js create mode 100644 lib/components/area.js create mode 100644 lib/components/area_stack.js create mode 100644 lib/components/bar.js create mode 100644 lib/components/bar_group.js create mode 100644 lib/components/bar_group_horizontal.js create mode 100644 lib/components/bar_horizontal.js create mode 100644 lib/components/bar_stack.js create mode 100644 lib/components/bar_stack_horizontal.js create mode 100644 lib/components/blank_chart.js create mode 100644 lib/components/brush.js create mode 100644 lib/components/line.js create mode 100644 lib/components/multi_line_brush.js create mode 100644 lib/components/pie.js create mode 100644 lib/components/scatter.js create mode 100644 lib/index.js create mode 100644 lib/utils/rectangle.js create mode 100644 lib/utils/series.js create mode 100644 lib/utils/straightLine.js diff --git a/.gitignore b/.gitignore index 0c01323..9de7874 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ .DS_Store node_modules example/dist/ -lib diff --git a/lib/chart.js b/lib/chart.js new file mode 100644 index 0000000..a881e2c --- /dev/null +++ b/lib/chart.js @@ -0,0 +1,167 @@ +"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 _reactD3Core = require('react-d3-core'); + +var _commonProps = require('./commonProps'); + +var _commonProps2 = _interopRequireDefault(_commonProps); + +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 ChartSvg = function (_Component) { + _inherits(ChartSvg, _Component); + + function ChartSvg(props) { + _classCallCheck(this, ChartSvg); + + return _possibleConstructorReturn(this, (ChartSvg.__proto__ || Object.getPrototypeOf(ChartSvg)).call(this, props)); + } + + _createClass(ChartSvg, [{ + key: 'render', + value: function render() { + var _props = this.props, + horizontal = _props.horizontal, + height = _props.height, + width = _props.width, + margins = _props.margins, + xScale = _props.xScale, + yScale = _props.yScale, + xRange = _props.xRange, + yRange = _props.yRange, + xDomain = _props.xDomain, + yDomain = _props.yDomain, + xTicks = _props.xTicks, + yTicks = _props.yTicks, + xTickFormat = _props.xTickFormat, + yTickFormat = _props.yTickFormat, + xBandPaddingInner = _props.xBandPaddingInner, + xBandPaddingOuter = _props.xBandPaddingOuter, + yBandPaddingInner = _props.yBandPaddingInner, + yBandPaddingOuter = _props.yBandPaddingOuter, + xLabel = _props.xLabel, + yLabel = _props.yLabel, + stack = _props.stack, + data = _props.data, + svgClassName = _props.svgClassName, + id = _props.id, + x = _props.x, + y = _props.y; + + + var xRange = xRange || [0, width - margins.left - margins.right]; + var yRange = yRange || [height - margins.top - margins.bottom, 0]; + var xDomain = xDomain || (0, _reactD3Core.xDomainCount)(this.props, stack, horizontal); + var yDomain = yDomain || (0, _reactD3Core.yDomainCount)(this.props, stack, horizontal); + + if (xScale === 'ordinal') xScale = 'band'; + + if (yScale === 'ordinal') yScale = 'band'; + + var newXScale = { + scale: xScale, + range: xRange, + domain: xDomain, + bandPaddingInner: xBandPaddingInner, + bandPaddingOuter: xBandPaddingOuter + }; + + var xScaleSet = (0, _reactD3Core.scale)(newXScale); + + var newYScale = { + scale: yScale, + range: yRange, + domain: yDomain, + bandPaddingInner: yBandPaddingInner, + bandPaddingOuter: yBandPaddingOuter + }; + + var yScaleSet = (0, _reactD3Core.scale)(newYScale); + + var children = _react2.default.Children.map(this.props.children, function (el) { + if (el) { + return _react2.default.cloneElement(el, { + height: height, + width: width, + margins: margins, + xScaleSet: xScaleSet, + yScaleSet: yScaleSet, + xDomain: xDomain, + yDomain: yDomain, + xRange: xRange, + yRange: yRange, + xBandPaddingInner: xBandPaddingInner, + xBandPaddingOuter: xBandPaddingOuter, + yBandPaddingInner: yBandPaddingInner, + yBandPaddingOuter: yBandPaddingOuter, + xScale: xScale, + yScale: yScale, + xTickFormat: xTickFormat, + yTickFormat: yTickFormat, + xTicks: xTicks, + yTicks: yTicks, + xLabel: xLabel, + yLabel: yLabel, + data: data, + x: x, + y: y + }); + } else { + return null; + } + }); + + var t = 'translate(' + margins.left + ', ' + margins.top + ')'; + + return _react2.default.createElement( + 'svg', + { + height: height, + width: width, + className: svgClassName, + id: id, + ref: 'svgContainer' + }, + _react2.default.createElement( + 'g', + { + transform: t + }, + children + ) + ); + } + }]); + + return ChartSvg; +}(_react.Component); + +ChartSvg.defaultProps = _extends({ + svgClassName: 'react-d3-core__container_svg' +}, _commonProps2.default); +ChartSvg.propTypes = { + id: _react.PropTypes.string, + width: _react.PropTypes.number.isRequired, + height: _react.PropTypes.number.isRequired, + margins: _react.PropTypes.object.isRequired, + svgClassName: _react.PropTypes.string.isRequired +}; +exports.default = ChartSvg; \ No newline at end of file diff --git a/lib/chartpie.js b/lib/chartpie.js new file mode 100644 index 0000000..9b9c640 --- /dev/null +++ b/lib/chartpie.js @@ -0,0 +1,93 @@ +"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 _reactD3Core = require('react-d3-core'); + +var _commonProps = require('./commonProps'); + +var _commonProps2 = _interopRequireDefault(_commonProps); + +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 ChartSvg = function (_Component) { + _inherits(ChartSvg, _Component); + + function ChartSvg(props) { + _classCallCheck(this, ChartSvg); + + return _possibleConstructorReturn(this, (ChartSvg.__proto__ || Object.getPrototypeOf(ChartSvg)).call(this, props)); + } + + _createClass(ChartSvg, [{ + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + height = _props.height, + width = _props.width, + margins = _props.margins, + data = _props.data, + svgClassName = _props.svgClassName, + id = _props.id, + name = _props.name, + value = _props.value; + + + var children = _react2.default.Children.map(this.props.children, function (el) { + if (el) return _react2.default.cloneElement(el, _this2.props);else return null; + }); + + var t = 'translate(' + margins.left + ', ' + margins.top + ')'; + + return _react2.default.createElement( + 'svg', + { + height: height, + width: width, + className: svgClassName, + id: id, + ref: 'svgContainer' + }, + _react2.default.createElement( + 'g', + { + transform: t + }, + children + ) + ); + } + }]); + + return ChartSvg; +}(_react.Component); + +ChartSvg.defaultProps = _extends({ + svgClassName: 'react-d3-core__container_svg' +}, _commonProps2.default); +ChartSvg.propTypes = { + id: _react.PropTypes.string, + width: _react.PropTypes.number.isRequired, + height: _react.PropTypes.number.isRequired, + margins: _react.PropTypes.object.isRequired, + svgClassName: _react.PropTypes.string.isRequired +}; +exports.default = ChartSvg; \ No newline at end of file diff --git a/lib/commonProps.js b/lib/commonProps.js new file mode 100644 index 0000000..41cb725 --- /dev/null +++ b/lib/commonProps.js @@ -0,0 +1,39 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.pieProps = undefined; + +var _d3Scale = require('d3-scale'); + +var _d3Scale2 = _interopRequireDefault(_d3Scale); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var width = 960; +var height = 500; +var margins = { top: 80, right: 100, bottom: 80, left: 100 }; + +exports.default = { + width: width, + height: height, + margins: margins, + y: function y(d) { + return +d; + }, + xScale: 'linear', + yScale: 'linear', + showXGrid: true, + showYGrid: true, + showLegend: true +}; +var pieProps = exports.pieProps = { + width: width, + height: height, + margins: margins, + innerRadius: 0, + categoricalColors: _d3Scale2.default.scaleCategory10(), + pieSort: function pieSort() {}, + pieTextShow: true +}; \ No newline at end of file diff --git a/lib/components/area.js b/lib/components/area.js new file mode 100644 index 0000000..4a40e78 --- /dev/null +++ b/lib/components/area.js @@ -0,0 +1,114 @@ +"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 _d3Shape = require('d3-shape'); + +var _d3Shape2 = _interopRequireDefault(_d3Shape); + +var _commonProps = require('../commonProps'); + +var _commonProps2 = _interopRequireDefault(_commonProps); + +var _series = require('../utils/series'); + +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 Area = function (_Component) { + _inherits(Area, _Component); + + function Area(props) { + _classCallCheck(this, Area); + + return _possibleConstructorReturn(this, (Area.__proto__ || Object.getPrototypeOf(Area)).call(this, props)); + } + + _createClass(Area, [{ + key: '_mkArea', + value: function _mkArea() { + var _props = this.props, + areaClassName = _props.areaClassName, + areaOpacity = _props.areaOpacity; + + + var dataset = (0, _series.series)(this.props); + var that = this; + + return _react2.default.createElement( + 'g', + null, + dataset.map(function (area, i) { + return _react2.default.createElement('path', { + className: areaClassName + ' area', + fill: area.color, + d: that._setAxes(area.data), + style: area.style, + key: i + }); + }) + ); + } + }, { + key: '_setAxes', + value: function _setAxes(data) { + var _props2 = this.props, + height = _props2.height, + margins = _props2.margins, + xScaleSet = _props2.xScaleSet, + yScaleSet = _props2.yScaleSet; + + + var area = _d3Shape2.default.area().x(function (d) { + return xScaleSet(d.x); + }).y0(function (d) { + var domain = yScaleSet.domain(); + + if (domain[0] * domain[1] < 0) { + return yScaleSet(0); + } else if (domain[0] * domain[1] >= 0 && domain[0] >= 0) { + return yScaleSet.range()[0]; + } else if (domain[0] * domain[1] >= 0 && domain[0] < 0) { + return yScaleSet.range()[1]; + } + }).y1(function (d) { + return yScaleSet(d.y); + }); + + return area.call(this, data); + } + }, { + key: 'render', + value: function render() { + var area = this._mkArea(); + + return _react2.default.createElement( + 'g', + null, + area + ); + } + }]); + + return Area; +}(_react.Component); + +Area.defaultProps = _extends({ + areaClassName: 'react-d3-basic__area' +}, _commonProps2.default); +exports.default = Area; \ No newline at end of file diff --git a/lib/components/area_stack.js b/lib/components/area_stack.js new file mode 100644 index 0000000..4bcd8a7 --- /dev/null +++ b/lib/components/area_stack.js @@ -0,0 +1,137 @@ +"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); + +var _d3Shape = require('d3-shape'); + +var _d3Shape2 = _interopRequireDefault(_d3Shape); + +var _commonProps = require('../commonProps'); + +var _commonProps2 = _interopRequireDefault(_commonProps); + +var _series = require('../utils/series'); + +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 AreaStack = function (_Component) { + _inherits(AreaStack, _Component); + + function AreaStack(props) { + _classCallCheck(this, AreaStack); + + return _possibleConstructorReturn(this, (AreaStack.__proto__ || Object.getPrototypeOf(AreaStack)).call(this, props)); + } + + _createClass(AreaStack, [{ + key: '_mkStack', + value: function _mkStack() { + var areaClassName = this.props.areaClassName; + + + var dataset = (0, _series.series)(this.props); + + var _setStack = this._setStack(); + var _setAxes = this._setAxes(); + + return _react2.default.createElement( + 'g', + null, + _setStack(dataset).map(function (area) { + return _react2.default.createElement('path', { + className: areaClassName + ' area', + fill: area.color, + d: _setAxes(area.data), + style: area.style + }); + }) + ); + } + }, { + key: '_setStack', + value: function _setStack() { + var chartSeries = this.props.chartSeries; + + + var buildOut = function buildOut(len) { + // baseline for positive and negative bars respectively. + var currentXOffsets = []; + var currentXIndex = 0; + return function (d, y0, y) { + + if (currentXIndex++ % len === 0) { + currentXOffsets = [0, 0]; + } + + if (y >= 0) { + d.y0 = currentXOffsets[1]; + d.y = y; + currentXOffsets[1] += y; + } else { + d.y0 = currentXOffsets[0] + y; + d.y = -y; + currentXOffsets[0] += y; + } + }; + }; + return _d2.default.layout.stack().values(function (d) { + return d.data; + }).out(buildOut(chartSeries.length)); + } + }, { + key: '_setAxes', + value: function _setAxes() { + var _props = this.props, + xScaleSet = _props.xScaleSet, + yScaleSet = _props.yScaleSet; + + + return _d3Shape2.default.area().x(function (d) { + return xScaleSet(d.x); + }).y0(function (d) { + return yScaleSet(d.y0); + }).y1(function (d) { + return yScaleSet(d.y0 + d.y); + }); + } + }, { + key: 'render', + value: function render() { + var area = this._mkStack(); + + return _react2.default.createElement( + 'g', + null, + area + ); + } + }]); + + return AreaStack; +}(_react.Component); + +AreaStack.defaultProps = _extends({ + areaClass: 'react-d3-basics__area_stack', + areaClassName: 'react-d3-basic__area_stack' +}, _commonProps2.default); +exports.default = AreaStack; \ No newline at end of file diff --git a/lib/components/bar.js b/lib/components/bar.js new file mode 100644 index 0000000..3dbe034 --- /dev/null +++ b/lib/components/bar.js @@ -0,0 +1,116 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _series = require('../utils/series'); + +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 Bar = function (_Component) { + _inherits(Bar, _Component); + + function Bar(props) { + _classCallCheck(this, Bar); + + return _possibleConstructorReturn(this, (Bar.__proto__ || Object.getPrototypeOf(Bar)).call(this, props)); + } + + _createClass(Bar, [{ + key: 'triggerOver', + value: function triggerOver(data, e) { + this.props.onMouseOver(e, data); + } + }, { + key: 'triggerOut', + value: function triggerOut(data, e) { + this.props.onMouseOut(e, data); + } + }, { + key: 'triggerClick', + value: function triggerClick(data, e) { + this.props.onClick(e, data); + } + }, { + key: '_mkBar', + value: function _mkBar() { + var _this2 = this; + + var _props = this.props, + height = _props.height, + width = _props.width, + margins = _props.margins, + barClassName = _props.barClassName, + xScaleSet = _props.xScaleSet, + yScaleSet = _props.yScaleSet; + + + var that = this; + var dataset = (0, _series.series)(this.props)[0]; + var domain = yScaleSet.domain(); + var zeroBase; + + if (domain[0] * domain[1] < 0) { + zeroBase = yScaleSet(0); + } else if (domain[0] * domain[1] >= 0 && domain[0] >= 0) { + zeroBase = yScaleSet.range()[0]; + } else if (domain[0] * domain[1] >= 0 && domain[0] < 0) { + zeroBase = yScaleSet.range()[1]; + } + + return _react2.default.createElement( + 'g', + null, + dataset.data.map(function (bar, i) { + return _react2.default.createElement('rect', { + className: barClassName + ' bar', + x: xScaleSet(bar.x) || xScaleSet(bar.x) === 0 ? xScaleSet(bar.x) : -10000, + y: bar.y < 0 ? zeroBase : yScaleSet(bar.y), + width: xScaleSet.bandwidth(), + height: bar.y < domain[0] ? 0 : Math.abs(zeroBase - yScaleSet(bar.y)), + fill: bar._style.color ? bar._style.color : dataset.color, + style: Object.assign({}, dataset.style, bar._style), + onMouseOut: that.triggerOut.bind(_this2, bar), + onMouseOver: that.triggerOver.bind(_this2, bar), + onClick: that.triggerClick.bind(_this2, bar), + key: i + }); + }) + ); + } + }, { + key: 'render', + value: function render() { + var bar = this._mkBar(); + + return _react2.default.createElement( + 'g', + null, + bar + ); + } + }]); + + return Bar; +}(_react.Component); + +Bar.defaultProps = { + onMouseOver: function onMouseOver(d) {}, + onMouseOut: function onMouseOut(d) {}, + onClick: function onClick(d) {}, + barClassName: 'react-d3-basic__bar' +}; +exports.default = Bar; \ No newline at end of file diff --git a/lib/components/bar_group.js b/lib/components/bar_group.js new file mode 100644 index 0000000..8462bd0 --- /dev/null +++ b/lib/components/bar_group.js @@ -0,0 +1,121 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _d3Scale = require('d3-scale'); + +var _d3Scale2 = _interopRequireDefault(_d3Scale); + +var _series = require('../utils/series'); + +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 BarGroup = function (_Component) { + _inherits(BarGroup, _Component); + + function BarGroup(props) { + _classCallCheck(this, BarGroup); + + return _possibleConstructorReturn(this, (BarGroup.__proto__ || Object.getPrototypeOf(BarGroup)).call(this, props)); + } + + _createClass(BarGroup, [{ + key: 'triggerOver', + value: function triggerOver(data, e) { + this.props.onMouseOver(e, data); + } + }, { + key: 'triggerOut', + value: function triggerOut(data, e) { + this.props.onMouseOut(e, data); + } + }, { + key: '_mkBarGroup', + value: function _mkBarGroup(dom) { + var _this2 = this; + + var _props = this.props, + height = _props.height, + margins = _props.margins, + barClassName = _props.barClassName, + xScaleSet = _props.xScaleSet, + yScaleSet = _props.yScaleSet; + + + var that = this; + var dataset = (0, _series.series)(this.props); + var x1 = _d3Scale2.default.scaleBand(); + + // mapping x1, inner x axis + x1.domain(dataset.map(function (d) { + return d.field; + })).range([0, xScaleSet.bandwidth()]).padding(.1).round(true); + + var domain = yScaleSet.domain(); + var zeroBase; + + if (domain[0] * domain[1] < 0) { + zeroBase = yScaleSet(0); + } else if (domain[0] * domain[1] >= 0 && domain[0] >= 0) { + zeroBase = yScaleSet.range()[0]; + } else if (domain[0] * domain[1] >= 0 && domain[0] < 0) { + zeroBase = yScaleSet.range()[1]; + } + + return dataset.map(function (barGroup, i) { + return _react2.default.createElement( + 'g', + { className: 'bargroup', key: i }, + barGroup.data.map(function (bar, j) { + return _react2.default.createElement('rect', { + key: j, + className: barClassName + ' bar', + width: x1.bandwidth(), + x: xScaleSet(bar.x) || xScaleSet(bar.x) === 0 ? xScaleSet(bar.x) + x1.bandwidth() * i : -10000, + y: bar.y < 0 ? zeroBase : yScaleSet(bar.y), + height: bar.y < domain[0] ? 0 : Math.abs(zeroBase - yScaleSet(bar.y)), + fill: barGroup.color, + onMouseOut: that.triggerOut.bind(_this2, bar), + onMouseOver: that.triggerOver.bind(_this2, bar), + style: barGroup.style + }); + }) + ); + }); + } + }, { + key: 'render', + value: function render() { + var bar = this._mkBarGroup(); + + return _react2.default.createElement( + 'g', + null, + bar + ); + } + }]); + + return BarGroup; +}(_react.Component); + +BarGroup.defaultProps = { + onMouseOver: function onMouseOver(d) {}, + onMouseOut: function onMouseOut(d) {}, + barClassName: 'react-d3-basic__bar_group' +}; +exports.default = BarGroup; \ No newline at end of file diff --git a/lib/components/bar_group_horizontal.js b/lib/components/bar_group_horizontal.js new file mode 100644 index 0000000..bf6855b --- /dev/null +++ b/lib/components/bar_group_horizontal.js @@ -0,0 +1,127 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _d3Scale = require('d3-scale'); + +var _d3Scale2 = _interopRequireDefault(_d3Scale); + +var _series = require('../utils/series'); + +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 BarGroupHorizontal = function (_Component) { + _inherits(BarGroupHorizontal, _Component); + + function BarGroupHorizontal(props) { + _classCallCheck(this, BarGroupHorizontal); + + return _possibleConstructorReturn(this, (BarGroupHorizontal.__proto__ || Object.getPrototypeOf(BarGroupHorizontal)).call(this, props)); + } + + _createClass(BarGroupHorizontal, [{ + key: 'triggerOver', + value: function triggerOver(data, e) { + this.props.onMouseOver(e, data); + } + }, { + key: 'triggerOut', + value: function triggerOut(data, e) { + this.props.onMouseOut(e, data); + } + }, { + key: '_mkBarGroup', + value: function _mkBarGroup() { + var _this2 = this; + + var _props = this.props, + height = _props.height, + margins = _props.margins, + barClassName = _props.barClassName, + xScaleSet = _props.xScaleSet, + yScaleSet = _props.yScaleSet, + onMouseOut = _props.onMouseOut, + onMouseOver = _props.onMouseOver; + + + var that = this; + var dataset = (0, _series.series)(this.props, true); + var y1 = _d3Scale2.default.scaleBand(); + + // mapping x1, inner x axis + y1.domain(dataset.map(function (d) { + return d.field; + })).range([0, yScaleSet.bandwidth()]).padding(.1).round(true); + + var domain = xScaleSet.domain(); + var zeroBase; + + if (domain[0] * domain[1] < 0) { + zeroBase = xScaleSet(0); + } else if (domain[0] * domain[1] >= 0 && domain[0] >= 0) { + zeroBase = xScaleSet.range()[0]; + } else if (domain[0] * domain[1] >= 0 && domain[0] < 0) { + zeroBase = xScaleSet.range()[1]; + } + + return _react2.default.createElement( + 'g', + null, + dataset.map(function (barGroup, i) { + return _react2.default.createElement( + 'g', + { className: 'bargroup', key: i }, + barGroup.data.map(function (bar, j) { + return _react2.default.createElement('rect', { + className: barClassName + ' bar', + height: y1.bandwidth(), + y: yScaleSet(bar.y) || yScaleSet(bar.y) === 0 ? yScaleSet(bar.y) + y1.bandwidth() * i : -10000, + x: bar.x > 0 ? zeroBase : zeroBase - Math.abs(zeroBase - xScaleSet(bar.x)), + width: bar.x < domain[0] ? 0 : Math.abs(zeroBase - xScaleSet(bar.x)), + fill: barGroup.color, + onMouseOut: that.triggerOut.bind(_this2, bar), + onMouseOver: that.triggerOver.bind(_this2, bar), + style: barGroup.style, + key: j + }); + }) + ); + }) + ); + } + }, { + key: 'render', + value: function render() { + var bar = this._mkBarGroup(); + + return _react2.default.createElement( + 'g', + null, + bar + ); + } + }]); + + return BarGroupHorizontal; +}(_react.Component); + +BarGroupHorizontal.defaultProps = { + onMouseOver: function onMouseOver(d) {}, + onMouseOut: function onMouseOut(d) {}, + barClassName: 'react-d3-basic__bar_group_horizontal' +}; +exports.default = BarGroupHorizontal; \ No newline at end of file diff --git a/lib/components/bar_horizontal.js b/lib/components/bar_horizontal.js new file mode 100644 index 0000000..dbb16f7 --- /dev/null +++ b/lib/components/bar_horizontal.js @@ -0,0 +1,108 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _series = require('../utils/series'); + +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 BarHorizontal = function (_Component) { + _inherits(BarHorizontal, _Component); + + function BarHorizontal(props) { + _classCallCheck(this, BarHorizontal); + + return _possibleConstructorReturn(this, (BarHorizontal.__proto__ || Object.getPrototypeOf(BarHorizontal)).call(this, props)); + } + + _createClass(BarHorizontal, [{ + key: 'triggerOver', + value: function triggerOver(data, e) { + this.props.onMouseOver(e, data); + } + }, { + key: 'triggerOut', + value: function triggerOut(data, e) { + this.props.onMouseOut(e, data); + } + }, { + key: '_mkBar', + value: function _mkBar(dom) { + var _this2 = this; + + var _props = this.props, + height = _props.height, + margins = _props.margins, + barClassName = _props.barClassName, + xScaleSet = _props.xScaleSet, + yScaleSet = _props.yScaleSet; + + + var that = this; + var dataset = (0, _series.series)(this.props, true)[0]; + var domain = xScaleSet.domain(); + var zeroBase; + + if (domain[0] * domain[1] < 0) { + zeroBase = xScaleSet(0); + } else if (domain[0] * domain[1] >= 0 && domain[0] >= 0) { + zeroBase = xScaleSet.range()[0]; + } else if (domain[0] * domain[1] >= 0 && domain[0] < 0) { + zeroBase = xScaleSet.range()[1]; + } + + return _react2.default.createElement( + 'g', + null, + dataset.data.map(function (bar, i) { + return _react2.default.createElement('rect', { + className: barClassName + ' bar', + y: yScaleSet(bar.y) || yScaleSet(bar.y) === 0 ? yScaleSet(bar.y) : -10000, + x: bar.x > 0 ? zeroBase : zeroBase - Math.abs(zeroBase - xScaleSet(bar.x)), + height: yScaleSet.bandwidth(), + width: bar.x < domain[0] ? 0 : Math.abs(zeroBase - xScaleSet(bar.x)), + fill: bar._style.color ? bar._style.color : dataset.color, + style: Object.assign({}, dataset.style, bar._style), + onMouseOut: that.triggerOut.bind(_this2, bar), + onMouseOver: that.triggerOver.bind(_this2, bar), + key: i + }); + }) + ); + } + }, { + key: 'render', + value: function render() { + var bar = this._mkBar(); + + return _react2.default.createElement( + 'g', + null, + bar + ); + } + }]); + + return BarHorizontal; +}(_react.Component); + +BarHorizontal.defaultProps = { + onMouseOver: function onMouseOver(d) {}, + onMouseOut: function onMouseOut(d) {}, + barClassName: 'react-d3-basic__bar_horizontal' +}; +exports.default = BarHorizontal; \ No newline at end of file diff --git a/lib/components/bar_stack.js b/lib/components/bar_stack.js new file mode 100644 index 0000000..603baf9 --- /dev/null +++ b/lib/components/bar_stack.js @@ -0,0 +1,169 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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); + +var _series = require('../utils/series'); + +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 BarStack = function (_Component) { + _inherits(BarStack, _Component); + + function BarStack(props) { + _classCallCheck(this, BarStack); + + return _possibleConstructorReturn(this, (BarStack.__proto__ || Object.getPrototypeOf(BarStack)).call(this, props)); + } + + _createClass(BarStack, [{ + key: 'triggerOver', + value: function triggerOver(data, e) { + this.props.onMouseOver(e, data); + } + }, { + key: 'triggerOut', + value: function triggerOut(data, e) { + this.props.onMouseOut(e, data); + } + }, { + key: 'triggerClick', + value: function triggerClick(data, e) { + this.props.onClick(e, data); + } + }, { + key: '_mkBarStack', + value: function _mkBarStack() { + var _this2 = this; + + var _props = this.props, + height = _props.height, + margins = _props.margins, + barClassName = _props.barClassName, + xScaleSet = _props.xScaleSet, + yScaleSet = _props.yScaleSet, + barWidth = _props.barWidth; + + + var that = this; + var dataset = (0, _series.series)(this.props); + var _setStack = this._setStack(); + + var domain = yScaleSet.domain(); + var zeroBase; + var barBandWidth; + + if (domain[0] * domain[1] < 0) { + zeroBase = yScaleSet(0); + } else if (domain[0] * domain[1] >= 0 && domain[0] >= 0) { + zeroBase = yScaleSet.range()[0]; + } else if (domain[0] * domain[1] >= 0 && domain[0] < 0) { + zeroBase = yScaleSet.range()[1]; + } + + // user defined barwidth + if (barWidth) { + barBandWidth = barWidth; + } else { + barBandWidth = xScaleSet.bandwidth(); + } + + return _react2.default.createElement( + 'g', + null, + _setStack(dataset).map(function (barGroup, i) { + return _react2.default.createElement( + 'g', + { + key: i, + className: 'barGroup', + fill: barGroup.color, + style: barGroup.style }, + barGroup.data.map(function (bar, j) { + return _react2.default.createElement('rect', { + className: barClassName + ' bar', + width: barBandWidth, + x: xScaleSet(bar.x) || xScaleSet(bar.x) === 0 ? xScaleSet(bar.x) : -10000, + y: yScaleSet(bar.y0 + bar.y), + height: Math.abs(yScaleSet(bar.y) - yScaleSet(0)), + onMouseOut: that.triggerOut.bind(_this2, bar), + onMouseOver: that.triggerOver.bind(_this2, bar), + onClick: that.triggerClick.bind(_this2, bar), + key: j + }); + }) + ); + }) + ); + } + }, { + key: '_setStack', + value: function _setStack() { + var chartSeries = this.props.chartSeries; + + + var buildOut = function buildOut(len) { + // baseline for positive and negative bars respectively. + var currentXOffsets = []; + var currentXIndex = 0; + return function (d, y0, y) { + + if (currentXIndex++ % len === 0) { + currentXOffsets = [0, 0]; + } + + if (y >= 0) { + d.y0 = currentXOffsets[1]; + d.y = y; + currentXOffsets[1] += y; + } else { + d.y0 = currentXOffsets[0] + y; + d.y = -y; + currentXOffsets[0] += y; + } + }; + }; + return _d2.default.layout.stack().values(function (d) { + return d.data; + }).out(buildOut(chartSeries.length)); + } + }, { + key: 'render', + value: function render() { + var bar = this._mkBarStack(); + + return _react2.default.createElement( + 'g', + null, + bar + ); + } + }]); + + return BarStack; +}(_react.Component); + +BarStack.defaultProps = { + onMouseOver: function onMouseOver(d) {}, + onMouseOut: function onMouseOut(d) {}, + onClick: function onClick(d) {}, + barClassName: 'react-d3-basic__bar_stack' +}; +exports.default = BarStack; \ No newline at end of file diff --git a/lib/components/bar_stack_horizontal.js b/lib/components/bar_stack_horizontal.js new file mode 100644 index 0000000..a43e57d --- /dev/null +++ b/lib/components/bar_stack_horizontal.js @@ -0,0 +1,168 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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); + +var _series = require('../utils/series'); + +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 BarStackHorizontal = function (_Component) { + _inherits(BarStackHorizontal, _Component); + + function BarStackHorizontal(props) { + _classCallCheck(this, BarStackHorizontal); + + return _possibleConstructorReturn(this, (BarStackHorizontal.__proto__ || Object.getPrototypeOf(BarStackHorizontal)).call(this, props)); + } + + _createClass(BarStackHorizontal, [{ + key: 'triggerOver', + value: function triggerOver(data, e) { + this.props.onMouseOver(e, data); + } + }, { + key: 'triggerOut', + value: function triggerOut(data, e) { + this.props.onMouseOut(e, data); + } + }, { + key: '_mkBarStack', + value: function _mkBarStack(dom) { + var _this2 = this; + + var _props = this.props, + height = _props.height, + margins = _props.margins, + barClassName = _props.barClassName, + xScaleSet = _props.xScaleSet, + yScaleSet = _props.yScaleSet, + barWidth = _props.barWidth; + + + var that = this; + var dataset = (0, _series.series)(this.props, true); + var _setStack = this._setStack(); + + // make areas + var chart = _d2.default.select(dom).attr("class", "g"); + + var domain = xScaleSet.domain(); + var zeroBase; + var barBandWidth; + + if (domain[0] * domain[1] < 0) { + zeroBase = xScaleSet(0); + } else if (domain[0] * domain[1] >= 0 && domain[0] >= 0) { + zeroBase = xScaleSet.range()[0]; + } else if (domain[0] * domain[1] >= 0 && domain[0] < 0) { + zeroBase = xScaleSet.range()[1]; + } + + // user defined barwidth + if (barWidth) { + barBandWidth = barWidth; + } else { + barBandWidth = yScaleSet.bandwidth(); + } + + return _react2.default.createElement( + 'g', + null, + _setStack(dataset).map(function (barGroup, i) { + return _react2.default.createElement( + 'g', + { + className: 'barGroup', + fill: barGroup.color, + style: barGroup.style, + key: i + }, + barGroup.data.map(function (bar, j) { + return _react2.default.createElement('rect', { + className: barClassName + ' bar', + height: barBandWidth, + y: yScaleSet(bar.y) || yScaleSet(bar.y) === 0 ? yScaleSet(bar.y) : -10000, + x: xScaleSet(bar.x0), + width: Math.abs(xScaleSet(bar.x) - xScaleSet(0)), + onMouseOut: that.triggerOut.bind(_this2, bar), + onMouseOver: that.triggerOver.bind(_this2, bar), + key: j + }); + }) + ); + }) + ); + } + }, { + key: '_setStack', + value: function _setStack() { + var chartSeries = this.props.chartSeries; + + + var buildOut = function buildOut(len) { + // baseline for positive and negative bars respectively. + var currentXOffsets = []; + var currentXIndex = 0; + return function (d, x0, x) { + + if (currentXIndex++ % len === 0) { + currentXOffsets = [0, 0]; + } + + if (x >= 0) { + d.x0 = currentXOffsets[1]; + d.x = x; + currentXOffsets[1] += x; + } else { + d.x0 = currentXOffsets[0] + x; + d.x = -x; + currentXOffsets[0] += x; + } + }; + }; + return _d2.default.layout.stack().values(function (d) { + return d.data; + }).y(function (d) { + return d.x; + }).out(buildOut(chartSeries.length)); + } + }, { + key: 'render', + value: function render() { + var bar = this._mkBarStack(); + + return _react2.default.createElement( + 'g', + null, + bar + ); + } + }]); + + return BarStackHorizontal; +}(_react.Component); + +BarStackHorizontal.defaultProps = { + onMouseOver: function onMouseOver(d) {}, + onMouseOut: function onMouseOut(d) {}, + barClassName: 'react-d3-basic__bar_stack_horizontal' +}; +exports.default = BarStackHorizontal; \ No newline at end of file diff --git a/lib/components/blank_chart.js b/lib/components/blank_chart.js new file mode 100644 index 0000000..114eb18 --- /dev/null +++ b/lib/components/blank_chart.js @@ -0,0 +1,106 @@ +"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 _reactD3Core = require('react-d3-core'); + +var _chart = require('../chart'); + +var _chart2 = _interopRequireDefault(_chart); + +var _straightLine = require('../utils/straightLine'); + +var _straightLine2 = _interopRequireDefault(_straightLine); + +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; } + +/* + Renders blank chart. + User can provide any text to be diplayed on blank chart. +*/ + +var BlankChart = function (_Component) { + _inherits(BlankChart, _Component); + + function BlankChart(props) { + _classCallCheck(this, BlankChart); + + return _possibleConstructorReturn(this, (BlankChart.__proto__ || Object.getPrototypeOf(BlankChart)).call(this, props)); + } + + _createClass(BlankChart, [{ + key: 'renderNoDataTitle', + value: function renderNoDataTitle(x, y, textValue) { + return _react2.default.createElement( + 'g', + null, + _react2.default.createElement( + 'text', + { className: 'chartNoData', x: x, y: y }, + textValue + ) + ); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + width = _props.width, + height = _props.height, + margins = _props.margins, + showXGrid = _props.showXGrid, + showYGrid = _props.showYGrid, + xDomain = _props.xDomain, + noDataTitleText = _props.noDataTitleText, + yTicks = _props.yTicks; + + + var xgrid, ygrid, textXMargin, textYMargin; + + if (showXGrid) xgrid = _react2.default.createElement(_reactD3Core.Xgrid, this.props); + if (showYGrid) ygrid = _react2.default.createElement(_reactD3Core.Ygrid, this.props); + textXMargin = width / 2 - margins.right; + textYMargin = height / 2 - margins.bottom; + + return _react2.default.createElement( + _chart2.default, + _extends({ width: width, height: height }, this.props), + _react2.default.createElement(_straightLine2.default, _extends({ x1: 0 - 20, y1: 0, x2: width - margins.right, y2: 0 }, this.props)), + xgrid, + ygrid, + _react2.default.createElement(_reactD3Core.Xaxis, this.props), + _react2.default.createElement(_reactD3Core.Yaxis, this.props), + _react2.default.createElement(_straightLine2.default, _extends({ x1: 0 - 20, y1: height - margins.top - margins.bottom, x2: width - 100, y2: height - margins.top - margins.bottom }, this.props)), + noDataTitleText ? this.renderNoDataTitle(textXMargin, textYMargin, noDataTitleText) : null + ); + } + }]); + + return BlankChart; +}(_react.Component); + +BlankChart.defaultProps = { + showXGrid: true, + showYGrid: false, + xDomain: [0, 10], // its always good to pass xDomain values for x-axis in case if ther is no data the scale will still have valid values or else it will be default. + yDomain: [0], + yTicks: [0], + noDataTitleText: "" +}; +exports.default = BlankChart; \ No newline at end of file diff --git a/lib/components/brush.js b/lib/components/brush.js new file mode 100644 index 0000000..23525c0 --- /dev/null +++ b/lib/components/brush.js @@ -0,0 +1,137 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _commonProps = require('../commonProps'); + +var _commonProps2 = _interopRequireDefault(_commonProps); + +var _reactD3Core = require('react-d3-core'); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +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; } + +/* + Renders d3 brush and returns new x-axis values depending on brush movements. + This allows brush events to be dealt with at the React level so that every chart can have an attached brush +*/ +var Brush = function (_Component) { + _inherits(Brush, _Component); + + function Brush(props) { + _classCallCheck(this, Brush); + + var _this = _possibleConstructorReturn(this, (Brush.__proto__ || Object.getPrototypeOf(Brush)).call(this, props)); + + _this.state = { + xBrushScaleSet: _this._mkXScale(props) + }; + return _this; + } + + _createClass(Brush, [{ + key: '_mkXScale', + value: function _mkXScale(props) { + var xScale = props.xScale, + xRange = props.xRange, + xDomain = props.xDomain, + xRangeRoundBands = props.xRangeRoundBands; + + + var newXScale = { + scale: xScale, + range: xRange, + domain: xDomain, + rangeRoundBands: xRangeRoundBands + }; + + return (0, _reactD3Core.scale)(newXScale); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + this.state = { + xBrushScaleSet: this._mkXScale(nextProps) + }; + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this._updateBrush(); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this._updateBrush(); + } + }, { + key: '_updateBrush', + value: function _updateBrush() { + var _this2 = this; + + var _state = this.state, + xBrushScaleSet = _state.xBrushScaleSet, + yBrushScaleSet = _state.yBrushScaleSet; + var _props = this.props, + height = _props.height, + margins = _props.margins, + brushExtent = _props.brushExtent, + keepBrushOn = _props.keepBrushOn, + onBrushDomainChange = _props.onBrushDomainChange, + brushStyle = _props.brushStyle; + + // create d3 svg bursh with xDaomin values + + var brush = d3.svg.brush().x(xBrushScaleSet + + // if user wants to keep brush area selected + );if (brushExtent) brush = brush.extent(brushExtent); + + brush = brush.on("brushend", function () { + var newDomain = brush.empty() ? xBrushScaleSet.domain() : brush.extent(); + if (newDomain.length) { + onBrushDomainChange("x", newDomain); + if (!keepBrushOn) d3.select(_reactDom2.default.findDOMNode(_this2.refs.brushRect)).call(brush.clear()); + } + }); + + var brushDom = d3.select(_reactDom2.default.findDOMNode(this.refs.brushRect)).call(brush).selectAll('rect').attr("y", -4).attr("height", height - margins.bottom - margins.top + 3 + + // apply user defined brush style if provided + );if (brushStyle) { + for (var key in brushStyle) { + brushDom.style(key, brushStyle[key]); + } + } else { + brushDom.style('fill', '#DDD').style('fill-opacity', .75).style('shape-rendering', 'crispEdges'); + } + } + }, { + key: 'render', + value: function render() { + return _react2.default.createElement('g', { ref: 'brushRect', className: 'react-d3-basic__brush__rect' }); + } + }]); + + return Brush; +}(_react.Component); + +Brush.defaultProps = _commonProps2.default; +exports.default = Brush; \ No newline at end of file diff --git a/lib/components/line.js b/lib/components/line.js new file mode 100644 index 0000000..bfbc730 --- /dev/null +++ b/lib/components/line.js @@ -0,0 +1,101 @@ +"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 _d3Shape = require('d3-shape'); + +var _d3Shape2 = _interopRequireDefault(_d3Shape); + +var _commonProps = require('../commonProps'); + +var _commonProps2 = _interopRequireDefault(_commonProps); + +var _series = require('../utils/series'); + +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 Line = function (_Component) { + _inherits(Line, _Component); + + function Line(props) { + _classCallCheck(this, Line); + + return _possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).call(this, props)); + } + + _createClass(Line, [{ + key: '_mkLine', + value: function _mkLine(dom) { + var lineClassName = this.props.lineClassName; + + + var dataset = (0, _series.series)(this.props); + var that = this; + + return _react2.default.createElement( + 'g', + null, + dataset.map(function (line, i) { + return _react2.default.createElement('path', { + stroke: line.color, + fill: 'none', + className: lineClassName + ' line', + d: that._setAxes(line.data), + style: line.style, + key: i }); + }) + ); + } + }, { + key: '_setAxes', + value: function _setAxes(data) { + var _props = this.props, + xScaleSet = _props.xScaleSet, + yScaleSet = _props.yScaleSet; + + + var line = _d3Shape2.default.line().x(function (d) { + return xScaleSet(d.x); + }).y(function (d) { + return yScaleSet(d.y); + }); + + return line.call(this, data); + } + }, { + key: 'render', + value: function render() { + var line = this._mkLine(); + + return _react2.default.createElement( + 'g', + null, + line + ); + } + }]); + + return Line; +}(_react.Component); + +Line.defaultProps = _extends({ + interpolate: null, + lineClassName: 'react-d3-basic__line' +}, _commonProps2.default); +exports.default = Line; \ No newline at end of file diff --git a/lib/components/multi_line_brush.js b/lib/components/multi_line_brush.js new file mode 100644 index 0000000..d2fb3ca --- /dev/null +++ b/lib/components/multi_line_brush.js @@ -0,0 +1,151 @@ +"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 _reactD3Core = require('react-d3-core'); + +var _line = require('./line'); + +var _line2 = _interopRequireDefault(_line); + +var _chart = require('../chart'); + +var _chart2 = _interopRequireDefault(_chart); + +var _blank_chart = require('./blank_chart'); + +var _blank_chart2 = _interopRequireDefault(_blank_chart); + +var _area = require('./area'); + +var _area2 = _interopRequireDefault(_area); + +var _brush = require('./brush'); + +var _brush2 = _interopRequireDefault(_brush); + +var _rectangle = require('../utils/rectangle'); + +var _rectangle2 = _interopRequireDefault(_rectangle); + +var _commonProps = require('../commonProps'); + +var _commonProps2 = _interopRequireDefault(_commonProps); + +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; } + +/** + Component that renders multi-line + area chart if there is a data or else blank chart. + Also provides brush (depending on isBrushable value), styling for chart (using svg Rectangle) +**/ + +var MultiLineBrushChart = function (_Component) { + _inherits(MultiLineBrushChart, _Component); + + function MultiLineBrushChart(props) { + _classCallCheck(this, MultiLineBrushChart); + + return _possibleConstructorReturn(this, (MultiLineBrushChart.__proto__ || Object.getPrototypeOf(MultiLineBrushChart)).call(this, props)); + } + + _createClass(MultiLineBrushChart, [{ + key: 'render', + value: function render() { + // if there is no data render Blank chart + if (!(this.props.data && this.props.data.length > 0)) return _react2.default.createElement(_blank_chart2.default, this.props); + + var _props = this.props, + width = _props.width, + height = _props.height, + margins = _props.margins, + data = _props.data, + chartSeries = _props.chartSeries, + showXGrid = _props.showXGrid, + showYGrid = _props.showYGrid, + showLegend = _props.showLegend, + categoricalColors = _props.categoricalColors, + isBrushable = _props.isBrushable, + chartClassName = _props.chartClassName; + + + var xgrid, ygrid; + + /* + Create a separate chartSeries object based on area value and pass it to respective chart components. + Note: chartSeries is an array of objects. + */ + var chartSeriesType = chartSeries.map(function (d, i) { + var series = []; + if (d.area) { + series.push(d); + // area chart + return _react2.default.createElement(_area2.default, { chartSeries: series, key: i }); + } else { + series.push(d); + // simple line chart + return _react2.default.createElement(_line2.default, { chartSeries: series, key: i }); + } + }); + + if (showXGrid) xgrid = _react2.default.createElement(_reactD3Core.Xgrid, this.props); + if (showYGrid) ygrid = _react2.default.createElement(_reactD3Core.Ygrid, this.props); + + return _react2.default.createElement( + 'div', + null, + _react2.default.createElement( + _chart2.default, + _extends({}, this.props, { + width: width, + height: height, + margins: margins, + data: data, + chartSeries: chartSeries }), + chartClassName ? _react2.default.createElement(_rectangle2.default, _extends({}, this.props, { styleClassName: chartClassName })) : null, + isBrushable ? _react2.default.createElement(_brush2.default, this.props) : null, + chartSeriesType, + _react2.default.createElement(_reactD3Core.Xaxis, this.props), + _react2.default.createElement(_reactD3Core.Yaxis, this.props), + xgrid, + ygrid + ), + showLegend ? _react2.default.createElement(_reactD3Core.Legend, _extends({}, this.props, { + width: width, + margins: margins, + chartSeries: chartSeries, + categoricalColors: categoricalColors })) : null + ); + } + }]); + + return MultiLineBrushChart; +}(_react.Component); + +MultiLineBrushChart.defaultProps = _extends({ + showScatter: false, + isBrushable: false +}, _commonProps2.default); +MultiLineBrushChart.propTypes = { + width: _react.PropTypes.number.isRequired, + height: _react.PropTypes.number.isRequired, + margins: _react.PropTypes.object.isRequired, + data: _react.PropTypes.array.isRequired, + chartSeries: _react.PropTypes.array.isRequired +}; +exports.default = MultiLineBrushChart; \ No newline at end of file diff --git a/lib/components/pie.js b/lib/components/pie.js new file mode 100644 index 0000000..ead0ccf --- /dev/null +++ b/lib/components/pie.js @@ -0,0 +1,179 @@ +"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 _d3Shape = require('d3-shape'); + +var _d3Shape2 = _interopRequireDefault(_d3Shape); + +var _commonProps = require('../commonProps'); + +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 Pie = function (_Component) { + _inherits(Pie, _Component); + + function Pie(props) { + _classCallCheck(this, Pie); + + return _possibleConstructorReturn(this, (Pie.__proto__ || Object.getPrototypeOf(Pie)).call(this, props)); + } + + _createClass(Pie, [{ + key: 'triggerOver', + value: function triggerOver(data, e) { + this.props.onMouseOver(e, data); + } + }, { + key: 'triggerOut', + value: function triggerOut(data, e) { + this.props.onMouseOut(e, data); + } + }, { + key: 'mkSeries', + value: function mkSeries() { + var _props = this.props, + data = _props.data, + chartSeries = _props.chartSeries, + value = _props.value, + name = _props.name, + categoricalColors = _props.categoricalColors; + + + var chartSeriesData = chartSeries.map(function (f, i) { + + // set a color if not set + if (!f.color) f.color = categoricalColors(i); + + // set name if not set + if (!f.name) f.name = f.field; + + var val; + + data.forEach(function (d) { + if (name(d) === f.field) val = d; + }); + + return Object.assign(f, { value: value(val) }); + }); + + return chartSeriesData; + } + }, { + key: '_mkPie', + value: function _mkPie() { + var _this2 = this; + + var _props2 = this.props, + width = _props2.width, + height = _props2.height, + innerRadius = _props2.innerRadius, + outerRadius = _props2.outerRadius, + pieSort = _props2.pieSort, + value = _props2.value, + radius = _props2.radius, + pieTextShow = _props2.pieTextShow; + + + var that = this; + var radius = this.props.radius || Math.min(width - 100, height - 100) / 2; + var outerRadius = outerRadius || radius - 10; + var labelr = radius + 10; + + var chartSeriesData = this.mkSeries(); + + var arc = _d3Shape2.default.arc().outerRadius(outerRadius).innerRadius(innerRadius); + + var arcOver = _d3Shape2.default.arc().outerRadius(outerRadius + 10).innerRadius(innerRadius); + + var pie = _d3Shape2.default.pie().sort(function (a, b) { + return pieSort(a.value, b.value); + }).value(function (d) { + return d.value; + }); + + return _react2.default.createElement( + 'g', + { className: 'arc' }, + pie(chartSeriesData).map(function (slice, i) { + var textTransform = function textTransform(d) { + var c = arc.centroid(d), + x = c[0], + y = c[1], + + // pythagorean theorem for hypotenuse + h = Math.sqrt(x * x + y * y); + + return "translate(" + x / h * labelr + ',' + y / h * labelr + ")"; + }; + + var textAnchor = function textAnchor(d) { + return (d.endAngle + d.startAngle) / 2 > Math.PI ? "end" : "start"; + }; + + return _react2.default.createElement( + 'g', + { key: i }, + _react2.default.createElement('path', { + d: arc(slice), + style: _extends({ fill: slice.data.color, stroke: '#FFF' }, slice.data.style), + onMouseOut: that.triggerOut.bind(_this2, slice), + onMouseOver: that.triggerOver.bind(_this2, slice) + }), + pieTextShow ? _react2.default.createElement( + 'text', + { + transform: textTransform(slice), + dy: '.35em', + textAnchor: textAnchor(slice) + }, + slice.data.name + ) : null + ); + }) + ); + } + }, { + key: 'render', + value: function render() { + var _props3 = this.props, + width = _props3.width, + height = _props3.height, + margins = _props3.margins; + + + var t = 'translate(' + (width - margins.left - margins.right) / 2 + ', ' + (height - margins.top - margins.bottom) / 2 + ')'; + var pie = this._mkPie(); + + return _react2.default.createElement( + 'g', + { transform: t }, + pie + ); + } + }]); + + return Pie; +}(_react.Component); + +Pie.defaultProps = _extends({ + onMouseOver: function onMouseOver(d) {}, + onMouseOut: function onMouseOut(d) {} +}, _commonProps.pieProps); +exports.default = Pie; \ No newline at end of file diff --git a/lib/components/scatter.js b/lib/components/scatter.js new file mode 100644 index 0000000..1b80cd3 --- /dev/null +++ b/lib/components/scatter.js @@ -0,0 +1,117 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _d3Shape = require('d3-shape'); + +var _d3Shape2 = _interopRequireDefault(_d3Shape); + +var _series = require('../utils/series'); + +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 Scatter = function (_Component) { + _inherits(Scatter, _Component); + + function Scatter(props) { + _classCallCheck(this, Scatter); + + return _possibleConstructorReturn(this, (Scatter.__proto__ || Object.getPrototypeOf(Scatter)).call(this, props)); + } + + _createClass(Scatter, [{ + key: '_mkScatter', + value: function _mkScatter(dataset) { + var _props = this.props, + scatterClassName = _props.scatterClassName, + defaultSymbol = _props.defaultSymbol, + defaultSymbolSize = _props.defaultSymbolSize, + brushSymbol = _props.brushSymbol, + xScaleSet = _props.xScaleSet, + yScaleSet = _props.yScaleSet; + + // for building symbols in brush, set to circle and size to 4 + + if (brushSymbol) { + symbol = 'circle'; + symbolSize = 4; + } + + return _react2.default.createElement( + 'g', + null, + dataset.map(function (dot) { + var symbol = dot.symbol ? dot.symbol : defaultSymbol; + var symbolSize = dot.symbolSize ? dot.symbolSize : defaultSymbolSize; + + return dot.data.map(function (d) { + var symbolFunc = _d3Shape2.default.symbol().size(symbolSize * symbolSize).type(function () { + console.log(symbol); + + if (symbol === 'circle') { + return _d3Shape2.default.symbolCircle; + } else if (symbol === 'cross') { + return _d3Shape2.default.symbolCross; + } else if (symbol === 'diamond') { + return _d3Shape2.default.symbolDiamond; + } else if (symbol === 'square') { + return _d3Shape2.default.symbolSquare; + } else if (symbol === 'star') { + return _d3Shape2.default.symbolStar; + } else if (symbol === 'triangle') { + return _d3Shape2.default.symbolTriangle; + } else if (symbol === 'wye') { + return _d3Shape2.default.symbolWye; + } else { + console.error('Symbol is not support ' + symbol + '.'); + } + }); + + return _react2.default.createElement('path', { + className: 'react-d3-basic__scatter__path', + fill: d.color, + transform: "translate(" + xScaleSet(d.x) + "," + yScaleSet(d.y) + ")", + d: symbolFunc(), + style: dot.style + }); + }); + }) + ); + } + }, { + key: 'render', + value: function render() { + var d = (0, _series.series)(this.props); + var scatter = this._mkScatter(d); + + return _react2.default.createElement( + 'g', + null, + scatter + ); + } + }]); + + return Scatter; +}(_react.Component); + +Scatter.defaultProps = { + defaultSymbol: 'circle', + defaultSymbolSize: 10, + scatterClassName: 'react-d3-basic__scatter' +}; +exports.default = Scatter; \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000..7cc9082 --- /dev/null +++ b/lib/index.js @@ -0,0 +1,160 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _series = require('./utils/series'); + +Object.defineProperty(exports, 'series', { + enumerable: true, + get: function get() { + return _series.series; + } +}); + +var _chart = require('./chart'); + +Object.defineProperty(exports, 'Chart', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_chart).default; + } +}); + +var _chartpie = require('./chartpie'); + +Object.defineProperty(exports, 'ChartPie', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_chartpie).default; + } +}); + +var _brush = require('./components/brush'); + +Object.defineProperty(exports, 'Brush', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_brush).default; + } +}); + +var _blank_chart = require('./components/blank_chart'); + +Object.defineProperty(exports, 'BlankChart', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_blank_chart).default; + } +}); + +var _line = require('./components/line'); + +Object.defineProperty(exports, 'Line', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_line).default; + } +}); + +var _area = require('./components/area'); + +Object.defineProperty(exports, 'Area', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_area).default; + } +}); + +var _area_stack = require('./components/area_stack'); + +Object.defineProperty(exports, 'AreaStack', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_area_stack).default; + } +}); + +var _bar = require('./components/bar'); + +Object.defineProperty(exports, 'Bar', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_bar).default; + } +}); + +var _bar_horizontal = require('./components/bar_horizontal'); + +Object.defineProperty(exports, 'BarHorizontal', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_bar_horizontal).default; + } +}); + +var _bar_group = require('./components/bar_group'); + +Object.defineProperty(exports, 'BarGroup', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_bar_group).default; + } +}); + +var _bar_group_horizontal = require('./components/bar_group_horizontal'); + +Object.defineProperty(exports, 'BarGroupHorizontal', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_bar_group_horizontal).default; + } +}); + +var _bar_stack = require('./components/bar_stack'); + +Object.defineProperty(exports, 'BarStack', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_bar_stack).default; + } +}); + +var _bar_stack_horizontal = require('./components/bar_stack_horizontal'); + +Object.defineProperty(exports, 'BarStackHorizontal', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_bar_stack_horizontal).default; + } +}); + +var _pie = require('./components/pie'); + +Object.defineProperty(exports, 'Pie', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_pie).default; + } +}); + +var _scatter = require('./components/scatter'); + +Object.defineProperty(exports, 'Scatter', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_scatter).default; + } +}); + +var _multi_line_brush = require('./components/multi_line_brush'); + +Object.defineProperty(exports, 'MultiLineBrushChart', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_multi_line_brush).default; + } +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/lib/utils/rectangle.js b/lib/utils/rectangle.js new file mode 100644 index 0000000..dac1475 --- /dev/null +++ b/lib/utils/rectangle.js @@ -0,0 +1,82 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +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; } + +/* + Renders svg rectangle for given width and height +*/ +var Rect = function (_Component) { + _inherits(Rect, _Component); + + function Rect(props) { + _classCallCheck(this, Rect); + + return _possibleConstructorReturn(this, (Rect.__proto__ || Object.getPrototypeOf(Rect)).call(this, props)); + } + + _createClass(Rect, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.drawRectangle(); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + // rectangle width needs to be updated upon window re-sizing + if (this.rectangle) this.rectangle.attr("width", this.props.width - this.props.margins.left - this.props.margins.right); + } + }, { + key: 'drawRectangle', + value: function drawRectangle() { + var _props = this.props, + width = _props.width, + height = _props.height, + margins = _props.margins, + styleClassName = _props.styleClassName; + + + this.rectangle = d3.select(_reactDom2.default.findDOMNode(this.refs.Rect)).append("rect").attr("x", 0).attr("y", -5).attr("width", width - margins.left - margins.right).attr("height", height - margins.bottom - margins.top + 3).attr("class", styleClassName); + + return this.rectangle; + } + }, { + key: 'render', + value: function render() { + return _react2.default.createElement( + 'g', + { ref: 'Rect', className: 'rectangle' }, + ' ' + ); + } + }]); + + return Rect; +}(_react.Component); + +Rect.propTypes = { + height: _react.PropTypes.number.isRequired, + width: _react.PropTypes.number.isRequired, + margins: _react.PropTypes.object.isRequired, + styleClassName: _react.PropTypes.string.isRequired +}; +exports.default = Rect; \ No newline at end of file diff --git a/lib/utils/series.js b/lib/utils/series.js new file mode 100644 index 0000000..0a22824 --- /dev/null +++ b/lib/utils/series.js @@ -0,0 +1,61 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.series = series; + +var _d = require("d3"); + +var _d2 = _interopRequireDefault(_d); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function series(props, horizontal) { + var data = props.data, + chartSeries = props.chartSeries, + x = props.x, + y = props.y, + categoricalColors = props.categoricalColors; + + + categoricalColors = categoricalColors || _d2.default.scale.category10(); + + var chartSeriesData = chartSeries.map(function (f, i) { + + // set a color if not set + f.color = f.color || categoricalColors(i); + + // set name if not set + f.name = f.name || f.field; + + // mapping throught data set x, y data + var mapping = data.map(function (d) { + if (!d._style) d._style = {}; + + if (!horizontal) { + return { + x: x(d), + y: y(d[f.field]), + color: f.color, + name: f.name, + field: f.field, + _style: d._style + }; + } else { + return { + y: y(d), + x: x(d[f.field]), + color: f.color, + name: f.name, + field: f.field, + _style: d._style + }; + } + }); + + return Object.assign(f, { data: mapping }); + }); + + return chartSeriesData; +} \ No newline at end of file diff --git a/lib/utils/straightLine.js b/lib/utils/straightLine.js new file mode 100644 index 0000000..4e09a00 --- /dev/null +++ b/lib/utils/straightLine.js @@ -0,0 +1,82 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +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; } + +/* + Renders straightline with given x and y coordinates. +*/ +var StraightLine = function (_Component) { + _inherits(StraightLine, _Component); + + function StraightLine(props) { + _classCallCheck(this, StraightLine); + + return _possibleConstructorReturn(this, (StraightLine.__proto__ || Object.getPrototypeOf(StraightLine)).call(this, props)); + } + + _createClass(StraightLine, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.getLine(); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + // line needs to be updated upon window re-sizing + if (this.line) this.line.attr("width", this.props.width - this.props.margins.left - this.props.margins.right); + } + }, { + key: 'getLine', + value: function getLine() { + var _props = this.props, + x1 = _props.x1, + x2 = _props.x2, + y1 = _props.y1, + y2 = _props.y2, + width = _props.width, + height = _props.height; + + + this.line = d3.select(_reactDom2.default.findDOMNode(this.refs.StLine)).append("line").attr("x1", x1).attr("y1", y1).attr("x2", x2).attr("y2", y2); + + return this.line; + } + }, { + key: 'render', + value: function render() { + return _react2.default.createElement( + 'g', + { ref: 'StLine', className: 'straight-line' }, + ' ' + ); + } + }]); + + return StraightLine; +}(_react.Component); + +StraightLine.defaultProps = { + showXGrid: true, + showYGrid: false +}; +exports.default = StraightLine; \ No newline at end of file From cf4beca4b3d1ffa29b4a9d72d9b6c5d40255a540 Mon Sep 17 00:00:00 2001 From: huy Date: Thu, 8 Jun 2017 18:55:51 +0900 Subject: [PATCH 3/4] Change react-d3-core repository to kty1965/react-d3-core. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 69c1254..d6eacaa 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,6 @@ "d3": "^3.5.6", "d3-scale": "^0.6.4", "d3-shape": "^0.5.1", - "react-d3-core": "/Users/huy/Work/dev/react-d3-core" + "react-d3-core": "git+https://github.com/kty1965/react-d3-core.git", } } From 8a3129c61f98a20d7af27551dda66df3f0c37041 Mon Sep 17 00:00:00 2001 From: huy Date: Thu, 8 Jun 2017 18:57:15 +0900 Subject: [PATCH 4/4] Typo error. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d6eacaa..58e1cb8 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,6 @@ "d3": "^3.5.6", "d3-scale": "^0.6.4", "d3-shape": "^0.5.1", - "react-d3-core": "git+https://github.com/kty1965/react-d3-core.git", + "react-d3-core": "git+https://github.com/kty1965/react-d3-core.git" } }