[Line Annotation] Line annotations render useless text in datavalues key #2704
Description
Describe the issue
While doing some downstream testing in Kibana to resolve elastic/kibana#222941, I noted that the datavalues key in the LineAnnotation component seems to render the output of a toString call. Presumably this should show the data elements passed as props.
To Reproduce
Steps to reproduce the behavior:
- Render a
LineAnnotation - Look at the DOM outputted
- Note the
datavalueskey - It likely looks like:
Example: threshold_annotations.tsx in the Observability plugin in Kibana. Sample output from unit tests calling the component:
<body>
<div>
<div
data-test-subj="threshold-line"
<!-- this output is not useful -->
datavalues="[object Object],[object Object]"
domaintype="yDomain"
id="testId-thresholds"
/>
<div
data-test-subj="above-rect"
datavalues="[object Object]"
id="testId-upper-threshold"
style="fill: #A6EDEA; opacity: 0.3;"
/>
</div>
</body>Expected behaviour
I'd imagine this should show something meaningful, or not be rendered at all.
<div
data-test-subj="threshold-line"
<!-- show the data, or do not render? -->
datavalues="[{ dataValue: 20 }, { dataValue: 30 }]"
domaintype="yDomain"
id="testId-thresholds"
/>Screenshots
This was discovered testing components via react-testing-library, and it's a DOM-level issue that might not show to the user in any meaningful way.
Version (please complete the following information):
- OS: macOS
- Browser: Chrome
- Elastic Charts:
70.1.3
Additional context
Add any other context about the problem here.
Errors in browser console
Kibana Cross Issues
I discovered this while working on elastic/kibana#222941, but it is not directly related to the issue.
Checklist
- The proper chart type label has been added (e.g.
:xy,:partition) - The proper feature labels have been added (e.g.
:interactions,:axis) - Every related Kibana issue is listed under
Kibana Cross Issueslist and thekibana cross issuetag is applied