rumble-charts/cjs/RadialLines.js

Truly declarative React charts components

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('./external/tslib/tslib.es6.js');
var React = require('react');
var d3Scale = require('d3-scale');
var d3Shape = require('d3-shape');
var colorFunc = require('./helpers/colorFunc.js');
var curves = require('./helpers/curves.js');
require('d3-ease');
var getCoords = require('./helpers/getCoords.js');
var isNumber = require('./helpers/isNumber.js');
var isString = require('./helpers/isString.js');
var normalizeNumber = require('./helpers/normalizeNumber.js');
var value = require('./helpers/value.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

/**
 * Renders radial lines for your radar chart
 */
function RadialLines(props) {
    var className = props.className, style = props.style, asAreas = props.asAreas, _a = props.colors, colors = _a === void 0 ? colorFunc.defaultSchemeName : _a, minX = props.minX, maxX = props.maxX, minY = props.minY, maxY = props.maxY, _b = props.position, position = _b === void 0 ? 'center middle' : _b, layerWidth = props.layerWidth, layerHeight = props.layerHeight, opacity = props.opacity, series = props.series, _c = props.interpolation, interpolation = _c === void 0 ? 'cardinal-closed' : _c, _d = props.startAngle, startAngle = _d === void 0 ? 0 : _d, _e = props.endAngle, endAngle = _e === void 0 ? 2 * Math.PI : _e, _f = props.lineWidth, lineWidth = _f === void 0 ? 3 : _f, _g = props.innerRadius, innerRadius = _g === void 0 ? 0 : _g;
    var _outerRadius = Math.min(props.layerWidth, props.layerHeight) / 2;
    var _innerRadius = normalizeNumber.normalizeNumber(innerRadius, _outerRadius);
    var radialScale = d3Scale.scaleLinear()
        .range([_innerRadius, _outerRadius])
        .domain(props.scaleY.direction >= 0 ? [minY, maxY] : [maxY, minY]);
    var circularScale = d3Scale.scaleLinear()
        .range([startAngle, endAngle])
        .domain(props.scaleX.direction >= 0 ? [minX - 0.5, maxX + 0.5] : [maxX + 0.5, minX - 0.5]);
    var _radius0 = radialScale(0);
    var coords = getCoords.getCoords(position || '', layerWidth, layerHeight, _outerRadius * 2, _outerRadius * 2);
    var color = colorFunc.colorFunc(colors);
    return React__default["default"].createElement("g", { className: className, style: style, transform: 'translate(' + (coords.x + _outerRadius) + ' ' + (coords.y + _outerRadius) + ')', opacity: opacity }, series === null || series === void 0 ? void 0 : series.map(function (series, index) {
        if ('seriesVisible' in props) {
            var seriesVisible = value.value(props.seriesVisible, { seriesIndex: index, series: series, props: props });
            if (!seriesVisible) {
                return;
            }
        }
        var seriesAttributes = value.value(props.seriesAttributes, { seriesIndex: index, series: series, props: props });
        var seriesStyle = value.value(props.seriesStyle, { seriesIndex: index, series: series, props: props });
        var linePath;
        var lineVisible = !('lineVisible' in props)
            || value.value(props.lineVisible, { seriesIndex: index, series: series, props: props });
        if (lineVisible) {
            var line = asAreas ?
                d3Shape.areaRadial()
                    .innerRadius(function (point) { return point.y0 ? radialScale(point.y0) : _radius0; })
                    .outerRadius(function (point) { return radialScale(point.y); }) :
                d3Shape.lineRadial()
                    .radius(function (point) { return radialScale(point.y); });
            var lineColor = series.color || color(index);
            var curve = isString.isString(interpolation) ? curves.curves[interpolation] : interpolation;
            line.angle(function (point) { return circularScale(point.x); })
                .defined(function (point) { return isNumber.isNumber(point.y); })
                .curve(curve);
            var lineAttributes = value.value(props.lineAttributes, { seriesIndex: index, series: series, props: props });
            var lineStyle = value.value([series.style, props.lineStyle], { seriesIndex: index, series: series, props: props });
            var _lineWidth = value.value(lineWidth, { seriesIndex: index, series: series, props: props });
            linePath = React__default["default"].createElement("path", tslib_es6.__assign({ style: lineStyle, fill: asAreas ? lineColor : 'transparent', stroke: asAreas ? 'transparent' : lineColor, strokeWidth: _lineWidth, d: line(series.data) }, lineAttributes));
        }
        return React__default["default"].createElement("g", tslib_es6.__assign({ key: index, className: className && ("".concat(className, "-series ").concat(className, "-series-").concat(index)), style: seriesStyle, opacity: series.opacity }, seriesAttributes), linePath);
    }));
}

exports.RadialLines = RadialLines;