fix(annotations): fix alignment at the edges (#641)

This commit fixed the alignment of rect and line annotations near the edge of a data domain. It aligns the x/y position specified by the `dataValues` of the annotation to the domain of the chart. BREAKING CHANGE: In the rectangular annotation, the y0 parameter of the coordinates now refers to the minimum value and the y1 value refers to the maximum value of the y domain. fix #586
elastic · Apr 28, 2020 · 43c5a59 · 43c5a59
1 parent f411771
commit 43c5a59
Show file tree

Hide file tree

Showing 60 changed files with 1,894 additions and 1,161 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@ test/failure-screenshots/**/*.png
 
 reports/
 tmp/
+.temp/
 dist/
 coverage/
 .out/

diff --git a/.playground/index.html b/.playground/index.html
@@ -2,44 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Charts Playground</title>
+    <title>Elastic-Charts Playground</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Document</title>
     <style>
       html,
       body {
         background: blanchedalmond !important;
-        /*margin-left: 8px !important;*/
-        /*padding: 8px !important;*/
-        /*height: 100%;*/
-        /*width: 2000px;
-      }
-      #root {
-        position: absolute;
-        /*
-        top: 0;
-        left: 0;
-*/
-        /*        width: 100%;
-        height: 100%;*/
-        /* overflow-x: hidden; */
       }
       .chart {
         background: white;
-        /*display: inline-block;
-        position: relative;
-        */
-        width: 100%;
-        height: 500px;
-        overflow: auto;
+        width: 800px;
+        height: 300px;
+        margin: 20px;
       }
-
-      .testing {
-        background: aquamarine;
-        position: relative;
-        width: 100vw;
-        overflow: auto;
+      label {
+        display: block;
       }
     </style>
   </head>

diff --git a/.playground/playground.tsx b/.playground/playground.tsx
@@ -17,14 +17,9 @@
  * under the License. */
 
 import React from 'react';
-import { XYChartElementEvent, PartitionElementEvent } from '../src';
 import { example } from '../stories/treemap/6_custom_style';
 
 export class Playground extends React.Component {
-  onElementClick = (elements: (XYChartElementEvent | PartitionElementEvent)[]) => {
-    // eslint-disable-next-line no-console
-    console.log(elements);
-  };
   render() {
     return (
       <div className="testing">

diff --git a/...ll-stories-annotations-rects-linear-bar-chart-visually-looks-correct-1-snap.png b/...ll-stories-annotations-rects-linear-bar-chart-visually-looks-correct-1-snap.png
diff --git a/...l-stories-annotations-rects-linear-line-chart-visually-looks-correct-1-snap.png b/...l-stories-annotations-rects-linear-line-chart-visually-looks-correct-1-snap.png
diff --git a/...l-stories-annotations-rects-ordinal-bar-chart-visually-looks-correct-1-snap.png b/...l-stories-annotations-rects-ordinal-bar-chart-visually-looks-correct-1-snap.png
diff --git a/...-stories-annotations-rects-tooltip-visibility-visually-looks-correct-1-snap.png b/...-stories-annotations-rects-tooltip-visibility-visually-looks-correct-1-snap.png
diff --git a/...-stories-bar-chart-test-histogram-mode-linear-visually-looks-correct-1-snap.png b/...-stories-bar-chart-test-histogram-mode-linear-visually-looks-correct-1-snap.png
diff --git a/...test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-0-1-snap.png b/...test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-0-1-snap.png
diff --git a/...st-histogram-mode-linear-enable-histogram-mode-is-false-rotation-180-1-snap.png b/...st-histogram-mode-linear-enable-histogram-mode-is-false-rotation-180-1-snap.png
diff --git a/...est-histogram-mode-linear-enable-histogram-mode-is-false-rotation-90-1-snap.png b/...est-histogram-mode-linear-enable-histogram-mode-is-false-rotation-90-1-snap.png
diff --git a/...gram-mode-linear-enable-histogram-mode-is-false-rotation-negative-90-1-snap.png b/...gram-mode-linear-enable-histogram-mode-is-false-rotation-negative-90-1-snap.png
diff --git a/...-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-0-1-snap.png b/...-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-0-1-snap.png
diff --git a/...est-histogram-mode-linear-enable-histogram-mode-is-true-rotation-180-1-snap.png b/...est-histogram-mode-linear-enable-histogram-mode-is-true-rotation-180-1-snap.png
diff --git a/...test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-90-1-snap.png b/...test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-90-1-snap.png
diff --git a/...ogram-mode-linear-enable-histogram-mode-is-true-rotation-negative-90-1-snap.png b/...ogram-mode-linear-enable-histogram-mode-is-true-rotation-negative-90-1-snap.png
diff --git a/...bar-series-stories-test-histogram-mode-linear-point-alignment-center-1-snap.png b/...bar-series-stories-test-histogram-mode-linear-point-alignment-center-1-snap.png
diff --git a/...ts-bar-series-stories-test-histogram-mode-linear-point-alignment-end-1-snap.png b/...ts-bar-series-stories-test-histogram-mode-linear-point-alignment-end-1-snap.png
diff --git a/...-bar-series-stories-test-histogram-mode-linear-point-alignment-start-1-snap.png b/...-bar-series-stories-test-histogram-mode-linear-point-alignment-start-1-snap.png
diff --git a/src/chart_types/xy_chart/annotations/annotation_marker.test.tsx b/src/chart_types/xy_chart/annotations/annotation_marker.test.tsx
@@ -23,9 +23,10 @@ import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/theme';
 import { Dimensions } from '../../../utils/dimensions';
 import { GroupId } from '../../../utils/ids';
 import { Scale, ScaleType, ScaleContinuous } from '../../../scales';
-import { computeLineAnnotationDimensions, AnnotationLineProps } from './line_annotation_tooltip';
-import { ChartTypes } from '../..';
 import { SpecTypes } from '../../../specs/settings';
+import { computeLineAnnotationDimensions } from './line/dimensions';
+import { AnnotationLineProps } from './line/types';
+import { ChartTypes } from '../..';
 
 describe('annotation marker', () => {
   const groupId = 'foo-group';
@@ -75,7 +76,6 @@ describe('annotation marker', () => {
       yScales,
       xScale,
       Position.Left,
-      0,
       false,
     );
     const expectedDimensions: AnnotationLineProps[] = [
@@ -130,7 +130,6 @@ describe('annotation marker', () => {
       yScales,
       xScale,
       Position.Left,
-      0,
       false,
     );
     const expectedDimensions: AnnotationLineProps[] = [
@@ -184,7 +183,6 @@ describe('annotation marker', () => {
       yScales,
       xScale,
       Position.Bottom,
-      0,
       false,
     );
     const expectedDimensions: AnnotationLineProps[] = [

diff --git a/src/chart_types/xy_chart/annotations/annotation_tooltip.ts b/src/chart_types/xy_chart/annotations/annotation_tooltip.ts
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ test/failure-screenshots/**/*.png @@
     reports/
     tmp/
+    .temp/
     dist/
     coverage/
     .out/
@@ Expand Down @@