Make height uniform, center alignment, fix map and keyword map not sa…

…me size Move styling
KOTungseth · Sep 16, 2021 · 8fc42e2 · 8fc42e2
1 parent ed496bf
commit 8fc42e2
Show file tree

Hide file tree

Showing 14 changed files with 67 additions and 52 deletions.
diff --git a/...public/application/common/components/expanded_row/geo_point_content/geo_point_content.tsx b/...public/application/common/components/expanded_row/geo_point_content/geo_point_content.tsx
@@ -63,9 +63,7 @@ export const GeoPointContent: FC<FieldDataRowProps> = ({ config }) => {
     <ExpandedRowContent dataTestSubj={'dataVisualizerGeoPointContent'}>
       <DocumentStatsTable config={config} />
       {formattedResults && Array.isArray(formattedResults.examples) && (
-        <EuiFlexItem>
-          <ExamplesList examples={formattedResults.examples} />
-        </EuiFlexItem>
+        <ExamplesList examples={formattedResults.examples} />
       )}
       {formattedResults && Array.isArray(formattedResults.layerList) && (
         <EuiFlexItem

diff --git a/.../common/components/expanded_row/geo_point_content_with_map/geo_point_content_with_map.tsx b/.../common/components/expanded_row/geo_point_content_with_map/geo_point_content_with_map.tsx
@@ -64,7 +64,7 @@ export const GeoPointContentWithMap: FC<{
     <ExpandedRowContent dataTestSubj={'dataVisualizerIndexBasedMapContent'}>
       <DocumentStatsTable config={config} />
       <ExamplesList examples={stats.examples} />
-      <EuiFlexItem className={'dataVisualizerPanelWrapper'} style={{ minHeight: 300 }}>
+      <EuiFlexItem className={'dataVisualizerPanelWrapper dataVisualizerMapWrapper'}>
         <EmbeddedMapComponent layerList={layerList} />
       </EuiFlexItem>
     </ExpandedRowContent>

diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/_index.scss b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/_index.scss
@@ -4,7 +4,6 @@
 
 $panelWidthS:     300px;
 $panelWidthL:     600px;
-$panelWidthXL:    900px;
 
 .dataVisualizerFieldExpandedRow {
   padding-left: $euiSize * 4;
@@ -70,18 +69,20 @@ $panelWidthXL:    900px;
   .dataVisualizerSummaryTableWrapper {
     min-width: $panelWidthS;
     max-width: $panelWidthS;
-    max-height: 120px;
   }
 
   .dataVisualizerMapWrapper {
-    min-height: 300px;
-    min-width: $panelWidthS;
-    max-width: $panelWidthS;
+    min-height: 200px;
+    min-width: 450px;
   }
 
   .dataVisualizerTopValuesWrapper {
     min-width: $panelWidthS;
-    max-width: $panelWidthL;
+    width: fit-content;
+
+    &.wrapperSize--compressed {
+      max-width: 450px;
+    }
   }
 
   .dataVisualizerUniformPanel {
@@ -92,15 +93,12 @@ $panelWidthXL:    900px;
   .dataVisualizerPanelWrapper {
     border-radius: $euiBorderRadius;
     border: 1px solid $euiBorderColor;
-    padding: 6px;
+    padding: 4px;
     margin: 3px 12px 12px 0;
-    min-height: 120px;
-    height: min-content;
   }
 
   .dataVisualizerTextContent {
-    min-width: $panelWidthS;
-    max-width: $panelWidthXL;
+    min-width: 450px;
   }
 
 }
diff --git a/...components/stats_table/components/expanded_row_field_header/expanded_row_field_header.tsx b/...components/stats_table/components/expanded_row_field_header/expanded_row_field_header.tsx
@@ -9,7 +9,12 @@ import { EuiText } from '@elastic/eui';
 import React from 'react';
 
 export const ExpandedRowFieldHeader = ({ children }: { children: React.ReactNode }) => (
-  <EuiText size="xs" color={'subdued'} className={'fieldDataCard__valuesTitle'}>
+  <EuiText
+    size="xs"
+    color={'subdued'}
+    className={'fieldDataCard__valuesTitle'}
+    textAlign={'center'}
+  >
     {children}
   </EuiText>
 );
diff --git a/...tion/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx b/...tion/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx
@@ -71,6 +71,7 @@ export const BooleanContent: FC<FieldDataRowProps> = ({ config }) => {
       name: '',
       render: (summaryItem: { display: ReactNode }) => summaryItem.display,
       width: '75px',
+      align: 'right',
     },
     {
       field: 'value',

diff --git a/...ation/common/components/stats_table/components/field_data_expanded_row/choropleth_map.tsx b/...ation/common/components/stats_table/components/field_data_expanded_row/choropleth_map.tsx
@@ -105,14 +105,13 @@ export const ChoroplethMap: FC<Props> = ({ stats, suggestion }) => {
   return (
     <EuiFlexItem
       data-test-subj={'fileDataVisualizerChoroplethMapTopValues'}
-      className={'dataVisualizerPanelWrapper'}
-      style={{ minHeight: 300 }}
+      className={'dataVisualizerPanelWrapper dataVisualizerMapWrapper'}
     >
       <EmbeddedMapComponent layerList={layerList} />
       {isTopValuesSampled === true && (
         <>
           <EuiSpacer size="xs" />
-          <EuiText size="xs" textAlign={'left'}>
+          <EuiText size="xs" textAlign={'center'}>
             <FormattedMessage
               id="xpack.dataVisualizer.dataGrid.fieldExpandedRow.choroplethMapTopValues.calculatedFromSampleDescription"
               defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard"

diff --git a/...ication/common/components/stats_table/components/field_data_expanded_row/date_content.tsx b/...ication/common/components/stats_table/components/field_data_expanded_row/date_content.tsx
@@ -62,6 +62,7 @@ export const DateContent: FC<FieldDataRowProps> = ({ config }) => {
       name: '',
       render: (summaryItem: { display: ReactNode }) => summaryItem.display,
       width: '75px',
+      align: 'right',
     },
     {
       field: 'value',

diff --git a/...ation/common/components/stats_table/components/field_data_expanded_row/document_stats.tsx b/...ation/common/components/stats_table/components/field_data_expanded_row/document_stats.tsx
@@ -18,6 +18,7 @@ const metaTableColumns = [
     name: '',
     render: (metaItem: { display: ReactNode }) => metaItem.display,
     width: '75px',
+    align: 'right',
   },
   {
     field: 'value',

diff --git a/...common/components/stats_table/components/field_data_expanded_row/expanded_row_content.tsx b/...common/components/stats_table/components/field_data_expanded_row/expanded_row_content.tsx
@@ -18,6 +18,7 @@ export const ExpandedRowContent: FC<Props> = ({ children, dataTestSubj }) => {
       data-test-subj={dataTestSubj}
       gutterSize={'s'}
       className={'dataVisualizerExpandedRow'}
+      responsive={true}
     >
       {children}
     </EuiFlexGroup>

diff --git a/...plication/common/components/stats_table/components/field_data_expanded_row/ip_content.tsx b/...plication/common/components/stats_table/components/field_data_expanded_row/ip_content.tsx
@@ -21,7 +21,7 @@ export const IpContent: FC<FieldDataRowProps> = ({ config }) => {
   return (
     <ExpandedRowContent dataTestSubj={'dataVisualizerIPContent'}>
       <DocumentStatsTable config={config} />
-      <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" />
+      <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" compressed={true} />
     </ExpandedRowContent>
   );
 };
diff --git a/...tion/common/components/stats_table/components/field_data_expanded_row/keyword_content.tsx b/...tion/common/components/stats_table/components/field_data_expanded_row/keyword_content.tsx
@@ -44,7 +44,12 @@ export const KeywordContent: FC<FieldDataRowProps> = ({ config }) => {
   return (
     <ExpandedRowContent dataTestSubj={'dataVisualizerKeywordContent'}>
       <DocumentStatsTable config={config} />
-      <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" />
+      <TopValues
+        stats={stats}
+        fieldFormat={fieldFormat}
+        barColor="secondary"
+        compressed={EMSSuggestion !== null}
+      />
 
       {EMSSuggestion && stats && <ChoroplethMap stats={stats} suggestion={EMSSuggestion} />}
     </ExpandedRowContent>

diff --git a/...ation/common/components/stats_table/components/field_data_expanded_row/number_content.tsx b/...ation/common/components/stats_table/components/field_data_expanded_row/number_content.tsx
@@ -84,6 +84,7 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config }) => {
       name: '',
       render: (summaryItem: { display: ReactNode }) => summaryItem.display,
       width: '75px',
+      align: 'right',
     },
     {
       field: 'value',
@@ -112,7 +113,6 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config }) => {
           data-test-subj={'dataVisualizerNumberSummaryTable'}
         />
       </EuiFlexItem>
-
       {stats && (
         <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" compressed={true} />
       )}
@@ -139,7 +139,7 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config }) => {
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiText size="xs">
+            <EuiText size="xs" textAlign={'center'}>
               <FormattedMessage
                 id="xpack.dataVisualizer.dataGrid.fieldExpandedRow.numberContent.displayingPercentilesLabel"
                 defaultMessage="Displaying {minPercent} - {maxPercent} percentiles"

diff --git a/.../plugins/data_visualizer/public/application/common/components/top_values/_top_values.scss b/.../plugins/data_visualizer/public/application/common/components/top_values/_top_values.scss
@@ -4,16 +4,17 @@
 
 .topValuesValueLabelContainer {
   margin-right: $euiSizeM;
-  &.topValuesValueLabelContainer--small {
-    width:70px;
-  }
 
-  &.topValuesValueLabelContainer--large {
-    width: 300px;
-  }
+  //&.topValuesValueLabelContainer--small {
+  //  width:250px;
+  //}
+  //
+  //&.topValuesValueLabelContainer--large {
+  //  width: 250px;
+  //}
 }
 
 .topValuesPercentLabelContainer {
   margin-left: $euiSizeM;
-  width:70px;
+  min-width:50px;
 }
diff --git a/...ck/plugins/data_visualizer/public/application/common/components/top_values/top_values.tsx b/...ck/plugins/data_visualizer/public/application/common/components/top_values/top_values.tsx
@@ -51,7 +51,11 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
   return (
     <EuiFlexItem
       data-test-subj={'dataVisualizerFieldDataTopValues'}
-      className={'dataVisualizerPanelWrapper dataVisualizerTopValuesWrapper'}
+      className={classNames(
+        'dataVisualizerPanelWrapper',
+        'dataVisualizerTopValuesWrapper',
+        `wrapperSize--${compressed === true ? 'compressed' : ''}`
+      )}
     >
       <ExpandedRowFieldHeader>
         <FormattedMessage
@@ -67,44 +71,45 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
         {Array.isArray(topValues) &&
           topValues.map((value) => (
             <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
+              {progressBarMax !== undefined && (
+                <EuiFlexItem
+                  grow={false}
+                  className={classNames('eui-textTruncate', 'topValuesPercentLabelContainer')}
+                >
+                  <EuiText size="xs" textAlign="right" color="subdued">
+                    {getPercentLabel(value.doc_count, progressBarMax)}
+                  </EuiText>
+                </EuiFlexItem>
+              )}
+              <EuiFlexItem data-test-subj="dataVisualizerFieldDataTopValueBar" grow={false}>
+                <EuiProgress
+                  value={value.doc_count}
+                  max={progressBarMax}
+                  color={barColor}
+                  size="m"
+                  style={{ width: 80 }}
+                />
+              </EuiFlexItem>
               <EuiFlexItem
-                grow={false}
+                grow={true}
                 className={classNames(
                   'eui-textTruncate',
                   'topValuesValueLabelContainer',
                   `topValuesValueLabelContainer--${compressed === true ? 'small' : 'large'}`
                 )}
               >
                 <EuiToolTip content={kibanaFieldFormat(value.key, fieldFormat)} position="right">
-                  <EuiText size="xs" textAlign={'right'} color="subdued">
+                  <EuiText size="xs" textAlign={'left'} color="subdued">
                     {kibanaFieldFormat(value.key, fieldFormat)}
                   </EuiText>
                 </EuiToolTip>
               </EuiFlexItem>
-              <EuiFlexItem data-test-subj="dataVisualizerFieldDataTopValueBar">
-                <EuiProgress
-                  value={value.doc_count}
-                  max={progressBarMax}
-                  color={barColor}
-                  size="m"
-                />
-              </EuiFlexItem>
-              {progressBarMax !== undefined && (
-                <EuiFlexItem
-                  grow={false}
-                  className={classNames('eui-textTruncate', 'topValuesPercentLabelContainer')}
-                >
-                  <EuiText size="xs" textAlign="left" color="subdued">
-                    {getPercentLabel(value.doc_count, progressBarMax)}
-                  </EuiText>
-                </EuiFlexItem>
-              )}
             </EuiFlexGroup>
           ))}
         {isTopValuesSampled === true && (
           <Fragment>
             <EuiSpacer size="xs" />
-            <EuiText size="xs" textAlign={'left'}>
+            <EuiText size="xs" textAlign={'center'}>
               <FormattedMessage
                 id="xpack.dataVisualizer.dataGrid.field.topValues.calculatedFromSampleDescription"
                 defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard"