lucid-ui/lib/components/DraggableLineChart/d3-helpers.js

A UI component library from AppNexus.

import _find from "lodash/find";
import _isNil from "lodash/isNil";
import * as d3Array from 'd3-array';
import ReactDOM from 'react-dom';

var getGroup = function getGroup(selection, className) {
  var xAxisGroup = selection.select(".".concat(className));

  if (xAxisGroup.empty()) {
    return selection.append('g').classed(className, true);
  }

  return xAxisGroup;
};

var getGroups = function getGroups(selection, className, dataset) {
  var selectionGroup = selection.selectAll(".".concat(className));

  if (selectionGroup.empty()) {
    var xAxisGroup = selectionGroup.data(dataset).order();
    return xAxisGroup.enter().append('g').classed(className, true);
  }

  return selectionGroup;
};

var getTickObj = function getTickObj(selection) {
  var data = selection.selectAll('.innerDiv');

  if (data.empty()) {
    data = selection.selectAll('foreignObject').append('xhtml:div').attr('tabindex', 0).style('position', 'fixed').style('transform', 'translate(0px, -50px)').classed('innerDiv', true);
  }

  return data;
};

var getTickRender = function getTickRender(selection, containerWidth) {
  var tickRender = selection.selectAll('.tickRender');

  if (!tickRender.empty()) {
    tickRender.remove();
  }

  return selection.append('xhtml:div').style('width', "".concat(containerWidth, "px")).attr('id', function (d) {
    return d;
  }).classed('tickRender', true);
};

var getLines = function getLines(selection, xScale, tickSize) {
  var lines = selection.selectAll('line');

  if (lines.empty()) {
    return selection.append('line').attr('x1', 0).attr('x2', 0).attr('y1', 0).attr('y2', -tickSize || 5);
  }

  return lines;
};

var getForeignObject = function getForeignObject(selection) {
  var fO = selection.selectAll('foreignObject');

  if (fO.empty()) {
    return selection.append('foreignObject').style('overflow', 'visible').style('display', 'flex').attr('x', 0).attr('y', 0).attr('height', 1).attr('width', 1);
  }

  return fO;
};

var lucidXAxis = function lucidXAxis(selection, _ref) {
  var xScale = _ref.xScale,
      tickSize = _ref.tickSize,
      xAxisRenderProp = _ref.xAxisRenderProp,
      dataIsCentered = _ref.dataIsCentered,
      data = _ref.data;
  var range = xScale.range();
  var domain = xScale.domain();
  var rMin = Number(d3Array.min(range)) || 0;
  var rMax = Number(d3Array.max(range)) || 0;
  var domainLength = dataIsCentered ? domain.length - 1 : domain.length;
  var axisGroup = getGroup(selection, 'axis');
  axisGroup.append('line').attr('stroke', 'black').attr('x1', rMin).attr('x2', rMax).attr('y1', 0).attr('y2', 0);
  axisGroup.append('line').attr('stroke', 'black').attr('x1', rMin).attr('x2', rMax).attr('y1', -tickSize).attr('y2', -tickSize);
  var xLines = getGroups(axisGroup, 'xLines', domain);
  var xLine = xLines.attr('transform', function (d) {
    return "translate( ".concat(xScale(d), ", 0)");
  });
  getLines(xLine, xScale, tickSize);
  getForeignObject(xLine);

  if (!xAxisRenderProp) {
    xLine.append('text').text(function (d) {
      return d;
    });
  } else {
    var tickObj = getTickObj(xLine);
    var tickRender = getTickRender(tickObj, (rMax - rMin) / domainLength);
    tickRender.html(function (xValue, num, node) {
      if (xValue !== '' && !_isNil(xValue)) {
        var subData = _find(data, {
          x: xValue
        }) || {
          y: 0,
          ref: undefined
        };
        ReactDOM.render(xAxisRenderProp({
          x: xValue,
          y: subData.y,
          ref: subData.ref
        }), node[0]);
      } else return xValue;
    });
  }
};

export { lucidXAxis, getGroup };