@data-ui/sparkline/esm/series/PointSeries.js

React + d3 library for creating sparklines

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/* eslint complexity: 0 */
import PropTypes from 'prop-types';
import React from 'react';
import { extent } from 'd3-array';
import GlyphDot from '@vx/glyph/build/glyphs/Dot';
import Group from '@vx/group/build/Group';
import { color, svgLabel } from '@data-ui/theme';
import Label from '../annotation/Label';
import callOrValue from '../utils/callOrValue';
import defined from '../utils/defined';
import positionLabel from '../utils/positionLabel';
export var propTypes = {
  fill: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  fillOpacity: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  LabelComponent: PropTypes.element,
  labelOffset: PropTypes.number,
  labelPosition: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left'])]),
  onMouseMove: PropTypes.func,
  onMouseLeave: PropTypes.func,
  points: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, // index
  PropTypes.oneOf(['all', 'min', 'max', 'first', 'last'])])),
  size: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  renderLabel: PropTypes.func,
  // (d, i) => node
  stroke: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  strokeWidth: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  // all likely passed by the parent chart
  data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])),
  getX: PropTypes.func,
  getY: PropTypes.func,
  xScale: PropTypes.func,
  yScale: PropTypes.func
};
export var defaultProps = {
  data: [],
  fill: color.default,
  fillOpacity: 1,
  LabelComponent: React.createElement(Label, _extends({}, svgLabel.baseTickLabel, {
    stroke: "#fff"
  })),
  labelOffset: 12,
  labelPosition: 'auto',
  onMouseMove: null,
  onMouseLeave: null,
  getX: null,
  getY: null,
  points: ['min', 'max'],
  renderLabel: null,
  size: 4,
  stroke: '#fff',
  strokeWidth: 2,
  xScale: null,
  yScale: null
};
var ZERO_DELTA = 0.00001;

var PointSeries =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(PointSeries, _React$Component);

  function PointSeries() {
    return _React$Component.apply(this, arguments) || this;
  }

  var _proto = PointSeries.prototype;

  // we define a custom handler because the points prop may be impractible to cache
  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    var _this = this;

    var nonPointsAreEqual = Object.keys(propTypes).every( // eslint-disable-next-line react/destructuring-assignment
    function (prop) {
      return prop === 'points' || _this.props[prop] === nextProps[prop];
    });
    var points = this.props.points;
    var pointsAreEqual = nextProps.points.length === points.length && nextProps.points.every(function (point) {
      return points.indexOf(point) > -1;
    });
    return !(pointsAreEqual && nonPointsAreEqual);
  };

  _proto.render = function render() {
    var _this$props = this.props,
        data = _this$props.data,
        getX = _this$props.getX,
        getY = _this$props.getY,
        fill = _this$props.fill,
        fillOpacity = _this$props.fillOpacity,
        LabelComponent = _this$props.LabelComponent,
        labelOffset = _this$props.labelOffset,
        labelPosition = _this$props.labelPosition,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave,
        points = _this$props.points,
        renderLabel = _this$props.renderLabel,
        size = _this$props.size,
        stroke = _this$props.stroke,
        strokeWidth = _this$props.strokeWidth,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale;
    if (!xScale || !yScale || !getX || !getY || !data.length) return null;
    var showAll = points.includes('all');
    var showMin = points.includes('min');
    var showMax = points.includes('max');
    var showFirst = points.includes('first');
    var showLast = points.includes('last');

    var _extent = extent(data, getY),
        minY = _extent[0],
        maxY = _extent[1];

    var lastIndex = data.length - 1;
    return React.createElement(Group, null, data.map(function (d, i) {
      if (points.indexOf(i) > -1 || showAll || showFirst && i === 0 || showLast && i === lastIndex || showMin && Math.abs(getY(d) - minY) < ZERO_DELTA || showMax && Math.abs(getY(d) - maxY) < ZERO_DELTA) {
        var yVal = getY(d);
        var cx = xScale(getX(d));
        var cy = yScale(yVal);
        var key = cx + "-" + cy + "-" + i;
        var label = renderLabel && renderLabel(yVal, i);
        var prevCy = data[i - 1] ? yScale(getY(data[i - 1])) : null;
        var nextCy = data[i + 1] ? yScale(getY(data[i + 1])) : null;
        var fillValue = callOrValue(d.fill || fill, yVal, i); // position label above a point if either of the surrounding points are lower

        var autoLabelPosition = prevCy !== null && prevCy > cy || nextCy !== null && nextCy > cy ? 'top' : 'bottom';
        return defined(cx) && defined(cy) && React.createElement(GlyphDot, {
          key: key,
          cx: cx,
          cy: cy,
          r: callOrValue(d.size || size, yVal, i),
          fill: fillValue,
          fillOpacity: callOrValue(d.fillOpacity || fillOpacity, yVal, i),
          stroke: callOrValue(d.stroke || stroke, yVal, i),
          strokeWidth: callOrValue(d.strokeWidth || strokeWidth, yVal, i),
          onMouseMove: onMouseMove && function (event) {
            onMouseMove({
              event: event,
              data: data,
              datum: d,
              index: i,
              color: fillValue
            });
          },
          onMouseLeave: onMouseLeave
        }, label && React.cloneElement(LabelComponent, _extends({
          x: cx,
          y: cy
        }, positionLabel(labelPosition === 'auto' ? autoLabelPosition : callOrValue(labelPosition, yVal, i), labelOffset), {
          label: label
        })));
      }

      return null;
    }));
  };

  return PointSeries;
}(React.Component);

PointSeries.propTypes = propTypes;
PointSeries.defaultProps = defaultProps;
PointSeries.displayName = 'PointSeries';
export default PointSeries;