From b495ef951ce539275d58e537fc8a52f3293559e9 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Fri, 26 Mar 2021 11:39:55 -0600 Subject: [PATCH 1/7] fix: catch edge case with vert line anno without axes nor specMarker --- .playground/playground.tsx | 42 ++++++++++++------- .../xy_chart/annotations/line/dimensions.ts | 6 ++- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/.playground/playground.tsx b/.playground/playground.tsx index 10810899bc..5332b367ea 100644 --- a/.playground/playground.tsx +++ b/.playground/playground.tsx @@ -19,27 +19,41 @@ import React from 'react'; -import { Chart, BarSeries, ScaleType, Settings } from '../src'; +import { Chart, BarSeries, ScaleType, LineAnnotation, AnnotationDomainTypes, LineAnnotationDatum } from '../src'; +function generateAnnotationData(values: any[]): LineAnnotationDatum[] { + return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` })); +} export class Playground extends React.Component { render() { return ( -
+
- + hello
} + // markerPosition="top" + /> + Horizontal
} + // markerPosition="right" + /> diff --git a/src/chart_types/xy_chart/annotations/line/dimensions.ts b/src/chart_types/xy_chart/annotations/line/dimensions.ts index ceac8bbd4e..2dd289dd6b 100644 --- a/src/chart_types/xy_chart/annotations/line/dimensions.ts +++ b/src/chart_types/xy_chart/annotations/line/dimensions.ts @@ -283,8 +283,12 @@ function getAnchorPosition( isXDomain: boolean, isChartHorizontal: boolean, specMarkerPosition?: Position, - axisPosition?: Position, + axisPosition?: Position | undefined, ): Position { + // catch the case of a chart with no axes nor specMarkerPosition for a vertical line annotation + if (!axisPosition && !specMarkerPosition && isXDomain) { + return Position.Bottom; + } const dflPositionFromAxis = getDefaultMarkerPositionFromAxis(isXDomain, isChartHorizontal, axisPosition); if (specMarkerPosition !== undefined) { From 0496d011ca666d92ebcb92f44880f4040cf1f98b Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 29 Mar 2021 08:31:45 -0600 Subject: [PATCH 2/7] test: add story --- ...-bug-fix-visually-looks-correct-1-snap.png | Bin 0 -> 4905 bytes stories/test_cases/3_no_axes_annotation.tsx | 80 ++++++++++++++++++ stories/test_cases/test_cases.stories.tsx | 1 + 3 files changed, 81 insertions(+) create mode 100644 integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-no-axes-annotation-bug-fix-visually-looks-correct-1-snap.png create mode 100644 stories/test_cases/3_no_axes_annotation.tsx diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-no-axes-annotation-bug-fix-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-no-axes-annotation-bug-fix-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..c850cdd59870ffe12336ad58b3057dccae7cfb5d GIT binary patch literal 4905 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 eS=a_(GyYr7gz6i!4a3J02>w~%`TD ({ dataValue: value, details: `detail-${index}` })); +} + +export const Example = () => { + const markerPositionHorizontal = select( + 'horizontal marker position', + [Position.Top, Position.Left, Position.Bottom, Position.Right, 'undefined'], + 'undefined', + ); + const markerPositionVertical = select( + 'vertical marker position', + [Position.Top, Position.Left, Position.Bottom, Position.Right, 'undefined'], + 'undefined', + ); + return ( + + Vertical} + markerPosition={markerPositionVertical === 'undefined' ? undefined : markerPositionVertical} + /> + Horizontal} + markerPosition={markerPositionHorizontal === 'undefined' ? undefined : markerPositionHorizontal} + /> + + + + ); +}; diff --git a/stories/test_cases/test_cases.stories.tsx b/stories/test_cases/test_cases.stories.tsx index 0b14a75eef..e4e876befe 100644 --- a/stories/test_cases/test_cases.stories.tsx +++ b/stories/test_cases/test_cases.stories.tsx @@ -28,3 +28,4 @@ export default { export { Example as noSeries } from './1_no_series'; export { Example as chromePathBugFix } from './2_chrome_path_bug_fix'; +export { Example as noAxesAnnotationBugFix } from './3_no_axes_annotation'; From 2b4f5de8dda6743ecb73dde75c4819c3c7c196af Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 29 Mar 2021 14:57:24 -0600 Subject: [PATCH 3/7] fix: refactor fix --- ...-bug-fix-visually-looks-correct-1-snap.png | Bin 4905 -> 3909 bytes .../xy_chart/annotations/line/dimensions.ts | 9 ++------- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-no-axes-annotation-bug-fix-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-no-axes-annotation-bug-fix-visually-looks-correct-1-snap.png index c850cdd59870ffe12336ad58b3057dccae7cfb5d..58c4d5a59dcd4029fa04004d5faad55496d62bbf 100644 GIT binary patch delta 2150 zcmV-s2$}b(CdD3*Fn3df~Q7_ra&)TDDfJb;}3{ z3R4sTMMg$>7zSqG?1hBLs`UvtUxwG~ivRha`Tf7=Fgf$iKNJ7+Z?syiRsaBiGCJBl z0001RER*p9DlnL4y9WS(Q^|ABJ(u3z-rRQEZS5X~PvLK#c_RP1X>Gg5ps4R&bz^Rw zaZy`ma3+(10@hN^b`JnReLs5X`Sc$cZ1)%??BDuI4)pKLch)@9?orD4a`&Q~+3alh z7%-xUbO1ioKfkmly}SF{Jw^#LckRoRy$AAZk$%)27hNLK;W%@-3zLxt-?Q)n6#_iX zb`Q`uxIY`;-qr3gC~C^sGc$YKgm#Ys0B};ZJ<@-*V{5+hZGkNl^cFzR>0H>{HcXw|lOxTm&-s#z}VQ$`j z`|Nz}YxlQ%E&u>HZ8g96#Yb}JP)9!Zx!>j+-}uYC_S(4_80gB_f3btdJaN^kRVQSC z?Qiwv;+=a=$l4r7tu`IDwK=N>U6s{ttyY_U0r*(Dy1FtrIQZdD`~;?L-I-B?11Dtd zQ_W`vhH}=y;dH;TyWOMwKOcM}h!gGECx4Z*nw@Ps{wK0^bGk=RfB2L>zP7DilU1+0 zc0$&^=9+6h(({`4f8P6*3=E7t=D~gY#=a-g_wL<$+=hF%gZuWUYv|AkS)1diU7!7f z2T$1V9v@w!(Y`u}C!wF&*~(Zxocmh>^+d4Y2({HN*POU z_@kWLHTJ`wSjhi8^F(?!4Yhj=in{BH#kqOLMQxp-nY41?KxfviyXZ)u1E1DYJGQlZ z1d1BdY-Zu4VJYn%1AyY1yLXSvLk}&>k|nFt*?BNSL!;U~6P(iC7#zrol|OCw7!)<< z?9b%!TkdH07yuO4y!YPk9NoC?x~GrX`K@n#`^dkpJ&7X$0Kn`|m%ghkX3XEA!~mrMbMPC(9px_*1R*@&y;f|<01}Z7zz8yDXeejz z*^}Ml#^r^%bF*;$`XtG~m@(Nnb7qoc(YkdXd)-4F9XaFh;rHEl*_t)EY|WZaJ~Y7l z5a|Gn7>y(g*RRj2#f#IkV8PKyfBxc&bNGxiGNrFC=k3^$x5kajL(7)schje5xU(}C zZrgvBTUV~kr2hUS$vt=9omNLjZhh>rtXjM{jU;Cb52tU^q$J5dEnl7_x#<_b$l;ET z_gwDs>a=NjWa-jupE4yw&1R z{`too|JMr_X1LkR{NCRD>4Og@Ne+KE8fhdM)!(1L`r!}LXtgrjZ07veU(b)0FHi4` z87KH%0Zug{9e@#M;ktEsc-gY_ELf2JW5y(nMrLo>k_mhEWX=5fNs=AsoRh!%>Q|5X zxxR@LkJ+BPWy{At_O9{clOz{z-+uJ5jw3fx+jrJk`N@qprg!@E487~D{oa2uV?OqA zfRRn412Ez&df|mUa_zPG-GvvX|41}ndgKeE6L;@UlAP1mm(Q=N)~l)o3KGRvx+f>TH-ZC*2!2=IZC3%Z^Et^0OOm zNPf?H!0E{~=>Uv4w!t_c&;93IXk8#W|K=55}bN&WrVIeBuP{p@G6 zW!ki?oi{K4cH@m17(4d&t~+7Ro+QcRS6q>QzyA8{Jn}`-cU!W0b(+J&*)V5L?z{c= z{N$#a@(*|2mBG=YbGYN3KfA3)BLiJs>FMr1&aWI8DMUH|Bhsbsy48PT_ohwhI&$}v z&Y_|F*#i$`;R`Qh^92`V<&{@v!|d6axpnK&ySsdlWlukybNl+TZR*rKdHLnpb@tis zdCs|SzL`J&@sBfi^XBZBJUPEzupnIr4y1YbaBleJFEexN*7VMpk(F0nm3c3}e0*Ot cFk<{4OLSrerMakY000UA07*qoM6N<$g5U<8ng9R* delta 3115 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 diff --git a/src/chart_types/xy_chart/annotations/line/dimensions.ts b/src/chart_types/xy_chart/annotations/line/dimensions.ts index 2dd289dd6b..91e8a44672 100644 --- a/src/chart_types/xy_chart/annotations/line/dimensions.ts +++ b/src/chart_types/xy_chart/annotations/line/dimensions.ts @@ -285,12 +285,7 @@ function getAnchorPosition( specMarkerPosition?: Position, axisPosition?: Position | undefined, ): Position { - // catch the case of a chart with no axes nor specMarkerPosition for a vertical line annotation - if (!axisPosition && !specMarkerPosition && isXDomain) { - return Position.Bottom; - } const dflPositionFromAxis = getDefaultMarkerPositionFromAxis(isXDomain, isChartHorizontal, axisPosition); - if (specMarkerPosition !== undefined) { // validate specMarkerPosition against domain const validatedPosFromMarkerPos = validateMarkerPosition(isXDomain, isChartHorizontal, specMarkerPosition); @@ -301,7 +296,7 @@ function getAnchorPosition( function validateMarkerPosition(isXDomain: boolean, isHorizontal: boolean, position: Position): Position | undefined { if ((isXDomain && isHorizontal) || (!isXDomain && !isHorizontal)) { - return position === Position.Top || position === Position.Bottom ? position : undefined; + return position === Position.Top || position === Position.Bottom ? position : Position.Bottom; } return position === Position.Left || position === Position.Right ? position : undefined; } @@ -314,7 +309,7 @@ function getDefaultMarkerPositionFromAxis( if (axisPosition) { return axisPosition; } - if ((isXDomain && isHorizontal) || (!isXDomain && !isHorizontal)) { + if (!isXDomain && isHorizontal) { return Position.Left; } return Position.Bottom; From e58089ab709da4612a8aa86c57052650095758d9 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 31 Mar 2021 08:54:26 -0600 Subject: [PATCH 4/7] fix: adapt for rotations --- ...notations-with-180-deg-rotation-1-snap.png | Bin 0 -> 3846 bytes ...nnotations-with-90-deg-rotation-1-snap.png | Bin 0 -> 3799 bytes ...h-annotations-with-no-rotations-1-snap.png | Bin 0 -> 3909 bytes integration/tests/test_cases_stories.test.ts | 24 +++++++++ package.json | 2 + .../xy_chart/annotations/line/dimensions.ts | 47 ++++++++++++------ .../annotations/rects/1_linear_bar_chart.tsx | 5 +- .../annotations/rects/2_ordinal_bar_chart.tsx | 6 +-- stories/bar/54_functional_accessors.tsx | 5 +- stories/test_cases/3_no_axes_annotation.tsx | 5 +- yarn.lock | 10 ++++ 11 files changed, 81 insertions(+), 23 deletions(-) create mode 100644 integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-180-deg-rotation-1-snap.png create mode 100644 integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-90-deg-rotation-1-snap.png create mode 100644 integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-no-rotations-1-snap.png diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-180-deg-rotation-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-180-deg-rotation-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..2517602b2a93403d33147eab95ca98592612a3ea GIT binary patch literal 3846 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 literal 0 HcmV?d00001 diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-no-rotations-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-no-rotations-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..58c4d5a59dcd4029fa04004d5faad55496d62bbf GIT binary patch literal 3909 zcmeH~X;9Ny62Si~9>Kn@^~1Oj9;HMO;0)~cuq3EifIN##;GOmC7_MN`^TCQ$xIM7zqCsEqXo);@S z90G5R%%`hY%T_n20vkse9j=yPn$Fky0YHlF(J`pTw&?viIsowQ&NTqo=T@N&96Mxg z0s!gXXiW9V@Yn{V1f4hv0Qwe8E#PqhilPzt_Qo=xkGNd!csx5&Y?|iH$CTpC)#R{9 z%KOL9q!;6Yqli~e2cV-ZKYI}9f4}pOx0DvI3mi*=CkR)U%|HT(p9pb{mD!xgRgg8<+VX-8GQbB~$zafc~LyqP^bWq-STjARI!?Hhfa`ri5K(2F0f zLQ=$-mFWp0-m7QK*uD0MNlUZi%dN=#p{QEFVuF_PESXHUb#PGfz1P30isTfYPSv&w z5&P26TW`e-ck!=LUsE{c>u|F~i#vK^mQ`|oV-YdZY1679E|%=>ldOCI>u9OHnD=9S zd;Ia?j+vrx7*kfH;HvU>@6LeEbS0^}JFJ)r2?sxZ3*VZml2?b%{<7m-@#HgP*+%L% z?@_6#8M1t!1HPGfEz`|HTieRAqWJA?+qvxB9=WLbXnJV#&JMHN?D(m!8#k_%1mzH} zFI;jnF>>7C`>rXCxKudaiOn{ny$;?M%Z^m%50vZ9sCa=nelIPgiohfp&Au#Kiy-go zt|2t2Z`RPBOLb@H4BEX%&G_98;v^M3z7pHYm;)D*!UL;B(CpH%NjCHcLr;vdyo7Bh ze_M98N9`;-k#OW|&4zUHeEK^QuG=+|_@uBY=F>6sa4luloTK^D%&#ie`aHS_i#rp#^jbX)6abMcm23Q+NP){2lt&3huvW$grmK z2U@XOmqL`xN4Y8~{Q2#~^}fH!W|@_w_G+tsGlJ5$c4cXc!IYV_%|cJ5l8tyiY?mdZ z44!G^Xak*#4bK}PaOK*_Aa3E(rX0`ffA-`_xk?h);cQJW%&TO;is88RMen9fth61% zuJWQ0bzub(E*IRZgyLf@I-T2X(V_d$QdS;kvU@s>6x$fRu?Ft# zEI7n+h(+aw43Oi@@EjKt6UWH~zJh~g71@y@Xhq(z!=0)>3xNz!CV1CKJ>$i@dxMRa zx&}OwHz)4JDl;IqmG#yF@n}wKcV@p!|HEnQU^Tj}5n>RdeNJRmy2j9|AgjYeX3E%DSsi_T!6^=FI!iHtaGwUOPjI4*&-qH+1D+B-^;JZ!iJ&Bps+#l9S|xSd)yra)Qm*vBhso;}C-cAtQ9Q!(>-!e=XV}=`bF00X z_Ep%m<=t=QYc{xtf?@KjDLJPqv~4E#C-BppW5ms?oHTx z?6IGj6O{JfN8~Lv?uqgsFcLb2y>=Qeb(mC$dTaaxPrV%IsoSB)G&ZI0-E#zt_?0$d zV}s?0iz(d@p&PG^HPsO9t<~|9nT8-IxuVYLGNTmSJL!KRCz-mrCURbKWnu#w65@*9 zzGc~rP0ELp6eZ?D2j8&~QM9zJ5#;s1X z;^ZtTj!wdK6vEYuSrDvjMpWSJNJYN-3v!!I1x^_qrJS~g#Lf>d(+hI){gL@NYieR* f;9;Afbu-UvL0cF0j|D9bC3 literal 0 HcmV?d00001 diff --git a/integration/tests/test_cases_stories.test.ts b/integration/tests/test_cases_stories.test.ts index 3813ee7dde..5bd4cc0858 100644 --- a/integration/tests/test_cases_stories.test.ts +++ b/integration/tests/test_cases_stories.test.ts @@ -36,4 +36,28 @@ describe('Test cases stories', () => { { waitSelector: '.echReactiveChart_noResults' }, ); }); + + it('should render marker with annotations with no rotations', async () => { + await common.expectChartAtUrlToMatchScreenshot( + 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=0', + ); + }); + + it('should render marker with annotations with 90 deg rotation', async () => { + await common.expectChartAtUrlToMatchScreenshot( + 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=90', + ); + }); + + it('should render marker with annotations with -90 deg rotation', async () => { + await common.expectChartAtUrlToMatchScreenshot( + 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=-90', + ); + }); + + it('should render marker with annotations with 180 deg rotation', async () => { + await common.expectChartAtUrlToMatchScreenshot( + 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=180', + ); + }); }); diff --git a/package.json b/package.json index 61956aee6d..bd974a840b 100644 --- a/package.json +++ b/package.json @@ -123,6 +123,7 @@ "@types/jsdom": "^16.2.5", "@types/lodash": "^4.14.121", "@types/luxon": "^1.25.0", + "@types/marked": "^2.0.1", "@types/moment-timezone": "^0.5.30", "@types/puppeteer": "^5.4.2", "@types/react-dom": "^16.9.8", @@ -169,6 +170,7 @@ "lodash": "^4.17.15", "lorem-ipsum": "^2.0.3", "luxon": "^1.25.0", + "marked": "^2.0.1", "moment": "^2.29.1", "moment-timezone": "^0.5.32", "node-sass": "^4.14.1", diff --git a/src/chart_types/xy_chart/annotations/line/dimensions.ts b/src/chart_types/xy_chart/annotations/line/dimensions.ts index 91e8a44672..b4ec8d3689 100644 --- a/src/chart_types/xy_chart/annotations/line/dimensions.ts +++ b/src/chart_types/xy_chart/annotations/line/dimensions.ts @@ -52,7 +52,6 @@ function computeYDomainLineAnnotationDimensions( // let's use a default Bottom-X/Left-Y axis orientation if we are not showing an axis // but we are displaying a line annotation - const alignment = getAnchorPosition(false, isHorizontalChartRotation, specMarkerPosition, axisPosition); const lineProps: AnnotationLineProps[] = []; const [domainStart, domainEnd] = yScale.domain; @@ -84,6 +83,14 @@ function computeYDomainLineAnnotationDimensions( const width = isHorizontalChartRotation ? horizontal.bandwidth : vertical.bandwidth; const height = isHorizontalChartRotation ? vertical.bandwidth : horizontal.bandwidth; + const linePathPoints = getYLinePath({ width, height }, annotationValueYPosition); + const alignment = getAnchorPosition( + false, + // isHorizontalChartRotation, + chartRotation, + specMarkerPosition, + axisPosition, + ); const position = getMarkerPositionForYAnnotation( panelSize, @@ -93,8 +100,6 @@ function computeYDomainLineAnnotationDimensions( dimension, ); - const linePathPoints = getYLinePath({ width, height }, annotationValueYPosition); - const lineProp: AnnotationLineProps = { specId, id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue), @@ -147,7 +152,6 @@ function computeXDomainLineAnnotationDimensions( const lineProps: AnnotationLineProps[] = []; const isHorizontalChartRotation = isHorizontalRotation(chartRotation); - const alignment = getAnchorPosition(true, isHorizontalChartRotation, specMarkerPosition, axisPosition); const panelSize = getPanelSize({ vertical, horizontal }); dataValues.forEach((datum: LineAnnotationDatum) => { @@ -197,6 +201,15 @@ function computeXDomainLineAnnotationDimensions( const width = isHorizontalChartRotation ? horizontal.bandwidth : vertical.bandwidth; const height = isHorizontalChartRotation ? vertical.bandwidth : horizontal.bandwidth; + const linePathPoints = getXLinePath({ width, height }, annotationValueXPosition); + const alignment = getAnchorPosition( + true, + // isHorizontalChartRotation, + chartRotation, + specMarkerPosition, + axisPosition, + ); + const position = getMarkerPositionForXAnnotation( panelSize, chartRotation, @@ -205,8 +218,6 @@ function computeXDomainLineAnnotationDimensions( dimension, ); - const linePathPoints = getXLinePath({ width, height }, annotationValueXPosition); - const lineProp: AnnotationLineProps = { specId, id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue), @@ -281,35 +292,41 @@ export function computeLineAnnotationDimensions( function getAnchorPosition( isXDomain: boolean, - isChartHorizontal: boolean, + chartRotation: number, specMarkerPosition?: Position, - axisPosition?: Position | undefined, + axisPosition?: Position, ): Position { - const dflPositionFromAxis = getDefaultMarkerPositionFromAxis(isXDomain, isChartHorizontal, axisPosition); + const dflPositionFromAxis = getDefaultMarkerPositionFromAxis(isXDomain, chartRotation, axisPosition); if (specMarkerPosition !== undefined) { // validate specMarkerPosition against domain - const validatedPosFromMarkerPos = validateMarkerPosition(isXDomain, isChartHorizontal, specMarkerPosition); + const validatedPosFromMarkerPos = validateMarkerPosition(isXDomain, chartRotation, specMarkerPosition); return validatedPosFromMarkerPos ?? dflPositionFromAxis; } return dflPositionFromAxis; } -function validateMarkerPosition(isXDomain: boolean, isHorizontal: boolean, position: Position): Position | undefined { - if ((isXDomain && isHorizontal) || (!isXDomain && !isHorizontal)) { - return position === Position.Top || position === Position.Bottom ? position : Position.Bottom; +function validateMarkerPosition(isXDomain: boolean, chartRotation: number, position: Position): Position | undefined { + if ( + (isXDomain && (chartRotation === 0 || chartRotation === 180)) || + (!isXDomain && (chartRotation === 90 || chartRotation === -90)) + ) { + return position === Position.Top || position === Position.Bottom ? position : undefined; } return position === Position.Left || position === Position.Right ? position : undefined; } function getDefaultMarkerPositionFromAxis( isXDomain: boolean, - isHorizontal: boolean, + chartRotation: number, axisPosition?: Position, ): Position { if (axisPosition) { return axisPosition; } - if (!isXDomain && isHorizontal) { + if ( + (isXDomain && (chartRotation === 90 || chartRotation === -90)) || + (!isXDomain && (chartRotation === 0 || chartRotation === 180)) + ) { return Position.Left; } return Position.Bottom; diff --git a/stories/annotations/rects/1_linear_bar_chart.tsx b/stories/annotations/rects/1_linear_bar_chart.tsx index 1838e97fe6..3e968abd85 100644 --- a/stories/annotations/rects/1_linear_bar_chart.tsx +++ b/stories/annotations/rects/1_linear_bar_chart.tsx @@ -18,6 +18,7 @@ */ import { boolean, select } from '@storybook/addon-knobs'; +import marked from 'marked'; import React from 'react'; import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../../../src'; @@ -90,7 +91,7 @@ export const Example = () => { Example.story = { parameters: { info: { - text: `A \`\` can be used to create a rectangular annotation. + text: marked(`A \`\` can be used to create a rectangular annotation. As for most chart component, the required props are: \`id\` to uniquely identify the annotation and a \`dataValues\` prop that describes one or more annotations. @@ -127,7 +128,7 @@ coordinates: { This annotation will cover the X axis starting from the \`0\` value to the \`1\` value included. The \`y\` is covered from 0 to 7. In a barchart with linear or ordinal x scale, the interval covered by the annotation fully include the \`x0\` and \`x1\` values. If one value is out of the relative domain, we will clip the annotation to the max/min value of the chart domain. - `, + `), }, }, }; diff --git a/stories/annotations/rects/2_ordinal_bar_chart.tsx b/stories/annotations/rects/2_ordinal_bar_chart.tsx index 4497cb9466..0a2abbd101 100644 --- a/stories/annotations/rects/2_ordinal_bar_chart.tsx +++ b/stories/annotations/rects/2_ordinal_bar_chart.tsx @@ -18,6 +18,7 @@ */ import { boolean } from '@storybook/addon-knobs'; +import marked from 'marked'; import React from 'react'; import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../../../src'; @@ -66,10 +67,9 @@ export const Example = () => { Example.story = { parameters: { info: { - text: `On Ordinal Bar charts, you can draw a rectangular annotation the same way it's done within a linear bar chart. + text: marked(`On Ordinal Bar charts, you can draw a rectangular annotation the same way it's done within a linear bar chart. The annotation will cover fully the extent defined by the \`coordinate\` object, extending to the max/min domain values any -missing/out-of-range parameters. - `, +missing/out-of-range parameters.`), }, }, }; diff --git a/stories/bar/54_functional_accessors.tsx b/stories/bar/54_functional_accessors.tsx index 8cdd05888e..3d6869b7b0 100644 --- a/stories/bar/54_functional_accessors.tsx +++ b/stories/bar/54_functional_accessors.tsx @@ -19,6 +19,7 @@ import { action } from '@storybook/addon-actions'; import { text } from '@storybook/addon-knobs'; +import marked from 'marked'; import React from 'react'; import { Axis, BarSeries, Chart, Position, ScaleType, Settings, AccessorFn, ElementClickListener } from '../../src'; @@ -57,7 +58,7 @@ Example.story = { parameters: { options: { selectedPanel: SB_SOURCE_PANEL }, info: { - text: `An \`AccessorFn\` can be used as any accessor including: \`xAccessor\`, \`yAccessors\`, \`y0Accessors\` and \`splitSeriesAccessors\`. + text: marked(`An \`AccessorFn\` can be used as any accessor including: \`xAccessor\`, \`yAccessors\`, \`y0Accessors\` and \`splitSeriesAccessors\`. This enables serialization of complex values, without needing to transform raw data. @@ -76,7 +77,7 @@ If no \`fieldName\` is provided, the default value will be set using the index \ Try changing the \`fieldName\` for the y and split accessor functions in the storybook knobs. **Note: All \`fieldName\` and \`Accessor\` values should be unique. Any duplicated values will be ignored.** - `, + `), }, }, }; diff --git a/stories/test_cases/3_no_axes_annotation.tsx b/stories/test_cases/3_no_axes_annotation.tsx index 39ed64f27c..4ee66bac71 100644 --- a/stories/test_cases/3_no_axes_annotation.tsx +++ b/stories/test_cases/3_no_axes_annotation.tsx @@ -28,7 +28,9 @@ import { BarSeries, ScaleType, Position, + Settings, } from '../../src'; +import { getChartRotationKnob } from '../utils/knobs'; function generateAnnotationData(values: any[]): LineAnnotationDatum[] { return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` })); @@ -45,8 +47,10 @@ export const Example = () => { [Position.Top, Position.Left, Position.Bottom, Position.Right, 'undefined'], 'undefined', ); + const chartRotation = getChartRotationKnob(); return ( + { marker={
Horizontal
} markerPosition={markerPositionHorizontal === 'undefined' ? undefined : markerPositionHorizontal} /> - Date: Wed, 31 Mar 2021 10:05:35 -0600 Subject: [PATCH 5/7] test: add missing test --- ...nnotations-with-90-deg-rotation-1-snap.png | Bin 3799 -> 3776 bytes ...ations-with-neg-90-deg-rotation-1-snap.png | Bin 0 -> 3799 bytes integration/tests/test_cases_stories.test.ts | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-neg-90-deg-rotation-1-snap.png diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-90-deg-rotation-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-90-deg-rotation-1-snap.png index 7e6414e9166cfd1dcf65a4c9acb72dc28a9acec5..fb63201d4e25ed171106a15a12405efd19f7808b 100644 GIT binary patch literal 3776 zcmeHKX;hO}8otQ1aq0o4<5)Ch>F8M6I*LmXWp!cE8I}=9V!;p;Q3yhefdmK;skK@K z9c)Jg0+fLg$tpq!5JE&Nlwv@ZFA*UNf-DIEB@0^;=A%F6M~^+zIcJ*X!Kn7cJ7`y;k78+*bvIf-2pMB^jz5L|cXp0P9IR@@)Zdc<(2F`0*@#6MEHCPE=E4pv{aD z$H~vJTlNV>+CGb8p zGx7{bV7f*Ut^we)x8Z#LDxlID>|4KrFR@ZN+edTcms7fy&d6yUe?3C=fhnBd@NYo%N~r%+!4-Ml zSXdL7G%?;q-+}LjEA3KrZIfAXBo{UY)svy=Rj*xSE0p9%2~tSckqWUma?>VknKiiA z6YRkkZ@V>5jTOC#g8GsLgC!1LOD_Y3P2V+04{gmR-YLE1TgxKBTxepQqGLO`4ascT z*FOLz{%2hQ3H6a4Aqo@}9G^-}oYZw=W z2?T6QGS)jqhBX-btKIsQIBV*h6Zu8=?q&$`f2uXQ>_n*i_y&D=;#2ApY~m`)z~=%r z!IC67N+2Gf&JSPm^pMTB$tkkO_wF6XWzu3)mk%uuKin0V)L5}WhOB<*YAao<6MDk9 zD}?yA0shn#4LlE%x#JFnV4e)k4r9P>A&*L~CKCwedO_ST0BB+z(UP?q4J(f{=CB%O zQcRFx+R3*C9ZmEPRy5Ww7D;Lpu(yO{~}e#EiW#Ho^yc< zTiqyLu^v5Ih;?3ksVlo~CJ=p$s~FshXC z+_F8=EiZCb)U&OfR6D>%lpPx|>;>S@UD|E0|I|X3I2{wF{?UEz_ON-0<+ihTW$Eqc zcY-}x6{M98K;F?>>rB(fZq*-e;|JhhUcF%W)>Mcsu?8Uad0y0vdV)R(cL}d<1YTb{ ze@+|n-?jQH39_&0UqFm1hTPIghUSDGCv{_mhLRamdT?oT#k6=?h%GS?e~-<;@drix zlu6(I4W~_6DEV&b7AtV}*Z2rjlG3NzDSed3WcsY`_eP=knF|pAlq4>7_#zL&w9JkM zI-OHjFX5%^R*#WfdBvUCOHnn?zK;}T9M5`rwOi&UV=wxhS_SUKC!|pKv7o3ji@v@| z*F~E)egI4Lw+@s_g2Jn|G<(rbqZKgF6*b~6?>WxmYyk%P_6r2}hI4b==%Qx1BHLJd z5$X$1)k#7f$->UoEqd{!2DjYqp?jot>~0t#Q_ z71lACXkPSD7RHsmmtVV7KIBEGCmYb?fYt*eF3r^-R{xO*}s%(PF~j=cfA-AAG(B-+42Ef3hPMlDTJ2 zOkG)rkq$K$GkfA4cj$*mN-zC_N>!I(HhcobPw^}kQM+5LLEQ~)E@+N$Z9YphKeM-o zrUnT8Qv<~si9184Qt69!jLE zWw_-s!$LQY$F#;Mm&NJ2XwJ%$H2A(uAU4}WeSO?00ycW2U5sO)x2n_Ho;?he!JC4o z6G+*O>^Bh%C{<>zQ)H3?Y-~e#1GTjDC*G43r8yLeuVX@LPNyplW9OZM5t)tsNTiyV zlOu9AqhP2l^&d)eltcUJ_2LZv?c zOJZPLTdN>r=+3YSxnYvCmlVy*&%dzjlpt%#%Hk78=y-t{7XrZOUhW@Ce6phC#P;jz zU1jO4=qv+0W4z>WYLCCG%#mWcy|`$kn7pV)dNc|p8T-)iXjcJL*E4D0Lm^eTc?Vv8v1GL ROz^c29QF_K;~t3l^lzCd`Huhq delta 2191 zcmY+Edo-JQ9>(9)s>dibmRHq*m2*D?v19O{t`48xc+LnwoM{ zF($1JDeCBjH#ajRT0v~JbUQ9piF>Fj(WFV-a*-hWnmuRs?7zQrzUTY=KF{-fJDodepQcZbhoq!t0OQIhx!tSR`)lME**AN4C6iaq&`dzG@rd0;d(!xz0)G&FU$BZ z@^%b3fBqn1-`)#ZImnuU!LG@X$r12~;i{~XX;*?{Ne%$O=fQPSGXMbG>=}ay59?br zcO1KZFQ%lKe#@Rwi|`CdwxQ0D%{KP>SpYzD-yn`PY_l4fL>|4C70hKGy%429;yF0d z5i8Sr8E9f`-v;DH6ve4{JxQ@=1B*-Sq)7@+XaT?fibE5^(gne2G~4HQlKjL<-9g(t z(T@Ot6tBjmLOhZbOG(cV&~HODm$J=I%4~p6jQD0xHQPUl5Yso`xRM#i%K=V2q$R-9Hp}v5FdeG zzY3xPR^B-h({C*V#H10BY)Xj`U>x5@XLKUW!JiW;>20zXbGpehoZz~0v?;4NTRUcZ z`6~d}*?u&{0?0l1Hzxpic33T%EkTYBoss6{c~d3?tyeVi$|s~qp$z{2X_jBYZ{?0H zAed5twDBwVVlx;VGp2xjc@w}eDC{|lKER@T%3Syqg}nX`oau_ zQr}#)aL#;tskr;gNo`ThuskJZ0<|69)~uh~q-D*&@D^vPeO;=pyFBEH1GRyCeG-~Q zwsGOAr>}c^qOqsm4e5!q-!HaX1bKs za1?^u=SM^vN_$Y>JI;3_tjp4}6{7_=tk5qj02nm6!+Z-9OG4D`0Dw-H#eIxl%(Bsa z8Md8=YJ{tv@=7b$7WxhtR&xBTJwJW8O}_B)lI{!a{x=DeSs(5woe@C17{4^ipvc%H z)>!Y$gdPIGu=~@wgNG+ja9$tKW~oNV)VbM|AyT-8?;1wJnE})@gC5zMst%JMNjE`L zygA1qPcoLaoo6gs9)zR!>%O5&I(Ya;;>`O7O;T~cZC2cW$Ii6h6+fnVu661tTLTH< zO>ip~2Nx%gfkF&$Bmon{!TZ0CtLiK3oBe%V>sEgp2SWh;%ZV!s@qI>~i-5i(*GupR z?uDI$*@CIo^eDw=R0Ly>r3n@gg#KNP=qcFDOJ#o;)F4|^##rbVdd9zpouv4tCy*#;DiP6c5m{< z`qK`C=DLpcxq=DQE2HZh1fc&mb3+qKlt3c3a>5PUw3b20Sz}VVtXZVVCkf&IE_K-z z-Mmm?nDdlHVla}Q_J>!cPtNJ>4QTD!01q;^ignaF*KB-j(mbuSKQDj;=nct$}t&L46gN#lWdpux8;tGM6o1N^iQLbtI}+p zEsLdiS;!AZZ&XwsN(l942CBzruUlzB@v|GA5m?FhW+=^@&`2y+^7A2!sS#(9LBgl> zc{AlV91=&0Jo_Pc?kIi>O=52*$0wySR#r{FKi@kRQB{RuLByVtLhpp`a!21(FlFp( zzE4^;j;R$6G06;>G%=`FlXGVRrKq``X3@DOa=K+3zN8u3PhyhgP?=Nz;c0!r5_xk7#J@ zGpM#U*aM7e>`)2Ql2fJw8f=_Da;vKY)rM=|AOXPcl%}YzM>&NOK#*$~jRirD#W+Id z40l{eJqbV0KQNwTYP*wlezfK~=WE}cZeN2B6J7hLbtYe;rk74lRlzi+s3 zCN`ToRv%)Zx>>!BDsIU9$p$#qwzlFc9_N#Z8-@z+!(ujE8y1M7cZ+|p6e?c1o2a9@ zXwfEwZ%I9cbt+oEMV1HR!&={vYrO1VX+!6~z5}{Pq6;>XeYe diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-neg-90-deg-rotation-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-neg-90-deg-rotation-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..7e6414e9166cfd1dcf65a4c9acb72dc28a9acec5 GIT binary patch literal 3799 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 literal 0 HcmV?d00001 diff --git a/integration/tests/test_cases_stories.test.ts b/integration/tests/test_cases_stories.test.ts index 5bd4cc0858..e819878827 100644 --- a/integration/tests/test_cases_stories.test.ts +++ b/integration/tests/test_cases_stories.test.ts @@ -49,7 +49,7 @@ describe('Test cases stories', () => { ); }); - it('should render marker with annotations with -90 deg rotation', async () => { + it('should render marker with annotations with neg 90 deg rotation', async () => { await common.expectChartAtUrlToMatchScreenshot( 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=-90', ); From 0ba5d9b76ea72c3fff873f33bb634ec8f7e098ba Mon Sep 17 00:00:00 2001 From: rshen91 Date: Fri, 2 Apr 2021 09:35:36 -0600 Subject: [PATCH 6/7] refactor: code review --- ...ations-with-0-degree-rotations-1-snap.png} | Bin ...ions-with-180-degree-rotations-1-snap.png} | Bin ...tions-with-90-degree-rotations-1-snap.png} | Bin ...h-negative-90-degree-rotations-1-snap.png} | Bin integration/tests/test_cases_stories.test.ts | 32 +++++----------- package.json | 1 - .../xy_chart/annotations/line/dimensions.ts | 36 +++++------------- .../annotations/rects/1_linear_bar_chart.tsx | 5 +-- .../annotations/rects/2_ordinal_bar_chart.tsx | 5 +-- stories/bar/54_functional_accessors.tsx | 5 +-- yarn.lock | 5 --- 11 files changed, 25 insertions(+), 64 deletions(-) rename integration/tests/__image_snapshots__/{test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-no-rotations-1-snap.png => test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-0-degree-rotations-1-snap.png} (100%) rename integration/tests/__image_snapshots__/{test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-180-deg-rotation-1-snap.png => test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-180-degree-rotations-1-snap.png} (100%) rename integration/tests/__image_snapshots__/{test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-90-deg-rotation-1-snap.png => test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-90-degree-rotations-1-snap.png} (100%) rename integration/tests/__image_snapshots__/{test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-neg-90-deg-rotation-1-snap.png => test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-negative-90-degree-rotations-1-snap.png} (100%) diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-no-rotations-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-0-degree-rotations-1-snap.png similarity index 100% rename from integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-no-rotations-1-snap.png rename to integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-0-degree-rotations-1-snap.png diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-180-deg-rotation-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-180-degree-rotations-1-snap.png similarity index 100% rename from integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-180-deg-rotation-1-snap.png rename to integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-180-degree-rotations-1-snap.png diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-90-deg-rotation-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-90-degree-rotations-1-snap.png similarity index 100% rename from integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-90-deg-rotation-1-snap.png rename to integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-90-degree-rotations-1-snap.png diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-neg-90-deg-rotation-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-negative-90-degree-rotations-1-snap.png similarity index 100% rename from integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-neg-90-deg-rotation-1-snap.png rename to integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-negative-90-degree-rotations-1-snap.png diff --git a/integration/tests/test_cases_stories.test.ts b/integration/tests/test_cases_stories.test.ts index e819878827..f2123c4897 100644 --- a/integration/tests/test_cases_stories.test.ts +++ b/integration/tests/test_cases_stories.test.ts @@ -36,28 +36,16 @@ describe('Test cases stories', () => { { waitSelector: '.echReactiveChart_noResults' }, ); }); +}); - it('should render marker with annotations with no rotations', async () => { - await common.expectChartAtUrlToMatchScreenshot( - 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=0', - ); - }); - - it('should render marker with annotations with 90 deg rotation', async () => { - await common.expectChartAtUrlToMatchScreenshot( - 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=90', - ); - }); - - it('should render marker with annotations with neg 90 deg rotation', async () => { - await common.expectChartAtUrlToMatchScreenshot( - 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=-90', - ); - }); - - it('should render marker with annotations with 180 deg rotation', async () => { - await common.expectChartAtUrlToMatchScreenshot( - 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=180', - ); +describe('annotation marker rotation', () => { + [0, 90, -90, 180].forEach((rotation) => { + it(`should render marker with annotations with ${ + rotation === -90 ? 'negative 90' : rotation + } degree rotations`, async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=${rotation}`, + ); + }); }); }); diff --git a/package.json b/package.json index ab3d237143..649bd6ef7a 100644 --- a/package.json +++ b/package.json @@ -170,7 +170,6 @@ "lodash": "^4.17.15", "lorem-ipsum": "^2.0.3", "luxon": "^1.25.0", - "marked": "^2.0.1", "moment": "^2.29.1", "moment-timezone": "^0.5.32", "node-sass": "^4.14.1", diff --git a/src/chart_types/xy_chart/annotations/line/dimensions.ts b/src/chart_types/xy_chart/annotations/line/dimensions.ts index b4ec8d3689..792fc3045a 100644 --- a/src/chart_types/xy_chart/annotations/line/dimensions.ts +++ b/src/chart_types/xy_chart/annotations/line/dimensions.ts @@ -25,7 +25,7 @@ import { Dimensions, Size } from '../../../../utils/dimensions'; import { GroupId } from '../../../../utils/ids'; import { mergeWithDefaultAnnotationLine } from '../../../../utils/themes/merge_utils'; import { SmallMultipleScales } from '../../state/selectors/compute_small_multiple_scales'; -import { isHorizontalRotation } from '../../state/utils/common'; +import { isHorizontalRotation, isVerticalRotation } from '../../state/utils/common'; import { computeXScaleOffset } from '../../state/utils/utils'; import { getPanelSize } from '../../utils/panel'; import { AnnotationDomainTypes, LineAnnotationSpec, LineAnnotationDatum } from '../../utils/specs'; @@ -84,13 +84,7 @@ function computeYDomainLineAnnotationDimensions( const width = isHorizontalChartRotation ? horizontal.bandwidth : vertical.bandwidth; const height = isHorizontalChartRotation ? vertical.bandwidth : horizontal.bandwidth; const linePathPoints = getYLinePath({ width, height }, annotationValueYPosition); - const alignment = getAnchorPosition( - false, - // isHorizontalChartRotation, - chartRotation, - specMarkerPosition, - axisPosition, - ); + const alignment = getAnchorPosition(false, chartRotation, axisPosition, specMarkerPosition); const position = getMarkerPositionForYAnnotation( panelSize, @@ -202,13 +196,7 @@ function computeXDomainLineAnnotationDimensions( const height = isHorizontalChartRotation ? vertical.bandwidth : horizontal.bandwidth; const linePathPoints = getXLinePath({ width, height }, annotationValueXPosition); - const alignment = getAnchorPosition( - true, - // isHorizontalChartRotation, - chartRotation, - specMarkerPosition, - axisPosition, - ); + const alignment = getAnchorPosition(true, chartRotation, axisPosition, specMarkerPosition); const position = getMarkerPositionForXAnnotation( panelSize, @@ -292,9 +280,9 @@ export function computeLineAnnotationDimensions( function getAnchorPosition( isXDomain: boolean, - chartRotation: number, - specMarkerPosition?: Position, + chartRotation: Rotation, axisPosition?: Position, + specMarkerPosition?: Position, ): Position { const dflPositionFromAxis = getDefaultMarkerPositionFromAxis(isXDomain, chartRotation, axisPosition); if (specMarkerPosition !== undefined) { @@ -305,11 +293,8 @@ function getAnchorPosition( return dflPositionFromAxis; } -function validateMarkerPosition(isXDomain: boolean, chartRotation: number, position: Position): Position | undefined { - if ( - (isXDomain && (chartRotation === 0 || chartRotation === 180)) || - (!isXDomain && (chartRotation === 90 || chartRotation === -90)) - ) { +function validateMarkerPosition(isXDomain: boolean, chartRotation: Rotation, position: Position): Position | undefined { + if ((isXDomain && isHorizontalRotation(chartRotation)) || (!isXDomain && isVerticalRotation(chartRotation))) { return position === Position.Top || position === Position.Bottom ? position : undefined; } return position === Position.Left || position === Position.Right ? position : undefined; @@ -317,16 +302,13 @@ function validateMarkerPosition(isXDomain: boolean, chartRotation: number, posit function getDefaultMarkerPositionFromAxis( isXDomain: boolean, - chartRotation: number, + chartRotation: Rotation, axisPosition?: Position, ): Position { if (axisPosition) { return axisPosition; } - if ( - (isXDomain && (chartRotation === 90 || chartRotation === -90)) || - (!isXDomain && (chartRotation === 0 || chartRotation === 180)) - ) { + if ((isXDomain && isVerticalRotation(chartRotation)) || (!isXDomain && isHorizontalRotation(chartRotation))) { return Position.Left; } return Position.Bottom; diff --git a/stories/annotations/rects/1_linear_bar_chart.tsx b/stories/annotations/rects/1_linear_bar_chart.tsx index 3e968abd85..1838e97fe6 100644 --- a/stories/annotations/rects/1_linear_bar_chart.tsx +++ b/stories/annotations/rects/1_linear_bar_chart.tsx @@ -18,7 +18,6 @@ */ import { boolean, select } from '@storybook/addon-knobs'; -import marked from 'marked'; import React from 'react'; import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../../../src'; @@ -91,7 +90,7 @@ export const Example = () => { Example.story = { parameters: { info: { - text: marked(`A \`\` can be used to create a rectangular annotation. + text: `A \`\` can be used to create a rectangular annotation. As for most chart component, the required props are: \`id\` to uniquely identify the annotation and a \`dataValues\` prop that describes one or more annotations. @@ -128,7 +127,7 @@ coordinates: { This annotation will cover the X axis starting from the \`0\` value to the \`1\` value included. The \`y\` is covered from 0 to 7. In a barchart with linear or ordinal x scale, the interval covered by the annotation fully include the \`x0\` and \`x1\` values. If one value is out of the relative domain, we will clip the annotation to the max/min value of the chart domain. - `), + `, }, }, }; diff --git a/stories/annotations/rects/2_ordinal_bar_chart.tsx b/stories/annotations/rects/2_ordinal_bar_chart.tsx index 0a2abbd101..be3b421ee0 100644 --- a/stories/annotations/rects/2_ordinal_bar_chart.tsx +++ b/stories/annotations/rects/2_ordinal_bar_chart.tsx @@ -18,7 +18,6 @@ */ import { boolean } from '@storybook/addon-knobs'; -import marked from 'marked'; import React from 'react'; import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../../../src'; @@ -67,9 +66,9 @@ export const Example = () => { Example.story = { parameters: { info: { - text: marked(`On Ordinal Bar charts, you can draw a rectangular annotation the same way it's done within a linear bar chart. + text: `On Ordinal Bar charts, you can draw a rectangular annotation the same way it's done within a linear bar chart. The annotation will cover fully the extent defined by the \`coordinate\` object, extending to the max/min domain values any -missing/out-of-range parameters.`), +missing/out-of-range parameters.`, }, }, }; diff --git a/stories/bar/54_functional_accessors.tsx b/stories/bar/54_functional_accessors.tsx index 3d6869b7b0..8cdd05888e 100644 --- a/stories/bar/54_functional_accessors.tsx +++ b/stories/bar/54_functional_accessors.tsx @@ -19,7 +19,6 @@ import { action } from '@storybook/addon-actions'; import { text } from '@storybook/addon-knobs'; -import marked from 'marked'; import React from 'react'; import { Axis, BarSeries, Chart, Position, ScaleType, Settings, AccessorFn, ElementClickListener } from '../../src'; @@ -58,7 +57,7 @@ Example.story = { parameters: { options: { selectedPanel: SB_SOURCE_PANEL }, info: { - text: marked(`An \`AccessorFn\` can be used as any accessor including: \`xAccessor\`, \`yAccessors\`, \`y0Accessors\` and \`splitSeriesAccessors\`. + text: `An \`AccessorFn\` can be used as any accessor including: \`xAccessor\`, \`yAccessors\`, \`y0Accessors\` and \`splitSeriesAccessors\`. This enables serialization of complex values, without needing to transform raw data. @@ -77,7 +76,7 @@ If no \`fieldName\` is provided, the default value will be set using the index \ Try changing the \`fieldName\` for the y and split accessor functions in the storybook knobs. **Note: All \`fieldName\` and \`Accessor\` values should be unique. Any duplicated values will be ignored.** - `), + `, }, }, }; diff --git a/yarn.lock b/yarn.lock index 5062f31620..1f9615bc1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15908,11 +15908,6 @@ marked@^1.0.0: resolved "https://registry.yarnpkg.com/marked/-/marked-1.2.7.tgz#6e14b595581d2319cdcf033a24caaf41455a01fb" integrity sha512-No11hFYcXr/zkBvL6qFmAp1z6BKY3zqLMHny/JN/ey+al7qwCM2+CMBL9BOgqMxZU36fz4cCWfn2poWIf7QRXA== -marked@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.1.tgz#5e7ed7009bfa5c95182e4eb696f85e948cefcee3" - integrity sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw== - marksy@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/marksy/-/marksy-8.0.0.tgz#b595f121fd47058df9dda1448f6ee156ab48810a" From 52ee2df94e25170c3db37aae02363d43d11b2792 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Fri, 2 Apr 2021 10:04:56 -0600 Subject: [PATCH 7/7] test: removing flaky a11y test see PR 1099 --- integration/tests/accessibility.test.ts | 34 ------------------------- 1 file changed, 34 deletions(-) delete mode 100644 integration/tests/accessibility.test.ts diff --git a/integration/tests/accessibility.test.ts b/integration/tests/accessibility.test.ts deleted file mode 100644 index 4173895c30..0000000000 --- a/integration/tests/accessibility.test.ts +++ /dev/null @@ -1,34 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import { common } from '../page_objects/common'; - -describe('Accessibility tree', () => { - it('should show the aria-label for the canvas element in the accessibility tree', async () => { - const tree = await common.testAccessibilityTree( - 'http://localhost:9001/iframe.html?id=annotations-lines--x-continuous-domain', - '#story-root', - ); - // digging into the accessibility tree for the canvas element - const expectedAriaLabel = tree.children.filter((value) => { - return value.name === 'Chart'; - }); - expect(expectedAriaLabel[0].name).toBe('Chart'); - }); -});