Skip to content

C
c3-closed
Commit 8aa466f0 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Add tooltip.grouped option - #307

parent ae1584aa
Show whitespace changes
Inline Side-by-side
Showing with 201 additions and 19 deletions
c3.js
View file @ 8aa466f0
......@@ -286,6 +286,7 @@
// tooltip - show when mouseover on each data
var __tooltip_show = getConfig(['tooltip', 'show'], true),
__tooltip_grouped = getConfig(['tooltip', 'grouped'], true),
__tooltip_format_title = getConfig(['tooltip', 'format', 'title']),
__tooltip_format_name = getConfig(['tooltip', 'format', 'name']),
__tooltip_format_value = getConfig(['tooltip', 'format', 'value']),
......@@ -3128,7 +3129,7 @@
});
selectedData = newData.concat(selectedData); // Add remained
// Expand shapes if needed
// Expand shapes for selection
if (__point_focus_expand_enabled) { expandCircles(index); }
expandBars(index);
......@@ -3151,7 +3152,7 @@
});
})
.on('mousemove', function (d) {
var selectedData, index = d.index;
var selectedData, index = d.index, eventRect = svg.select('.' + CLASS.eventRect + '-' + index);
if (dragging) { return; } // do nothing when dragging
if (hasArcType(c3.data.targets)) { return; }
......@@ -3160,20 +3161,30 @@
selectedData = filterTargetsToShow(c3.data.targets).map(function (t) {
return addName(getValueOnIndex(t.values, index));
});
showTooltip(selectedData, d3.mouse(this));
// Show xgrid focus line
if (__tooltip_grouped) {
showTooltip(selectedData, d3.mouse(this));
showXGridFocus(selectedData);
}
if (! __data_selection_enabled) { return; }
if (__data_selection_grouped) { return; } // nothing to do when grouped
if (__tooltip_grouped && (!__data_selection_enabled || __data_selection_grouped)) {
return;
}
main.selectAll('.' + CLASS.shape + '-' + index)
.filter(function (d) { return __data_selection_isselectable(d); })
.each(function () {
var _this = d3.select(this).classed(CLASS.EXPANDED, true);
if (this.nodeName === 'circle') { _this.attr('r', pointExpandedR); }
svg.select('.' + CLASS.eventRect + '-' + index).style('cursor', null);
d3.select(this).classed(CLASS.EXPANDED, true);
if (__data_selection_enabled) {
eventRect.style('cursor', __data_selection_grouped ? 'pointer' : null);
}
if (!__tooltip_grouped) {
hideXGridFocus();
hideTooltip();
if (!__data_selection_grouped) {
unexpandCircles(index);
unexpandBars();
}
}
})
.filter(function (d) {
if (this.nodeName === 'circle') {
......@@ -3183,13 +3194,16 @@
return isWithinBar(this);
}
})
.each(function () {
var _this = d3.select(this);
if (! _this.classed(CLASS.EXPANDED)) {
_this.classed(CLASS.EXPANDED, true);
if (this.nodeName === 'circle') { _this.attr('r', pointSelectR); }
.each(function (d) {
if (__data_selection_enabled && (__data_selection_grouped || __data_selection_isselectable(d))) {
eventRect.style('cursor', 'pointer');
}
if (!__tooltip_grouped) {
showTooltip([d], d3.mouse(this));
showXGridFocus([d]);
if (__point_focus_expand_enabled) { expandCircles(index, d.id); }
expandBars(index, d.id);
}
svg.select('.' + CLASS.eventRect + '-' + index).style('cursor', 'pointer');
});
})
.on('click', function (d) {
......
c3.min.js
View file @ 8aa466f0
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/samples/selection.html
View file @ 8aa466f0
......@@ -3,12 +3,36 @@
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
grouped => true, multiple => true
<div id="chart1"></div>
grouped => true, multiple => true, tooltip.grouped = false
<div id="chart1-1"></div>
grouped => true, multiple => false
<div id="chart2"></div>
grouped => true, multiple => false, tooltip.grouped = false
<div id="chart2-1"></div>
grouped => false, multiple => true
<div id="chart3"></div>
grouped => false, multiple => true, tooltip.grouped = false
<div id="chart3-1"></div>
grouped => false, multiple => false
<div id="chart4"></div>
grouped => false, multiple => false, tooltip.grouped = false
<div id="chart4-1"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
......@@ -17,7 +41,7 @@
selection: {
enabled: true,
grouped: true,
multiple: false,
multiple: true,
},
onclick: function (d, element) { console.log("onclick", d, element); },
onselected: function (d, element) { console.log("onselected", d, element); },
......@@ -26,6 +50,124 @@
ondragend: function () { console.log("ondragend"); },
},
});
var chart11 = c3.generate({
bindto: '#chart1-1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: true,
multiple: true,
},
},
tooltip: {
grouped: false
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: true,
multiple: false,
}
}
});
var chart21 = c3.generate({
bindto: '#chart2-1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: true,
multiple: false,
}
},
tooltip: {
grouped: false
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: false,
multiple: true,
}
}
});
var chart31 = c3.generate({
bindto: '#chart3-1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: false,
multiple: true,
}
},
tooltip: {
grouped: false
}
});
var chart4 = c3.generate({
bindto: '#chart4',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: false,
multiple: false,
}
}
});
var chart41 = c3.generate({
bindto: '#chart4-1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: false,
multiple: false,
}
},
tooltip: {
grouped: false
}
});
</script>
</body>
</html>
htdocs/samples/tooltip_grouped.html 0 → 100644
View file @ 8aa466f0
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
tooltip: {
grouped: false
}
});
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment