Skip to content

Commit b339318

Browse files
emmacunninghamemmacunningham
authored
feat(rect_annotation): add RectAnnotation type (#180)
1 parent 0897ff1 commit b339318

19 files changed

+1826
-323
lines changed

‎src/components/_annotation.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,9 @@
4040
.elasticChartsAnnotation__details {
4141
margin: 0;
4242
padding: 0 8px;
43+
display: flex;
44+
}
45+
46+
.elasticChartsAnnotation__detailsMarker {
47+
margin-right: 4px;
4348
}

‎src/components/annotation_tooltips.tsx‎

Lines changed: 69 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { inject, observer } from 'mobx-react';
22
import React from 'react';
3-
import { AnnotationTypes } from '../lib/series/specs';
3+
import { isLineAnnotation } from '../lib/series/specs';
44
import { AnnotationId } from '../lib/utils/ids';
5-
import { AnnotationLineProps } from '../state/annotation_utils';
5+
import { AnnotationDimensions, AnnotationLineProps } from '../state/annotation_utils';
66
import { ChartStore } from '../state/chart_state';
77

88
interface AnnotationTooltipProps {
@@ -13,28 +13,44 @@ class AnnotationTooltipComponent extends React.Component<AnnotationTooltipProps>
1313
static displayName = 'AnnotationTooltip';
1414

1515
renderTooltip() {
16-
const annotationTooltipState = this.props.chartStore!.annotationTooltipState.get();
17-
if (!annotationTooltipState || !annotationTooltipState.isVisible) {
16+
const { annotationTooltipState } = this.props.chartStore!;
17+
const tooltipState = annotationTooltipState.get();
18+
19+
if (!tooltipState || !tooltipState.isVisible) {
1820
return <div className="elasticChartsAnnotation__tooltip elasticChartsAnnotation__tooltip--hidden" />;
1921
}
2022

21-
const transform = annotationTooltipState.transform;
23+
const { transform, details, header } = tooltipState;
2224
const chartDimensions = this.props.chartStore!.chartDimensions;
2325

24-
const style = {
26+
const tooltipTop = tooltipState.top;
27+
const tooltipLeft = tooltipState.left;
28+
const top = tooltipTop == null ? chartDimensions.top : chartDimensions.top + tooltipTop;
29+
const left = tooltipLeft == null ? chartDimensions.left : chartDimensions.left + tooltipLeft;
30+
31+
const position = {
2532
transform,
26-
top: chartDimensions.top,
27-
left: chartDimensions.left,
33+
top,
34+
left,
2835
};
2936

30-
return (
31-
<div className="elasticChartsAnnotation__tooltip" style={{ ...style }}>
32-
<p className="elasticChartsAnnotation__header">{annotationTooltipState.header}</p>
33-
<div className="elasticChartsAnnotation__details">
34-
{annotationTooltipState.details}
35-
</div>
36-
</div>
37-
);
37+
switch (tooltipState.annotationType) {
38+
case 'line': {
39+
const props = { position, details, header };
40+
return <LineAnnotationTooltip {...props} />;
41+
}
42+
case 'rectangle': {
43+
const props = { details, position };
44+
45+
if (tooltipState.renderTooltip) {
46+
return tooltipState.renderTooltip(position, details);
47+
}
48+
49+
return <RectAnnotationTooltip {...props} />;
50+
}
51+
default:
52+
return null;
53+
}
3854
}
3955

4056
renderAnnotationLineMarkers(annotationLines: AnnotationLineProps[], id: AnnotationId): JSX.Element[] {
@@ -72,17 +88,16 @@ class AnnotationTooltipComponent extends React.Component<AnnotationTooltipProps>
7288
const { annotationDimensions, annotationSpecs } = this.props.chartStore!;
7389
const markers: JSX.Element[] = [];
7490

75-
annotationDimensions.forEach((annotationLines: AnnotationLineProps[], id: AnnotationId) => {
91+
annotationDimensions.forEach((dimensions: AnnotationDimensions, id: AnnotationId) => {
7692
const annotationSpec = annotationSpecs.get(id);
7793
if (!annotationSpec) {
7894
return;
7995
}
8096

81-
switch (annotationSpec.annotationType) {
82-
case AnnotationTypes.Line:
83-
const lineMarkers = this.renderAnnotationLineMarkers(annotationLines, id);
84-
markers.push(...lineMarkers);
85-
break;
97+
if (isLineAnnotation(annotationSpec)) {
98+
const annotationLines = dimensions as AnnotationLineProps[];
99+
const lineMarkers = this.renderAnnotationLineMarkers(annotationLines, id);
100+
markers.push(...lineMarkers);
86101
}
87102
});
88103

@@ -100,3 +115,35 @@ class AnnotationTooltipComponent extends React.Component<AnnotationTooltipProps>
100115
}
101116

102117
export const AnnotationTooltip = inject('chartStore')(observer(AnnotationTooltipComponent));
118+
119+
function RectAnnotationTooltip(props: {
120+
details?: string;
121+
position: { transform: string; top: number; left: number; };
122+
}) {
123+
const { details, position } = props;
124+
return (
125+
<div className="elasticChartsAnnotation__tooltip" style={{ ...position }}>
126+
<div className="elasticChartsAnnotation__details">
127+
<div className="elasticChartsAnnotation__detailsText">
128+
{details}
129+
</div>
130+
</div>
131+
</div>
132+
);
133+
}
134+
135+
function LineAnnotationTooltip(props: {
136+
details?: string;
137+
header?: string;
138+
position: { transform: string; top: number; left: number; };
139+
}) {
140+
const { details, position, header } = props;
141+
return (
142+
<div className="elasticChartsAnnotation__tooltip" style={{ ...position }}>
143+
<p className="elasticChartsAnnotation__header">{header}</p>
144+
<div className="elasticChartsAnnotation__details">
145+
{details}
146+
</div>
147+
</div>
148+
);
149+
}

src/components/react_canvas/annotation.tsx renamed to src/components/react_canvas/line_annotation.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import React from 'react';
22
import { Group, Line } from 'react-konva';
3-
import { AnnotationLineStyle } from '../../lib/themes/theme';
3+
import { LineAnnotationStyle } from '../../lib/themes/theme';
44
import { Dimensions } from '../../lib/utils/dimensions';
55
import { AnnotationLineProps } from '../../state/annotation_utils';
66

7-
interface AnnotationProps {
7+
interface LineAnnotationProps {
88
chartDimensions: Dimensions;
99
debug: boolean;
1010
lines: AnnotationLineProps[];
11-
lineStyle: AnnotationLineStyle;
11+
lineStyle: LineAnnotationStyle;
1212
}
1313

14-
export class Annotation extends React.PureComponent<AnnotationProps> {
14+
export class LineAnnotation extends React.PureComponent<LineAnnotationProps> {
1515
render() {
1616
return this.renderAnnotation();
1717
}
@@ -28,10 +28,10 @@ export class Annotation extends React.PureComponent<AnnotationProps> {
2828
}
2929

3030
private renderAnnotation = () => {
31-
const { chartDimensions, lines } = this.props;
31+
const { lines } = this.props;
3232

3333
return (
34-
<Group x={chartDimensions.left} y={chartDimensions.top}>
34+
<Group>
3535
{lines.map(this.renderAnnotationLine)}
3636
</Group>
3737
);

0 commit comments

Comments
 (0)