Merge remote-tracking branch 'upstream/main' into add_possibility_to_…

…configure_labels_params_metric

packages/kbn-optimizer/limits.yml

@@ -116,7 +116,6 @@ pageLoadAssetSize:
   dataViewManagement: 5000
   reporting: 57003
   visTypeHeatmap: 25340
-  screenshotting: 17017
   expressionGauge: 25000
   controls: 34788
   expressionPartitionVis: 26338

src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts

@@ -86,6 +86,13 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
         defaultMessage: 'bucket dimension configuration',
       }),
     },
+    autoScale: {
+      types: ['boolean'],
+      help: i18n.translate('expressionMetricVis.function.autoScale.help', {
+        defaultMessage: 'Enable auto scale',
+      }),
+      required: false,
+    },
   },
   fn(input, args, handlers) {
     if (args.percentageMode && !args.palette?.params) {
@@ -136,6 +143,7 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
               labelColor: args.colorMode === ColorMode.Labels,
               ...args.font,
             },
+            autoScale: args.autoScale,
           },
           dimensions: {
             metrics: args.metric,

src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts

@@ -27,6 +27,7 @@ export interface MetricArguments {
   labelPosition: 'bottom' | 'top';
   metric: ExpressionValueVisDimension[];
   bucket?: ExpressionValueVisDimension;
+  autoScale?: boolean;
 }
 
 export type MetricInput = Datatable;

src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts

@@ -30,6 +30,7 @@ export interface MetricVisParam {
   palette?: CustomPaletteState;
   labels: Labels & { style: Style; position: 'bottom' | 'top' };
   style: MetricStyle;
+  autoScale?: boolean;
 }
 
 export interface VisParams {

src/plugins/chart_expressions/expression_metric/public/components/metric.scss

@@ -6,13 +6,15 @@
 //   mtrChart__legend-isLoading
 
 .mtrVis {
+  @include euiScrollBar;
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
+  overflow: auto;
 }
 
 .mtrVis__value {

src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx

@@ -17,6 +17,7 @@ import { ExpressionValueVisDimension } from '../../../../visualizations/public';
 import { formatValue, shouldApplyColor } from '../utils';
 import { getColumnByAccessor } from '../utils/accessor';
 import { needsLightText } from '../utils/palette';
+import { withAutoScale } from './with_auto_scale';
 
 import './metric.scss';
 
@@ -27,6 +28,8 @@ export interface MetricVisComponentProps {
   renderComplete: () => void;
 }
 
+const AutoScaleMetricVisValue = withAutoScale(MetricVisValue);
+
 class MetricVisComponent extends Component<MetricVisComponentProps> {
   private getColor(value: number, paletteParams: CustomPaletteState) {
     return getPaletteService().get('custom')?.getColorForValue?.(value, paletteParams, {
@@ -108,8 +111,12 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
   };
 
   private renderMetric = (metric: MetricOptions, index: number) => {
+    const MetricComponent = this.props.visParams.metric.autoScale
+      ? AutoScaleMetricVisValue
+      : MetricVisValue;
+
     return (
-      <MetricVisValue
+      <MetricComponent
         key={index}
         metric={metric}
         style={this.props.visParams.metric.style}

src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.styles.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
+
+export const autoScaleWrapperStyle = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  maxWidth: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  lineHeight: euiThemeVars.euiLineHeight,
+});

src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.test.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { computeScale, withAutoScale } from './with_auto_scale';
+import { mount } from 'enzyme';
+
+const mockElement = (clientWidth = 100, clientHeight = 200) => ({
+  clientHeight,
+  clientWidth,
+});
+
+describe('AutoScale', () => {
+  describe('computeScale', () => {
+    it('is 1 if any element is null', () => {
+      expect(computeScale(null, null)).toBe(1);
+      expect(computeScale(mockElement(), null)).toBe(1);
+      expect(computeScale(null, mockElement())).toBe(1);
+    });
+
+    it('is never over 1', () => {
+      expect(computeScale(mockElement(2000, 2000), mockElement(1000, 1000))).toBe(1);
+    });
+
+    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);
+    });
+  });
+
+  describe('withAutoScale', () => {
+    it('renders', () => {
+      const Component = () => <h1>Hoi!</h1>;
+      const WrappedComponent = withAutoScale(Component);
+      expect(mount(<WrappedComponent />)).toMatchSnapshot();
+    });
+  });
+});

src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useRef, useEffect, useState, ComponentType, useMemo } from 'react';
+import { throttle } from 'lodash';
+import { useResizeObserver } from '@elastic/eui';
+import { autoScaleWrapperStyle } from './with_auto_scale.styles';
+
+interface AutoScaleParams {
+  minScale?: number;
+}
+interface ClientDimensionable {
+  clientWidth: number;
+  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,
+  minScale: number = MIN_SCALE
+) {
+  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)), minScale);
+}
+
+export function withAutoScale<T>(
+  WrappedComponent: ComponentType<T>,
+  autoScaleParams?: AutoScaleParams
+) {
+  return (props: T) => {
+    // An initial scale of 0 means we always redraw
+    // at least once, which is sub-optimal, but it
+    // prevents an annoying flicker.
+    const [scale, setScale] = useState(0);
+    const parentRef = useRef<HTMLDivElement>(null);
+    const childrenRef = useRef<HTMLDivElement>(null);
+    const parentDimensions = useResizeObserver(parentRef.current);
+
+    const scaleFn = useMemo(
+      () =>
+        throttle(() => {
+          const newScale = computeScale(
+            { clientHeight: parentDimensions.height, clientWidth: parentDimensions.width },
+            childrenRef.current,
+            autoScaleParams?.minScale
+          );
+
+          // Prevent an infinite render loop
+          if (scale !== newScale) {
+            setScale(newScale);
+          }
+        }),
+      [parentDimensions, setScale, scale]
+    );
+
+    useEffect(() => {
+      scaleFn();
+    }, [scaleFn]);
+
+    return (
+      <div ref={parentRef} css={autoScaleWrapperStyle}>
+        <div
+          ref={childrenRef}
+          style={{
+            transform: `scale(${scale || 0})`,
+          }}
+        >
+          <WrappedComponent {...props} />
+        </div>
+      </div>
+    );
+  };
+}

