estimating-trends/src/js/d3/axes.js

import * as d3 from 'd3';

// d3js module: add axes
// call it: addAxes(group, { xScale, yScale }, options);
export default (group, scales, options) => {
  // add stroke styles
  const addStyles = axis => {
    axis.selectAll('path')
      .attr('stroke-width', '2')
      .attr('stroke', options.colors.axis);

    axis.selectAll('line')
      .attr('stroke', options.colors.axis);
  };

  // rotate labels to make them readable
  const rotateLabels = axis => {
    axis.selectAll('text')
      .style('text-anchor', 'end')
      .style('font', '11px sans-serif')
      .attr('dx', '-.8em')
      .attr('dy', '.15em')
      .attr('fill', options.colors.units)
      .attr('transform', 'rotate(-48)');
  };

  // size labels
  const sizeLabels = axis => {
    axis.selectAll('text')
      .attr('fill', options.colors.units)
      .style('font', '11px sans-serif');
  };

  // append x axis unit
  const addUnitX = axis => {
    axis.append('text')
      .attr('transform', `translate(${options.widthWithoutMargin / 2}, ${options.margin.bottom / 2 + 5})`)
      .attr('fill', options.colors.units)
      .style('font', '16px sans-serif')
      .style('text-anchor', 'middle')
      .text(options.xAxisUnit);
  };

  // append y axis unit
  const addUnitY = axis => {
    axis.append('text')
      .attr('transform', 'rotate(-90)')
      .attr('x', 0 - options.heightWithoutMargin / 2)
      .attr('y', 0 - options.margin.left)
      .attr('dy', '1em')
      .attr('fill', options.colors.units)
      .style('font', '16px sans-serif')
      .style('text-anchor', 'middle')
      .text(options.yAxisUnit);
  };

  // add the X Axis
  let addClass = `x-axis  mod${options.module}__x-axis`;

  // module02, grap part
  if (Object.prototype.hasOwnProperty.call(options, 'currentQuestion')) {
    addClass += `  mod${options.module}__x-axis--${options.currentQuestion + 1}`;
  }

  // append x axis
  const xAxis = group.append('g')
    .attr('transform', `translate(0, ${options.heightWithoutMargin})`)
    .attr('class', addClass)
    .call(d3.axisBottom(scales.xScale));

  // add clip path for module 2
  if (options.module === 2) xAxis.attr('clip-path', 'url(#polygonmask)');

  // depending on number of child notes, rotate labels
  if (xAxis.node().childNodes.length > 20) {
    rotateLabels(xAxis);
  } else {
    sizeLabels(xAxis);
  }

  // call methods
  addStyles(xAxis);
  addUnitX(xAxis);

  // add the Y Axis
  const yAxis = group.append('g')
    .attr('class', 'y-axis')
    .call(d3.axisLeft(scales.yScale));

  // call remaining methods
  sizeLabels(yAxis);
  addStyles(yAxis);
  addUnitY(yAxis);

  return { xAxis, yAxis };
};