playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Use data.onclick/onmouseover/onmouseout on pie/donut/gauge instead of its callbacks - #369

pull/373/merge
Masayuki Tanaka 11 years ago
parent
a321894845
commit
ed67f04e79
5 changed files with 33 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      c3.js
  2. 6
      c3.min.js
  3. 6
      htdocs/samples/chart_donut.html
  4. 5
      htdocs/samples/chart_gauge.html
  5. 8
      htdocs/samples/chart_pie.html

72
c3.js
Unescape View File

@ -265,10 +265,7 @@
__pie_label_format = getConfig(['pie', 'label', 'format']), __pie_label_format = getConfig(['pie', 'label', 'format']),
__pie_label_threshold = getConfig(['pie', 'label', 'threshold'], 0.05), __pie_label_threshold = getConfig(['pie', 'label', 'threshold'], 0.05),
__pie_sort = getConfig(['pie', 'sort'], true), __pie_sort = getConfig(['pie', 'sort'], true),
__pie_expand = getConfig(['pie', 'expand'], true), __pie_expand = getConfig(['pie', 'expand'], true);
__pie_onclick = getConfig(['pie', 'onclick'], function () {}),
__pie_onmouseover = getConfig(['pie', 'onmouseover'], function () {}),
__pie_onmouseout = getConfig(['pie', 'onmouseout'], function () {});
// gauge // gauge
var __gauge_label_show = getConfig(['gauge', 'label', 'show'], true), var __gauge_label_show = getConfig(['gauge', 'label', 'show'], true),
@ -276,9 +273,6 @@
__gauge_expand = getConfig(['gauge', 'expand'], true), __gauge_expand = getConfig(['gauge', 'expand'], true),
__gauge_min = getConfig(['gauge', 'min'], 0), __gauge_min = getConfig(['gauge', 'min'], 0),
__gauge_max = getConfig(['gauge', 'max'], 100), __gauge_max = getConfig(['gauge', 'max'], 100),
__gauge_onclick = getConfig(['gauge', 'onclick'], function () {}),
__gauge_onmouseover = getConfig(['gauge', 'onmouseover'], function () {}),
__gauge_onmouseout = getConfig(['gauge', 'onmouseout'], function () {}),
__gauge_units = getConfig(['gauge', 'units']), __gauge_units = getConfig(['gauge', 'units']),
__gauge_width = getConfig(['gauge', 'width']); __gauge_width = getConfig(['gauge', 'width']);
@ -288,10 +282,7 @@
__donut_label_threshold = getConfig(['donut', 'label', 'threshold'], 0.05), __donut_label_threshold = getConfig(['donut', 'label', 'threshold'], 0.05),
__donut_sort = getConfig(['donut', 'sort'], true), __donut_sort = getConfig(['donut', 'sort'], true),
__donut_expand = getConfig(['donut', 'expand'], true), __donut_expand = getConfig(['donut', 'expand'], true),
__donut_title = getConfig(['donut', 'title'], ""), __donut_title = getConfig(['donut', 'title'], "");
__donut_onclick = getConfig(['donut', 'onclick'], function () {}),
__donut_onmouseover = getConfig(['donut', 'onmouseover'], function () {}),
__donut_onmouseout = getConfig(['donut', 'onmouseout'], function () {});
// region - region to change style // region - region to change style
var __regions = getConfig(['regions'], []); var __regions = getConfig(['regions'], []);
@ -1030,13 +1021,19 @@
pie.sort(null); pie.sort(null);
} }
function descByStartAngle(a, b) {
return a.startAngle - b.startAngle;
}
function updateAngle(d) { function updateAngle(d) {
var found = false; var found = false, index = 0;
pie(filterTargetsToShow(c3.data.targets)).forEach(function (t) { pie(filterTargetsToShow(c3.data.targets)).sort(descByStartAngle).forEach(function (t) {
if (! found && t.data.id === d.data.id) { if (! found && t.data.id === d.data.id) {
found = true; found = true;
d = t; d = t;
d.index = index;
} }
index++;
}); });
if (isNaN(d.endAngle)) { if (isNaN(d.endAngle)) {
d.endAngle = d.startAngle; d.endAngle = d.startAngle;
@ -1094,7 +1091,8 @@
return addName({ return addName({
id: d.data.id, id: d.data.id,
value: d.value, value: d.value,
ratio: getArcRatio(d) ratio: getArcRatio(d),
index: d.index,
}); });
} }
function textForArcLabel(d) { function textForArcLabel(d) {
@ -1162,33 +1160,6 @@
function getArcTitle() { function getArcTitle() {
return hasDonutType(c3.data.targets) ? __donut_title : ""; return hasDonutType(c3.data.targets) ? __donut_title : "";
} }
function getArcOnClick() {
var callback = __pie_onclick;
if (hasGaugeType(c3.data.targets)) {
callback = __gauge_onclick;
} else if (hasDonutType(c3.data.targets)) {
callback = __donut_onclick;
}
return typeof callback === 'function' ? callback : function () {};
}
function getArcOnMouseOver() {
var callback = __pie_onmouseover;
if (hasGaugeType(c3.data.targets)) {
callback = __gauge_onmouseover;
} else if (hasDonutType(c3.data.targets)) {
callback = __donut_onmouseover;
}
return typeof callback === 'function' ? callback : function () {};
}
function getArcOnMouseOut() {
var callback = __pie_onmouseout;
if (hasGaugeType(c3.data.targets)) {
callback = __gauge_onmouseout;
} else if (hasDonutType(c3.data.targets)) {
callback = __donut_onmouseout;
}
return typeof callback === 'function' ? callback : function () {};
}
//-- Domain --// //-- Domain --//
@ -3832,41 +3803,38 @@
} }
this._current = d; this._current = d;
}) })
.on('mouseover', function (d, i) { .on('mouseover', function (d) {
var updated, arcData, callback; var updated, arcData;
if (transiting) { // skip while transiting if (transiting) { // skip while transiting
return; return;
} }
updated = updateAngle(d); updated = updateAngle(d);
arcData = convertToArcData(updated); arcData = convertToArcData(updated);
callback = getArcOnMouseOver();
// transitions // transitions
expandArc(updated.data.id); expandArc(updated.data.id);
toggleFocusLegend(updated.data.id, true); toggleFocusLegend(updated.data.id, true);
callback.call(c3, arcData, i); __data_onmouseover.call(c3, arcData, this);
}) })
.on('mousemove', function (d) { .on('mousemove', function (d) {
var updated = updateAngle(d), arcData = convertToArcData(updated), selectedData = [arcData]; var updated = updateAngle(d), arcData = convertToArcData(updated), selectedData = [arcData];
showTooltip(selectedData, d3.mouse(this)); showTooltip(selectedData, d3.mouse(this));
}) })
.on('mouseout', function (d, i) { .on('mouseout', function (d) {
var updated, arcData, callback; var updated, arcData;
if (transiting) { // skip while transiting if (transiting) { // skip while transiting
return; return;
} }
updated = updateAngle(d); updated = updateAngle(d);
arcData = convertToArcData(updated); arcData = convertToArcData(updated);
callback = getArcOnMouseOut();
// transitions // transitions
unexpandArc(updated.data.id); unexpandArc(updated.data.id);
revertLegend(); revertLegend();
hideTooltip(); hideTooltip();
callback.call(c3, arcData, i); __data_onmouseout.call(c3, arcData, this);
}) })
.on('click', function (d, i) { .on('click', function (d, i) {
var updated = updateAngle(d), arcData = convertToArcData(updated), callback = getArcOnClick(); var updated = updateAngle(d), arcData = convertToArcData(updated);
toggleShape(this, d, i); toggleShape(this, arcData, i); // onclick called in toogleShape()
callback.call(c3, arcData, i);
}); });
mainArc mainArc
.attr("transform", function (d) { return !isGaugeType(d.data) && withTransform ? "scale(0)" : ""; }) .attr("transform", function (d) { return !isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
htdocs/samples/chart_donut.html
Unescape View File

@ -19,6 +19,9 @@
// ["virginica", 50], // ["virginica", 50],
], ],
type : 'donut', type : 'donut',
onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
onclick: function (d, i) { console.log("onclick", d, i, this); },
}, },
axis: { axis: {
x: { x: {
@ -33,9 +36,6 @@
// format: function (d, ratio) { return ""; } // format: function (d, ratio) { return ""; }
}, },
title: "Iris Petal Width", title: "Iris Petal Width",
onmouseover: function (d, i) { console.log(d, i); },
onmouseout: function (d, i) { console.log(d, i); },
onclick: function (d, i) { console.log(d, i); },
} }
}); });

5
htdocs/samples/chart_gauge.html
Unescape View File

@ -13,7 +13,10 @@
columns: [ columns: [
[ 'data', 91.4 ] [ 'data', 91.4 ]
], ],
type: 'gauge' type: 'gauge',
onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
onclick: function (d, i) { console.log("onclick", d, i, this); },
}, },
gauge: { gauge: {
label: { label: {

8
htdocs/samples/chart_pie.html
Unescape View File

@ -19,6 +19,9 @@
// ["virginica", 50], // ["virginica", 50],
], ],
type : 'pie', type : 'pie',
onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
onclick: function (d, i) { console.log("onclick", d, i, this); },
}, },
axis: { axis: {
x: { x: {
@ -27,11 +30,6 @@
y: { y: {
label: 'Petal.Width' label: 'Petal.Width'
} }
},
pie: {
onmouseover: function (d, i) { console.log(d, i); },
onmouseout: function (d, i) { console.log(d, i); },
onclick: function (d, i) { console.log(d, i); },
} }
}); });

Write Preview
Loading…
Cancel
Save