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: add domain padding #707

Merged
merged 16 commits into from
Jun 30, 2020
Merged

feat: add domain padding #707

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
0f9f595
feat: add y domain padding
nickofthyme Jun 12, 2020
2d177d4
fix: stories based on deprecations
nickofthyme Jun 12, 2020
8fee43a
test: update tests with changes to domain logic
nickofthyme Jun 12, 2020
7a944fd
test: update vrt with domain changes
nickofthyme Jun 12, 2020
816ace0
docs: update api spec with domain changes
nickofthyme Jun 12, 2020
6950a66
fix: lint error
nickofthyme Jun 12, 2020
cf910e8
fix: broken domain logic
nickofthyme Jun 25, 2020
6aa235b
Merge branch 'master' into feat/add-domain-padding
nickofthyme Jun 25, 2020
8374e5f
fix: vrt screenshots
nickofthyme Jun 25, 2020
e0d8264
chore: missing release tags
nickofthyme Jun 25, 2020
6397484
fix: lint issue
nickofthyme Jun 25, 2020
bb179f1
Merge branch 'master' into feat/add-domain-padding
nickofthyme Jun 29, 2020
74d3672
fix: update comments and refactor mutations
nickofthyme Jun 29, 2020
f088063
fix: else break logic
nickofthyme Jun 30, 2020
e5636c6
test: updarte screenshots
nickofthyme Jun 30, 2020
6169700
Merge branch 'master' into feat/add-domain-padding
markov00 Jun 30, 2020
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
124 changes: 16 additions & 108 deletions api/charts.api.md
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified ...-visual-tests-for-all-stories-axes-fit-domain-visually-looks-correct-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...ld-show-correct-extents-banded-1-snap.png → ...ld-show-correct-extents-banded-1-snap.png
View file
Open in desktop
File renamed without changes
0 ...d-show-correct-extents-stacked-1-snap.png → ...d-show-correct-extents-stacked-1-snap.png
View file
Open in desktop
File renamed without changes
0 ...ld-show-correct-extents-banded-1-snap.png → ...ld-show-correct-extents-banded-1-snap.png
View file
Open in desktop
File renamed without changes
0 ...d-show-correct-extents-stacked-1-snap.png → ...d-show-correct-extents-stacked-1-snap.png
View file
Open in desktop
File renamed without changes
28 changes: 14 additions & 14 deletions integration/tests/area_stories.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,36 +25,36 @@ describe('Area series stories', () => {
'http://localhost:9001/?path=/story/area-chart--stacked-percentage&knob-stacked as percentage=',
);
});

describe('accessorFormats', () => {
it('should show custom format', async() => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/area-chart--band-area&knob-scale to extent=&knob-y0AccessorFormat= [min]&knob-y1AccessorFormat= [max]',
);
});
});

describe('scale to extents', () => {
describe('scaleyScaleToDataExtent is true', () => {
describe('domain.fit is true', () => {
const trueUrl = 'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-fit Y domain=true';
it('should show correct extents - Banded', async() => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-scale to extent=true',
);
await common.expectChartAtUrlToMatchScreenshot(trueUrl);
});

it('should show correct extents - stacked', async() => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-scale to extent=true',
);
await common.expectChartAtUrlToMatchScreenshot(trueUrl);
});
});
describe('scaleyScaleToDataExtent is false', () => {

describe('domain.fit is false', () => {
const falseUrl = 'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-fit Y domain=false';

it('should show correct extents - Banded', async() => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-scale to extent=false',
);
await common.expectChartAtUrlToMatchScreenshot(falseUrl);
});

it('should show correct extents - stacked', async() => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-scale to extent=false',
);
await common.expectChartAtUrlToMatchScreenshot(falseUrl);
});
});
});
Expand Down
1 change: 1 addition & 0 deletions src/chart_types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,5 @@ export const ChartTypes = Object.freeze({
XYAxis: 'xy_axis' as const,
});

/** @public */
export type ChartTypes = $Values<typeof ChartTypes>;
2 changes: 2 additions & 0 deletions src/chart_types/partition_chart/layout/types/config_types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const PartitionLayout = Object.freeze({
treemap: 'treemap' as const,
});

/** @public */
export type PartitionLayout = Values<typeof PartitionLayout>; // could use ValuesType<typeof HierarchicalChartTypes>

export type PerSidePadding = PerSideDistance;
Expand All @@ -47,6 +48,7 @@ interface LabelConfig extends Font {
padding: Padding;
}

/** @public */
export type FillLabelConfig = LabelConfig;

