[WIP] New Metric Viz

package.json

@@ -104,7 +104,7 @@
     "@elastic/apm-rum": "^5.11.0",
     "@elastic/apm-rum-react": "^1.4.0",
     "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace",
-    "@elastic/charts": "46.0.1",
+    "@elastic/charts": "../elastic-charts/packages/charts/elastic-charts-v46.4.0.tgz",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.3.0",

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

@@ -49,7 +49,9 @@ export interface VisParams {
 }
 
 export interface MetricOptions {
-  value: string;
+  value: number;
+  domain?: [number, number];
+  formatter: (d: number) => string;
   label: string;
   color?: string;
   bgColor?: string;

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

@@ -69,22 +69,30 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
         const metrics = table.rows.map((row, rowIndex) => {
           let title = column!.name;
           let value: number = row[column!.id];
+          console.log(palette)
           const color = palette ? this.getColor(value, palette) : undefined;
 
           if (isPercentageMode && stops.length) {
             value = (value - min) / (max - min);
           }
-
+          console.log(formatter);
           const formattedValue = formatValue(value, formatter, 'html');
           if (bucketColumnId) {
             const bucketValue = formatValue(row[bucketColumnId], bucketFormatter);
             title = `${bucketValue} - ${title}`;
           }
+          const domain = palette ? [
+            Number.isFinite(palette.rangeMin) ? palette.rangeMin : palette.stops[0],
+            Number.isFinite(palette.rangeMax) ? palette.rangeMax : palette.stops[palette.stops.length -1]
+          ] : undefined;
 
           const shouldBrush = stops.length > 1 && shouldApplyColor(color ?? '');
           return {
             label: title,
-            value: formattedValue,
+            value: value,
+            formatter: (value: number) => formatValue(value, formatter, 'text'),
+            domain: formatter.type.id === 'percent' ? [0,100]: domain,
+            unit: formatter.type.id,
             color: shouldBrush && (style.labelColor ?? false) ? color : undefined,
             bgColor: shouldBrush && (style.bgColor ?? false) ? color : undefined,
             lightText: shouldBrush && (style.bgColor ?? false) && needsLightText(color),
@@ -130,17 +138,17 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
 
     return (
       <MetricComponent
-        autoScaleParams={
-          this.isAutoScaleWithColorizingContainer()
-            ? {
-                containerStyles: {
-                  backgroundColor: metric.bgColor,
-                  minHeight: '100%',
-                  minWidth: '100%',
-                },
-              }
-            : undefined
-        }
+        // autoScaleParams={
+        //   this.isAutoScaleWithColorizingContainer()
+        //     ? {
+        //         containerStyles: {
+        //           // backgroundColor: metric.bgColor,
+        //           minHeight: '100%',
+        //           minWidth: '100%',
+        //         },
+        //       }
+        //     : undefined
+        // }
         key={index}
         metric={metric}
         style={this.props.visParams.metric.style}

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

@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
-import React, { CSSProperties } from 'react';
-import classNames from 'classnames';
+import React from 'react';
 import type { MetricOptions, MetricStyle, MetricVisParam } from '../../common/types';
+import {Chart, DARK_THEME, Metric, Settings} from '@elastic/charts';
 
 interface MetricVisValueProps {
   metric: MetricOptions;
@@ -27,56 +27,87 @@ export const MetricVisValue = ({
   colorFullBackground,
   autoScale,
 }: MetricVisValueProps) => {
-  const containerClassName = classNames('mtrVis__container', {
-    'mtrVis__container--light': metric.lightText,
-    'mtrVis__container-isfilterable': onFilter,
-    'mtrVis__container-isfull': !autoScale && colorFullBackground,
-  });
 
-  // for autoScale true we should add background to upper level so that correct colorize full container
-  const metricComponent = (
-    <div
-      className={containerClassName}
-      style={autoScale && colorFullBackground ? {} : { backgroundColor: metric.bgColor }}
-    >
-      <div
-        data-test-subj="metric_value"
-        className="mtrVis__value"
-        style={{
-          ...(style.spec as CSSProperties),
-          ...(metric.color ? { color: metric.color } : {}),
-        }}
-        /*
-         * Justification for dangerouslySetInnerHTML:
-         * This is one of the visualizations which makes use of the HTML field formatters.
-         * Since these formatters produce raw HTML, this visualization needs to be able to render them as-is, relying
-         * on the field formatter to only produce safe HTML.
-         * `metric.value` is set by the MetricVisComponent, so this component must make sure this value never contains
-         * any unsafe HTML (e.g. by bypassing the field formatter).
-         */
-        dangerouslySetInnerHTML={{ __html: metric.value }} // eslint-disable-line react/no-danger
-      />
-      {labelConfig.show && (
-        <div
-          data-test-subj="metric_label"
-          style={{
-            ...(labelConfig.style.spec as CSSProperties),
-            order: labelConfig.position === 'top' ? -1 : 2,
-          }}
-        >
-          {metric.label}
-        </div>
-      )}
-    </div>
-  );
+  //
+  // const containerClassName = classNames('mtrVis__container', {
+  //   'mtrVis__container--light': metric.lightText,
+  //   'mtrVis__container-isfilterable': onFilter,
+  //   'mtrVis__container-isfull': !autoScale && colorFullBackground,
+  // });
+  //
+  // // for autoScale true we should add background to upper level so that correct colorize full container
+  // const metricComponent = (
+  //   <div
+  //     className={containerClassName}
+  //     style={autoScale && colorFullBackground ? {} : { backgroundColor: metric.bgColor }}
+  //   >
+  //     <div
+  //       data-test-subj="metric_value"
+  //       className="mtrVis__value"
+  //       style={{
+  //         ...(style.spec as CSSProperties),
+  //         ...(metric.color ? { color: metric.color } : {}),
+  //       }}
+  //       /*
+  //        * Justification for dangerouslySetInnerHTML:
+  //        * This is one of the visualizations which makes use of the HTML field formatters.
+  //        * Since these formatters produce raw HTML, this visualization needs to be able to render them as-is, relying
+  //        * on the field formatter to only produce safe HTML.
+  //        * `metric.value` is set by the MetricVisComponent, so this component must make sure this value never contains
+  //        * any unsafe HTML (e.g. by bypassing the field formatter).
+  //        */
+  //       dangerouslySetInnerHTML={{ __html: metric.value }} // eslint-disable-line react/no-danger
+  //     />
+  //     {labelConfig.show && (
+  //       <div
+  //         data-test-subj="metric_label"
+  //         style={{
+  //           ...(labelConfig.style.spec as CSSProperties),
+  //           order: labelConfig.position === 'top' ? -1 : 2,
+  //         }}
+  //       >
+  //         {metric.label}
+  //       </div>
+  //     )}
+  //   </div>
+  // );
+  //
+  // if (onFilter) {
+  //   return (
+  //     <button style={{ display: 'block' }} onClick={() => onFilter()}>
+  //       {metricComponent}
+  //     </button>
+  //   );
+  // }
+  // value: number;
+  // unit: string;
+  // color: Color;
+  // domain?: [min: number, max: number];
+  // title?: string;
+  // subtitle?: string;
+  // extra?: ReactElement;
+  console.log(metric);
 
-  if (onFilter) {
-    return (
-      <button style={{ display: 'block' }} onClick={() => onFilter()}>
-        {metricComponent}
-      </button>
-    );
-  }
+  const value = metric.unit === 'percent' ? Number((metric.value * 100).toFixed(2)) : metric.value;
 
-  return metricComponent;
+  return <div style={{position:"absolute", top:0, left: 0, right: 0, bottom:0}
+  }><Chart>
+    <Settings theme={DARK_THEME} />
+    <Metric
+      id="1"
+      progressMode={[metric.domain ? 'small' : 'full', 'vertical']}
+      data={[
+        [
+          {
+            value: value,
+            color: metric.bgColor,
+            valueFormatter: metric.formatter,
+            domain: metric.domain,
+            title: metric.label,
+            subTitle: metric.lightText,
+          }
+        ]
+      ]}
+    />
+  </Chart></div>;
 };

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

@@ -64,44 +64,15 @@ function getWrappedComponentProps<T>(props: T) {
 
 export function withAutoScale<T>(WrappedComponent: ComponentType<T>) {
   return (props: T & AutoScaleProps) => {
-    // An initial scale of 0 means we always redraw
-    // at least once, which is sub-optimal, but it
-    // prevents an annoying flicker.
-    const { autoScaleParams } = props;
+
     const restProps = getWrappedComponentProps(props);
-    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, autoScaleParams]
-    );
-
-    useEffect(() => {
-      scaleFn();
-    }, [scaleFn]);
 
     return (
-      <div ref={parentRef} style={autoScaleParams?.containerStyles} css={autoScaleWrapperStyle}>
+      <div ref={parentRef} >
         <div
           ref={childrenRef}
-          style={{
-            transform: `scale(${scale || 0})`,
-          }}
         >
           <WrappedComponent {...(restProps as T)} />
         </div>

src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx

@@ -34,7 +34,7 @@ export const getMetricVisRenderer = (
         <KibanaThemeProvider theme$={theme.theme$}>
           <VisualizationContainer
             data-test-subj="mtrVis"
-            className="mtrVis"
+            // className="mtrVis"
             showNoResult={!visData.rows?.length}
             handlers={handlers}
           >

src/plugins/vis_types/timeseries/public/application/components/vis_types/gauge/vis.js

@@ -13,10 +13,10 @@ import { getMetricsField } from '../../lib/get_metrics_field';
 import { createTickFormatter } from '../../lib/tick_formatter';
 import { createFieldFormatter } from '../../lib/create_field_formatter';
 import { get, isUndefined, assign, includes } from 'lodash';
-import { Gauge } from '../../../visualizations/views/gauge';
 import { getLastValue } from '../../../../../common/last_value_utils';
 import { DATA_FORMATTERS } from '../../../../../common/enums';
 import { getOperator, shouldOperate } from '../../../../../common/operators_utils';
+import {Chart, DARK_THEME, Metric, Settings} from "@elastic/charts";
 
 function getColors(props) {
   const { model, visData } = props;
@@ -80,10 +80,28 @@ function GaugeVisualization(props) {
   if (model.gauge_inner_color) params.innerColor = model.gauge_inner_color;
   if (model.gauge_inner_width) params.innerLine = model.gauge_inner_width;
   if (model.gauge_max != null) params.max = model.gauge_max;
-
+  console.log({params})
   return (
     <div className="tvbVis" style={style}>
-      <Gauge {...params} />
+      <Chart>
+        <Settings theme={DARK_THEME} />
+        <Metric
+          id="1"
+          progressBarMode={'small'}
+          progressBarOrientation={'vertical'}
+          data={[
+            [
+              {
+                value: params.metric.data[params.metric.data.length -1][1],
+                domain: [0, 1],
+                valueFormatter: params.metric.formatter,
+                color:  params.metric.color,
+                title: params.metric.label,
+              }
+            ]
+          ]}
+        />
+      </Chart>
     </div>
   );
 }

src/plugins/vis_types/timeseries/public/application/components/vis_types/metric/vis.js

@@ -13,11 +13,11 @@ import { getMetricsField } from '../../lib/get_metrics_field';
 import { createTickFormatter } from '../../lib/tick_formatter';
 import { createFieldFormatter } from '../../lib/create_field_formatter';
 import { get, isUndefined, assign, includes, pick } from 'lodash';
-import { Metric } from '../../../visualizations/views/metric';
 import { DATA_FORMATTERS } from '../../../../../common/enums';
 import { getLastValue } from '../../../../../common/last_value_utils';
 import { isBackgroundInverted } from '../../../lib/set_is_reversed';
 import { getOperator, shouldOperate } from '../../../../../common/operators_utils';
+import { Chart, Metric, DARK_THEME, Settings } from '@elastic/charts';
 
 function getColors(props) {
   const { model, visData } = props;
@@ -73,10 +73,29 @@ function MetricVisualization(props) {
   if (series[1]) {
     params.secondary = series[1];
   }
-
+  console.log(params);
   return (
     <div className="tvbVis" style={style}>
-      <Metric {...params} />
+      <Chart>
+        <Settings theme={DARK_THEME} />
+        <Metric
+          id="1"
+          progressBarMode={'small'}
+          progressBarOrientation={'vertical'}
+          data={[
+            [
+              {
+                value: params.metric.data[params.metric.data.length -1][1],
+                valueFormatter: params.metric.formatter,
+                trend: params.metric.data.length > 1 ? params.metric.data.map(d => ({x: d[0], y: d[1]})) : undefined,
+                color: '#1D1E25',//'#6DCCB1',
+                title: params.metric.label,
+                extra: params.secondary.label ? <span>{params.secondary.label} <b>{params.secondary.formatter(params.secondary.data[params.secondary.data.length -1][1])}</b></span> : undefined
+              }
+            ]
+          ]}
+        />
+      </Chart>
     </div>
   );
 }

src/plugins/visualizations/public/components/visualization_container.tsx

@@ -41,7 +41,7 @@ export const VisualizationContainer = ({
   );
 
   return (
-    <div data-test-subj={dataTestSubj} className={classes}>
+    <div data-test-subj={dataTestSubj} className={classes} style={{padding: 0, borderRadius: '6px'}}>
       <Suspense fallback={fallBack}>
         {error ? (
           <VisualizationError onInit={() => handlers.done()} error={error} />