rumble-charts/es/RadialLines.js

Truly declarative React charts components

import { __assign } from './external/tslib/tslib.es6.js';
import React from 'react';
import { scaleLinear } from 'd3-scale';
import { areaRadial, lineRadial } from 'd3-shape';
import { colorFunc, defaultSchemeName } from './helpers/colorFunc.js';
import { curves } from './helpers/curves.js';
import 'd3-ease';
import { getCoords } from './helpers/getCoords.js';
import { isNumber } from './helpers/isNumber.js';
import { isString } from './helpers/isString.js';
import { normalizeNumber } from './helpers/normalizeNumber.js';
import { value } from './helpers/value.js';

/**
 * 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 ? 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(innerRadius, _outerRadius);
    var radialScale = scaleLinear()
        .range([_innerRadius, _outerRadius])
        .domain(props.scaleY.direction >= 0 ? [minY, maxY] : [maxY, minY]);
    var circularScale = 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(position || '', layerWidth, layerHeight, _outerRadius * 2, _outerRadius * 2);
    var color = colorFunc(colors);
    return React.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(props.seriesVisible, { seriesIndex: index, series: series, props: props });
            if (!seriesVisible) {
                return;
            }
        }
        var seriesAttributes = value(props.seriesAttributes, { seriesIndex: index, series: series, props: props });
        var seriesStyle = value(props.seriesStyle, { seriesIndex: index, series: series, props: props });
        var linePath;
        var lineVisible = !('lineVisible' in props)
            || value(props.lineVisible, { seriesIndex: index, series: series, props: props });
        if (lineVisible) {
            var line = asAreas ?
                areaRadial()
                    .innerRadius(function (point) { return point.y0 ? radialScale(point.y0) : _radius0; })
                    .outerRadius(function (point) { return radialScale(point.y); }) :
                lineRadial()
                    .radius(function (point) { return radialScale(point.y); });
            var lineColor = series.color || color(index);
            var curve = isString(interpolation) ? curves[interpolation] : interpolation;
            line.angle(function (point) { return circularScale(point.x); })
                .defined(function (point) { return isNumber(point.y); })
                .curve(curve);
            var lineAttributes = value(props.lineAttributes, { seriesIndex: index, series: series, props: props });
            var lineStyle = value([series.style, props.lineStyle], { seriesIndex: index, series: series, props: props });
            var _lineWidth = value(lineWidth, { seriesIndex: index, series: series, props: props });
            linePath = React.createElement("path", __assign({ style: lineStyle, fill: asAreas ? lineColor : 'transparent', stroke: asAreas ? 'transparent' : lineColor, strokeWidth: _lineWidth, d: line(series.data) }, lineAttributes));
        }
        return React.createElement("g", __assign({ key: index, className: className && ("".concat(className, "-series ").concat(className, "-series-").concat(index)), style: seriesStyle, opacity: series.opacity }, seriesAttributes), linePath);
    }));
}

export { RadialLines };