export interface LinkLabelConfig extends LabelConfig {
Expand Down
1 change: 1 addition & 0 deletions src/chart_types/xy_chart/annotations/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { AnnotationType } from '../utils/specs';
import { AnnotationLineProps } from './line/types';
import { AnnotationRectProps } from './rect/types';

/** @public */
export type AnnotationTooltipFormatter = (details?: string) => JSX.Element | null;

/**
Expand Down
16 changes: 7 additions & 9 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 @@ -47,7 +47,6 @@ describe('Crosshair utils linear scale', () => {
yAccessors: [1],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: true,
};
const barSeries2: BasicSeriesSpec = {
chartType: ChartTypes.XYAxis,
Expand All @@ -64,7 +63,6 @@ describe('Crosshair utils linear scale', () => {
yAccessors: [1],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: true,
};
const lineSeries1: BasicSeriesSpec = {
chartType: ChartTypes.XYAxis,
Expand All @@ -81,7 +79,6 @@ describe('Crosshair utils linear scale', () => {
yAccessors: [1],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: true,
};
const lineSeries2: BasicSeriesSpec = {
chartType: ChartTypes.XYAxis,
Expand All @@ -98,23 +95,24 @@ describe('Crosshair utils linear scale', () => {
yAccessors: [1],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: true,
};

const domainGroup = new Map([['group1', { fit: true }]]);

const barSeries = [barSeries1];
const barSeriesDomains = computeSeriesDomains(barSeries);
const barSeriesDomains = computeSeriesDomains(barSeries, domainGroup);

const multiBarSeries = [barSeries1, barSeries2];
const multiBarSeriesDomains = computeSeriesDomains(multiBarSeries);
const multiBarSeriesDomains = computeSeriesDomains(multiBarSeries, domainGroup);

const lineSeries = [lineSeries1];
const lineSeriesDomains = computeSeriesDomains(lineSeries);
const lineSeriesDomains = computeSeriesDomains(lineSeries, domainGroup);

const multiLineSeries = [lineSeries1, lineSeries2];
const multiLineSeriesDomains = computeSeriesDomains(multiLineSeries);
const multiLineSeriesDomains = computeSeriesDomains(multiLineSeries, domainGroup);

const mixedLinesBars = [lineSeries1, lineSeries2, barSeries1, barSeries2];
const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBars);
const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBars, domainGroup);

const barSeriesScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
Expand Down
16 changes: 7 additions & 9 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 @@ -46,7 +46,6 @@ describe('Crosshair utils ordinal scales', () => {
yAccessors: [1],
xScaleType: ScaleType.Ordinal,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: true,
};
const barSeries2: BasicSeriesSpec = {
chartType: ChartTypes.XYAxis,
Expand All @@ -63,7 +62,6 @@ describe('Crosshair utils ordinal scales', () => {
yAccessors: [1],
xScaleType: ScaleType.Ordinal,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: true,
};
const lineSeries1: BasicSeriesSpec = {
chartType: ChartTypes.XYAxis,
Expand All @@ -80,7 +78,6 @@ describe('Crosshair utils ordinal scales', () => {
yAccessors: [1],
xScaleType: ScaleType.Ordinal,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: true,
};
const lineSeries2: BasicSeriesSpec = {
chartType: ChartTypes.XYAxis,
Expand All @@ -97,23 +94,24 @@ describe('Crosshair utils ordinal scales', () => {
yAccessors: [1],
xScaleType: ScaleType.Ordinal,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: true,
};

const domainGroup = new Map([['group1', { fit: true }]]);

const barSeries = [barSeries1];
const barSeriesDomains = computeSeriesDomains(barSeries);
const barSeriesDomains = computeSeriesDomains(barSeries, domainGroup);

const multiBarSeries = [barSeries1, barSeries2];
const multiBarSeriesDomains = computeSeriesDomains(multiBarSeries);
const multiBarSeriesDomains = computeSeriesDomains(multiBarSeries, domainGroup);

const lineSeries = [lineSeries1];
const lineSeriesDomains = computeSeriesDomains(lineSeries);
const lineSeriesDomains = computeSeriesDomains(lineSeries, domainGroup);

const multiLineSeries = [lineSeries1, lineSeries2];
const multiLineSeriesDomains = computeSeriesDomains(multiLineSeries);
const multiLineSeriesDomains = computeSeriesDomains(multiLineSeries, domainGroup);

const mixedLinesBars = [lineSeries1, lineSeries2, barSeries1, barSeries2];
const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBars);
const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBars, domainGroup);

const barSeriesScale = computeXScale({
xDomain: barSeriesDomains.xDomain,
Expand Down
18 changes: 0 additions & 18 deletions src/chart_types/xy_chart/domains/x_domain.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 1, y: 0 },
Expand All @@ -216,7 +215,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 7, y: 0 },
Expand Down Expand Up @@ -246,7 +244,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 1, y: 0 },
Expand All @@ -264,7 +261,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 7, y: 0 },
Expand Down Expand Up @@ -295,7 +291,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 1, y: 0 },
Expand All @@ -313,7 +308,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 7, y: 0 },
Expand Down Expand Up @@ -348,7 +342,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 1, y: 0 },
Expand All @@ -366,7 +359,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 7, y: 0 },
Expand Down Expand Up @@ -401,7 +393,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 1, y: 0 },
Expand All @@ -419,7 +410,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Ordinal,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 7, y: 0 },
Expand Down Expand Up @@ -509,7 +499,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 1, y: 0 },
Expand All @@ -527,7 +516,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Ordinal,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 7, y: 0 },
Expand Down Expand Up @@ -562,7 +550,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Ordinal,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 1, y: 0 },
Expand All @@ -580,7 +567,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Time,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 7, y: 0 },
Expand Down Expand Up @@ -615,7 +601,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Ordinal,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 1, y: 0 },
Expand All @@ -633,7 +618,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: [
{ x: 0, y: 0 },
{ x: 7, y: 0 },
Expand Down Expand Up @@ -670,7 +654,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Linear,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: new Array(maxValues).fill(0).map((d, i) => ({ x: i, y: i })),
};
const ds2: BasicSeriesSpec = {
Expand All @@ -683,7 +666,6 @@ describe('X Domain', () => {
yAccessors: ['y'],
xScaleType: ScaleType.Ordinal,
yScaleType: ScaleType.Linear,
yScaleToDataExtent: false,
data: new Array(maxValues).fill(0).map((d, i) => ({ x: i, y: i })),
};
const specDataSeries = [ds1, ds2];
Expand Down
2 changes: 1 addition & 1 deletion src/chart_types/xy_chart/domains/x_domain.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export function mergeXDomain(
}
}
} else {
seriesXComputedDomains = computeContinuousDataDomain(values, identity, true);
seriesXComputedDomains = computeContinuousDataDomain(values, identity, { fit: true });
let customMinInterval: undefined | number;

if (customXDomain) {
Expand Down
Loading