Fix flow API

c3.js

@@ -3740,8 +3740,7 @@
                     .style("fill", color)
                     .style("fill-opacity", 0);
                 mainText
-                    .text(function (d) { return formatByAxisId(getAxisId(d.id))(d.value, d.id); })
-                    .style("fill-opacity", initialOpacityForText);
+                    .text(function (d) { return formatByAxisId(getAxisId(d.id))(d.value, d.id); });
                 mainText.exit()
                   .transition().duration(durationForExit)
                     .style('fill-opacity', 0)
@@ -4012,7 +4011,7 @@
                     .attr('x', xForText)
                     .attr('y', yForText)
                     .style("fill", color)
-                    .style("fill-opacity", opacityForText));
+                    .style("fill-opacity", options.flow ? 0 : initialOpacityForText));
                 waitForDraw.add(mainRegion.selectAll('rect').transition()
                     .attr("x", regionX)
                     .attr("y", regionY)
@@ -4055,9 +4054,13 @@
                 // generate transform to flow
                 if (!options.flow.orgDataCount) { // if empty
                     if (isTimeSeries) {
-                        flowStart = getValueOnIndex(c3.data.targets[0].values, 0);
-                        flowEnd = getValueOnIndex(c3.data.targets[0].values, c3.data.targets[0].values.length - 1);
-                        translateX = x(flowStart.x) - x(flowEnd.x);
+                        if (c3.data.targets[0].values.length !== 1) {
+                            translateX = x(orgDomain[0]) - x(domain[0]);
+                        } else {
+                            flowStart = getValueOnIndex(c3.data.targets[0].values, 0);
+                            flowEnd = getValueOnIndex(c3.data.targets[0].values, c3.data.targets[0].values.length - 1);
+                            translateX = x(flowStart.x) - x(flowEnd.x);
+                        }
                     } else {
                         if (c3.data.targets[0].values.length !== 1) {
                             translateX = (domain[0] - orgDomain[0] >= 1 ? x(orgDomain[0]) : 0) - x(flowEnd.x);
@@ -4068,8 +4071,11 @@
                 } else if (options.flow.orgDataCount === 1 || flowStart.x === flowEnd.x) {
                     translateX = x(orgDomain[0]) - x(domain[0]);
                 } else {
-                    // TODO: fix 0.9, I don't know why 0.9..
-                    translateX = (x(flowStart.x) - x(flowEnd.x)) * (isTimeSeries ? 0.9 : 1);
+                    if (isTimeSeries) {
+                        translateX = (x(orgDomain[0]) - x(domain[0]));
+                    } else {
+                        translateX = (x(flowStart.x) - x(flowEnd.x));
+                    }
                 }
                 scaleX = (diffDomain(orgDomain) / diffDomain(domain));
                 transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)';
@@ -4129,7 +4135,8 @@
                     mainText
                         .attr('transform', null)
                         .attr('x', xForText)
-                        .attr('y', yForText);
+                        .attr('y', yForText)
+                        .style('fill-opacity', opacityForText);
                     mainRegion
                         .attr('transform', null);
                     mainRegion.select('rect').filter(isRegionOnX)

htdocs/samples/api_flow.html

@@ -15,7 +15,7 @@
     <script src="/js/c3.js"></script>
     <script>
 
-      var chart, generate = function () { return c3.generate({
+      var padding = {}, chart, generate = function () { return c3.generate({
         data: {
           columns: [
             ['data1'],
@@ -32,12 +32,7 @@
         },
         axis: {
           x: {
-/*
-            padding: {
-              left: 0,
-              right: 0,
-            }
-*/
+            padding: padding
           },
           y: {
 /*
@@ -62,6 +57,8 @@
       });
       };
 
+    function run() {
+
       chart = generate();
 
       setTimeout(function () {
@@ -192,7 +189,7 @@
           ],
           to: 1,
         });
-      }, 17000);
+      }, 18000);
 
       setTimeout(function () {
         chart.flow({
@@ -202,7 +199,16 @@
             ['data3', 400]
           ]
         });
-      }, 18000);
+      }, 19000);
+
+    }
+
+    run();
+
+    setTimeout(function () {
+      padding = {left: 0, right: 0};
+      run();
+    }, 22000);
 
     </script>
   </body>

htdocs/samples/api_flow_timeseries.html

@@ -9,6 +9,8 @@
     <script src="/js/c3.js"></script>
     <script>
 
+      var padding = {};
+
       var generate = function () { return c3.generate({
         data: {
           x: 'x',
@@ -36,12 +38,7 @@
             tick: {
               format: '%m/%d',
             },
-/*
-            padding: {
-              left: 0,
-              right: 0
-            }
-*/
+            padding: padding
           },
           y: {
 /*
@@ -60,7 +57,11 @@
           }
         }
 */
-      }); }, chart = generate();
+      }); }, chart;
+
+    function run() {
+
+      chart = generate();
 
       setTimeout(function () {
         chart.flow({
@@ -87,6 +88,7 @@
       }, 4000);
 
       setTimeout(function () {
+        console.log("Flow 1");
         chart.flow({
           columns: [
             ['x', '2013-03-01', '2013-03-08'],
@@ -94,7 +96,7 @@
             ['data2', 300, 400],
             ['data3', 400, 200]
           ],
-          to: '2013-02-15',
+          to: '2013-02-08',
           duration: 1500
         });
       }, 7000);
@@ -112,7 +114,6 @@
         });
       }, 10000);
 
-/*
       setTimeout(function () {
         chart = generate();
       }, 14000);
@@ -120,9 +121,9 @@
       setTimeout(function () {
         chart.flow({
           columns: [
-            ['x', '2013-01-21', '2013-01-25'],
-            ['data1', 500, 300],
-            ['data3', 200, 150],
+            ['x', '2013-01-21', '2013-01-25', '2013-01-26'],
+            ['data1', 500, 300, 100],
+            ['data3', 200, 150, null],
           ],
           duration: 1500
         });
@@ -149,10 +150,19 @@
             ['data2', 300],
             ['data3', 400]
           ],
+          to: '2013-02-01',
           duration: 1500
         });
       }, 21000);
-*/
+    };
+
+    run();
+
+    setTimeout(function () {
+      padding = {left: 0, right: 0};
+      run();
+    }, 25000);
+
     </script>
   </body>
 </html>