gsy-component-library
Version:
reusable components from grid singularity
198 lines (160 loc) • 8.52 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _bind = require('classnames/bind');
var _bind2 = _interopRequireDefault(_bind);
var _reactContainerDimensions = require('react-container-dimensions');
var _reactContainerDimensions2 = _interopRequireDefault(_reactContainerDimensions);
var _recharts = require('recharts');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _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; }
require('./DonutChart.' + (process.env.NODE_ENV === 'storybook' ? 'scss' : 'css'));
var COLORS = ['transparent', '#50E3C2'];
var RADIAN = Math.PI / 180;
var renderCustomizedLabel = function renderCustomizedLabel() {
var both = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
return function (_ref) {
var cx = _ref.cx,
cy = _ref.cy,
midAngle = _ref.midAngle,
innerRadius = _ref.innerRadius,
outerRadius = _ref.outerRadius,
value = _ref.value,
index = _ref.index;
var sin = Math.sin(-RADIAN * midAngle);
var cos = Math.cos(-RADIAN * midAngle);
var dSin = 1 - Math.sin(RADIAN * (450 - midAngle));
var doubleSin = dSin > 0.2 && dSin < 0.6 ? 0.7 : dSin;
var sx = index === 0 ? cx + outerRadius * cos : cx + innerRadius * cos;
var sy = index === 0 ? cy + outerRadius * sin : cy + innerRadius * sin;
var fontSize = (index === 0 ? 18 : 32) * outerRadius / 80;
var mx = index === 0 ? cx - outerRadius * 0.95 : cx + (innerRadius * 0.8 - doubleSin * innerRadius * 0.5) * cos;
var my = index === 0 ? cy - outerRadius * 0.95 : cy + (innerRadius * 0.8 - doubleSin * innerRadius * 0.5) * sin;
var textAnchor = cos >= 0 ? 'start' : 'end';
var textX = index === 0 ? mx - outerRadius * 0.1 + fontSize * 2.3 : cx - fontSize * 1.7;
var textY = index === 0 ? my - outerRadius * 0.05 - fontSize * 0.5 : cy + fontSize / 4;
return _react2.default.createElement(
'g',
null,
both && _react2.default.createElement('path', { d: 'M' + sx + ',' + sy + 'L' + mx + ',' + my, stroke: '#fff', fill: 'none' }),
(both || index !== 0) && _react2.default.createElement(
'text',
{ x: textX, y: textY, textAnchor: textAnchor, fill: '#fff', fontSize: fontSize },
value.toFixed(2),
' %'
)
);
};
};
var DonutChart = function (_Component) {
_inherits(DonutChart, _Component);
function DonutChart() {
var _ref2;
var _temp, _this, _ret;
_classCallCheck(this, DonutChart);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = DonutChart.__proto__ || Object.getPrototypeOf(DonutChart)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
activeIndex: 0
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(DonutChart, [{
key: 'onPieEnter',
value: function onPieEnter(data, index) {
this.setState({
activeIndex: index
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
className = _props.className,
children = _props.children,
data = _props.data,
other = _objectWithoutProperties(_props, ['className', 'children', 'data']);
var donutChartClasses = (0, _bind2.default)('donut-chart', className);
var both = data.length > 1;
var getData = function getData(d) {
if (d.length > 1) return [d[1], d[0]];
return [{ name: '', value: 100 - d[0].value }, d[0]];
};
var pieData = getData(data);
return _react2.default.createElement(
'div',
_extends({ className: donutChartClasses }, other),
_react2.default.createElement(
_reactContainerDimensions2.default,
null,
function (_ref3) {
var width = _ref3.width,
height = _ref3.height;
var w = width > 300 ? 300 : width;
var baseWidth = w / 3;
return _react2.default.createElement(
_recharts.PieChart,
{ width: w, height: w, onMouseEnter: _this2.onPieEnter.bind(_this2) },
_react2.default.createElement('circle', { cx: '50%', cy: '50%', r: baseWidth * 1.06, fill: 'transparent', stroke: 'rgba(255, 255, 255, .15)', strokeWidth: baseWidth * 0.25 }),
_react2.default.createElement('circle', { cx: '50%', cy: '50%', r: baseWidth * 1.06, fill: 'transparent', stroke: 'white', strokeWidth: baseWidth * 0.03 }),
_react2.default.createElement(
_recharts.Pie,
{
data: pieData,
innerRadius: baseWidth * 1.025,
outerRadius: baseWidth * 1.075,
paddingAngle: 0,
label: renderCustomizedLabel(both),
direction: 'ltr',
startAngle: 90,
endAngle: 450,
isAnimationActive: false,
dataKey: 'value'
},
pieData.map(function (entry, index) {
return _react2.default.createElement(_recharts.Cell, { key: index, fill: COLORS[index % COLORS.length], stroke: COLORS[index % COLORS.length] });
})
)
);
}
),
_react2.default.createElement(
'div',
{ className: 'colors' },
[pieData[1], pieData[0]].map(function (item, index) {
return item.name.length > 0 && _react2.default.createElement(
'div',
{ className: 'data-color', key: index },
_react2.default.createElement('div', { className: 'color', style: {
backgroundColor: COLORS[index % COLORS.length] === 'transparent' ? !both ? COLORS[1] : 'white' : COLORS[index % COLORS.length]
} }),
item.name
);
})
)
);
}
}]);
return DonutChart;
}(_react.Component);
;
DonutChart.propTypes = {
className: _propTypes2.default.string,
data: _propTypes2.default.array
};
DonutChart.defaultProps = {
className: '',
data: [{ name: 'Lieferant', value: 75 }, { name: 'Photovoltaik', value: 25 }]
};
exports.default = DonutChart;