feat: gauge, goal and bullet graph (alpha) #614

monfera · 2020-03-29T11:19:00Z

Summary

Alpha version for goal, gauge and bullet graph (original is designed by Stephen Few). It can already generate these:

The horizontal and bullet graph layouts increase readability and save space, without losing any of the information. It's also become broadly adopted (SAS, Excel, Tableau, DataWrapper, Qlik, ...), being a baseline to improvement attempts and more standardized than curvy gauge/goal charts that vary a lot more (with or without skeuomorphism), decreasing their readability. A small multiple of bullet graphs has superior comparability, and they're conducive to customization.

As alpha, it still has limitations, addressed in this PR or subsequent small PRs:

limited configurability, therefore
- no dark mode support yet
- non-configurable placement of bottom and central labels
- tick style, tick label placement, target/actual/band geometry thickness, fonts, and most colors can't be configured yet
- not all spec props admit functions yet, eg. ticks needs to be a list of numbers
- no number / tick label formatters yet
there's no text fitting or truncation logic, so texts may overlap with anything
to avoid merge conflicts, this PR doesn't currently DRY up common constants, utils
render code to be simplified / DRYed
simplified tooltip; sometimes the "target" symbol is used for "actual", may need renaming
API might go through breaking change

Closes #520

Checklist

Delete any items that are not applicable to this PR.

Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
~~[ ] This was checked for cross-browser compatibility, including a check against IE11~~
Proper documentation or storybook story was added for features that require explanation or tutorials
~~[ ] Unit tests were updated or added to match the most common scenarios~~

codecov-io · 2020-03-30T16:36:33Z

Codecov Report

Merging #614 into master will decrease coverage by 3.00%.
The diff coverage is 29.85%.

@@            Coverage Diff             @@
##           master     #614      +/-   ##
==========================================
- Coverage   70.79%   67.78%   -3.01%     
==========================================
  Files         220      236      +16     
  Lines        6409     6914     +505     
  Branches     1224     1312      +88     
==========================================
+ Hits         4537     4687     +150     
- Misses       1853     2208     +355     
  Partials       19       19

Impacted Files	Coverage Δ
src/chart_types/index.ts	`100.00% <ø> (ø)`
...types/partition_chart/layout/types/config_types.ts	`100.00% <ø> (ø)`
...es/partition_chart/layout/types/viewmodel_types.ts	`80.00% <ø> (ø)`
...rtition_chart/layout/viewmodel/link_text_layout.ts	`7.31% <0.00%> (-0.80%)`	⬇️
...ypes/partition_chart/layout/viewmodel/viewmodel.ts	`13.28% <0.00%> (-0.22%)`	⬇️
src/chart_types/xy_chart/specs/line_annotation.tsx	`79.48% <ø> (ø)`
src/utils/commons.ts	`100.00% <ø> (ø)`
...art_types/goal_chart/layout/viewmodel/viewmodel.ts	`3.12% <3.12%> (ø)`
...artition_chart/renderer/canvas/canvas_renderers.ts	`6.29% <3.22%> (-0.72%)`	⬇️
...pes/goal_chart/renderer/canvas/canvas_renderers.ts	`9.58% <9.58%> (ø)`
... and 35 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 699783e...499b696. Read the comment docs.

markov00

I've left few comments that should be reviewed before merging.
Seems a very clean implementation and it's interesting the landmark approach to compute position of elements. Although the approach is very clean, it seems that we are moving the computation of geometries inside the rendering phase, making it a bit more difficult to test if not just through canvas snapshots.

src/chart_types/goal_chart/state/selectors/is_tooltip_visible.ts

src/chart_types/goal_chart/state/selectors/on_element_click_caller.ts

src/chart_types/goal_chart/state/selectors/on_element_out_caller.ts

src/chart_types/goal_chart/state/selectors/on_element_over_caller.ts

src/chart_types/goal_chart/state/selectors/scenegraph.ts

markov00 · 2020-03-31T09:31:07Z

stories/goal/goal.stories.tsx

+export { example as spartanGoal } from './5_spartan';
+export { example as spartanHorizontal } from './6_spartan_horizontal';


maybe minimal is more appropriate

src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts

markov00 · 2020-03-31T09:35:36Z

src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts

+    const circular = subtype === 'goal';
+    const vertical = subtype === 'verticalBullet';


These should use the GoalSubType enum

77b9f48

I did it with the current array but that uses numeric indexing, is it a positive with $Values that its input is an object ie. referencing is more readable? (No need to look up what the heck [2] means)

src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts

monfera · 2020-04-03T16:03:49Z

Deferred feedback items so far:
#614 (comment)
#614 (comment)
#614 (comment)
#614 (comment)
Move calcs from render file to viewModel
Activate hover only if pointer is inside, or rather close to the circle

markov00

All looks good to me, I've added a few minor comments that can be addressed in a later stage.
Since this an @alpha version I think it's fine to keep like that the GoalSubType but I kindly suggest to change that to be easier used as an Enumerator more than an array of values

markov00 · 2020-04-14T11:00:55Z

src/chart_types/goal_chart/layout/config/config.ts

