1 files changed, 98 insertions, 0 deletions
diff --git a/priv/static/js/metricsgraphics/common/rollover.js b/priv/static/js/metricsgraphics/common/rollover.js
new file mode 100644
index 0000000..c462d98
--- /dev/null
+++ b/priv/static/js/metricsgraphics/common/rollover.js
@@ -0,0 +1,98 @@
+function mg_clear_mouseover_container(svg) {
+  svg.selectAll('.mg-active-datapoint-container').selectAll('*').remove();
+}
+
+function mg_setup_mouseover_container(svg, args) {
+  svg.select('.mg-active-datapoint').remove();
+  var text_anchor = args.mouseover_align === 'right'
+    ? 'end'
+    : (args.mouseover_align === 'left'
+      ? 'start'
+      : 'middle');
+
+  var mouseover_x = (args.mouseover_align === 'right')
+    ? mg_get_plot_right(args)
+    : (args.mouseover_align === 'left'
+      ? mg_get_plot_left(args)
+      : (args.width - args.left - args.right) / 2 + args.left);
+
+  var active_datapoint = svg.select('.mg-active-datapoint-container')
+    .attr('transform', 'translate(0 -18)')
+    .append('text')
+    .attr('class', 'mg-active-datapoint')
+    .attr('xml:space', 'preserve')
+    .attr('text-anchor', text_anchor);
+
+  // set the rollover text's position; if we have markers on two lines,
+  // nudge up the rollover text a bit
+  var active_datapoint_y_nudge = 0.75;
+
+  var y_position = (args.x_axis_position === 'bottom')
+    ? mg_get_top(args) * active_datapoint_y_nudge
+    : mg_get_bottom(args) + args.buffer * 3;
+
+  if (args.markers) {
+    var yPos;
+    svg.selectAll('.mg-marker-text')
+      .each(function() {
+        if (!yPos) {
+          yPos = d3.select(this).attr('y');
+        } else if (yPos !== d3.select(this).attr('y')) {
+          active_datapoint_y_nudge = 0.56;
+        }
+      });
+  }
+
+  active_datapoint
+    .attr('transform', 'translate(' + mouseover_x + ',' + (y_position) + ')');
+}
+
+function mg_mouseover_tspan(svg, text) {
+  let tspan = svg.append('tspan').text(text);
+
+  return {
+    bold: () => tspan.attr('font-weight', 'bold'),
+    font_size: (pts) => tspan.attr('font-size', pts),
+    x: (x) => tspan.attr('x', x),
+    y: (y) => tspan.attr('y', y),
+    elem: tspan
+  };
+}
+
+function mg_reset_text_container(svg) {
+  var textContainer = svg.select('.mg-active-datapoint');
+  textContainer
+    .selectAll('*')
+    .remove();
+  return textContainer;
+}
+
+function mg_mouseover_row(row_number, container, rargs) {
+  var lineHeight = 1.1;
+  var rrr = container.append('tspan')
+    .attr('x', 0)
+    .attr('y', (row_number * lineHeight) + 'em');
+
+  return {
+    rargs,
+    text: (text) => {
+      return mg_mouseover_tspan(rrr, text);
+    }
+  };
+}
+
+function mg_mouseover_text(args, rargs) {
+  mg_setup_mouseover_container(rargs.svg, args);
+
+  let mouseOver = {
+    row_number: 0,
+    rargs,
+    mouseover_row: (rargs) => {
+      mouseOver.row_number += 1;
+      return mg_mouseover_row(mouseOver.row_number, mouseOver.text_container, rargs);
+    },
+    text_container: mg_reset_text_container(rargs.svg)
+  };
+
+  return mouseOver;
+}