Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@markov00
markov00 committed May 20, 2022
1 parent 12fdfd6 commit bd635dc
Show file tree
Hide file tree
Showing 10 changed files with 163 additions and 109 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 3 additions & 1 deletion src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
34 changes: 21 additions & 13 deletions src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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}
Expand Down
133 changes: 82 additions & 51 deletions src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>;
};
33 changes: 2 additions & 31 deletions src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...s/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
24 changes: 21 additions & 3 deletions src/plugins/vis_types/timeseries/public/application/components/vis_types/gauge/vis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
);
}
Expand Down
25 changes: 22 additions & 3 deletions src/plugins/vis_types/timeseries/public/application/components/vis_types/metric/vis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/visualizations/public/components/visualization_container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
Loading

0 comments on commit bd635dc

Please sign in to comment.