Skip to content

Commit

Permalink
Refactor: Update histogram.js to ES6 standards (issue metricsgraphics…
Browse files Browse the repository at this point in the history 
…#811)
  • Loading branch information
@wlach
RickardBjorklund authored and wlach committed Feb 20, 2018
1 parent 65bbe39 commit 0b0539d
Showing 1 changed file with 40 additions and 56 deletions.
96 changes: 40 additions & 56 deletions src/js/charts/histogram.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
(function() {
'use strict';

{
function histogram(args) {
this.init = function(args) {
this.init = (args) => {
this.args = args;

raw_data_transformation(args);
Expand All @@ -14,9 +12,7 @@
.numericalDomainFromData()
.numericalRange('bottom');

var baselines = (args.baselines || []).map(function(d) {
return d[args.y_accessor]
});
const baselines = (args.baselines || []).map(d => d[args.y_accessor]);

new MG.scale_factory(args)
.namespace('y')
Expand All @@ -36,27 +32,25 @@
return this;
};

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

//remove the old histogram, add new one
svg.selectAll('.mg-histogram').remove();

var g = svg.append('g')
const g = svg.append('g')
.attr('class', 'mg-histogram');

var bar = g.selectAll('.mg-bar')
const bar = g.selectAll('.mg-bar')
.data(args.data[0])
.enter().append('g')
.attr('class', 'mg-bar')
.attr('transform', function(d) {
return "translate(" + args.scales.X(d[args.x_accessor]).toFixed(2) + "," + args.scales.Y(d[args.y_accessor]).toFixed(2) + ")";
});
.attr('transform', d => `translate(${args.scales.X(d[args.x_accessor]).toFixed(2)},${args.scales.Y(d[args.y_accessor]).toFixed(2)})`);

//draw bars
bar.append('rect')
.attr('x', 1)
.attr('width', function(d, i) {
.attr('width', (d, i) => {
if (args.data[0].length === 1) {
return (args.scalefns.xf(args.data[0][0]) - args.bar_margin).toFixed(0);
} else if (i !== args.data[0].length - 1) {
Expand All @@ -65,7 +59,7 @@
return (args.scalefns.xf(args.data[0][1]) - args.scalefns.xf(args.data[0][0])).toFixed(0);
}
})
.attr('height', function(d) {
.attr('height', d => {
if (d[args.y_accessor] === 0) {
return 0;
}
Expand All @@ -76,13 +70,13 @@
return this;
};

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

this.rollover = function() {
var svg = mg_get_svg_child_of(args.target);
this.rollover = () => {
const svg = mg_get_svg_child_of(args.target);

if (svg.selectAll('.mg-active-datapoint-container').nodes().length === 0) {
mg_add_g(svg, 'mg-active-datapoint-container');
Expand All @@ -92,28 +86,26 @@
svg.selectAll('.mg-rollover-rect').remove();
svg.selectAll('.mg-active-datapoint').remove();

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

//draw rollover bars
var bar = g.selectAll('.mg-bar')
const bar = g.selectAll('.mg-bar')
.data(args.data[0])
.enter().append('g')
.attr('class', function(d, i) {
.attr('class', (d, i) => {
if (args.linked) {
return 'mg-rollover-rects roll_' + i;
return `mg-rollover-rects roll_${i}`;
} else {
return 'mg-rollover-rects';
}
})
.attr('transform', function(d) {
return "translate(" + (args.scales.X(d[args.x_accessor])) + "," + 0 + ")";
});
.attr('transform', d => `translate(${args.scales.X(d[args.x_accessor])},${0})`);

bar.append('rect')
.attr('x', 1)
.attr('y', args.buffer + args.title_y_position)
.attr('width', function(d, i) {
.attr('width', (d, i) => {
//if data set is of length 1
if (args.data[0].length === 1) {
return (args.scalefns.xf(args.data[0][0]) - args.bar_margin).toFixed(0);
Expand All @@ -123,9 +115,7 @@
return (args.scalefns.xf(args.data[0][1]) - args.scalefns.xf(args.data[0][0])).toFixed(0);
}
})
.attr('height', function(d) {
return args.height;
})
.attr('height', d => args.height)
.attr('opacity', 0)
.on('mouseover', this.rolloverOn(args))
.on('mouseout', this.rolloverOff(args))
Expand All @@ -134,40 +124,36 @@
return this;
};

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

return function(d, i) {
return (d, i) => {
svg.selectAll('text')
.filter(function(g, j) {
return d === g;
})
.filter((g, j) => d === g)
.attr('opacity', 0.3);

var fmt = args.processed.xax_format || MG.time_format(args.utc_time, '%b %e, %Y');
var num = format_rollover_number(args);
const fmt = args.processed.xax_format || MG.time_format(args.utc_time, '%b %e, %Y');
const num = format_rollover_number(args);

svg.selectAll('.mg-bar rect')
.filter(function(d, j) {
return j === i;
})
.filter((d, j) => j === i)
.classed('active', true);

//trigger mouseover on all matching bars
if (args.linked && !MG.globals.link) {
MG.globals.link = true;

//trigger mouseover on matching bars in .linked charts
d3.selectAll('.mg-rollover-rects.roll_' + i + ' rect')
d3.selectAll(`.mg-rollover-rects.roll_${i} rect`)
.each(function(d) { //use existing i
d3.select(this).on('mouseover')(d, i);
});
}

//update rollover text
if (args.show_rollover_text) {
var mo = mg_mouseover_text(args, { svg: svg });
var row = mo.mouseover_row();
const mo = mg_mouseover_text(args, { svg });
const row = mo.mouseover_row();
row.text('\u259F ').elem()
.classed('hist-symbol', true);

Expand All @@ -182,15 +168,15 @@
};
};

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

return function(d, i) {
return (d, i) => {
if (args.linked && MG.globals.link) {
MG.globals.link = false;

//trigger mouseout on matching bars in .linked charts
d3.selectAll('.mg-rollover-rects.roll_' + i + ' rect')
d3.selectAll(`.mg-rollover-rects.roll_${i} rect`)
.each(function(d) { //use existing i
d3.select(this).on('mouseout')(d, i);
});
Expand All @@ -209,23 +195,21 @@
};
};

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

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

this.init(args);
}

var defaults = {
const defaults = {
binned: false,
bins: null,
processed_x_accessor: 'x',
Expand All @@ -235,4 +219,4 @@
};

MG.register('histogram', histogram, defaults);
}).call(this);
}

0 comments on commit 0b0539d

Please sign in to comment.