Skip to content

Commit

Permalink
fix(goal): tooltip actual color (#1302)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickofthyme
nickofthyme committed Aug 17, 2021
1 parent 88adf22 commit dbe9d36
Show file tree
Hide file tree
Showing 13 changed files with 79 additions and 31 deletions.
Binary file added ...ies-test-ts-goal-stories-should-render-actual-tooltip-color-on-hover-1-snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions integration/tests/goal_stories.test.ts
View file
Expand Up @@ -14,4 +14,10 @@ describe('Goal stories', () => {
'http://localhost:9001/?path=/story/goal-alpha--gaps&knob-show target=false&knob-target=260',
);
});
it('should render actual tooltip color on hover', async () => {
await common.expectChartWithMouseAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/goal-alpha--gaps&knob-show target=false&knob-target=260&globals=background:white',
{ right: 245, bottom: 120 },
);
});
});
8 changes: 4 additions & 4 deletions integration/tests/heatmap.test.ts
View file
Expand Up @@ -11,23 +11,23 @@ import { common } from '../page_objects/common';
describe('Heatmap color scale', () => {
it('quantile', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/heatmap-alpha--categorical&globals=backgrounds.value:transparent;themes.value:Light&knob-color scale=quantile&knob-ranges=auto&knob-colors=green, yellow, red',
'http://localhost:9001/?path=/story/heatmap-alpha--categorical&knob-color scale=quantile&knob-ranges=auto&knob-colors=green, yellow, red',
);
});
it('quantize', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/heatmap-alpha--categorical&globals=backgrounds.value:transparent;themes.value:Light&knob-color scale=quantize&knob-ranges=auto&knob-colors=green, yellow, red',
'http://localhost:9001/?path=/story/heatmap-alpha--categorical&knob-color scale=quantize&knob-ranges=auto&knob-colors=green, yellow, red',
);
});
it('threshold', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/heatmap-alpha--categorical&globals=backgrounds.value:transparent;themes.value:Light&knob-color scale=threshold&knob-ranges=10000, 40000&knob-colors=green, yellow, red',
'http://localhost:9001/?path=/story/heatmap-alpha--categorical&knob-color scale=threshold&knob-ranges=10000, 40000&knob-colors=green, yellow, red',
);
});

it('linear', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/heatmap-alpha--categorical&globals=backgrounds.value:transparent;themes.value:Light&knob-color scale=linear&knob-ranges=0, 10000, 25000, 50000, 100000&knob-colors=green, yellow, red, purple',
'http://localhost:9001/?path=/story/heatmap-alpha--categorical&knob-color scale=linear&knob-ranges=0, 10000, 25000, 50000, 100000&knob-colors=green, yellow, red, purple',
);
});
});
8 changes: 4 additions & 4 deletions integration/tests/legend_stories.test.ts
View file
Expand Up @@ -38,19 +38,19 @@ describe('Legend stories', () => {

it('should correctly render multiline nested legend labels', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/legend--piechart&globals=backgrounds.value:!hex(fff);themes.value:Light&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-max legend label lines=0&knob-Number of series=5&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-multiline Legend labels=true&knob-vAlign_Legend=bottom&knob-Partition Layout=sunburst&knob-flatLegend=&knob-showLegendExtra=&knob-legendMaxDepth=2&knob-legendStrategy=key',
'http://localhost:9001/?path=/story/legend--piechart&globals=background:white;theme:light&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-max legend label lines=0&knob-Number of series=5&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-multiline Legend labels=true&knob-vAlign_Legend=bottom&knob-Partition Layout=sunburst&knob-flatLegend=&knob-showLegendExtra=&knob-legendMaxDepth=2&knob-legendStrategy=key',
);
});

it('should correctly render very long multiline legend labels', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&globals=backgrounds.value:transparent;themes.value:Light&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-Number of series=5&knob-Partition Layout=sunburst&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-flatLegend=true&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-legendMaxDepth=3&knob-legendStrategy=key&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-max legend label lines=0&knob-showLegendExtra=true&knob-use long labels=true&knob-vAlign_Legend=bottom',
'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-Number of series=5&knob-Partition Layout=sunburst&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-flatLegend=true&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-legendMaxDepth=3&knob-legendStrategy=key&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-max legend label lines=0&knob-showLegendExtra=true&knob-use long labels=true&knob-vAlign_Legend=bottom',
);
});

