Skip to content

Commit

Permalink
feat(axes): option to fit domain to list of annotation SpecIds (#1641)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickofthyme
nickofthyme authored Apr 14, 2022
1 parent 512a6cd commit 220350d
Show file tree
Hide file tree
Showing 35 changed files with 286 additions and 325 deletions.
7 changes: 7 additions & 0 deletions integration/server/mocks/@storybook/addon-knobs/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,13 @@ export function array(name: string, dftValues: unknown[], options: any, groupId?
return values;
}

export function object(name: string, dftValue: unknown, options: any, groupId?: string) {
const params = getParams();
const key = getKnobKey(name, groupId);
const value = params.get(key);
return value ? JSON.parse(value) : dftValue;
}

export function optionsKnob(name: string, values: unknown, dftValues: unknown[], options: any, groupId?: string) {
return array(name, dftValues, options, groupId);
}
Expand Down
Binary file modified ...-visual-tests-for-all-stories-axes-fit-domain-visually-looks-correct-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ies-test-ts-axis-stories-should-included-select-annotation-y-domains-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions integration/tests/axis_stories.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ describe('Axis stories', () => {
'http://localhost:9001/?path=/story/area-chart--timeslip&globals=theme:light&knob-Minor%20grid%20lines=true&knob-Shift%20time=0&knob-Shorter%20X%20axis%20minor%20whiskers=true&knob-Stretch%20time=18&knob-Time%20zoom=120&knob-X%20axis%20minor%20whiskers=true&knob-showOverlappingLabels%20time%20axis=true',
);
});
it('should included select annotation y domains', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/axes--fit-domain&globals=theme:light&knob-dataset=positive&knob-fit%20Y%20domain%20to%20data=true&knob-Specs%20to%20fit%20(yDomain)[0]=theshold&knob-Specs%20to%20fit%20(yDomain)[1]=rect&knob-constrain%20padding=true&knob-domain%20padding=0.1&knob-Domain%20padding%20unit=domainRatio&knob-thesholds%20-%20line[0]=1300&knob-theshold%20-%20rect={%22y0%22:-200,%22y1%22:null}',
);
});
it('should have st nd rd th after day-of-month numbers', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/area-chart--timeslip&globals=theme:light&knob-Minor%20grid%20lines=true&knob-Shift%20time=-4.3&knob-Shorter%20X%20axis%20minor%20whiskers=true&knob-Stretch%20time=4.8&knob-Time%20zoom=120&knob-X%20axis%20minor%20whiskers=true&knob-showOverlappingLabels%20time%20axis=true&knob-showOverlappingTicks%20time%20axis=true',
Expand Down
3 changes: 2 additions & 1 deletion packages/charts/api/charts.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1449,7 +1449,7 @@ export interface LegendStyle {
export const LIGHT_THEME: Theme;

// @public
export const LineAnnotation: <D = any>(props: SFProps<LineAnnotationSpec<D>, "chartType" | "specType", "style" | "zIndex" | "groupId" | "hideLines" | "hideLinesTooltips" | "annotationType" | "hideTooltips", "offset" | "fallbackPlacements" | "placement" | "boundary" | "boundaryPadding" | "marker" | "customTooltip" | "markerBody" | "markerDimensions" | "markerPosition" | "customTooltipDetails", "id" | "dataValues" | "domainType">) => null;
export const LineAnnotation: <D = any>(props: SFProps<LineAnnotationSpec<D>, "chartType" | "specType", "style" | "zIndex" | "groupId" | "hideLines" | "hideLinesTooltips" | "annotationType" | "hideTooltips", "offset" | "fallbackPlacements" | "placement" | "boundary" | "boundaryPadding" | "marker" | "customTooltip" | "markerBody" | "markerDimensions" | "markerPosition" | "customTooltipDetails", "id" | "domainType" | "dataValues">) => null;

// @public
export interface LineAnnotationDatum<D = any> {
Expand Down Expand Up @@ -2694,6 +2694,7 @@ export interface XYChartSeriesIdentifier<D extends BaseDatum = Datum> extends Se
export interface YDomainBase {
constrainPadding?: boolean;
fit?: boolean;
includeDataFromIds?: SpecId[];
padding?: number;
paddingUnit?: DomainPaddingUnit;
}
Expand Down
1 change: 1 addition & 0 deletions packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function initStore() {

describe('Picked shapes selector', () => {
function addSeries(store: Store<GlobalChartState>, spec: PartitionSpec, settings?: Partial<SettingsSpec>) {
// @ts-ignore - nesting limitation
store.dispatch(upsertSpec(MockGlobalSpec.settings(settings)));
store.dispatch(upsertSpec(spec));
store.dispatch(specParsed());
Expand Down
134 changes: 16 additions & 118 deletions packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { MockAnnotationLineProps, MockAnnotationRectProps } from '../../../../mo
import { MockAnnotationSpec, MockGlobalSpec, MockSeriesSpec } from '../../../../mocks/specs';
import { MockStore } from '../../../../mocks/store';
import { ScaleType } from '../../../../scales/constants';
import { Position } from '../../../../utils/common';
import { AnnotationId } from '../../../../utils/ids';
import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../../utils/themes/merge_utils';
import { computeAnnotationDimensionsSelector } from '../../state/selectors/compute_annotations';
Expand Down Expand Up @@ -44,15 +43,11 @@ describe('Annotation utils', () => {
],
});

const verticalAxisSpec = MockGlobalSpec.axis({
id: 'vertical_axis',
const defaultAxisSpec = {
groupId,
hide: false,
showOverlappingTicks: false,
showOverlappingLabels: false,
position: Position.Left,
hide: true,
showGridLines: true,
});
};

test('should compute line annotation in x ordinal scale', () => {
const store = MockStore.default();
Expand Down Expand Up @@ -130,15 +125,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
ordinalBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
hide: true,
}),
],
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.yAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -173,16 +160,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
ordinalBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
position: Position.Right,
hide: true,
}),
],
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.yAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -217,15 +195,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
ordinalBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
hide: true,
}),
],
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.yAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -263,8 +233,8 @@ describe('Annotation utils', () => {
settings,
ordinalBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
MockGlobalSpec.yAxis({
...defaultAxisSpec,
hide: true,
}),
],
Expand All @@ -289,16 +259,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
ordinalBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
position: Position.Bottom,
hide: true,
}),
],
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -332,16 +293,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
continuousBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
position: Position.Top,
hide: true,
}),
],
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -374,16 +326,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
continuousBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
position: Position.Bottom,
hide: true,
}),
],
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -416,16 +359,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
ordinalBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
position: Position.Top,
hide: true,
}),
],
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -459,16 +393,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
continuousBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
position: Position.Top,
hide: true,
}),
],
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -503,16 +428,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
continuousBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
position: Position.Top,
hide: true,
}),
],
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -546,16 +462,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
continuousBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
position: Position.Top,
hide: true,
}),
],
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down Expand Up @@ -589,16 +496,7 @@ describe('Annotation utils', () => {
});

