[Unified Histogram] Set legend width to extra large and enable text w…

…rapping in legend labels (#163009)

## Summary

This PR sets the Unified Histogram chart's legend width to extra large
and enables text wrapping in legend labels.

Note that this means the legend will always use the extra large size
(230px) even if the screen size is small or the labels do not fill the
available legend space.

With long labels:
<img width="1369" alt="long"
src="https://github.com/elastic/kibana/assets/25592674/1f6f0d80-d924-48a4-b758-4cf72b99fc57">

With short labels:
<img width="1369" alt="short"
src="https://github.com/elastic/kibana/assets/25592674/704f2b75-a565-44a0-be1a-e27bdca00a8e">

Resolves #162932.

### Checklist

- [ ] ~Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)~
- [ ]
~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials~
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] ~Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard
accessibility](https://webaim.org/techniques/keyboard/))~
- [ ] ~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))~
- [ ] ~If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~
- [ ] ~This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))~
- [ ] ~This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)~

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <[email protected]>

src/plugins/unified_histogram/kibana.jsonc

@@ -7,6 +7,13 @@
     "id": "unifiedHistogram",
     "server": false,
     "browser": true,
-    "requiredBundles": ["data", "dataViews", "embeddable", "inspector", "expressions"]
+    "requiredBundles": [
+      "data",
+      "dataViews",
+      "embeddable",
+      "inspector",
+      "expressions",
+      "visualizations"
+    ]
   }
 }

src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.test.ts

@@ -172,7 +172,9 @@ describe('getLensAttributes', () => {
               ],
               "legend": Object {
                 "isVisible": true,
+                "legendSize": "xlarge",
                 "position": "right",
+                "shouldTruncate": false,
               },
               "preferredSeriesType": "bar_stacked",
               "showCurrentTimeMarker": true,
@@ -346,7 +348,9 @@ describe('getLensAttributes', () => {
               ],
               "legend": Object {
                 "isVisible": true,
+                "legendSize": "xlarge",
                 "position": "right",
+                "shouldTruncate": false,
               },
               "preferredSeriesType": "bar_stacked",
               "showCurrentTimeMarker": true,
@@ -502,7 +506,9 @@ describe('getLensAttributes', () => {
               ],
               "legend": Object {
                 "isVisible": true,
+                "legendSize": "xlarge",
                 "position": "right",
+                "shouldTruncate": false,
               },
               "preferredSeriesType": "bar_stacked",
               "showCurrentTimeMarker": true,

src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.ts

@@ -17,6 +17,7 @@ import type {
   TypedLensByValueInput,
   Suggestion,
 } from '@kbn/lens-plugin/public';
+import { LegendSize } from '@kbn/visualizations-plugin/public';
 import { fieldSupportsBreakdown } from './field_supports_breakdown';
 
 export interface LensRequestData {
@@ -160,6 +161,8 @@ export const getLensAttributes = ({
         legend: {
           isVisible: true,
           position: 'right',
+          legendSize: LegendSize.EXTRA_LARGE,
+          shouldTruncate: false,
         },
         preferredSeriesType: 'bar_stacked',
         valueLabels: 'hide',

src/plugins/unified_histogram/tsconfig.json

@@ -23,6 +23,7 @@
     "@kbn/shared-ux-utility",
     "@kbn/ui-actions-plugin",
     "@kbn/kibana-utils-plugin",
+    "@kbn/visualizations-plugin",
   ],
   "exclude": [
     "target/**/*",