Fix for d3.v5 (#2335)

c3js · May 14, 2018 · 765cc5f · 765cc5f
1 parent 9ed959a
commit 765cc5f
Show file tree

Hide file tree

Showing 101 changed files with 1,059 additions and 1,099 deletions.
diff --git a/bower.json b/bower.json
@@ -26,6 +26,6 @@
     "Gruntfile.*"
   ],
   "dependencies": {
-    "d3": "^4.12.0"
+    "d3": "^5.0.0"
   }
 }
diff --git a/c3.js b/c3.js
@@ -135,10 +135,6 @@
       return call && (typeof call === "object" || typeof call === "function") ? call : self;
     };
 
-    var toArray = function (arr) {
-      return Array.isArray(arr) ? arr : Array.from(arr);
-    };
-
     var isValue = function isValue(v) {
         return v || v === 0;
     };
@@ -5384,51 +5380,40 @@
 
     c3_chart_internal_fn.convertUrlToData = function (url, mimeType, headers, keys, done) {
         var $$ = this,
-            type = mimeType ? mimeType : 'csv';
-        var req = $$.d3.request(url);
-        if (headers) {
-            Object.keys(headers).forEach(function (header) {
-                req.header(header, headers[header]);
-            });
+            type = mimeType ? mimeType : 'csv',
+            f,
+            converter;
+
+        if (type === 'json') {
+            f = $$.d3.json;
+            converter = $$.convertJsonToData;
+        } else if (type === 'tsv') {
+            f = $$.d3.tsv;
+            converter = $$.convertXsvToData;
+        } else {
+            f = $$.d3.csv;
+            converter = $$.convertXsvToData;
         }
-        req.get(function (error, data) {
-            var d;
-            var dataResponse = data.response || data.responseText; // Fixes IE9 XHR issue; see #1345
-            if (!data) {
-                throw new Error(error.responseURL + ' ' + error.status + ' (' + error.statusText + ')');
-            }
-            if (type === 'json') {
-                d = $$.convertJsonToData(JSON.parse(dataResponse), keys);
-            } else if (type === 'tsv') {
-                d = $$.convertTsvToData(dataResponse);
-            } else {
-                d = $$.convertCsvToData(dataResponse);
-            }
-            done.call($$, d);
+
+        f(url, headers).then(function (data) {
+            done.call($$, converter.call($$, data, keys));
+        }).catch(function (error) {
+            throw error;
         });
     };
-    c3_chart_internal_fn.convertXsvToData = function (xsv, parser) {
-        var _parser$parseRows = parser.parseRows(xsv),
-            _parser$parseRows2 = toArray(_parser$parseRows),
-            keys = _parser$parseRows2[0],
-            rows = _parser$parseRows2.slice(1);
-
+    c3_chart_internal_fn.convertXsvToData = function (xsv) {
+        var keys = xsv.columns,
+            rows = xsv;
         if (rows.length === 0) {
             return { keys: keys, rows: [keys.reduce(function (row, key) {
                     return Object.assign(row, defineProperty({}, key, null));
                 }, {})] };
         } else {
             // [].concat() is to convert result into a plain array otherwise
             // test is not happy because rows have properties.
-            return { keys: keys, rows: [].concat(parser.parse(xsv)) };
+            return { keys: keys, rows: [].concat(xsv) };
         }
     };
-    c3_chart_internal_fn.convertCsvToData = function (csv) {
-        return this.convertXsvToData(csv, { parse: this.d3.csvParse, parseRows: this.d3.csvParseRows });
-    };
-    c3_chart_internal_fn.convertTsvToData = function (tsv) {
-        return this.convertXsvToData(tsv, { parse: this.d3.tsvParse, parseRows: this.d3.tsvParseRows });
-    };
     c3_chart_internal_fn.convertJsonToData = function (json, keys) {
         var $$ = this,
             new_rows = [],

diff --git a/component.json b/component.json
@@ -5,7 +5,7 @@
   "version": "0.5.4",
   "keywords": [],
   "dependencies": {
-    "mbostock/d3": "v3.5.6"
+    "mbostock/d3": "v5.0.0"
   },
   "development": {},
   "license": "MIT",

diff --git a/extensions/js/c3ext.js b/extensions/js/c3ext.js
@@ -19,7 +19,7 @@ c3ext.generate = function (options) {
     var _zoom2_maxItems;
 
     if (_zoom2_maxItems == null) {
-        var el = d3.select(options.bindto)[0][0];
+        var el = d3.select(options.bindto).node();
         if (el != null) {
             var availWidth = el.clientWidth;
 
@@ -377,4 +377,4 @@ if (typeof(Array.prototype.splitIntoChunksOf)=="undefined") {
         }
         return list;
     }
-}
+}
diff --git a/htdocs/samples/api_axis_label.html b/htdocs/samples/api_axis_label.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/api_axis_range.html b/htdocs/samples/api_axis_range.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/api_category.html b/htdocs/samples/api_category.html
@@ -6,7 +6,7 @@
     <div id="chart"></div>
     <div id="message"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/api_data_colors.html b/htdocs/samples/api_data_colors.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/api_flow.html b/htdocs/samples/api_flow.html
@@ -11,7 +11,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
@@ -65,7 +65,7 @@
             ['data1', 'data2', 'data3'],
             [500, 100, 200],
             [200, null, null],
-            [100, 50, null] 
+            [100, 50, null]
           ],
           duration: 1500,
 

diff --git a/htdocs/samples/api_flow_timeseries.html b/htdocs/samples/api_flow_timeseries.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/api_legend.html b/htdocs/samples/api_legend.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/api_tooltip_show.html b/htdocs/samples/api_tooltip_show.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/api_transform.html b/htdocs/samples/api_transform.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/api_xgrid_lines.html b/htdocs/samples/api_xgrid_lines.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/api_ygrid_lines.html b/htdocs/samples/api_ygrid_lines.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/api_zoom.html b/htdocs/samples/api_zoom.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/area_zerobased.html b/htdocs/samples/area_zerobased.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/axes_padding.html b/htdocs/samples/axes_padding.html
@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/axes_range.html b/htdocs/samples/axes_range.html
@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/axes_x_localtime.html b/htdocs/samples/axes_x_localtime.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
@@ -40,7 +40,7 @@
 
       var data4 = {
           x : 'date',
-          x_format : '%Y%m%d',
+          xFormat : '%Y%m%d',
           columns: [
             ['date', '20130101', '20130102', '20130103', '20130104', '20130105'],
             ['sample', 1030, 1200, 1100, 1400, 1150],
@@ -50,7 +50,7 @@
 
       var data5 = {
           x : 'date',
-          x_format : '%Y%m%d %H:%M:%S',
+          xFormat : '%Y%m%d %H:%M:%S',
           columns: [
             ['date', '20130101 00:00:00', '20130102 00:00:00', '20130103 00:00:00', '20130104 00:00:00', '20130105 00:00:00'],
             ['sample', 30, 200, 100, 400, 150],

diff --git a/htdocs/samples/axes_x_range_timeseries.html b/htdocs/samples/axes_x_range_timeseries.html
@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/axes_x_selection.html b/htdocs/samples/axes_x_selection.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

diff --git a/htdocs/samples/axes_x_tick_culling.html b/htdocs/samples/axes_x_tick_culling.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/axes_x_tick_fit.html b/htdocs/samples/axes_x_tick_fit.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/axes_x_tick_rotate.html b/htdocs/samples/axes_x_tick_rotate.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/axes_x_tick_values.html b/htdocs/samples/axes_x_tick_values.html
@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
@@ -48,7 +48,7 @@
           }
         }
       });
-      
+
 
     </script>
   </body>

diff --git a/htdocs/samples/axes_y2.html b/htdocs/samples/axes_y2.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/axes_y_default.html b/htdocs/samples/axes_y_default.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/bar_zerobased.html b/htdocs/samples/bar_zerobased.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

diff --git a/htdocs/samples/bindto.html b/htdocs/samples/bindto.html
@@ -7,7 +7,7 @@
     <div class="chart2" style="height:150px;"></div>
     <div class="chart3" style="height:150px;"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart1 = c3.generate({

diff --git a/htdocs/samples/categorized.html b/htdocs/samples/categorized.html
@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>