From 5e0a52c4a24c4ee4324ab424489a6203e30f7f7a Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Thu, 11 Jul 2024 11:44:26 +0200
Subject: [PATCH] [ES|QL] [Unified Histogram] Changes the ratio to be rectangle
 (#187981)

## Summary

<img width="1250" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/9a41566c-76b5-4c32-97c1-50a3b57a51f3">


We had a chat with @gvnmagni about the ratio of the metric in Discover.
The square one is okeish but not for multi values.

We decided to change it in rectangle to be closer to how it will look in
a dashboard
---
 .../public/chart/histogram.tsx                | 19 +++----------------
 1 file changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/plugins/unified_histogram/public/chart/histogram.tsx b/src/plugins/unified_histogram/public/chart/histogram.tsx
index 50c8f7242c589..70e1f039bc3ba 100644
--- a/src/plugins/unified_histogram/public/chart/histogram.tsx
+++ b/src/plugins/unified_histogram/public/chart/histogram.tsx
@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { useEuiTheme, useResizeObserver } from '@elastic/eui';
+import { useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { DefaultInspectorAdapters, Datatable } from '@kbn/expressions-plugin/common';
 import type { IKibanaSearchResponse } from '@kbn/search-types';
@@ -106,7 +106,6 @@ export function Histogram({
   abortController,
 }: HistogramProps) {
   const [bucketInterval, setBucketInterval] = useState<UnifiedHistogramBucketInterval>();
-  const [chartSize, setChartSize] = useState('100%');
   const { timeRangeText, timeRangeDisplay } = useTimeRange({
     uiSettings,
     bucketInterval,
@@ -115,19 +114,8 @@ export function Histogram({
     isPlainRecord,
     timeField: dataView.timeFieldName,
   });
-  const chartRef = useRef<HTMLDivElement | null>(null);
-  const { height: containerHeight, width: containerWidth } = useResizeObserver(chartRef.current);
   const { attributes } = visContext;
 
-  useEffect(() => {
-    if (attributes.visualizationType === 'lnsMetric') {
-      const size = containerHeight < containerWidth ? containerHeight : containerWidth;
-      setChartSize(`${size}px`);
-    } else {
-      setChartSize('100%');
-    }
-  }, [attributes, containerHeight, containerWidth]);
-
   const onLoad = useStableCallback(
     (
       isLoading: boolean,
@@ -197,7 +185,7 @@ export function Histogram({
     }
 
     & .lnsExpressionRenderer {
-      width: ${chartSize};
+      width: ${attributes.visualizationType === 'lnsMetric' ? '90$' : '100%'};
       margin: auto;
       box-shadow: ${attributes.visualizationType === 'lnsMetric' ? boxShadow : 'none'};
     }
@@ -222,7 +210,6 @@ export function Histogram({
         data-request-data={requestData}
         data-suggestion-type={visContext.suggestionType}
         css={chartCss}
-        ref={chartRef}
       >
         <lens.EmbeddableComponent
           {...lensProps}