Skip to content

Commit 220350d

Browse files
nickofthymenickofthyme
authored
feat(axes): option to fit domain to list of annotation SpecIds (#1641)
1 parent 512a6cd commit 220350d

35 files changed

Lines changed: 286 additions & 325 deletions

‎integration/server/mocks/@storybook/addon-knobs/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,13 @@ export function array(name: string, dftValues: unknown[], options: any, groupId?
5959
return values;
6060
}
6161

62+
export function object(name: string, dftValue: unknown, options: any, groupId?: string) {
63+
const params = getParams();
64+
const key = getKnobKey(name, groupId);
65+
const value = params.get(key);
66+
return value ? JSON.parse(value) : dftValue;
67+
}
68+
6269
export function optionsKnob(name: string, values: unknown, dftValues: unknown[], options: any, groupId?: string) {
6370
return array(name, dftValues, options, groupId);
6471
}

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-fit-domain-visually-looks-correct-1-snap.png‎

-6.69 KB
Loading

‎integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-included-select-annotation-y-domains-1-snap.png‎

29 KB
Loading

‎integration/tests/axis_stories.test.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ describe('Axis stories', () => {
2323
'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',
2424
);
2525
});
26+
it('should included select annotation y domains', async () => {
27+
await common.expectChartAtUrlToMatchScreenshot(
28+
'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}',
29+
);
30+
});
2631
it('should have st nd rd th after day-of-month numbers', async () => {
2732
await common.expectChartAtUrlToMatchScreenshot(
2833
'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',

‎packages/charts/api/charts.api.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1449,7 +1449,7 @@ export interface LegendStyle {
14491449
export const LIGHT_THEME: Theme;
14501450

14511451
// @public
1452-
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;
1452+
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;
14531453

14541454
// @public
14551455
export interface LineAnnotationDatum<D = any> {
@@ -2694,6 +2694,7 @@ export interface XYChartSeriesIdentifier<D extends BaseDatum = Datum> extends Se
26942694
export interface YDomainBase {
26952695
constrainPadding?: boolean;
26962696
fit?: boolean;
2697+
includeDataFromIds?: SpecId[];
26972698
padding?: number;
26982699
paddingUnit?: DomainPaddingUnit;
26992700
}

‎packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.test.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ function initStore() {
3636

3737
describe('Picked shapes selector', () => {
3838
function addSeries(store: Store<GlobalChartState>, spec: PartitionSpec, settings?: Partial<SettingsSpec>) {
39+
// @ts-ignore - nesting limitation
3940
store.dispatch(upsertSpec(MockGlobalSpec.settings(settings)));
4041
store.dispatch(upsertSpec(spec));
4142
store.dispatch(specParsed());

‎packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.test.ts‎

Lines changed: 16 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { MockAnnotationLineProps, MockAnnotationRectProps } from '../../../../mo
1010
import { MockAnnotationSpec, MockGlobalSpec, MockSeriesSpec } from '../../../../mocks/specs';
1111
import { MockStore } from '../../../../mocks/store';
1212
import { ScaleType } from '../../../../scales/constants';
13-
import { Position } from '../../../../utils/common';
1413
import { AnnotationId } from '../../../../utils/ids';
1514
import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../../utils/themes/merge_utils';
1615
import { computeAnnotationDimensionsSelector } from '../../state/selectors/compute_annotations';
@@ -44,15 +43,11 @@ describe('Annotation utils', () => {
4443
],
4544
});
4645

47-
const verticalAxisSpec = MockGlobalSpec.axis({
48-
id: 'vertical_axis',
46+
const defaultAxisSpec = {
4947
groupId,
50-
hide: false,
51-
showOverlappingTicks: false,
52-
showOverlappingLabels: false,
53-
position: Position.Left,
48+
hide: true,
5449
showGridLines: true,
55-
});
50+
};
5651

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

132127
MockStore.addSpecs(
133-
[
134-
settings,
135-
ordinalBarChart,
136-
lineAnnotation,
137-
MockGlobalSpec.axis({
138-
...verticalAxisSpec,
139-
hide: true,
140-
}),
141-
],
128+
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.yAxis(defaultAxisSpec, settings.rotation)],
142129
store,
143130
);
144131

@@ -173,16 +160,7 @@ describe('Annotation utils', () => {
173160
});
174161

175162
MockStore.addSpecs(
176-
[
177-
settings,
178-
ordinalBarChart,
179-
lineAnnotation,
180-
MockGlobalSpec.axis({
181-
...verticalAxisSpec,
182-
position: Position.Right,
183-
hide: true,
184-
}),
185-
],
163+
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.yAxis(defaultAxisSpec, settings.rotation)],
186164
store,
187165
);
188166

@@ -217,15 +195,7 @@ describe('Annotation utils', () => {
217195
});
218196

219197
MockStore.addSpecs(
220-
[
221-
settings,
222-
ordinalBarChart,
223-
lineAnnotation,
224-
MockGlobalSpec.axis({
225-
...verticalAxisSpec,
226-
hide: true,
227-
}),
228-
],
198+
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.yAxis(defaultAxisSpec, settings.rotation)],
229199
store,
230200
);
231201

@@ -263,8 +233,8 @@ describe('Annotation utils', () => {
263233
settings,
264234
ordinalBarChart,
265235
lineAnnotation,
266-
MockGlobalSpec.axis({
267-
...verticalAxisSpec,
236+
MockGlobalSpec.yAxis({
237+
...defaultAxisSpec,
268238
hide: true,
269239
}),
270240
],
@@ -289,16 +259,7 @@ describe('Annotation utils', () => {
289259
});
290260

291261
MockStore.addSpecs(
292-
[
293-
settings,
294-
ordinalBarChart,
295-
lineAnnotation,
296-
MockGlobalSpec.axis({
297-
...verticalAxisSpec,
298-
position: Position.Bottom,
299-
hide: true,
300-
}),
301-
],
262+
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
302263
store,
303264
);
304265

@@ -332,16 +293,7 @@ describe('Annotation utils', () => {
332293
});
333294

334295
MockStore.addSpecs(
335-
[
336-
settings,
337-
continuousBarChart,
338-
lineAnnotation,
339-
MockGlobalSpec.axis({
340-
...verticalAxisSpec,
341-
position: Position.Top,
342-
hide: true,
343-
}),
344-
],
296+
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
345297
store,
346298
);
347299

@@ -374,16 +326,7 @@ describe('Annotation utils', () => {
374326
});
375327

376328
MockStore.addSpecs(
377-
[
378-
settings,
379-
continuousBarChart,
380-
lineAnnotation,
381-
MockGlobalSpec.axis({
382-
...verticalAxisSpec,
383-
position: Position.Bottom,
384-
hide: true,
385-
}),
386-
],
329+
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
387330
store,
388331
);
389332

@@ -416,16 +359,7 @@ describe('Annotation utils', () => {
416359
});
417360

418361
MockStore.addSpecs(
419-
[
420-
settings,
421-
ordinalBarChart,
422-
lineAnnotation,
423-
MockGlobalSpec.axis({
424-
...verticalAxisSpec,
425-
position: Position.Top,
426-
hide: true,
427-
}),
428-
],
362+
[settings, ordinalBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
429363
store,
430364
);
431365

@@ -459,16 +393,7 @@ describe('Annotation utils', () => {
459393
});
460394

461395
MockStore.addSpecs(
462-
[
463-
settings,
464-
continuousBarChart,
465-
lineAnnotation,
466-
MockGlobalSpec.axis({
467-
...verticalAxisSpec,
468-
position: Position.Top,
469-
hide: true,
470-
}),
471-
],
396+
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
472397
store,
473398
);
474399

@@ -503,16 +428,7 @@ describe('Annotation utils', () => {
503428
});
504429

505430
MockStore.addSpecs(
506-
[
507-
settings,
508-
continuousBarChart,
509-
lineAnnotation,
510-
MockGlobalSpec.axis({
511-
...verticalAxisSpec,
512-
position: Position.Top,
513-
hide: true,
514-
}),
515-
],
431+
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
516432
store,
517433
);
518434

@@ -546,16 +462,7 @@ describe('Annotation utils', () => {
546462
});
547463

548464
MockStore.addSpecs(
549-
[
550-
settings,
551-
continuousBarChart,
552-
lineAnnotation,
553-
MockGlobalSpec.axis({
554-
...verticalAxisSpec,
555-
position: Position.Top,
556-
hide: true,
557-
}),
558-
],
465+
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
559466
store,
560467
);
561468

@@ -589,16 +496,7 @@ describe('Annotation utils', () => {
589496
});
590497

591498
MockStore.addSpecs(
592-
[
593-
settings,
594-
continuousBarChart,
595-
lineAnnotation,
596-
MockGlobalSpec.axis({
597-
...verticalAxisSpec,
598-
position: Position.Bottom,
599-
hide: true,
600-
}),
601-
],
499+
[settings, continuousBarChart, lineAnnotation, MockGlobalSpec.xAxis(defaultAxisSpec, settings.rotation)],
602500
store,
603501
);
604502

‎packages/charts/src/chart_types/xy_chart/annotations/line/line.test.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ describe('annotation marker', () => {
5656
[
5757
spec,
5858
MockGlobalSpec.settingsNoMargins(),
59-
MockGlobalSpec.axis({ position: Position.Left, hide: true }),
59+
MockGlobalSpec.yAxis({ position: Position.Left, hide: true }),
6060
lineYDomainAnnotation,
6161
],
6262
store,
@@ -92,7 +92,7 @@ describe('annotation marker', () => {
9292
[
9393
spec,
9494
MockGlobalSpec.settingsNoMargins({ rotation: 180 }),
95-
MockGlobalSpec.axis({ position: Position.Left, hide: true }),
95+
MockGlobalSpec.yAxis({ position: Position.Left, hide: true }),
9696
lineYDomainAnnotation,
9797
],
9898
store,
@@ -129,12 +129,7 @@ describe('annotation marker', () => {
129129

130130
test('should compute line annotation dimensions with marker if defined (x domain)', () => {
131131
MockStore.addSpecs(
132-
[
133-
spec,
134-
MockGlobalSpec.settingsNoMargins(),
135-
MockGlobalSpec.axis({ position: Position.Bottom, hide: true }),
136-
lineXDomainAnnotation,
137-
],
132+
[spec, MockGlobalSpec.settingsNoMargins(), MockGlobalSpec.xAxis({ hide: true }), lineXDomainAnnotation],
138133
store,
139134
);
140135

‎packages/charts/src/chart_types/xy_chart/annotations/rect/dimensions.integration.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ describe('Render rect annotation within', () => {
267267
const heightFromStore = 200;
268268
const store = MockStore.default({ top: 0, left: 0, width: 20, height: heightFromStore });
269269
const settings = MockGlobalSpec.settingsNoMargins();
270-
const yDomainFitted = MockGlobalSpec.axis({ domain: { min: NaN, max: NaN, fit: true } });
270+
const yDomainFitted = MockGlobalSpec.yAxis({ domain: { fit: true } });
271271
const annotation = MockAnnotationSpec.rect({
272272
dataValues: [{ coordinates: { x0: 2, x1: 4 } }],
273273
});

‎packages/charts/src/chart_types/xy_chart/annotations/utils.test.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,13 @@ import { getAnnotationAxis, getTransformedCursor, invertTransformedCursor } from
1515
describe('Annotation utils', () => {
1616
const groupId = 'foo-group';
1717

18-
const verticalAxisSpec = MockGlobalSpec.axis({
18+
const verticalAxisSpec = MockGlobalSpec.yAxis({
1919
id: 'vertical_axis',
2020
groupId,
21-
position: Position.Left,
2221
});
23-
const horizontalAxisSpec = MockGlobalSpec.axis({
22+
const horizontalAxisSpec = MockGlobalSpec.xAxis({
2423
id: 'vertical_axis',
2524
groupId,
26-
position: Position.Bottom,
2725
});
2826

2927
test('should get associated axis for an annotation', () => {

0 commit comments

Comments
 (0)