From bd635dc8527f58918c803e01950e6efda25e88f4 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 20 May 2022 14:02:47 +0200 Subject: [PATCH] WIP --- package.json | 2 +- .../common/types/expression_renderers.ts | 4 +- .../public/components/metric_component.tsx | 34 +++-- .../public/components/metric_value.tsx | 133 +++++++++++------- .../public/components/with_auto_scale.tsx | 33 +---- .../metric_vis_renderer.tsx | 2 +- .../components/vis_types/gauge/vis.js | 24 +++- .../components/vis_types/metric/vis.js | 25 +++- .../components/visualization_container.tsx | 2 +- yarn.lock | 13 +- 10 files changed, 163 insertions(+), 109 deletions(-) diff --git a/package.json b/package.json index 4c7db193368a6..871abba3fe3ae 100644 --- a/package.json +++ b/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/elasticsearch-canary@8.2.0-canary.2", "@elastic/ems-client": "8.3.0", diff --git a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts index 695b7ad4754fa..ba8fcc6d4b2f1 100644 --- a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts +++ b/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; diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx index a7d0eb8cad8c6..158d8d12cf41a 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx @@ -69,22 +69,30 @@ class MetricVisComponent extends Component { 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 { return ( { - 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 = ( -
-
- {labelConfig.show && ( -
- {metric.label} -
- )} -
- ); + // + // 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 = ( + //
+ //
+ // {labelConfig.show && ( + //
+ // {metric.label} + //
+ // )} + //
+ // ); + // + // if (onFilter) { + // return ( + // + // ); + // } + // value: number; + // unit: string; + // color: Color; + // domain?: [min: number, max: number]; + // title?: string; + // subtitle?: string; + // extra?: ReactElement; + console.log(metric); - if (onFilter) { - return ( - - ); - } + const value = metric.unit === 'percent' ? Number((metric.value * 100).toFixed(2)) : metric.value; - return metricComponent; + return
+ + +
; }; diff --git a/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.tsx b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.tsx index b388fdc70b8d3..edc9f59c959ed 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.tsx @@ -64,44 +64,15 @@ function getWrappedComponentProps(props: T) { export function withAutoScale(WrappedComponent: ComponentType) { 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(null); const childrenRef = useRef(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 ( -
+
diff --git a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx index 4026d3c2d1bc6..3f6a08c20c91c 100644 --- a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -34,7 +34,7 @@ export const getMetricVisRenderer = ( diff --git a/src/plugins/vis_types/timeseries/public/application/components/vis_types/gauge/vis.js b/src/plugins/vis_types/timeseries/public/application/components/vis_types/gauge/vis.js index dbe86961db24f..cb5cceccbf0be 100644 --- a/src/plugins/vis_types/timeseries/public/application/components/vis_types/gauge/vis.js +++ b/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 (
- + + + +
); } diff --git a/src/plugins/vis_types/timeseries/public/application/components/vis_types/metric/vis.js b/src/plugins/vis_types/timeseries/public/application/components/vis_types/metric/vis.js index 90e2a57d925a6..1ad2a3ef712d9 100644 --- a/src/plugins/vis_types/timeseries/public/application/components/vis_types/metric/vis.js +++ b/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 (
- + + + 1 ? params.metric.data.map(d => ({x: d[0], y: d[1]})) : undefined, + color: '#1D1E25',//'#6DCCB1', + title: params.metric.label, + extra: params.secondary.label ? {params.secondary.label} {params.secondary.formatter(params.secondary.data[params.secondary.data.length -1][1])} : undefined + } + ] + ]} + /> +
); } diff --git a/src/plugins/visualizations/public/components/visualization_container.tsx b/src/plugins/visualizations/public/components/visualization_container.tsx index bfe3cf3aaa526..31b13e1630fee 100644 --- a/src/plugins/visualizations/public/components/visualization_container.tsx +++ b/src/plugins/visualizations/public/components/visualization_container.tsx @@ -41,7 +41,7 @@ export const VisualizationContainer = ({ ); return ( -
+
{error ? ( handlers.done()} error={error} /> diff --git a/yarn.lock b/yarn.lock index 4d1428bc991a4..b5aa7790c867d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1450,12 +1450,12 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@46.0.1": - version "46.0.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-46.0.1.tgz#2d3bd3de9e4f294ddd9d9969dca1dc1ed5c6f278" - integrity sha512-CWiyEHaxEk9zKOPOm4ISyAluXSxu6pqLdG+ARBu4jQx0t1ROe93vssICHq6JIrQdiMHn44pleQnWZzKzanZtDw== +"@elastic/charts@../elastic-charts/packages/charts/elastic-charts-v46.4.0.tgz": + version "46.4.0" + resolved "../elastic-charts/packages/charts/elastic-charts-v46.4.0.tgz#1c5f5c20c6c3c652b09380763ce8eddc27a92c17" dependencies: "@popperjs/core" "^2.4.0" + bezier-easing "^2.1.0" chroma-js "^2.1.0" classnames "^2.2.6" d3-array "^1.2.4" @@ -9095,6 +9095,11 @@ better-opn@^2.1.1: dependencies: open "^7.0.3" +bezier-easing@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86" + integrity sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY= + big-integer@^1.6.16: version "1.6.48" resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.48.tgz#8fd88bd1632cba4a1c8c3e3d7159f08bb95b4b9e"