+import { TAU } from '../../../partition_chart/layout/utils/math';
+import { configMap } from '../../../partition_chart/layout/config/config';
+
+export const configMetadata = {


nit: We can avoid exporting this, it is not used anywhere except at the end of this file

markov00 · 2020-04-14T11:02:30Z

src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts

+import { GoalSpec } from '../../specs/index';
+
+/** @internal */
+export function shapeViewModel(textMeasure: TextMeasure, spec: GoalSpec, config: Config): ShapeViewModel {


nit: textMeasure is not used in this function, we can remove it completely

markov00 · 2020-04-14T11:08:00Z

src/index.ts

@@ -39,7 +39,8 @@ export {
  FillLabelConfig as PartitionFillLabel,
  PartitionLayout,
 } from './chart_types/partition_chart/layout/types/config_types';
-export { Layer as PartitionLayer } from './chart_types/partition_chart/specs/index';
+export { Partition, Layer as PartitionLayer } from './chart_types/partition_chart/specs/index';
+export { Goal } from './chart_types/goal_chart/specs/index';


nit: do you still need help on that?

markov00 · 2020-04-14T11:09:53Z

stories/goal/6_minimal_horizontal.tsx

+      labelMinor="(thousand USD)  "
+      centralMajor="280"
+      centralMinor="target: 260"
+      config={config}


nit: if the config is the default one, we should avoid showing it on the story.

# [18.3.0](v18.2.2...v18.3.0) (2020-04-15) ### Bug Fixes * remove series with undefined splitSeriesAccessor values ([#627](#627)) ([59f0f6e](59f0f6e)) ### Features * gauge, goal and bullet graph (alpha) ([#614](#614)) ([5669178](5669178)) * **partition:** add legend and highlighters ([#616](#616)) ([6a4247e](6a4247e)), closes [#486](#486) [#532](#532)

markov00 · 2020-04-15T18:03:34Z

🎉 This PR is included in version 18.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

monfera added 2 commits March 29, 2020 13:05

feat: gauge, goal and bullet graph

b3c94b1

refactor: peer type and util references for now

bfac9aa

monfera added 3 commits March 30, 2020 16:13

test: added story for full circle

4a9ba3e

chore: export lint

d354521

test: story images

092bfe9

markov00 reviewed Mar 31, 2020

View reviewed changes

monfera added 12 commits April 3, 2020 12:36

chore: name for later DRYing w/ pie

2339a81

chore: index.css

11d69b3

chore: remove comment

181f725

chore: remove Partition

c41c9d5

chore: indicate alpha

f56b6c3

fix: export accessor type

4445f21

fix: internals

3d0b0b1

fix: consistent aboveBaseCount

f914eb2

refactor: sideways reference

0189f45

refactor: no spartan; Object.fromEntries

eca7d62

fix: refer to enum/type; generic for configMap

77b9f48

test: image renames due to alpha moniker

1724a80

monfera force-pushed the gauge branch from 42bc4fd to 1724a80 Compare April 3, 2020 15:57

monfera and others added 2 commits April 3, 2020 18:26

fix: more internal exports

adb1fda

Merge branch 'master' into gauge

6b6e057

elastic deleted a comment from monfera Apr 6, 2020

markov00 changed the title ~~feat: gauge, goal and bullet graph~~ feat: gauge, goal and bullet graph (alpha) Apr 6, 2020

monfera added 2 commits April 7, 2020 16:28

Merge branch 'master' into gauge

499b696

Merge branch 'master' into gauge

0b14320

markov00 approved these changes Apr 14, 2020

View reviewed changes

monfera merged commit 5669178 into elastic:master Apr 14, 2020

markov00 added the released Issue released publicly label Apr 15, 2020

nickofthyme mentioned this pull request Apr 16, 2020

update elastic charts to 18.3.0 elastic/kibana#63732

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: gauge, goal and bullet graph (alpha) #614

feat: gauge, goal and bullet graph (alpha) #614

monfera commented Mar 29, 2020 •

edited

Loading

codecov-io commented Mar 30, 2020 •

edited

Loading

markov00 left a comment

markov00 Mar 31, 2020

monfera Apr 3, 2020

markov00 Mar 31, 2020

monfera Apr 3, 2020

monfera commented Apr 3, 2020 •

edited

Loading

markov00 left a comment

markov00 Apr 14, 2020

markov00 Apr 14, 2020

markov00 Apr 14, 2020

markov00 Apr 14, 2020

markov00 commented Apr 15, 2020

		export { example as spartanGoal } from './5_spartan';
		export { example as spartanHorizontal } from './6_spartan_horizontal';

		const circular = subtype === 'goal';
		const vertical = subtype === 'verticalBullet';

feat: gauge, goal and bullet graph (alpha) #614

feat: gauge, goal and bullet graph (alpha) #614

Conversation

monfera commented Mar 29, 2020 • edited Loading

Summary

Checklist

codecov-io commented Mar 30, 2020 • edited Loading

Codecov Report

markov00 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

monfera commented Apr 3, 2020 • edited Loading

markov00 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

markov00 commented Apr 15, 2020

monfera commented Mar 29, 2020 •

edited

Loading

codecov-io commented Mar 30, 2020 •

edited

Loading

monfera commented Apr 3, 2020 •

edited

Loading