Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: customize number of axis ticks #319

Merged
merged 4 commits into from
Aug 21, 2019
Merged

feat: customize number of axis ticks #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9604c77
refactor(scales): clean ScaleContinuous constructor arguments
markov00 Aug 16, 2019
0916abc
feat(axes): specify the number of ticks for the y axis
markov00 Aug 16, 2019
ecb8976
feat(axes): add ticks for X axis
markov00 Aug 16, 2019
8406289
fix: fix opacity for horizontal axis debug rect
markov00 Aug 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/chart_types/xy_chart/annotations/annotation_marker.test.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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