c3 - npm Package Compare versions

Comparing version 0.4.22 to 0.4.23

component.json

@@ -5,3 +5,3 @@ {
   "description": "A D3-based reusable chart library",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "keywords": [],
@@ -8,0 +8,0 @@ "dependencies": {

package.json

 {
   "name": "c3",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "description": "D3-based reusable chart library",
@@ -5,0 +5,0 @@ "main": "c3.js",

spec/axis-spec.js

@@ -525,2 +525,27 @@ describe('c3 chart axis', function () {
                 });
+
+                describe('with multilineMax', function() {
+                    beforeAll(function() {
+                        args.axis.x.tick = {
+                            multiline: true,
+                            multilineMax: 2,
+                        };
+                    });
+
+                    it('should ellipsify x tick properly', function() {
+                        var tick = chart.internal.main.select('.c3-axis-x').select('g.tick');
+                        var tspans = tick.selectAll('tspan');
+                        var expectedTickText = [
+                            'this is a very long',
+                            'tick text on categ...',
+                        ];
+
+                        expect(tspans.size()).toBe(2);
+
+                        tspans.each(function (d, i) {
+                            var tspan = d3.select(this);
+                            expect(tspan.text()).toBe(expectedTickText[i]);
+                        });
+                    });
+                });
             });
@@ -527,0 +552,0 @@ });

src/axis.js

@@ -114,2 +114,7 @@ import CLASS from './class';
     var splitted = internal.params.tickMultiline ? internal.splitTickText(d, ticks, scale) : [].concat(internal.textFormatted(d));
+
+    if (internal.params.tickMultiline && internal.params.tickMultilineMax > 0) {
+        splitted = internal.ellipsify(splitted, internal.params.tickMultilineMax);
+    }
+
     return splitted.map(function (s) {
@@ -154,2 +159,23 @@ return { index: i, splitted: s, length: splitted.length };
 };
+c3_axis_internal_fn.ellipsify = function(splitted, max) {
+    if (splitted.length <= max) {
+        return splitted;
+    }
+
+    var ellipsified = splitted.slice(0, max);
+    var remaining = 3;
+    for (var i = max-1 ; i >= 0 ; i--) {
+        var available = ellipsified[i].length;
+
+        ellipsified[i] = ellipsified[i].substr(0, available-remaining).padEnd(available, '.');
+
+        remaining -= available;
+
+        if (remaining <= 0) {
+            break;
+        }
+    }
+
+    return ellipsified;
+};
 c3_axis_internal_fn.updateTickLength = function () {
@@ -427,2 +453,3 @@ var internal = this;
             tickMultiline: config.axis_x_tick_multiline,
+            tickMultilineMax: config.axis_x_tick_multiline ? Number(config.axis_x_tick_multilineMax) : 0,
             tickWidth: config.axis_x_tick_width,
@@ -429,0 +456,0 @@ tickTextRotate: withoutRotateTickText ? 0 : config.axis_x_tick_rotate,

src/config.js

@@ -110,2 +110,3 @@ import { c3_chart_internal_fn } from './core';
         axis_x_tick_multiline: true,
+        axis_x_tick_multilineMax: 0,
         axis_x_tick_width: null,
@@ -112,0 +113,0 @@ axis_x_max: undefined,

src/core.js

@@ -5,3 +5,3 @@ import Axis from './axis';
 
-export var c3 = { version: "0.4.22" };
+export var c3 = { version: "0.4.23" };
 
@@ -8,0 +8,0 @@ export var c3_chart_fn;

src/polyfill.js

@@ -874,2 +874,23 @@ /* jshint ignore:start */
 
+// String.padEnd polyfill for IE11
+//
+// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
+if (!String.prototype.padEnd) {
+    String.prototype.padEnd = function padEnd(targetLength,padString) {
+        targetLength = targetLength>>0; //floor if number or convert non-number to 0;
+        padString = String((typeof padString !== 'undefined' ? padString : ' '));
+        if (this.length > targetLength) {
+            return String(this);
+        }
+        else {
+            targetLength = targetLength-this.length;
+            if (targetLength > padString.length) {
+                padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
+            }
+            return String(this) + padString.slice(0,targetLength);
+        }
+    };
+}
+
 /* jshint ignore:end */

No alert changes

Improved metrics

Total package byte prevSize

1538895

0.34%

Lines of code

23480

0.44%

No dependency changes