Skip to content

Commit

Permalink
feat: customize number of axis ticks (#319)
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@markov00
markov00 authored Aug 21, 2019
1 parent ed6d0e5 commit 2b838d7
Show file tree
Hide file tree
Showing 23 changed files with 488 additions and 208 deletions.
6 changes: 5 additions & 1 deletion src/chart_types/xy_chart/annotations/annotation_marker.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,11 @@ describe('annotation marker', () => {
const maxRange = 100;

const continuousData = [0, 10];
const continuousScale = new ScaleContinuous(ScaleType.Linear, continuousData, [minRange, maxRange]);
const continuousScale = new ScaleContinuous({
type: ScaleType.Linear,
domain: continuousData,
range: [minRange, maxRange],
});

const chartDimensions: Dimensions = {
width: 10,
Expand Down
14 changes: 12 additions & 2 deletions src/chart_types/xy_chart/annotations/annotation_utils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,14 @@ describe('annotation utils', () => {
const maxRange = 100;

const continuousData = [0, 10];
const continuousScale = new ScaleContinuous(ScaleType.Linear, continuousData, [minRange, maxRange], 0, 1);
const continuousScale = new ScaleContinuous(
{
type: ScaleType.Linear,
domain: continuousData,
range: [minRange, maxRange],
},
{ bandwidth: 0, minInterval: 1 },
);

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

const xScale: Scale = new ScaleContinuous(ScaleType.Linear, continuousData, [minRange, maxRange], 1, 1);
const xScale: Scale = new ScaleContinuous(
{ type: ScaleType.Linear, domain: continuousData, range: [minRange, maxRange] },
{ bandwidth: 1, minInterval: 1 },
);

const annotationRectangle: RectAnnotationSpec = {
annotationId: getAnnotationId('rect'),
Expand Down
30 changes: 25 additions & 5 deletions src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,31 @@ describe('Crosshair utils linear scale', () => {
mixedLinesBarsMap.set(barSeries2SpecId, barSeries2);
const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map());

const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 120);
const multiBarSeriesScale = computeXScale(multiBarSeriesDomains.xDomain, multiBarSeriesMap.size, 0, 120);
const lineSeriesScale = computeXScale(lineSeriesDomains.xDomain, lineSeriesMap.size, 0, 120);
const multiLineSeriesScale = computeXScale(multiLineSeriesDomains.xDomain, multiLineSeriesMap.size, 0, 120);
const mixedLinesBarsSeriesScale = computeXScale(mixedLinesBarsSeriesDomains.xDomain, mixedLinesBarsMap.size, 0, 120);
const barSeriesScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
totalBarsInCluster: barSeriesMap.size,
range: [0, 120],
});
const multiBarSeriesScale = computeXScale({
xDomain: multiBarSeriesDomains.xDomain,
totalBarsInCluster: multiBarSeriesMap.size,
range: [0, 120],
});
const lineSeriesScale = computeXScale({
xDomain: lineSeriesDomains.xDomain,
totalBarsInCluster: lineSeriesMap.size,
range: [0, 120],
});
const multiLineSeriesScale = computeXScale({
xDomain: multiLineSeriesDomains.xDomain,
totalBarsInCluster: multiLineSeriesMap.size,
range: [0, 120],
});
const mixedLinesBarsSeriesScale = computeXScale({
xDomain: mixedLinesBarsSeriesDomains.xDomain,
totalBarsInCluster: mixedLinesBarsMap.size,
range: [0, 120],
});

/**
* if we have lines on a linear scale, the snap position and band should
Expand Down
30 changes: 25 additions & 5 deletions src/chart_types/xy_chart/crosshair/crosshair_utils.ordinal_snap.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,31 @@ describe('Crosshair utils ordinal scales', () => {
mixedLinesBarsMap.set(barSeries2SpecId, barSeries2);
const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map());

const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 120);
const multiBarSeriesScale = computeXScale(multiBarSeriesDomains.xDomain, multiBarSeriesMap.size, 0, 120);
const lineSeriesScale = computeXScale(lineSeriesDomains.xDomain, lineSeriesMap.size, 0, 120);
const multiLineSeriesScale = computeXScale(multiLineSeriesDomains.xDomain, multiLineSeriesMap.size, 0, 120);
const mixedLinesBarsSeriesScale = computeXScale(mixedLinesBarsSeriesDomains.xDomain, mixedLinesBarsMap.size, 0, 120);
const barSeriesScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
totalBarsInCluster: barSeriesMap.size,
range: [0, 120],
});
const multiBarSeriesScale = computeXScale({
xDomain: multiBarSeriesDomains.xDomain,
totalBarsInCluster: multiBarSeriesMap.size,
range: [0, 120],
});
const lineSeriesScale = computeXScale({
xDomain: lineSeriesDomains.xDomain,
totalBarsInCluster: lineSeriesMap.size,
range: [0, 120],
});
const multiLineSeriesScale = computeXScale({
xDomain: multiLineSeriesDomains.xDomain,
totalBarsInCluster: multiLineSeriesMap.size,
range: [0, 120],
});
const mixedLinesBarsSeriesScale = computeXScale({
xDomain: mixedLinesBarsSeriesDomains.xDomain,
totalBarsInCluster: mixedLinesBarsMap.size,
range: [0, 120],
});

test('can snap position on scale ordinal bar', () => {
let snappedPosition = getSnapPosition('a', barSeriesScale);
Expand Down
67 changes: 51 additions & 16 deletions src/chart_types/xy_chart/rendering/rendering.areas.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,15 @@ describe('Rendering points - areas', () => {
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({
yDomains: pointSeriesDomains.yDomain,
range: [100, 0],
});
let renderedArea: {
areaGeometry: AreaGeometry;
indexedGeometries: Map<any, IndexedGeometry[]>;
Expand Down Expand Up @@ -76,8 +83,12 @@ describe('Rendering points - areas', () => {
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
let renderedArea: {
areaGeometry: AreaGeometry;
indexedGeometries: Map<any, IndexedGeometry[]>;
Expand Down Expand Up @@ -187,8 +198,12 @@ describe('Rendering points - areas', () => {
pointSeriesMap.set(spec1Id, pointSeriesSpec1);
pointSeriesMap.set(spec2Id, pointSeriesSpec2);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });

let firstLine: {
areaGeometry: AreaGeometry;
Expand Down Expand Up @@ -351,8 +366,12 @@ describe('Rendering points - areas', () => {
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });

let renderedArea: {
areaGeometry: AreaGeometry;
Expand Down Expand Up @@ -457,8 +476,12 @@ describe('Rendering points - areas', () => {
pointSeriesMap.set(spec1Id, pointSeriesSpec1);
pointSeriesMap.set(spec2Id, pointSeriesSpec2);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });

let firstLine: {
areaGeometry: AreaGeometry;
Expand Down Expand Up @@ -620,8 +643,12 @@ describe('Rendering points - areas', () => {
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });

let renderedArea: {
areaGeometry: AreaGeometry;
Expand Down Expand Up @@ -726,8 +753,12 @@ describe('Rendering points - areas', () => {
pointSeriesMap.set(spec1Id, pointSeriesSpec1);
pointSeriesMap.set(spec2Id, pointSeriesSpec2);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });

let firstLine: {
areaGeometry: AreaGeometry;
Expand Down Expand Up @@ -874,8 +905,12 @@ describe('Rendering points - areas', () => {
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 90);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 90],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });

let renderedArea: {
areaGeometry: AreaGeometry;
Expand Down
32 changes: 24 additions & 8 deletions src/chart_types/xy_chart/rendering/rendering.bands.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,12 @@ describe('Rendering bands - areas', () => {
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
let renderedArea: {
areaGeometry: AreaGeometry;
indexedGeometries: Map<any, IndexedGeometry[]>;
Expand Down Expand Up @@ -78,8 +82,12 @@ describe('Rendering bands - areas', () => {
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
let renderedArea: {
areaGeometry: AreaGeometry;
indexedGeometries: Map<any, IndexedGeometry[]>;
Expand Down Expand Up @@ -216,8 +224,12 @@ describe('Rendering bands - areas', () => {
const pointSeriesMap = new Map<SpecId, AreaSeriesSpec>();
pointSeriesMap.set(SPEC_ID, pointSeriesSpec);
const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100);
const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: pointSeriesDomains.xDomain,
totalBarsInCluster: pointSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
let renderedArea: {
areaGeometry: AreaGeometry;
indexedGeometries: Map<any, IndexedGeometry[]>;
Expand Down Expand Up @@ -393,8 +405,12 @@ describe('Rendering bands - areas', () => {
const barSeriesMap = new Map<SpecId, BarSeriesSpec>();
barSeriesMap.set(SPEC_ID, barSeriesSpec);
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
totalBarsInCluster: barSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });

test('Can render two bars', () => {
const { barGeometries } = renderBars(
Expand Down
40 changes: 30 additions & 10 deletions src/chart_types/xy_chart/rendering/rendering.bars.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,12 @@ describe('Rendering bars', () => {
barSeriesMap.set(SPEC_ID, barSeriesSpec);
const customDomain = [0, 1];
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), customDomain);
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
totalBarsInCluster: barSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });

test('Can render two bars within domain', () => {
const { barGeometries } = renderBars(
Expand Down Expand Up @@ -207,8 +211,12 @@ describe('Rendering bars', () => {
barSeriesMap.set(spec1Id, barSeriesSpec1);
barSeriesMap.set(spec2Id, barSeriesSpec2);
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
totalBarsInCluster: barSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });

test('can render first spec bars', () => {
const { barGeometries } = renderBars(
Expand Down Expand Up @@ -392,8 +400,12 @@ describe('Rendering bars', () => {
const barSeriesMap = new Map<SpecId, BarSeriesSpec>();
barSeriesMap.set(SPEC_ID, barSeriesSpec);
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
totalBarsInCluster: barSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });

test('Can render two bars', () => {
const { barGeometries } = renderBars(
Expand Down Expand Up @@ -507,8 +519,12 @@ describe('Rendering bars', () => {
barSeriesMap.set(spec1Id, barSeriesSpec1);
barSeriesMap.set(spec2Id, barSeriesSpec2);
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
totalBarsInCluster: barSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });

test('can render first spec bars', () => {
const { barGeometries } = renderBars(
Expand Down Expand Up @@ -706,8 +722,12 @@ describe('Rendering bars', () => {
barSeriesMap.set(spec1Id, barSeriesSpec1);
barSeriesMap.set(spec2Id, barSeriesSpec2);
const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
const xScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
totalBarsInCluster: barSeriesMap.size,
range: [0, 100],
});
const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] });

test('can render first spec bars', () => {
const { barGeometries } = renderBars(
Expand Down
Loading

0 comments on commit 2b838d7

Please sign in to comment.