rumble-charts/es/Dots.js

Truly declarative React charts components

import { __assign } from './external/tslib/tslib.es6.js';
import React from 'react';
import { symbol, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolWye, symbolTriangle, symbolStar } from 'd3-shape';
import { colorFunc, defaultSchemeName } from './helpers/colorFunc.js';
import 'd3-ease';
import { isFunction } from './helpers/isFunction.js';
import { isString } from './helpers/isString.js';
import { value } from './helpers/value.js';

var symbolsMap = {
    'circle': symbolCircle,
    'cross': symbolCross,
    'diamond': symbolDiamond,
    'square': symbolSquare,
    'triangle-down': symbolWye,
    'triangle-up': symbolTriangle,
    'star': 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 ? defaultSchemeName : _b;
    var x = scaleX.factory(props);
    var y = scaleY.factory(props);
    var rotate = scaleX.swap || scaleY.swap;
    var color = colorFunc(colors);
    return React.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(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 });
        return React.createElement("g", __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(props.dotVisible, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
        if (!dotVisible) {
            return;
        }
    }
    var groupStyle = value(props.groupStyle, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var _dotType = value([dotType], {
        seriesIndex: seriesIndex,
        pointIndex: pointIndex,
        point: point,
        series: series,
        props: props
    });
    var dotAttributes = value(props.dotAttributes, {
        seriesIndex: seriesIndex,
        pointIndex: pointIndex,
        point: point,
        dotType: _dotType,
        series: series,
        props: props
    });
    var dotStyle = value([point.style, series.style, props.dotStyle], {
        seriesIndex: seriesIndex,
        pointIndex: pointIndex,
        point: point,
        dotType: _dotType,
        series: series,
        props: props
    });
    var dot;
    if (isFunction(props.dotRender)) {
        dot = props.dotRender({ seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, dotStyle: dotStyle, dotAttributes: dotAttributes, props: props, color: color });
    }
    else {
        if (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.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(circleRadius, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var circleAttributes = value(props.circleAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    return React.createElement("circle", __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(ellipseRadiusX, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var _ellipseRadiusY = value(ellipseRadiusY, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var ellipseAttributes = value(props.ellipseAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    return React.createElement("ellipse", __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(props.path, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var pathAttributes = value(props.pathAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    return React.createElement("path", __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(props.symbolType, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var symbolAttributes = value(props.symbolAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var type = isString(symbolType) ? symbolsMap[symbolType] : symbolType;
    return React.createElement("path", __assign({ key: key, className: className && (className + '-symbol ' + className + '-symbol-' + seriesIndex + '-' + pointIndex), d: 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(props.label, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    var labelAttributes = value(props.labelAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
    return React.createElement("text", __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);
}

export { Dots };