docs(zoom.type): document zoom.type (#2447)

data/samples.yml

@@ -214,6 +214,10 @@ interaction_zoom:
   title: Zoom
   desc: Zoom by mouse wheel event and slide by drag.
 
+interaction_zoom_by_drag:
+  title: Zoom by Drag
+  desc: Zoom by dragging area.
+
 region:
   title: Region
   desc: Show rects on chart.

docs/js/samples/interaction_zoom_by_drag.js

@@ -0,0 +1,11 @@
+var chart = c3.generate({
+    data: {
+        columns: [
+            ['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
+        ]
+    },
+    zoom: {
+        enabled: true,
+        type: 'drag',
+    }
+});

docs/reference.html.haml

@@ -161,12 +161,13 @@
 
           %li Zoom
           = partial :reference_menu_item, locals: { id: 'zoom.enabled', experimental: true }
+          = partial :reference_menu_item, locals: { id: 'zoom.type', experimental: true }
           = partial :reference_menu_item, locals: { id: 'zoom.rescale', experimental: true }
           = partial :reference_menu_item, locals: { id: 'zoom.extent', experimental: true }
           = partial :reference_menu_item, locals: { id: 'zoom.onzoom', experimental: true }
           = partial :reference_menu_item, locals: { id: 'zoom.onzoomstart', experimental: true }
           = partial :reference_menu_item, locals: { id: 'zoom.onzoomend', experimental: true }
-          -#= partial :reference_menu_item, locals: { id: 'zoom.privileged', experimental: true }
+          = partial :reference_menu_item, locals: { id: 'zoom.disableDefaultBehavior', experimental: true }
 
           %li Point
           = partial :reference_menu_item, locals: { id: 'point.show' }
@@ -2920,6 +2921,25 @@
             %a( href="/samples/interaction_zoom.html" ) Zoom
       %hr
 
+      %section
+        %h3
+          = partial :reference_item_link, locals: { id: 'zoom.type', experimental: true }
+        %p There are two types of zoom behavior: 'scroll' and 'drag'
+        %h5 Default:
+        <code>'scroll'</code>
+        %h5 Format:
+        %div.sourcecode
+          %pre
+            %code.html.javascript
+              zoom: {
+              &nbsp;&nbsp;type: 'drag'
+              }
+        %h5 Example:
+        %ul
+          %li
+            %a( href="/samples/interaction_zoom_by_drag.html" ) Zoom by Drag
+      %hr
+
       %section
         %h3
           = partial :reference_item_link, locals: { id: 'zoom.rescale', experimental: true }
@@ -3003,6 +3023,24 @@
               }
       %hr
 
+      %section
+        %h3
+          = partial :reference_item_link, locals: { id: 'zoom.disableDefaultBehavior', experimental: true }
+        %p Disable the default animation of zoom. This option is useful when you want to get the zoomed domain by onzoom or onzoomend handlers and override the default animation behavior. See <a href="https://github.com/c3js/c3/pull/2439">#2439</a> for details.
+
+        %h5 Default:
+        <code>false</code>
+        %h5 Format:
+        %div.sourcecode
+          %pre
+            %code.html.javascript
+              zoom: {
+              &nbsp;&nbsp;enabled: true,
+              &nbsp;&nbsp;disableDefaultBehavior: true,
+              &nbsp;&nbsp;onzoomend: d => console.log(d)
+              }
+      %hr
+
       %section
         %h3
           = partial :reference_item_link, locals: { id: 'point.show' }

docs/samples/interaction_zoom_by_drag.html.haml

@@ -0,0 +1 @@
+= partial :sample, locals: { id: 'interaction_zoom_by_drag' }