rumble-charts
Version:
Truly declarative React charts components
75 lines (72 loc) • 5.24 kB
JavaScript
import { __rest, __assign } from './external/tslib/tslib.es6.js';
import React from 'react';
import { scaleLinear } from 'd3-scale';
import './helpers/colorFunc.js';
import 'd3-shape';
import 'd3-ease';
import { isUndefined } from './helpers/isUndefined.js';
import { normalizeNumber } from './helpers/normalizeNumber.js';
import { isNumber } from './helpers/isNumber.js';
import { omitBy } from './helpers/omitBy.js';
import { proxyChildren } from './helpers/proxyChildren.js';
/**
* Every chart should start with `<Chart>` component. It serves to set sizes (`width` and `height`)
* and to wrap all another components:
* - [Graphics](#graphics)
* - [Wrappers](#wrappers)
* - [Helpers](#helpers)
*
* Also read more about [hidden props](#magic--hidden-props).
*/
function Chart(allProps) {
var _a = allProps.series, series = _a === void 0 ? [] : _a, _b = allProps.tag, tag = _b === void 0 ? 'svg' : _b, width = allProps.width, height = allProps.height, _c = allProps.layerWidth, layerWidth = _c === void 0 ? width : _c, _d = allProps.layerHeight, layerHeight = _d === void 0 ? height : _d, _e = allProps.viewBox, viewBox = _e === void 0 ? "0 0 ".concat(layerWidth, " ").concat(layerHeight) : _e, _f = allProps.scaleX, scaleX = _f === void 0 ? {} : _f, _g = allProps.scaleY, scaleY = _g === void 0 ? {} : _g, minX = allProps.minX, minY = allProps.minY, maxX = allProps.maxX, maxY = allProps.maxY, children = allProps.children, props = __rest(allProps, ["series", "tag", "width", "height", "layerWidth", "layerHeight", "viewBox", "scaleX", "scaleY", "minX", "minY", "maxX", "maxY", "children"]);
var _layerWidth = layerWidth;
var _layerHeight = layerHeight;
if (viewBox) {
var viewBoxTotal = viewBox.split(' ').map(function (value) { return parseInt(value); });
_layerWidth = _layerWidth || Number(viewBoxTotal[2]);
_layerHeight = _layerHeight || Number(viewBoxTotal[3]);
}
if (!isNumber(_layerWidth)) {
throw "Props \"width\" (as number), \"layerWidth\" or \"viewBox\" expected for <Chart> component. ".concat(JSON.stringify(_layerWidth), " received instead.");
}
if (!isNumber(_layerHeight)) {
throw "Props \"height\" (as number), \"layerHeight\" or \"viewBox\" expected for <Chart> component. ".concat(JSON.stringify(_layerHeight), " received instead.");
}
var newChildren = proxyChildren(children, omitBy({ series: series, minX: minX, minY: minY, maxX: maxX, maxY: maxY }, isUndefined), {
layerWidth: _layerWidth,
layerHeight: _layerHeight,
scaleX: __assign({ direction: 1, paddingStart: 0.5, paddingEnd: 0.5, paddingLeft: 0, paddingRight: 0, factory: function (_a) {
var _b = _a.layerWidth, layerWidth = _b === void 0 ? 0 : _b, _c = _a.layerHeight, layerHeight = _c === void 0 ? 0 : _c, _d = _a.scaleX, scaleX = _d === void 0 ? {} : _d, _e = _a.minX, minX = _e === void 0 ? 0 : _e, _f = _a.maxX, maxX = _f === void 0 ? 0 : _f;
var _g = scaleX.paddingStart, paddingStart = _g === void 0 ? 0.5 : _g, _h = scaleX.paddingEnd, paddingEnd = _h === void 0 ? 0.5 : _h, _j = scaleX.paddingLeft, paddingLeft = _j === void 0 ? 0 : _j, _k = scaleX.paddingRight, paddingRight = _k === void 0 ? 0 : _k, _l = scaleX.direction, direction = _l === void 0 ? 1 : _l, swap = scaleX.swap;
if (swap) {
layerWidth = layerHeight;
}
minX = minX - paddingStart;
maxX = maxX + paddingEnd;
return scaleLinear()
.range([
normalizeNumber(paddingLeft, layerWidth),
layerWidth - normalizeNumber(paddingRight, layerWidth)
])
.domain(direction >= 0 ? [minX, maxX] : [maxX, minX]);
} }, scaleX),
scaleY: __assign({ direction: 1, paddingStart: 0, paddingEnd: 0, paddingTop: 0, paddingBottom: 0, factory: function (_a) {
var _b = _a.layerWidth, layerWidth = _b === void 0 ? 0 : _b, _c = _a.layerHeight, layerHeight = _c === void 0 ? 0 : _c, _d = _a.scaleY, scaleY = _d === void 0 ? {} : _d, _e = _a.minY, minY = _e === void 0 ? 0 : _e, _f = _a.maxY, maxY = _f === void 0 ? 0 : _f;
var _g = scaleY.paddingStart, paddingStart = _g === void 0 ? 0 : _g, _h = scaleY.paddingEnd, paddingEnd = _h === void 0 ? 0 : _h, _j = scaleY.paddingBottom, paddingBottom = _j === void 0 ? 0 : _j, _k = scaleY.paddingTop, paddingTop = _k === void 0 ? 0 : _k, _l = scaleY.direction, direction = _l === void 0 ? 1 : _l, swap = scaleY.swap;
if (swap) {
layerHeight = layerWidth;
}
minY = minY - paddingStart;
maxY = maxY + paddingEnd;
return scaleLinear()
.range([
layerHeight - normalizeNumber(paddingBottom, layerHeight),
normalizeNumber(paddingTop, layerHeight)
])
.domain(direction >= 0 ? [minY, maxY] : [maxY, minY]);
} }, scaleY)
});
return React.createElement(tag, __assign(__assign({}, props), { width: width, height: height, viewBox: viewBox }), newChildren);
}
export { Chart };