lucid-ui/lib/components/DraggableLineChart/examples/02.ExampleWithExternalXAxisRenderProp.js

A UI component library from AppNexus.

import _partial from "lodash/partial";
import _findIndex from "lodash/findIndex";
import _map from "lodash/map";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import createClass from 'create-react-class';
import React, { useCallback } from 'react';
import { DraggableLineChart, TextFieldValidated } from '../../../index';
var initialCustomSpendDataPoints = [{
  x: '12 AM',
  y: 0,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '1 AM',
  y: 1,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '2 AM',
  y: 1.5,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '3 AM',
  y: 2,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '4 AM',
  y: 3.8,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '5 AM',
  y: 3.66,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '6 AM',
  y: 5,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '7 AM',
  y: 10,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '8 AM',
  y: 5,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '9 AM',
  y: 5,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '10 AM',
  y: 5,
  ref: /*#__PURE__*/React.createRef()
}, {
  x: '11 AM',
  y: 5,
  ref: /*#__PURE__*/React.createRef()
}];
var style = {
  paddingTop: '4rem'
};

var DataInput = function DataInput(_ref) {
  var xValue = _ref.xValue,
      yValue = _ref.yValue,
      myRef = _ref.myRef,
      changeHandler = _ref.changeHandler;
  var onChange = useCallback(function (newYValue) {
    changeHandler(newYValue, xValue);
  }, [changeHandler, xValue]);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: '70%',
      margin: 'auto'
    }
  }, /*#__PURE__*/React.createElement(TextFieldValidated, {
    value: yValue || 0,
    onBlur: onChange,
    tabIndex: 0,
    ref: myRef
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      margin: 'auto',
      textAlign: 'center',
      width: '95%',
      marginTop: '15px'
    }
  }, xValue));
};

export default createClass({
  getInitialState: function getInitialState() {
    return {
      customSpendDataPoints: initialCustomSpendDataPoints
    };
  },
  onDragHandler: function onDragHandler(newYValue, xValue, fromOnChangeHandler) {
    var cleanedYValue = fromOnChangeHandler ? newYValue : +Number(newYValue).toFixed(0);

    var newCustomSpendDataPoints = _map(this.state.customSpendDataPoints, function (dataPoint) {
      return dataPoint.x === xValue ? _objectSpread(_objectSpread({}, dataPoint), {}, {
        y: cleanedYValue
      }) : dataPoint;
    });

    this.setState({
      customSpendDataPoints: newCustomSpendDataPoints
    });
    return newCustomSpendDataPoints;
  },
  onChangeHandler: function onChangeHandler(newYValue, xValue) {
    var currentIndex = _findIndex(this.state.customSpendDataPoints, ['x', xValue]);

    var currentYValue = this.state.customSpendDataPoints[currentIndex].y;
    var nextValue = +Number(newYValue).toFixed(0);

    if (currentYValue !== nextValue) {
      var newCustomSpendDataPoints = this.onDragHandler(newYValue, xValue, true);
      var nextIndex = currentIndex >= newCustomSpendDataPoints.length - 1 ? 0 : currentIndex + 1;
      var myRef = newCustomSpendDataPoints[nextIndex].ref;
      setTimeout(function () {
        return myRef.current.focus();
      }, 1);
    }
  },
  getRenderProp: function getRenderProp(_ref2, _ref3) {
    var onChangeHandler = _ref2.onChangeHandler;
    var x = _ref3.x,
        y = _ref3.y,
        ref = _ref3.ref;
    return /*#__PURE__*/React.createElement(DataInput, {
      xValue: x,
      yValue: y,
      myRef: ref,
      changeHandler: onChangeHandler
    });
  },
  render: function render() {
    var customSpendDataPoints = this.state.customSpendDataPoints;

    var renderProp = _partial(this.getRenderProp, {
      onChangeHandler: this.onChangeHandler
    });

    return /*#__PURE__*/React.createElement("div", {
      style: style
    }, /*#__PURE__*/React.createElement(DraggableLineChart, {
      data: customSpendDataPoints,
      width: 900,
      dataIsCentered: true,
      onDragEnd: this.onDragHandler,
      xAxisRenderProp: renderProp
    }));
  }
});