JSFiddle - React, Tailwind, and code Playground

by b_g_v

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<div id="container" style="height: 400px"></div>
<button id="update">Update</button>

JavaScript

const prepareSeries = (series) => {
  const seriesLength = _.size(series);
  /* eslint-disable no-magic-numbers */
  const halfLength = _.floor(seriesLength / 2);
  const isEven = seriesLength % 2 === 0;
  /* eslint-enable no-magic-numbers */

  const middleSeries = [];

  middleSeries.push(
    _.get(series, `[${halfLength}]`),
  );

  if (isEven) {
    middleSeries.splice(
      0, 0,
      _.get(series, `[${halfLength - 1}]`),
    );
  }

  /* eslint-disable-next-line newline-after-var */
  let leftSeries;
  let rightSeries;

  if (isEven) {
    leftSeries = series.slice(0, halfLength - 1);
    rightSeries = series.slice(halfLength + 1);
  } else {
    leftSeries = series.slice(0, halfLength);
    rightSeries = series.slice(halfLength + 1);
  }

  return {
    left: leftSeries,
    right: _.reverse(rightSeries),
    middle: middleSeries,
  };
};

const moveMiddle = (middle, pointWidth) => {
  if (_.size(middle) === 1) {
    return;
  }

  _.forEach(
    _.get(middle, [
      '0', 'data',
    ]),
    /* eslint-disable-next-line max-statements */
    (point, idx) => {
      const fPointXPath = [
        'graphic', 'element', 'x', 'baseVal', 'value',
      ];
      const sPointXPath = [
        '1', 'data', idx, 'graphic', 'element', 'x', 'baseVal', 'value',
      ];
      const fPointX = _.get(point, fPointXPath);
      const sPointX = _.get(middle, sPointXPath);
      const distance = Math.abs(sPointX - fPointX);

      if (distance <= pointWidth) {
        return;
      }

      /* eslint-disable no-magic-numbers */
      const distanceToMove = _.floor(distance / 2);
      const distanceRest = distance % 2;
      const halfPointWidth = _.floor(pointWidth / 2);
      /* eslint-enable no-magic-numbers */

      _.set(point, fPointXPath, fPointX + distanceToMove - halfPointWidth);
      _.set(middle, sPointXPath, sPointX - distanceToMove - distanceRest + halfPointWidth);
    },
  );
};

const moveSide = (side, middle, pointWidth, isLeft = true) => {
  const...