Add tooltip.grouped option - #307

c3.js

@@ -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) {
-                    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)
-                        .filter(function (d) { return __data_selection_isselectable(d); })
                         .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) {
                             if (this.nodeName === 'circle') {
@@ -3183,13 +3194,16 @@
                                 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) {

htdocs/samples/selection.html

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