it('should breakup multiline legend labels with long continous words', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/legend--inside-chart&globals=backgrounds.value:transparent;themes.value:Light&knob-Inside chart_Legend=false&knob-Legend position_Legend=right&knob-max label lines_Legend=0&knob-Number of series=5&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-long label_Legend=a few separate words then averyongcontinuouswordthatneedstobebrokenup&knob-vAlign_Legend=bottom',
'http://localhost:9001/?path=/story/legend--inside-chart&knob-Inside chart_Legend=false&knob-Legend position_Legend=right&knob-max label lines_Legend=0&knob-Number of series=5&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-long label_Legend=a few separate words then averyongcontinuouswordthatneedstobebrokenup&knob-vAlign_Legend=bottom',
);
});

Expand Down Expand Up @@ -217,7 +217,7 @@ describe('Legend stories', () => {

it.each([0, 1, 3])('should correctly truncate multiline labels up to maxLines set to %d', async (maxLines) => {
await common.expectChartAtUrlToMatchScreenshot(
`http://localhost:9001/?path=/story/legend--inside-chart&globals=backgrounds.value:transparent;themes.value:Light&knob-Number of series=5&knob-Series with long name=3&knob-Inside chart_Legend=false&knob-floating columns_Legend=2&knob-vAlign_Legend=bottom&knob-hAlign_Legend=right&knob-direction_Legend=vertical&knob-max label lines_Legend=${maxLines}&knob-long label_Legend=${longLabel}`,
`http://localhost:9001/?path=/story/legend--inside-chart&knob-Number of series=5&knob-Series with long name=3&knob-Inside chart_Legend=false&knob-floating columns_Legend=2&knob-vAlign_Legend=bottom&knob-hAlign_Legend=right&knob-direction_Legend=vertical&knob-max label lines_Legend=${maxLines}&knob-long label_Legend=${longLabel}`,
);
});
});
Expand Down
16 changes: 11 additions & 5 deletions packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts
View file
Expand Up @@ -8,6 +8,7 @@

import { TooltipInfo } from '../../../../components/tooltip/types';
import { createCustomCachedSelector } from '../../../../state/create_selector';
import { BandViewModel } from '../../layout/types/viewmodel_types';
import { getSpecOrNull } from './goal_spec';
import { getPickedShapes } from './picked_shapes';

Expand All @@ -16,6 +17,11 @@ const EMPTY_TOOLTIP = Object.freeze({
values: [],
});

const getBandColor = (value: number, bands: BandViewModel[]) =>
bands.find(({ value: v }) => {
return v >= value;
})?.fillColor ?? 'white';

/** @internal */
export const getTooltipInfoSelector = createCustomCachedSelector(
[getSpecOrNull, getPickedShapes],
Expand All @@ -29,19 +35,19 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
values: [],
};

