[ML] Add padding to percent value

elastic · Dec 15, 2020 · c16d60d · c16d60d
1 parent 4bbcbf0
commit c16d60d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/...c/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss b/...c/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss
@@ -58,7 +58,6 @@
 
   .mlFieldDataCard__codeContent {
     @include euiCodeFont;
-    font-family: $euiCodeFontFamily;
   }
 
   .mlFieldDataCard__stats {

diff --git a/...ication/datavisualizer/index_based/components/field_data_card/top_values/_top_values.scss b/...ication/datavisualizer/index_based/components/field_data_card/top_values/_top_values.scss
@@ -1,13 +1,16 @@
 
-.mlTopValuesLabelContainer {
+.mlTopValuesValueLabelContainer {
   padding-right: $euiSizeM;
-
-  &.mlTopValuesLabelContainer--small {
-    width: 50px !important;
+  &.mlTopValuesValueLabelContainer--small {
+    width:70px;
   }
 
-  &.mlTopValuesLabelContainer--large {
-    width: 200px !important;
+  &.mlTopValuesValueLabelContainer--large {
+    width: 200px;
   }
+}
 
+.mlTopValuesPercentLabelContainer {
+  padding-left: $euiSizeM;
+  width:70px;
 }
diff --git a/...plication/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx b/...plication/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx
@@ -54,8 +54,8 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
               grow={false}
               className={classNames(
                 'eui-textTruncate',
-                'mlTopValuesLabelContainer',
-                `mlTopValuesLabelContainer--${compressed === true ? 'small' : 'large'}`
+                'mlTopValuesValueLabelContainer',
+                `mlTopValuesValueLabelContainer--${compressed === true ? 'small' : 'large'}`
               )}
             >
               <EuiToolTip content={kibanaFieldFormat(value.key, fieldFormat)} position="right">
@@ -67,7 +67,10 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
             <EuiFlexItem data-test-subj="mlFieldDataCardTopValueBar">
               <EuiProgress value={value.doc_count} max={progressBarMax} color={barColor} size="m" />
             </EuiFlexItem>
-            <EuiFlexItem grow={false} style={{ width: 70 }} className="eui-textTruncate">
+            <EuiFlexItem
+              grow={false}
+              className={classNames('eui-textTruncate', 'mlTopValuesPercentLabelContainer')}
+            >
               <EuiText size="xs" textAlign="left" color="subdued">
                 {getPercentLabel(value.doc_count, progressBarMax)}
               </EuiText>

diff --git a/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/_index.scss b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/_index.scss
@@ -10,7 +10,6 @@
   }
   .mlFieldDataCard__codeContent {
     @include euiCodeFont;
-    font-family: $euiCodeFontFamily;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,6 @@ @@
       }
       .mlFieldDataCard__codeContent {
         @include euiCodeFont;
-        font-family: $euiCodeFontFamily;
       }
     }
@@ Expand Down @@