Skip to content

Commit 9de34c6

Browse files
masayuki0812masayuki0812
committed
Merge branch 'master' of https://github.com/Timopheym/c3 into Timopheym-master
2 parents 79c43c2 + 10d33af commit 9de34c6

File tree

7 files changed

+89
-18
lines changed

7 files changed

+89
-18
lines changed

‎c3.css

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*-- Chart --*/
22
.c3 svg {
33
font: 10px sans-serif;
4-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
4+
-webkit-tap-highlight-color: transparent; }
55

66
.c3 path, .c3 line {
77
fill: none;
@@ -12,7 +12,11 @@
1212
-moz-user-select: none;
1313
user-select: none; }
1414

15-
.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
15+
.c3-legend-item-tile,
16+
.c3-xgrid-focus,
17+
.c3-ygrid,
18+
.c3-event-rect,
19+
.c3-bars path {
1620
shape-rendering: crispEdges; }
1721

1822
.c3-chart-arc path {
@@ -71,11 +75,11 @@
7175
/*-- Region --*/
7276
.c3-region {
7377
fill: steelblue;
74-
fill-opacity: 0.1; }
78+
fill-opacity: .1; }
7579

7680
/*-- Brush --*/
7781
.c3-brush .extent {
78-
fill-opacity: 0.1; }
82+
fill-opacity: .1; }
7983

8084
/*-- Select - Drag --*/
8185
/*-- Legend --*/

‎c3.js

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1187,7 +1187,8 @@
11871187
axis_y_label: {},
11881188
axis_y_tick_format: undefined,
11891189
axis_y_tick_outer: true,
1190-
axis_y_tick_values: null,
1190+
axis_y_tick_values: null,
1191+
axis_y_tick_rotate: 0,
11911192
axis_y_tick_count: undefined,
11921193
axis_y_tick_time_value: undefined,
11931194
axis_y_tick_time_interval: undefined,
@@ -2752,12 +2753,18 @@
27522753
var $$ = this, config = $$.config, h = 30;
27532754
if (axisId === 'x' && !config.axis_x_show) { return 8; }
27542755
if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; }
2755-
if (axisId === 'y' && !config.axis_y_show) { return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; }
2756+
if (axisId === 'y' && !config.axis_y_show) {
2757+
return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1;
2758+
}
27562759
if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
27572760
// Calculate x axis height when tick rotated
27582761
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
27592762
h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
27602763
}
2764+
// Calculate y axis height when tick rotated
2765+
if (axisId === 'y' && config.axis_rotated && config.axis_y_tick_rotate) {
2766+
h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_y_tick_rotate) / 180);
2767+
}
27612768
return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
27622769
};
27632770

