rumble-charts/cjs/Dots.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 d3Shape = require('d3-shape');
var colorFunc = require('./helpers/colorFunc.js');
require('d3-ease');
var isFunction = require('./helpers/isFunction.js');
var isString = require('./helpers/isString.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);

var symbolsMap = {
    'circle': d3Shape.symbolCircle,
    'cross': d3Shape.symbolCross,
    'diamond': d3Shape.symbolDiamond,
    'square': d3Shape.symbolSquare,
    'triangle-down': d3Shape.symbolWye,
    'triangle-up': d3Shape.symbolTriangle,
    'star': d3Shape.symbolStar
};
var methods = {
    dots: renderCircle,
    dot: renderCircle,
    circles: renderCircle,
    circle: renderCircle,
    ellipses: renderEllipse,
    ellipse: renderEllipse,
    symbols: renderSymbol,
    symbol: renderSymbol,
    labels: renderLabel,
    label: renderLabel,
    path: renderPath
};
/**
 * Renders dots for your scatter plot.
 */
function Dots(props) {
    var _a;
    var className = props.className, scaleX = props.scaleX, scaleY = props.scaleY, _b = props.colors, colors = _b === void 0 ? colorFunc.defaultSchemeName : _b;
    var x = scaleX.factory(props);
    var y = scaleY.factory(props);
    var rotate = scaleX.swap || scaleY.swap;
    var color = colorFunc.colorFunc(colors);
    return React__default["default"].createElement("g", { className: className, style: props.style, opacity: props.opacity }, (_a = props.series) === null || _a === void 0 ? void 0 : _a.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 });
        return React__default["default"].createElement("g", tslib_es6.__assign({ key: index, className: className && (className + '-series ' + className + '-series-' + index), style: seriesStyle, opacity: series.opacity }, seriesAttributes), series.data.map(function (point, pointIndex) {
            if (rotate) {
                return renderDot(props, color, y(point.y), x(point.x), index, pointIndex, point);
            }
            else {
                return renderDot(props, color, x(point.x), y(point.y), index, pointIndex, point);
            }
        }));
    }));
}
function renderDot(props, color, x, y, seriesIndex, pointIndex, point) {
    var className = props.className, _a = props.dotType, dotType = _a === void 0 ? 'circles' : _a;
    var series = props.series[seriesIndex];
    if ('dotVisible' in props) {
        var dotVisible = value.value(props.dotVisible, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
        if (!dotVisible) {
            return;
        }
    }
    var groupStyle = value.value(props.groupStyle, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var _dotType = value.value([dotType], {
        seriesIndex: seriesIndex,
        pointIndex: pointIndex,
        point: point,
        series: series,
        props: props
    });
    var dotAttributes = value.value(props.dotAttributes, {
        seriesIndex: seriesIndex,
        pointIndex: pointIndex,
        point: point,
        dotType: _dotType,
        series: series,
        props: props
    });
    var dotStyle = value.value([point.style, series.style, props.dotStyle], {
        seriesIndex: seriesIndex,
        pointIndex: pointIndex,
        point: point,
        dotType: _dotType,
        series: series,
        props: props
    });
    var dot;
    if (isFunction.isFunction(props.dotRender)) {
        dot = props.dotRender({ seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, dotStyle: dotStyle, dotAttributes: dotAttributes, props: props, color: color });
    }
    else {
        if (isString.isString(_dotType)) {
            dot = methods[_dotType] &&
                methods[_dotType]({
                    seriesIndex: seriesIndex,
                    pointIndex: pointIndex,
                    point: point,
                    dotStyle: dotStyle,
                    dotAttributes: dotAttributes,
                    props: props,
                    color: color
                });
        }
        else if (Array.isArray(_dotType)) {
            dot = _dotType.map(function (_dotType, key) {
                return methods[_dotType]({
                    key: key,
                    seriesIndex: seriesIndex,
                    pointIndex: pointIndex,
                    point: point,
                    dotStyle: dotStyle,
                    dotAttributes: dotAttributes,
                    props: props,
                    color: color
                });
            });
        }
        else {
            dot = null;
        }
    }
    return React__default["default"].createElement("g", { key: pointIndex, className: className && ("".concat(className, "-dot ").concat(className, "-dot-").concat(pointIndex)), transform: "translate(".concat(x, " ").concat(y, ")"), style: groupStyle }, dot);
}
function renderCircle(_a) {
    var key = _a.key, seriesIndex = _a.seriesIndex, pointIndex = _a.pointIndex, point = _a.point, dotStyle = _a.dotStyle, dotAttributes = _a.dotAttributes, props = _a.props, color = _a.color;
    var className = props.className;
    var series = props.series[seriesIndex];
    var _b = props.circleRadius, circleRadius = _b === void 0 ? 4 : _b;
    var _circleRadius = value.value(circleRadius, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var circleAttributes = value.value(props.circleAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    return React__default["default"].createElement("circle", tslib_es6.__assign({ key: key, className: className && ("".concat(className, "-circle ").concat(className, "-circle-").concat(seriesIndex, "-").concat(pointIndex)), cx: 0, cy: 0, r: _circleRadius, style: dotStyle, fill: point.color || series.color || color(seriesIndex), fillOpacity: point.opacity }, dotAttributes, circleAttributes));
}
function renderEllipse(_a) {
    var key = _a.key, seriesIndex = _a.seriesIndex, pointIndex = _a.pointIndex, point = _a.point, dotStyle = _a.dotStyle, dotAttributes = _a.dotAttributes, props = _a.props, color = _a.color;
    var className = props.className;
    var series = props.series[seriesIndex];
    var _b = props.ellipseRadiusX, ellipseRadiusX = _b === void 0 ? 6 : _b, _c = props.ellipseRadiusY, ellipseRadiusY = _c === void 0 ? 4 : _c;
    var _ellipseRadiusX = value.value(ellipseRadiusX, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var _ellipseRadiusY = value.value(ellipseRadiusY, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var ellipseAttributes = value.value(props.ellipseAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    return React__default["default"].createElement("ellipse", tslib_es6.__assign({ key: key, className: className && (className + '-ellipse ' +
            className + '-ellipse-' + seriesIndex + '-' + pointIndex), cx: 0, cy: 0, rx: _ellipseRadiusX, ry: _ellipseRadiusY, style: dotStyle, fill: point.color || series.color || color(seriesIndex), fillOpacity: point.opacity }, dotAttributes, ellipseAttributes));
}
function renderPath(_a) {
    var key = _a.key, seriesIndex = _a.seriesIndex, pointIndex = _a.pointIndex, point = _a.point, dotStyle = _a.dotStyle, dotAttributes = _a.dotAttributes, props = _a.props, color = _a.color;
    var className = props.className;
    var series = props.series[seriesIndex];
    var path = value.value(props.path, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var pathAttributes = value.value(props.pathAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    return React__default["default"].createElement("path", tslib_es6.__assign({ key: key, className: className && (className + '-path ' + className + '-path-' + seriesIndex + '-' + pointIndex), d: path, style: dotStyle, fill: point.color || series.color || color(seriesIndex), fillOpacity: point.opacity }, dotAttributes, pathAttributes));
}
function renderSymbol(_a) {
    var key = _a.key, seriesIndex = _a.seriesIndex, pointIndex = _a.pointIndex, point = _a.point, dotStyle = _a.dotStyle, dotAttributes = _a.dotAttributes, props = _a.props, color = _a.color;
    var className = props.className;
    var series = props.series[seriesIndex];
    var symbolType = value.value(props.symbolType, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var symbolAttributes = value.value(props.symbolAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var type = isString.isString(symbolType) ? symbolsMap[symbolType] : symbolType;
    return React__default["default"].createElement("path", tslib_es6.__assign({ key: key, className: className && (className + '-symbol ' + className + '-symbol-' + seriesIndex + '-' + pointIndex), d: d3Shape.symbol().type(type)(point, pointIndex), style: dotStyle, fill: point.color || series.color || color(seriesIndex), fillOpacity: point.opacity }, dotAttributes, symbolAttributes));
}
function renderLabel(_a) {
    var key = _a.key, seriesIndex = _a.seriesIndex, pointIndex = _a.pointIndex, point = _a.point, dotStyle = _a.dotStyle, dotAttributes = _a.dotAttributes, props = _a.props, color = _a.color;
    var className = props.className;
    var series = props.series[seriesIndex];
    var label = value.value(props.label, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var labelAttributes = value.value(props.labelAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    return React__default["default"].createElement("text", tslib_es6.__assign({ key: key, className: className && (className + '-label ' + className + '-label-' + seriesIndex + '-' + pointIndex), style: dotStyle, fill: point.color || series.color || color(seriesIndex), fillOpacity: point.opacity }, dotAttributes, labelAttributes), label);
}

exports.Dots = Dots;