Skip to content

Commit

Permalink
fix(metric): background color for bar with interactions (#2248)
Browse files Browse the repository at this point in the history
  • Loading branch information
nickofthyme authored Nov 19, 2023
1 parent b3a95d2 commit dcb56fa
Show file tree
Hide file tree
Showing 42 changed files with 83 additions and 33 deletions.
31 changes: 27 additions & 4 deletions e2e/page_objects/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,23 @@ interface KeyboardKey {
count: number;
}

interface ClickOptions {
/**
* Defaults to `left`.
*/
button?: 'left' | 'right' | 'middle';

/**
* defaults to 1. See [UIEvent.detail].
*/
clickCount?: number;

/**
* Time to wait between `mousedown` and `mouseup` in milliseconds. Defaults to 0.
*/
delay?: number;
}

type KeyboardKeys = Array<KeyboardKey>;

/**
Expand Down Expand Up @@ -278,10 +295,16 @@ export class CommonPage {
* @param selector
*/
clickMouseRelativeToDOMElement =
(page: Page) => async (mousePosition: MousePosition, selector: string, button?: 'left' | 'right' | 'middle') => {
(page: Page) => async (mousePosition: MousePosition, selector: string, options?: ClickOptions) => {
const element = await this.getBoundingClientRect(page)(selector);
const { x, y } = getCursorPosition(mousePosition, element);
await page.mouse.click(x, y, { button });

if (options?.delay) {
// need to skip await to resolve early and capture delay
void page.mouse.click(x, y, options);
} else {
await page.mouse.click(x, y, options);
}
};

/**
Expand Down Expand Up @@ -450,12 +473,12 @@ export class CommonPage {
async (
url: string,
mousePosition: MousePosition,
button?: 'left' | 'right' | 'middle',
clickOptions?: ClickOptions,
options?: ScreenshotElementAtUrlOptions,
) => {
const action = async () => {
await options?.action?.();
await this.clickMouseRelativeToDOMElement(page)(mousePosition, this.chartSelector, button);
await this.clickMouseRelativeToDOMElement(page)(mousePosition, this.chartSelector, clickOptions);
};
await this.expectChartAtUrlToMatchScreenshot(page)(url, {
...options,
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 19 additions & 6 deletions e2e/tests/metric_stories.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,26 @@ test.describe('Metric', () => {
pwEach.describe(['trend', 'bar', 'none'])(
(v) => `Metric - ${v} type`,
(type) => {
eachTheme.test(
async ({ page, urlParam }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
`http://localhost:9001/?path=/story/metric-alpha--basic&${urlParam}&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-color=rgba(157, 66, 66, 0.44)&knob-extra=last <b>5m</b>&knob-is numeric metric=true&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-subtitle=Cluster CPU usage&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-value=55.23&knob-value color=#3c3c3c&knob-value prefix=&knob-value postfix= %&knob-use value color=&knob-show icon=&knob-show value icon=`,
);
eachTheme.describe(
({ urlParam }) => {
const metricUrl = `http://localhost:9001/?path=/story/metric-alpha--basic&${urlParam}&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-color=rgba(157, 66, 66, 0.44)&knob-extra=last <b>5m</b>&knob-is numeric metric=true&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-subtitle=Cluster CPU usage&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-value=55.23&knob-value color=#3c3c3c&knob-value prefix=&knob-value postfix= %&knob-use value color=&knob-show icon=&knob-show value icon=`;
test('should render metric with transparent bg color', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(metricUrl);
});

test('should render metric with hover interaction', async ({ page }) => {
await common.expectChartWithMouseAtUrlToMatchScreenshot(page)(metricUrl, { top: 100, left: 100 });
});

test('should render metric with click interaction', async ({ page }) => {
await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
metricUrl,
{ top: 100, left: 100 },
{ delay: 400 }, // 10ms delay to capture click and hold
);
});
},
(t) => `should render metric with transparent bg color - ${t} theme`,
(t) => `${t} theme`,
);
},
);
Expand Down
20 changes: 12 additions & 8 deletions e2e/tests/tooltip.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,23 @@ test.describe('Tooltip', () => {
await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
{ left: 240, bottom: 260 },
'right',
{ button: 'right' },
);
});

test('pinning over selection', async ({ page }) => {
await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0',
{ left: 220, bottom: 285 },
'right',
{ button: 'right' },
);
});

test('show loading prompt for async actions', async ({ page }) => {
await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=1000',
{ left: 220, bottom: 285 },
'right',
{ button: 'right' },
);
});

Expand All @@ -42,7 +42,9 @@ test.describe('Tooltip', () => {
'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0',
{
action: async () => {
await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right');
await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, {
button: 'right',
});
// table row not visible thus not clickable by playwright
const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type');
await items.nth(5).click();
Expand All @@ -59,7 +61,9 @@ test.describe('Tooltip', () => {
`http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=${delay}`,
{
action: async () => {
await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right');
await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, {
button: 'right',
});
// table row not visible thus not clickable by playwright
const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type');
await items.nth(2).click();
Expand All @@ -75,7 +79,7 @@ test.describe('Tooltip', () => {
await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
'http://localhost:9001/?path=/story/components-tooltip--partition-charts&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
{ left: 245, bottom: 185 },
'right',
{ button: 'right' },
);
});
});
Expand All @@ -85,7 +89,7 @@ test.describe('Tooltip', () => {
await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
'http://localhost:9001/?path=/story/components-tooltip--heatmap-chart&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
{ left: 300, bottom: 180 },
'right',
{ button: 'right' },
);
});
});
Expand All @@ -95,7 +99,7 @@ test.describe('Tooltip', () => {
await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
'http://localhost:9001/?path=/story/components-tooltip--flamegraph&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
{ left: 220, bottom: 220 },
'right',
{ button: 'right' },
);
});
test('show prompt with actions ', async ({ page }) => {
Expand Down
20 changes: 12 additions & 8 deletions packages/charts/src/chart_types/metric/renderer/dom/metric.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import React, { CSSProperties, useState } from 'react';
import { ProgressBar } from './progress';
import { SparkLine, getSparkLineColor } from './sparkline';
import { MetricText } from './text';
import { ColorContrastOptions } from '../../../../common/color_calcs';
import { changeColorLightness } from '../../../../common/color_library_wrappers';
import { ColorContrastOptions, combineColors } from '../../../../common/color_calcs';
import { RGBATupleToString, changeColorLightness, colorToRgba } from '../../../../common/color_library_wrappers';
import { Color } from '../../../../common/colors';
import { DEFAULT_CSS_CURSOR } from '../../../../common/constants';
import { fillTextColor } from '../../../../common/fill_text_color';
Expand Down Expand Up @@ -81,7 +81,9 @@ export const Metric: React.FunctionComponent<{
});

const lightnessAmount = mouseState === 'leave' ? 0 : mouseState === 'enter' ? 0.05 : 0.1;
const interactionColor = changeColorLightness(datum.color, lightnessAmount, 0.8);

const interactionColor = changeColorLightness(hasProgressBar ? backgroundColor : datum.color, lightnessAmount, 0.8);
const blendedBarColor = RGBATupleToString(combineColors(colorToRgba(datum.color), colorToRgba(backgroundColor)));

const datumWithInteractionColor: MetricDatum = {
...datum,
Expand All @@ -91,10 +93,7 @@ export const Metric: React.FunctionComponent<{
const event: MetricElementEvent = { type: 'metricElementEvent', rowIndex, columnIndex };

const containerStyle: CSSProperties = {
backgroundColor:
!isMetricWTrend(datumWithInteractionColor) && !isMetricWProgress(datumWithInteractionColor)
? datumWithInteractionColor.color
: undefined,
backgroundColor: isMetricWTrend(datumWithInteractionColor) ? backgroundColor : datumWithInteractionColor.color,
cursor: onElementClick ? 'pointer' : DEFAULT_CSS_CURSOR,
borderColor: style.border,
};
Expand Down Expand Up @@ -170,7 +169,12 @@ export const Metric: React.FunctionComponent<{
/>
{isMetricWTrend(datumWithInteractionColor) && <SparkLine id={metricHTMLId} datum={datumWithInteractionColor} />}
{isMetricWProgress(datumWithInteractionColor) && (
<ProgressBar datum={datumWithInteractionColor} barBackground={style.barBackground} size={progressBarSize} />
<ProgressBar
datum={datumWithInteractionColor}
barBackground={style.barBackground}
blendedBarColor={blendedBarColor}
size={progressBarSize}
/>
)}
<div className="echMetric--outline" style={{ color: finalTextColor.keyword }}></div>
</div>
Expand Down
18 changes: 12 additions & 6 deletions packages/charts/src/chart_types/metric/renderer/dom/progress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,18 @@ const BASELINE_SIZE = 2;
interface ProgressBarProps {
datum: MetricWProgress | BulletMetricWProgress;
barBackground: Color;
blendedBarColor: Color;
size: 'small';
}

/** @internal */
export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({ datum, barBackground, size }) => {
const { title, value, target, color, valueFormatter, targetFormatter, progressBarDirection } = datum;
export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({
datum,
barBackground,
blendedBarColor,
size,
}) => {
const { title, value, target, valueFormatter, targetFormatter, progressBarDirection } = datum;
const isBullet = isBulletMetric(datum);
const isVertical = progressBarDirection === LayoutDirection.Vertical;
const domain: GenericDomain = isBulletMetric(datum) ? datum.domain : [0, datum.domainMax];
Expand All @@ -54,8 +60,8 @@ export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({ datum,

const targetPlacement = isNil(target) ? null : `calc(${scale(target)}% - ${TARGET_SIZE / 2}px)`;
const zeroPlacement = domainMin >= 0 || domainMax <= 0 ? null : `calc(${scale(0)}% - ${BASELINE_SIZE / 2}px)`;

const labelType = isBullet ? 'Value' : 'Percentage';

return (
<div
className={getDirectionalClasses('Progress', isVertical, size)}
Expand All @@ -73,21 +79,21 @@ export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({ datum,
target || 0,
)}`}
>
<Icon height={TARGET_SIZE} width={TARGET_SIZE} type="downArrow" color={color} />
<Icon height={TARGET_SIZE} width={TARGET_SIZE} type="downArrow" color={blendedBarColor} />
</div>
)}
{zeroPlacement && (
<div
className={getDirectionalClasses('ZeroBaseline', isVertical, size)}
style={{
backgroundColor: color,
backgroundColor: blendedBarColor,
[isVertical ? 'bottom' : 'left']: zeroPlacement,
}}
/>
)}
<div
className={getDirectionalClasses('ProgressBar', isVertical, size)}
style={{ backgroundColor: color, ...positionStyle }}
style={{ ...positionStyle, backgroundColor: blendedBarColor }}
role="meter"
title={isBullet ? `${datum.valueLabels.value}: ${valueFormatter(value)}` : `${scaledValue}%`}
aria-label={title ? `${labelType} of ${title}` : labelType}
Expand Down
2 changes: 1 addition & 1 deletion storybook/parameters.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export const storybookParameters: Parameters = {
name: 'VRT Viewport',
styles: {
width: '785px',
height: '600px',
height: '1000px',
},
},
},
Expand Down

0 comments on commit dcb56fa

Please sign in to comment.