chore(rca): Hide X axis on ESQL item (elastic#192696)

rshen91 · Sep 16, 2024 · 684da23 · 684da23
1 parent 4d48881
commit 684da23
Showing 1 changed file with 11 additions and 17 deletions.
diff --git a/...gins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx b/...gins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
@@ -4,8 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-import { css } from '@emotion/css';
+import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import type { ESQLSearchResponse } from '@kbn/es-types';
 import { i18n } from '@kbn/i18n';
@@ -123,29 +122,24 @@ export function EsqlWidget({ suggestion, dataView, esqlQuery, dateHistogramResul
     [dataView, lens, dateHistogramResults]
   );
 
+  // in the case of a lnsDatatable, we want to render the preview of the histogram and not the datable (input) itself
   if (input.attributes.visualizationType === 'lnsDatatable') {
     let innerElement: React.ReactElement;
     if (previewInput.error) {
       innerElement = <ErrorMessage error={previewInput.error} />;
     } else if (previewInput.value) {
-      innerElement = <lens.EmbeddableComponent {...previewInput.value} />;
+      innerElement = (
+        <lens.EmbeddableComponent
+          {...previewInput.value}
+          style={{ height: 128 }}
+          overrides={{ axisX: { hide: true } }}
+        />
+      );
     } else {
       innerElement = <EuiLoadingSpinner size="s" />;
     }
-    return (
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem
-          grow={false}
-          className={css`
-            > div {
-              height: 128px;
-            }
-          `}
-        >
-          {innerElement}
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
+
+    return <EuiFlexItem grow={true}>{innerElement}</EuiFlexItem>;
   }
 
   return (