Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(bullet): bullet improvements, bug fixes and renaming #2319

Merged
merged 27 commits into from
Feb 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
cc03c58
refactor: rename BulletGraph to Bullet for consistent chart type naming
nickofthyme Jan 26, 2024
b98a96a
fix: tick colors on metric render mode, fixes #2244
nickofthyme Jan 29, 2024
6cc87ea
chore: add isSorted method and tests
nickofthyme Jan 31, 2024
1fedff4
feat: allow independent color bands
nickofthyme Feb 1, 2024
ea75159
chore: update api changes
nickofthyme Feb 1, 2024
8e20c0a
Merge branch 'main' into bullet-tweaks
nickofthyme Feb 1, 2024
4f3a707
test(vrt): update screenshots [skip ci]
elastic-datavis[bot] Feb 2, 2024
7db29a5
fix: add support for independent color on complex config
nickofthyme Feb 9, 2024
f14e62e
chore: fix error with reversed domains, add tests
nickofthyme Feb 9, 2024
39114ea
Merge remote-tracking branch 'origin/bullet-tweaks' into bullet-tweaks
nickofthyme Feb 9, 2024
8fbde1b
fix: toSorted helper logic error
nickofthyme Feb 9, 2024
525cebe
test(vrt): update screenshots [skip ci]
elastic-datavis[bot] Feb 9, 2024
43b9e0c
Merge remote-tracking branch 'origin/bullet-tweaks' into bullet-tweaks
nickofthyme Feb 9, 2024
ba6616e
chore: fix spelling typo
nickofthyme Feb 9, 2024
6432eca
test: update color config tests
nickofthyme Feb 9, 2024
a4a4c79
test(vrt): update screenshots [skip ci]
elastic-datavis[bot] Feb 9, 2024
8aedf1f
fix: sort method back to older version
nickofthyme Feb 9, 2024
b3a1114
Merge branch 'main' into bullet-tweaks
nickofthyme Feb 9, 2024
16b2ec8
fix: complex config for values outside of domain
nickofthyme Feb 12, 2024
b4d9bc7
fix: errors related to classes option
nickofthyme Feb 12, 2024
2632776
chore: rename classes option to steps
nickofthyme Feb 12, 2024
1f88895
Merge remote-tracking branch 'origin/bullet-tweaks' into bullet-tweaks
nickofthyme Feb 12, 2024
a0520dd
Merge branch 'main' into bullet-tweaks
nickofthyme Feb 12, 2024
34331d1
test(vrt): update screenshots [skip ci]
elastic-datavis[bot] Feb 12, 2024
28e3298
fix: default colors from designs
nickofthyme Feb 12, 2024
bde352e
fix: tick label spacing [update-screenshots]
nickofthyme Feb 12, 2024
f6fd3b5
test(vrt): update screenshots [skip ci]
elastic-datavis[bot] Feb 12, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
39 changes: 28 additions & 11 deletions e2e/tests/bullet_stories.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { test } from '@playwright/test';
import { pwEach } from '../helpers';
import { common } from '../page_objects/common';

