@data-ui/xy-chart/esm/series/LineSeries.js

A package of charts with standard x- and y- axes. https://williaster.github.io/data-ui

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); }

import { color } from '@data-ui/theme';
import { FocusBlurHandler } from '@data-ui/shared';
import { GlyphDot } from '@vx/glyph';
import { LinePath } from '@vx/shape';
import PropTypes from 'prop-types';
import React from 'react';
import { callOrValue, isDefined } from '../utils/chartUtils';
import findClosestDatum from '../utils/findClosestDatum';
import interpolatorLookup from '../utils/interpolatorLookup';
import { interpolationShape, lineSeriesDataShape } from '../utils/propShapes';
import sharedSeriesProps from '../utils/sharedSeriesProps';

var propTypes = _extends({}, sharedSeriesProps, {
  data: lineSeriesDataShape.isRequired,
  interpolation: interpolationShape,
  showPoints: PropTypes.bool,
  stroke: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  strokeDasharray: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  strokeWidth: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  strokeOpacity: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round', 'inherit'])
});

var defaultProps = {
  interpolation: 'monotoneX',
  showPoints: false,
  stroke: color.default,
  strokeDasharray: null,
  strokeWidth: 3,
  strokeOpacity: 1,
  strokeLinecap: 'round'
};

var x = function x(d) {
  return d.x;
};

var y = function y(d) {
  return d.y;
};

var defined = function defined(d) {
  return isDefined(y(d));
};

var noEventsStyles = {
  pointerEvents: 'none'
};

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,
        data = _this$props.data,
        disableMouseEvents = _this$props.disableMouseEvents,
        interpolation = _this$props.interpolation,
        showPoints = _this$props.showPoints,
        stroke = _this$props.stroke,
        strokeDasharray = _this$props.strokeDasharray,
        strokeWidth = _this$props.strokeWidth,
        strokeLinecap = _this$props.strokeLinecap,
        strokeOpacity = _this$props.strokeOpacity,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale,
        margin = _this$props.margin,
        onClick = _this$props.onClick,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave;
    if (!xScale || !yScale) return null;
    var strokeValue = callOrValue(stroke);
    var strokeOpacityValue = callOrValue(strokeOpacity);
    var curve = interpolatorLookup[interpolation] || interpolatorLookup.monotoneX;
    return React.createElement(LinePath, {
      style: disableMouseEvents ? noEventsStyles : null,
      data: data,
      xScale: xScale,
      yScale: yScale,
      x: x,
      y: y,
      stroke: strokeValue,
      strokeWidth: callOrValue(strokeWidth),
      strokeDasharray: callOrValue(strokeDasharray),
      strokeLinecap: strokeLinecap,
      strokeOpacity: strokeOpacityValue,
      curve: curve,
      defined: defined,
      onClick: disableMouseEvents ? null : onClick && function () {
        return function (event) {
          var d = findClosestDatum({
            data: data,
            getX: x,
            event: event,
            xScale: xScale,
            marginLeft: margin.left
          });
          onClick({
            event: event,
            data: data,
            datum: d,
            color: strokeValue
          });
        };
      },
      onMouseMove: disableMouseEvents ? null : onMouseMove && function () {
        return function (event) {
          var d = findClosestDatum({
            data: data,
            getX: x,
            event: event,
            xScale: xScale,
            marginLeft: margin.left
          });
          onMouseMove({
            event: event,
            data: data,
            datum: d,
            color: strokeValue
          });
        };
      },
      onMouseLeave: disableMouseEvents ? null : onMouseLeave && function () {
        return onMouseLeave;
      },
      glyph: function glyph(d, i) {
        return (// <a /> wrapper is needed for focusing with SVG 1.2 regardless of whether we show a point
          isDefined(x(d)) && isDefined(y(d)) && React.createElement(FocusBlurHandler, {
            key: "linepoint-" + i,
            onBlur: disableMouseEvents ? null : onMouseLeave,
            onFocus: disableMouseEvents ? null : function (event) {
              onMouseMove({
                event: event,
                data: data,
                datum: d,
                color: d.stroke || callOrValue(stroke, d, i),
                index: i
              });
            }
          }, showPoints && React.createElement(GlyphDot, {
            key: i + "-" + x(d),
            cx: xScale(x(d)),
            cy: yScale(y(d)),
            r: 4,
            fill: d.stroke || callOrValue(stroke, d, i),
            stroke: "#FFFFFF",
            strokeWidth: 1,
            style: {
              pointerEvents: 'none'
            }
          }, d.label && React.createElement("text", {
            x: xScale(x(d)),
            y: yScale(y(d)),
            dx: 10,
            fill: d.stroke || callOrValue(stroke, d, i),
            stroke: "#fff",
            strokeWidth: 1,
            fontSize: 12
          }, d.label)))
        );
      }
    });
  };

  return LineSeries;
}(React.PureComponent);

export { LineSeries as default };
LineSeries.propTypes = propTypes;
LineSeries.defaultProps = defaultProps;
LineSeries.displayName = 'LineSeries';