understanding-graphs/src/js/d3/gradient.js

const createGradient = (scales, options) => {

  let x1;
  let x2;
  let y1;
  let y2;
  let m;

  let group;
  let graphGroup;
  let textGroup;

  let leftCircle;
  let rightCircle;
  let gradientLine;

  let textBoxOffset;

  let state = 'inactive';

  const gradient = (selection) => {

    group = selection.append('g');

    graphGroup = group
      .append('g')
      .attr('clip-path', 'url(#mask)')
      .attr('class', 'mod2-gradientangle__connector'); // .attr('class', 'mod2-gradientangle__graph')

    leftCircle = graphGroup.append('circle')
      .attr('class', 'mod2-gradientangle--circle  mod2-gradientangle--circle--left')
      .attr('r', options.radius)
      .attr('fill', options.colors.light);

    rightCircle = graphGroup.append('circle')
      .attr('class', 'mod2-gradientangle--circle  mod2-gradientangle--circle--right')
      .attr('r', options.radius)
      .attr('fill', options.colors.light);

    gradientLine = graphGroup.append('line')
      .attr('class', 'mod2-gradientangle--line')
      .attr('stroke', options.colors.light)
      .attr('stroke-dasharray', '15 3 2 3')
      .attr('stroke-width', 3);

    textGroup = group
      .append('g')
      .attr('class', 'mod2-gradientangle__box');

    textGroup.append('rect')
      .attr('class', 'mod2-gradientangle__rect')
      .attr('y', 12)
      .attr('stroke', options.colors.light)
      .attr('stroke-width', 2)
      .attr('width', options.box.width)
      .attr('height', options.box.height)
      .attr('fill', '#ffffff');

    textGroup.append('text')
      .attr('class', 'mod2-gradientangle__text')
      .attr('y', options.margin.top * 1.5)
      .attr('text-anchor', 'middle')
      .attr('fill', options.colors.light)
      .style('font-weight', 500)
      .attr('transform', `translate(${options.box.width / 2}, 0)`);

    gradient.update(selection);
  };


  gradient.update = () => {

    gradientLine
      .attr('x1', x1)
      .attr('y1', y1)
      .attr('x2', x2)
      .attr('y2', y2);

    leftCircle
      .attr('cx', x1)
      .attr('cy', y1);

    rightCircle
      .attr('cx', x2)
      .attr('cy', y2);

    textBoxOffset = (x2 - x1) / 2 - options.box.width / 2 + x1;
    textGroup
      .attr('transform', `translate(${textBoxOffset}, ${options.box.height / 1.5})`);

    textGroup.select('text')
      .text(m);

    group
      .attr('class', `mod2-gradientangle  mod2-gradientangle--${state}`);
  };


  gradient.x1 = (val) => {
    if (val === undefined) {
      return x1;
    }
    x1 = val;
    return gradient;
  };

  gradient.x2 = (val) => {
    if (val === undefined) {
      return x2;
    }
    x2 = val;
    return gradient;
  };

  gradient.y1 = (val) => {
    if (val === undefined) {
      return y1;
    }
    y1 = val;
    return gradient;
  };

  gradient.y2 = (val) => {
    if (val === undefined) {
      return y2;
    }
    y2 = val;
    return gradient;
  };

  gradient.m = (val) => {
    if (val === undefined) {
      return m;
    }
    m = val;
    return gradient;
  };

  gradient.state = (val) => {
    if (val === undefined) {
      return state;
    }
    state = val;
    return gradient;
  };

  return gradient;
};

export default createGradient;