Skip to content

Commit 5751ce0

Browse files
markov00markov00
authored
fix(axis): limit chart dimensions to avoid axis labels overflow (#314)
1 parent e64ddd2 commit 5751ce0

File tree

8 files changed

+232
-191
lines changed

8 files changed

+232
-191
lines changed

‎src/chart_types/xy_chart/store/chart_state.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -913,15 +913,16 @@ export class ChartStore {
913913
});
914914
bboxCalculator.destroy();
915915

916-
// compute chart dimensions
917-
this.chartDimensions = computeChartDimensions(
916+
// // compute chart dimensions
917+
const computedChartDims = computeChartDimensions(
918918
this.parentDimensions,
919919
this.chartTheme,
920920
this.axesTicksDimensions,
921921
this.axesSpecs,
922922
this.showLegend.get() && !this.legendCollapsed.get(),
923923
this.legendPosition,
924924
);
925+
this.chartDimensions = computedChartDims.chartDimensions;
925926

926927
this.chartTransform = computeChartTransform(this.chartDimensions, this.chartRotation);
927928
this.brushExtent = computeBrushExtent(this.chartDimensions, this.chartRotation, this.chartTransform);
@@ -954,7 +955,7 @@ export class ChartStore {
954955

955956
// compute visible ticks and their positions
956957
const axisTicksPositions = getAxisTicksPositions(
957-
this.chartDimensions,
958+
computedChartDims,
958959
this.chartTheme,
959960
this.chartRotation,
960961
this.showLegend.get() && !this.legendCollapsed.get(),

‎src/chart_types/xy_chart/utils/__snapshots__/dimensions.test.ts.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,35 +12,35 @@ Object {
1212
exports[`Computed chart dimensions should be padded by a bottom axis 1`] = `
1313
Object {
1414
"height": 30,
15-
"left": 20,
15+
"left": 25,
1616
"top": 20,
17-
"width": 60,
17+
"width": 50,
1818
}
1919
`;
2020

2121
exports[`Computed chart dimensions should be padded by a left axis 1`] = `
2222
Object {
23-
"height": 60,
23+
"height": 50,
2424
"left": 50,
25-
"top": 20,
25+
"top": 25,
2626
"width": 30,
2727
}
2828
`;
2929

3030
exports[`Computed chart dimensions should be padded by a right axis 1`] = `
3131
Object {
32-
"height": 60,
32+
"height": 50,
3333
"left": 20,
34-
"top": 20,
34+
"top": 25,
3535
"width": 30,
3636
}
3737
`;
3838

3939
exports[`Computed chart dimensions should be padded by a top axis 1`] = `
4040
Object {
4141
"height": 30,
42-
"left": 20,
42+
"left": 25,
4343
"top": 50,
44-
"width": 60,
44+
"width": 50,
4545
}
4646
`;

‎src/chart_types/xy_chart/utils/axis_utils.test.ts‎

Lines changed: 65 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -565,18 +565,24 @@ describe('Axis computational utils', () => {
565565
const tickSize = 10;
566566
const tickPadding = 5;
567567
const tickPosition = 0;
568-
568+
const axisPosition = {
569+
top: 0,
570+
left: 0,
571+
width: 100,
572+
height: 100,
573+
};
569574
const unrotatedLabelProps = getTickLabelProps(
570575
tickLabelRotation,
571576
tickSize,
572577
tickPadding,
573578
tickPosition,
574579
Position.Left,
580+
axisPosition,
575581
axis1Dims,
576582
);
577583

578584
expect(unrotatedLabelProps).toEqual({
579-
x: -10,
585+
x: 75,
580586
y: -5,
581587
align: 'right',
582588
verticalAlign: 'middle',
@@ -589,11 +595,12 @@ describe('Axis computational utils', () => {
589595
tickPadding,
590596
tickPosition,
591597
Position.Left,
598+
axisPosition,
592599
axis1Dims,
593600
);
594601

595602
expect(rotatedLabelProps).toEqual({
596-
x: -10,
603+
x: 75,
597604
y: -5,
598605
align: 'center',
599606
verticalAlign: 'middle',
@@ -605,6 +612,7 @@ describe('Axis computational utils', () => {
605612
tickPadding,
606613
tickPosition,
607614
Position.Right,
615+
axisPosition,
608616
axis1Dims,
609617
);
610618

@@ -622,6 +630,7 @@ describe('Axis computational utils', () => {
622630
tickPadding,
623631
tickPosition,
624632
Position.Right,
633+
axisPosition,
625634
axis1Dims,
626635
);
627636

@@ -638,19 +647,26 @@ describe('Axis computational utils', () => {
638647
const tickSize = 10;
639648
const tickPadding = 5;
640649
const tickPosition = 0;
650+
const axisPosition = {
651+
top: 0,
652+
left: 0,
653+
width: 100,
654+
height: 100,
655+
};
641656

642657
const unrotatedLabelProps = getTickLabelProps(
643658
tickLabelRotation,
644659
tickSize,
645660
tickPadding,
646661
tickPosition,
647662
Position.Top,
663+
axisPosition,
648664
axis1Dims,
649665
);
650666

651667
expect(unrotatedLabelProps).toEqual({
652668
x: -5,
653-
y: 0,
669+
y: 75,
654670
align: 'center',
655671
verticalAlign: 'bottom',
656672
});
@@ -662,12 +678,13 @@ describe('Axis computational utils', () => {
662678
tickPadding,
663679
tickPosition,
664680
Position.Top,
681+
axisPosition,
665682
axis1Dims,
666683
);
667684

668685
expect(rotatedLabelProps).toEqual({
669686
x: -5,
670-
y: 0,
687+
y: 75,
671688
align: 'center',
672689
verticalAlign: 'middle',
673690
});
@@ -678,6 +695,7 @@ describe('Axis computational utils', () => {
678695
tickPadding,
679696
tickPosition,
680697
Position.Bottom,
698+
axisPosition,
681699
axis1Dims,
682700
);
683701

@@ -695,6 +713,7 @@ describe('Axis computational utils', () => {
695713
tickPadding,
696714
tickPosition,
697715
Position.Bottom,
716+
axisPosition,
698717
axis1Dims,
699718
);
700719

@@ -710,11 +729,11 @@ describe('Axis computational utils', () => {
710729
const tickPadding = 5;
711730
const tickSize = 10;
712731
const tickPosition = 10;
713-
const maxLabelBboxHeight = 20;
732+
const axisHeight = 20;
714733

715734
const leftAxisTickLinePositions = getVerticalAxisTickLineProps(Position.Left, tickPadding, tickSize, tickPosition);
716735

717-
expect(leftAxisTickLinePositions).toEqual([5, 10, 15, 10]);
736+
expect(leftAxisTickLinePositions).toEqual([5, 10, -5, 10]);
718737

719738
const rightAxisTickLinePositions = getVerticalAxisTickLineProps(
720739
Position.Right,
@@ -725,22 +744,15 @@ describe('Axis computational utils', () => {
725744

726745
expect(rightAxisTickLinePositions).toEqual([0, 10, 10, 10]);
727746

728-
const topAxisTickLinePositions = getHorizontalAxisTickLineProps(
729-
Position.Top,
730-
tickPadding,
731-
tickSize,
732-
tickPosition,
733-
maxLabelBboxHeight,
734-
);
747+
const topAxisTickLinePositions = getHorizontalAxisTickLineProps(Position.Top, axisHeight, tickSize, tickPosition);
735748

736-
expect(topAxisTickLinePositions).toEqual([10, 25, 10, 35]);
749+
expect(topAxisTickLinePositions).toEqual([10, 10, 10, 20]);
737750

738751
const bottomAxisTickLinePositions = getHorizontalAxisTickLineProps(
739752
Position.Bottom,
740-
tickPadding,
753+
axisHeight,
741754
tickSize,
742755
tickPosition,
743-
maxLabelBboxHeight,
744756
);
745757

746758
expect(bottomAxisTickLinePositions).toEqual([10, 0, 10, 10]);
@@ -774,7 +786,10 @@ describe('Axis computational utils', () => {
774786
axisDims.set(verticalAxisSpecWTitle.id, axis1Dims);
775787

776788
let axisTicksPosition = getAxisTicksPositions(
777-
chartDim,
789+
{
790+
chartDimensions: chartDim,
791+
leftMargin: 0,
792+
},
778793
LIGHT_THEME,
779794
chartRotation,
780795
showLegend,
@@ -786,11 +801,10 @@ describe('Axis computational utils', () => {
786801
false,
787802
);
788803

789-
let left = 12 + 5 + 10 + 10; // font size + title padding + chart margin left + label width
790804
expect(axisTicksPosition.axisPositions.get(verticalAxisSpecWTitle.id)).toEqual({
791805
top: 0,
792-
left,
793-
width: 10,
806+
left: 10,
807+
width: 12 + 5 + 10 + 10 + 10,
794808
height: 100,
795809
});
796810

@@ -799,7 +813,10 @@ describe('Axis computational utils', () => {
799813
axisDims.set(verticalAxisSpec.id, axis1Dims);
800814

801815
axisTicksPosition = getAxisTicksPositions(
802-
chartDim,
816+
{
817+
chartDimensions: chartDim,
818+
leftMargin: 0,
819+
},
803820
LIGHT_THEME,
804821
chartRotation,
805822
showLegend,
@@ -811,11 +828,10 @@ describe('Axis computational utils', () => {
811828
false,
812829
);
813830

814-
left = 0 + 10 + 10; // no title + chart margin left + label width
815831
expect(axisTicksPosition.axisPositions.get(verticalAxisSpecWTitle.id)).toEqual({
816832
top: 0,
817-
left: 20,
818-
width: 10,
833+
left: 10,
834+
width: 30,
819835
height: 100,
820836
});
821837
});
@@ -842,8 +858,8 @@ describe('Axis computational utils', () => {
842858
const expectedLeftAxisPosition = {
843859
dimensions: {
844860
height: 100,
845-
width: 10,
846-
left: 40,
861+
width: 40,
862+
left: 20,
847863
top: 0,
848864
},
849865
topIncrement: 0,
@@ -878,7 +894,7 @@ describe('Axis computational utils', () => {
878894
const expectedRightAxisPosition = {
879895
dimensions: {
880896
height: 100,
881-
width: 10,
897+
width: 40,
882898
left: 110,
883899
top: 0,
884900
},
@@ -913,10 +929,11 @@ describe('Axis computational utils', () => {
913929

914930
const expectedTopAxisPosition = {
915931
dimensions: {
916-
height: 10,
932+
height:
933+
axis1Dims.maxLabelBboxHeight + axisTitleHeight + horizontalAxisSpec.tickSize + horizontalAxisSpec.tickPadding,
917934
width: 100,
918935
left: 0,
919-
top: 30,
936+
top: cumTopSum + LIGHT_THEME.chartMargins.top,
920937
},
921938
topIncrement: 50,
922939
bottomIncrement: 0,
@@ -949,7 +966,7 @@ describe('Axis computational utils', () => {
949966

950967
const expectedBottomAxisPosition = {
951968
dimensions: {
952-
height: 10,
969+
height: 40,
953970
width: 100,
954971
left: 0,
955972
top: 110,
@@ -975,7 +992,10 @@ describe('Axis computational utils', () => {
975992
axisDims.set(getAxisId('not_a_mapped_one'), axis1Dims);
976993

977994
const axisTicksPosition = getAxisTicksPositions(
978-
chartDim,
995+
{
996+
chartDimensions: chartDim,
997+
leftMargin: 0,
998+
},
979999
LIGHT_THEME,
9801000
chartRotation,
9811001
showLegend,
@@ -1006,7 +1026,10 @@ describe('Axis computational utils', () => {
10061026
axisDims.set(verticalAxisSpec.id, axis1Dims);
10071027

10081028
const axisTicksPosition = getAxisTicksPositions(
1009-
chartDim,
1029+
{
1030+
chartDimensions: chartDim,
1031+
leftMargin: 0,
1032+
},
10101033
LIGHT_THEME,
10111034
chartRotation,
10121035
showLegend,
@@ -1036,7 +1059,10 @@ describe('Axis computational utils', () => {
10361059
expect(axisTicksPosition.axisGridLinesPositions.get(verticalAxisSpec.id)).toEqual(expectedVerticalAxisGridLines);
10371060

10381061
const axisTicksPositionWithTopLegend = getAxisTicksPositions(
1039-
chartDim,
1062+
{
1063+
chartDimensions: chartDim,
1064+
leftMargin: 0,
1065+
},
10401066
LIGHT_THEME,
10411067
chartRotation,
10421068
showLegend,
@@ -1051,7 +1077,7 @@ describe('Axis computational utils', () => {
10511077

10521078
const expectedPositionWithTopLegend = {
10531079
height: 100,
1054-
width: 10,
1080+
width: 30,
10551081
left: 100,
10561082
top: 0,
10571083
};
@@ -1063,7 +1089,10 @@ describe('Axis computational utils', () => {
10631089
invalidSpecs.set(verticalAxisSpec.id, ungroupedAxisSpec);
10641090
const computeScalelessSpec = () => {
10651091
getAxisTicksPositions(
1066-
chartDim,
1092+
{
1093+
chartDimensions: chartDim,
1094+
leftMargin: 0,
1095+
},
10671096
LIGHT_THEME,
10681097
chartRotation,
10691098
showLegend,

0 commit comments

Comments
 (0)