[ML] Delayed data visualization: ensure y-axis count is visible (#148982)

## Summary

Related issue: https://github.com/elastic/kibana/issues/143702

Ensure the y-axis counts are visible in the delayed data chart.
Default `Show model snapshots` to be initially unchecked/hidden.

<img width="615" alt="image"
src="https://user-images.githubusercontent.com/6446462/212722354-59b292d9-06ec-469d-95ea-617a130bc299.png">

## NOTE

Looks like this shouldn't explicitly need to be turned into a String() -
a limitation on EUI Charts side - they will be updating on their end so
that it's not necessary but for now this work-around is needed so that
the y-axis values show up.



### Checklist

Delete any items that are not applicable to this PR.
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Melissa Alvarez 2023-01-19 15:13:03 -07:00 committed by GitHub
parent ee8ca7ef15
commit ecc048cb40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -131,7 +131,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
const [messageData, setMessageData] = useState<LineAnnotationDatum[]>([]);
const [sourceData, setSourceData] = useState<ChartDataWithNullValues>([]);
const [showAnnotations, setShowAnnotations] = useState<boolean>(true);
const [showModelSnapshots, setShowModelSnapshots] = useState<boolean>(true);
const [showModelSnapshots, setShowModelSnapshots] = useState<boolean>(false);
const [range, setRange] = useState<{ start: string; end: string } | undefined>();
const canUpdateDatafeed = useMemo(() => checkPermission('canUpdateDatafeed'), []);
const canCreateJob = useMemo(() => checkPermission('canCreateJob'), []);
@ -443,7 +443,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
defaultMessage: 'Count',
})}
position={Position.Left}
tickFormat={(d) => (d === null ? notAvailableMessage : d)}
tickFormat={(d) => (d === null ? notAvailableMessage : String(d))}
/>
{showAnnotations ? (
<>