change some syntax to ES6 & fix some obvious problems

src/index.html

@@ -32,6 +32,8 @@
     <script src='js/common/init.js'></script>
     <script src='js/common/markers.js'></script>
     <script src='js/common/rollover.js'></script>
+    <script src='js/common/zoom.js'></script>
+    <script src='js/common/brush.js'></script>
     <script src='js/common/window_listeners.js'></script>
     <script src='js/layout/bootstrap_dropdown.js'></script>
     <script src='js/layout/button.js'></script>

src/js/charts/line.js

@@ -809,7 +809,7 @@
       this.mainPlot();
       this.rollover();
       this.windowListeners();
-      if (args.brush) mg_add_brush_function(args);
+      if (args.brush) MG.add_brush_function(args);
       MG.call_hook('line.after_init', this);
 
       return this;

src/js/charts/point.js

@@ -165,7 +165,7 @@ function mg_color_point_mouseover({color_accessor, scalefns}, elem, d) {
       this.markers();
       this.rollover();
       this.windowListeners();
-      if (args.brush) mg_add_brush_function(args);
+      if (args.brush) MG.add_brush_function(args);
       return this;
     };
 

src/js/common/brush.js

@@ -1,83 +1,104 @@
-function mg_create_brushing_pattern(args, range) {
-  var extentRect;
-  if (d3.select(args.target).select('.mg-extent').size()) {
-    extentRect = d3.select(args.target).select('.mg-extent');
-  } else {
-    extentRect = d3.select(args.target)
+{
+
+const get_extent_rect = args => {
+  return d3.select(args.target).select('.mg-extent').size()
+    ? d3.select(args.target).select('.mg-extent')
+    : d3.select(args.target)
       .select('.mg-rollover-rect, .mg-voronoi')
       .insert('g', '*')
       .classed('mg-brush', true)
       .append('rect')
       .classed('mg-extent', true);
-  }
-  var x = ('x' in range) ? range.x[0] : args.left;
-  var width = ('x' in range) ? range.x[1] - range.x[0] : args.width - args.left - args.right;
-  var y = ('y' in range) ? range.y[0] : args.top;
-  var height = ('y' in range) ? range.y[1] - range.y[0] : args.height - args.bottom - args.top - args.buffer;
-  extentRect
+}
+
+const create_brushing_pattern = (args, range) => {
+  const x = range.x[0];
+  const width = range.x[1] - range.x[0];
+  const y = range.y[0];
+  const height = range.y[1] - range.y[0];
+  get_extent_rect(args)
     .attr('x', x)
     .attr('width', width)
     .attr('y', y)
     .attr('height', height)
     .attr('opacity', 1);
 }
 
-function mg_add_event_handler_for_brush(args, target, axis) {
-  var svg = d3.select(args.target).select('svg');
-  var rollover = svg.select('.mg-rollover-rect, .mg-voronoi');
-  var isDragging = false;
-  var mouseDown = false;
-  var origin = [];
+const remove_brushing_pattern = args => {
+  get_extent_rect(args)
+    .attr('width', 0)
+    .attr('height', 0)
+    .attr('opacity', 0);
+}
+
+const add_event_handler_for_brush = (args, target, axis) => {
+  const svg = d3.select(args.target).select('svg');
+  const rollover = svg.select('.mg-rollover-rect, .mg-voronoi');
+  const container = rollover.node();
+  let isDragging = false;
+  let mouseDown = false;
+  let origin = [];
+
+  const calculateSelectionRange = () => {
+    const min_x = args.left;
+    const max_x = args.width - args.right - args.buffer;
+    const min_y = args.top;
+    const max_y = args.height - args.bottom - args.buffer;
+    const mouse = d3.mouse(container);
+    const range = {};
+    range.x = axis.x ? [
+      Math.max(min_x, Math.min(origin[0], mouse[0])),
+      Math.min(max_x, Math.max(origin[0], mouse[0])),
+    ] : [min_x, max_x];
+    range.y = axis.y ? [
+      Math.max(min_y, Math.min(origin[1], mouse[1])),
+      Math.min(max_y, Math.max(origin[1], mouse[1])),
+    ] : [min_y, max_y];
+    return range;
+  }
+
   rollover.classed('mg-brush-container', true);
-  rollover.on('mousedown', function() {
+  rollover.on('mousedown.' + args.target, () => {
     mouseDown = true;
     isDragging = false;
-    origin = d3.mouse(this);
+    origin = d3.mouse(container);
     svg.classed('mg-brushed', false);
     svg.classed('mg-brushing-in-progress', true);
-    var range = {};
-    if (axis.x) range.x = [d3.mouse(this)[0], d3.mouse(this)[0]];
-    if (axis.y) range.y = [d3.mouse(this)[1], d3.mouse(this)[1]];
-    mg_create_brushing_pattern(args, range);
+    remove_brushing_pattern(args);
   });
-  rollover.on('mousemove', function() {
+  d3.select(document).on('mousemove.' + args.target, () => {
     if (mouseDown) {
       isDragging = true;
       rollover.classed('mg-brushing', true);
-      var range = {};
-      if (axis.x) range.x = [Math.min(origin[0], d3.mouse(this)[0]), Math.max(origin[0], d3.mouse(this)[0])];
-      if (axis.y) range.y = [Math.min(origin[1], d3.mouse(this)[1]), Math.max(origin[1], d3.mouse(this)[1])];
-      mg_create_brushing_pattern(args, range);
+      const range = calculateSelectionRange();
+      create_brushing_pattern(args, range);
     }
   });
-  rollover.on('mouseup', function() {
+  d3.select(document).on('mouseup.' + args.target, () => {
+    if (!mouseDown) return;
     mouseDown = false;
     svg.classed('mg-brushing-in-progress', false);
-    var range = {};
-    if (axis.x) range.x = [Math.min(origin[0], d3.mouse(this)[0]), Math.max(origin[0], d3.mouse(this)[0])];
-    if (axis.y) range.y = [Math.min(origin[1], d3.mouse(this)[1]), Math.max(origin[1], d3.mouse(this)[1])];
+    const range = calculateSelectionRange();
     if (isDragging) {
       isDragging = false;
       if (target === args) {
-        mg_zoom_to_data_range(target, range);
+        MG.zoom_to_data_range(target, range);
         svg.select('.mg-rollover-rect, .mg-voronoi').classed('mg-brushed', true);
       } else {
-        var domain = mg_convert_range_to_domain(args, range);
-        mg_zoom_to_data_domain(target, domain);
-      }
-    } else {
-      if (target === args) {
-        mg_zoom_to_raw_range(args);
+        const domain = MG.convert_range_to_domain(args, range);
+        MG.zoom_to_data_domain(target, domain);
       }
+    } else if (target === args) {
+      MG.zoom_to_raw_range(args);
     }
   });
 
 }
 
-function mg_add_brush_function(args) {
+const add_brush_function = args => {
   if (!args.zoom_target) args.zoom_target = args;
-  var zoom_target = args.zoom_target;
-  var brush_axis;
+  const zoom_target = args.zoom_target;
+  let brush_axis;
   switch (args.brush) {
     case 'x':
       brush_axis = {x: true, y: false};
@@ -91,5 +112,9 @@ function mg_add_brush_function(args) {
     default:
       brush_axis = {x: true, y: true};
   }
-  mg_add_event_handler_for_brush(args, zoom_target, brush_axis);
+  add_event_handler_for_brush(args, zoom_target, brush_axis);
+}
+
+MG.add_brush_function = add_brush_function;
+
 }

src/js/common/zoom.js

@@ -1,64 +1,71 @@
-function mg_filter_in_range_data(args, range) {
-  function is_data_in_range(data, range) {
+{
+
+const filter_in_range_data = (args, range) => {
+  const is_data_in_range = (data, range) => {
     return data > Math.min(range[0], range[1]) && data < Math.max(range[0], range[1]);
   }
 
-  return function(d) {
-    var x_in_range = ('x' in range) ? is_data_in_range(d[args.x_accessor], range.x) : true;
-    var y_in_range = ('y' in range) ? is_data_in_range(d[args.y_accessor], range.y) : true;
+  return d => {
+    const x_in_range = !('x' in range) || is_data_in_range(d[args.x_accessor], range.x);
+    const y_in_range = !('y' in range) || is_data_in_range(d[args.y_accessor], range.y);
     return x_in_range && y_in_range;
   }
 }
 
-function mg_zoom_to_data_domain(args, range) {
-  var raw_data = args.raw_data || args.data;
+const zoom_to_data_domain = (args, range) => {
+  const raw_data = args.raw_data || args.data;
   if (!('raw_data' in args)) {
     args.raw_domain = {
       x: args.scales.X.domain(),
       y: args.scales.Y.domain(),
-    }
+    };
     args.raw_data = raw_data;
   }
   if (args.chart_type === 'point') {
     if (is_array_of_arrays(raw_data)) {
       args.data = raw_data.map(function(d) {
-        return d.filter(mg_filter_in_range_data(args, range));
-      })
+        return d.filter(filter_in_range_data(args, range));
+      });
     } else {
-      args.data = raw_data.filter(mg_filter_in_range_data(args, range));
+      args.data = raw_data.filter(filter_in_range_data(args, range));
     }
   }
   if ('x' in range) args.processed.zoom_x = range.x;
+  else delete args.processed.zoom_x;
   if ('y' in range) args.processed.zoom_y = range.y;
+  else delete args.processed.zoom_y;
   new MG.charts[args.chart_type || defaults.chart_type].descriptor(args);
 }
 
-function mg_zoom_to_raw_range(args) {
+const zoom_to_raw_range = args => {
   if (!('raw_domain' in args)) return;
-  var range = args.raw_domain;
-  mg_zoom_to_data_domain(args, range);
+  const range = args.raw_domain;
+  zoom_to_data_domain(args, range);
   delete args.raw_domain;
   delete args.raw_data;
 }
 
-function mg_convert_range_to_domain(args, range) {
-  var domain = {};
+const convert_range_to_domain = (args, range) => {
+  const domain = {};
   if ('x' in range) {
-    var xScale = args.scales.X;
-    domain.x = [];
-    domain.x[0] = +xScale.invert(range.x[0]);
-    domain.x[1] = +xScale.invert(range.x[1]);
+    const xScale = args.scales.X;
+    domain.x = range.x.map(v => +xScale.invert(v));
   }
   if ('y' in range) {
-    var yScale = args.scales.Y;
-    domain.y = [];
-    domain.y[0] = +yScale.invert(range.y[1]);
-    domain.y[1] = +yScale.invert(range.y[0]);
+    const yScale = args.scales.Y;
+    domain.y = range.y.map(v => +yScale.invert(v)).reverse();
   }
   return domain;
 }
 
-function mg_zoom_to_data_range(args, range) {
-  var domain = mg_convert_range_to_domain(args, range)
-  mg_zoom_to_data_domain(args, domain);
+const zoom_to_data_range = (args, range) => {
+  const domain = convert_range_to_domain(args, range);
+  zoom_to_data_domain(args, domain);
+}
+
+MG.convert_range_to_domain = convert_range_to_domain;
+MG.zoom_to_data_domain = zoom_to_data_domain;
+MG.zoom_to_data_range = zoom_to_data_range;
+MG.zoom_to_raw_range = zoom_to_raw_range;
+
 }