Skip to content

Commit

Permalink
troubleshooting event handlers and dispatchers
Browse files Browse the repository at this point in the history
  • Loading branch information
@stormpython
stormpython committed Aug 20, 2014
1 parent 4607958 commit a8297f2
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 120 deletions.
8 changes: 4 additions & 4 deletions src/kibana/apps/visualize/directives/visualize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,10 @@ define(function (require) {

// For each type of interaction, assign the the handler if the vis object has it
// otherwise use the typeDef, otherwise, do nothing.
// _.each({hover: 'onHover', click: 'onClick', brush: 'onBrush'}, function (func, event) {
// var callback = vis[func] || typeDefinition[func];
// if (!!callback) chart.on(event, callback);
// });
_.each({hover: 'onHover', click: 'onClick', brush: 'onBrush'}, function (func, event) {
var callback = vis[func] || typeDefinition[func];
if (!!callback) chart.on(event, callback);
});


if (!attr.esResp) {
Expand Down
124 changes: 76 additions & 48 deletions src/kibana/components/vislib/modules/ColumnChart.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
define(function (require) {
return function HistogramChartFactory(d3, Private) {
return function ColumnChartFactory(d3, Private) {
var _ = require('lodash');
var $ = require('jquery');

Expand All @@ -13,57 +13,70 @@ define(function (require) {
function ColumnChart(vis, chartEl, chartData) {
ColumnChart.Super.apply(this, arguments);
this._attr = _.defaults(vis._attr || {}, {
// 'margin' : { top: 0, right: 0, bottom: 0, left: 0 },
// 'offset' : 'zero'
offset: 'zero',
xValue: function (d, i) { return d.x; },
yValue: function (d, i) { return d.y; },
dispatch: d3.dispatch('brush', 'click', 'hover', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout'),
stack: d3.layout.stack()
.x(function (d) { return d.x; })
.y(function (d) { return d.y; })
.offset(this.offset)
});
}

ColumnChart.prototype.eventResponse = function (d, i) {
return {
value : this._attr.yValue(d, i),
point : d,
label : d.label,
color : this.vis.data.color(d.label),
pointIndex: i,
series : this.chartData.series,
config : this._attr,
data : this.chartData,
e : d3.event
};
};

ColumnChart.prototype.stackData = function (data) {
var self = this;

return this._attr.stack(data.series.map(function (d) {
var label = d.label;
return d.values.map(function (e, i) {
return {
label: label,
x : self._attr.xValue.call(d.values, e, i),
y : self._attr.yValue.call(d.values, e, i)
};
});
}));
};

ColumnChart.prototype.draw = function () {
console.log(this);
// Attributes
var self = this;
var $elem = $(this.chartEl);
var margin = this._attr.margin;
var elWidth = this._attr.width = $elem.width();
var elHeight = this._attr.height = $elem.height();
var offset = this._attr.offset;
var isTooltip = this._attr.addTooltip;
var color = this.vis.data.color;
var tooltip = this.vis.tooltip;
var yScale = this.vis.yAxis.yScale;
var xScale = this.vis.xAxis.xScale;
var stack = d3.layout.stack()
.x(function (d) {
return d.x;
})
.y(function (d) {
return d.y;
})
.offset(offset);
var xValue = function (d, i) {
return d.x;
};
var yValue = function (d, i) {
return d.y;
};
var dispatch = this._attr.dispatch;
var div;
var svg;
var width;
var height;
var layers;
var layer;
var bars;

return function (selection) {
selection.each(function (data) {

layers = stack(data.series.map(function (d) {
var label = d.label;
return d.values.map(function (e, i) {
return {
label: label,
x: xValue.call(d.values, e, i),
y: yValue.call(d.values, e, i)
};
});
}));
layers = self.stackData(data);

if (elWidth <= 0 || elHeight <= 0) {
throw new Error($elem.attr('class') + ' height is ' + elHeight + ' and width is ' + elWidth);
Expand All @@ -74,25 +87,27 @@ define(function (require) {
height = elHeight - margin.top - margin.bottom;

// Create the canvas for the visualization
var div = d3.select(this);
div = d3.select(this);

var svg = div.append('svg')
svg = div.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// Data layers
var layer = svg.selectAll('.layer')
layer = svg.selectAll('.layer')
.data(layers)
.enter().append('g')
.attr('class', function (d, i) {
.attr(
'class', function (d, i) {
return i;
});

// Append the bars
var bars = layer.selectAll('rect')
.data(function (d) {
bars = layer.selectAll('rect')
.data(
function (d) {
return d;
});

Expand All @@ -102,36 +117,50 @@ define(function (require) {
// enter
bars.enter()
.append('rect')
.attr('class', function (d) {
.attr(
'class', function (d) {
return 'color ' + classify(color(d.label));
})
.attr('fill', function (d) {
.attr(
'fill', function (d) {
return color(d.label);
});

// update
bars
.attr('x', function (d) {
.attr(
'x', function (d) {
return xScale(d.x);
})
.attr('width', function () {
.attr(
'width', function () {
return xScale.rangeBand();
})
.attr('y', function (d) {
.attr(
'y', function (d) {
return yScale(d.y0 + d.y);
})
.attr('height', function (d) {
.attr(
'height', function (d) {
return yScale(d.y0) - yScale(d.y0 + d.y);
})
});

bars
.on('mouseover.bar', function (d, i) {
d3.select(this)
.classed('hover', true)
.style('stroke', '#333');
.style('stroke', '#333')
.style('cursor', 'pointer');

dispatch.hover(self.eventResponse(d, i));
d3.event.stopPropagation();
})
.on('mouseout.bar', function (d) {
d3.select(this)
.classed('hover', false)
.on('click.bar', function (d, i) {
dispatch.click(self.eventResponse(d, i));
d3.event.stopPropagation();
})
.on('mouseout.bar', function () {
d3.select(this).classed('hover', false)
.style('stroke', null);
});

Expand All @@ -153,7 +182,6 @@ define(function (require) {
});
};
};

return ColumnChart;
};
});
28 changes: 26 additions & 2 deletions src/kibana/components/vislib/modules/_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ define(function (require) {
var _ = require('lodash');
var $ = require('jquery');

var Events = Private(require('factories/events'));

_(Chart).inherits(Events);
function Chart(vis, el, chartData) {
Chart.Super.apply(this, arguments);
this.vis = vis;
this.chartEl = el;
this.chartData = chartData;
Expand All @@ -14,9 +18,29 @@ define(function (require) {
return d3.select(this.chartEl).call(this.draw());
};

Chart.prototype.on = function () {};
Chart.prototype.rebind = function () {
return d3.rebind(Chart.Super, Chart._attr.dispatch, 'on');
};

Chart.prototype.off = function () {};
Chart.prototype.on = function () {
var args = Array.prototype.slice.call(arguments);
var eventName = args[0];
var self = this;
console.log(this);

// This should only be called the first time to wire up the D3 event handler
if (!this._listners[eventName]) {
this.dispatch.on.call(this.dispatch, eventName, function () {
var eventArgs = Array.prototype.slice.call(arguments);
self.emit.apply(eventName, eventArgs);
});
}
Chart.Super.prototype.on.apply(this, args);
};

Chart.prototype.off = function (event) {
this.dispatch.on(event, null);
};

Chart.prototype.destroy = function () {};

Expand Down
3 changes: 3 additions & 0 deletions src/kibana/components/vislib/modules/_functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ define(function (require) {
.selectAll('.chart')
.each(function (chartData) {
var chart = new vis.ChartClass(vis, this, chartData);

d3.rebind(vis, chart._attr.dispatch, 'on');

charts.push(chart);
try {
chart.render();
Expand Down
60 changes: 0 additions & 60 deletions src/kibana/components/vislib/modules/eventDispatch.js
View file

This file was deleted.

10 changes: 4 additions & 6 deletions src/kibana/components/vislib/vis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,9 @@ define(function (require) {

function Vis($el, config) {
this.el = $el.get ? $el.get(0) : $el;
// this.config = config;
this.ChartClass = chartTypes[config.type];
this._attr = _.defaults(config || {}, {
'margin' : { top: 6, right: 0, bottom: 0, left: 0 },
'offset' : 'zero'
'margin' : { top: 6, right: 0, bottom: 0, left: 0 }
});
}

Expand Down Expand Up @@ -110,15 +108,15 @@ define(function (require) {
}, 300);

Vis.prototype.on = function () {
return this.chart.on();
return this.ChartClass.prototype.on.apply(this, arguments);
};

Vis.prototype.off = function () {
return this.chart.off();
return this.charts.off.apply(this.charts, arguments);
};

Vis.prototype.destroy = function () {
return this.chart.destroy();
return this.ChartClass.prototype.destroy.apply(this, arguments);
};

Vis.prototype.set = function (name, val) {
Expand Down

0 comments on commit a8297f2

Please sign in to comment.