MockStore.addSpecs(
[
settings,
continuousBarChart,
lineAnnotation,
MockGlobalSpec.axis({
...verticalAxisSpec,
position: Position.Bottom,
hide: true,
}),
],
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
store,
);

Expand Down
11 changes: 3 additions & 8 deletions packages/charts/src/chart_types/xy_chart/annotations/line/line.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ describe('annotation marker', () => {
[
spec,
MockGlobalSpec.settingsNoMargins(),
MockGlobalSpec.axis({ position: Position.Left, hide: true }),
MockGlobalSpec.yAxis({ position: Position.Left, hide: true }),
lineYDomainAnnotation,
],
store,
Expand Down Expand Up @@ -92,7 +92,7 @@ describe('annotation marker', () => {
[
spec,
MockGlobalSpec.settingsNoMargins({ rotation: 180 }),
MockGlobalSpec.axis({ position: Position.Left, hide: true }),
MockGlobalSpec.yAxis({ position: Position.Left, hide: true }),
lineYDomainAnnotation,
],
store,
Expand Down Expand Up @@ -129,12 +129,7 @@ describe('annotation marker', () => {

test('should compute line annotation dimensions with marker if defined (x domain)', () => {
MockStore.addSpecs(
[
spec,
MockGlobalSpec.settingsNoMargins(),
MockGlobalSpec.axis({ position: Position.Bottom, hide: true }),
lineXDomainAnnotation,
],
[spec, MockGlobalSpec.settingsNoMargins(), MockGlobalSpec.xAxis({ hide: true }), lineXDomainAnnotation],
store,
);

Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/chart_types/xy_chart/annotations/rect/dimensions.integration.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ describe('Render rect annotation within', () => {
const heightFromStore = 200;
const store = MockStore.default({ top: 0, left: 0, width: 20, height: heightFromStore });
const settings = MockGlobalSpec.settingsNoMargins();
const yDomainFitted = MockGlobalSpec.axis({ domain: { min: NaN, max: NaN, fit: true } });
const yDomainFitted = MockGlobalSpec.yAxis({ domain: { fit: true } });
const annotation = MockAnnotationSpec.rect({
dataValues: [{ coordinates: { x0: 2, x1: 4 } }],
});
Expand Down
6 changes: 2 additions & 4 deletions packages/charts/src/chart_types/xy_chart/annotations/utils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,13 @@ import { getAnnotationAxis, getTransformedCursor, invertTransformedCursor } from
describe('Annotation utils', () => {
const groupId = 'foo-group';

const verticalAxisSpec = MockGlobalSpec.axis({
const verticalAxisSpec = MockGlobalSpec.yAxis({
id: 'vertical_axis',
groupId,
position: Position.Left,
});
const horizontalAxisSpec = MockGlobalSpec.axis({
const horizontalAxisSpec = MockGlobalSpec.xAxis({
id: 'vertical_axis',
groupId,
position: Position.Bottom,
});

test('should get associated axis for an annotation', () => {
Expand Down
5 changes: 5 additions & 0 deletions packages/charts/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 @@ -93,30 +93,35 @@ describe('Crosshair utils linear scale', () => {
const barSeriesDomains = computeSeriesDomains(
barSeries,
getScaleConfigsFromSpecs([], barSeries, MockGlobalSpec.settings()),
[],
);

const multiBarSeries = [barSeries1, barSeries2];
const multiBarSeriesDomains = computeSeriesDomains(
multiBarSeries,
getScaleConfigsFromSpecs([], multiBarSeries, MockGlobalSpec.settings()),
[],
);

const lineSeries = [lineSeries1];
const lineSeriesDomains = computeSeriesDomains(
lineSeries,
getScaleConfigsFromSpecs([], lineSeries, MockGlobalSpec.settings()),
[],
);

const multiLineSeries = [lineSeries1, lineSeries2];
const multiLineSeriesDomains = computeSeriesDomains(
multiLineSeries,
getScaleConfigsFromSpecs([], multiLineSeries, MockGlobalSpec.settings()),
[],
);

const mixedLinesBars = [lineSeries1, lineSeries2, barSeries1, barSeries2];
const mixedLinesBarsSeriesDomains = computeSeriesDomains(
mixedLinesBars,
getScaleConfigsFromSpecs([], mixedLinesBars, MockGlobalSpec.settings()),
[],
);

const barSeriesScale = computeXScale({
Expand Down
Loading

0 comments on commit 220350d

Please sign in to comment.