pickedShapes.forEach((shape) => {
pickedShapes.forEach(({ actual: value, bands }) => {
tooltipInfo.values.push({
label: 'Actual',
color: 'white',
color: getBandColor(value, bands),
isHighlighted: false,
isVisible: true,
seriesIdentifier: {
specId: spec.id,
key: spec.id,
},
value: shape.actual,
formattedValue: `${shape.actual}`,
datum: shape.actual,
value,
formattedValue: `${value}`,
datum: value,
});
});

Expand Down
1 change: 1 addition & 0 deletions storybook/main.js
View file
Expand Up @@ -11,6 +11,7 @@ module.exports = {
addons: [
'@storybook/addon-knobs',
'@storybook/addon-postcss',
'@storybook/addon-viewport',
'storybook-addon-theme-toggle',
'storybook-addon-background-toggle',
// https://github.com/storybookjs/storybook/issues/12199
Expand Down
1 change: 1 addition & 0 deletions storybook/package.json
View file
Expand Up @@ -21,6 +21,7 @@
},
"devDependencies": {
"@storybook/addon-actions": "~6.2.9",
"@storybook/addon-viewport": "~6.2.9",
"@storybook/addon-knobs": "^6.3.0",
"@storybook/addon-links": "~6.2.9",
"@storybook/addon-postcss": "^2.0.0",
Expand Down
14 changes: 13 additions & 1 deletion storybook/preview.ts
View file
Expand Up @@ -21,7 +21,7 @@ if (process.env.VRT) {
document.querySelector('html')?.classList.add('disable-animations');
}

type Parameter = ThemeParameter & BackgroundParameter;
type Parameter = ThemeParameter & BackgroundParameter & { viewport: any };

const euiLogoUrl =
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8cGF0aCBmaWxsPSIjRkY5NTdEIiBkPSJNMTggMjVjLS41LTUuNS01LjUtMTAuNS0xMS0xMWw3LTdjLjUgNS41IDUuNSAxMC41IDExIDExbC03IDd6Ii8+CiAgPGNpcmNsZSBjeD0iNyIgY3k9IjciIHI9IjciIGZpbGw9IiNGMDRFOTgiLz4KICA8Y2lyY2xlIGN4PSIyNSIgY3k9IjI1IiByPSI3IiBmaWxsPSIjRkVDNTE0Ii8+CiAgPHBhdGggZmlsbD0iIzAwQkZCMyIgZD0iTTMxIDE0Yy03LjE4IDAtMTMtNS44Mi0xMy0xM2gxM3YxM3oiLz4KICA8cGF0aCBmaWxsPSIjMUJBOUY1IiBkPSJNMSAxOGM3LjE4IDAgMTMgNS44MiAxMyAxM0gxVjE4eiIvPgo8L3N2Zz4K';
Expand Down Expand Up @@ -72,6 +72,18 @@ export const parameters: Parameter = {
{ id: 'green', title: 'Green', color: '#00c1b4' },
],
},
viewport: {
viewports: {
vrt: {
// to match vrt default viewport to help with mouse positioning
name: 'VRT Viewport',
styles: {
width: '800px',
height: '600px',
},
},
},
},
};

export const decorators = [StoryWrapper];
4 changes: 2 additions & 2 deletions storybook/stories/annotations/lines/1_x_continuous.tsx
View file
Expand Up @@ -16,6 +16,7 @@ import {
Chart,
LineAnnotation,
LineAnnotationDatum,
LineAnnotationStyle,
ScaleType,
Settings,
} from '@elastic/charts';
Expand All @@ -40,7 +41,7 @@ export const Example = () => {
const data = arrayKnobs('data values', [2.5, 7.2]);
const dataValues = generateAnnotationData(data);

const style = {
const style: LineAnnotationStyle = {
line: {
strokeWidth: 3,
stroke: '#f00',
Expand All @@ -49,7 +50,6 @@ export const Example = () => {
details: {
fontSize: 12,
fontFamily: 'Arial',
fontStyle: 'bold',
fill: 'gray',
padding: 0,
},
Expand Down
14 changes: 11 additions & 3 deletions storybook/stories/annotations/lines/6_test_single_bar_histogram.tsx
View file
Expand Up @@ -9,7 +9,16 @@
import { boolean } from '@storybook/addon-knobs';
import React from 'react';

import { AnnotationDomainType, Axis, BarSeries, Chart, LineAnnotation, ScaleType, Settings } from '@elastic/charts';
import {
AnnotationDomainType,
Axis,
BarSeries,
Chart,
LineAnnotation,
LineAnnotationStyle,
ScaleType,
Settings,
} from '@elastic/charts';
import { Position } from '@elastic/charts/src/utils/common';

import { useBaseTheme } from '../../../use_base_theme';
Expand All @@ -25,7 +34,7 @@ export const Example = () => {
},
];

const style = {
const style: LineAnnotationStyle = {
line: {
strokeWidth: 3,
stroke: '#f00',
Expand All @@ -34,7 +43,6 @@ export const Example = () => {
details: {
fontSize: 12,
fontFamily: 'Arial',
fontStyle: 'bold',
fill: 'gray',
padding: 0,
},
Expand Down
3 changes: 2 additions & 1 deletion storybook/stories/bar/2_label_value.tsx
View file
Expand Up @@ -18,6 +18,7 @@ import {
Position,
ScaleType,
Settings,
PartialTheme,
} from '@elastic/charts';
import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';

Expand Down Expand Up @@ -61,7 +62,7 @@ export const Example = () => {

const debug = boolean('debug', false);

const theme = {
const theme: PartialTheme = {
barSeriesStyle: {
displayValue: {
fontSize: Number(number('value font size', 10)),
Expand Down
6 changes: 3 additions & 3 deletions storybook/stories/wordcloud/1_wordcloud.tsx
View file
Expand Up @@ -10,7 +10,7 @@ import { action } from '@storybook/addon-actions';
import { color, number, select } from '@storybook/addon-knobs';
import React from 'react';

import { Chart, Settings, Wordcloud } from '@elastic/charts';
import { Chart, Settings, Wordcloud, FontStyle } from '@elastic/charts';
import { WeightFn, WordModel } from '@elastic/charts/src/chart_types/wordcloud/layout/types/viewmodel_types';
import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
import { palettes as euiPalettes } from '@elastic/charts/src/utils/themes/colors';
Expand Down Expand Up @@ -245,8 +245,8 @@ export const Example = () => {
startConfig.fontFamily,
);
const fontStyle = template
? startConfig.fontStyle
: select('fontStyle', { normal: 'normal', italic: 'italic' }, startConfig.fontStyle);
? (startConfig.fontStyle as FontStyle)
: select('fontStyle', { normal: 'normal', italic: 'italic' }, startConfig.fontStyle as FontStyle);

const palette = template
? startConfig.palette
Expand Down
29 changes: 21 additions & 8 deletions yarn.lock
View file
Expand Up @@ -4740,6 +4740,23 @@
react-syntax-highlighter "^13.5.3"
regenerator-runtime "^0.13.7"

"@storybook/addon-viewport@~6.2.9":
version "6.2.9"
resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.2.9.tgz#e380de567cea6c24c4e933efa009e80428d5b49e"
integrity sha512-IK2mu5njmfcAT967SJtBOY2B6NPMikySZga9QuaLdSpQxPd3vXKNMVG1CjnduMLeDaAoUlvlJISeEPbYGuE+1A==
dependencies:
"@storybook/addons" "6.2.9"
"@storybook/api" "6.2.9"
"@storybook/client-logger" "6.2.9"
"@storybook/components" "6.2.9"
"@storybook/core-events" "6.2.9"
"@storybook/theming" "6.2.9"
core-js "^3.8.2"
global "^4.4.0"
memoizerific "^1.11.3"
prop-types "^15.7.2"
regenerator-runtime "^0.13.7"

"@storybook/addons@6.2.9":
version "6.2.9"
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.2.9.tgz#b7ba2b9f0e15b852c7d6b57d04fb0a493c57477c"
Expand Down Expand Up @@ -10943,7 +10960,8 @@ eslint-module-utils@^2.6.0:
pkg-dir "^2.0.0"

"eslint-plugin-elastic-charts@link:./packages/eslint-plugin-elastic-charts":
version "1.0.0"
version "0.0.0"
uid ""

eslint-plugin-eslint-comments@^3.2.0:
version "3.2.0"
Expand Down Expand Up @@ -15377,13 +15395,8 @@ lines-and-columns@^1.1.6:
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=

"link-kibana@link:./packages/link_kibana":
version "1.0.0"
dependencies:
chalk "^4.1.1"
change-case "^4.1.2"
glob "^7.1.7"
inquirer "^8.0.0"
ora "^5.4.0"
version "0.0.0"
uid ""

lint-staged@^10.5.3:
version "10.5.3"
Expand Down

0 comments on commit dbe9d36

Please sign in to comment.