rumble-charts/es/Bars.js

Truly declarative React charts components

import { __assign } from './external/tslib/tslib.es6.js';
import React, { useMemo } from 'react';
import { colorFunc, defaultSchemeName } from './helpers/colorFunc.js';
import 'd3-shape';
import 'd3-ease';
import { normalizeNumber } from './helpers/normalizeNumber.js';
import { value } from './helpers/value.js';

/**
 * Renders bars for your bar chart.
 */
function Bars(props) {
    var _a;
    var className = props.className, style = props.style, _b = props.colors, colors = _b === void 0 ? defaultSchemeName : _b, opacity = props.opacity;
    var x = props.scaleX.factory(props);
    var y = props.scaleY.factory(props);
    var domainX = x.domain();
    var naturalDirection = domainX[1] > domainX[0];
    if (domainX[0] === props.minX || domainX[0] === props.maxX) {
        x.domain([domainX[0] + (naturalDirection ? -0.5 : 0.5), domainX[1]]);
        domainX = x.domain();
    }
    if (domainX[1] === props.minX || domainX[1] === props.maxX) {
        x.domain([domainX[0], domainX[1] + (naturalDirection ? 0.5 : -0.5)]);
    }
    var baseWidth = Math.abs(x(1) - x(0));
    var _y0 = y(0);
    var color = colorFunc(colors);
    var _c = useMemo(function () {
        var _a = props.innerPadding, innerPadding = _a === void 0 ? 0 : _a, _b = props.groupPadding, groupPadding = _b === void 0 ? 0 : _b;
        return {
            innerPadding: normalizeNumber(value(innerPadding, props), props.layerWidth),
            groupPadding: normalizeNumber(value(groupPadding, props), props.layerWidth)
        };
    }, [props.innerPadding, props.groupPadding, props.layerWidth]), innerPadding = _c.innerPadding, groupPadding = _c.groupPadding;
    var barWidth = useMemo(function () {
        if (props.barWidth) {
            return normalizeNumber(value(props.barWidth, props), props.layerWidth);
        }
        else {
            if (props.combined) {
                return baseWidth - innerPadding;
            }
            else {
                return (baseWidth - groupPadding) / (props.series || []).length - innerPadding;
            }
        }
    }, [
        props.barWidth, props.layerWidth, innerPadding, groupPadding,
        props.combined, (props.series || []).length, baseWidth
    ]);
    var renderBar = function (x, y, width, height, seriesIndex, pointIndex, point) {
        var series = props.series[seriesIndex];
        if ('barVisible' in props) {
            var barVisible = value(props.barVisible, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
            if (!barVisible) {
                return;
            }
        }
        var groupStyle = value(props.groupStyle, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
        var d = (props.scaleX.swap || props.scaleY.swap) ?
            ('M0,' + (-height / 2) + ' h' + (width) + ' v' + height + ' h' + (-width) + ' Z') :
            ('M' + (-width / 2) + ',0 v' + height + ' h' + width + ' v' + (-height) + ' Z');
        var barAttributes = value(props.barAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
        var barStyle = value([point.style, series.style, props.barStyle], {
            seriesIndex: seriesIndex,
            pointIndex: pointIndex,
            point: point,
            series: series,
            props: props
        });
        return React.createElement("g", { key: pointIndex, className: className && (className + '-bar ' + className + '-bar-' + pointIndex), transform: 'translate(' + x + ' ' + y + ')', style: groupStyle },
            React.createElement("path", __assign({ style: barStyle, fill: point.color || series.color || color(seriesIndex), fillOpacity: point.opacity, d: d }, barAttributes)));
    };
    var renderSeries = 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 deltaX = 0;
        if (!props.combined) {
            deltaX = barWidth * index -
                (props.series.length - 1) * 0.5 * barWidth +
                (index - (props.series.length - 1) / 2) * innerPadding;
        }
        return React.createElement("g", __assign({ key: index, className: className && (className + '-series ' + className + '-series-' + index), opacity: series.opacity, style: seriesStyle }, seriesAttributes), series && series.data.map(function (point, pointIndex) {
            var y0 = point.y0 ? y(point.y0) : _y0;
            var y1 = y(point.y);
            var x1 = x(point.x) + deltaX * (props.scaleX.direction || 1);
            if (props.scaleX.swap || props.scaleY.swap) {
                return renderBar(y1, x1, y0 - y1, barWidth, index, pointIndex, point);
            }
            else {
                return renderBar(x1, y1, barWidth, y0 - y1, index, pointIndex, point);
            }
        }));
    };
    return (React.createElement("g", { className: className, style: style, opacity: opacity }, (_a = props.series) === null || _a === void 0 ? void 0 : _a.map(renderSeries)));
}

export { Bars };