export const BulletGraphSubtype = ['vertical', 'horizontal', 'circle', 'half-circle', 'two-thirds-circle'];
export const BulletSubtype = ['vertical', 'horizontal', 'circle', 'half-circle', 'two-thirds-circle'];
const testCases: [string, { start: number; end: number; value: number; target: number }][] = [
['positive values', { start: 4, end: 167, value: 50, target: 100 }],
['positive values - reversed', { start: 167, end: 4, value: 50, target: 100 }],
Expand Down Expand Up @@ -44,12 +44,12 @@ test.describe('Bullet stories', () => {
await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--grid');
});

pwEach.describe(BulletGraphSubtype)(
pwEach.describe(BulletSubtype)(
(subtype) => `subtype - ${subtype}`,
(subtype) => {
test('should render in dark theme', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
`http://localhost:9001/?path=/story/bullet-graph--single&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:dark&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"classes":[0,20,40,100],"colors":["&knob-debug=&knob-title_General=Error rate title&knob-subtitle_General=Here is the subtitle&knob-value_General=56&knob-target_General=75&knob-start_General=0&knob-end_General=100&knob-format (numeraljs)_General=0.[0]&knob-subtype_General=${subtype}&knob-niceDomain_Ticks=&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200`,
`http://localhost:9001/?path=/story/bullet-graph--single&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:dark&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"steps":[0,20,40,100],"colors":["&knob-debug=&knob-title_General=Error rate title&knob-subtitle_General=Here is the subtitle&knob-value_General=56&knob-target_General=75&knob-start_General=0&knob-end_General=100&knob-format (numeraljs)_General=0.[0]&knob-subtype_General=${subtype}&knob-niceDomain_Ticks=&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200`,
);
});

Expand All @@ -74,18 +74,35 @@ test.describe('Bullet stories', () => {
});

// Each color config type
pwEach.test([1, 2, 3, 4])(
(v) => `should render colors with config - ${v}`,
async (page, configIndex) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
`http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-color config_Color Bands=${configIndex}&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Palette_Color Bands=0&knob-Config 2 - Steps_Color Bands=5&knob-Config 2 - Reverse_Color Bands=&knob-Config 3 - json_Color Bands={"classes":5,"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[{"color":"red","gte":0,"lt":20},{"color":"green","gte":20,"lte":40},{"color":"blue","gt":40,"lte":{"type":"percentage","value":100}}]&knob-start_Domain=0&knob-end_Domain=100&knob-value_Domain=56&knob-target_Domain=75&knob-niceDomain_Ticks=&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-debug=&knob-subtype=${subtype}`,
);

pwEach.describe([1, 2, 3, 4])(
(v) => `Color config - ${v}`,
(configIndex) => {
test('should render colors with config', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
`http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-color config_Color Bands=${configIndex}&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Palette_Color Bands=0&knob-Config 2 - Steps_Color Bands=5&knob-Config 2 - Reverse_Color Bands=&knob-Config 3 - json_Color Bands={"steps":5,"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[{"color":"red","gte":0,"lt":20},{"color":"green","gte":20,"lte":40},{"color":"blue","gt":40,"lte":{"type":"percentage","value":100}}]&knob-start_Domain=0&knob-end_Domain=100&knob-value_Domain=56&knob-target_Domain=75&knob-niceDomain_Ticks=&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-debug=&knob-subtype=${subtype}`,
);
});

if (configIndex === 3 || configIndex === 4) {
test('renders color bands independent of ticks', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
`http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Config%201%20-%20Color_Color%20Bands=RGBA(70,%20130,%2096,%201)&knob-Config%202%20-%20Steps_Color%20Bands=5&knob-Config%203%20-%20json_Color%20Bands={%22steps%22:3,%22colors%22:[%22rgb(140,%20185,%20189)%22,%22rgb(236,%20177,%2089)%22,%22rgb(182,%20115,%2082)%22]}&knob-Config%204%20-%20json_Color%20Bands=[{%22color%22:%22red%22,%22gte%22:0,%22lt%22:20},{%22color%22:%22green%22,%22gte%22:20,%22lte%22:40},{%22color%22:%22blue%22,%22gt%22:40,%22lte%22:{%22type%22:%22percentage%22,%22value%22:100}}]&knob-color%20config_Color%20Bands=${configIndex}&knob-end_Domain=100&knob-start_Domain=0&knob-subtype=${subtype}&knob-target_Domain=75&knob-tick%20strategy_Ticks=auto&knob-ticks(approx.%20count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-value_Domain=56&knob-Config%202%20-%20Palette_Color%20Bands=0&knob-Config%202%20-%20Reverse_Color%20Bands=&knob-niceDomain_Ticks=&knob-debug=`,
);
});

test('renders color bands independent of ticks flipped domain', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
`http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Config%201%20-%20Color_Color%20Bands=RGBA(70,%20130,%2096,%201)&knob-Config%202%20-%20Steps_Color%20Bands=5&knob-Config%203%20-%20json_Color%20Bands={%22steps%22:3,%22colors%22:[%22rgb(140,%20185,%20189)%22,%22rgb(236,%20177,%2089)%22,%22rgb(182,%20115,%2082)%22]}&knob-Config%204%20-%20json_Color%20Bands=[{%22color%22:%22red%22,%22gte%22:0,%22lt%22:20},{%22color%22:%22green%22,%22gte%22:20,%22lte%22:40},{%22color%22:%22blue%22,%22gt%22:40,%22lte%22:{%22type%22:%22percentage%22,%22value%22:100}}]&knob-color%20config_Color%20Bands=${configIndex}&knob-end_Domain=0&knob-start_Domain=100&knob-subtype=${subtype}&knob-target_Domain=75&knob-tick%20strategy_Ticks=auto&knob-ticks(approx.%20count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-value_Domain=56&knob-Config%202%20-%20Palette_Color%20Bands=0&knob-Config%202%20-%20Reverse_Color%20Bands=&knob-niceDomain_Ticks=&knob-debug=`,
);
});
}
},
);

test('should render colors with discrete classes', async ({ page }) => {
test('should render colors with discrete steps', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
`http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"classes":[0,20,40,100],"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[]&knob-color config_Color Bands=3&knob-end_Domain=100&knob-start_Domain=0&knob-subtype=${subtype}&knob-target_Domain=75&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-value_Domain=56&knob-Config 2 - Palette_Color Bands=0&knob-Config 2 - Reverse_Color Bands=&knob-niceDomain_Ticks=&knob-debug=`,
`http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"steps":[0,20,40,100],"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[]&knob-color config_Color Bands=3&knob-end_Domain=100&knob-start_Domain=0&knob-subtype=${subtype}&knob-target_Domain=75&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-value_Domain=56&knob-Config 2 - Palette_Color Bands=0&knob-Config 2 - Reverse_Color Bands=&knob-niceDomain_Ticks=&knob-debug=`,
);
});

