Skip to content

C
c3-closed
You need to sign in or sign up before continuing.
Commit 8aa466f0 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Add tooltip.grouped option - #307

parent ae1584aa
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 20 deletions
c3.js
View file @ 8aa466f0
...@@ -286,6 +286,7 @@ ...@@ -286,6 +286,7 @@
// tooltip - show when mouseover on each data // tooltip - show when mouseover on each data
var __tooltip_show = getConfig(['tooltip', 'show'], true), var __tooltip_show = getConfig(['tooltip', 'show'], true),
__tooltip_grouped = getConfig(['tooltip', 'grouped'], true),
__tooltip_format_title = getConfig(['tooltip', 'format', 'title']), __tooltip_format_title = getConfig(['tooltip', 'format', 'title']),
__tooltip_format_name = getConfig(['tooltip', 'format', 'name']), __tooltip_format_name = getConfig(['tooltip', 'format', 'name']),
__tooltip_format_value = getConfig(['tooltip', 'format', 'value']), __tooltip_format_value = getConfig(['tooltip', 'format', 'value']),
...@@ -3128,7 +3129,7 @@ ...@@ -3128,7 +3129,7 @@
}); });
selectedData = newData.concat(selectedData); // Add remained selectedData = newData.concat(selectedData); // Add remained
// Expand shapes if needed // Expand shapes for selection
if (__point_focus_expand_enabled) { expandCircles(index); } if (__point_focus_expand_enabled) { expandCircles(index); }
expandBars(index); expandBars(index);
...@@ -3151,7 +3152,7 @@ ...@@ -3151,7 +3152,7 @@
}); });
}) })
.on('mousemove', function (d) { .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 (dragging) { return; } // do nothing when dragging
if (hasArcType(c3.data.targets)) { return; } if (hasArcType(c3.data.targets)) { return; }
...@@ -3160,20 +3161,30 @@ ...@@ -3160,20 +3161,30 @@
selectedData = filterTargetsToShow(c3.data.targets).map(function (t) { selectedData = filterTargetsToShow(c3.data.targets).map(function (t) {
return addName(getValueOnIndex(t.values, index)); return addName(getValueOnIndex(t.values, index));
}); });
showTooltip(selectedData, d3.mouse(this));
// Show xgrid focus line if (__tooltip_grouped) {
showXGridFocus(selectedData); showTooltip(selectedData, d3.mouse(this));
showXGridFocus(selectedData);
}
if (! __data_selection_enabled) { return; } if (__tooltip_grouped && (!__data_selection_enabled || __data_selection_grouped)) {
if (__data_selection_grouped) { return; } // nothing to do when grouped return;
}
main.selectAll('.' + CLASS.shape + '-' + index) main.selectAll('.' + CLASS.shape + '-' + index)
.filter(function (d) { return __data_selection_isselectable(d); })
.each(function () { .each(function () {
var _this = d3.select(this).classed(CLASS.EXPANDED, true); d3.select(this).classed(CLASS.EXPANDED, true);
if (this.nodeName === 'circle') { _this.attr('r', pointExpandedR); } if (__data_selection_enabled) {
svg.select('.' + CLASS.eventRect + '-' + index).style('cursor', null); eventRect.style('cursor', __data_selection_grouped ? 'pointer' : null);
}
if (!__tooltip_grouped) {
hideXGridFocus();
hideTooltip();
if (!__data_selection_grouped) {
unexpandCircles(index);
unexpandBars();
}
}
}) })
.filter(function (d) { .filter(function (d) {
if (this.nodeName === 'circle') { if (this.nodeName === 'circle') {
...@@ -3183,13 +3194,16 @@ ...@@ -3183,13 +3194,16 @@
return isWithinBar(this); return isWithinBar(this);
} }
}) })
.each(function () { .each(function (d) {
var _this = d3.select(this); if (__data_selection_enabled && (__data_selection_grouped || __data_selection_isselectable(d))) {
if (! _this.classed(CLASS.EXPANDED)) { eventRect.style('cursor', 'pointer');
_this.classed(CLASS.EXPANDED, true); }
if (this.nodeName === 'circle') { _this.attr('r', pointSelectR); } 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) { .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 @@ ...@@ -3,12 +3,36 @@
<link href="/css/c3.css" rel="stylesheet" type="text/css"> <link href="/css/c3.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <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="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({
var chart1 = c3.generate({
bindto: '#chart1',
data: { data: {
columns: [ columns: [
['data1', 30, 200, 100, 400, 150, 250], ['data1', 30, 200, 100, 400, 150, 250],
...@@ -17,7 +41,7 @@ ...@@ -17,7 +41,7 @@
selection: { selection: {
enabled: true, enabled: true,
grouped: true, grouped: true,
multiple: false, multiple: true,
}, },
onclick: function (d, element) { console.log("onclick", d, element); }, onclick: function (d, element) { console.log("onclick", d, element); },
onselected: function (d, element) { console.log("onselected", d, element); }, onselected: function (d, element) { console.log("onselected", d, element); },
...@@ -26,6 +50,124 @@ ...@@ -26,6 +50,124 @@
ondragend: function () { console.log("ondragend"); }, 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> </script>
</body> </body>
</html> </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