Skip to content

Commit 3058376

Browse files
manromeromanromero
authored
Merge pull request #14 from kubit-ui/feature/improve-line-chart
feat: Improve Line Chart
2 parents 5513321 + eee8ec9 commit 3058376

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2384
-667
lines changed

‎eslint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ module.exports = eslintFlatConfig({
9696
'@typescript-eslint/no-explicit-any': 'warn',
9797
'no-alert': 'off',
9898
'perfectionist/sort-objects': [
99-
'error',
99+
'off',
100100
{
101101
order: 'asc',
102102
type: 'natural',

‎src/charts/barChart/stories/children/YAxis/yAxis.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ export const YAxisCustomization: Story = {
200200
))}
201201

202202
<BarChart.XAxis
203-
ariaLabel="XAxis"
203+
ariaLabel="X Axis"
204204
position={Positions.BOTTOM}
205205
showTickLines={false}
206206
stroke="transparent"

‎src/charts/barChart/stories/templates/axisHorizontalMixedBars.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const AXIS_HORIZONTAL_MIXED_BARS = [
6464
...BAR_CHART_PATHS,
6565
<BarChart.XAxis
6666
key="4"
67-
ariaLabel="XAxis"
67+
ariaLabel="X Axis"
6868
position={Positions.BOTTOM}
6969
showTickLines={false}
7070
stroke="black"
@@ -77,7 +77,7 @@ export const AXIS_HORIZONTAL_MIXED_BARS = [
7777
/>,
7878
<BarChart.YAxis
7979
key="5"
80-
ariaLabel="ariaLabel Yaxis"
80+
ariaLabel="Y Axis"
8181
position={Positions.CENTER}
8282
showTickLines={false}
8383
stroke="black"

‎src/charts/barChart/stories/templates/axisVerticalMixedBars.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const AXIS_VERTICAL_MIXED_BARS = [
6464
...BAR_CHART_PATHS,
6565
<BarChart.XAxis
6666
key="4"
67-
ariaLabel="XAxis"
67+
ariaLabel="X Axis"
6868
position={Positions.CENTER}
6969
showTickLines={false}
7070
stroke="black"
@@ -77,7 +77,7 @@ export const AXIS_VERTICAL_MIXED_BARS = [
7777
/>,
7878
<BarChart.YAxis
7979
key="5"
80-
ariaLabel="ariaLabel Yaxis"
80+
ariaLabel="Y Axis"
8181
position={Positions.RIGHT}
8282
showTickLines={false}
8383
stroke="black"

‎src/charts/barChart/stories/templates/axisWithHorizontalBars.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const AXIS_WITH_HORIZONTAL_BARS = [
6767
...BAR_CHART_PATHS,
6868
<BarChart.XAxis
6969
key="4"
70-
ariaLabel="XAxis"
70+
ariaLabel="X Axis"
7171
position={Positions.BOTTOM}
7272
showTickLines={false}
7373
stroke="black"
@@ -80,7 +80,7 @@ export const AXIS_WITH_HORIZONTAL_BARS = [
8080
/>,
8181
<BarChart.YAxis
8282
key="5"
83-
ariaLabel="ariaLabel Yaxis"
83+
ariaLabel="Y Axis"
8484
position={Positions.LEFT}
8585
showTickLines={false}
8686
stroke="black"

‎src/charts/barChart/stories/templates/axisWithVericalBars.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const AXIS_WITH_VERTICAL_BARS = [
6464
...BAR_CHART_PATHS,
6565
<BarChart.XAxis
6666
key="4"
67-
ariaLabel="XAxis"
67+
ariaLabel="X Axis"
6868
position={Positions.BOTTOM}
6969
showTickLines={true}
7070
stroke="black"
@@ -93,7 +93,7 @@ export const AXIS_WITH_VERTICAL_BARS = [
9393
/>,
9494
<BarChart.YAxis
9595
key="5"
96-
ariaLabel="ariaLabel Yaxis"
96+
ariaLabel="Y Axis"
9797
position={Positions.LEFT}
9898
showTickLines={true}
9999
stroke="black"

‎src/charts/lineChart/context/__tests__/buildLineContextValue.test.ts‎

Lines changed: 45 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import type { Mock } from 'vitest';
22

33
import { Positions } from '@/types/position.enum';
4-
import { getXCoordinates, getYCoordinates } from '@/utils/getCoordinates/getCoordinates';
54
import { getPoints } from '@/utils/getPoints/getPoints';
6-
import { getXTicks, getYTicks } from '@/utils/getTicks/getTicks';
75

6+
import { getXCoordinates, getYCoordinates } from '../../utils/getCoordinates';
87
import { getExtraSpacing } from '../../utils/getExtraSpacing';
8+
import { getXTicks, getYTicks } from '../../utils/getTicks';
99
import { buildLineContextValue } from '../buildLineContextValue';
1010

1111
vi.mock('../../utils/getExtraSpacing', () => ({
1212
getExtraSpacing: vi.fn(),
1313
}));
1414

15-
vi.mock('@/utils/getTicks/getTicks', () => ({
15+
vi.mock('../../utils/getTicks', () => ({
1616
getXTicks: vi.fn(),
1717
getYTicks: vi.fn(),
1818
}));
@@ -21,7 +21,7 @@ vi.mock('@/utils/getPoints/getPoints', () => ({
2121
getPoints: vi.fn(),
2222
}));
2323

24-
vi.mock('@/utils/getCoordinates/getCoordinates', () => ({
24+
vi.mock('../../utils/getCoordinates', () => ({
2525
getXCoordinates: vi.fn(),
2626
getYCoordinates: vi.fn(),
2727
}));
@@ -42,14 +42,16 @@ describe('buildLineContextValue', () => {
4242
vi.clearAllMocks();
4343

4444
(getExtraSpacing as Mock).mockReturnValue({
45-
extraSpaceBottomY: 10,
46-
extraSpaceLeftX: 10,
47-
extraSpaceRightX: 10,
48-
extraSpaceTopY: 10,
45+
xAxisLeftSpacing: 0,
46+
xAxisTopSpacing: 0,
47+
xAxisRightSpacing: 10,
48+
xAxisBottomSpacing: 10,
49+
yAxisLeftSpacing: 10,
50+
yAxisTopSpacing: 0,
51+
yAxisRightSpacing: 0,
52+
yAxisBottomSpacing: 0,
4953
lineChartXPosition: Positions.BOTTOM,
5054
lineChartYPosition: Positions.LEFT,
51-
securityXSpace: 5,
52-
securityYSpace: 5,
5355
xAxisText: 'X Axis',
5456
xBreakAxis: 0,
5557
xData: [1, 2, 3],
@@ -59,24 +61,22 @@ describe('buildLineContextValue', () => {
5961
});
6062

6163
(getXTicks as Mock).mockReturnValue([
62-
{ position: 0, value: '1' },
63-
{ position: 400, value: '2' },
64-
{ position: 800, value: '3' },
64+
{ position: 10, value: 1 },
65+
{ position: 400, value: 2 },
66+
{ position: 790, value: 3 },
6567
]);
6668
(getYTicks as Mock).mockReturnValue([
67-
{ position: 500, value: '10' },
68-
{ position: 250, value: '20' },
69-
{ position: 0, value: '30' },
69+
{ position: 490, value: 10 },
70+
{ position: 245, value: 20 },
71+
{ position: 0, value: 30 },
7072
]);
7173
(getPoints as Mock).mockReturnValue([0]);
72-
(getXCoordinates as Mock).mockReturnValue({ x1: 0, x2: 100, y1: 10, y2: 190 });
74+
(getXCoordinates as Mock).mockReturnValue({ x1: 10, x2: 800, y1: 490, y2: 490 });
7375
(getYCoordinates as Mock).mockReturnValue({ x1: 10, x2: 390, y1: 0, y2: 50 });
7476
});
7577

7678
it('should build the context with right values', () => {
7779
const result = buildLineContextValue({
78-
ajustedX: 0,
79-
ajustedY: 0,
8080
canvasHeight: mockCanvasHeight,
8181
canvasWidth: mockCanvasWidth,
8282
children: mockChildren,
@@ -86,37 +86,38 @@ describe('buildLineContextValue', () => {
8686
});
8787

8888
expect(result).toEqual({
89+
addError: undefined,
8990
crossXAxis: false,
9091
crossYAxis: false,
91-
extraSpaceBottomY: 10,
92-
extraSpaceLeftX: 10,
93-
extraSpaceRightX: 10,
94-
extraSpaceTopY: 10,
95-
securityXSpace: 5,
96-
securityYSpace: 5,
92+
xAxisLeftSpacing: 0,
93+
xAxisTopSpacing: 0,
94+
xAxisRightSpacing: 10,
95+
xAxisBottomSpacing: 10,
96+
yAxisLeftSpacing: 10,
97+
yAxisTopSpacing: 0,
98+
yAxisRightSpacing: 0,
99+
yAxisBottomSpacing: 0,
97100
xAxisCoordinates: {
98-
coordinates: { x1: 0, x2: 100, y1: 10, y2: 190 },
101+
coordinates: { x1: 10, x2: 800, y1: 490, y2: 490 },
99102
tickValues: [
100-
{ position: 0, value: '1' },
101-
{ position: 400, value: '2' },
102-
{ position: 800, value: '3' },
103+
{ position: 10, value: 1 },
104+
{ position: 400, value: 2 },
105+
{ position: 790, value: 3 },
103106
],
104107
},
105108
xAxisText: 'X Axis',
106109
yAxisCoordinates: {
107110
coordinates: { x1: 10, x2: 390, y1: 0, y2: 50 },
108111
tickValues: [
109-
{ position: 500, value: '10' },
110-
{ position: 250, value: '20' },
111-
{ position: 0, value: '30' },
112+
{ position: 490, value: 10 },
113+
{ position: 245, value: 20 },
114+
{ position: 0, value: 30 },
112115
],
113116
},
114117
yAxisText: 'Y Axis',
115118
});
116119

117120
expect(getExtraSpacing).toHaveBeenCalledWith({
118-
ajustedX: 0,
119-
ajustedY: 0,
120121
canvasHeight: mockCanvasHeight,
121122
canvasWidth: mockCanvasWidth,
122123
children: mockChildren,
@@ -125,36 +126,26 @@ describe('buildLineContextValue', () => {
125126
xKey: mockXKey,
126127
});
127128

128-
expect(getXTicks).toHaveBeenCalledWith({
129-
initPos: 10,
130-
maxSpaceAvailable: mockCanvasWidth,
131-
otherAxisSpace: 20,
132-
securitySpace: 5,
133-
tickValues: [1, 2, 3],
134-
});
129+
expect(getXTicks).toHaveBeenCalled();
135130

136-
expect(getYTicks).toHaveBeenCalledWith({
137-
initPos: 490,
138-
maxSpaceAvailable: mockCanvasHeight,
139-
otherAxisSpace: 20,
140-
securitySpace: 5,
141-
tickValues: [10, 20, 30],
142-
});
131+
expect(getYTicks).toHaveBeenCalled();
143132

144133
expect(getXCoordinates).toHaveBeenCalled();
145134
expect(getYCoordinates).toHaveBeenCalled();
146135
});
147136

148137
it('should handler the cross axis correctly', () => {
149138
(getExtraSpacing as Mock).mockReturnValue({
150-
extraSpaceBottomY: 10,
151-
extraSpaceLeftX: 10,
152-
extraSpaceRightX: 10,
153-
extraSpaceTopY: 10,
139+
xAxisLeftSpacing: 0,
140+
xAxisTopSpacing: 0,
141+
xAxisRightSpacing: 10,
142+
xAxisBottomSpacing: 10,
143+
yAxisLeftSpacing: 10,
144+
yAxisTopSpacing: 0,
145+
yAxisRightSpacing: 0,
146+
yAxisBottomSpacing: 0,
154147
lineChartXPosition: Positions.LEFT,
155148
lineChartYPosition: Positions.TOP,
156-
securityXSpace: 5,
157-
securityYSpace: 5,
158149
xAxisText: 'X Axis',
159150
xBreakAxis: 0,
160151
xData: [1, 2, 3],
@@ -164,8 +155,6 @@ describe('buildLineContextValue', () => {
164155
});
165156

166157
const result = buildLineContextValue({
167-
ajustedX: 0,
168-
ajustedY: 0,
169158
canvasHeight: mockCanvasHeight,
170159
canvasWidth: mockCanvasWidth,
171160
children: mockChildren,

0 commit comments

Comments
 (0)