refactor: annotation marker size calculation (opensearch-project#960)

AMoo-Miki · Jan 26, 2021 · c68df5d · c68df5d
1 parent 942bef5
commit c68df5d
Show file tree

Hide file tree

Showing 33 changed files with 663 additions and 794 deletions.
diff --git a/packages/osd-charts/api/charts.api.md b/packages/osd-charts/api/charts.api.md
@@ -435,6 +435,7 @@ export type CurveType = $Values<typeof CurveType>;
 export type CustomAnnotationTooltip = ComponentType<{
     header?: string;
     details?: string;
+    datum: LineAnnotationDatum | RectAnnotationDatum;
 }> | null;
 
 // @public

diff --git a/...ts-for-all-stories-annotations-lines-y-domain-visually-looks-correct-1-snap.png b/...ts-for-all-stories-annotations-lines-y-domain-visually-looks-correct-1-snap.png
diff --git a/...l-stories-small-multiples-alpha-heterogeneous-visually-looks-correct-1-snap.png b/...l-stories-small-multiples-alpha-heterogeneous-visually-looks-correct-1-snap.png
diff --git a/...stories-small-multiples-alpha-horizontal-bars-visually-looks-correct-1-snap.png b/...stories-small-multiples-alpha-horizontal-bars-visually-looks-correct-1-snap.png
diff --git a/packages/osd-charts/package.json b/packages/osd-charts/package.json
@@ -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",

diff --git a/packages/osd-charts/scripts/setup_enzyme.ts b/packages/osd-charts/scripts/setup_enzyme.ts
@@ -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;
diff --git a/packages/osd-charts/src/chart_types/xy_chart/annotations/line/dimensions.integration.test.ts b/packages/osd-charts/src/chart_types/xy_chart/annotations/line/dimensions.integration.test.ts
@@ -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,
@@ -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' },
       }),
     ]);
   });

diff --git a/packages/osd-charts/src/chart_types/xy_chart/annotations/line/dimensions.test.ts b/packages/osd-charts/src/chart_types/xy_chart/annotations/line/dimensions.test.ts
@@ -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';
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);