Skip to content

Commit

Permalink
refactor: annotation marker size calculation (#960)
Browse files Browse the repository at this point in the history
  • Loading branch information
@markov00
markov00 committed Jan 26, 2021
1 parent fcc4994 commit c924310
Show file tree
Hide file tree
Showing 33 changed files with 663 additions and 794 deletions.
1 change: 1 addition & 0 deletions api/charts.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -435,6 +435,7 @@ export type CurveType = $Values<typeof CurveType>;
export type CustomAnnotationTooltip = ComponentType<{
header?: string;
details?: string;
datum: LineAnnotationDatum | RectAnnotationDatum;
}> | null;

// @public
Expand Down
Binary file modified ...ts-for-all-stories-annotations-lines-y-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 modified ...l-stories-small-multiples-alpha-heterogeneous-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 modified ...stories-small-multiples-alpha-horizontal-bars-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.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@
"d3-scale": "^1.0.7",
"d3-shape": "^1.3.4",
"newtype-ts": "^0.2.4",
"path2d-polyfill": "^0.4.2",
"prop-types": "^15.7.2",
"re-reselect": "^3.4.0",
"react-redux": "^7.1.0",
Expand Down
5 changes: 5 additions & 0 deletions scripts/setup_enzyme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,8 @@ class ResizeObserverMock {
}

window.ResizeObserver = ResizeObserverMock;

// Some tests will fail due to undefined Path2D, this mock doesn't create issues on test env
class Path2D {}
// @ts-ignore
window.Path2D = Path2D;
8 changes: 6 additions & 2 deletions src/chart_types/xy_chart/annotations/line/dimensions.integration.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,10 @@ function expectAnnotationAtPosition(
const annotations = computeAnnotationDimensionsSelector(store.getState());
expect(annotations.get(annotation.id)).toEqual([
MockAnnotationLineProps.default({
details: { detailsText: undefined, headerText: `${indexPosition}` },
specId: 'line_annotation_1',
datum: {
dataValue: indexPosition,
},
linePathPoints: {
x1: expectedLinePosition,
y1: 0,
Expand Down Expand Up @@ -147,13 +150,14 @@ describe('Render vertical line annotation within', () => {
const annotations = computeAnnotationDimensionsSelector(store.getState());
expect(annotations.get(annotation.id)).toEqual([
MockAnnotationLineProps.default({
specId: 'line_annotation_1',
linePathPoints: {
x1: 95,
y1: 0,
x2: 95,
y2: 100,
},
details: { detailsText: 'foo', headerText: '9.5' },
datum: { dataValue: 9.5, details: 'foo' },
}),
]);
});
Expand Down
44 changes: 28 additions & 16 deletions src/chart_types/xy_chart/annotations/line/dimensions.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/

import { MockAnnotationLineProps } from '../../../../mocks/annotations/annotations';
import { MockAnnotationLineProps, MockAnnotationRectProps } from '../../../../mocks/annotations/annotations';
import { MockAnnotationSpec, MockGlobalSpec, MockSeriesSpec } from '../../../../mocks/specs';
import { MockStore } from '../../../../mocks/store';
import { ScaleType } from '../../../../scales/constants';
Expand Down Expand Up @@ -88,21 +88,22 @@ describe('Annotation utils', () => {
const expectedDimensions = new Map<AnnotationId, AnnotationDimensions>();
expectedDimensions.set('foo', [
MockAnnotationLineProps.default({
specId: 'foo',
linePathPoints: {
x1: 0,
y1: 80,
x2: 100,
y2: 80,
},
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
]);
expectedDimensions.set('rect', [
{
details: undefined,
MockAnnotationRectProps.default({
rect: { x: 0, y: 50, width: 50, height: 20 },
panel: { top: 0, left: 0, width: 100, height: 100 },
},
datum: { coordinates: { x0: 'a', x1: 'b', y0: 3, y1: 5 } },
}),
]);

expect(dimensions).toEqual(expectedDimensions);
Expand Down Expand Up @@ -156,14 +157,15 @@ describe('Annotation utils', () => {

const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 0,
y1: 80,
x2: 10,
y2: 80,
},
panel,
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -199,14 +201,15 @@ describe('Annotation utils', () => {

const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 0,
y1: 80,
x2: 10,
y2: 80,
},
panel: { width: 10, height: 100, top: 0, left: 0 },
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -241,13 +244,14 @@ describe('Annotation utils', () => {

const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 0,
y1: 80,
x2: 100,
y2: 80,
},
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -313,13 +317,14 @@ describe('Annotation utils', () => {

const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 12.5,
y1: 0,
x2: 12.5,
y2: 100,
},
details: { detailsText: 'foo', headerText: 'a' },
datum: { dataValue: 'a', details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -354,13 +359,14 @@ describe('Annotation utils', () => {
const dimensions = computeAnnotationDimensionsSelector(store.getState());
const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 25,
y1: 0,
x2: 25,
y2: 100,
},
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -395,13 +401,14 @@ describe('Annotation utils', () => {
const dimensions = computeAnnotationDimensionsSelector(store.getState());
const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 25,
y1: 0,
x2: 25,
y2: 100,
},
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -436,13 +443,14 @@ describe('Annotation utils', () => {
const dimensions = computeAnnotationDimensionsSelector(store.getState());
const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 12.5,
y1: 0,
x2: 12.5,
y2: 100,
},
details: { detailsText: 'foo', headerText: 'a' },
datum: { dataValue: 'a', details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -478,14 +486,15 @@ describe('Annotation utils', () => {
const dimensions = computeAnnotationDimensionsSelector(store.getState());
const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 12.5,
y1: 0,
x2: 12.5,
y2: 100,
},
panel,
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -521,14 +530,15 @@ describe('Annotation utils', () => {
const dimensions = computeAnnotationDimensionsSelector(store.getState());
const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 12.5,
y1: 0,
x2: 12.5,
y2: 100,
},
panel,
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -563,13 +573,14 @@ describe('Annotation utils', () => {
const dimensions = computeAnnotationDimensionsSelector(store.getState());
const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 25,
y1: 0,
x2: 25,
y2: 100,
},
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down Expand Up @@ -605,14 +616,15 @@ describe('Annotation utils', () => {
const dimensions = computeAnnotationDimensionsSelector(store.getState());
const expectedDimensions: AnnotationLineProps[] = [
MockAnnotationLineProps.default({
specId: 'foo-line',
linePathPoints: {
x1: 25,
y1: 0,
x2: 25,
y2: 50,
},
panel,
details: { detailsText: 'foo', headerText: '2' },
datum: { dataValue: 2, details: 'foo' },
}),
];
expect(dimensions.get('foo-line')).toEqual(expectedDimensions);
Expand Down
Loading

0 comments on commit c924310

Please sign in to comment.