path: root/priv/static/js/metricsgraphics/charts/line.js

{
  function mg_line_color_text(elem, line_id, {color, colors}) {
    elem.classed('mg-hover-line-color', color === null)
      .classed(`mg-hover-line${line_id}-color`, colors === null)
      .attr('fill', colors === null ? '' : colors[line_id - 1]);
  }

  function mg_line_graph_generators(args, plot, svg) {
    mg_add_line_generator(args, plot);
    mg_add_area_generator(args, plot);
    mg_add_flat_line_generator(args, plot);
    mg_add_confidence_band_generator(args, plot, svg);
  }

  function mg_add_confidence_band_generator(args, plot, svg) {
    plot.existing_band = svg.selectAll('.mg-confidence-band').nodes();
    if (args.show_confidence_band) {
      plot.confidence_area = d3.area()
        .defined(plot.line.defined())
        .x(args.scalefns.xf)
        .y0(d => {
          const l = args.show_confidence_band[0];
          if (d[l] != undefined) {
            return args.scales.Y(d[l]);
          } else {
            return args.scales.Y(d[args.y_accessor]);
          }
        })
        .y1(d => {
          const u = args.show_confidence_band[1];
          if (d[u] != undefined) {
            return args.scales.Y(d[u]);
          } else {
            return args.scales.Y(d[args.y_accessor]);
          }
        })
        .curve(args.interpolate);
    }
  }

  function mg_add_area_generator({scalefns, scales, interpolate, flip_area_under_y_value}, plot) {

    const areaBaselineValue = (Number.isFinite(flip_area_under_y_value)) ? scales.Y(flip_area_under_y_value) : scales.Y.range()[0];

    plot.area = d3.area()
      .defined(plot.line.defined())
      .x(scalefns.xf)
      .y0(() => {
        return areaBaselineValue;
      })
      .y1(scalefns.yf)
      .curve(interpolate);
  }

  function mg_add_flat_line_generator({y_accessor, scalefns, scales, interpolate}, plot) {
    plot.flat_line = d3.line()
      .defined(d => (d['_missing'] === undefined || d['_missing'] !== true) && d[y_accessor] !== null)
      .x(scalefns.xf)
      .y(() => scales.Y(plot.data_median))
      .curve(interpolate);
  }

  function mg_add_line_generator({scalefns, interpolate, missing_is_zero, y_accessor}, plot) {
    plot.line = d3.line()
      .x(scalefns.xf)
      .y(scalefns.yf)
      .curve(interpolate);

    // if missing_is_zero is not set, then hide data points that fall in missing
    // data ranges or that have been explicitly identified as missing in the
    // data source.
    if (!missing_is_zero) {
      // a line is defined if the _missing attrib is not set to true
      // and the y-accessor is not null
      plot.line = plot.line.defined(d => (d['_missing'] === undefined || d['_missing'] !== true) && d[y_accessor] !== null);
    }
  }

  function mg_add_confidence_band(
    {show_confidence_band, transition_on_update, data, target},
    plot,
    svg,
    which_line
  ) {
    if (show_confidence_band) {
      let confidenceBand;
      if (svg.select(`.mg-confidence-band-${which_line}`).empty()) {
        svg.append('path')
          .attr('class', `mg-confidence-band mg-confidence-band-${which_line}`);
      }

      // transition this line's confidence band
      confidenceBand = svg.select(`.mg-confidence-band-${which_line}`);

      confidenceBand
        .transition()
        .duration(() => (transition_on_update) ? 1000 : 0)
        .attr('d', plot.confidence_area(data[which_line - 1]))
        .attr('clip-path', `url(#mg-plot-window-${mg_target_ref(target)})`);
    }
  }

  function mg_add_area({data, target, colors}, plot, svg, which_line, line_id) {
    const areas = svg.selectAll(`.mg-main-area.mg-area${line_id}`);
    if (plot.display_area) {
      // if area already exists, transition it
      if (!areas.empty()) {
        svg.node().appendChild(areas.node());

        areas.transition()
          .duration(plot.update_transition_duration)
          .attr('d', plot.area(data[which_line]))
          .attr('clip-path', `url(#mg-plot-window-${mg_target_ref(target)})`);
      } else { // otherwise, add the area
        svg.append('path')
          .classed('mg-main-area', true)
          .classed(`mg-area${line_id}`, true)
          .classed('mg-area-color', colors === null)
          .classed(`mg-area${line_id}-color`, colors === null)
          .attr('d', plot.area(data[which_line]))
          .attr('fill', colors === null ? '' : colors[line_id - 1])
          .attr('clip-path', `url(#mg-plot-window-${mg_target_ref(target)})`);
      }
    } else if (!areas.empty()) {
      areas.remove();
    }
  }

  function mg_default_color_for_path(this_path, line_id) {
    this_path.classed('mg-line-color', true)
             .classed(`mg-line${line_id}-color`, true);
  }

  function mg_color_line({colors}, this_path, which_line, line_id) {
    if (colors) {
      // for now, if args.colors is not an array, then keep moving as if nothing happened.
      // if args.colors is not long enough, default to the usual line_id color.
      if (colors.constructor === Array) {
        this_path.attr('stroke', colors[which_line]);
        if (colors.length < which_line + 1) {
          // Go with default coloring.
          // this_path.classed('mg-line' + (line_id) + '-color', true);
          mg_default_color_for_path(this_path, line_id);
        }
      } else {
        // this_path.classed('mg-line' + (line_id) + '-color', true);
        mg_default_color_for_path(this_path, line_id);
      }
    } else {
      // this is the typical workflow
      // this_path.classed('mg-line' + (line_id) + '-color', true);
      mg_default_color_for_path(this_path, line_id);
    }
  }

  function mg_add_line_element({animate_on_load, data, y_accessor, target}, plot, this_path, which_line) {
    if (animate_on_load) {
      plot.data_median = d3.median(data[which_line], d => d[y_accessor]);
      this_path.attr('d', plot.flat_line(data[which_line]))
        .transition()
        .duration(1000)
        .attr('d', plot.line(data[which_line]))
        .attr('clip-path', `url(#mg-plot-window-${mg_target_ref(target)})`);
    } else { // or just add the line
      this_path.attr('d', plot.line(data[which_line]))
        .attr('clip-path', `url(#mg-plot-window-${mg_target_ref(target)})`);
    }
  }

  function mg_add_line(args, plot, svg, existing_line, which_line, line_id) {
    if (!existing_line.empty()) {
      svg.node().appendChild(existing_line.node());

      const lineTransition = existing_line.transition()
        .duration(plot.update_transition_duration);

      if (!plot.display_area && args.transition_on_update && !args.missing_is_hidden) {
        lineTransition.attrTween('d', path_tween(plot.line(args.data[which_line]), 4));
      } else {
        lineTransition.attr('d', plot.line(args.data[which_line]));
      }
    } else { // otherwise...
      // if we're animating on load, animate the line from its median value
      const this_path = svg.append('path')
        .attr('class', `mg-main-line mg-line${line_id}`);

      mg_color_line(args, this_path, which_line, line_id);
      mg_add_line_element(args, plot, this_path, which_line);
    }
  }

  function mg_add_legend_element(args, plot, which_line, line_id) {
    let this_legend;
    if (args.legend) {
      if (is_array(args.legend)) {
        this_legend = args.legend[which_line];
      } else if (is_function(args.legend)) {
        this_legend = args.legend(args.data[which_line]);
      }

      if (args.legend_target) {
        if (args.colors && args.colors.constructor === Array) {
          plot.legend_text = `<span style='color:${args.colors[which_line]}'>&mdash; ${this_legend}&nbsp; </span>${plot.legend_text}`;
        } else {
          plot.legend_text = `<span class='mg-line${line_id}-legend-color'>&mdash; ${this_legend}&nbsp; </span>${plot.legend_text}`;
        }
      } else {
        let anchor_point, anchor_orientation, dx;

        if (args.y_axis_position === 'left') {
          anchor_point = args.data[which_line][args.data[which_line].length - 1];
          anchor_orientation = 'start';
          dx = args.buffer;
        } else {
          anchor_point = args.data[which_line][0];
          anchor_orientation = 'end';
          dx = -args.buffer;
        }
        const legend_text = plot.legend_group.append('svg:text')
          .attr('x', args.scalefns.xf(anchor_point))
          .attr('dx', dx)
          .attr('y', args.scalefns.yf(anchor_point))
          .attr('dy', '.35em')
          .attr('font-size', 10)
          .attr('text-anchor', anchor_orientation)
          .attr('font-weight', '300')
          .text(this_legend);

        if (args.colors && args.colors.constructor === Array) {
          if (args.colors.length < which_line + 1) {
            legend_text.classed(`mg-line${line_id}-legend-color`, true);
          } else {
            legend_text.attr('fill', args.colors[which_line]);
          }
        } else {
          legend_text.classed('mg-line-legend-color', true)
            .classed(`mg-line${line_id}-legend-color`, true);
        }

        mg_prevent_vertical_overlap(plot.legend_group.selectAll('.mg-line-legend text').nodes(), args);
      }
    }
  }

  function mg_plot_legend_if_legend_target(target, legend) {
    if (target) d3.select(target).html(legend);
  }

  function mg_add_legend_group({legend}, plot, svg) {
    if (legend) plot.legend_group = mg_add_g(svg, 'mg-line-legend');
  }

  function mg_remove_existing_line_rollover_elements(svg) {
    // remove the old rollovers if they already exist
    mg_selectAll_and_remove(svg, '.mg-rollover-rect');
    mg_selectAll_and_remove(svg, '.mg-voronoi');

    // remove the old rollover text and circle if they already exist
    mg_selectAll_and_remove(svg, '.mg-active-datapoint');
    mg_selectAll_and_remove(svg, '.mg-line-rollover-circle');
    //mg_selectAll_and_remove(svg, '.mg-active-datapoint-container');
  }

  function mg_add_rollover_circle({data, colors}, svg) {
    // append circle
    const circle = svg.selectAll('.mg-line-rollover-circle')
      .data(data)
      .enter().append('circle')
      .attr('cx', 0)
      .attr('cy', 0)
      .attr('r', 0);

    if (colors && colors.constructor === Array) {
      circle
        .attr('class', ({__line_id__}) => `mg-line${__line_id__}`)
        .attr('fill', (d, i) => colors[i])
        .attr('stroke', (d, i) => colors[i]);
    } else {
      circle.attr('class', ({__line_id__}, i) => [
        `mg-line${__line_id__}`,
        `mg-line${__line_id__}-color`,
        `mg-area${__line_id__}-color`
      ].join(' '));
    }
    circle.classed('mg-line-rollover-circle', true);
  }

  function mg_set_unique_line_id_for_each_series({data, custom_line_color_map}) {
    // update our data by setting a unique line id for each series
    // increment from 1... unless we have a custom increment series

    for (let i = 0; i < data.length; i++) {
      data[i].forEach(datum => {
        datum.__index__ = i + 1;
        datum.__line_id__ = (custom_line_color_map.length > 0) ? custom_line_color_map[i] : i + 1;
      });
    }
  }

  function mg_nest_data_for_voronoi({data}) {
    return d3.merge(data);
  }

  function mg_line_class_string(args) {
    return d => {
      let class_string;

      if (args.linked) {
        const v = d[args.x_accessor];
        const formatter = MG.time_format(args.utc_time, args.linked_format);

        // only format when x-axis is date
        const id = (typeof v === 'number') ? (d.__line_id__ - 1) : formatter(v);
        class_string = `roll_${id} mg-line${d.__line_id__}`;

        if (args.color === null) {
          class_string += ` mg-line${d.__line_id__}-color`;
        }
        return class_string;

      } else {
        class_string = `mg-line${d.__line_id__}`;
        if (args.color === null) class_string += ` mg-line${d.__line_id__}-color`;
        return class_string;
      }
    };
  }

  function mg_add_voronoi_rollover(args, svg, rollover_on, rollover_off, rollover_move, rollover_click) {
    const voronoi = d3.voronoi()
      .x(d => args.scales.X(d[args.x_accessor]).toFixed(2))
      .y(d => args.scales.Y(d[args.y_accessor]).toFixed(2))
      .extent([
        [args.buffer, args.buffer + (args.title ? args.title_y_position : 0)],
        [args.width - args.buffer, args.height - args.buffer]
      ]);

    const g = mg_add_g(svg, 'mg-voronoi');
    g.selectAll('path')
      .data(voronoi.polygons(mg_nest_data_for_voronoi(args)))
      .enter()
      .append('path')
      .filter(d => d !== undefined && d.length > 0)
      .attr('d', d => d == null ? null : `M${d.join('L')}Z`)
      .datum(d => d == null ? null : d.data) // because of d3.voronoi, reassign d
      .attr('class', mg_line_class_string(args))
      .on('click', rollover_click)
      .on('mouseover', rollover_on)
      .on('mouseout', rollover_off)
      .on('mousemove', rollover_move);

    mg_configure_voronoi_rollover(args, svg);
  }

  function nest_data_for_aggregate_rollover({x_accessor, data, x_sort}) {
    const data_nested = d3.nest()
      .key(d => d[x_accessor])
      .entries(d3.merge(data));
    data_nested.forEach(entry => {
      const datum = entry.values[0];
      entry.key = datum[x_accessor];
    });

    if (x_sort) {
      return data_nested.sort((a, b) => new Date(a.key) - new Date(b.key));
    } else {
      return data_nested;
    }
  }

  function mg_add_aggregate_rollover(args, svg, rollover_on, rollover_off, rollover_move, rollover_click) {
    // Undo the keys getting coerced to strings, by setting the keys from the values
    // This is necessary for when we have X axis keys that are things like
    const data_nested = nest_data_for_aggregate_rollover(args);

    const xf = data_nested.map(({key}) => args.scales.X(key));

    const g = svg.append('g')
      .attr('class', 'mg-rollover-rect');

    g.selectAll('.mg-rollover-rects')
      .data(data_nested).enter()
      .append('rect')
      .attr('x', (d, i) => {
        if (xf.length === 1) return mg_get_plot_left(args);
        else if (i === 0) return xf[i].toFixed(2);
        else return ((xf[i - 1] + xf[i]) / 2).toFixed(2);
      })
      .attr('y', args.top)
      .attr('width', (d, i) => {
        if (xf.length === 1) return mg_get_plot_right(args);
        else if (i === 0) return ((xf[i + 1] - xf[i]) / 2).toFixed(2);
        else if (i === xf.length - 1) return ((xf[i] - xf[i - 1]) / 2).toFixed(2);
        else return ((xf[i + 1] - xf[i - 1]) / 2).toFixed(2);
      })
      .attr('class', ({values}) => {
        let line_classes = values.map(({__line_id__}) => {
          let lc = mg_line_class(__line_id__);
          if (args.colors === null) lc += ` ${mg_line_color_class(__line_id__)}`;
          return lc;
        }).join(' ');
        if (args.linked && values.length > 0) {
          line_classes += ` ${mg_rollover_id_class(mg_rollover_format_id(values[0], args))}`;
        }

        return line_classes;
      })
      .attr('height', args.height - args.bottom - args.top - args.buffer)
      .attr('opacity', 0)
      .on('click', rollover_click)
      .on('mouseover', rollover_on)
      .on('mouseout', rollover_off)
      .on('mousemove', rollover_move);

    mg_configure_aggregate_rollover(args, svg);
  }

  function mg_configure_singleton_rollover({data}, svg) {
    svg.select('.mg-rollover-rect rect')
      .on('mouseover')(data[0][0], 0);
  }

  function mg_configure_voronoi_rollover({data, custom_line_color_map}, svg) {
    for (let i = 0; i < data.length; i++) {
      let j = i + 1;

      if (custom_line_color_map.length > 0 &&
        custom_line_color_map[i] !== undefined) {
        j = custom_line_color_map[i];
      }

      if (data[i].length === 1 && !svg.selectAll(`.mg-voronoi .mg-line${j}`).empty()) {
        svg.selectAll(`.mg-voronoi .mg-line${j}`)
          .on('mouseover')(data[i][0], 0);

        svg.selectAll(`.mg-voronoi .mg-line${j}`)
          .on('mouseout')(data[i][0], 0);
      }
    }
  }

  function mg_line_class(line_id) {
    return `mg-line${line_id}`;
  }

  function mg_line_color_class(line_id) {
    return `mg-line${line_id}-color`;
  }

  function mg_rollover_id_class(id) {
    return `roll_${id}`;
  }

  function mg_rollover_format_id(d, {x_accessor, utc_time, linked_format}) {
    const v = d[x_accessor];
    const formatter = MG.time_format(utc_time, linked_format);
    // only format when x-axis is date
    return (typeof v === 'number') ? v.toString().replace('.', '_') : formatter(v);
  }

  function mg_add_single_line_rollover(args, svg, rollover_on, rollover_off, rollover_move, rollover_click) {
    // set to 1 unless we have a custom increment series
    let line_id = 1;
    if (args.custom_line_color_map.length > 0) {
      line_id = args.custom_line_color_map[0];
    }

    const g = svg.append('g')
      .attr('class', 'mg-rollover-rect');

    const xf = args.data[0].map(args.scalefns.xf);

    g.selectAll('.mg-rollover-rects')
      .data(args.data[0]).enter()
      .append('rect')
      .attr('class', (d, i) => {
        let cl = `${mg_line_color_class(line_id)} ${mg_line_class(d.__line_id__)}`;
        if (args.linked) cl += `${cl} ${mg_rollover_id_class(mg_rollover_format_id(d, args))}`;
        return cl;
      })
      .attr('x', (d, i) => {
        // if data set is of length 1
        if (xf.length === 1) return mg_get_plot_left(args);
        else if (i === 0) return xf[i].toFixed(2);
        else return ((xf[i - 1] + xf[i]) / 2).toFixed(2);
      })
      .attr('y', (d, i) => (args.data.length > 1) ? args.scalefns.yf(d) - 6 // multi-line chart sensitivity
      : args.top)
      .attr('width', (d, i) => {
        // if data set is of length 1
        if (xf.length === 1) return mg_get_plot_right(args);
        else if (i === 0) return ((xf[i + 1] - xf[i]) / 2).toFixed(2);
        else if (i === xf.length - 1) return ((xf[i] - xf[i - 1]) / 2).toFixed(2);
        else return ((xf[i + 1] - xf[i - 1]) / 2).toFixed(2);
      })
      .attr('height', (d, i) => (args.data.length > 1) ? 12 // multi-line chart sensitivity
      : args.height - args.bottom - args.top - args.buffer)
      .attr('opacity', 0)
      .on('click', rollover_click)
      .on('mouseover', rollover_on)
      .on('mouseout', rollover_off)
      .on('mousemove', rollover_move);

    if (mg_is_singleton(args)) {
      mg_configure_singleton_rollover(args, svg);
    }
  }

  function mg_configure_aggregate_rollover({data}, svg) {
    const rect = svg.selectAll('.mg-rollover-rect rect');
    const rect_first = rect.nodes()[0][0] || rect.nodes()[0];
    if (data.filter(({length}) => length === 1).length > 0) {
      rect.on('mouseover')(rect_first.__data__, 0);
    }
  }

  function mg_is_standard_multiline({data, aggregate_rollover}) {
    return data.length > 1 && !aggregate_rollover;
  }

  function mg_is_aggregated_rollover({data, aggregate_rollover}) {
    return data.length > 1 && aggregate_rollover;
  }

  function mg_is_singleton({data}) {
    return data.length === 1 && data[0].length === 1;
  }

  function mg_draw_all_line_elements(args, plot, svg) {
    mg_remove_dangling_bands(plot, svg);

    // If option activated, remove existing active points if exists
    if (args.active_point_on_lines) {
      svg.selectAll('circle.mg-shown-active-point').remove();
    }

    for (let i = args.data.length - 1; i >= 0; i--) {
      const this_data = args.data[i];

      // passing the data for the current line
      MG.call_hook('line.before_each_series', [this_data, args]);

      // override increment if we have a custom increment series
      let line_id = i + 1;
      if (args.custom_line_color_map.length > 0) {
        line_id = args.custom_line_color_map[i];
      }

      args.data[i].__line_id__ = line_id;

      // If option activated, add active points for each lines
      if (args.active_point_on_lines) {
        svg.selectAll('circle-' + line_id)
          .data(args.data[i])
          .enter()
          .filter((d) => {
            return d[args.active_point_accessor];
          })
          .append('circle')
          .attr('class', 'mg-area' + (line_id) + '-color mg-shown-active-point')
          .attr('cx', args.scalefns.xf)
          .attr('cy', args.scalefns.yf)
          .attr('r', () => {
            return args.active_point_size;
          });
      }

      const existing_line = svg.select(`path.mg-main-line.mg-line${line_id}`);
      if (this_data.length === 0) {
        existing_line.remove();
        continue;
      }

      mg_add_confidence_band(args, plot, svg, line_id);

      if (Array.isArray(args.area)) {
        if (args.area[line_id - 1]) {
          mg_add_area(args, plot, svg, i, line_id);
        }
      } else {
        mg_add_area(args, plot, svg, i, line_id);
      }

      mg_add_line(args, plot, svg, existing_line, i, line_id);
      mg_add_legend_element(args, plot, i, line_id);

      // passing the data for the current line
      MG.call_hook('line.after_each_series', [this_data, existing_line, args]);
    }
  }

  function mg_remove_dangling_bands({existing_band}, svg) {
    if (existing_band[0] && existing_band[0].length > svg.selectAll('.mg-main-line').node().length) {
      svg.selectAll('.mg-confidence-band').remove();
    }
  }

  function mg_line_main_plot(args) {
    const plot = {};
    const svg = mg_get_svg_child_of(args.target);

    // remove any old legends if they exist
    mg_selectAll_and_remove(svg, '.mg-line-legend');
    mg_add_legend_group(args, plot, svg);

    plot.data_median = 0;
    plot.update_transition_duration = (args.transition_on_update) ? 1000 : 0;
    plot.display_area = (args.area && !args.use_data_y_min && args.data.length <= 1 && args.aggregate_rollover === false) || (Array.isArray(args.area) && args.area.length > 0);
    plot.legend_text = '';
    mg_line_graph_generators(args, plot, svg);
    plot.existing_band = svg.selectAll('.mg-confidence-band').nodes();

    // should we continue with the default line render? A `line.all_series` hook should return false to prevent the default.
    const continueWithDefault = MG.call_hook('line.before_all_series', [args]);
    if (continueWithDefault !== false) {
      mg_draw_all_line_elements(args, plot, svg);
    }

    mg_plot_legend_if_legend_target(args.legend_target, plot.legend_text);
  }

  function mg_line_rollover_setup(args, graph) {
    const svg = mg_get_svg_child_of(args.target);

    if (args.showActivePoint && svg.selectAll('.mg-active-datapoint-container').nodes().length === 0) {
      mg_add_g(svg, 'mg-active-datapoint-container');
    }

    mg_remove_existing_line_rollover_elements(svg);
    mg_add_rollover_circle(args, svg);
    mg_set_unique_line_id_for_each_series(args);

    if (mg_is_standard_multiline(args)) {
      mg_add_voronoi_rollover(args, svg, graph.rolloverOn(args), graph.rolloverOff(args), graph.rolloverMove(args), graph.rolloverClick(args));
    } else if (mg_is_aggregated_rollover(args)) {
      mg_add_aggregate_rollover(args, svg, graph.rolloverOn(args), graph.rolloverOff(args), graph.rolloverMove(args), graph.rolloverClick(args));
    } else {
      mg_add_single_line_rollover(args, svg, graph.rolloverOn(args), graph.rolloverOff(args), graph.rolloverMove(args), graph.rolloverClick(args));
    }
  }

  function mg_update_rollover_circle(args, svg, d) {
    if (args.aggregate_rollover && args.data.length > 1) {
      // hide the circles in case a non-contiguous series is present
      svg.selectAll('circle.mg-line-rollover-circle')
        .style('opacity', 0);

      d.values.forEach((datum, index, list) => {
        if (args.missing_is_hidden && list[index]['_missing']) {
          return;
        }

        if (mg_data_in_plot_bounds(datum, args)) mg_update_aggregate_rollover_circle(args, svg, datum);
      });
    } else if ((args.missing_is_hidden && d['_missing']) || d[args.y_accessor] === null) {
      // disable rollovers for hidden parts of the line
      // recall that hidden parts are missing data ranges and possibly also
      // data points that have been explicitly identified as missing
      return;
    } else {
      // show circle on mouse-overed rect
      if (mg_data_in_plot_bounds(d, args)) {
        mg_update_generic_rollover_circle(args, svg, d);
      }
    }
  }

  function mg_update_aggregate_rollover_circle({scales, x_accessor, y_accessor, point_size}, svg, datum) {
    svg.select(`circle.mg-line-rollover-circle.mg-line${datum.__line_id__}`)
      .attr('cx', scales.X(datum[x_accessor]).toFixed(2))
      .attr('cy', scales.Y(datum[y_accessor]).toFixed(2))
      .attr('r', point_size)
      .style('opacity', 1);
  }

  function mg_update_generic_rollover_circle({scales, x_accessor, y_accessor, point_size}, svg, d) {
    svg.selectAll(`circle.mg-line-rollover-circle.mg-line${d.__line_id__}`)
      .classed('mg-line-rollover-circle', true)
      .attr('cx', () => scales.X(d[x_accessor]).toFixed(2))
      .attr('cy', () => scales.Y(d[y_accessor]).toFixed(2))
      .attr('r', point_size)
      .style('opacity', 1);
  }

  function mg_trigger_linked_mouseovers(args, d, i) {
    if (args.linked && !MG.globals.link) {
      MG.globals.link = true;
      if (!args.aggregate_rollover || d[args.y_accessor] !== undefined || (d.values && d.values.length > 0)) {
        const datum = d.values ? d.values[0] : d;
        const id = mg_rollover_format_id(datum, args);
        // trigger mouseover on matching line in .linked charts
        d3.selectAll(`.${mg_line_class(datum.__line_id__)}.${mg_rollover_id_class(id)}`)
          .each(function(d) {
            d3.select(this)
              .on('mouseover')(d, i);
          });
      }
    }
  }

  function mg_trigger_linked_mouseouts({linked, utc_time, linked_format, x_accessor}, d, i) {
    if (linked && MG.globals.link) {
      MG.globals.link = false;

      const formatter = MG.time_format(utc_time, linked_format);
      const datums = d.values ? d.values : [d];
      datums.forEach(datum => {
        const v = datum[x_accessor];
        const id = (typeof v === 'number') ? i : formatter(v);

        // trigger mouseout on matching line in .linked charts
        d3.selectAll(`.roll_${id}`)
          .each(function(d) {
            d3.select(this)
              .on('mouseout')(d);
          });
      });
    }
  }

  function mg_remove_active_data_points_for_aggregate_rollover(args, svg) {
    svg.selectAll('circle.mg-line-rollover-circle').filter(({length}) => length > 1)
      .style('opacity', 0);
  }

  function mg_remove_active_data_points_for_generic_rollover({custom_line_color_map, data}, svg, line_id) {
    svg.selectAll(`circle.mg-line-rollover-circle.mg-line${line_id}`)
      .style('opacity', () => {
        let id = line_id - 1;
        if (custom_line_color_map.length > 0 &&
          custom_line_color_map.indexOf(line_id) !== undefined
        ) {
          id = custom_line_color_map.indexOf(line_id);
        }

        if (data[id].length === 1) {
          return 1;
        } else {
          return 0;
        }
      });
  }

  function mg_remove_active_text(svg) {
    svg.select('.mg-active-datapoint').text('');
  }

  function lineChart(args) {
    this.init = function(args) {
      this.args = args;

      if (!args.data || args.data.length === 0) {
        args.internal_error = 'No data was supplied';
        internal_error(args);
        return this;
      } else {
        args.internal_error = undefined;
      }

      raw_data_transformation(args);
      process_line(args);

      MG.call_hook('line.before_destroy', this);

      init(args);

      // TODO incorporate markers into calculation of x scales
      new MG.scale_factory(args)
        .namespace('x')
        .numericalDomainFromData()
        .numericalRange('bottom');

      const baselines = (args.baselines || []).map(d => d[args.y_accessor]);

      new MG.scale_factory(args)
        .namespace('y')
        .zeroBottom(true)
        .inflateDomain(true)
        .numericalDomainFromData(baselines)
        .numericalRange('left');

      if (args.x_axis) {
        new MG.axis_factory(args)
          .namespace('x')
          .type('numerical')
          .position(args.x_axis_position)
          .rug(x_rug(args))
          .label(mg_add_x_label)
          .draw();
      }

      if (args.y_axis) {
        new MG.axis_factory(args)
          .namespace('y')
          .type('numerical')
          .position(args.y_axis_position)
          .rug(y_rug(args))
          .label(mg_add_y_label)
          .draw();
      }

      this.markers();
      this.mainPlot();
      this.rollover();
      this.windowListeners();
      if (args.brush) MG.add_brush_function(args);
      MG.call_hook('line.after_init', this);

      return this;
    };

    this.mainPlot = function() {
      mg_line_main_plot(args);
      return this;
    };

    this.markers = function() {
      markers(args);
      return this;
    };

    this.rollover = function() {
      mg_line_rollover_setup(args, this);
      MG.call_hook('line.after_rollover', args);

      return this;
    };

    this.rolloverClick =  args => (d, i) => {
        if (args.click) {
            args.click(d, i);
        }
    };

    this.rolloverOn = args => {
      const svg = mg_get_svg_child_of(args.target);

      return (d, i) => {
        mg_update_rollover_circle(args, svg, d);
        mg_trigger_linked_mouseovers(args, d, i);

        svg.selectAll('text')
          .filter((g, j) => d === g)
          .attr('opacity', 0.3);

        // update rollover text except for missing data points
        if (args.show_rollover_text &&
            !((args.missing_is_hidden && d['_missing']) || d[args.y_accessor] === null)
          ) {
          const mouseover = mg_mouseover_text(args, { svg });
          let row = mouseover.mouseover_row();
          if (args.aggregate_rollover) {
            row.text((args.aggregate_rollover && args.data.length > 1
              ? mg_format_x_aggregate_mouseover
              : mg_format_x_mouseover)(args, d));
          }

          const pts = args.aggregate_rollover && args.data.length > 1
            ? d.values
            : [d];

          pts.forEach(di => {
            if (args.aggregate_rollover) {
              row = mouseover.mouseover_row();
            }

            if (args.legend) {
              mg_line_color_text(row.text(`${args.legend[di.__index__ - 1]}  `).bold(), di.__line_id__, args);
            }

            mg_line_color_text(row.text('\u2014  ').elem, di.__line_id__, args);
            if (!args.aggregate_rollover) {
              row.text(mg_format_x_mouseover(args, di));
            }

            row.text(mg_format_y_mouseover(args, di, args.time_series === false));
          });
        }

        if (args.mouseover) {
          args.mouseover(d, i);
        }
      };
    };

    this.rolloverOff = args => {
      const svg = mg_get_svg_child_of(args.target);

      return (d, i) => {
        mg_trigger_linked_mouseouts(args, d, i);
        if (args.aggregate_rollover) {
          mg_remove_active_data_points_for_aggregate_rollover(args, svg);
        } else {
          mg_remove_active_data_points_for_generic_rollover(args, svg, d.__line_id__);
        }

        if (args.data[0].length > 1) {
          mg_clear_mouseover_container(svg);
        }

        if (args.mouseout) {
          args.mouseout(d, i);
        }
      };
    };

    this.rolloverMove = args => (d, i) => {
      if (args.mousemove) {
        args.mousemove(d, i);
      }
    };

    this.windowListeners = function() {
      mg_window_listeners(this.args);
      return this;
    };

    this.init(args);
  }

  MG.register('line', lineChart);
}