elastic · nickofthyme · Nov 9, 2023 · May 11, 2023 · May 11, 2023 · May 11, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -69,7 +69,7 @@ module.exports = {
     '@typescript-eslint/no-unsafe-call': 0, // seems to have issues with default import types
     '@typescript-eslint/unbound-method': 1,
     '@typescript-eslint/no-redeclare': 0, // we use to declare enum type and object with the same name
-    '@typescript-eslint/no-shadow': 0, // we use shadow mostly within the canvas renderer function when we need a new context
+    '@typescript-eslint/no-shadow': 0,
     '@typescript-eslint/quotes': 0,
     '@typescript-eslint/no-unsafe-argument': 1,
     'unicorn/consistent-function-scoping': 1,
@@ -89,7 +89,7 @@ module.exports = {
     'unicorn/number-literal-case': 0, // use prettier lower case preference
     'global-require': 1,
     'import/no-dynamic-require': 1,
-    'no-shadow': 1,
+    'no-shadow': ['warn', { allow: ['ctx'] }], // allow replacing ctx in canvas renderer functions, too tedious to rename at each level
     'react/no-array-index-key': 1,
     'react/prefer-stateless-function': 1,
     'react/require-default-props': 0,

diff --git a/e2e/helpers.ts b/e2e/helpers.ts
@@ -37,7 +37,7 @@ export interface StoryGroupInfo {
 /**
  * Groups to skip in all vrt.
  */
-const groupsToSkip: Set<string> = new Set(['Components/Tooltip']);
+const groupsToSkip: Set<string> = new Set(['Components/Tooltip', 'Bullet Graph']);
 
 /**
  * Stories to skip in all vrt based by group.

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/...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/...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/...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/...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/...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/.../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/...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/...-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/...-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/...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/...izing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png b/...izing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png
diff --git a/e2e/tests/bullet_stories.test.ts b/e2e/tests/bullet_stories.test.ts
@@ -0,0 +1,141 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+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'];
+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 }],
+  ['positive/negative values', { start: -57, end: 97, value: -12, target: 50 }],
+  ['positive/negative values - reversed', { start: 97, end: -57, value: -12, target: 50 }],
+  ['negative values', { start: -194, end: -5, value: -50, target: -150 }],
+  ['negative values - reversed', { start: -5, end: -194, value: -50, target: -150 }],
+];
+
+test.describe('Bullet stories', () => {
+  test('renders single bullet', async ({ page }) => {
+    await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--single');
+  });
+
+  test('renders angular bullet', async ({ page }) => {
+    await page.setViewportSize({ width: 785, height: 800 });
+    await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--angular');
+  });
+
+  test('renders single row bullet', async ({ page }) => {
+    await page.setViewportSize({ width: 850, height: 800 });
+    await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--single-row');
+  });
+
+  test('renders single column bullet', async ({ page }) => {
+    await common.expectChartAtUrlToMatchScreenshot(page)(
+      'http://localhost:9001/?path=/story/bullet-graph--single-column',
+    );
+  });
+
+  test('renders grid bullet', async ({ page }) => {
+    await page.setViewportSize({ width: 785, height: 1000 });
+    await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--grid');
+  });
+
+  pwEach.describe(BulletGraphSubtype)(
+    (subtype) => `subtype - ${subtype}`,
+    (subtype) => {
+      test('should render in dark theme', async ({ page }) => {
+        await page.setViewportSize({ width: 785, height: 800 });
+        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`,
+        );
+      });
+
+      test.describe('Ticks', () => {
+        test('should render with auto ticks', async ({ page }) => {
+          await page.setViewportSize({ width: 785, height: 800 });
+          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:light&knob-end_General=100&knob-format (numeraljs)_General=0.[0]&knob-niceDomain_Ticks=true&knob-start_General=0&knob-subtype_General=${subtype}&knob-target_General=81&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=10&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-title_General=Error rate&knob-value_General=57&knob-debug=&knob-subtitle_General=`,
+          );
+        });
+
+        test('should render with explicit tick count', async ({ page }) => {
+          await page.setViewportSize({ width: 785, height: 800 });
+          await common.expectChartAtUrlToMatchScreenshot(page)(
+            `http://localhost:9002/?path=/story/bullet-graph--single&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-end_General=100&knob-format%20(numeraljs)_General=0.[0]&knob-niceDomain_Ticks=true&knob-start_General=0&knob-subtype_General=${subtype}&knob-target_General=81&knob-tick%20strategy_Ticks[0]=count&knob-tick%20strategy_Ticks[1]=auto&knob-ticks(approx.%20count)_Ticks=14&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-title_General=Error%20rate&knob-value_General=57&knob-debug=&knob-subtitle_General=`,
+          );
+        });
+
+        test('should render with explicit tick placements', async ({ page }) => {
+          await page.setViewportSize({ width: 785, height: 800 });
+          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:light&knob-end_General=100&knob-format (numeraljs)_General=0.[0]&knob-niceDomain_Ticks=true&knob-start_General=0&knob-subtype_General=${subtype}&knob-target_General=81&knob-tick strategy_Ticks=placements&knob-ticks(approx. count)_Ticks=16&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-title_General=Error rate&knob-value_General=57&knob-debug=&knob-subtitle_General=`,
+          );
+        });
+      });
+
+      // Each color config type
+      pwEach.test([1, 2, 3, 4])(
+        (v) => `should render colors with config - ${v}`,
+        async (page, configIndex) => {
+          await page.setViewportSize({ width: 785, height: 800 });
+          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}`,
+          );
+        },
+      );
+
+      test('should render colors with discrete classes', async ({ page }) => {
+        await page.setViewportSize({ width: 785, height: 800 });
+        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=`,
+        );
+      });
+
+      pwEach.describe([true, false])(
+        (d) => `Nice domain - ${d}`,
+        (niceDomain) => {
+          pwEach.test(testCases)(
+            ([v]) => `should render with ${v}`,
+            async (page, [, { start, end, target, value }]) => {
+              await page.setViewportSize({ width: 785, height: 800 });
+              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:light&knob-debug=&knob-title_General=Error rate&knob-subtitle_General=&knob-value_General=${value}&knob-target_General=${target}&knob-start_General=${start}&knob-end_General=${end}&knob-format (numeraljs)_General=0.[0]&knob-subtype_General=${subtype}&knob-niceDomain_Ticks=${niceDomain}&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=10&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`,
+              );
+            },
+          );
+        },
+      );
+    },
+  );
+
+  pwEach.describe([
+    { subtype: 'vertical', width: '140px' },
+    { subtype: 'horizontal', height: '85px' },
+    { subtype: 'two-thirds-circle', height: '195px' },
+  ])(
+    ({ subtype }) => `Bullet as Metric - ${subtype}`,
+    ({ subtype, height, width }) => {
+      test.describe('Bullet as Metric', () => {
+        pwEach.test(testCases)(
+          ([v]) => `should render with ${v}`,
+          async (page, [, { start, end, target, value }]) => {
+            await page.setViewportSize({ width: 785, height: 800 });
+            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:light&knob-debug=&knob-title_General=Error rate&knob-subtitle_General=&knob-value_General=${value}&knob-target_General=${target}&knob-start_General=${start}&knob-end_General=${end}&knob-format (numeraljs)_General=0.[0]&knob-subtype_General=${subtype}&knob-niceDomain_Ticks=false&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=10&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`,
+              {
+                action: async () => await common.setResizeDimensions(page)({ height, width }),
+              },
+            );
+          },
+        );
+      });
+    },
+  );
+});
diff --git a/e2e_server/server/mocks/@storybook/addon-knobs/index.ts b/e2e_server/server/mocks/@storybook/addon-knobs/index.ts
@@ -59,14 +59,22 @@ export function array(name: string, dftValues: unknown[], options: any, groupId?
   return values;
 }
 
-export function object(name: string, dftValue: unknown, options: any, groupId?: string) {
+export function object(name: string, dftValue: unknown, groupId?: string) {
   const params = getParams();
   const key = getKnobKey(name, groupId);
   const value = params.get(key);
   return value ? JSON.parse(value) : dftValue;
 }
 
 export function optionsKnob(name: string, values: unknown, dftValues: unknown[], options: any, groupId?: string) {
+  const params = getParams();
+  const knobName = getKnobKey(name, groupId);
+
+  // Check for single values first
+  const paramValues = params.getAll(knobName);
+
+  if (paramValues.length > 0) return paramValues;
+
   return array(name, dftValues, options, groupId);
 }
 

diff --git a/package.json b/package.json
@@ -81,7 +81,7 @@
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@storybook/react": "^6.3.7",
-    "@types/chroma-js": "^2.0.0",
+    "@types/chroma-js": "^2.4.2",
     "@types/classnames": "^2.2.7",
     "@types/color": "^3.0.1",
     "@types/core-js": "^2.5.2",