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

React + d3 library for creating sparklines

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

import PropTypes from 'prop-types';
import React from 'react';
import { curveCardinal, curveLinear, curveBasis, curveMonotoneX } from '@vx/curve';
import Group from '@vx/group/build/Group';
import LinePath from '@vx/shape/build/shapes/LinePath';
import AreaClosed from '@vx/shape/build/shapes/AreaClosed';
import { color } from '@data-ui/theme';
import _defined from '../utils/defined';
import findClosestDatum from '../utils/findClosestDatum';
export var propTypes = {
  curve: PropTypes.oneOf(['linear', 'cardinal', 'basis', 'monotoneX']),
  fill: PropTypes.string,
  fillOpacity: PropTypes.number,
  onMouseMove: PropTypes.func,
  onMouseLeave: PropTypes.func,
  showArea: PropTypes.bool,
  showLine: PropTypes.bool,
  stroke: PropTypes.string,
  strokeDasharray: PropTypes.string,
  strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round', 'inherit']),
  strokeWidth: 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,
  margin: PropTypes.shape({
    top: PropTypes.number,
    right: PropTypes.number,
    bottom: PropTypes.number,
    left: PropTypes.number
  })
};
export var defaultProps = {
  curve: 'monotoneX',
  data: [],
  fill: color.default,
  fillOpacity: 0.3,
  getX: null,
  getY: null,
  onMouseMove: null,
  onMouseLeave: null,
  showArea: false,
  showLine: true,
  stroke: color.default,
  strokeWidth: 2,
  strokeDasharray: null,
  strokeLinecap: 'round',
  xScale: null,
  yScale: null,
  margin: {}
};
var CURVE_LOOKUP = {
  linear: curveLinear,
  basis: curveBasis,
  cardinal: curveCardinal,
  monotoneX: curveMonotoneX
};

var LineSeries =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(LineSeries, _React$PureComponent);

  function LineSeries() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = LineSeries.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        curve = _this$props.curve,
        data = _this$props.data,
        getX = _this$props.getX,
        getY = _this$props.getY,
        fill = _this$props.fill,
        fillOpacity = _this$props.fillOpacity,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave,
        showArea = _this$props.showArea,
        showLine = _this$props.showLine,
        stroke = _this$props.stroke,
        strokeWidth = _this$props.strokeWidth,
        strokeDasharray = _this$props.strokeDasharray,
        strokeLinecap = _this$props.strokeLinecap,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale,
        margin = _this$props.margin;
    if (!xScale || !yScale || !getX || !getY || !data.length) return null;
    var curveFunc = CURVE_LOOKUP[curve];
    return React.createElement(Group, {
      onMouseMove: onMouseMove && function (event) {
        var _findClosestDatum = findClosestDatum({
          data: data,
          getX: getX,
          event: event,
          xScale: xScale,
          marginLeft: margin.left
        }),
            datum = _findClosestDatum.datum,
            index = _findClosestDatum.index;

        onMouseMove({
          event: event,
          data: data,
          datum: datum,
          index: index,
          color: fill
        });
      },
      onMouseLeave: onMouseLeave
    }, showArea && React.createElement(AreaClosed, {
      data: data,
      x: getX,
      y: getY,
      xScale: xScale,
      yScale: yScale,
      fill: fill,
      fillOpacity: fillOpacity,
      stroke: "transparent",
      strokeWidth: strokeWidth,
      curve: curveFunc,
      defined: function defined(d) {
        return _defined(getY(d));
      }
    }), showLine && strokeWidth > 0 && React.createElement(LinePath, {
      data: data,
      x: getX,
      y: getY,
      xScale: xScale,
      yScale: yScale,
      stroke: stroke,
      strokeWidth: strokeWidth,
      strokeDasharray: strokeDasharray,
      strokeLinecap: strokeLinecap,
      curve: curveFunc,
      glyph: null,
      defined: function defined(d) {
        return _defined(getY(d));
      }
    }));
  };

  return LineSeries;
}(React.PureComponent);

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