gsy-component-library
Version:
reusable components from grid singularity
260 lines (219 loc) • 11.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _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('./BarLineChart.' + (process.env.NODE_ENV === 'storybook' ? 'scss' : 'css'));
var Colors = {
bar: 'linear-gradient(-90deg, #B8E986 0%, #688649 100%)',
line: 'linear-gradient(180deg, #00FFB9 0%, #0F7460 100%)'
};
var CustomizedDot = function CustomizedDot(props) {
var cx = props.cx,
cy = props.cy,
stroke = props.stroke,
payload = props.payload,
value = props.value,
active = props.active;
if (value <= 0) {
return null;
}
return _react2.default.createElement(
'g',
null,
_react2.default.createElement('circle', { cx: cx, cy: cy, r: 7.5, fill: '#00FFB9', opacity: 0.3 }),
_react2.default.createElement('circle', { cx: cx, cy: cy, r: active ? 3.5 : 2.5, fill: '#00FFB9' })
);
};
var CustomTooltip = function CustomTooltip(props) {
var active = props.active;
if (active) {
var payload = props.payload,
label = props.label;
return _react2.default.createElement(
'div',
{ className: 'custom-tooltip' },
_react2.default.createElement(
'p',
{ className: 'label' },
payload[0].payload.name + ' : ' + payload[0].payload[payload[0].name]
)
);
}
return null;
};
var BarLineChart = function (_Component) {
_inherits(BarLineChart, _Component);
function BarLineChart() {
_classCallCheck(this, BarLineChart);
return _possibleConstructorReturn(this, (BarLineChart.__proto__ || Object.getPrototypeOf(BarLineChart)).apply(this, arguments));
}
_createClass(BarLineChart, [{
key: 'render',
value: function render() {
var _props = this.props,
className = _props.className,
children = _props.children,
data = _props.data,
label = _props.label,
keys = _props.keys,
showAllXAxis = _props.showAllXAxis,
long = _props.long,
other = _objectWithoutProperties(_props, ['className', 'children', 'data', 'label', 'keys', 'showAllXAxis', 'long']);
var donutChartClasses = (0, _bind2.default)('bar-line-chart', className);
return _react2.default.createElement(
'div',
_extends({ className: donutChartClasses }, other),
_react2.default.createElement(
_reactContainerDimensions2.default,
null,
function (_ref) {
var width = _ref.width,
height = _ref.height;
var baseWidth = width / (long || width > 1000 ? 4 : 2);
var barSize = width / 70 > 10 ? 10 : width / 70;
var verticalEnd = width - 20;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
_recharts.ComposedChart,
{
width: width - 20, height: baseWidth, data: data,
margin: { top: 20 }
},
showAllXAxis && _react2.default.createElement(_recharts.XAxis, {
tick: { stroke: 'white', fontSize: 10 }, opacity: 0.3,
dataKey: 'name'
}),
_react2.default.createElement(_recharts.YAxis, {
tick: { stroke: 'white', fontSize: 10 }, opacity: 0.3,
axisLine: true, tickLine: true, unit: keys.bar ? '%' : '',
width: 30
}),
_react2.default.createElement(_recharts.Tooltip, { content: _react2.default.createElement(CustomTooltip, null), cursor: { strokeWidth: keys.bar ? 0 : 0, stroke: 'rgba(0, 0, 0, 0.1)' } }),
_react2.default.createElement(_recharts.CartesianGrid, {
stroke: '#f5f5f5',
strokeWidth: 0.5,
opacity: 0.3,
verticalPoints: [0, verticalEnd] }),
keys.bar && _react2.default.createElement(_recharts.Bar, { dataKey: keys.bar, barSize: barSize, fill: 'url(#linear-bar)', opacity: 0.6 }),
keys.line && _react2.default.createElement(_recharts.Line, { dataKey: keys.line,
stroke: 'url(#linear-line)',
dot: _react2.default.createElement(CustomizedDot, null),
strokeWidth: 2,
activeDot: _react2.default.createElement(CustomizedDot, { active: true }),
connectNulls: true
}),
_react2.default.createElement(
'defs',
null,
_react2.default.createElement(
'linearGradient',
{ id: 'linear-bar', x1: '0%', y1: '0%', x2: '0', y2: '100%' },
_react2.default.createElement('stop', { offset: '0%', stopColor: '#B8E986' }),
_react2.default.createElement('stop', { offset: '100%', stopColor: '#688649' })
),
_react2.default.createElement(
'linearGradient',
{ id: 'linear-line', x1: '0%', y1: '0%', x2: '0', y2: '100%' },
_react2.default.createElement('stop', { offset: '0%', stopColor: '#00FFB9' }),
_react2.default.createElement('stop', { offset: '100%', stopColor: '#0F7460' })
)
)
),
_react2.default.createElement(
'div',
{ className: 'Title',
style: { width: height, bottom: height * 0.95 }
},
label + (keys.bar ? ' (%)' : '')
)
);
}
),
!showAllXAxis && _react2.default.createElement(
'div',
{ className: 'xAxis' },
_react2.default.createElement(
'div',
{ className: 'AxisLabel' },
data[0].name
),
_react2.default.createElement(
'div',
{ className: 'AxisLabel' },
data[data.length - 1].name
)
),
_react2.default.createElement(
'div',
{ className: 'Colors' },
keys.bar && _react2.default.createElement(
'div',
{ className: 'Color Bar' },
_react2.default.createElement(
'div',
{ className: 'Key' },
capitalizeFirstLetter(keys.bar)
),
_react2.default.createElement('div', { className: 'Back', style: { background: Colors.bar } })
),
keys.line && _react2.default.createElement(
'div',
{ className: 'Color Line' },
_react2.default.createElement(
'div',
{ className: 'Key' },
capitalizeFirstLetter(keys.line)
),
_react2.default.createElement('div', { className: 'Back', style: { background: Colors.line } })
)
)
);
}
}]);
return BarLineChart;
}(_react.Component);
;
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
BarLineChart.propTypes = {
className: _propTypes2.default.string,
data: _propTypes2.default.array,
keys: _propTypes2.default.shape({
bar: _propTypes2.default.string,
line: _propTypes2.default.string
}),
label: _propTypes2.default.string,
showAllXAxis: _propTypes2.default.bool,
long: _propTypes2.default.bool
};
BarLineChart.defaultProps = {
className: '',
data: [{ name: '01 Jan', volumen: 59, preis: 80 }, { name: '02 Jan', volumen: 86, preis: 96 }, { name: '03 Jan', volumen: 97, preis: 78 }, { name: '04 Jan', volumen: 14, preis: 0 }, { name: '05 Jan', volumen: 70, preis: 10 }, { name: '06 Jan', volumen: 60, preis: 68 }, { name: '07 Jan', volumen: 14, preis: 50 }, { name: '08 Jan', volumen: 34, preis: 50 }, { name: '09 Jan', volumen: 44, preis: 65 }, { name: '10 Jan', volumen: 59, preis: 80 }, { name: '11 Jan', volumen: 59, preis: 80 }, { name: '12 Jan', volumen: 86, preis: 96 }, { name: '13 Jan', volumen: 97, preis: 78 }, { name: '14 Jan', volumen: 14, preis: 0 }, { name: '15 Jan', volumen: 70, preis: 10 }, { name: '16 Jan', volumen: 60, preis: 68 }, { name: '17 Jan', volumen: 14, preis: 50 }, { name: '18 Jan', volumen: 34, preis: 50 }, { name: '19 Jan', volumen: 44, preis: 65 }, { name: '20 Jan', volumen: 59, preis: 80 }, { name: '21 Jan', volumen: 59, preis: 80 }, { name: '22 Jan', volumen: 86, preis: 96 }, { name: '23 Jan', volumen: 97, preis: 78 }, { name: '24 Jan', volumen: 14, preis: 0 }, { name: '25 Jan', volumen: 70, preis: 10 }, { name: '26 Jan', volumen: 60, preis: 68 }, { name: '27 Jan', volumen: 14, preis: 50 }, { name: '28 Jan', volumen: 34, preis: 50 }, { name: '29 Jan', volumen: 44, preis: 65 }],
keys: {
bar: 'volumen'
// line: 'preis',
},
label: 'Handelsvolumen',
showAllXAxis: false,
long: false
};
exports.default = BarLineChart;