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

- support independent color bands from ticks - fix coloring issue on bullet as metric - rename `BulletGraph` to `Bullet` - rename `ColorBandSimpleConfig.classes` to `steps` BREAKING CHANGE: Rename `BulletGraph` to `Bullet` and `ColorBandSimpleConfig.classes` to `steps`
elastic · Feb 13, 2024 · 34fd38b · 34fd38b
1 parent 855e357
commit 34fd38b
Show file tree

Hide file tree

Showing 204 changed files with 476 additions and 268 deletions.
diff --git a/...horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/...horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/...horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...rds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/...rds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
diff --git a/...e/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/...e/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...e/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/...e/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...rds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/...rds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
diff --git a/...e/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/...e/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...c-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/...c-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...c-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/...c-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...tories.test.ts-snapshots/bullet-stories/renders-angular-bullet-chrome-linux.png b/...tories.test.ts-snapshots/bullet-stories/renders-angular-bullet-chrome-linux.png
diff --git a/...t_stories.test.ts-snapshots/bullet-stories/renders-grid-bullet-chrome-linux.png b/...t_stories.test.ts-snapshots/bullet-stories/renders-grid-bullet-chrome-linux.png
diff --git a/...stories.test.ts-snapshots/bullet-stories/renders-single-bullet-chrome-linux.png b/...stories.test.ts-snapshots/bullet-stories/renders-single-bullet-chrome-linux.png
diff --git a/....test.ts-snapshots/bullet-stories/renders-single-column-bullet-chrome-linux.png b/....test.ts-snapshots/bullet-stories/renders-single-column-bullet-chrome-linux.png
diff --git a/...ies.test.ts-snapshots/bullet-stories/renders-single-row-bullet-chrome-linux.png b/...ies.test.ts-snapshots/bullet-stories/renders-single-row-bullet-chrome-linux.png
diff --git a/...subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png b/...subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png
diff --git a/...subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png b/...subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png
diff --git a/...circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/...circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png b/...subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png
diff --git a/...circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/...circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png b/...subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png
diff --git a/...pe-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/...pe-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...pe-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/...pe-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...ype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/...ype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/...e/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/...e/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...ype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/...ype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/...e/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...llet-stories/subtype-circle/should-render-colors-with-config-1-chrome-linux.png b/...llet-stories/subtype-circle/should-render-colors-with-config-1-chrome-linux.png
diff --git a/...llet-stories/subtype-circle/should-render-colors-with-config-2-chrome-linux.png b/...llet-stories/subtype-circle/should-render-colors-with-config-2-chrome-linux.png
diff --git a/...llet-stories/subtype-circle/should-render-colors-with-config-3-chrome-linux.png b/...llet-stories/subtype-circle/should-render-colors-with-config-3-chrome-linux.png
diff --git a/...llet-stories/subtype-circle/should-render-colors-with-config-4-chrome-linux.png b/...llet-stories/subtype-circle/should-render-colors-with-config-4-chrome-linux.png
diff --git a/...ries/subtype-circle/should-render-colors-with-discrete-classes-chrome-linux.png b/...ries/subtype-circle/should-render-colors-with-discrete-classes-chrome-linux.png
diff --git a/...tories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png b/...tories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png
diff --git a/...hots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png b/...hots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png
diff --git a/...let-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png b/...let-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png
diff --git a/...es/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/...es/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png
diff --git a/...btype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/...btype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
diff --git a/...pe-half-circle/color-config-1/should-render-colors-with-config-chrome-linux.png b/...pe-half-circle/color-config-1/should-render-colors-with-config-chrome-linux.png
diff --git a/...pe-half-circle/color-config-2/should-render-colors-with-config-chrome-linux.png b/...pe-half-circle/color-config-2/should-render-colors-with-config-chrome-linux.png
diff --git a/...circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/...circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...pe-half-circle/color-config-3/should-render-colors-with-config-chrome-linux.png b/...pe-half-circle/color-config-3/should-render-colors-with-config-chrome-linux.png
diff --git a/...circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/...circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...pe-half-circle/color-config-4/should-render-colors-with-config-chrome-linux.png b/...pe-half-circle/color-config-4/should-render-colors-with-config-chrome-linux.png
diff --git a/...lf-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/...lf-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...lf-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/...lf-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...alf-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/...alf-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/...e/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/...e/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...alf-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/...alf-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/...e/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...stories/subtype-half-circle/should-render-colors-with-config-1-chrome-linux.png b/...stories/subtype-half-circle/should-render-colors-with-config-1-chrome-linux.png
diff --git a/...stories/subtype-half-circle/should-render-colors-with-config-2-chrome-linux.png b/...stories/subtype-half-circle/should-render-colors-with-config-2-chrome-linux.png
diff --git a/...stories/subtype-half-circle/should-render-colors-with-config-3-chrome-linux.png b/...stories/subtype-half-circle/should-render-colors-with-config-3-chrome-linux.png
diff --git a/...stories/subtype-half-circle/should-render-colors-with-config-4-chrome-linux.png b/...stories/subtype-half-circle/should-render-colors-with-config-4-chrome-linux.png
diff --git a/...subtype-half-circle/should-render-colors-with-discrete-classes-chrome-linux.png b/...subtype-half-circle/should-render-colors-with-discrete-classes-chrome-linux.png
diff --git a/...s/subtype-half-circle/should-render-colors-with-discrete-steps-chrome-linux.png b/...s/subtype-half-circle/should-render-colors-with-discrete-steps-chrome-linux.png
diff --git a/...bullet-stories/subtype-half-circle/should-render-in-dark-theme-chrome-linux.png b/...bullet-stories/subtype-half-circle/should-render-in-dark-theme-chrome-linux.png
diff --git a/...tories/subtype-half-circle/ticks/should-render-with-auto-ticks-chrome-linux.png b/...tories/subtype-half-circle/ticks/should-render-with-auto-ticks-chrome-linux.png
diff --git a/...btype-half-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/...btype-half-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png
diff --git a/...-half-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/...-half-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
diff --git a/...ype-horizontal/color-config-1/should-render-colors-with-config-chrome-linux.png b/...ype-horizontal/color-config-1/should-render-colors-with-config-chrome-linux.png
diff --git a/...ype-horizontal/color-config-2/should-render-colors-with-config-chrome-linux.png b/...ype-horizontal/color-config-2/should-render-colors-with-config-chrome-linux.png
diff --git a/...zontal/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/...zontal/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...ype-horizontal/color-config-3/should-render-colors-with-config-chrome-linux.png b/...ype-horizontal/color-config-3/should-render-colors-with-config-chrome-linux.png
diff --git a/...zontal/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/...zontal/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...ype-horizontal/color-config-4/should-render-colors-with-config-chrome-linux.png b/...ype-horizontal/color-config-4/should-render-colors-with-config-chrome-linux.png
diff --git a/...orizontal/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/...orizontal/nice-domain-false/should-render-with-negative-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...orizontal/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/...orizontal/nice-domain-false/should-render-with-positive-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...horizontal/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/...horizontal/nice-domain-true/should-render-with-negative-values-chrome-linux.png
diff --git a/...l/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/...l/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...l/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/...l/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...horizontal/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/...horizontal/nice-domain-true/should-render-with-positive-values-chrome-linux.png
diff --git a/...l/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/...l/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...-stories/subtype-horizontal/should-render-colors-with-config-1-chrome-linux.png b/...-stories/subtype-horizontal/should-render-colors-with-config-1-chrome-linux.png
diff --git a/...-stories/subtype-horizontal/should-render-colors-with-config-2-chrome-linux.png b/...-stories/subtype-horizontal/should-render-colors-with-config-2-chrome-linux.png
diff --git a/...-stories/subtype-horizontal/should-render-colors-with-config-3-chrome-linux.png b/...-stories/subtype-horizontal/should-render-colors-with-config-3-chrome-linux.png
diff --git a/...-stories/subtype-horizontal/should-render-colors-with-config-4-chrome-linux.png b/...-stories/subtype-horizontal/should-render-colors-with-config-4-chrome-linux.png
diff --git a/.../subtype-horizontal/should-render-colors-with-discrete-classes-chrome-linux.png b/.../subtype-horizontal/should-render-colors-with-discrete-classes-chrome-linux.png
diff --git a/...es/subtype-horizontal/should-render-colors-with-discrete-steps-chrome-linux.png b/...es/subtype-horizontal/should-render-colors-with-discrete-steps-chrome-linux.png
diff --git a/.../bullet-stories/subtype-horizontal/should-render-in-dark-theme-chrome-linux.png b/.../bullet-stories/subtype-horizontal/should-render-in-dark-theme-chrome-linux.png
diff --git a/...stories/subtype-horizontal/ticks/should-render-with-auto-ticks-chrome-linux.png b/...stories/subtype-horizontal/ticks/should-render-with-auto-ticks-chrome-linux.png
diff --git a/...ubtype-horizontal/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/...ubtype-horizontal/ticks/should-render-with-explicit-tick-count-chrome-linux.png
diff --git a/...e-horizontal/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/...e-horizontal/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
diff --git a/...-thirds-circle/color-config-1/should-render-colors-with-config-chrome-linux.png b/...-thirds-circle/color-config-1/should-render-colors-with-config-chrome-linux.png
diff --git a/...-thirds-circle/color-config-2/should-render-colors-with-config-chrome-linux.png b/...-thirds-circle/color-config-2/should-render-colors-with-config-chrome-linux.png
diff --git a/...circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/...circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...-thirds-circle/color-config-3/should-render-colors-with-config-chrome-linux.png b/...-thirds-circle/color-config-3/should-render-colors-with-config-chrome-linux.png
diff --git a/...circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/...circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...-thirds-circle/color-config-4/should-render-colors-with-config-chrome-linux.png b/...-thirds-circle/color-config-4/should-render-colors-with-config-chrome-linux.png
diff --git a/...ds-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/...ds-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...ds-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/...ds-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...rds-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/...rds-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/...e/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/...e/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...rds-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/...rds-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/...e/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...s/subtype-two-thirds-circle/should-render-colors-with-config-1-chrome-linux.png b/...s/subtype-two-thirds-circle/should-render-colors-with-config-1-chrome-linux.png
diff --git a/...s/subtype-two-thirds-circle/should-render-colors-with-config-2-chrome-linux.png b/...s/subtype-two-thirds-circle/should-render-colors-with-config-2-chrome-linux.png
diff --git a/...s/subtype-two-thirds-circle/should-render-colors-with-config-3-chrome-linux.png b/...s/subtype-two-thirds-circle/should-render-colors-with-config-3-chrome-linux.png
diff --git a/...s/subtype-two-thirds-circle/should-render-colors-with-config-4-chrome-linux.png b/...s/subtype-two-thirds-circle/should-render-colors-with-config-4-chrome-linux.png
diff --git a/...e-two-thirds-circle/should-render-colors-with-discrete-classes-chrome-linux.png b/...e-two-thirds-circle/should-render-colors-with-discrete-classes-chrome-linux.png
diff --git a/...ype-two-thirds-circle/should-render-colors-with-discrete-steps-chrome-linux.png b/...ype-two-thirds-circle/should-render-colors-with-discrete-steps-chrome-linux.png
diff --git a/...-stories/subtype-two-thirds-circle/should-render-in-dark-theme-chrome-linux.png b/...-stories/subtype-two-thirds-circle/should-render-in-dark-theme-chrome-linux.png
diff --git a/.../subtype-two-thirds-circle/ticks/should-render-with-auto-ticks-chrome-linux.png b/.../subtype-two-thirds-circle/ticks/should-render-with-auto-ticks-chrome-linux.png
diff --git a/...two-thirds-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/...two-thirds-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png
diff --git a/...hirds-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/...hirds-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
diff --git a/...btype-vertical/color-config-1/should-render-colors-with-config-chrome-linux.png b/...btype-vertical/color-config-1/should-render-colors-with-config-chrome-linux.png
diff --git a/...btype-vertical/color-config-2/should-render-colors-with-config-chrome-linux.png b/...btype-vertical/color-config-2/should-render-colors-with-config-chrome-linux.png
diff --git a/...rtical/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/...rtical/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...btype-vertical/color-config-3/should-render-colors-with-config-chrome-linux.png b/...btype-vertical/color-config-3/should-render-colors-with-config-chrome-linux.png
diff --git a/...rtical/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/...rtical/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...btype-vertical/color-config-4/should-render-colors-with-config-chrome-linux.png b/...btype-vertical/color-config-4/should-render-colors-with-config-chrome-linux.png
diff --git a/...-vertical/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/...-vertical/nice-domain-false/should-render-with-negative-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...ain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...-vertical/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/...-vertical/nice-domain-false/should-render-with-positive-values-chrome-linux.png
diff --git a/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/.../nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...e-vertical/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/...e-vertical/nice-domain-true/should-render-with-negative-values-chrome-linux.png
diff --git a/...l/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/...l/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...l/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/...l/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...e-vertical/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/...e-vertical/nice-domain-true/should-render-with-positive-values-chrome-linux.png
diff --git a/...l/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/...l/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...et-stories/subtype-vertical/should-render-colors-with-config-1-chrome-linux.png b/...et-stories/subtype-vertical/should-render-colors-with-config-1-chrome-linux.png
diff --git a/...et-stories/subtype-vertical/should-render-colors-with-config-2-chrome-linux.png b/...et-stories/subtype-vertical/should-render-colors-with-config-2-chrome-linux.png
diff --git a/...et-stories/subtype-vertical/should-render-colors-with-config-3-chrome-linux.png b/...et-stories/subtype-vertical/should-render-colors-with-config-3-chrome-linux.png
diff --git a/...et-stories/subtype-vertical/should-render-colors-with-config-4-chrome-linux.png b/...et-stories/subtype-vertical/should-render-colors-with-config-4-chrome-linux.png
diff --git a/...es/subtype-vertical/should-render-colors-with-discrete-classes-chrome-linux.png b/...es/subtype-vertical/should-render-colors-with-discrete-classes-chrome-linux.png
diff --git a/...ries/subtype-vertical/should-render-colors-with-discrete-steps-chrome-linux.png b/...ries/subtype-vertical/should-render-colors-with-discrete-steps-chrome-linux.png
diff --git a/...ts/bullet-stories/subtype-vertical/should-render-in-dark-theme-chrome-linux.png b/...ts/bullet-stories/subtype-vertical/should-render-in-dark-theme-chrome-linux.png
diff --git a/...t-stories/subtype-vertical/ticks/should-render-with-auto-ticks-chrome-linux.png b/...t-stories/subtype-vertical/ticks/should-render-with-auto-ticks-chrome-linux.png
diff --git a/.../subtype-vertical/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/.../subtype-vertical/ticks/should-render-with-explicit-tick-count-chrome-linux.png
diff --git a/...ype-vertical/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/...ype-vertical/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
diff --git a/e2e/tests/bullet_stories.test.ts b/e2e/tests/bullet_stories.test.ts
@@ -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 }],
@@ -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`,
         );
       });
 
@@ -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=`,
         );
       });
 

diff --git a/e2e/tests/metric_stories.test.ts b/e2e/tests/metric_stories.test.ts
@@ -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=`,
         );
       });