Expand Down
2 changes: 1 addition & 1 deletion e2e/tests/metric_stories.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ test.describe('Metric', () => {
(type) => {
test('should render with blended background color', async ({ page }) => {
await common.expectChartAtUrlToMatchScreenshot(page)(
`http://localhost:9001/?path=/story/metric-alpha--basic&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;background:red;theme:light&knob-Config 1 - Color_Color Bands=rgba(245, 247, 250, 1)&knob-Config 2 - Palette_Color Bands=5&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"classes":5,"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[{"color":"red","gte":0,"lt":20},{"color":"green","gte":20,"lte":40},{"color":"blue","gt":40,"lte":{"type":"percentage","value":100}}]&knob-Domain padding unit=pixel&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-SeriesType=line&knob-Specs to fit (yDomain)=theshold,rect&knob-active tick step=0&knob-add series=true&knob-attach click handler=true&knob-bars padding=0.25&knob-blending background=rgba(255,255,255,1)&knob-color=rgba(51, 143, 200, 0.49)&knob-color config_Color Bands=2&knob-constrain padding=true&knob-dataset=both&knob-debug=true&knob-empty background=rgba(99, 69, 69, 0)&knob-enableHistogramMode=true&knob-end=100&knob-end_Domain=100&knob-end_General=100&knob-extra=last <b>5m</b>&knob-fit Y domain to data=true&knob-format=0&knob-format (numeraljs)_General=0.[0]&knob-hasHistogramBarSeries=true&knob-histogram padding=0.05&knob-is numeric metric=true&knob-max trend data points=30&knob-nice=true&knob-number of columns=4&knob-number of series=1&knob-other series=line&knob-point series alignment=center&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-stacked=true&knob-start=-113&knob-start_Domain=0&knob-start_General=0&knob-subtitle=Cluster CPU usage&knob-subtitle_General=Lorem laborum nostrud consectetur&knob-subtype=two-thirds-circle&knob-subtype_General=vertical&knob-sync cursor=true&knob-target=75&knob-target_Domain=75&knob-target_General=75&knob-theshold - rect={"y0":100,"y1":null}&knob-thesholds - line=200&knob-tick label padding=10&knob-tick strategy_Ticks=auto&knob-tickFormat=0[.]00&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks=-,2,0,,,5,,,1,0,,,1,5,,,0,2,0,,,2,5,,,5,0,,,1,0,0,0,,,2,0,0,,,-,1,0,0,,&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-title_General=Ea consequat voluptate&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-use blending background=true&knob-use custom minInterval of 30s=true&knob-use multilayer time axis=true&knob-use progress bar=true&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=`,
`http://localhost:9001/?path=/story/metric-alpha--basic&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;background:red;theme:light&knob-Config 1 - Color_Color Bands=rgba(245, 247, 250, 1)&knob-Config 2 - Palette_Color Bands=5&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"steps":5,"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[{"color":"red","gte":0,"lt":20},{"color":"green","gte":20,"lte":40},{"color":"blue","gt":40,"lte":{"type":"percentage","value":100}}]&knob-Domain padding unit=pixel&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-SeriesType=line&knob-Specs to fit (yDomain)=theshold,rect&knob-active tick step=0&knob-add series=true&knob-attach click handler=true&knob-bars padding=0.25&knob-blending background=rgba(255,255,255,1)&knob-color=rgba(51, 143, 200, 0.49)&knob-color config_Color Bands=2&knob-constrain padding=true&knob-dataset=both&knob-debug=true&knob-empty background=rgba(99, 69, 69, 0)&knob-enableHistogramMode=true&knob-end=100&knob-end_Domain=100&knob-end_General=100&knob-extra=last <b>5m</b>&knob-fit Y domain to data=true&knob-format=0&knob-format (numeraljs)_General=0.[0]&knob-hasHistogramBarSeries=true&knob-histogram padding=0.05&knob-is numeric metric=true&knob-max trend data points=30&knob-nice=true&knob-number of columns=4&knob-number of series=1&knob-other series=line&knob-point series alignment=center&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-stacked=true&knob-start=-113&knob-start_Domain=0&knob-start_General=0&knob-subtitle=Cluster CPU usage&knob-subtitle_General=Lorem laborum nostrud consectetur&knob-subtype=two-thirds-circle&knob-subtype_General=vertical&knob-sync cursor=true&knob-target=75&knob-target_Domain=75&knob-target_General=75&knob-theshold - rect={"y0":100,"y1":null}&knob-thesholds - line=200&knob-tick label padding=10&knob-tick strategy_Ticks=auto&knob-tickFormat=0[.]00&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks=-,2,0,,,5,,,1,0,,,1,5,,,0,2,0,,,2,5,,,5,0,,,1,0,0,0,,,2,0,0,,,-,1,0,0,,&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-title_General=Ea consequat voluptate&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-use blending background=true&knob-use custom minInterval of 30s=true&knob-use multilayer time axis=true&knob-use progress bar=true&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=`,
);
});

Expand Down
Loading