@@ -4401,12 +4408,13 @@
44014408
}
44024409
return tickValues;
44034410
};
4404-
Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
4405-
var axisParams = {
4411+
Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) {
4412+
var $$ = this.owner, config = $$.config,
4413+
axisParams = {
44064414
withOuterTick: withOuterTick,
44074415
withoutTransition: withoutTransition,
4416+
tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate
44084417
},
4409-
$$ = this.owner,
44104418
d3 = $$.d3,
44114419
config = $$.config,
44124420
axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
@@ -4601,10 +4609,10 @@
46014609
targetsToShow = $$.filterTargetsToShow($$.data.targets);
46024610
if (id === 'y') {
46034611
scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));
4604-
axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true);
4612+
axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true, true);
46054613
} else if (id === 'y2') {
46064614
scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));
4607-
axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true);
4615+
axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true, true);
46084616
} else {
46094617
scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
46104618
axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true);
@@ -6224,6 +6232,10 @@
62246232
if (args.xs) {
62256233
$$.addXs(args.xs);
62266234
}
6235+
// update names if exists
6236+
if ('names' in args) {
6237+
c3_chart_fn.data.names.bind(this)(args.names);
6238+
}
62276239
// update classes if exists
62286240
if ('classes' in args) {
62296241
Object.keys(args.classes).forEach(function (id) {

‎spec/axis-spec.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -599,6 +599,49 @@ describe('c3 chart axis', function () {
599599
});
600600
});
601601

602+
603+
describe('axis.y.tick.rotate', function () {
604+
605+
describe('not rotated', function () {
606+
607+
it('should update args successfully', function () {
608+
args = {
609+
data: {
610+
columns: [
611+
['data1', 30, 200, 100, 400, 150, 250, 100, 600],
612+
['data2', 50, 20, 10, 40, 15, 25],
613+
]
614+
},
615+
axis: {
616+
y: {
617+
tick: {
618+
rotate: 45
619+
}
620+
}
621+
}
622+
};
623+
expect(true).toBeTruthy();
624+
});
625+
626+
it('should rotate tick texts', function () {
627+
chart.internal.main.selectAll('.c3-axis-y g.tick').each(function () {
628+
var tick = d3.select(this),
629+
text = tick.select('text'),
630+
tspan = text.select('tspan');
631+
expect(text.attr('transform')).toBe('rotate(45)');
632+
expect(text.attr('y')).toBe('4');
633+
expect(tspan.attr('dx')).toBe('5.65685424949238');
634+
});
635+
});
636+
637+
it('should have automatically calculated y axis width', function () {
638+
var box = chart.internal.main.select('.c3-axis-y').node().getBoundingClientRect();
639+
expect(box.width).toBeLessThan(25);
640+
});
641+
642+
});
643+
});
644+
602645
describe('axis.x.tick.fit', function () {
603646

604647
describe('axis.x.tick.fit = true', function () {

‎src/api.load.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ c3_chart_fn.load = function (args) {
44
if (args.xs) {
55
$$.addXs(args.xs);
66
}
7+
// update names if exists
8+
if ('names' in args) {
9+
c3_chart_fn.data.names.bind(this)(args.names);
10+
}
711
// update classes if exists
812
if ('classes' in args) {
913
Object.keys(args.classes).forEach(function (id) {

‎src/axis.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,13 @@ Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues(targets, a
7676
}
7777
return tickValues;
7878
};
79-
Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
80-
var axisParams = {
79+
Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) {
80+
var $$ = this.owner, config = $$.config,
81+
axisParams = {
8182
withOuterTick: withOuterTick,
8283
withoutTransition: withoutTransition,
84+
tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate
8385
},
84-
$$ = this.owner,
8586
d3 = $$.d3,
8687
config = $$.config,
8788
axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
@@ -276,10 +277,10 @@ Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute)
276277
targetsToShow = $$.filterTargetsToShow($$.data.targets);
277278
if (id === 'y') {
278279
scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));
279-
axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true);
280+
axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true, true);
280281
} else if (id === 'y2') {
281282
scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));
282-
axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true);
283+
axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true, true);
283284
} else {
284285
scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
285286
axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true);

‎src/config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,8 @@ c3_chart_internal_fn.getDefaultConfig = function () {
120120
axis_y_label: {},
121121
axis_y_tick_format: undefined,
122122
axis_y_tick_outer: true,
123-
axis_y_tick_values: null,
123+
axis_y_tick_values: null,
124+
axis_y_tick_rotate: 0,
124125
axis_y_tick_count: undefined,
125126
axis_y_tick_time_value: undefined,
126127
axis_y_tick_time_interval: undefined,

‎src/size.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,18 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
9595
var $$ = this, config = $$.config, h = 30;
9696
if (axisId === 'x' && !config.axis_x_show) { return 8; }
9797
if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; }
98-
if (axisId === 'y' && !config.axis_y_show) { return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; }
98+
if (axisId === 'y' && !config.axis_y_show) {
99+
return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1;
100+
}
99101
if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
100102
// Calculate x axis height when tick rotated
101103
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
102104
h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
103105
}
106+
// Calculate y axis height when tick rotated
107+
if (axisId === 'y' && config.axis_rotated && config.axis_y_tick_rotate) {
108+
h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_y_tick_rotate) / 180);
109+
}
104110
return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
105111
};
106112

0 commit comments

Comments
 (0)