Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
c3 - npm Package Compare versions
Comparing version 0.4.10-rc4 to 0.4.10-rc5
@@ -7,3 +7,3 @@ { | ||
| ], | ||
| "version": "0.4.10-rc4", | ||
| "version": "0.4.10-rc5", | ||
| "homepage": "https://github.com/masayuki0812/c3", | ||
@@ -10,0 +10,0 @@ "authors": [ |
@@ -5,3 +5,3 @@ { | ||
| "description": "A D3-based reusable chart library", | ||
| "version": "0.4.10-rc4", | ||
| "version": "0.4.10-rc5", | ||
| "keywords": [], | ||
@@ -8,0 +8,0 @@ "dependencies": { |
| { | ||
| "name": "c3", | ||
| "version": "0.4.10-rc4", | ||
| "version": "0.4.10-rc5", | ||
| "description": "D3-based reusable chart library", | ||
@@ -5,0 +5,0 @@ "main": "c3.js", |
@@ -565,4 +565,6 @@ describe('c3 chart axis', function () { | ||
| it('should have automatically calculated x axis height', function () { | ||
| var box = chart.internal.main.select('.c3-axis-x').node().getBoundingClientRect(); | ||
| var box = chart.internal.main.select('.c3-axis-x').node().getBoundingClientRect(), | ||
| height = chart.internal.getHorizontalAxisHeight('x'); | ||
| expect(box.height).toBeGreaterThan(50); | ||
| expect(height).toBeCloseTo(70, -1); | ||
| }); | ||
@@ -569,0 +571,0 @@ |
@@ -10,209 +10,68 @@ describe('c3 chart data', function () { | ||
| describe('data.lables', function () { | ||
| describe('load json', function () { | ||
| describe('on line chart', function () { | ||
| it('should update args', function () { | ||
| args = { | ||
| data: { | ||
| columns: [ | ||
| ['data1', 1030, 2200, 2100], | ||
| ['data2', 1150, 2010, 1200], | ||
| ['data3', -1150, -2010, -1200], | ||
| ['data4', -1030, -2200, -2100], | ||
| ], | ||
| type: 'line', | ||
| labels: true, | ||
| it('should update args', function () { | ||
| args = { | ||
| data: { | ||
| json: { | ||
| data1: [30, 20, 50], | ||
| data2: [200, 130, 90] | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [128, 38, 46], | ||
| data2: [119, 53, 115], | ||
| data3: [311, 377, 315], | ||
| data4: [302, 392, 384], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [6, 294, 583], | ||
| data2: [6, 294, 583], | ||
| data3: [6, 294, 583], | ||
| data4: [6, 294, 583], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| it('should draw correctly', function () { | ||
| var expectedCx = [6, 299, 593], | ||
| expectedCy = [370, 390, 331]; | ||
| d3.selectAll('.c3-circles-data1 .c3-circle').each(function (d, i) { | ||
| var circle = d3.select(this); | ||
| expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], -2); | ||
| expect(+circle.attr('cy')).toBeCloseTo(expectedCy[i], -2); | ||
| }); | ||
| it('should update args to be stacked', function () { | ||
| args.data.groups = [['data1', 'data2'], ['data3', 'data4']]; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [120, 38, 75], | ||
| data2: [161, 127, 159], | ||
| data3: [269, 303, 271], | ||
| data4: [310, 392, 355], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [6, 294, 583], | ||
| data2: [6, 294, 583], | ||
| data3: [6, 294, 583], | ||
| data4: [6, 294, 583], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('on area chart', function () { | ||
| it('should update args', function () { | ||
| args = { | ||
| data: { | ||
| columns: [ | ||
| ['data1', 1030, 2200, 2100], | ||
| ['data2', 1150, 2010, 1200], | ||
| ['data3', -1150, -2010, -1200], | ||
| ['data4', -1030, -2200, -2100], | ||
| ], | ||
| type: 'area', | ||
| labels: true, | ||
| it('should update args', function () { | ||
| args = { | ||
| data: { | ||
| json: [{ | ||
| "date": "2014-06-03", | ||
| "443": "3000", | ||
| "995": "500" | ||
| }, { | ||
| "date": "2014-06-04", | ||
| "443": "1000" | ||
| }, { | ||
| "date": "2014-06-05", | ||
| "443": "5000", | ||
| "995": "1000" | ||
| }], | ||
| keys: { | ||
| x: 'date', | ||
| value: [ "443", "995" ] | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [128, 38, 46], | ||
| data2: [119, 53, 115], | ||
| data3: [311, 377, 315], | ||
| data4: [302, 392, 384], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [6, 294, 583], | ||
| data2: [6, 294, 583], | ||
| data3: [6, 294, 583], | ||
| data4: [6, 294, 583], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should update args to be stacked', function () { | ||
| args.data.groups = [['data1', 'data2'], ['data3', 'data4']]; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [120, 38, 75], | ||
| data2: [161, 127, 159], | ||
| data3: [269, 303, 271], | ||
| data4: [310, 392, 355], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [6, 294, 583], | ||
| data2: [6, 294, 583], | ||
| data3: [6, 294, 583], | ||
| data4: [6, 294, 583], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| }, | ||
| axis: { | ||
| x: { | ||
| type: "category" | ||
| } | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| describe('on bar chart', function () { | ||
| it('should update args', function () { | ||
| args = { | ||
| data: { | ||
| columns: [ | ||
| ['data1', 1030, 2200, 2100], | ||
| ['data2', 1150, 2010, 1200], | ||
| ['data3', -1150, -2010, -1200], | ||
| ['data4', -1030, -2200, -2100], | ||
| ], | ||
| type: 'bar', | ||
| labels: true, | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| it('should draw correctly', function () { | ||
| var expectedCx = {443: [98, 294, 490], 995: [98, 294, 490]}, | ||
| expectedCy = {443: [193, 351, 36], 995: [390, 429, 351]}; | ||
| d3.selectAll('.c3-circles-443 .c3-circle').each(function (d, i) { | ||
| var circle = d3.select(this); | ||
| expect(+circle.attr('cx')).toBeCloseTo(expectedCx[443][i], -2); | ||
| expect(+circle.attr('cy')).toBeCloseTo(expectedCy[443][i], -2); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [128, 38, 46], | ||
| data2: [119, 53, 115], | ||
| data3: [311, 377, 315], | ||
| data4: [302, 392, 384], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [53, 249, 445], | ||
| data2: [83, 279, 475], | ||
| data3: [112, 308, 504], | ||
| data4: [142, 338, 534], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| d3.selectAll('.c3-circles-995 .c3-circle').each(function (d, i) { | ||
| var circle = d3.select(this); | ||
| expect(+circle.attr('cx')).toBeCloseTo(expectedCx[995][i], -2); | ||
| expect(+circle.attr('cy')).toBeCloseTo(expectedCy[995][i], -2); | ||
| }); | ||
| it('should update args to be stacked', function () { | ||
| args.data.groups = [['data1', 'data2'], ['data3', 'data4']]; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [120, 38, 75], | ||
| data2: [161, 127, 159], | ||
| data3: [269, 303, 271], | ||
| data4: [310, 392, 355], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [68.6, 264, 460], | ||
| data2: [68.6, 264, 460], | ||
| data3: [127, 323, 519], | ||
| data4: [127, 323, 519], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
@@ -454,2 +313,209 @@ | ||
| describe('on line chart', function () { | ||
| it('should update args', function () { | ||
| args = { | ||
| data: { | ||
| columns: [ | ||
| ['data1', 1030, 2200, 2100], | ||
| ['data2', 1150, 2010, 1200], | ||
| ['data3', -1150, -2010, -1200], | ||
| ['data4', -1030, -2200, -2100], | ||
| ], | ||
| type: 'line', | ||
| labels: true, | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [128, 38, 46], | ||
| data2: [119, 53, 115], | ||
| data3: [311, 377, 315], | ||
| data4: [302, 392, 384], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [6, 294, 583], | ||
| data2: [6, 294, 583], | ||
| data3: [6, 294, 583], | ||
| data4: [6, 294, 583], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should update args to be stacked', function () { | ||
| args.data.groups = [['data1', 'data2'], ['data3', 'data4']]; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [120, 38, 75], | ||
| data2: [161, 127, 159], | ||
| data3: [269, 303, 271], | ||
| data4: [310, 392, 355], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [6, 294, 583], | ||
| data2: [6, 294, 583], | ||
| data3: [6, 294, 583], | ||
| data4: [6, 294, 583], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('on area chart', function () { | ||
| it('should update args', function () { | ||
| args = { | ||
| data: { | ||
| columns: [ | ||
| ['data1', 1030, 2200, 2100], | ||
| ['data2', 1150, 2010, 1200], | ||
| ['data3', -1150, -2010, -1200], | ||
| ['data4', -1030, -2200, -2100], | ||
| ], | ||
| type: 'area', | ||
| labels: true, | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [128, 38, 46], | ||
| data2: [119, 53, 115], | ||
| data3: [311, 377, 315], | ||
| data4: [302, 392, 384], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [6, 294, 583], | ||
| data2: [6, 294, 583], | ||
| data3: [6, 294, 583], | ||
| data4: [6, 294, 583], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should update args to be stacked', function () { | ||
| args.data.groups = [['data1', 'data2'], ['data3', 'data4']]; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [120, 38, 75], | ||
| data2: [161, 127, 159], | ||
| data3: [269, 303, 271], | ||
| data4: [310, 392, 355], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [6, 294, 583], | ||
| data2: [6, 294, 583], | ||
| data3: [6, 294, 583], | ||
| data4: [6, 294, 583], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('on bar chart', function () { | ||
| it('should update args', function () { | ||
| args = { | ||
| data: { | ||
| columns: [ | ||
| ['data1', 1030, 2200, 2100], | ||
| ['data2', 1150, 2010, 1200], | ||
| ['data3', -1150, -2010, -1200], | ||
| ['data4', -1030, -2200, -2100], | ||
| ], | ||
| type: 'bar', | ||
| labels: true, | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [128, 38, 46], | ||
| data2: [119, 53, 115], | ||
| data3: [311, 377, 315], | ||
| data4: [302, 392, 384], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [53, 249, 445], | ||
| data2: [83, 279, 475], | ||
| data3: [112, 308, 504], | ||
| data4: [142, 338, 534], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should update args to be stacked', function () { | ||
| args.data.groups = [['data1', 'data2'], ['data3', 'data4']]; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should locate data labels in correct position', function () { | ||
| var expectedTextY = { | ||
| data1: [120, 38, 75], | ||
| data2: [161, 127, 159], | ||
| data3: [269, 303, 271], | ||
| data4: [310, 392, 355], | ||
| }; | ||
| var expectedTextX = { | ||
| data1: [68.6, 264, 460], | ||
| data2: [68.6, 264, 460], | ||
| data3: [127, 323, 519], | ||
| data4: [127, 323, 519], | ||
| }; | ||
| Object.keys(expectedTextY).forEach(function (key) { | ||
| d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) { | ||
| var text = d3.select(this); | ||
| expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2); | ||
| expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('for all targets', function () { | ||
@@ -456,0 +522,0 @@ |
@@ -10,2 +10,41 @@ describe('c3 chart legend', function () { | ||
| describe('legend when multiple charts rendered', function () { | ||
| it('should update args', function () { | ||
| args = { | ||
| data: { | ||
| columns: [ | ||
| ['data1', 30], | ||
| ['data2', 50], | ||
| ['data3', 100] | ||
| ] | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should update args with long data names', function () { | ||
| args = { | ||
| data: { | ||
| columns: [ | ||
| ['long data name 1', 30], | ||
| ['long data name 2', 50], | ||
| ['long data name 3', 50], | ||
| ] | ||
| } | ||
| }; | ||
| expect(true).toBeTruthy(); | ||
| }); | ||
| it('should have properly computed legend width', function () { | ||
| var expectedLeft = [148, 226, 384], | ||
| expectedWidth = [118, 118, 108]; | ||
| d3.selectAll('.c3-legend-item').each(function (d, i) { | ||
| var rect = d3.select(this).node().getBoundingClientRect(); | ||
| expect(rect.left).toBeCloseTo(expectedLeft[i], -2); | ||
| expect(rect.width).toBeCloseTo(expectedWidth[i], -2); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('legend position', function () { | ||
@@ -12,0 +51,0 @@ |
@@ -39,3 +39,3 @@ function Axis(owner) { | ||
| }; | ||
| Axis.prototype.getXAxis = function getXAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) { | ||
| Axis.prototype.getXAxis = function getXAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) { | ||
| var $$ = this.owner, config = $$.config, | ||
@@ -47,2 +47,3 @@ axisParams = { | ||
| tickWidth: config.axis_x_tick_width, | ||
| tickTextRotate: withoutRotateTickText ? 0 : config.axis_x_tick_rotate, | ||
| withoutTransition: withoutTransition, | ||
@@ -267,20 +268,5 @@ }, | ||
| }; | ||
| Axis.prototype.xForRotatedTickText = function xForRotatedTickText(r) { | ||
| return 8 * Math.sin(Math.PI * (r / 180)); | ||
| }; | ||
| Axis.prototype.yForRotatedTickText = function yForRotatedTickText(r) { | ||
| return 11.5 - 2.5 * (r / 15) * (r > 0 ? 1 : -1); | ||
| }; | ||
| Axis.prototype.rotateTickText = function rotateTickText(axis, transition, rotate) { | ||
| axis.selectAll('.tick text') | ||
| .style("text-anchor", rotate > 0 ? "start" : "end"); | ||
| transition.selectAll('.tick text') | ||
| .attr("y", this.yForRotatedTickText(rotate)) | ||
| .attr("transform", "rotate(" + rotate + ")") | ||
| .selectAll('tspan') | ||
| .attr('dx', this.xForRotatedTickText(rotate)); | ||
| }; | ||
| Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute) { | ||
| var $$ = this.owner, config = $$.config, | ||
| maxWidth = 0, targetsToShow, scale, axis, body, svg; | ||
| maxWidth = 0, targetsToShow, scale, axis, dummy, svg; | ||
| if (withoutRecompute && $$.currentMaxTickWidths[id]) { | ||
@@ -299,18 +285,14 @@ return $$.currentMaxTickWidths[id]; | ||
| scale = $$.x.copy().domain($$.getXDomain(targetsToShow)); | ||
| axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues); | ||
| axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true); | ||
| this.updateXAxisTickValues(targetsToShow, axis); | ||
| } | ||
| body = $$.d3.select('body').classed('c3', true); | ||
| svg = body.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0), | ||
| dummy = $$.d3.select('body').append('div').classed('c3', true); | ||
| svg = dummy.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0), | ||
| svg.append('g').call(axis).each(function () { | ||
| $$.d3.select(this).selectAll('text tspan').each(function () { | ||
| $$.d3.select(this).selectAll('text').each(function () { | ||
| var box = this.getBoundingClientRect(); | ||
| if (maxWidth < box.width) { maxWidth = box.width; } | ||
| }); | ||
| dummy.remove(); | ||
| }); | ||
| // TODO: time lag to get maxWidth | ||
| window.setTimeout(function () { | ||
| svg.remove(); | ||
| }, 100); | ||
| body.classed('c3', false); | ||
| } | ||
@@ -393,3 +375,3 @@ $$.currentMaxTickWidths[id] = maxWidth <= 0 ? $$.currentMaxTickWidths[id] : maxWidth; | ||
| Axis.prototype.redraw = function redraw(transitions, isHidden) { | ||
| var $$ = this.owner, config = $$.config; | ||
| var $$ = this.owner; | ||
| $$.axes.x.style("opacity", isHidden ? 0 : 1); | ||
@@ -403,7 +385,2 @@ $$.axes.y.style("opacity", isHidden ? 0 : 1); | ||
| transitions.axisSubX.call($$.subXAxis); | ||
| // rotate tick text if needed | ||
| if (!config.axis_rotated && config.axis_x_tick_rotate) { | ||
| this.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate); | ||
| this.rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate); | ||
| } | ||
| }; |
@@ -177,2 +177,29 @@ // Features: | ||
| var rotate = params.tickTextRotate; | ||
| function textAnchorForText(rotate) { | ||
| if (!rotate) { | ||
| return 'middle'; | ||
| } | ||
| return rotate > 0 ? "start" : "end"; | ||
| } | ||
| function textTransform(rotate) { | ||
| if (!rotate) { | ||
| return ''; | ||
| } | ||
| return "rotate(" + rotate + ")"; | ||
| } | ||
| function dxForText(rotate) { | ||
| if (!rotate) { | ||
| return 0; | ||
| } | ||
| return 8 * Math.sin(Math.PI * (rotate / 180)); | ||
| } | ||
| function yForText(rotate) { | ||
| if (!rotate) { | ||
| return tickLength; | ||
| } | ||
| return 11.5 - 2.5 * (rotate / 15) * (rotate > 0 ? 1 : -1); | ||
| } | ||
| switch (orient) { | ||
@@ -185,5 +212,6 @@ case "bottom": | ||
| lineUpdate.attr("x1", tickX).attr("x2", tickX).attr("y2", tickSize); | ||
| textUpdate.attr("x", 0).attr("y", tickLength); | ||
| text.style("text-anchor", "middle"); | ||
| tspan.attr('x', 0).attr("dy", tspanDy); | ||
| textUpdate.attr("x", 0).attr("y", yForText(rotate)) | ||
| .style("text-anchor", textAnchorForText(rotate)) | ||
| .attr("transform", textTransform(rotate)); | ||
| tspan.attr('x', 0).attr("dy", tspanDy).attr('dx', dxForText(rotate)); | ||
| pathUpdate.attr("d", "M" + range[0] + "," + outerTickSize + "V0H" + range[1] + "V" + outerTickSize); | ||
@@ -194,2 +222,3 @@ break; | ||
| { | ||
| // TODO: rotated tick text | ||
| tickTransform = axisX; | ||
@@ -196,0 +225,0 @@ lineEnter.attr("y2", -innerTickSize); |
@@ -1,2 +0,2 @@ | ||
| var c3 = { version: "0.4.10-rc4" }; | ||
| var c3 = { version: "0.4.10-rc5" }; | ||
@@ -3,0 +3,0 @@ var c3_chart_fn, |
@@ -40,6 +40,7 @@ c3_chart_internal_fn.convertUrlToData = function (url, mimeType, keys, done) { | ||
| if (keys) { // when keys specified, json would be an array that includes objects | ||
| targetKeys = keys.value; | ||
| if (keys.x) { | ||
| targetKeys.push(keys.x); | ||
| targetKeys = keys.value.concat(keys.x); | ||
| $$.config.data_x = keys.x; | ||
| } else { | ||
| targetKeys = keys.value; | ||
| } | ||
@@ -46,0 +47,0 @@ new_rows.push(targetKeys); |
@@ -11,3 +11,4 @@ c3_chart_internal_fn.load = function (targets, args) { | ||
| targets.forEach(function (t) { | ||
| $$.setTargetType(t.id, args.types ? args.types[t.id] : args.type); | ||
| var type = args.types && args.types[t.id] ? args.types[t.id] : args.type; | ||
| $$.setTargetType(t.id, type); | ||
| }); | ||
@@ -14,0 +15,0 @@ } |
@@ -133,2 +133,3 @@ c3_chart_internal_fn.initEventRect = function () { | ||
| var index = d.index; | ||
| if (!$$.config) { return; } // chart is destroyed | ||
| if ($$.hasArcType()) { return; } | ||
@@ -245,2 +246,3 @@ $$.hideXGridFocus(); | ||
| .on('mouseout', function () { | ||
| if (!$$.config) { return; } // chart is destroyed | ||
| if ($$.hasArcType()) { return; } | ||
@@ -247,0 +249,0 @@ mouseout(); |
| c3_chart_internal_fn.initLegend = function () { | ||
| var $$ = this; | ||
| $$.legendItemTextBox = {}; | ||
| $$.legendHasRendered = false; | ||
@@ -110,5 +111,4 @@ $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend')); | ||
| }; | ||
| var legendItemTextBox = {}; | ||
| c3_chart_internal_fn.clearLegendItemTextBoxCache = function () { | ||
| legendItemTextBox = {}; | ||
| this.legendItemTextBox = {}; | ||
| }; | ||
@@ -128,6 +128,6 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) { | ||
| function getTextBox(textElement, id) { | ||
| if (!legendItemTextBox[id]) { | ||
| legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem); | ||
| if (!$$.legendItemTextBox[id]) { | ||
| $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem); | ||
| } | ||
| return legendItemTextBox[id]; | ||
| return $$.legendItemTextBox[id]; | ||
| } | ||
@@ -134,0 +134,0 @@ |
@@ -1,7 +0,25 @@ | ||
| // fix problems using c3 with phantomjs #578 | ||
| Function.prototype.bind = Function.prototype.bind || function (thisp) { | ||
| var fn = this; | ||
| return function () { | ||
| return fn.apply(thisp, arguments); | ||
| }; | ||
| }; | ||
| // PhantomJS doesn't have support for Function.prototype.bind, which has caused confusion. Use | ||
| // this polyfill to avoid the confusion. | ||
| // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Polyfill | ||
| if (!Function.prototype.bind) { | ||
| Function.prototype.bind = function(oThis) { | ||
| if (typeof this !== 'function') { | ||
| // closest thing possible to the ECMAScript 5 | ||
| // internal IsCallable function | ||
| throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); | ||
| } | ||
| var aArgs = Array.prototype.slice.call(arguments, 1), | ||
| fToBind = this, | ||
| fNOP = function() {}, | ||
| fBound = function() { | ||
| return fToBind.apply(this instanceof fNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))); | ||
| }; | ||
| fNOP.prototype = this.prototype; | ||
| fBound.prototype = new fNOP(); | ||
| return fBound; | ||
| }; | ||
| } |
@@ -128,2 +128,3 @@ c3_chart_internal_fn.initLine = function () { | ||
| xp, yp, dx, dy, dd, diff, diffx2, | ||
| xOffset = $$.isCategorized() ? 0.5 : 0, | ||
| xValue, yValue, | ||
@@ -162,2 +163,5 @@ regions = []; | ||
| // Define svg generator function for region | ||
| function generateM(points) { | ||
| return 'M' + points[0][0] + ' ' + points[0][1] + ' ' + points[1][0] + ' ' + points[1][1]; | ||
| } | ||
| if ($$.isTimeSeries()) { | ||
@@ -167,8 +171,20 @@ sWithRegion = function (d0, d1, j, diff) { | ||
| xv0 = new Date(x0 + x_diff * j), | ||
| xv1 = new Date(x0 + x_diff * (j + diff)); | ||
| return "M" + x(xv0) + " " + y(yp(j)) + " " + x(xv1) + " " + y(yp(j + diff)); | ||
| xv1 = new Date(x0 + x_diff * (j + diff)), | ||
| points; | ||
| if (config.axis_rotated) { | ||
| points = [[y(yp(j)), x(xv0)], [y(yp(j + diff)), x(xv1)]]; | ||
| } else { | ||
| points = [[x(xv0), y(yp(j))], [x(xv1), y(yp(j + diff))]]; | ||
| } | ||
| return generateM(points); | ||
| }; | ||
| } else { | ||
| sWithRegion = function (d0, d1, j, diff) { | ||
| return "M" + x(xp(j), true) + " " + y(yp(j)) + " " + x(xp(j + diff), true) + " " + y(yp(j + diff)); | ||
| var points; | ||
| if (config.axis_rotated) { | ||
| points = [[y(yp(j), true), x(xp(j))], [y(yp(j + diff), true), x(xp(j + diff))]]; | ||
| } else { | ||
| points = [[x(xp(j), true), y(yp(j))], [x(xp(j + diff), true), y(yp(j + diff))]]; | ||
| } | ||
| return generateM(points); | ||
| }; | ||
@@ -186,3 +202,3 @@ } | ||
| else { | ||
| xp = $$.getScale(d[i - 1].x, d[i].x, $$.isTimeSeries()); | ||
| xp = $$.getScale(d[i - 1].x + xOffset, d[i].x + xOffset, $$.isTimeSeries()); | ||
| yp = $$.getScale(d[i - 1].value, d[i].value); | ||
@@ -189,0 +205,0 @@ |
@@ -47,3 +47,11 @@ c3_chart_internal_fn.getCurrentWidth = function () { | ||
| while (parent && parent.tagName !== 'BODY') { | ||
| v = parent.getBoundingClientRect()[key]; | ||
| try { | ||
| v = parent.getBoundingClientRect()[key]; | ||
| } catch(e) { | ||
| if (key === 'width') { | ||
| // In IE in certain cases getBoundingClientRect | ||
| // will cause an "unspecified error" | ||
| v = parent.offsetWidth; | ||
| } | ||
| } | ||
| if (v) { | ||
@@ -90,3 +98,3 @@ break; | ||
| if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) { | ||
| h = $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180); | ||
| h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180); | ||
| } | ||
@@ -93,0 +101,0 @@ return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0); |
@@ -51,4 +51,4 @@ c3_chart_internal_fn.initText = function () { | ||
| c3_chart_internal_fn.getTextRect = function (text, cls) { | ||
| var body = this.d3.select('body').classed('c3', true), | ||
| svg = body.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0), | ||
| var dummy = this.d3.select('body').append('div').classed('c3', true), | ||
| svg = dummy.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0), | ||
| rect; | ||
@@ -61,4 +61,3 @@ svg.selectAll('.dummy') | ||
| .each(function () { rect = this.getBoundingClientRect(); }); | ||
| svg.remove(); | ||
| body.classed('c3', false); | ||
| dummy.remove(); | ||
| return rect; | ||
@@ -65,0 +64,0 @@ }; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.35%
3071325
- Lines of code
- increased by0.76%
39816
No dependency changes