Skip to content

Commit 2b838d7

Browse files
markov00markov00
authored
feat: customize number of axis ticks (#319)
This commit add the possibility to customize the number of ticks displayed on each axis. A ticks parameter is added to the Axis component. The scale function computes the number of ticks that are uniformly spaced using human-readable values that are around the same number provided on that tick property. See https://github.com/d3/d3-scale#continuous_ticks
1 parent ed6d0e5 commit 2b838d7

23 files changed

+488
-208
lines changed

‎src/chart_types/xy_chart/annotations/annotation_marker.test.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ describe('annotation marker', () => {
2121
const maxRange = 100;
2222

2323
const continuousData = [0, 10];
24-
const continuousScale = new ScaleContinuous(ScaleType.Linear, continuousData, [minRange, maxRange]);
24+
const continuousScale = new ScaleContinuous({
25+
type: ScaleType.Linear,
26+
domain: continuousData,
27+
range: [minRange, maxRange],
28+
});
2529

2630
const chartDimensions: Dimensions = {
2731
width: 10,

‎src/chart_types/xy_chart/annotations/annotation_utils.test.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,14 @@ describe('annotation utils', () => {
5050
const maxRange = 100;
5151

5252
const continuousData = [0, 10];
53-
const continuousScale = new ScaleContinuous(ScaleType.Linear, continuousData, [minRange, maxRange], 0, 1);
53+
const continuousScale = new ScaleContinuous(
54+
{
55+
type: ScaleType.Linear,
56+
domain: continuousData,
57+
range: [minRange, maxRange],
58+
},
59+
{ bandwidth: 0, minInterval: 1 },
60+
);
5461

5562
const ordinalData = ['a', 'b', 'c', 'd', 'a', 'b', 'c'];
5663
const ordinalScale = new ScaleBand(ordinalData, [minRange, maxRange]);
@@ -1345,7 +1352,10 @@ describe('annotation utils', () => {
13451352
const yScales: Map<GroupId, Scale> = new Map();
13461353
yScales.set(groupId, continuousScale);
13471354

1348-
const xScale: Scale = new ScaleContinuous(ScaleType.Linear, continuousData, [minRange, maxRange], 1, 1);
1355+
const xScale: Scale = new ScaleContinuous(
1356+
{ type: ScaleType.Linear, domain: continuousData, range: [minRange, maxRange] },
1357+
{ bandwidth: 1, minInterval: 1 },
1358+
);
13491359

13501360
const annotationRectangle: RectAnnotationSpec = {
13511361
annotationId: getAnnotationId('rect'),

‎src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,31 @@ describe('Crosshair utils linear scale', () => {
8282
mixedLinesBarsMap.set(barSeries2SpecId, barSeries2);
8383
const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map());
8484

85-
const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 120);
86-
const multiBarSeriesScale = computeXScale(multiBarSeriesDomains.xDomain, multiBarSeriesMap.size, 0, 120);
87-
const lineSeriesScale = computeXScale(lineSeriesDomains.xDomain, lineSeriesMap.size, 0, 120);
88-
const multiLineSeriesScale = computeXScale(multiLineSeriesDomains.xDomain, multiLineSeriesMap.size, 0, 120);
89-
const mixedLinesBarsSeriesScale = computeXScale(mixedLinesBarsSeriesDomains.xDomain, mixedLinesBarsMap.size, 0, 120);
85+
const barSeriesScale = computeXScale({
86+
xDomain: barSeriesDomains.xDomain,
87+
totalBarsInCluster: barSeriesMap.size,
88+
range: [0, 120],
89+
});
90+
const multiBarSeriesScale = computeXScale({
91+
xDomain: multiBarSeriesDomains.xDomain,
92+
totalBarsInCluster: multiBarSeriesMap.size,
93+
range: [0, 120],
94+
});
95+
const lineSeriesScale = computeXScale({
96+
xDomain: lineSeriesDomains.xDomain,
97+
totalBarsInCluster: lineSeriesMap.size,
98+
range: [0, 120],
99+
});
100+
const multiLineSeriesScale = computeXScale({
101+
xDomain: multiLineSeriesDomains.xDomain,
102+
totalBarsInCluster: multiLineSeriesMap.size,
103+
range: [0, 120],
104+
});
105+
const mixedLinesBarsSeriesScale = computeXScale({
106+
xDomain: mixedLinesBarsSeriesDomains.xDomain,
107+
totalBarsInCluster: mixedLinesBarsMap.size,
108+
range: [0, 120],
109+
});
90110

91111
/**
92112
* if we have lines on a linear scale, the snap position and band should

‎src/chart_types/xy_chart/crosshair/crosshair_utils.ordinal_snap.test.ts‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,31 @@ describe('Crosshair utils ordinal scales', () => {
8181
mixedLinesBarsMap.set(barSeries2SpecId, barSeries2);
8282
const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map());
8383

84-
const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 120);
85-
const multiBarSeriesScale = computeXScale(multiBarSeriesDomains.xDomain, multiBarSeriesMap.size, 0, 120);
86-
const lineSeriesScale = computeXScale(lineSeriesDomains.xDomain, lineSeriesMap.size, 0, 120);
87-
const multiLineSeriesScale = computeXScale(multiLineSeriesDomains.xDomain, multiLineSeriesMap.size, 0, 120);
88-
const mixedLinesBarsSeriesScale = computeXScale(mixedLinesBarsSeriesDomains.xDomain, mixedLinesBarsMap.size, 0, 120);
84+
const barSeriesScale = computeXScale({
85+
xDomain: barSeriesDomains.xDomain,
86+
totalBarsInCluster: barSeriesMap.size,
87+
range: [0, 120],
88+
});
89+
const multiBarSeriesScale = computeXScale({
90+
xDomain: multiBarSeriesDomains.xDomain,
91+
totalBarsInCluster: multiBarSeriesMap.size,
92+
range: [0, 120],
93+
});
94+
const lineSeriesScale = computeXScale({
95+
xDomain: lineSeriesDomains.xDomain,
96+
totalBarsInCluster: lineSeriesMap.size,
97+
range: [0, 120],
98+
});
99+
const multiLineSeriesScale = computeXScale({
100+
xDomain: multiLineSeriesDomains.xDomain,
101+
totalBarsInCluster: multiLineSeriesMap.size,
102+
range: [0, 120],
103+
});
104+
const mixedLinesBarsSeriesScale = computeXScale({
105+
xDomain: mixedLinesBarsSeriesDomains.xDomain,
106+
totalBarsInCluster: mixedLinesBarsMap.size,
107+
range: [0, 120],
108+
});
89109

90110
test('can snap position on scale ordinal bar', () => {
91111
let snappedPosition = getSnapPosition('a', barSeriesScale);

‎src/chart_types/xy_chart/rendering/rendering.areas.test.ts‎

Lines changed: 51 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,15 @@ describe('Rendering points - areas', () => {
2727
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
2828
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
2929
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
30-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
31-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
30+
const xScale = computeXScale({
31+
xDomain: pointSeriesDomains.xDomain,
32+
totalBarsInCluster: pointSeriesMap.size,
33+
range: [0, 100],
34+
});
35+
const yScales = computeYScales({
36+
yDomains: pointSeriesDomains.yDomain,
37+
range: [100, 0],
38+
});
3239
let renderedArea: {
3340
areaGeometry: AreaGeometry;
3441
indexedGeometries: Map<any, IndexedGeometry[]>;
@@ -76,8 +83,12 @@ describe('Rendering points - areas', () => {
7683
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
7784
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
7885
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
79-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
80-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
86+
const xScale = computeXScale({
87+
xDomain: pointSeriesDomains.xDomain,
88+
totalBarsInCluster: pointSeriesMap.size,
89+
range: [0, 100],
90+
});
91+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
8192
let renderedArea: {
8293
areaGeometry: AreaGeometry;
8394
indexedGeometries: Map<any, IndexedGeometry[]>;
@@ -187,8 +198,12 @@ describe('Rendering points - areas', () => {
187198
pointSeriesMap.set(spec1Id, pointSeriesSpec1);
188199
pointSeriesMap.set(spec2Id, pointSeriesSpec2);
189200
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
190-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
191-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
201+
const xScale = computeXScale({
202+
xDomain: pointSeriesDomains.xDomain,
203+
totalBarsInCluster: pointSeriesMap.size,
204+
range: [0, 100],
205+
});
206+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
192207

193208
let firstLine: {
194209
areaGeometry: AreaGeometry;
@@ -351,8 +366,12 @@ describe('Rendering points - areas', () => {
351366
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
352367
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
353368
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
354-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
355-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
369+
const xScale = computeXScale({
370+
xDomain: pointSeriesDomains.xDomain,
371+
totalBarsInCluster: pointSeriesMap.size,
372+
range: [0, 100],
373+
});
374+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
356375

357376
let renderedArea: {
358377
areaGeometry: AreaGeometry;
@@ -457,8 +476,12 @@ describe('Rendering points - areas', () => {
457476
pointSeriesMap.set(spec1Id, pointSeriesSpec1);
458477
pointSeriesMap.set(spec2Id, pointSeriesSpec2);
459478
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
460-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
461-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
479+
const xScale = computeXScale({
480+
xDomain: pointSeriesDomains.xDomain,
481+
totalBarsInCluster: pointSeriesMap.size,
482+
range: [0, 100],
483+
});
484+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
462485

463486
let firstLine: {
464487
areaGeometry: AreaGeometry;
@@ -620,8 +643,12 @@ describe('Rendering points - areas', () => {
620643
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
621644
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
622645
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
623-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
624-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
646+
const xScale = computeXScale({
647+
xDomain: pointSeriesDomains.xDomain,
648+
totalBarsInCluster: pointSeriesMap.size,
649+
range: [0, 100],
650+
});
651+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
625652

626653
let renderedArea: {
627654
areaGeometry: AreaGeometry;
@@ -726,8 +753,12 @@ describe('Rendering points - areas', () => {
726753
pointSeriesMap.set(spec1Id, pointSeriesSpec1);
727754
pointSeriesMap.set(spec2Id, pointSeriesSpec2);
728755
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
729-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
730-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
756+
const xScale = computeXScale({
757+
xDomain: pointSeriesDomains.xDomain,
758+
totalBarsInCluster: pointSeriesMap.size,
759+
range: [0, 100],
760+
});
761+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
731762

732763
let firstLine: {
733764
areaGeometry: AreaGeometry;
@@ -874,8 +905,12 @@ describe('Rendering points - areas', () => {
874905
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
875906
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
876907
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
877-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 90);
878-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
908+
const xScale = computeXScale({
909+
xDomain: pointSeriesDomains.xDomain,
910+
totalBarsInCluster: pointSeriesMap.size,
911+
range: [0, 90],
912+
});
913+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
879914

880915
let renderedArea: {
881916
areaGeometry: AreaGeometry;

‎src/chart_types/xy_chart/rendering/rendering.bands.test.ts‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,12 @@ describe('Rendering bands - areas', () => {
2828
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
2929
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
3030
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
31-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
32-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
31+
const xScale = computeXScale({
32+
xDomain: pointSeriesDomains.xDomain,
33+
totalBarsInCluster: pointSeriesMap.size,
34+
range: [0, 100],
35+
});
36+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
3337
let renderedArea: {
3438
areaGeometry: AreaGeometry;
3539
indexedGeometries: Map<any, IndexedGeometry[]>;
@@ -78,8 +82,12 @@ describe('Rendering bands - areas', () => {
7882
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
7983
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
8084
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
81-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
82-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
85+
const xScale = computeXScale({
86+
xDomain: pointSeriesDomains.xDomain,
87+
totalBarsInCluster: pointSeriesMap.size,
88+
range: [0, 100],
89+
});
90+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
8391
let renderedArea: {
8492
areaGeometry: AreaGeometry;
8593
indexedGeometries: Map<any, IndexedGeometry[]>;
@@ -216,8 +224,12 @@ describe('Rendering bands - areas', () => {
216224
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
217225
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
218226
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
219-
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
220-
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
227+
const xScale = computeXScale({
228+
xDomain: pointSeriesDomains.xDomain,
229+
totalBarsInCluster: pointSeriesMap.size,
230+
range: [0, 100],
231+
});
232+
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
221233
let renderedArea: {
222234
areaGeometry: AreaGeometry;
223235
indexedGeometries: Map<any, IndexedGeometry[]>;
@@ -393,8 +405,12 @@ describe('Rendering bands - areas', () => {
393405
const barSeriesMap = new Map<SpecId, BarSeriesSpec>();
394406
barSeriesMap.set(SPEC_ID, barSeriesSpec);
395407
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
396-
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
397-
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
408+
const xScale = computeXScale({
409+
xDomain: barSeriesDomains.xDomain,
410+
totalBarsInCluster: barSeriesMap.size,
411+
range: [0, 100],
412+
});
413+
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });
398414

399415
test('Can render two bars', () => {
400416
const { barGeometries } = renderBars(

‎src/chart_types/xy_chart/rendering/rendering.bars.test.ts‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,12 @@ describe('Rendering bars', () => {
2727
barSeriesMap.set(SPEC_ID, barSeriesSpec);
2828
const customDomain = [0, 1];
2929
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), customDomain);
30-
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
31-
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
30+
const xScale = computeXScale({
31+
xDomain: barSeriesDomains.xDomain,
32+
totalBarsInCluster: barSeriesMap.size,
33+
range: [0, 100],
34+
});
35+
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });
3236

3337
test('Can render two bars within domain', () => {
3438
const { barGeometries } = renderBars(
@@ -207,8 +211,12 @@ describe('Rendering bars', () => {
207211
barSeriesMap.set(spec1Id, barSeriesSpec1);
208212
barSeriesMap.set(spec2Id, barSeriesSpec2);
209213
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
210-
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
211-
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
214+
const xScale = computeXScale({
215+
xDomain: barSeriesDomains.xDomain,
216+
totalBarsInCluster: barSeriesMap.size,
217+
range: [0, 100],
218+
});
219+
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });
212220

213221
test('can render first spec bars', () => {
214222
const { barGeometries } = renderBars(
@@ -392,8 +400,12 @@ describe('Rendering bars', () => {
392400
const barSeriesMap = new Map<SpecId, BarSeriesSpec>();
393401
barSeriesMap.set(SPEC_ID, barSeriesSpec);
394402
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
395-
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
396-
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
403+
const xScale = computeXScale({
404+
xDomain: barSeriesDomains.xDomain,
405+
totalBarsInCluster: barSeriesMap.size,
406+
range: [0, 100],
407+
});
408+
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });
397409

398410
test('Can render two bars', () => {
399411
const { barGeometries } = renderBars(
@@ -507,8 +519,12 @@ describe('Rendering bars', () => {
507519
barSeriesMap.set(spec1Id, barSeriesSpec1);
508520
barSeriesMap.set(spec2Id, barSeriesSpec2);
509521
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
510-
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
511-
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
522+
const xScale = computeXScale({
523+
xDomain: barSeriesDomains.xDomain,
524+
totalBarsInCluster: barSeriesMap.size,
525+
range: [0, 100],
526+
});
527+
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });
512528

513529
test('can render first spec bars', () => {
514530
const { barGeometries } = renderBars(
@@ -706,8 +722,12 @@ describe('Rendering bars', () => {
706722
barSeriesMap.set(spec1Id, barSeriesSpec1);
707723
barSeriesMap.set(spec2Id, barSeriesSpec2);
708724
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
709-
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
710-
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
725+
const xScale = computeXScale({
726+
xDomain: barSeriesDomains.xDomain,
727+
totalBarsInCluster: barSeriesMap.size,
728+
range: [0, 100],
729+
});
730+
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });
711731

712732
test('can render first spec bars', () => {
713733
const { barGeometries } = renderBars(

0 commit comments

Comments
 (0)