From 0bd61f198743461c267eed74706797b49508e250 Mon Sep 17 00:00:00 2001 From: Rachel Shen Date: Fri, 2 Apr 2021 11:18:53 -0600 Subject: [PATCH] fix(annotations): provide fallback for line annotation markers (#1091) --- .playground/playground.tsx | 42 ++++++--- ...-bug-fix-visually-looks-correct-1-snap.png | Bin 0 -> 3909 bytes ...tations-with-0-degree-rotations-1-snap.png | Bin 0 -> 3909 bytes ...tions-with-180-degree-rotations-1-snap.png | Bin 0 -> 3846 bytes ...ations-with-90-degree-rotations-1-snap.png | Bin 0 -> 3776 bytes ...th-negative-90-degree-rotations-1-snap.png | Bin 0 -> 3799 bytes integration/tests/accessibility.test.ts | 34 ------- integration/tests/test_cases_stories.test.ts | 12 +++ package.json | 1 + .../xy_chart/annotations/line/dimensions.ts | 30 +++---- .../annotations/rects/2_ordinal_bar_chart.tsx | 3 +- stories/test_cases/3_no_axes_annotation.tsx | 83 ++++++++++++++++++ stories/test_cases/test_cases.stories.tsx | 1 + yarn.lock | 5 ++ 14 files changed, 145 insertions(+), 66 deletions(-) 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 integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-0-degree-rotations-1-snap.png create mode 100644 integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-180-degree-rotations-1-snap.png create mode 100644 integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-90-degree-rotations-1-snap.png create mode 100644 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 delete mode 100644 integration/tests/accessibility.test.ts create mode 100644 stories/test_cases/3_no_axes_annotation.tsx 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/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..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/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-0-degree-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 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/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-180-degree-rotations-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 new file mode 100644 index 0000000000000000000000000000000000000000..2517602b2a93403d33147eab95ca98592612a3ea GIT binary patch literal 3846 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 ROz^c29QF_K;~t3l^lzCd`Huhq literal 0 HcmV?d00001 diff --git a/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 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 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/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'); - }); -}); diff --git a/integration/tests/test_cases_stories.test.ts b/integration/tests/test_cases_stories.test.ts index 3813ee7dde..f2123c4897 100644 --- a/integration/tests/test_cases_stories.test.ts +++ b/integration/tests/test_cases_stories.test.ts @@ -37,3 +37,15 @@ describe('Test cases stories', () => { ); }); }); + +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 2683219307..649bd6ef7a 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", diff --git a/src/chart_types/xy_chart/annotations/line/dimensions.ts b/src/chart_types/xy_chart/annotations/line/dimensions.ts index e3f29e6fe0..eb6a496dc8 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 { AnnotationDomainType, LineAnnotationSpec, LineAnnotationDatum } from '../../utils/specs'; @@ -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,8 @@ 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, chartRotation, axisPosition, specMarkerPosition); const position = getMarkerPositionForYAnnotation( panelSize, @@ -93,8 +94,6 @@ function computeYDomainLineAnnotationDimensions( dimension, ); - const linePathPoints = getYLinePath({ width, height }, annotationValueYPosition); - const lineProp: AnnotationLineProps = { specId, id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue), @@ -147,7 +146,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 +195,9 @@ 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, chartRotation, axisPosition, specMarkerPosition); + const position = getMarkerPositionForXAnnotation( panelSize, chartRotation, @@ -205,8 +206,6 @@ function computeXDomainLineAnnotationDimensions( dimension, ); - const linePathPoints = getXLinePath({ width, height }, annotationValueXPosition); - const lineProp: AnnotationLineProps = { specId, id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue), @@ -281,22 +280,21 @@ export function computeLineAnnotationDimensions( function getAnchorPosition( isXDomain: boolean, - isChartHorizontal: boolean, - specMarkerPosition?: Position, + chartRotation: Rotation, axisPosition?: Position, + specMarkerPosition?: 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)) { +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; @@ -304,13 +302,13 @@ function validateMarkerPosition(isXDomain: boolean, isHorizontal: boolean, posit function getDefaultMarkerPositionFromAxis( isXDomain: boolean, - isHorizontal: boolean, + chartRotation: Rotation, axisPosition?: Position, ): Position { if (axisPosition) { return axisPosition; } - if ((isXDomain && isHorizontal) || (!isXDomain && !isHorizontal)) { + if ((isXDomain && isVerticalRotation(chartRotation)) || (!isXDomain && isHorizontalRotation(chartRotation))) { return Position.Left; } return Position.Bottom; diff --git a/stories/annotations/rects/2_ordinal_bar_chart.tsx b/stories/annotations/rects/2_ordinal_bar_chart.tsx index 4497cb9466..be3b421ee0 100644 --- a/stories/annotations/rects/2_ordinal_bar_chart.tsx +++ b/stories/annotations/rects/2_ordinal_bar_chart.tsx @@ -68,8 +68,7 @@ Example.story = { info: { 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/test_cases/3_no_axes_annotation.tsx b/stories/test_cases/3_no_axes_annotation.tsx new file mode 100644 index 0000000000..d59be2e095 --- /dev/null +++ b/stories/test_cases/3_no_axes_annotation.tsx @@ -0,0 +1,83 @@ +/* + * 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 { select } from '@storybook/addon-knobs'; +import React from 'react'; + +import { + AnnotationDomainType, + LineAnnotationDatum, + Chart, + LineAnnotation, + 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}` })); +} + +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', + ); + const chartRotation = getChartRotationKnob(); + 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'; diff --git a/yarn.lock b/yarn.lock index f0f126a8a2..1f9615bc1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5795,6 +5795,11 @@ resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-1.25.0.tgz#3d6fe591fac874f48dd225cb5660b2b785a21a05" integrity sha512-iIJp2CP6C32gVqI08HIYnzqj55tlLnodIBMCcMf28q9ckqMfMzocCmIzd9JWI/ALLPMUiTkCu1JGv3FFtu6t3g== +"@types/marked@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@types/marked/-/marked-2.0.1.tgz#bbb6d1b570a54652a31953c77972f65b6f9235a4" + integrity sha512-/CFe3HvXMkh7YkJS0DGRsC0hgwWZDZbSCmY/X00bSCnZ4ukS2Glk9veIkRoPu2ElMbKpjxseXn1y9MkTwGHVjw== + "@types/mdast@^3.0.0": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"