src/plugins/dashboard/public/application/hooks/use_dashboard_app_state.ts

@@ -185,7 +185,7 @@ export const useDashboardAppState = ({
       // Backwards compatible way of detecting that we are taking a screenshot
       const legacyPrintLayoutDetected =
         screenshotModeService?.isScreenshotMode() &&
-        screenshotModeService.getScreenshotLayout() === 'print';
+        screenshotModeService.getScreenshotContext('layout') === 'print';
 
       const initialDashboardState = {
         ...savedDashboardState,

src/plugins/dashboard/public/services/screenshot_mode.ts

@@ -10,5 +10,3 @@ export type {
   ScreenshotModePluginStart,
   ScreenshotModePluginSetup,
 } from '../../../screenshot_mode/public';
-
-export type { Layout } from '../../../screenshot_mode/common';

src/plugins/screenshot_mode/common/context.test.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getScreenshotContext, setScreenshotContext } from './context';
+
+describe('getScreenshotContext', () => {
+  it('should return a default value if there is no data', () => {
+    expect(getScreenshotContext('key', 'default')).toBe('default');
+  });
+});
+
+describe('setScreenshotContext', () => {
+  it('should store data in the context', () => {
+    setScreenshotContext('key', 'value');
+
+    expect(getScreenshotContext('key')).toBe('value');
+  });
+
+  it('should not overwrite data on repetitive calls', () => {
+    setScreenshotContext('key1', 'value1');
+    setScreenshotContext('key2', 'value2');
+
+    expect(getScreenshotContext('key1')).toBe('value1');
+  });
+});

src/plugins/screenshot_mode/common/context.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// **PLEASE NOTE**
+// The functionality in this file targets a browser environment AND is intended to be used both in public and server.
+// For instance, reporting uses these functions when starting puppeteer to set the current browser into "screenshot" mode.
+
+type Context = Record<string, unknown>;
+
+declare global {
+  interface Window {
+    __KBN_SCREENSHOT_CONTEXT__?: Context;
+  }
+}
+
+/**
+ * Stores a value in the screenshotting context.
+ * @param key Context key to set.
+ * @param value Value to set.
+ */
+export function setScreenshotContext<T = unknown>(key: string, value: T): void {
+  // Literal value to prevent adding an external reference
+  const KBN_SCREENSHOT_CONTEXT = '__KBN_SCREENSHOT_CONTEXT__';
+
+  if (!window[KBN_SCREENSHOT_CONTEXT]) {
+    Object.defineProperty(window, KBN_SCREENSHOT_CONTEXT, {
+      enumerable: true,
+      writable: true,
+      configurable: false,
+      value: {},
+    });
+  }
+
+  window[KBN_SCREENSHOT_CONTEXT]![key] = value;
+}
+
+/**
+ * Retrieves a value from the screenshotting context.
+ * @param key Context key to get.
+ * @param defaultValue Value to return if the key is not found.
+ * @return The value stored in the screenshotting context.
+ */
+export function getScreenshotContext<T = unknown>(key: string, defaultValue?: T): T | undefined {
+  // Literal value to prevent adding an external reference
+  const KBN_SCREENSHOT_CONTEXT = '__KBN_SCREENSHOT_CONTEXT__';
+
+  return (window[KBN_SCREENSHOT_CONTEXT]?.[key] as T) ?? defaultValue;
+}