rumble-charts/es/Lines.js

Truly declarative React charts components

import { __assign } from './external/tslib/tslib.es6.js';
import React from 'react';
import { area, line } from 'd3-shape';
import { colorFunc, defaultSchemeName } from './helpers/colorFunc.js';
import { curves } from './helpers/curves.js';
import 'd3-ease';
import { isString } from './helpers/isString.js';
import { isNumber } from './helpers/isNumber.js';
import { value } from './helpers/value.js';

/**
 * Renders lines for your line chart.
 */
function Lines(props) {
    var className = props.className, style = props.style, scaleX = props.scaleX, scaleY = props.scaleY, minY = props.minY, asAreas = props.asAreas, _a = props.colors, colors = _a === void 0 ? defaultSchemeName : _a, series = props.series, opacity = props.opacity, _b = props.interpolation, interpolation = _b === void 0 ? 'monotone' : _b, _c = props.lineWidth, lineWidth = _c === void 0 ? 3 : _c;
    var rotate = scaleX.swap || scaleY.swap;
    var x = scaleX.factory(props);
    var y = scaleY.factory(props);
    var _y0 = y(minY || 0);
    var color = colorFunc(colors);
    return React.createElement("g", { className: className, style: style, 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 lineVisible = !('lineVisible' in props)
            || value(props.lineVisible, { seriesIndex: index, series: series, props: props });
        var linePath;
        if (lineVisible) {
            var line$1 = void 0;
            if (rotate) {
                line$1 = asAreas ?
                    area()
                        .x0(function (point) { return point.y0 ? y(point.y0) : _y0; })
                        .x1(function (point) { return y(point.y); }) :
                    line()
                        .x(function (point) { return y(point.y); });
                line$1.y(function (point) { return x(point.x); });
            }
            else {
                line$1 = asAreas ?
                    area()
                        .y0(function (point) { return point.y0 ? y(point.y0) : _y0; })
                        .y1(function (point) { return y(point.y); }) :
                    line()
                        .y(function (point) { return y(point.y); });
                line$1.x(function (point) { return x(point.x); });
            }
            var lineColor = series.color || color(index);
            var curve = isString(interpolation) ? curves[interpolation] : interpolation;
            line$1.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$1(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 { Lines };