[Lens ] Preview metric (#43755)

elastic · Sep 4, 2019 · b443d3e · b443d3e
1 parent 426d9d7
commit b443d3e
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 22 deletions.
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.scss b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.scss
@@ -56,4 +56,5 @@ $lnsSuggestionWidth: 150px;
 .lnsSuggestionChartWrapper {
   height: $lnsSuggestionHeight - $euiSize;
   pointer-events: none;
+  margin: 0 $euiSizeS;
 }
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/auto_scale.test.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/auto_scale.test.tsx
@@ -25,10 +25,14 @@ describe('AutoScale', () => {
       expect(computeScale(mockElement(2000, 2000), mockElement(1000, 1000))).toBe(1);
     });
 
-    it('is never under 0.3', () => {
+    it('is never under 0.3 in default case', () => {
       expect(computeScale(mockElement(2000, 1000), mockElement(1000, 10000))).toBe(0.3);
     });
 
+    it('is never under specified min scale if specified', () => {
+      expect(computeScale(mockElement(2000, 1000), mockElement(1000, 10000), 0.1)).toBe(0.1);
+    });
+
     it('is the lesser of the x or y scale', () => {
       expect(computeScale(mockElement(2000, 2000), mockElement(3000, 5000))).toBe(0.4);
       expect(computeScale(mockElement(2000, 3000), mockElement(4000, 3200))).toBe(0.5);

diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/auto_scale.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/auto_scale.tsx
@@ -10,6 +10,7 @@ import { EuiResizeObserver } from '@elastic/eui';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode | React.ReactNode[];
+  minScale?: number;
 }
 
 interface State {
@@ -25,7 +26,7 @@ export class AutoScale extends React.Component<Props, State> {
     super(props);
 
     this.scale = _.throttle(() => {
-      const scale = computeScale(this.parent, this.child);
+      const scale = computeScale(this.parent, this.child, this.props.minScale);
 
       // Prevent an infinite render loop
       if (this.state.scale !== scale) {
@@ -54,15 +55,15 @@ export class AutoScale extends React.Component<Props, State> {
   };
 
   render() {
-    const { children } = this.props;
+    const { children, minScale, ...rest } = this.props;
     const { scale } = this.state;
     const style = this.props.style || {};
 
     return (
       <EuiResizeObserver onResize={this.scale}>
         {resizeRef => (
           <div
-            {...this.props}
+            {...rest}
             ref={el => {
               this.setParent(el);
               resizeRef(el);
@@ -97,23 +98,24 @@ interface ClientDimensionable {
   clientHeight: number;
 }
 
+const MAX_SCALE = 1;
+const MIN_SCALE = 0.3;
+
 /**
  * computeScale computes the ratio by which the child needs to shrink in order
  * to fit into the parent. This function is only exported for testing purposes.
  */
 export function computeScale(
   parent: ClientDimensionable | null,
-  child: ClientDimensionable | null
+  child: ClientDimensionable | null,
+  minScale: number = MIN_SCALE
 ) {
-  const MAX_SCALE = 1;
-  const MIN_SCALE = 0.3;
-
   if (!parent || !child) {
     return 1;
   }
 
   const scaleX = parent.clientWidth / child.clientWidth;
   const scaleY = parent.clientHeight / child.clientHeight;
 
-  return Math.max(Math.min(MAX_SCALE, Math.min(scaleX, scaleY)), MIN_SCALE);
+  return Math.max(Math.min(MAX_SCALE, Math.min(scaleX, scaleY)), minScale);
 }
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.test.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.test.tsx
@@ -26,6 +26,7 @@ function sampleArgs() {
     accessor: 'a',
     layerId: 'l1',
     title: 'My fanci metric chart',
+    mode: 'full',
   };
 
   return { data, args };
@@ -50,6 +51,52 @@ describe('metric_expression', () => {
 
       expect(shallow(<MetricChart data={data} args={args} formatFactory={x => x} />))
         .toMatchInlineSnapshot(`
+                <div
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "display": "flex",
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "maxHeight": "100%",
+                      "maxWidth": "100%",
+                      "textAlign": "center",
+                    }
+                  }
+                >
+                  <AutoScale>
+                    <div
+                      style={
+                        Object {
+                          "fontSize": "60pt",
+                          "fontWeight": 600,
+                        }
+                      }
+                    >
+                      10110
+                    </div>
+                    <div
+                      style={
+                        Object {
+                          "fontSize": "24pt",
+                        }
+                      }
+                    >
+                      My fanci metric chart
+                    </div>
+                  </AutoScale>
+                </div>
+            `);
+    });
+
+    test('it does not render title in reduced mode', () => {
+      const { data, args } = sampleArgs();
+
+      expect(
+        shallow(
+          <MetricChart data={data} args={{ ...args, mode: 'reduced' }} formatFactory={x => x} />
+        )
+      ).toMatchInlineSnapshot(`
         <div
           style={
             Object {
@@ -63,7 +110,9 @@ describe('metric_expression', () => {
             }
           }
         >
-          <AutoScale>
+          <AutoScale
+            minScale={0}
+          >
             <div
               style={
                 Object {
@@ -74,15 +123,6 @@ describe('metric_expression', () => {
             >
               10110
             </div>
-            <div
-              style={
-                Object {
-                  "fontSize": "24pt",
-                }
-              }
-            >
-              My fanci metric chart
-            </div>
           </AutoScale>
         </div>
       `);

diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.tsx
@@ -42,6 +42,13 @@ export const metricChart: ExpressionFunction<
       types: ['string'],
       help: 'The column whose value is being displayed',
     },
+    mode: {
+      types: ['string'],
+      options: ['reduced', 'full'],
+      default: 'full',
+      help:
+        'The display mode of the chart - reduced will only show the metric itself without min size',
+    },
   },
   context: {
     types: ['lens_multitable'],
@@ -82,7 +89,7 @@ export function MetricChart({
   args,
   formatFactory,
 }: MetricChartProps & { formatFactory: FormatFactory }) {
-  const { title, accessor } = args;
+  const { title, accessor, mode } = args;
   let value = '-';
   const firstTable = Object.values(data.tables)[0];
 
@@ -109,9 +116,9 @@ export function MetricChart({
         textAlign: 'center',
       }}
     >
-      <AutoScale>
+      <AutoScale minScale={mode === 'reduced' ? 0 : undefined}>
         <div style={{ fontSize: '60pt', fontWeight: 600 }}>{value}</div>
-        <div style={{ fontSize: '24pt' }}>{title}</div>
+        {mode === 'full' && <div style={{ fontSize: '24pt' }}>{title}</div>}
       </AutoScale>
     </div>
   );

diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.test.ts b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.test.ts
@@ -115,6 +115,9 @@ describe('metric_suggestions', () => {
                 "accessor": Array [
                   "bytes",
                 ],
+                "mode": Array [
+                  "reduced",
+                ],
                 "title": Array [
                   "",
                 ],

diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.ts b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.ts
@@ -46,6 +46,7 @@ function getSuggestion(table: TableSuggestion): VisualizationSuggestion<State> {
           arguments: {
             title: [''],
             accessor: [col.columnId],
+            mode: ['reduced'],
           },
         },
       ],

diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/types.ts b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/types.ts
@@ -11,6 +11,7 @@ export interface State {
 
 export interface MetricConfig extends State {
   title: string;
+  mode: 'reduced' | 'full';
 }
 
 export type PersistableState = State;