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

Add tooltip.grouped option - #307

pull/310/head
Masayuki Tanaka 10 years ago
parent
ae1584aa2f
commit
8aa466f09b
4 changed files with 205 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      c3.js
  2. 6
      c3.min.js
  3. 148
      htdocs/samples/selection.html
  4. 26
      htdocs/samples/tooltip_grouped.html

48
c3.js
Unescape View File

@ -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
showXGridFocus(selectedData);
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) {

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

148
htdocs/samples/selection.html
Unescape View File

@ -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>

26
htdocs/samples/tooltip_grouped.html
Unescape View File

@ -0,0 +1,26 @@
<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>
Write Preview
Loading…
Cancel
Save