[ML] Update stylings

elastic · Dec 14, 2020 · 0c34e8a · 0c34e8a
1 parent 37ac282
commit 0c34e8a
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 41 deletions.
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/_index.scss b/x-pack/plugins/ml/public/application/datavisualizer/_index.scss
@@ -1,3 +1,3 @@
 @import 'file_based/index';
 @import 'index_based/index';
-@import "stats_datagrid/components/expanded_row";
+@import "stats_datagrid/index";
diff --git a/...tion/datavisualizer/index_based/components/field_data_card/content_types/date_content.tsx b/...tion/datavisualizer/index_based/components/field_data_card/content_types/date_content.tsx
@@ -52,6 +52,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
     {
       name: '',
       render: (summaryItem: { display: ReactNode }) => summaryItem.display,
+      width: '75px',
     },
     {
       field: 'value',
@@ -65,6 +66,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
       <EuiFlexItem>
         <ExpandedRowFieldHeader>{summaryTableTitle}</ExpandedRowFieldHeader>
         <EuiBasicTable<SummaryTableItem>
+          className={'mlDataVisualizerSummaryTable'}
           data-test-subj={'mlDateSummaryTable'}
           compressed
           items={summaryTableItems}

diff --git a/..._based/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx b/..._based/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx
@@ -88,7 +88,7 @@ export const MetricDistributionChart: FC<Props> = ({
               left: 0,
               right: 0,
               top: 0,
-              bottom: 1,
+              bottom: 0,
             },
             chartPaddings: {
               left: 0,

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
@@ -23,6 +23,7 @@ interface Props {
   stats: any;
   fieldFormat?: any;
   barColor?: 'primary' | 'secondary' | 'danger' | 'subdued' | 'accent';
+  compressed?: boolean;
 }
 
 function getPercentLabel(docCount: number, topValuesSampleSize: number): string {
@@ -34,7 +35,7 @@ function getPercentLabel(docCount: number, topValuesSampleSize: number): string
   }
 }
 
-export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
+export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed }) => {
   const {
     topValues,
     topValuesSampleSize,
@@ -48,9 +49,13 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
       {Array.isArray(topValues) &&
         topValues.map((value: any) => (
           <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
-            <EuiFlexItem grow={false} style={{ width: 100 }} className="eui-textTruncate">
+            <EuiFlexItem
+              grow={false}
+              style={{ width: compressed === true ? 100 : 300 }}
+              className="eui-textTruncate"
+            >
               <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>
@@ -68,7 +73,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
       {isTopValuesSampled === true && (
         <Fragment>
           <EuiSpacer size="xs" />
-          <EuiText size="xs" textAlign={'center'}>
+          <EuiText size="xs" textAlign={'left'}>
             <FormattedMessage
               id="xpack.ml.fieldDataCard.topValues.calculatedFromSampleDescription"
               defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard"

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
@@ -0,0 +1,38 @@
+.mlDataVisualizerFieldExpandedRow {
+  padding-left: $euiSize * 4;
+  width: 100%;
+
+  .mlFieldDataCard__valuesTitle {
+    text-transform: uppercase;
+    text-align: left;
+    color: $euiColorDarkShade;
+    font-weight: bold;
+  }
+  .mlFieldDataCard__codeContent {
+    @include euiCodeFont;
+    font-family: $euiCodeFontFamily;
+  }
+}
+
+.mlDataVisualizer {
+  .euiTableRow > .euiTableRowCell {
+    border-bottom: 0px;
+    border-top: 1px solid $euiColorLightShade;
+
+  }
+  .euiTableRow-isExpandedRow {
+
+    .euiTableRowCell{
+      background-color: transparent !important;
+      border-top: 0px;
+      border-bottom: 1px solid $euiColorLightShade;
+
+    }
+  }
+  .mlDataVisualizerSummaryTable {
+    .euiTableRow > .euiTableRowCell{
+      border-bottom: 0px;
+    }
+  }
+
+}
diff --git a/...plugins/ml/public/application/datavisualizer/stats_datagrid/components/_expanded_row.scss b/...plugins/ml/public/application/datavisualizer/stats_datagrid/components/_expanded_row.scss
@@ -1,10 +1,10 @@
 .mlDataVisualizerFieldExpandedRow {
-  padding-left: $euiSizeL * 2;
+  padding-left: $euiSize * 4;
   width: 100%;
 
   .mlFieldDataCard__valuesTitle {
     text-transform: uppercase;
-    text-align: center;
+    text-align: left;
     color: $euiColorDarkShade;
     font-weight: bold;
   }
@@ -13,3 +13,26 @@
     font-family: $euiCodeFontFamily;
   }
 }
+
+.mlDataVisualizer {
+  .euiTableRow > .euiTableRowCell {
+    border-bottom: 0px;
+    border-top: 1px solid $euiColorLightShade;
+
+  }
+  .euiTableRow-isExpandedRow {
+
+    .euiTableRowCell{
+      background-color: transparent !important;
+      border-top: 0px;
+      border-bottom: 1px solid $euiColorLightShade;
+
+    }
+  }
+  .mlDataVisualizerSummaryTable {
+    .euiTableRow > .euiTableRowCell{
+      border-bottom: 0px;
+    }
+  }
+
+}
diff --git a/...ation/datavisualizer/stats_datagrid/components/field_data_expanded_row/number_content.tsx b/...ation/datavisualizer/stats_datagrid/components/field_data_expanded_row/number_content.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, Fragment, ReactNode, useEffect, useState } from 'react';
+import React, { FC, ReactNode, useEffect, useState } from 'react';
 import { EuiBasicTable, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -22,14 +22,16 @@ import { TopValues } from '../../../index_based/components/field_data_card/top_v
 import { ExpandedRowFieldHeader } from '../expanded_row_field_header';
 
 const METRIC_DISTRIBUTION_CHART_WIDTH = 325;
-const METRIC_DISTRIBUTION_CHART_HEIGHT = 210;
+const METRIC_DISTRIBUTION_CHART_HEIGHT = 200;
 
 interface SummaryTableItem {
   function: string;
   display: ReactNode;
   value: number | string | undefined | null;
 }
 
+export const VerticalSpacer = () => <div style={{ width: 16 }} />;
+
 export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
   const { stats, fieldFormat } = config;
 
@@ -80,6 +82,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
     {
       name: '',
       render: (summaryItem: { display: ReactNode }) => summaryItem.display,
+      width: '75px',
     },
     {
       field: 'value',
@@ -99,16 +102,17 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
       <EuiFlexItem>
         <ExpandedRowFieldHeader>{summaryTableTitle}</ExpandedRowFieldHeader>
         <EuiBasicTable<SummaryTableItem>
+          className={'mlDataVisualizerSummaryTable'}
           compressed
           items={summaryTableItems}
           columns={summaryTableColumns}
           tableCaption={summaryTableTitle}
-          tableLayout="auto"
         />
       </EuiFlexItem>
+      <VerticalSpacer />
       {stats && (
         <EuiFlexItem>
-          <EuiFlexGroup direction={'column'} alignItems={'center'} data-test-subj={'mlTopValues'}>
+          <EuiFlexGroup direction={'column'} data-test-subj={'mlTopValues'}>
             <EuiFlexItem grow={false}>
               <ExpandedRowFieldHeader>
                 <FormattedMessage
@@ -118,18 +122,21 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
               </ExpandedRowFieldHeader>
             </EuiFlexItem>
             <EuiFlexItem>
-              <TopValues stats={stats} fieldFormat={fieldFormat} barColor="primary" />
+              <TopValues
+                stats={stats}
+                fieldFormat={fieldFormat}
+                barColor="primary"
+                compressed={true}
+              />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
       )}
+      <VerticalSpacer />
+
       {distribution && (
         <EuiFlexItem>
-          <EuiFlexGroup
-            direction={'column'}
-            alignItems={'center'}
-            data-test-subj={'mlMetricDistribution'}
-          >
+          <EuiFlexGroup direction={'column'} data-test-subj={'mlMetricDistribution'}>
             <EuiFlexItem>
               <ExpandedRowFieldHeader>
                 <FormattedMessage
@@ -139,30 +146,26 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
               </ExpandedRowFieldHeader>
             </EuiFlexItem>
 
-            <Fragment>
-              <EuiFlexGroup justifyContent="spaceAround" gutterSize="xs">
-                <EuiFlexItem grow={false}>
-                  <EuiText size="xs">
-                    <FormattedMessage
-                      id="xpack.ml.fieldDataCardExpandedRow.numberContent.displayingPercentilesLabel"
-                      defaultMessage="Displaying {minPercent} - {maxPercent} percentiles"
-                      values={{
-                        minPercent: numberAsOrdinal(distribution.minPercentile),
-                        maxPercent: numberAsOrdinal(distribution.maxPercentile),
-                      }}
-                    />
-                  </EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <EuiFlexItem style={{ width: '100%' }}>
-                <MetricDistributionChart
-                  width={METRIC_DISTRIBUTION_CHART_WIDTH}
-                  height={METRIC_DISTRIBUTION_CHART_HEIGHT}
-                  chartData={distributionChartData}
-                  fieldFormat={fieldFormat}
+            <EuiFlexItem style={{ width: '100%' }}>
+              <MetricDistributionChart
+                width={METRIC_DISTRIBUTION_CHART_WIDTH}
+                height={METRIC_DISTRIBUTION_CHART_HEIGHT}
+                chartData={distributionChartData}
+                fieldFormat={fieldFormat}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiText size="xs">
+                <FormattedMessage
+                  id="xpack.ml.fieldDataCardExpandedRow.numberContent.displayingPercentilesLabel"
+                  defaultMessage="Displaying {minPercent} - {maxPercent} percentiles"
+                  values={{
+                    minPercent: numberAsOrdinal(distribution.minPercentile),
+                    maxPercent: numberAsOrdinal(distribution.maxPercentile),
+                  }}
                 />
-              </EuiFlexItem>
-            </Fragment>
+              </EuiText>
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
       )}