[Lens] Add metric Viz config options, title position and sizing (#124124

) * Add lens config options * wip * Pr feedback * simplify align * improve typing * update typing * PR feedback * Design PR feedback * snapshot * update snap * design suggestions * Use bottom as default position for title and some other small refactoring * Fix test * Fix shapshot * Fix shapshot Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Uladzislau Lasitsa <[email protected]>
elastic · Feb 16, 2022 · b7b5088 · b7b5088
1 parent cf25ac3
commit b7b5088
Show file tree

Hide file tree

Showing 15 changed files with 493 additions and 36 deletions.
diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts
@@ -35,9 +35,30 @@ export const metricChart: ExpressionFunctionDefinition<
     title: {
       types: ['string'],
       help: i18n.translate('xpack.lens.metric.title.help', {
-        defaultMessage: 'The chart title.',
+        defaultMessage: 'The visualization title.',
       }),
     },
+    size: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.size.help', {
+        defaultMessage: 'The visualization text size.',
+      }),
+      default: 'xl',
+    },
+    titlePosition: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titlePosition.help', {
+        defaultMessage: 'The visualization title position.',
+      }),
+      default: 'bottom',
+    },
+    textAlign: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.textAlignPosition.help', {
+        defaultMessage: 'The visualization text alignment position.',
+      }),
+      default: 'center',
+    },
     description: {
       types: ['string'],
       help: '',

diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/types.ts b/x-pack/plugins/lens/common/expressions/metric_chart/types.ts
@@ -18,6 +18,9 @@ export interface MetricState {
   layerType: LayerType;
   colorMode?: ColorMode;
   palette?: PaletteOutput<CustomPaletteParams>;
+  titlePosition?: 'top' | 'bottom';
+  size?: string;
+  textAlign?: 'left' | 'right' | 'center';
 }
 
 export interface MetricConfig extends Omit<MetricState, 'palette' | 'colorMode'> {

diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx
@@ -53,6 +53,7 @@ describe('AutoScale', () => {
           style="display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5"
         >
           <div
+            class="lnsMetricExpression__containerScale"
             style="transform:scale(0)"
           >
             <h1>

diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx
@@ -7,11 +7,16 @@
 
 import React from 'react';
 import { throttle } from 'lodash';
+import classNames from 'classnames';
 import { EuiResizeObserver } from '@elastic/eui';
+import { MetricState } from '../../common/expressions';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode | React.ReactNode[];
   minScale?: number;
+  size?: MetricState['size'];
+  titlePosition?: MetricState['titlePosition'];
+  textAlign?: MetricState['textAlign'];
 }
 
 interface State {
@@ -56,7 +61,7 @@ export class AutoScale extends React.Component<Props, State> {
   };
 
   render() {
-    const { children, minScale, ...rest } = this.props;
+    const { children, minScale, size, textAlign, titlePosition, ...rest } = this.props;
     const { scale } = this.state;
     const style = this.props.style || {};
 
@@ -85,6 +90,12 @@ export class AutoScale extends React.Component<Props, State> {
               style={{
                 transform: `scale(${scale})`,
               }}
+              className={classNames('lnsMetricExpression__containerScale', {
+                alignLeft: textAlign === 'left',
+                alignRight: textAlign === 'right',
+                alignCenter: textAlign === 'center',
+                [`titleSize${size?.toUpperCase()}`]: Boolean(size),
+              })}
             >
               {children}
             </div>

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.scss b/x-pack/plugins/lens/public/metric_visualization/expression.scss
@@ -8,14 +8,80 @@
   text-align: center;
 
   .lnsMetricExpression__value {
-    font-size: $euiSizeXXL * 2;
+    font-size: $euiFontSizeXXL * 2;
     font-weight: $euiFontWeightSemiBold;
     border-radius: $euiBorderRadius;
-    padding: 0 $euiSize;
   }
 
   .lnsMetricExpression__title {
-    font-size: $euiSizeXL;
+    font-size: $euiFontSizeXXL;
     color: $euiTextColor;
+    &.reverseOrder {
+      order: 1;
+    }
   }
-}
+
+  .lnsMetricExpression__containerScale {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    &.alignLeft {
+      align-items: start;
+    }
+    &.alignRight {
+      align-items: end;
+    }
+    &.alignCenter {
+      align-items: center;
+    }
+    &.titleSizeXS {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeXS;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeXS * 2;
+      }
+    }
+    &.titleSizeS {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeS;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeM * 2.25;
+      }
+    }
+    &.titleSizeM {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeM;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeL * 2;
+      }
+    }
+    &.titleSizeL {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeL;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeXL * 2;
+      }
+    }
+    &.titleSizeXL {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeXL;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeXXL * 2;
+      }
+    }
+
+    &.titleSizeXXL {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeXXL;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeXXL * 3;
+      }
+    }
+  }
+}
diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
@@ -99,18 +99,18 @@ describe('metric_expression', () => {
           <AutoScale
             key="3"
           >
-            <div
-              className="lnsMetricExpression__value"
-              data-test-subj="lns_metric_value"
-            >
-              3
-            </div>
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
             >
               My fanci metric chart
             </div>
+            <div
+              className="lnsMetricExpression__value"
+              data-test-subj="lns_metric_value"
+            >
+              3
+            </div>
           </AutoScale>
         </VisualizationContainer>
       `);
@@ -137,18 +137,18 @@ describe('metric_expression', () => {
           <AutoScale
             key="last"
           >
-            <div
-              className="lnsMetricExpression__value"
-              data-test-subj="lns_metric_value"
-            >
-              last
-            </div>
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
             >
               My fanci metric chart
             </div>
+            <div
+              className="lnsMetricExpression__value"
+              data-test-subj="lns_metric_value"
+            >
+              last
+            </div>
           </AutoScale>
         </VisualizationContainer>
       `);
@@ -174,18 +174,18 @@ describe('metric_expression', () => {
           <AutoScale
             key="3"
           >
-            <div
-              className="lnsMetricExpression__value"
-              data-test-subj="lns_metric_value"
-            >
-              3
-            </div>
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
             >
               My fanci metric chart
             </div>
+            <div
+              className="lnsMetricExpression__value"
+              data-test-subj="lns_metric_value"
+            >
+              3
+            </div>
           </AutoScale>
         </VisualizationContainer>
       `);
@@ -292,18 +292,18 @@ describe('metric_expression', () => {
           <AutoScale
             key="0"
           >
-            <div
-              className="lnsMetricExpression__value"
-              data-test-subj="lns_metric_value"
-            >
-              0
-            </div>
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
             >
               My fanci metric chart
             </div>
+            <div
+              className="lnsMetricExpression__value"
+              data-test-subj="lns_metric_value"
+            >
+              0
+            </div>
           </AutoScale>
         </VisualizationContainer>
       `);

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
@@ -9,6 +9,7 @@ import './expression.scss';
 import { I18nProvider } from '@kbn/i18n-react';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 import { IUiSettingsClient, ThemeServiceStart } from 'kibana/public';
 import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
 import type {
@@ -109,7 +110,7 @@ export function MetricChart({
   formatFactory,
   uiSettings,
 }: MetricChartProps & { formatFactory: FormatFactory; uiSettings: IUiSettingsClient }) {
-  const { metricTitle, accessor, mode, colorMode, palette } = args;
+  const { metricTitle, accessor, mode, colorMode, palette, titlePosition, textAlign, size } = args;
   const firstTable = Object.values(data.tables)[0];
 
   const getEmptyState = () => (
@@ -144,19 +145,21 @@ export function MetricChart({
 
   return (
     <VisualizationContainer className="lnsMetricExpression__container" style={color}>
-      <AutoScale key={value}>
-        <div data-test-subj="lns_metric_value" className="lnsMetricExpression__value">
-          {value}
-        </div>
+      <AutoScale key={value} titlePosition={titlePosition} textAlign={textAlign} size={size}>
         {mode === 'full' && (
           <div
             data-test-subj="lns_metric_title"
-            className="lnsMetricExpression__title"
+            className={classNames('lnsMetricExpression__title', {
+              reverseOrder: ['bottom', 'right'].includes(titlePosition ?? ''),
+            })}
             style={colorMode === ColorMode.Background ? color : undefined}
           >
             {metricTitle}
           </div>
         )}
+        <div data-test-subj="lns_metric_value" className="lnsMetricExpression__value">
+          {value}
+        </div>
       </AutoScale>
     </VisualizationContainer>
   );

diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButtonGroup } from '@elastic/eui';
+import { MetricState } from '../../../common/expressions';
+
+export interface TitlePositionProps {
+  state: MetricState;
+  setState: (newState: MetricState) => void;
+}
+
+const alignButtonIcons = [
+  {
+    id: `left`,
+    label: i18n.translate('xpack.lens.metricChart.alignLabel.left', {
+      defaultMessage: 'Align left',
+    }),
+    iconType: 'editorAlignLeft',
+  },
+  {
+    id: `center`,
+    label: i18n.translate('xpack.lens.metricChart.alignLabel.center', {
+      defaultMessage: 'Align center',
+    }),
+    iconType: 'editorAlignCenter',
+  },
+  {
+    id: `right`,
+    label: i18n.translate('xpack.lens.metricChart.alignLabel.right', {
+      defaultMessage: 'Align right',
+    }),
+    iconType: 'editorAlignRight',
+  },
+];
+
+export const AlignOptions: React.FC<TitlePositionProps> = ({ state, setState }) => {
+  return (
+    <EuiButtonGroup
+      legend={i18n.translate('xpack.lens.metricChart.titleAlignLabel', {
+        defaultMessage: 'Align',
+      })}
+      options={alignButtonIcons}
+      idSelected={state.textAlign ?? 'center'}
+      onChange={(id) => {
+        setState({ ...state, textAlign: id as MetricState['textAlign'] });
+      }}
+      isIconOnly
+      buttonSize="compressed"
+    />
+  );
+};